diff --git a/runbot/__manifest__.py b/runbot/__manifest__.py
index 33460cb1..6690a92a 100644
--- a/runbot/__manifest__.py
+++ b/runbot/__manifest__.py
@@ -88,6 +88,9 @@
             '/runbot/static/src/libs/bootstrap/css/bootstrap.css',
             '/runbot/static/src/libs/fontawesome/css/font-awesome.css',
             '/runbot/static/src/css/runbot.scss',
+            '/runbot/static/src/css/legacy.scss',
+            '/runbot/static/src/css/dark.scss',
+            '/runbot/static/src/css/red404.scss',
 
             '/runbot/static/src/libs/bootstrap/js/bootstrap.bundle.js',
             '/runbot/static/src/js/runbot.js',
diff --git a/runbot/static/src/css/dark.scss b/runbot/static/src/css/dark.scss
new file mode 100644
index 00000000..d9eebce5
--- /dev/null
+++ b/runbot/static/src/css/dark.scss
@@ -0,0 +1,9 @@
+/*
+ * Dark theme
+ */
+
+:root[data-bs-theme=dark] {
+    --btn-default-border: #333;
+    --btn-default-color: var(--bs-body-color);
+    --active-project-color: #CCC;
+}
diff --git a/runbot/static/src/css/legacy.scss b/runbot/static/src/css/legacy.scss
new file mode 100644
index 00000000..4b6e286f
--- /dev/null
+++ b/runbot/static/src/css/legacy.scss
@@ -0,0 +1,33 @@
+/*
+ * Legacy theme
+ */
+
+:root[data-bs-theme=legacy] {
+    /* to match initial runbot style */
+    --bs-success-bg-subtle: #dff0d8;
+    --bs-danger-bg-subtle: #f2dede;
+    --bs-warning-bg-subtle: #fff9e6;
+    --bs-info-bg-subtle: #d9edf7;
+    --bs-info-rgb: 23, 162, 184;
+
+    .text-bg-info {
+        color: #fff !important; // It's black by default, color forced to fit with --bs-info-rgb
+    }
+
+    .btn-success {
+        --bs-btn-color: #fff;
+        --bs-btn-bg: #198754;
+        --bs-btn-border-color: #198754;
+        --bs-btn-hover-color: #fff;
+        --bs-btn-hover-bg: #157347;
+        --bs-btn-hover-border-color: #146c43;
+        --bs-btn-focus-shadow-rgb: 60, 153, 110;
+        --bs-btn-active-color: #fff;
+        --bs-btn-active-bg: #146c43;
+        --bs-btn-active-border-color: #13653f;
+        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+        --bs-btn-disabled-color: #fff;
+        --bs-btn-disabled-bg: #28a745;
+        --bs-btn-disabled-border-color: #28a745;
+    }
+}
diff --git a/runbot/static/src/css/red404.scss b/runbot/static/src/css/red404.scss
new file mode 100644
index 00000000..67a58227
--- /dev/null
+++ b/runbot/static/src/css/red404.scss
@@ -0,0 +1,28 @@
+/*
+ * Red404 theme (color blind)
+ */
+
+:root[data-bs-theme=red404] {
+    --bs-success-bg-subtle: #cdffb9;
+    --bs-danger-bg-subtle: #e67ecf;
+    --bs-warning-bg-subtle: #fae9b1;
+    --bs-info-bg-subtle: #b6e2f8;
+    --bs-info-rgb: 23, 162, 184;
+
+    .btn-danger {
+        --bs-btn-color: #fff;
+        --bs-btn-bg: #990a59;
+        --bs-btn-border-color: #990a59;
+        --bs-btn-hover-color: #fff;
+        --bs-btn-hover-bg: #740442;
+        --bs-btn-hover-border-color: #740442;
+        --bs-btn-focus-shadow-rgb: 60, 153, 110;
+        --bs-btn-active-color: #fff;
+        --bs-btn-active-bg: #740442;
+        --bs-btn-active-border-color: #740442;
+        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+        --bs-btn-disabled-color: #fff;
+        --bs-btn-disabled-bg: #b90e6c;
+        --bs-btn-disabled-border-color: #b90e6c;
+    }
+}
diff --git a/runbot/static/src/css/runbot.scss b/runbot/static/src/css/runbot.scss
index 0ae3ab62..c6ea7bbb 100644
--- a/runbot/static/src/css/runbot.scss
+++ b/runbot/static/src/css/runbot.scss
@@ -1,78 +1,11 @@
 :root {
-	--gray:  #6c757d; /* used for batch limitation */
-}
-
-/*
- * Legacy theme
- */
-
-:root[data-bs-theme=legacy] { /* to match initial runbot style*/
-	--bs-success-bg-subtle: #dff0d8;
-	--bs-danger-bg-subtle: #f2dede;
-	--bs-warning-bg-subtle: #fff9e6;
-	--bs-info-bg-subtle: #d9edf7;
-	--bs-info-rgb: 23, 162, 184;
-}
-:root[data-bs-theme=red404] { 
-	--bs-success-bg-subtle: #cdffb9;
-	--bs-danger-bg-subtle: #e67ecf;
-	--bs-warning-bg-subtle: #fae9b1;
-	--bs-info-bg-subtle: #b6e2f8;
-	--bs-info-rgb: 23, 162, 184;
-}
-
-[data-bs-theme=legacy] .text-bg-info {
-	color: #fff !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
-}
-
-[data-bs-theme=legacy] .btn-success {
-	--bs-btn-color: #fff;
-	--bs-btn-bg: #198754;
-	--bs-btn-border-color: #198754;
-	--bs-btn-hover-color: #fff;
-	--bs-btn-hover-bg: #157347;
-	--bs-btn-hover-border-color: #146c43;
-	--bs-btn-focus-shadow-rgb: 60, 153, 110;
-	--bs-btn-active-color: #fff;
-	--bs-btn-active-bg: #146c43;
-	--bs-btn-active-border-color: #13653f;
-	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-	--bs-btn-disabled-color: #fff;
-	--bs-btn-disabled-bg: #28a745;
-	--bs-btn-disabled-border-color: #28a745;
-  }
-
-[data-bs-theme=red404] .btn-danger {
-	--bs-btn-color: #fff;
-	--bs-btn-bg: #990a59;
-	--bs-btn-border-color: #990a59;
-	--bs-btn-hover-color: #fff;
-	--bs-btn-hover-bg: #740442;
-	--bs-btn-hover-border-color: #740442;
-	--bs-btn-focus-shadow-rgb: 60, 153, 110;
-	--bs-btn-active-color: #fff;
-	--bs-btn-active-bg: #740442;
-	--bs-btn-active-border-color: #740442;
-	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-	--bs-btn-disabled-color: #fff;
-	--bs-btn-disabled-bg: #b90e6c;
-	--bs-btn-disabled-border-color: #b90e6c;
-}
-
-
-:root {
-	--alternative:#ccc;
+	--gray: #6c757d;
+	/* used for batch limitation */
+	--alternative: #ccc;
 	--btn-default-color: var(--bs-body-color);
-	--btn-default-border:#ccc;
+	--btn-default-border: #ccc;
 	--bs-default-rgb: var(--bs-body-color-rgb);
 	--active-project-color: #777;
-	
-}
-
-:root[data-bs-theme=dark] {
-	--btn-default-border:#333;
-	--btn-default-color: var(--bs-body-color);
-	--active-project-color: #CCC;
 }
 
 .btn-default {
@@ -89,29 +22,31 @@
 	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 	--bs-btn-disabled-color: var(--btn-default-color);
 	--bs-btn-disabled-bg: var(--bs-body-bg);
-	--bs-btn-disabled-border-color: var(--btn-default-border);;
+	--bs-btn-disabled-border-color: var(--btn-default-border);
+	;
 }
 
 .btn-info {
-    --bs-btn-color: #FFF;
-    --bs-btn-bg: #17a2b8;
-    --bs-btn-border-color: #17a2b8;
-    --bs-btn-hover-color: #FFF;
-    --bs-btn-hover-bg: #31d2f2;
-    --bs-btn-hover-border-color: #25cff2;
-    --bs-btn-focus-shadow-rgb: 11, 172, 204;
-    --bs-btn-active-color: #FFF;
-    --bs-btn-active-bg: #3dd5f3;
-    --bs-btn-active-border-color: #25cff2;
-    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    --bs-btn-disabled-color: #FFF;
-    --bs-btn-disabled-bg: #17a2b8;
-    --bs-btn-disabled-border-color: #17a2b8;
+	--bs-btn-color: #FFF;
+	--bs-btn-bg: #17a2b8;
+	--bs-btn-border-color: #17a2b8;
+	--bs-btn-hover-color: #FFF;
+	--bs-btn-hover-bg: #31d2f2;
+	--bs-btn-hover-border-color: #25cff2;
+	--bs-btn-focus-shadow-rgb: 11, 172, 204;
+	--bs-btn-active-color: #FFF;
+	--bs-btn-active-bg: #3dd5f3;
+	--bs-btn-active-border-color: #25cff2;
+	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--bs-btn-disabled-color: #FFF;
+	--bs-btn-disabled-bg: #17a2b8;
+	--bs-btn-disabled-border-color: #17a2b8;
 }
 
 
 .accordion {
-	--bs-accordion-btn-padding-y: 0.3rem; /* more condensed build error views */
+	--bs-accordion-btn-padding-y: 0.3rem;
+	/* more condensed build error views */
 }
 
 .text-bg-default {
@@ -120,11 +55,13 @@
 }
 
 .table-responsive {
-	display: block;  /* more condensed table, to replace */
+	display: block;
+	/* more condensed table, to replace */
 }
 
 .table {
-	--bs-table-bg: transparent; /* Forced to white in bootstrap latest version, hides the color of sub builds, batch commits, ...*/
+	--bs-table-bg: transparent;
+	/* Forced to white in bootstrap latest version, hides the color of sub builds, batch commits, ...*/
 }
 
 /*.accordion-button:not(.collapsed) {
@@ -138,38 +75,38 @@
 
 body {
 	margin: 0;
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.5;
-    text-align: left;
+	font-size: 0.875rem;
+	font-weight: 400;
+	line-height: 1.5;
+	text-align: left;
 }
 
 form {
-    margin: 0;
+	margin: 0;
 }
 
 table {
-    font-size: 0.875rem;
+	font-size: 0.875rem;
 }
 
 .fa {
-	line-height: inherit; /* reset fa icon line height to body height*/
+	line-height: inherit;
+	/* reset fa icon line height to body height*/
 }
 
 a {
 	color: #00A09D;
-    text-decoration: none;
-}
+	text-decoration: none;
 
-a:hover {
-    color: #005452;
-}
+	&:hover {
+		color: #005452;
+	}
 
-a.slots_infos:hover {
-    text-decoration: none;
+	.slots_infos:hover {
+		text-decoration: none;
+	}
 }
 
-
 .breadcrumb-item.active a {
 	color: #6c757d;
 }
@@ -195,26 +132,31 @@ a.slots_infos:hover {
 	content: "\f13a";
 }
 
-body, .table {
+body,
+.table {
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 
-.btn-sm, .btn-group-sm > .btn {
+.btn-sm,
+.btn-group-sm>.btn {
 	padding: 0.25rem 0.5rem;
 	font-size: 0.89rem;
 	line-height: 1.5;
 	border-radius: 0.2rem;
 }
 
-.btn-ssm, .btn-group-ssm > .btn {
+.btn-ssm,
+.btn-group-ssm>.btn {
 	padding: 0.22rem 0.4rem;
 	font-size: 0.82rem;
 	line-height: 1;
 	border-radius: 0.2rem;
 }
 
-.killed, .bg-killed, .bg-killed-light {
+.killed,
+.bg-killed,
+.bg-killed-light {
 	background-color: #aaa;
 }
 
@@ -285,21 +227,21 @@ body, .table {
 
 .batch_header {
 	padding: 6px;
-}
 
-.batch_header:hover {
-	color: var(--bs-body-color);
-	background-color: rgba(0, 0, 0, 0.3)
+	&:hover {
+		color: var(--bs-body-color);
+		background-color: rgba(0, 0, 0, 0.3);
+
+		.header_hover {
+			visibility: visible;
+		}
+	}
 }
 
 .header_hover {
 	visibility: hidden;
 }
 
-.batch_header:hover .header_hover {
-	visibility: visible;
-}
-
 .batch_slots {
 	display: flex;
 	flex-wrap: wrap;
@@ -310,83 +252,67 @@ body, .table {
 	padding: 2px;
 }
 
+.batch_row {
+	.slot_container {
+		flex: 1 0 200px;
+		padding: 0 4px;
+	}
 
-.batch_row .slot_container {
-	flex: 1 0 200px;
-	padding: 0 4px;
-}
-
-.batch_row .slot_filler {
-	width: 100px;
-	height: 0px;
-	flex: 1 0 200px;
-	padding: 0 4px;
+	.slot_filler {
+		width: 100px;
+		height: 0px;
+		flex: 1 0 200px;
+		padding: 0 4px;
+	}
 }
 
 .bundle_row {
 	border-bottom: 1px solid var(--gray);
-}
 
-.bundle_row .batch_commits {
-	font-size: 80%;
-}
+	.batch_commits {
+		font-size: 80%;
+	}
 
-.bundle_row .slot_container {
-	flex: 1 0 50%;
-}
+	.slot_container {
+		flex: 1 0 50%;
+	}
 
-.bundle_row .slot_filler {
-	flex: 1 0 50%;
-}
+	.slot_filler {
+		flex: 1 0 50%;
+	}
 
-.bundle_row .more .batch_commits {
-	display: block;
+	.more .batch_commits {
+		display: block;
+	}
 }
 
-/*.bundle_row .nomore .batch_commits {
-	display: none;
-	padding: 8px;
-}
-
-.bundle_row .nomore.batch_tile:hover .batch_commits {
-	display: block;
-	position: absolute;
-	bottom: 1px;
-	transform: translateY(100%);
-	z-index: 100;
-	border: 1px solid rgba(0, 0, 0, 0.125);
-	border-radius: 0.2rem;
-	box-sizing: border-box;
-	margin-left: -1px;
-}*/
-
 .chart-legend {
 	max-height: calc(100vh - 160px);
 	overflow-y: scroll;
 	overflow-x: hidden;
 	cursor: pointer;
 	padding: 5px;
-}
 
-.chart-legend .label {
-	margin-left: 5px;
-	font-weight: bold;
-}
+	.label {
+		margin-left: 5px;
+		font-weight: bold;
+	}
 
-.chart-legend .disabled .color {
-	visibility: hidden;
-}
+	.disabled .color {
+		visibility: hidden;
+	}
 
-.chart-legend .disabled .label {
-	font-weight: normal;
-	text-decoration: line-through;
-	margin-left: 5px;
-}
+	.disabled .label {
+		font-weight: normal;
+		text-decoration: line-through;
+		margin-left: 5px;
+	}
 
-.chart-legend ul {
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
+	ul {
+		list-style-type: none;
+		margin: 0;
+		padding: 0;
+	}
 }
 
 .limited-height {
@@ -394,24 +320,24 @@ body, .table {
 	overflow: scroll;
 	-ms-overflow-style: none;
 	scrollbar-width: none;
-}
 
-.limited-height > hr {
-	margin: 2px 0px;
-}
+	&:before {
+		content: '';
+		width: 100%;
+		height: 30px;
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		background: linear-gradient(transparent 0px, white 27px);
+	}
 
-.limited-height:before {
-	content: '';
-	width: 100%;
-	height: 30px;
-	position: absolute;
-	left: 0;
-	bottom: 0;
-	background: linear-gradient(transparent 0px, white 27px);
-}
+	&::-webkit-scrollbar {
+		display: none;
+	}
 
-.limited-height::-webkit-scrollbar {
-	display: none;
+	&>hr {
+		margin: 2px 0px;
+	}
 }
 
 .limited-height-toggle:hover {
@@ -422,7 +348,6 @@ body, .table {
 	margin-left: 0px !important;
 }
 
-
 code {
 	white-space: pre-wrap;
-}
\ No newline at end of file
+}