diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 80d0604..69bec08 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -59,27 +59,23 @@ export const Users = createIcon({
 
 export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
-  const [hasFinishedClosing, setHasFinishedClosing] = useState(true);
+  const [hasFinishedTransitions, setFinishedTransitions] = useState(false);
   
   const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
   const toggleSidebar = () => {
-    if (isOpen) {
-      setHasFinishedClosing(false);
-      setTimeout(() => setIsOpen(false), 10); // Kick off transition
-      setTimeout(() => setHasFinishedClosing(true), 400); // Match sidebar transition duration
-    } else {
-      setIsOpen(true);
-      setHasFinishedClosing(true);
-    }
+    setFinishedTransitions(false);
+    if (isOpen) setIsOpen(false);
+    else setIsOpen(true);
+    setTimeout(() => setFinishedTransitions(true), 400); // Match sidebar transition duration
   };
 
   return (
     <Box
       css={styles.root}
-      w={isOpen ? "220px" : "86px"}
+      width={isOpen ? "100%" : "86px"}
       transition="width 0.4s ease"
     >
       <IconButton
@@ -93,152 +89,78 @@ export default function Sidebar() {
       
       {/* Dashboard */}
       <Button css={styles.buttons} onClick={() => setActiveButton(0)} bg={activeButton === 0 ? "primary":undefined} justifyContent="flex-start">
-        {isOpen ? (
-          <>
-            <PushPin fill="white" />
-
-            {/* Make text appear gradually instead of popping in */}
-            <span
-              style={{
-                marginLeft: "8px",
-                opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                transitionProperty: "opacity, max-width",
-                transitionDuration: "0.3s",
-                transitionTimingFunction: "ease",
-                transitionDelay: "0.1s",
-                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
-              }}
-            >
-              Dashboard
-            </span>
-          </>
-        ) : (
-          <PushPin fill="white" />
-        )}
+        <PushPin fill="white" />
+        {/* Make text appear gradually instead of popping in */}
+        <span style={{
+          opacity: isOpen ? 1 : 0,
+          transition: "opacity 0.4s ease",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          display: "inline-block",
+          }}
+        >
+          Dashboard
+        </span>
       </Button>
 
       {/* Global Map */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start">
-        {isOpen ? (
-          <>            
-            <Globe fill="white" stroke="black" />
-            
-            {/* Make text appear gradually instead of popping in */}
-            <span
-              style={{
-                marginLeft: "8px",
-                opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                transitionProperty: "opacity, max-width",
-                transitionDuration: "0.3s",
-                transitionTimingFunction: "ease",
-                transitionDelay: isOpen ? "0.1s" : "0s",
-                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
-              }}
-            >
-              Global Map
-            </span>
-          </>
-        ) : (
-          <Globe fill="white" stroke="black" />
-        )}
+      <Button css={styles.buttons} onClick={() => setActiveButton(1)} bg={activeButton === 1 ? "primary":undefined} justifyContent="flex-start">           
+        <Globe fill="white" stroke="black" />
+          <span style={{
+            opacity: isOpen ? 1 : 0,
+            transition: "opacity 0.4s ease",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            display: "inline-block",
+            }}
+          >
+            Global Map
+          </span>
       </Button>
 
       {/* Regional Map */}
       <Button css={styles.buttons} onClick={() => setActiveButton(2)} bg={activeButton === 2 ? "primary":undefined} justifyContent="flex-start">
-        {isOpen ? (
-          <>
-            <MapMarker fill="white" stroke="black"/>
-            {/* Make text appear gradually instead of popping in */}
-            <span
-              style={{
-                marginLeft: "8px",
-                opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                transitionProperty: "opacity, max-width",
-                transitionDuration: "0.3s",
-                transitionTimingFunction: "ease",
-                transitionDelay: isOpen ? "0.1s" : "0s",
-                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
-              }}
-            >
-              Regional Map
-            </span>
-          </>
-        ) : (
-          <MapMarker fill="white" stroke="black" />
-        )}
+        <MapMarker fill="white" stroke="black"/>
+          <span style={{
+            opacity: isOpen ? 1 : 0,
+            transition: "opacity 0.4s ease",
+            overflow: "hidden",
+            whiteSpace: "nowrap",
+            display: "inline-block",
+            }}
+          >
+            Regional Map
+          </span>
       </Button>
 
       {/* Volcano */}
       <Button css={styles.buttons} onClick={() => setActiveButton(3)} bg={activeButton === 3 ? "primary":undefined} justifyContent="flex-start">
-        {isOpen ? (
-          <>
-            {/* <FaVolcano size={20} style={{ marginRight: "1px" }} /> */}
-            <FaVolcano />
-            {/* Make text appear gradually instead of popping in */}
-            <span
-              style={{
-                marginLeft: "8px",
-                opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "250px" : "0px", // prevent layout from expanding before fade-in
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                transitionProperty: "opacity, max-width",
-                transitionDuration: "0.3s",
-                transitionTimingFunction: "ease",
-                transitionDelay: isOpen ? "0.1s" : "0s",
-                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
-              }}
-            >
-              Volcano
-            </span>
-          </>
-        ) : (
-          <FaVolcano />
-        )}
+        <FaVolcano />
+        <span style={{
+          opacity: isOpen ? 1 : 0,
+          transition: "opacity 0.4s ease",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          display: "inline-block",
+          }}
+        >
+          Volcano
+        </span>
       </Button>
 
       {/* Admin */}
-      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start">
-        {isOpen ? (
-          <>
-            {/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}
-            <Users fill="white" stroke="black" />
-
-            {/* Make text appear gradually instead of popping in */}
-            <span
-              style={{
-                marginLeft: "8px",
-                opacity: isOpen ? 1 : 0,
-                maxWidth: isOpen ? "200px" : "0px", // prevent layout from expanding before fade-in
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                display: "inline-block",
-                transitionProperty: "opacity, max-width",
-                transitionDuration: "0.3s",
-                transitionTimingFunction: "ease",
-                transitionDelay: isOpen ? "0.1s" : "0s",
-                visibility: isOpen || !hasFinishedClosing ? "visible" : "hidden",
-              }}
-            >
-              Admin
-            </span>
-          </>
-        ) : (
-          <Users fill="white" stroke="black" />
-        )}
+      <Button css={styles.buttons} onClick={() => setActiveButton(4)} bg={activeButton === 4 ? "primary":undefined} justifyContent="flex-start" >
+        <Users fill="white" stroke="black" />
+        <span style={{
+          opacity: isOpen ? 1 : 0,
+          transition: "opacity 0.4s ease",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          display: "inline-block",
+          }}
+        >
+          Admin
+        </span>
       </Button>
       <ColorModeButton position="absolute" bottom="2"/>
     </Box>