diff --git a/client/src/components/SettingsButton.jsx b/client/src/components/SettingsButton.jsx
index 332c84f..afb7936 100644
--- a/client/src/components/SettingsButton.jsx
+++ b/client/src/components/SettingsButton.jsx
@@ -2,7 +2,7 @@
 // for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will 
 // control settings related to the Widgets on the main canvas. 
 
-import { Button, Menu, Portal } from "@chakra-ui/react";
+import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
 import { FiSettings } from "react-icons/fi";
 
 export function SettingsButton(props) {
@@ -25,9 +25,9 @@ export function SettingsButton(props) {
         // This uses Chakra's built in menu component
         <Menu.Root>
             <Menu.Trigger asChild>
-                <Button variant="ghost" size="md">
+                <IconButton variant="ghost" size="md">
                     <FiSettings />
-                </Button>
+                </IconButton>
             </Menu.Trigger>
             <Portal>
                 <Menu.Positioner>
diff --git a/client/src/components/sidebar.jsx b/client/src/components/sidebar.jsx
index 2f40b1f..39ea197 100644
--- a/client/src/components/sidebar.jsx
+++ b/client/src/components/sidebar.jsx
@@ -1,4 +1,4 @@
-import { Box, Button, createIcon, CloseButton, IconButton, Stack } from "@chakra-ui/react";
+import { Box, Button, createIcon, CloseButton, IconButton, Stack, useDisclosure, Tooltip } from "@chakra-ui/react";
 import { FaVolcano } from "react-icons/fa6";
 import { RxHamburgerMenu } from "react-icons/rx";
 import { useState } from "react";
@@ -56,87 +56,326 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar () {
+
+export default function Sidebar() {
   const [isOpen, setIsOpen] = useState(true);
-  const [activeButton, setActiveButton] = useState("Dashboard")
+  const [activeButton, setActiveButton] = useState("Dashboard");
 
   return (
-    <>
-      {isOpen && (
-        <Box  w="100%" h="100%" 
-            borderRight="1px" 
-            borderColor="black" 
-            borderStyle="solid" 
-            display="flex" 
-            flexDirection="column" 
-            justifyContent="start" 
-            alignItems="start" 
-            gap={4} paddingTop={4}
-            paddingLeft={14} paddingRight={3}
-        >
-          {/* <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
-          {/* <RxHamburgerMenu color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
-          <Button 
-            aria-lable="Toggle Sidebar"
-            color="secondary"  
-            _hover={{bg: "#EDF1F1"}} 
-            size="md" variant="ghost" 
-            // left="-10"
-            ml="auto" // Margin-left: auto, pushes hamburger menu to right side 
-            onClick={() => setIsOpen(!isOpen)}
-          >
-            <RxHamburgerMenu />
-          </Button>
-          <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
-            <PushPin fill="white" /> Dashboard
-          </Button>
-          <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
-            <Globe fill="white" stroke="black" /> Global Map
-          </Button>
-          <Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
-            <MapMarker fill="white" stroke="black"/> Regional Map
-          </Button>
-          <Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
-            <FaVolcano /> Volcano
-          </Button>
-          <Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
-            <Users fill="white" stroke="black" /> Admin
-          </Button>
-        </Box>
-      )}
+    <Box
+      w={isOpen ? "250px" : "60px"}
+      h="100vh"
+      transition="width 0.4s ease"
+      borderRight="1px solid black"
+      display="flex"
+      flexDirection="column"
+      alignItems="start"
+      bg="white"
+      p={4}
+      gap={4}
+    >
+      <IconButton
+        aria-label="Toggle Sidebar"
+        variant="ghost"
+        size="md"
+        // ml="auto"
+        // left="0"
+        onClick={() => setIsOpen(!isOpen)}
+        // icon={<RxHamburgerMenu />}
+      >
+        <RxHamburgerMenu />
+      </IconButton>
+      {/* Dashboard */}
+      <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        justifyContent={isOpen ? "flex-start" : "center"}
+        w="100%"
+        onClick={() => setActiveButton("Dashboard")}
+        bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Dashboard" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            {/* <PushPin boxSize={5} style={{ marginRight: "8px" }} /> */}
+            <PushPin fill="white" />
+            {/* 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",
+              }}
+            >
+              Dashboard
+            </span>
+          </>
+        ) : (
+          // <PushPin boxSize={5} />
+          <PushPin fill="white" />
+        )}
+      </Button>
 
-      {!isOpen && (
-        <Box  w="100%" h="100%" 
-              borderRight="1px" 
-              borderColor="black" 
-              borderStyle="solid" 
-              display="flex" 
-              flexDirection="column" 
-              justifyContent="start" 
-              alignItems="start" 
-              gap={4} padding={4}
-        >
-          <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
-            <RxHamburgerMenu />
-          </IconButton>
-          <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
-            <PushPin fill="white"/>
-          </IconButton>
-          <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+      {/* Global Map */}
+      <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        justifyContent={isOpen ? "flex-start" : "center"}
+        w="100%"
+        onClick={() => setActiveButton("Global")}
+        bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Global" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            {/* <Globe boxSize={5} style={{ marginRight: "8px" }} /> */}
             <Globe fill="white" stroke="black" />
-          </IconButton>
-          <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
-            <MapMarker fill="white" stroke="black" />
-          </IconButton>
-          <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
-            <FaVolcano />
-          </IconButton>
-          <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+            {/* 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",
+              }}
+            >
+              Global Map
+            </span>
+          </>
+        ) : (
+          // <Globe boxSize={5} />
+          <Globe fill="white" stroke="black" />
+        )}
+      </Button>
+
+      {/* Regional Map */}
+      <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        justifyContent={isOpen ? "flex-start" : "center"}
+        w="100%"
+        onClick={() => setActiveButton("Regional")}
+        bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Regional" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            {/* <MapMarker boxSize={5} style={{ marginRight: "8px" }} /> */}
+            <MapMarker 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",
+              }}
+            >
+              Regional Map
+            </span>
+          </>
+        ) : (
+          // <MapMarker boxSize={5} />
+          <MapMarker fill="white" stroke="black" />
+        )}
+      </Button>
+
+      {/* Volcano */}
+      <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        justifyContent={isOpen ? "flex-start" : "center"}
+        w="100%"
+        onClick={() => setActiveButton("Volcano")}
+        bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Volcano" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            <FaVolcano size={20} style={{ marginRight: "8px" }} />
+            {/* 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",
+              }}
+            >
+              Volcano
+            </span>
+          </>
+        ) : (
+          // <FaVolcano size={20} />
+          <FaVolcano />
+        )}
+      </Button>
+
+      {/* Admin */}
+      <Button
+        color="#19332D"
+        fontSize="lg"
+        variant="ghost"
+        justifyContent={isOpen ? "flex-start" : "center"}
+        w="100%"
+        onClick={() => setActiveButton("Admin")}
+        bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}
+        _hover={{
+          bg: activeButton === "Admin" ? "#A4B6B6" : "#EDF1F1",
+        }}
+      >
+        {isOpen ? (
+          <>
+            {/* <Users boxSize={5} style={{ marginRight: "8px" }} /> */}
             <Users fill="white" stroke="black" />
-          </IconButton>
-        </Box>
-      )}
-      
-    </>
+            {/* 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",
+              }}
+            >
+              Admin
+            </span>
+          </>
+        ) : (
+          // <Users boxSize={5} />
+          <Users fill="white" stroke="black" />
+        )}
+      </Button>
+    </Box>
   );
 }
+
+// THIS CODE WORKS, SAVE IN CASE OF EMERGENCY
+// Needed to refactor in order allow transitions to work properly
+
+// export default function Sidebar () {
+//   const [isOpen, setIsOpen] = useState(true);
+//   const [activeButton, setActiveButton] = useState("Dashboard")
+
+//   return (
+//     <>
+//       {isOpen && (
+//         <Box  w="100%" h="100%" 
+//             borderRight="1px" 
+//             borderColor="black" 
+//             borderStyle="solid" 
+//             display="flex" 
+//             flexDirection="column" 
+//             justifyContent="start" 
+//             alignItems="start" 
+//             gap={4} paddingTop={4}
+//             paddingLeft={14} paddingRight={3}
+//         >
+//           {/* <CloseButton color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></CloseButton> */}
+//           {/* <RxHamburgerMenu color="secondary"  _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-10" onClick={() => setIsOpen(!isOpen)}></RxHamburgerMenu> */}
+//           <Button 
+//             aria-lable="Toggle Sidebar"
+//             color="secondary"  
+//             _hover={{bg: "#EDF1F1"}} 
+//             size="md" variant="ghost" 
+//             left="-10"
+//             // ml="auto" // Margin-left: auto, pushes hamburger menu to right side 
+//             onClick={() => setIsOpen(!isOpen)}
+//           >
+//             <RxHamburgerMenu />
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
+//             <PushPin fill="white" /> Dashboard
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+//             <Globe fill="white" stroke="black" /> Global Map
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+//             <MapMarker fill="white" stroke="black"/> Regional Map
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+//             <FaVolcano /> Volcano
+//           </Button>
+//           <Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+//             <Users fill="white" stroke="black" /> Admin
+//           </Button>
+//         </Box>
+//       )}
+
+//       {!isOpen && (
+//         <Box  w="100%" h="100%" 
+//               borderRight="1px" 
+//               borderColor="black" 
+//               borderStyle="solid" 
+//               display="flex" 
+//               flexDirection="column" 
+//               justifyContent="start" 
+//               alignItems="start" 
+//               gap={4} padding={4}
+//         >
+//           <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="md" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
+//             <RxHamburgerMenu />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
+//             <PushPin fill="white"/>
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
+//             <Globe fill="white" stroke="black" />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
+//             <MapMarker fill="white" stroke="black" />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
+//             <FaVolcano />
+//           </IconButton>
+//           <IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
+//             <Users fill="white" stroke="black" />
+//           </IconButton>
+//         </Box>
+//       )}
+      
+//     </>
+//   );
+// }