diff --git a/css/main.css b/css/main.css
index 8982b464..20daa874 100644
--- a/css/main.css
+++ b/css/main.css
@@ -976,13 +976,6 @@ 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) {
@@ -990,7 +983,6 @@ audio {
 }
 
 #chat-controls {
-    right: 0;
     padding: 1rem;
     padding-bottom: 0;
     overflow-y: scroll;
@@ -1262,6 +1254,33 @@ audio {
     right: 7px;
 }
 
+@media screen and (width <= 924px) {
+    #chat-controls.sidebar-shown {
+        position: fixed;
+        right: 0;
+    }
+
+    #past-chats-row.sidebar-shown {
+        position: fixed;
+    }
+}
+
+@media screen and (min-width: 1470px) {
+    #chat-controls,
+    #past-chats-row {
+        position: fixed;
+        top: 0;
+        background: var(--background-fill-primary);
+    }
+
+    #past-chats-row {
+        left: var(--header-width);
+    }
+
+    #chat-controls {
+        right: 0;
+    }
+}
 
 /* ----------------------------------------------
   Dark theme
diff --git a/js/main.js b/js/main.js
index 4004d486..b6da2265 100644
--- a/js/main.js
+++ b/js/main.js
@@ -691,33 +691,30 @@ function handleIndividualSidebarClose(event) {
   });
 }
 
-function toggleSidebar(sidebar, toggle) {
-  const isCurrentlyHidden = sidebar.classList.contains("sidebar-hidden");
-  const shouldClose = !isCurrentlyHidden;
-
-  // Apply visibility classes
-  sidebar.classList.toggle("sidebar-hidden", shouldClose);
-  sidebar.classList.toggle("sidebar-shown", !shouldClose);
+function setSidebarState(sidebar, toggle, hidden) {
+  sidebar.classList.toggle("sidebar-hidden", hidden);
+  sidebar.classList.toggle("sidebar-shown", !hidden);
 
   if (sidebar === headerBar) {
-    // Special handling for header bar
-    document.documentElement.style.setProperty("--header-width", shouldClose ? "0px" : "112px");
-    pastChatsRow.classList.toggle("negative-header", shouldClose);
-    pastChatsToggle.classList.toggle("negative-header", shouldClose);
-    toggle.innerHTML = shouldClose ? hamburgerMenuSVG : closeMenuSVG;
+    document.documentElement.style.setProperty("--header-width", hidden ? "0px" : "112px");
+    pastChatsRow.classList.toggle("negative-header", hidden);
+    pastChatsToggle.classList.toggle("negative-header", hidden);
+    toggle.innerHTML = hidden ? hamburgerMenuSVG : closeMenuSVG;
   } else if (sidebar === pastChatsRow) {
-    // Past chats sidebar
-    toggle.classList.toggle("past-chats-closed", shouldClose);
-    toggle.classList.toggle("past-chats-open", !shouldClose);
-    toggle.innerHTML = shouldClose ? rightArrowSVG : leftArrowSVG;
+    toggle.classList.toggle("past-chats-closed", hidden);
+    toggle.classList.toggle("past-chats-open", !hidden);
+    toggle.innerHTML = hidden ? rightArrowSVG : leftArrowSVG;
   } else if (sidebar === chatControlsRow) {
-    // Chat controls sidebar
-    toggle.classList.toggle("chat-controls-closed", shouldClose);
-    toggle.classList.toggle("chat-controls-open", !shouldClose);
-    toggle.innerHTML = shouldClose ? leftArrowSVG : rightArrowSVG;
+    toggle.classList.toggle("chat-controls-closed", hidden);
+    toggle.classList.toggle("chat-controls-open", !hidden);
+    toggle.innerHTML = hidden ? leftArrowSVG : rightArrowSVG;
   }
 }
 
+function toggleSidebar(sidebar, toggle) {
+  setSidebarState(sidebar, toggle, !sidebar.classList.contains("sidebar-hidden"));
+}
+
 window.toggleSidebar = toggleSidebar;
 
 function isMobile() {
@@ -725,52 +722,18 @@ function isMobile() {
 }
 
 function initializeSidebars() {
-  const isOnMobile = isMobile();
+  const width = window.innerWidth;
+  const defaults = {
+    "sidebar-header-hidden": width <= 924,
+    "sidebar-past-chats-hidden": width < 1200,
+    "sidebar-chat-controls-hidden": width < 1470,
+  };
 
-  if (isOnMobile) {
-    // Mobile state: Hide sidebars and set closed states
-    [pastChatsRow, chatControlsRow, headerBar].forEach(el => {
-      el.classList.add("sidebar-hidden");
-      el.classList.remove("sidebar-shown");
-    });
-
-    document.documentElement.style.setProperty("--header-width", "0px");
-    pastChatsRow.classList.add("negative-header");
-    pastChatsToggle.classList.add("negative-header", "past-chats-closed");
-    pastChatsToggle.classList.remove("past-chats-open");
-
-    [chatControlsToggle, navigationToggle].forEach(el => {
-      el.classList.add("chat-controls-closed");
-      el.classList.remove("chat-controls-open");
-    });
-
-    pastChatsToggle.innerHTML = rightArrowSVG;
-    chatControlsToggle.innerHTML = leftArrowSVG;
-    navigationToggle.innerHTML = hamburgerMenuSVG;
-  } else {
-    // Desktop state: Show sidebars and set open states
-    [pastChatsRow, chatControlsRow].forEach(el => {
-      el.classList.remove("sidebar-hidden", "sidebar-shown");
-    });
-
-    pastChatsToggle.classList.add("past-chats-open");
-    pastChatsToggle.classList.remove("past-chats-closed");
-
-    [chatControlsToggle, navigationToggle].forEach(el => {
-      el.classList.add("chat-controls-open");
-      el.classList.remove("chat-controls-closed");
-    });
-
-    pastChatsToggle.innerHTML = leftArrowSVG;
-    chatControlsToggle.innerHTML = rightArrowSVG;
-    navigationToggle.innerHTML = closeMenuSVG;
-
-    SIDEBARS.forEach(({ element, toggle, key }) => {
-      if (localStorage.getItem(key) === "true") {
-        toggleSidebar(element, toggle);
-      }
-    });
-  }
+  SIDEBARS.forEach(({ element, toggle, key }) => {
+    const stored = localStorage.getItem(key);
+    const hidden = stored !== null ? stored === "true" : defaults[key];
+    setSidebarState(element, toggle, hidden);
+  });
 }
 
 initializeSidebars();