diff --git a/site/src/css/nav.css b/site/src/css/nav.css
index 88f2fc1..fe0f6e2 100644
--- a/site/src/css/nav.css
+++ b/site/src/css/nav.css
@@ -49,7 +49,7 @@ nav a {
     flex-direction: column;
     z-index: 100;
     background-color: var( --color-background-accent );
-    transition: all 0.5s;
+    transition: left 0.5s, top 0.5s;
 }
 
 .nav-top-bar {
diff --git a/site/src/css/style.css b/site/src/css/style.css
index 77427cc..40cacc8 100644
--- a/site/src/css/style.css
+++ b/site/src/css/style.css
@@ -57,6 +57,10 @@ body {
     color: var( --color-text-primary );
 }
 
+body.loaded {
+    transition: color 0.5s, background-color 0.5s;
+}
+
 .material-symbols-outlined {
     font-variation-settings:
     'FILL' 0,
diff --git a/site/src/css/timeline.css b/site/src/css/timeline.css
index a4d267a..234d9ca 100644
--- a/site/src/css/timeline.css
+++ b/site/src/css/timeline.css
@@ -46,4 +46,4 @@
     background-color: rgb(110, 110, 110);
     display: flex;
     left: calc( 5rem + 28px );
-}
\ No newline at end of file
+}
diff --git a/site/src/footer.html b/site/src/footer.html
index 2cca024..8f682d5 100644
--- a/site/src/footer.html
+++ b/site/src/footer.html
@@ -68,34 +68,7 @@
             document.getElementById( 'analytics' ).classList.add( 'show' );
         }
 
-        // Themeing
-        let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
-        var theme = loadedTheme;
-        let loadTheme = () => {
-            loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
-            if ( loadedTheme === 'auto' ) {
-                if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
-                    theme = 'dark_mode';
-                } else {
-                    theme = 'light_mode';
-                }
-            }
-            if ( theme === 'dark_mode' ) {
-                document.documentElement.classList.remove( 'light' );
-                document.documentElement.classList.add( 'dark' );
-            } else {
-                document.documentElement.classList.add( 'light' );
-                document.documentElement.classList.remove( 'dark' );
-                theme === 'light_mode';
-            }
-        }
-        loadTheme();
+        // Show which theme is loaded
         document.getElementById( 'theme-select' ).value = loadedTheme;
-
-        function changeTheme () {
-            theme = document.getElementById( 'theme-select' ).value;
-            localStorage.setItem( 'theme', theme );
-            loadTheme();
-        }
     </script>
 </div>
diff --git a/site/src/nav.html b/site/src/nav.html
index a768e74..168412a 100644
--- a/site/src/nav.html
+++ b/site/src/nav.html
@@ -1,3 +1,38 @@
+<script>
+    // Themeing
+    let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+    var theme = loadedTheme;
+    let loadTheme = () => {
+        loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+        if ( loadedTheme === 'auto' ) {
+            if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+                theme = 'dark_mode';
+            } else {
+                theme = 'light_mode';
+            }
+        }
+        if ( theme === 'dark_mode' ) {
+            document.documentElement.classList.remove( 'light' );
+            document.documentElement.classList.add( 'dark' );
+        } else {
+            document.documentElement.classList.add( 'light' );
+            document.documentElement.classList.remove( 'dark' );
+            theme === 'light_mode';
+        }
+    }
+    loadTheme();
+
+    setTimeout( () => {
+        document.querySelector( 'body' ).classList.add( 'loaded' );
+    }, 500 );
+
+    function changeTheme () {
+        theme = document.getElementById( 'theme-select' ).value;
+        localStorage.setItem( 'theme', theme );
+        loadTheme();
+    }
+</script>
+
 <div class="nav-placeholder"></div>
 
 <div class="nav-top-bar">