diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 36415438c..d41778624 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -52,7 +52,7 @@ aside
   > .MuiListItemButton-root::before {
   content: "";
   position: absolute;
-  left: -8px;
+  left: -7px;
   top: 0;
   height: 100%;
   width: 100%;
@@ -65,7 +65,8 @@ aside
   > .MuiListItemButton-root:last-child::before {
   height: 50%;
 }
-aside .MuiCollapse-wrapperInner .MuiList-root svg {
+aside .MuiCollapse-wrapperInner .MuiList-root svg,
+aside .MuiList-root .MuiListItemText-root + svg {
   width: 18px;
   height: 18px;
 }
@@ -73,11 +74,18 @@ aside .MuiCollapse-wrapperInner .MuiList-root svg {
 aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root::after {
   content: "";
   position: absolute;
-  left: -8px;
+  left: -7px;
   top: 50%;
   height: 1px;
-  width: 7px;
+  width: 6px;
   border-radius: 50%;
   background-color: var(--env-var-color-5);
   opacity: 0.3;
 }
+
+aside {
+  transition: flex 300ms ease-out;
+}
+aside .MuiList-root {
+  transition: padding 100ms ease;
+}
\ No newline at end of file
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index 159b01503..74e868aa8 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -36,6 +36,8 @@ import PageSpeed from "../../assets/icons/page-speed.svg?react";
 import Settings from "../../assets/icons/settings.svg?react";
 import ArrowDown from "../../assets/icons/down-arrow.svg?react";
 import ArrowUp from "../../assets/icons/up-arrow.svg?react";
+import ArrowRight from "../../assets/icons/right-arrow.svg?react";
+import ArrowLeft from "../../assets/icons/left-arrow.svg?react";
 
 import "./index.css";
 
@@ -82,6 +84,7 @@ function Sidebar() {
   const dispatch = useDispatch();
   const authState = useSelector((state) => state.auth);
   const [open, setOpen] = useState({ Dashboard: false, Account: false });
+  const [collapsed, setCollapsed] = useState(false);
 
   /**
    * Handles logging out the user
@@ -105,9 +108,42 @@ function Sidebar() {
   }, []);
 
   return (
-    <Stack component="aside" gap={theme.gap.medium}>
-      <Box py={theme.gap.large} pl={theme.gap.lgplus}>
-        <BWULogo alt="BlueWave Uptime Logo" />
+    <Stack
+      component="aside"
+      gap={theme.gap.medium}
+      sx={{ flex: collapsed ? 0 : 1 }}
+    >
+      <Box
+        width="100%"
+        py={theme.gap.large}
+        pl={collapsed ? theme.gap.medium : theme.gap.lgplus}
+      >
+        {!collapsed && <BWULogo alt="BlueWave Uptime Logo" />}
+        <IconButton
+          sx={{
+            position: "absolute",
+            right: 0,
+            transform: `translate(50%, 0)`,
+            backgroundColor: theme.palette.otherColors.fillGray,
+            border: `solid 1px ${theme.palette.otherColors.graishWhite}`,
+            p: "5px",
+            "& svg": {
+              width: theme.gap.ml,
+              height: theme.gap.ml,
+              "& path": {
+                stroke: theme.palette.otherColors.bluishGray,
+              },
+            },
+            "&:focus": { outline: "none" },
+            "&:hover": {
+              backgroundColor: "#e3e3e3",
+              borderColor: theme.palette.otherColors.graishWhite,
+            },
+          }}
+          onClick={() => setCollapsed(!collapsed)}
+        >
+          {collapsed ? <ArrowRight /> : <ArrowLeft />}
+        </IconButton>
       </Box>
       {/* menu */}
       <List
@@ -118,11 +154,16 @@ function Sidebar() {
           <ListSubheader
             component="div"
             id="nested-menu-subheader"
-            sx={{ pt: theme.gap.small }}
+            sx={{
+              pt: theme.gap.small,
+              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              textAlign: collapsed ? "center" : "left",
+            }}
           >
             Menu
           </ListSubheader>
         }
+        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
       >
         {menu.map((item) =>
           item.path ? (
@@ -135,10 +176,23 @@ function Sidebar() {
               sx={{
                 gap: theme.gap.medium,
                 borderRadius: `${theme.shape.borderRadius}px`,
+                justifyContent: collapsed ? "center" : "flex-start",
               }}
             >
               <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-              <ListItemText>{item.name}</ListItemText>
+              {!collapsed && <ListItemText>{item.name}</ListItemText>}
+            </ListItemButton>
+          ) : collapsed ? (
+            <ListItemButton
+              key={item.name}
+              sx={{
+                gap: theme.gap.medium,
+                borderRadius: `${theme.shape.borderRadius}px`,
+                justifyContent: collapsed ? "center" : "flex-start",
+              }}
+            >
+              <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
+              {!collapsed && <ListItemText>{item.name}</ListItemText>}
             </ListItemButton>
           ) : (
             <React.Fragment key={item.name}>
@@ -152,6 +206,7 @@ function Sidebar() {
                 sx={{
                   gap: theme.gap.medium,
                   borderRadius: `${theme.shape.borderRadius}px`,
+                  justifyContent: collapsed ? "center" : "flex-start",
                 }}
               >
                 <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
@@ -210,11 +265,16 @@ function Sidebar() {
           <ListSubheader
             component="div"
             id="nested-other-subheader"
-            sx={{ pt: theme.gap.small }}
+            sx={{
+              pt: theme.gap.small,
+              px: collapsed ? theme.gap.xs : theme.gap.ml,
+              textAlign: collapsed ? "center" : "left",
+            }}
           >
             Other
           </ListSubheader>
         }
+        sx={{ px: collapsed ? theme.gap.xs : theme.gap.ml }}
       >
         {other.map((item) => (
           <ListItemButton
@@ -234,16 +294,20 @@ function Sidebar() {
             sx={{
               gap: theme.gap.medium,
               borderRadius: `${theme.shape.borderRadius}px`,
+              justifyContent: collapsed ? "center" : "flex-start",
             }}
           >
             <ListItemIcon sx={{ minWidth: 0 }}>{item.icon}</ListItemIcon>
-            <ListItemText>{item.name}</ListItemText>
+            {!collapsed && <ListItemText>{item.name}</ListItemText>}
           </ListItemButton>
         ))}
       </List>
       <Divider sx={{ mt: "auto" }} />
+
       <Stack
         direction="row"
+        height="50px"
+        justifyContent={collapsed ? "center" : "flex-start"}
         alignItems="center"
         py={theme.gap.small}
         px={theme.gap.medium}
@@ -251,22 +315,26 @@ function Sidebar() {
         borderRadius={`${theme.shape.borderRadius}px`}
       >
         <Avatar small={true} />
-        <Box ml={theme.gap.xs}>
-          <Typography component="span" fontWeight={500}>
-            {authState.user?.firstName} {authState.user?.lastName}
-          </Typography>
-          <Typography sx={{ textTransform: "capitalize" }}>
-            {authState.user?.role}
-          </Typography>
-        </Box>
-        <Tooltip title="Log Out">
-          <IconButton
-            sx={{ ml: "auto", "&:focus": { outline: "none" } }}
-            onClick={logout}
-          >
-            <LogoutSvg style={{ width: "20px", height: "20px" }} />
-          </IconButton>
-        </Tooltip>
+        {!collapsed && (
+          <>
+            <Box ml={theme.gap.xs}>
+              <Typography component="span" fontWeight={500}>
+                {authState.user?.firstName} {authState.user?.lastName}
+              </Typography>
+              <Typography sx={{ textTransform: "capitalize" }}>
+                {authState.user?.role}
+              </Typography>
+            </Box>
+            <Tooltip title="Log Out">
+              <IconButton
+                sx={{ ml: "auto", "&:focus": { outline: "none" } }}
+                onClick={logout}
+              >
+                <LogoutSvg style={{ width: "20px", height: "20px" }} />
+              </IconButton>
+            </Tooltip>
+          </>
+        )}
       </Stack>
     </Stack>
   );
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index f143b3fd9..dcdcf0535 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -19,7 +19,6 @@
 
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
-  flex: 1;
 
   border: 1px solid var(--color-border-0);
   border-radius: var(--env-var-radius-1);
@@ -27,10 +26,6 @@
 
   padding: var(--env-var-spacing-1) 0;
 }
-.home-layout aside > *:not(:first-child) {
-  padding-left: var(--env-var-spacing-1-plus);
-  padding-right: var(--env-var-spacing-1-plus);
-}
 
 .home-layout > div {
   min-height: calc(100vh - var(--env-var-spacing-2) * 2);
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 187d9c63d..8fff6e4a1 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -2,7 +2,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import "./index.css";
 import React, { useState } from "react";
 import Button from "../../../Components/Button";
-import Back from "../../../assets/icons/left-arrow.svg?react";
+import Back from "../../../assets/icons/left-arrow-long.svg?react";
 import Select from "../../../Components/Inputs/Select";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
diff --git a/Client/src/assets/icons/left-arrow-long.svg b/Client/src/assets/icons/left-arrow-long.svg
new file mode 100644
index 000000000..db9b827ed
--- /dev/null
+++ b/Client/src/assets/icons/left-arrow-long.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/Client/src/assets/icons/left-arrow.svg b/Client/src/assets/icons/left-arrow.svg
index db9b827ed..8b38c408a 100644
--- a/Client/src/assets/icons/left-arrow.svg
+++ b/Client/src/assets/icons/left-arrow.svg
@@ -1,3 +1,3 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 7H1M1 7L7 13M1 7L7 1" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 18L9 12L15 6" stroke="#667085" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>