diff --git a/research/src/components/Dropdown.svelte b/research/src/components/Dropdown.svelte
index 8f406c6..4b56fd0 100644
--- a/research/src/components/Dropdown.svelte
+++ b/research/src/components/Dropdown.svelte
@@ -1,5 +1,7 @@
 <div class="group flex flex-col relative">
-    <button class="dropbtn flex gap-x-2 items-center hover:text-[#C6FF50]">
+    <button
+        class="dropbtn flex gap-x-2 items-center hover:text-greenLm hover:text-greenLm dark:hover:text-green"
+    >
         Resources
         <span class="">
             <svg
diff --git a/research/src/components/Header.svelte b/research/src/components/Header.svelte
index 63dc37a..5dcfc0d 100644
--- a/research/src/components/Header.svelte
+++ b/research/src/components/Header.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
-    import Sun from './icons/Sun.svelte'
-    import Moon from './icons/Moon.svelte'
     import MobileNav from './MobileNav.svelte'
     import Dropdown from './Dropdown.svelte'
-    import {
-        toggleTheme,
-        getTheme,
-        theme,
-        anotherStuff,
-    } from '../stores/theme.store'
+    import ToggleTheme from './ToggleTheme.svelte'
 </script>
 
 <header class="py-8 px-6 lg:px-32 max-w-screen-3xl m-auto w-full">
@@ -32,19 +25,7 @@
             </a>
         </div>
 
-        <div class="flex items-center">
-            <!-- <button
-                id="btn"
-                class="h-12 w-12 rounded-lg pr-8 hover:bg-gray-100 dark:hover:bg-gray-700"
-                on:click={toggleTheme}
-            >
-                {#if $theme === 'dark'}
-                    <Sun />
-                {:else}
-                    <Moon />
-                {/if}
-            </button> -->
-
+        <div class="flex items-center gap-0 md:gap-2 lg:gap-4">
             <MobileNav />
 
             <div class="font-bold hidden lg:flex items-center gap-x-8">
@@ -53,7 +34,8 @@
                 <a
                     href="https://2077.xyz/support"
                     target="_blank"
-                    class="font-bold hover:text-green">Support us</a
+                    class="font-bold hover:text-greenLm dark:hover:text-green"
+                    >Support us</a
                 >
                 <a
                     href="#subscribe"
@@ -62,6 +44,7 @@
                     Subscribe
                 </a>
             </div>
+            <ToggleTheme />
         </div>
     </nav>
 </header>
diff --git a/research/src/components/MobileNav.svelte b/research/src/components/MobileNav.svelte
index f91fc0f..e88a779 100644
--- a/research/src/components/MobileNav.svelte
+++ b/research/src/components/MobileNav.svelte
@@ -17,11 +17,12 @@
         on:click={() => (open = false)}
     ></button>
     <div
-        class="fixed inset-y-0 right-0 md:w-2/5 max-w-sm w-full max-w-full bg-white shadow-lg z-50 overflow-y-auto flex flex-col p-4"
+        class="fixed inset-y-0 right-0 md:w-2/5 max-w-sm w-full max-w-full bg-white dark:bg-gray shadow-lg z-50 overflow-y-auto flex flex-col p-4"
         transition:slide={{ duration: 300, easing: quintOut }}
     >
-        <button class="self-end text-gray-700" on:click={() => (open = false)}
-            >Close</button
+        <button
+            class="self-end text-gray-700 p-2"
+            on:click={() => (open = false)}>X</button
         >
         <div class="flex flex-col gap-4">
             <div>
diff --git a/research/src/components/ToggleTheme.svelte b/research/src/components/ToggleTheme.svelte
new file mode 100644
index 0000000..a408672
--- /dev/null
+++ b/research/src/components/ToggleTheme.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+    import { toggleTheme, theme } from '../stores/theme.store'
+    import Sun from './icons/Sun.svelte'
+    import Moon from './icons/Moon.svelte'
+    import { beforeUpdate } from 'svelte'
+
+    beforeUpdate(() => {
+        const theme = localStorage.getItem('theme')
+        if (theme === 'dark') {
+            document.documentElement.classList.add('dark')
+        } else {
+            document.documentElement.classList.remove('dark')
+        }
+    })
+</script>
+
+<button
+    id="btn"
+    class="rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center"
+    on:click={toggleTheme}
+>
+    {#if $theme === 'dark'}
+        <Sun />
+    {:else}
+        <Moon />
+    {/if}
+</button>
diff --git a/research/src/components/icons/ExternalLink.svelte b/research/src/components/icons/ExternalLink.svelte
index 747719c..5e075fa 100644
--- a/research/src/components/icons/ExternalLink.svelte
+++ b/research/src/components/icons/ExternalLink.svelte
@@ -10,12 +10,13 @@
     xmlns="http://www.w3.org/2000/svg"
     style:width={size}
     style:height={size}
+    class="text-current"
 >
     <g id="Interface / External_Link">
         <path
             id="Vector"
             d="M10.0002 5H8.2002C7.08009 5 6.51962 5 6.0918 5.21799C5.71547 5.40973 5.40973 5.71547 5.21799 6.0918C5 6.51962 5 7.08009 5 8.2002V15.8002C5 16.9203 5 17.4801 5.21799 17.9079C5.40973 18.2842 5.71547 18.5905 6.0918 18.7822C6.5192 19 7.07899 19 8.19691 19H15.8031C16.921 19 17.48 19 17.9074 18.7822C18.2837 18.5905 18.5905 18.2839 18.7822 17.9076C19 17.4802 19 16.921 19 15.8031V14M20 9V4M20 4H15M20 4L13 11"
-            stroke="#000000"
+            stroke="currentColor"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
diff --git a/research/src/components/icons/Hamburguer.svelte b/research/src/components/icons/Hamburguer.svelte
index d4e1007..ea9bcf3 100644
--- a/research/src/components/icons/Hamburguer.svelte
+++ b/research/src/components/icons/Hamburguer.svelte
@@ -1,12 +1,28 @@
 <svg
-    class=""
+    class="text-current"
     width="28"
     height="18"
     viewBox="0 0 28 18"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
 >
-    <rect class="" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
-    <rect y="8" width="28" height="2" rx="1" fill="#1b1b1b"></rect>
-    <rect x="8" y="16" width="20" height="2" rx="1" fill="#1b1b1b"></rect>
+    <rect class="text-current" width="28" height="2" rx="1" fill="currentColor"
+    ></rect>
+    <rect
+        class="text-current"
+        y="8"
+        width="28"
+        height="2"
+        rx="1"
+        fill="currentColor"
+    ></rect>
+    <rect
+        class="text-current"
+        x="8"
+        y="16"
+        width="20"
+        height="2"
+        rx="1"
+        fill="currentColor"
+    ></rect>
 </svg>
diff --git a/research/src/components/icons/Moon.svelte b/research/src/components/icons/Moon.svelte
index dc6cf1a..8d2e06f 100644
--- a/research/src/components/icons/Moon.svelte
+++ b/research/src/components/icons/Moon.svelte
@@ -1,4 +1,14 @@
-<svg width="30px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<script lang="ts">
+    export let size = '24px'
+</script>
+
+<svg
+    width="30px"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    style:width={size}
+    style:height={size}
+>
     <path
         fill-rule="evenodd"
         d="M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z"
diff --git a/research/src/components/icons/Sun.svelte b/research/src/components/icons/Sun.svelte
index 027c45e..e349d34 100644
--- a/research/src/components/icons/Sun.svelte
+++ b/research/src/components/icons/Sun.svelte
@@ -1,7 +1,11 @@
+<script lang="ts">
+    export let size = '24px'
+</script>
+
 <svg
     class="fill-yellow-500"
-    width="24"
-    height="24"
+    style:width={size}
+    style:height={size}
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/research/src/layouts/Layout.astro b/research/src/layouts/Layout.astro
index 4e152ea..396c62f 100644
--- a/research/src/layouts/Layout.astro
+++ b/research/src/layouts/Layout.astro
@@ -17,29 +17,19 @@ const _ogImage = new URL(
 ---
 
 <script is:inline>
-    function myFunction() {
-        document.getElementById('myDropdown').classList.toggle('show')
-    }
-
-    /**Dropdown menu logic */
-    window.onclick = function (event) {
-        if (!event.target.matches('.dropbtn')) {
-            var dropdowns = document.getElementsByClassName('dropdown-content')
-            var i
-            for (i = 0; i < dropdowns.length; i++) {
-                var openDropdown = dropdowns[i]
-                if (openDropdown.classList.contains('show')) {
-                    openDropdown.classList.remove('show')
-                }
-            }
-        }
+    // We need this script here to avoid flashing the light theme before the dark theme is applied
+    const theme = localStorage.getItem('theme')
+    if (theme === 'dark') {
+        document.documentElement.classList.add('dark')
+    } else {
+        document.documentElement.classList.remove('dark')
     }
 </script>
 
 <html lang="en" class="h-full">
     <BaseHead ogImage={_ogImage} title={title} description={description} />
-    <Header client:load />
-    <body class="bg-white min-h-screen">
+    <Header client:only />
+    <body class="bg-white dark:bg-black dark:text-white min-h-screen">
         <slot />
     </body><Footer />
 </html>
diff --git a/research/src/stores/theme.store.ts b/research/src/stores/theme.store.ts
index cca8d00..931c458 100644
--- a/research/src/stores/theme.store.ts
+++ b/research/src/stores/theme.store.ts
@@ -7,13 +7,9 @@ const Themes = {
 type Theme = (typeof Themes)[keyof typeof Themes]
 const LOCAL_STORAGE_KEY = 'theme'
 
-export const theme = atom<Theme>(Themes.Light)
-
-export const anotherStuff = atom<boolean>(false)
+export const theme = atom<Theme>(getLocalStorageTheme())
 
 export function toggleTheme() {
-    console.log('toggleTheme called')
-
     const currentTheme = localStorage.getItem(LOCAL_STORAGE_KEY)
 
     if (currentTheme === Themes.Dark || !currentTheme) {
@@ -30,3 +26,17 @@ export function toggleTheme() {
 export function getTheme() {
     return theme
 }
+
+function getLocalStorageTheme(): Theme {
+    const localStorageTheme = localStorage.getItem(LOCAL_STORAGE_KEY)
+
+    if (!localStorageTheme) {
+        return Themes.Light
+    }
+
+    if (localStorageTheme === Themes.Dark) {
+        return Themes.Dark
+    }
+
+    return Themes.Light
+}