diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 98824ea..164c441 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,7 +1,7 @@
 <div>
-    <nav>
+    <nav id="nav">
         {{ range .Site.Menus.main }}
-        <a href="{{ .URL }}">
+        <a id="nav-button" href="{{ .URL }}">
         {{ $text := print .Name | safeHTML }}
         {{ $text }}
         </a>
diff --git a/static/css/style.css b/static/css/style.css
index ffb4f83..3c5b249 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,7 +1,31 @@
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: black;
+        color: white;
+    }
+
+    a {
+        color: #f9e6e1;
+    }
+}
+
+/* Light Mode */
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: white;
+    }
+}
+
+/* Universal */
 body {
     justify-content: center;
 }
 
+a {
+    text-decoration: none;
+}
+
 header h1 {
     text-align: center;
 }
@@ -19,10 +43,13 @@ footer {
 }
 
 /* For header.html */
-#nav-button {
+#nav {
     background-color: #da644a;
+}
+
+#nav-button {
     color: white;
-    padding: 15px 25px;
+    padding: 0px 25px;
     text-decoration: none;
 }