diff --git a/_includes/Nav.html b/_includes/Nav.html
index 22cb9be82..4ded8eaf8 100644
--- a/_includes/Nav.html
+++ b/_includes/Nav.html
@@ -30,55 +30,56 @@
 {%- endcomment -%}
 
 <nav class="navbar is-transparent" role="navigation" aria-label="main navigation">
-    <div class="navbar-brand">
-      <a class="navbar-item" style="padding-left: 0;"; href="{{ site.baseurl }}/index.html">
-          <h6> {{site.heading}}</h6></a>
-          <script src="{{ site.baseurl }}/assets/js/modeswitcher.js"></script>
-          <script src="{{ site.baseurl }}/assets/js/Hamburger.js"></script>
-      <div class="navbar-item navbar-dark-mode__mobile is-hidden-tablet" onclick="modeSwitcher()">
-        <div class="buttons">
-          <a class="button is-text">
-            <span class="icon is-small">
-              <img src="{{ '/assets/img/sun.svg' | relative_url }}" id="theme-toggle-img--mobile">
-            </span>
-          </a>
-        </div>
+  <div class="navbar-brand">
+    <a class="navbar-item" style="padding-left: 0;" ; href="{{ site.baseurl }}/index.html">
+      <h6> {{site.heading}}</h6>
+    </a>
+    <script src="{{ site.baseurl }}/assets/js/modeswitcher.js"></script>
+    <script src="{{ site.baseurl }}/assets/js/Hamburger.js"></script>
+    <div class="navbar-item navbar-dark-mode__mobile is-hidden-tablet" onclick="modeSwitcher()">
+      <div class="buttons">
+        <a class="button is-text">
+          <span class="icon is-small">
+            <img src="{{ '/assets/img/sun.svg' | relative_url }}" id="theme-toggle-img--mobile">
+          </span>
+        </a>
       </div>
-      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
-        <span aria-hidden="true"></span>
+    </div>
+    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+      <span aria-hidden="true"></span>
+    </a>
+  </div>
+
+  <div id="navbarBasicExample" class="navbar-menu">
+    <div class="navbar-start">
+      <a href="{{'/notes' | relative_url}}" class="navbar-item">
+        Demo Feed
+      </a>
+      <a href="../post/how-to" class="navbar-item">
+        How To
+      </a>
+      <a href="https://github.com/Jekyll-Garden/jekyll-garden.github.io" target="_blank" class="navbar-item">
+        Github
+      </a>
+      <a href="https://jekyllrb.com/" target="_blank" class="navbar-item">
+        Jekyll
+      </a>
+      <a href="https://obsidian.md/" target="_blank" class="navbar-item">
+        Obsidian
       </a>
     </div>
-    
-    <div id="navbarBasicExample" class="navbar-menu">
-      <div class="navbar-start">
-        <a href="{{'/notes' | relative_url}}" class="navbar-item">
-          Demo Feed
-        </a>
-        <a href="../post/how-to" class="navbar-item">
-          How To
-        </a>
-        <a href="https://github.com/Jekyll-Garden/jekyll-garden.github.io" target="_blank" class="navbar-item">
-          Github
-        </a>
-        <a href="https://jekyllrb.com/" target="_blank" class="navbar-item">
-          Jekyll
-        </a>
-        <a href="https://obsidian.md/"  target="_blank" class="navbar-item">
-          Obsidian
-        </a>
-      </div>
-      <div class="navbar-end is-hidden-mobile" onclick="modeSwitcher()" >
-        <div class="navbar-item">
-          <div class="buttons">
-            <a class="button is-text">
-              <span class="icon is-small">
-                <img src="{{ '/assets/img/sun.svg' | relative_url }}" id="theme-toggle-img">
-              </span>
-            </a>
-          </div>
+    <div class="navbar-end is-hidden-mobile" onclick="modeSwitcher()">
+      <div class="navbar-item">
+        <div class="buttons">
+          <a class="button is-text" style="padding: 0.3rem;">
+            <span class="icon is-small" style="margin: 0;">
+              <img src="{{ '/assets/img/sun.svg' | relative_url }}" id="theme-toggle-img">
+            </span>
+          </a>
         </div>
       </div>
     </div>
-  </nav>
\ No newline at end of file
+  </div>
+</nav>
\ No newline at end of file
diff --git a/assets/js/modeswitcher.js b/assets/js/modeswitcher.js
index c6ed7523f..7829231cf 100644
--- a/assets/js/modeswitcher.js
+++ b/assets/js/modeswitcher.js
@@ -19,11 +19,24 @@ function changeIconImgSrc(src) {
 	document.getElementById("theme-toggle-img--mobile").src = src;
 }
 
-if (systemInitiatedDark.matches) {
-	changeIconImgSrc(iconMoon);
-} else {
-	changeIconImgSrc(iconSun);
-}
+document.addEventListener("DOMContentLoaded", () => {
+	if (systemInitiatedDark.matches) {
+		changeIconImgSrc(iconMoon);
+	} else {
+		changeIconImgSrc(iconSun);
+	}
+	if (theme === "dark") {
+		document.documentElement.setAttribute('data-theme', 'dark');
+		sessionStorage.setItem('theme', 'dark');
+		changeIconImgSrc(iconMoon);
+	} else if (theme === "light") {
+		document.documentElement.setAttribute('data-theme', 'light');
+		sessionStorage.setItem('theme', 'light');
+		changeIconImgSrc(iconSun);
+	}
+})
+
+
 
 function prefersColorTest(systemInitiatedDark) {
   if (systemInitiatedDark.matches) {
@@ -58,14 +71,4 @@ function modeSwitcher() {
 		sessionStorage.setItem('theme', 'dark');
 		changeIconImgSrc(iconMoon);
 	}
-}
-
-if (theme === "dark") {
-	document.documentElement.setAttribute('data-theme', 'dark');
-	sessionStorage.setItem('theme', 'dark');
-	changeIconImgSrc(iconMoon);
-} else if (theme === "light") {
-	document.documentElement.setAttribute('data-theme', 'light');
-	sessionStorage.setItem('theme', 'light');
-	changeIconImgSrc(iconSun);
 }
\ No newline at end of file