diff --git a/components/Footer.tsx b/components/Footer.tsx
index 347d724..06093bf 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -12,16 +12,16 @@ const Footer = () => {
         </div>
         <div className="socials">
           <a href="https://twitter.com/GuusvanMeerveld">
-            <FaTwitter className="img" color="#666" />
+            <FaTwitter className="img" />
           </a>
           <a href="https://www.youtube.com/channel/UCYuqpoMay5SezCBrA_HKVWQ">
-            <FaYoutube className="img" color="#666" />
+            <FaYoutube className="img" />
           </a>
           <a href="https://ko-fi.com/guusvanmeerveld">
-            <FaCoffee className="img" color="#666" />
+            <FaCoffee className="img" />
           </a>
           <a href="https://github.com/guusvanmeerveld">
-            <FaGithub className="img" color="#666" />
+            <FaGithub className="img" />
           </a>
         </div>
       </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 8a5232d..7001545 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,15 +1,25 @@
-const Navbar = () => (
-  <nav className="navigation">
-    <div className="container">
-      <span className="header">Portfolio</span>
-      <div className="items">
-        <a href="/#projects">Projects</a>
-        <a href="/#contact">Contact</a>
-      </div>
-    </div>
-  </nav>
-);
+import { useTheme } from "next-themes";
+import { FaMoon, FaSun } from "react-icons/fa";
+
+const Navbar = () => {
+  const { theme, setTheme } = useTheme();
+  const switchTheme = () => setTheme(theme == "dark" ? "light" : "dark");
 
-const darkButton = () => {};
+  return (
+    <nav className="navigation">
+      <div className="container">
+        <span className="header">Portfolio</span>
+        <div className="items">
+          <a href="/#projects">Projects</a>
+          <a href="/#contact">Contact</a>
+          <a href="https://github.com/guusvanmeerveld/portfolio">Source code</a>
+
+          <FaMoon onClick={switchTheme} className="dark-switch moon" />
+          <FaSun onClick={switchTheme} className="dark-switch sun" />
+        </div>
+      </div>
+    </nav>
+  );
+};
 
 export default Navbar;
diff --git a/components/Projects.tsx b/components/Projects.tsx
index ba1466a..a4e4f99 100644
--- a/components/Projects.tsx
+++ b/components/Projects.tsx
@@ -51,8 +51,8 @@ const Projects = () => (
           <div className="info">
             <div className="title">Keyzo</div>
             Keyzo is an electron-based program written in <b>JavaScript and CSS</b> but I am planning on moving to
-            <b>TypeScript</b>. It's main use is to bring every keybind you will every need into a single program, with a
-            simple and neat interface. <br />
+            <b> TypeScript</b>. It's main use is to bring every keybind you will every need into a single program, with
+            a simple and neat interface. <br />
             <br />
             <a href="https://keyzo.net" className="button">
               Website
diff --git a/package-lock.json b/package-lock.json
index 45675d7..80578c9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,10 +11,10 @@
         "axios": "^0.21.1",
         "next": "10.0.8",
         "next-iron-session": "^4.1.12",
+        "next-themes": "^0.0.12",
         "react": "17.0.1",
         "react-dom": "17.0.1",
         "react-icons": "^4.2.0",
-        "react-lazyload": "^3.2.0",
         "sass": "^1.32.8"
       },
       "devDependencies": {
@@ -252,9 +252,9 @@
       }
     },
     "node_modules/@types/node": {
-      "version": "14.14.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz",
-      "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==",
+      "version": "14.14.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz",
+      "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==",
       "dev": true
     },
     "node_modules/@types/prop-types": {
@@ -576,9 +576,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001197",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz",
-      "integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw=="
+      "version": "1.0.30001198",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz",
+      "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA=="
     },
     "node_modules/chalk": {
       "version": "2.4.2",
@@ -864,11 +864,19 @@
       }
     },
     "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/define-properties": {
@@ -924,9 +932,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.683",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
-      "integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A=="
+      "version": "1.3.685",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz",
+      "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -1624,9 +1632,9 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
     "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "node_modules/nanoid": {
       "version": "3.1.20",
@@ -1730,27 +1738,16 @@
         "node": ">=0.11.0"
       }
     },
-    "node_modules/next-iron-session/node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+    "node_modules/next-themes": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.0.12.tgz",
+      "integrity": "sha512-127ZeerlF/GC17TMVkZkarj3f01weI03b+Ne1xHmmaRs9ouYXVkgyAd60GHRzUnCFVo1NKLcZe0Pr8OnTzrxwQ==",
+      "peerDependencies": {
+        "next": "*",
+        "react": "*",
+        "react-dom": "*"
       }
     },
-    "node_modules/next-iron-session/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
     "node_modules/node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -2194,15 +2191,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "node_modules/react-lazyload": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz",
-      "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==",
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -2417,6 +2405,19 @@
         "debug": "2"
       }
     },
+    "node_modules/stream-parser/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/stream-parser/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -2940,9 +2941,9 @@
       "integrity": "sha512-sDOAZcYwynHFTbLo6n8kIbLiVF3a3BLkrmehJUyEbT9F+Smbi47kLGS2gG2g0fjBLR/Lr1InPD7kXL7FaTqEkw=="
     },
     "@types/node": {
-      "version": "14.14.32",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.32.tgz",
-      "integrity": "sha512-/Ctrftx/zp4m8JOujM5ZhwzlWLx22nbQJiVqz8/zE15gOeEW+uly3FSX4fGFpcfEvFzXcMCJwq9lGVWgyARXhg==",
+      "version": "14.14.33",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.33.tgz",
+      "integrity": "sha512-oJqcTrgPUF29oUP8AsUqbXGJNuPutsetaa9kTQAQce5Lx5dTYWV02ScBiT/k1BX/Z7pKeqedmvp39Wu4zR7N7g==",
       "dev": true
     },
     "@types/prop-types": {
@@ -3211,9 +3212,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001197",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001197.tgz",
-      "integrity": "sha512-8aE+sqBqtXz4G8g35Eg/XEaFr2N7rd/VQ6eABGBmNtcB8cN6qNJhMi6oSFy4UWWZgqgL3filHT8Nha4meu3tsw=="
+      "version": "1.0.30001198",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001198.tgz",
+      "integrity": "sha512-r5GGgESqOPZzwvdLVER374FpQu2WluCF1Z2DSiFJ89KSmGjT0LVKjgv4NcAqHmGWF9ihNpqRI9KXO9Ex4sKsgA=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -3461,11 +3462,11 @@
       "integrity": "sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og=="
     },
     "debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
       "requires": {
-        "ms": "2.0.0"
+        "ms": "2.1.2"
       }
     },
     "define-properties": {
@@ -3513,9 +3514,9 @@
       "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
     },
     "electron-to-chromium": {
-      "version": "1.3.683",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.683.tgz",
-      "integrity": "sha512-8mFfiAesXdEdE0DhkMKO7W9U6VU/9T3VTWwZ+4g84/YMP4kgwgFtQgUxuu7FUMcvSeKSNhFQNU+WZ68BQTLT5A=="
+      "version": "1.3.685",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.685.tgz",
+      "integrity": "sha512-C3oFZNkJ8lz85ADqr3hzpjBc2ciejMRN2SCd/D0hwcqpr6MGxfdN/j89VN6l+ERTuCUvhg0VYsf40Q4qTz4bhQ=="
     },
     "elliptic": {
       "version": "6.5.4",
@@ -4016,9 +4017,9 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
     "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
     },
     "nanoid": {
       "version": "3.1.20",
@@ -4087,23 +4088,14 @@
         "cookie": "^0.4.1",
         "debug": "^4.3.1",
         "iron-store": "^1.3.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        }
       }
     },
+    "next-themes": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.0.12.tgz",
+      "integrity": "sha512-127ZeerlF/GC17TMVkZkarj3f01weI03b+Ne1xHmmaRs9ouYXVkgyAd60GHRzUnCFVo1NKLcZe0Pr8OnTzrxwQ==",
+      "requires": {}
+    },
     "node-fetch": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz",
@@ -4468,12 +4460,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
-    "react-lazyload": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/react-lazyload/-/react-lazyload-3.2.0.tgz",
-      "integrity": "sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==",
-      "requires": {}
-    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -4644,6 +4630,21 @@
       "integrity": "sha1-FhhUhpRCACGhGC/wrxkRwSl2F3M=",
       "requires": {
         "debug": "2"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
       }
     },
     "string_decoder": {
diff --git a/package.json b/package.json
index 67feed2..670cd75 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "axios": "^0.21.1",
     "next": "10.0.8",
     "next-iron-session": "^4.1.12",
+    "next-themes": "^0.0.12",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-icons": "^4.2.0",
@@ -21,4 +22,4 @@
     "@types/react": "^17.0.3",
     "typescript": "^4.2.3"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f6e80e5..91f8eee 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,10 +1,16 @@
+import { ThemeProvider } from "next-themes";
+
 import "../styles/milligram.min.css";
 import "../styles/raleway.css";
 
 import "../styles/sass/index.scss";
 
 function App({ Component, pageProps }) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }
 
 export default App;
diff --git a/styles/sass/binas.scss b/styles/sass/binas.scss
index 6236877..29b563e 100644
--- a/styles/sass/binas.scss
+++ b/styles/sass/binas.scss
@@ -2,7 +2,7 @@
   padding-top: 6rem;
 
   img {
-    border: 0.1rem solid #d1d1d1;
+    border: 0.1rem solid var(--borders);
     border-radius: 5px;
 
     max-width: 100vw;
diff --git a/styles/sass/contact.scss b/styles/sass/contact.scss
index 51fded5..3f539e4 100644
--- a/styles/sass/contact.scss
+++ b/styles/sass/contact.scss
@@ -3,10 +3,18 @@
     font-size: 4rem;
     text-align: center;
     margin-bottom: 3rem;
-    border-top: 0.1rem solid #f4f5f6;
+    border-top: 0.1rem solid var(--borders);
     padding-top: 4rem;
   }
 
+  input,
+  textarea,
+  select {
+    border-color: var(--borders);
+    color: var(--foreground);
+    background-color: var(--secondary);
+  }
+
   font-family: "Raleway";
 
   #message {
diff --git a/styles/sass/footer.scss b/styles/sass/footer.scss
index 84b8a68..1230a28 100644
--- a/styles/sass/footer.scss
+++ b/styles/sass/footer.scss
@@ -1,6 +1,6 @@
 .footer {
-  background-color: #f4f5f6;
-  border-top: 0.1rem solid #d1d1d1;
+  background-color: var(--background);
+  border-top: 0.1rem solid var(--borders);
 
   padding: 3rem;
 
diff --git a/styles/sass/index.scss b/styles/sass/index.scss
index 0a21c58..eaf1041 100644
--- a/styles/sass/index.scss
+++ b/styles/sass/index.scss
@@ -1,3 +1,27 @@
+:root {
+  --background: white;
+  --secondary: #f4f5f6;
+  --borders: #e4e4e4;
+  --foreground: #606c76;
+}
+
+[data-theme="dark"] {
+  .profile {
+    filter: invert(1);
+  }
+
+  --background: #212123;
+  --secondary: #1c1c1c;
+  --borders: #3c3838;
+  --foreground: rgb(236, 235, 235);
+}
+
+body {
+  margin: 0;
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
 @import "nav.scss";
 @import "landing.scss";
 @import "project.scss";
@@ -7,7 +31,3 @@
 @import "binas.scss";
 @import "upload.scss";
 @import "page.scss";
-
-body {
-  margin: 0;
-}
diff --git a/styles/sass/landing.scss b/styles/sass/landing.scss
index 06437fc..2dfb8d6 100644
--- a/styles/sass/landing.scss
+++ b/styles/sass/landing.scss
@@ -1,5 +1,5 @@
 .landing {
-  background: #f4f5f6;
+  background: var(--secondary);
   margin-top: 6rem;
 
   .container {
diff --git a/styles/sass/nav.scss b/styles/sass/nav.scss
index 21e7b82..7b4b56e 100644
--- a/styles/sass/nav.scss
+++ b/styles/sass/nav.scss
@@ -1,7 +1,7 @@
 .navigation {
   z-index: 1;
-  background-color: #f4f5f6;
-  border-bottom: 0.1rem solid #d1d1d1;
+  background-color: var(--secondary);
+  border-bottom: 0.1rem solid var(--borders);
 
   position: fixed;
   top: 0;
@@ -16,9 +16,31 @@
 
   .items {
     float: right;
+    display: flex;
+    justify-content: center;
+
+    .moon {
+      display: none;
+    }
+
+    .dark-switch {
+      font-size: 2rem;
+      margin-left: 1rem;
+      margin-top: 0.25rem;
+    }
 
     a {
       margin-left: 1rem;
     }
   }
 }
+
+[data-theme="dark"] {
+  .sun {
+    display: none;
+  }
+
+  .moon {
+    display: inline-block !important;
+  }
+}
diff --git a/styles/sass/project.scss b/styles/sass/project.scss
index a6dbfe8..492b3c3 100644
--- a/styles/sass/project.scss
+++ b/styles/sass/project.scss
@@ -9,7 +9,7 @@
   margin-top: 3rem;
 
   .project {
-    border-top: 0.1rem solid #f4f5f6;
+    border-top: 0.1rem solid var(--borders);
 
     padding: 5rem 0;