diff --git a/css/main.css b/css/main.css
index 67d705b1..5d305550 100644
--- a/css/main.css
+++ b/css/main.css
@@ -976,6 +976,13 @@ audio {
     flex-shrink: 0;
     box-sizing: content-box;
     z-index: 10;
+    position: fixed;
+    top: 0;
+    background: var(--background-fill-primary);
+}
+
+#past-chats-row {
+    left: var(--header-width);
 }
 
 #past-chats-row:not(.negative-header) {
@@ -983,6 +990,7 @@ audio {
 }
 
 #chat-controls {
+    right: 0;
     padding: 1rem;
     padding-bottom: 0;
     overflow-y: scroll;
@@ -1253,16 +1261,6 @@ audio {
     right: 7px;
 }
 
-@media screen and (width <= 924px) {
-    #chat-controls.sidebar-shown {
-        position: fixed;
-        right: 0;
-    }
-
-    #past-chats-row.sidebar-shown {
-        position: fixed;
-    }
-}
 
 /* ----------------------------------------------
   Dark theme
diff --git a/js/main.js b/js/main.js
index 4678b94c..4004d486 100644
--- a/js/main.js
+++ b/js/main.js
@@ -674,23 +674,21 @@ headerBar.appendChild(navigationToggle);
 const pastChatsToggle = document.getElementById("past-chats-toggle");
 const chatControlsToggle = document.getElementById("chat-controls-toggle");
 
+const SIDEBARS = [
+  { element: headerBar, toggle: navigationToggle, key: "sidebar-header-hidden" },
+  { element: pastChatsRow, toggle: pastChatsToggle, key: "sidebar-past-chats-hidden" },
+  { element: chatControlsRow, toggle: chatControlsToggle, key: "sidebar-chat-controls-hidden" },
+];
+window.SIDEBARS = SIDEBARS;
+
 function handleIndividualSidebarClose(event) {
   const target = event.target;
-
-  // Close navigation bar if click is outside and it is open
-  if (!headerBar.contains(target) && !headerBar.classList.contains("sidebar-hidden")) {
-    toggleSidebar(headerBar, navigationToggle);
-  }
-
-  // Close past chats row if click is outside and it is open
-  if (!pastChatsRow.contains(target) && !pastChatsRow.classList.contains("sidebar-hidden")) {
-    toggleSidebar(pastChatsRow, pastChatsToggle);
-  }
-
-  // Close chat controls row if click is outside and it is open
-  if (!chatControlsRow.contains(target) && !chatControlsRow.classList.contains("sidebar-hidden")) {
-    toggleSidebar(chatControlsRow, chatControlsToggle);
-  }
+  SIDEBARS.forEach(({ element, toggle, key }) => {
+    if (!element.contains(target) && !element.classList.contains("sidebar-hidden")) {
+      toggleSidebar(element, toggle);
+      localStorage.setItem(key, "true");
+    }
+  });
 }
 
 function toggleSidebar(sidebar, toggle) {
@@ -720,12 +718,12 @@ function toggleSidebar(sidebar, toggle) {
   }
 }
 
-// Function to check if the device is mobile
+window.toggleSidebar = toggleSidebar;
+
 function isMobile() {
   return window.innerWidth <= 924;
 }
 
-// Function to initialize sidebars
 function initializeSidebars() {
   const isOnMobile = isMobile();
 
@@ -766,55 +764,22 @@ function initializeSidebars() {
     pastChatsToggle.innerHTML = leftArrowSVG;
     chatControlsToggle.innerHTML = rightArrowSVG;
     navigationToggle.innerHTML = closeMenuSVG;
+
+    SIDEBARS.forEach(({ element, toggle, key }) => {
+      if (localStorage.getItem(key) === "true") {
+        toggleSidebar(element, toggle);
+      }
+    });
   }
 }
 
-// Run the initializer when the page loads
 initializeSidebars();
 
-// Add click event listeners to toggle buttons
-pastChatsToggle.addEventListener("click", () => {
-  const isCurrentlyOpen = !pastChatsRow.classList.contains("sidebar-hidden");
-  toggleSidebar(pastChatsRow, pastChatsToggle);
-
-  // On desktop, sync both sidebars together
-  if (!isMobile()) {
-    if (isCurrentlyOpen) {
-      // If we just closed the left sidebar, also close the right sidebar
-      if (!chatControlsRow.classList.contains("sidebar-hidden")) {
-        toggleSidebar(chatControlsRow, chatControlsToggle);
-      }
-    } else {
-      // If we just opened the left sidebar, also open the right sidebar
-      if (chatControlsRow.classList.contains("sidebar-hidden")) {
-        toggleSidebar(chatControlsRow, chatControlsToggle);
-      }
-    }
-  }
-});
-
-chatControlsToggle.addEventListener("click", () => {
-  const isCurrentlyOpen = !chatControlsRow.classList.contains("sidebar-hidden");
-  toggleSidebar(chatControlsRow, chatControlsToggle);
-
-  // On desktop, sync both sidebars together
-  if (!isMobile()) {
-    if (isCurrentlyOpen) {
-      // If we just closed the right sidebar, also close the left sidebar
-      if (!pastChatsRow.classList.contains("sidebar-hidden")) {
-        toggleSidebar(pastChatsRow, pastChatsToggle);
-      }
-    } else {
-      // If we just opened the right sidebar, also open the left sidebar
-      if (pastChatsRow.classList.contains("sidebar-hidden")) {
-        toggleSidebar(pastChatsRow, pastChatsToggle);
-      }
-    }
-  }
-});
-
-navigationToggle.addEventListener("click", () => {
-  toggleSidebar(headerBar, navigationToggle);
+SIDEBARS.forEach(({ element, toggle, key }) => {
+  toggle.addEventListener("click", () => {
+    toggleSidebar(element, toggle);
+    localStorage.setItem(key, element.classList.contains("sidebar-hidden"));
+  });
 });
 
 //------------------------------------------------
diff --git a/js/show_controls.js b/js/show_controls.js
index d5642dc4..ef9d4f98 100644
--- a/js/show_controls.js
+++ b/js/show_controls.js
@@ -1,40 +1,34 @@
+if (window._controlsInitialized === undefined) {
+  window._controlsInitialized = false;
+}
+
 function toggle_controls(value) {
-  const navToggle = document.getElementById("navigation-toggle");
-  const pastChatsToggle = document.getElementById("past-chats-toggle");
   const extensions = document.querySelector("#extensions");
   const galleryExtension = document.getElementById("gallery-extension");
 
-  if (value) {
-    // SHOW MODE: Click toggles to show hidden sidebars
-    if (navToggle && document.querySelector(".header_bar")?.classList.contains("sidebar-hidden")) {
-      navToggle.click();
-    }
-    if (pastChatsToggle && document.getElementById("past-chats-row")?.classList.contains("sidebar-hidden")) {
-      pastChatsToggle.click();
-    }
-
-    // Show extensions only
-    if (extensions) {
-      extensions.style.display = "inherit";
-    }
-    if (galleryExtension) {
-      galleryExtension.style.display = "block";
-    }
-  } else {
-    // HIDE MODE: Click toggles to hide visible sidebars
-    if (navToggle && !document.querySelector(".header_bar")?.classList.contains("sidebar-hidden")) {
-      navToggle.click();
-    }
-    if (pastChatsToggle && !document.getElementById("past-chats-row")?.classList.contains("sidebar-hidden")) {
-      pastChatsToggle.click();
-    }
-
-    // Hide extensions only
-    if (extensions) {
-      extensions.style.display = "none";
-    }
-    if (galleryExtension) {
-      galleryExtension.style.display = "none";
-    }
+  if (window._controlsInitialized) {
+    window.SIDEBARS.forEach(({ element, toggle, key }) => {
+      if (value) {
+        if (element && element.classList.contains("sidebar-hidden")) {
+          window.toggleSidebar(element, toggle);
+        }
+        localStorage.removeItem(key);
+      } else {
+        if (element && !element.classList.contains("sidebar-hidden")) {
+          window.toggleSidebar(element, toggle);
+        }
+        localStorage.setItem(key, "true");
+      }
+    });
   }
+
+  if (value) {
+    if (extensions) extensions.style.display = "inherit";
+    if (galleryExtension) galleryExtension.style.display = "block";
+  } else {
+    if (extensions) extensions.style.display = "none";
+    if (galleryExtension) galleryExtension.style.display = "none";
+  }
+
+  window._controlsInitialized = true;
 }