diff --git a/epictrack-web/src/components/layout/SideNav/SideNav.tsx b/epictrack-web/src/components/layout/SideNav/SideNav.tsx
index 5b9b40c74..bd782cbcc 100644
--- a/epictrack-web/src/components/layout/SideNav/SideNav.tsx
+++ b/epictrack-web/src/components/layout/SideNav/SideNav.tsx
@@ -122,13 +122,19 @@ export const DrawerBox = ({ open = true }: { open?: boolean }) => {
     <Box
       data-testid={`sidenav`}
       sx={{
-        overflow: "hidden",
+        overflowY: "auto",
+        overflowX: "hidden",
         height: "100%",
         background: Palette.primary.main,
         padding: "16px 0px 57px 0px",
       }}
     >
-      <List sx={{ paddingTop: toggleDrawerMarginTop }}>
+      <List
+        sx={{
+          paddingTop: toggleDrawerMarginTop,
+          backgroundColor: "inherit",
+        }}
+      >
         <>
           {Object.keys(groupedRoutes).map((groupKey) => {
             return (
@@ -252,7 +258,7 @@ const SideNav = () => {
       <Drawer
         sx={{
           width: "15%",
-          background: Palette.primary.main,
+          backgroundColor: Palette.primary.main,
         }}
         onClose={handleToggleDrawer}
         anchor={"left"}