diff --git a/_config.yml b/_config.yml
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,4 @@
-title: 🎩 Doctored
+title: Doctored
 description: "A  blog theme prioritizing uniqueness, complexity, and minimalism."
 github: "https://github.com/joshpinto6/doctored"
 encoding: utf-8
@@ -29,4 +29,5 @@
 
 keep_files:
   - assets/css/tailwind.css
-  - assets/css/tailwind.css.map
+  - assetss/css/tailwind.css.map
+  - assets/js
diff --git a/about.md b/about.md
--- a/about.md
+++ b/about.md
@@ -8,18 +8,22 @@
 
 ## Features
 
-- Dark mode and unique teal colortheme
+- Dark mode and stylish teal colortheme
+  - Dark/light mode toggle
 - Tailwind styling
-- FontAwesome icons (external links)
+- FontAwesome icons
 - Homepage and About Page
 - Navbar and Footer
 - Git site statistics
 
 ## Todo
 
-- Dark/light mode toggle
 - Sidenotes
 - Blog
 - Projects Page
 - Now Page
-- Contact Form
\ No newline at end of file
+- Contact Form
+- 404 page
+- robots.txt
+- rss feed
+- sitemap.xml
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
--- /dev/null
+++ b/favicon.ico
diff --git a/index.md b/index.md
--- a/index.md
+++ b/index.md
@@ -6,6 +6,8 @@
 
 # /home
 
+a couple of _the_ most common questions you might have.
+
 ## What?
 
 - A blog theme which prioritizes uniqueness, technical complexity, and minimalism.
diff --git a/tailwind.config.js b/tailwind.config.js
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,6 +2,7 @@
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'selector',
   content: [
     './_includes/**/*.html',
     './_layouts/**/*.html',
@@ -10,15 +11,21 @@
   ],
   theme: {
     extend: {
-    typography: {
+      typography: {
         DEFAULT: {
-          css: {
+          css: (theme) => ({
             a: {
-            color: colors.teal[200],
-            'text-decoration': 'underline',
-            'text-decoration-style': 'dotted'
+              color: theme('colors.teal.200'),
+              'text-decoration': 'underline',
+              'text-decoration-style': 'dotted',
+              '&:hover': {
+                color: theme('colors.teal.400'),
+              },
+              '@screen dark': {
+                color: theme('colors.teal.400'),
+              },
             }
-          },
+          }),
         },
       },
     },
@@ -26,7 +33,7 @@
       display: ['LibertinusMonoMono'],
       sans: ['sans-serif'],
     },
-   
+
   },
   variants: {},
   plugins: [require('@tailwindcss/typography')],
diff --git a/_includes/foot.html b/_includes/foot.html
--- a/_includes/foot.html
+++ b/_includes/foot.html
@@ -1,10 +1,10 @@
 <div class="flex flex-row justify-between w-full px-10 gap-8">
-    <div class="flex flex-col space-y-4 sm:flex-grow max-w-[1/2] sm:max-w-[30%] font-sans">
-        <h3>{{ site.data.foot.title }} | <span class="text-teal-600">{{ site.description }}</span></h3>
-        <div class="flex flex-row flex-wrap gap-4 text-teal-600">
+    <div class="flex flex-col space-y-4 sm:flex-grow max-w-[1/2] sm:max-w-[40%] font-sans">
+        <h3>{{ site.data.foot.title }} | <span class="dark:text-teal-600 text-teal-700">{{ site.description }}</span></h3>
+        <div class="flex flex-row flex-wrap gap-4 dark:text-teal-600">
             <label for="theme">Color mode:</label>
 
-            <select name="theme" id="theme" class="flex flex-shrink w-fit bg-transparent">
+            <select name="theme" id="theme-dropdown" class="flex flex-shrink w-fit bg-transparent">
                 <option value="dark">Dark</option>
                 <option value="light">Light</option>
                 <option value="system">System</option>
@@ -12,7 +12,7 @@
         </div>
         <p>Site built on {{ site.git.last_commit.commit_date }} from
             <a
-                href="{{ site.github }}/commit/{{ site.git.last_commit.sha }}"><code>{{ site.git.last_commit.short_sha }}</code></a>
+                href="{{ site.github }}/commit/{{ site.git.last_commit.long_sha }}"><code>{{ site.git.last_commit.short_sha }}</code></a>
         </p>
     </div>
     <div class="flex flex-row flex-wrap justify-between flex-grow gap-4">
diff --git a/_includes/head.html b/_includes/head.html
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,8 +1,32 @@
 <head>
     <title>{{ page.title }} | {{ site.title }}</title>
-    
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script>
+        function applyTheme(newTheme, triggeredByDropdown = false) {
+            const isDarkMode = newTheme === 'dark' || (localStorage.theme == 'dark' && !(newTheme === 'light')) || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches);
+            document.documentElement.classList.toggle(
+                'dark',
+                isDarkMode
+            )
+
+            const toggle = document.getElementById('theme-toggle');
+            const dropdown = document.getElementById('theme-dropdown');
+
+            if (toggle) {
+                toggle.innerHTML =
+                    localStorage.theme == "dark" ? '<i class="fas fa-moon"></i>' : !localStorage.theme ? '<i class="fas fa-laptop"></i>' : '<i class="fas fa-sun"></i>';
+            }
+            if (dropdown) {
+                if (!triggeredByDropdown) {
+                    dropdown.dataset.changed = new Date().toISOString();
+                }
+                dropdown.value = localStorage.theme || "system";
+            }
+        }
+        applyTheme();
+    </script>
     <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
     <script src="https://kit.fontawesome.com/a7b73c75c9.js" crossorigin="anonymous"></script>
 </head>
\ No newline at end of file
diff --git a/_includes/nav.html b/_includes/nav.html
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -7,6 +7,6 @@
         {% for entry in site.data.nav.pages %}
           <li><a href="{{ entry.url }}">/{{ entry.title }}</a></li>
         {% endfor %}
-        <li>☀️</li>
+        <li id="theme-toggle" class="dark:text-teal-400 text-teal-800 "></li>
       </ul>
 </div>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -1,8 +1,8 @@
 <html>
 {% include head.html %}
 
-<body class="text-teal-300 bg-teal-900 font-display flex flex-col items-center">
-    <header class="w-full bg-teal-950 flex flex-col items-center py-4 px-4">
+<body class="dark:text-teal-300 text-teal-700 dark:bg-teal-900 bg-teal-100 font-display flex flex-col items-center">
+    <header class="w-full dark:text-teal-700 text-teal-800 dark:bg-teal-950 bg-teal-200 flex flex-col items-center py-4 px-4">
         <div class="max-w-[65ch] w-full">
         {% include nav.html %}
         </div>
@@ -10,11 +10,12 @@
     <div class="prose dark:prose-invert my-8 px-4 max-w-[65ch] w-full">
         {{ content }}
     </div>
-    <footer class="w-full text-teal-400 bg-teal-950 py-6 flex flex-col items-center">
+    <footer class="w-full dark:text-teal-400 text-teal-800 dark:bg-teal-950 bg-teal-200 py-6 flex flex-col items-center">
         <div class="max-w-[70ch] w-full">
        {% include foot.html %}
        </div>
     </footer>
+    <script src="/assets/js/toggle-theme.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/css/main.css
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -16,7 +16,7 @@
 
 @layer components {
     a {
-        @apply text-teal-400 underline decoration-dotted;
+        @apply dark:text-teal-400 text-teal-800 underline decoration-dotted;
     }
 
     h1 {
diff --git a/assets/js/toggle-theme.js b/assets/js/toggle-theme.js
new file mode 100644
--- /dev/null
+++ b/assets/js/toggle-theme.js
@@ -0,0 +1,33 @@
+document.getElementById('theme-toggle').addEventListener('click', (event) => {
+    let newTheme = undefined;
+    if (localStorage.theme === "dark") {
+        localStorage.removeItem('theme')
+    } else if (!localStorage.theme) {
+        newTheme = 'light';
+        localStorage.theme = 'light';
+    } else {
+        newTheme = 'dark';
+        localStorage.theme = 'dark';
+    }
+
+    applyTheme(newTheme);
+});
+
+document.getElementById('theme-dropdown').addEventListener('change', (event) => {
+    if (event.target.dataset.changed ) {
+        event.target.dataset.changed = undefined;
+        if (new Date(event.target.dataset.changed) - new Date() < 1000) {
+            return;
+        }
+    }
+    const selectedTheme = event.target.value;
+    if (selectedTheme === 'light' || selectedTheme === 'dark') {
+        localStorage.theme = selectedTheme;
+    } else {
+        selectedTheme = undefined;
+        localStorage.removeItem('theme');
+    }
+    applyTheme(selectedTheme, true);
+});
+
+applyTheme();