diff --git a/assets/index.css b/assets/index.css
index e212fe2..5e013f9 100644
--- a/assets/index.css
+++ b/assets/index.css
@@ -48,13 +48,13 @@ input[type=range] {
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
-    background: #bdbdbd;
+    background: #b1b1bc;
     border-radius: 2px;
     height: 4px;
 }
 
 input[type="range"]::-moz-range-track {
-    background: #bdbdbd;
+    background: #b1b1bc;
     height: 4px;
 }
 
@@ -180,3 +180,78 @@ input[type="range"]::-moz-range-progress {
     font-weight: 800;
     text-align: start;
 }
+
+/* Dark mode */
+
+@media(prefers-color-scheme: dark) {
+    * {
+        color: #f9f9fa;
+    }
+
+    body {
+        background: #212529;
+    }
+
+    input[type="range"] {
+        background-color: #2d3339;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+        background: #7a7a8b;
+    }
+
+    input[type="range"]::-moz-range-track {
+        background: #7a7a8b;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+        background: #f9f9fa;
+        border: 4px solid #5e5e72;
+    }
+
+    input[type="range"]::-moz-range-thumb {
+        background: #f9f9fa;
+        border: 4px solid #5e5e72;
+    }
+
+    input[type="range"]::-moz-range-progress {
+        background: #f9f9fa;
+    }
+
+    .room {
+        margin: 0.5rem;
+        background: #2d3339;
+        border-radius: 6px;
+        padding: 0.5rem;
+        transition: all 0.5s ease;
+    }
+
+
+    .room-free {
+        background-color: #3FE1B0;
+    }
+
+    .room-free:hover {
+        box-shadow: 0 4px 8px #b3ffe333;
+    }
+
+    .room-in-use {
+        background-color: #ff6a75;
+    }
+
+    .room-in-use:hover {
+        box-shadow: 0 4px 8px #ff6a7533;
+    }
+
+    .timepicker {
+        border: #384047 solid 1px;
+        background-color: #2d3339;
+        box-shadow: 0 0 0 #00000000;
+    }
+
+    .schedule {
+        border: #384047 solid 1px;
+        background-color: #2d3339;
+        box-shadow: 0 0 0 #00000000;
+    }
+}