diff --git a/darkmode.js b/darkmode.js
index 4bca1a1..f4bc6bb 100644
--- a/darkmode.js
+++ b/darkmode.js
@@ -1,3 +1,5 @@
+    var iframe = document.getElementById('iframe');
+
     // Check if a dark mode cookie exists, and apply dark mode if it does
     if (getCookie("darkMode") === "true") {
       applyDarkMode();
@@ -28,10 +30,22 @@
 
     function applyDarkMode() {
       document.body.classList.add("dark-mode");
+
+      iframe.onload = function() {
+          // The iframe has loaded, now you can access its content
+          iframe.contentWindow.document.body.classList.add("dark-mode");
+      };
+      iframe.contentWindow.document.body.classList.add("dark-mode");
     }
 
     function applyLightMode() {
       document.body.classList.remove("dark-mode");
+
+      iframe.onload = function() {
+          // The iframe has loaded, now you can access its content
+          iframe.contentWindow.document.body.classList.remove("dark-mode");
+      };
+      iframe.contentWindow.document.body.classList.remove("dark-mode");
     }
 
     // Helper functions for handling cookies
diff --git a/donate/index.html b/donate/index.html
index efd9e18..646e80d 100755
--- a/donate/index.html
+++ b/donate/index.html
@@ -13,30 +13,7 @@
         <button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
             <img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
     </div>
-    <div class="sidebar">
-        <img src="/assets/img/hectabit.svg">
-        <h1>Main Website</h1>
-        <ul>
-            <li><a href="https://hectabit.org/">Home</a></li>
-            <li><a href="https://hectabit.org/donate">Donate</a></li>
-            <li><a href="https://hectabit.org/halloffame">Hall of fame</a></li>
-        </ul>
-        <h1>HectaBit Software</h1>
-        <ul>
-            <li><a href="https://notes.hectabit.org" target="_blank">Notes</a></li>
-            <li><a href="https://evolutionos.hectabit.org/" target="_blank">EvolutionOS</a></li>
-            <li><a href="https://basalt.hectabit.org" target="_blank">Basalt Linux</a></li>
-        </ul>
-        <h1>HectaBit Services</h1>
-        <ul>
-            <li><a href="https://centrifuge.hectabit.org" target="_blank">Centrifuge</a></li>
-            <li><a href="https://matrix.to/#/#devel:hectabit.org" target="_blank">Matrix</a></li>
-            <li><a href="https://mail.hectabit.org" target="_blank">Mail</a></li>
-        </ul>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-    </div>
+    <iframe src="/sidebar.html" class="sidecontainer" id="iframe"></iframe>
     <div class="content">
  	<h1>Warning! The following page contains nonfree elements!</h1>
         <div class="spacer"></div>
diff --git a/halloffame/index.html b/halloffame/index.html
index 92db135..2f89946 100755
--- a/halloffame/index.html
+++ b/halloffame/index.html
@@ -13,30 +13,7 @@
         <button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
             <img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
     </div>
-    <div class="sidebar">
-        <img src="/assets/img/hectabit.svg">
-        <h1>Main Website</h1>
-        <ul>
-            <li><a href="https://hectabit.org/">Home</a></li>
-            <li><a href="https://hectabit.org/donate">Donate</a></li>
-            <li><a href="https://hectabit.org/halloffame">Hall of fame</a></li>
-        </ul>
-        <h1>HectaBit Software</h1>
-        <ul>
-            <li><a href="https://notes.hectabit.org" target="_blank">Notes</a></li>
-            <li><a href="https://evolutionos.hectabit.org/" target="_blank">EvolutionOS</a></li>
-            <li><a href="https://basalt.hectabit.org" target="_blank">Basalt Linux</a></li>
-        </ul>
-        <h1>HectaBit Services</h1>
-        <ul>
-            <li><a href="https://centrifuge.hectabit.org" target="_blank">Centrifuge</a></li>
-            <li><a href="https://matrix.to/#/#devel:hectabit.org" target="_blank">Matrix</a></li>
-            <li><a href="https://mail.hectabit.org" target="_blank">Mail</a></li>
-        </ul>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-    </div>
+    <iframe src="/sidebar.html" class="sidecontainer" id="iframe"></iframe>
     <div class="content">
         <h1>Welcome to HectaBit's Hall of fame!</h1>
 	<li><h1>This is a hall of fame for all of the (amazing) members of HectaBit!</h1></li>
diff --git a/hectabitstyles.css b/hectabitstyles.css
index 2d2a219..4221abf 100755
--- a/hectabitstyles.css
+++ b/hectabitstyles.css
@@ -51,6 +51,14 @@ body {
 }
 
 /* Sidebar styles */
+.sidecontainer {
+    position: fixed;
+    height: 100%;
+    width: 310px;
+    border: medium;
+    transition: all 0.3s ease 0s;
+}
+
 .sidebar {
     border-radius: 10px;
     transition: all 0.3s ease;
@@ -179,6 +187,10 @@ button:hover {
     transform: translateX(-295px);
 }
 
+.sidecontainer.hidden {
+    transform: translateX(-295px);
+}
+
 .content.expanded + .sidebar.hidden {
     transform: translateX(0);
 }
diff --git a/index.html b/index.html
index c3f6aaf..620b5f3 100755
--- a/index.html
+++ b/index.html
@@ -13,31 +13,7 @@
         <button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
             <img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
     </div>
-    <div class="sidebar">
-        <img src="/assets/img/hectabit.svg">
-        <h1>Main Website</h1>
-        <ul>
-            <li><a href="https://hectabit.org/">Home</a></li>
-            <li><a href="https://hectabit.org/donate">Donate</a></li>
-            <li><a href="https://hectabit.org/halloffame">Hall of fame</a></li>
-        </ul>
-        <h1>HectaBit Software</h1>
-        <ul>
-            <li><a href="https://notes.hectabit.org" target="_blank">Notes</a></li>
-            <li><a href="https://evolutionos.hectabit.org/" target="_blank">EvolutionOS</a></li>
-            <li><a href="https://basalt.hectabit.org" target="_blank">Basalt Linux</a></li>
-        </ul>
-        <h1>HectaBit Services</h1>
-        <ul>
-            <li><a href="https://centrifuge.hectabit.org" target="_blank">Centrifuge</a></li>
-            <li><a href="https://matrix.to/#/#devel:hectabit.org" target="_blank">Matrix</a></li>
-            <li><a href="https://mail.hectabit.org" target="_blank">Mail</a></li>
-        </ul>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-    </div>
-
+    <iframe src="/sidebar.html" class="sidecontainer" id="iframe"></iframe>
     <div class="content">
         <h1>Welcome to HectaBit homepage!</h1>
         <div class="spacer"></div>
diff --git a/nonfree/donate/index.html b/nonfree/donate/index.html
index 6d0ed66..ed8310d 100755
--- a/nonfree/donate/index.html
+++ b/nonfree/donate/index.html
@@ -13,30 +13,7 @@
         <button id="sidebutton" onclick="toggleDarkMode()" style="top: 48px;">
             <img class="darkmodeicon" alt="Toggle Dark Mode" src="/assets/img/moon.svg">
     </div>
-    <div class="sidebar">
-        <img src="/assets/img/hectabit.svg">
-        <h1>Main Website</h1>
-        <ul>
-            <li><a href="https://hectabit.org/">Home</a></li>
-            <li><a href="https://hectabit.org/donate">Donate</a></li>
-            <li><a href="https://hectabit.org/halloffame">Hall of fame</a></li>
-        </ul>
-        <h1>HectaBit Software</h1>
-        <ul>
-            <li><a href="https://notes.hectabit.org" target="_blank">Notes</a></li>
-            <li><a href="https://evolutionos.hectabit.org/" target="_blank">EvolutionOS</a></li>
-            <li><a href="https://basalt.hectabit.org" target="_blank">Basalt Linux</a></li>
-        </ul>
-        <h1>HectaBit Services</h1>
-        <ul>
-            <li><a href="https://centrifuge.hectabit.org" target="_blank">Centrifuge</a></li>
-            <li><a href="https://matrix.to/#/#devel:hectabit.org" target="_blank">Matrix</a></li>
-            <li><a href="https://mail.hectabit.org" target="_blank">Mail</a></li>
-        </ul>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-        <div class="spacer"></div>
-    </div>
+    <iframe src="/sidebar.html" class="sidecontainer" id="iframe"></iframe>
     <div class="content">
  	<h1>Donate</h1>
         <div class="spacer"></div>
diff --git a/sidebar.html b/sidebar.html
new file mode 100644
index 0000000..d593e46
--- /dev/null
+++ b/sidebar.html
@@ -0,0 +1,29 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="hectabitstyles.css">
+</head>
+<body>
+    <div class="sidebar">
+        <img src="/assets/img/hectabit.svg">
+        <h1>Main Website</h1>
+        <ul>
+            <li><a href="https://hectabit.org/" target="_top">Home</a></li>
+            <li><a href="https://hectabit.org/donate" target="_top">Donate</a></li>
+            <li><a href="https://hectabit.org/halloffame" target="_top">Hall of fame</a></li>
+        </ul>
+        <h1>HectaBit Software</h1>
+        <ul>
+            <li><a href="https://notes.hectabit.org" target="_blank">Notes</a></li>
+            <li><a href="https://evolutionos.hectabit.org/" target="_blank">EvolutionOS</a></li>
+        </ul>
+        <h1>HectaBit Services</h1>
+        <ul>
+            <li><a href="https://centrifuge.hectabit.org" target="_blank">Centrifuge</a></li>
+            <li><a href="https://matrix.to/#/#devel:hectabit.org" target="_blank">Matrix</a></li>
+            <li><a href="https://mail.hectabit.org" target="_blank">Mail</a></li>
+        </ul>
+        <div class="spacer"></div>
+        <div class="spacer"></div>
+        <div class="spacer"></div>
+</body>
diff --git a/sidebar.js b/sidebar.js
index f253985..0352c26 100644
--- a/sidebar.js
+++ b/sidebar.js
@@ -1,8 +1,8 @@
         document.getElementById("sidebutton").addEventListener("click", function() {
-            var sidebar = document.querySelector(".sidebar");
+            var sidecontainer = document.querySelector(".sidecontainer");
             var content = document.querySelector(".content");
             var closebar = document.querySelector(".closebar");
             closebar.classList.toggle("expanded");
-            sidebar.classList.toggle("hidden");
+            sidecontainer.classList.toggle("hidden");
             content.classList.toggle("expanded");
         });