diff --git a/src/app/template.js b/src/app/template.js
index 8db5145..3e14053 100644
--- a/src/app/template.js
+++ b/src/app/template.js
@@ -11,14 +11,18 @@ const Template = ({ children }) => {
             <ThemeProvider theme={theme}>
                 <GlobalStyles
                     styles={{
-                        "&::-webkit-scrollbar": {
+                        "*": {
+                            scrollbarWidth: "thin",
+                            scrollbarColor: `#155175 transparent`,
+                        },
+                        "*&::-webkit-scrollbar": {
                             width: "5px",
                         },
-                        "&::-webkit-scrollbar-track": {
+                        "*&::-webkit-scrollbar-track": {
                             boxShadow: "inset 0 0 5px #fff",
                             borderRadius: "5px",
                         },
-                        "&::-webkit-scrollbar-thumb": {
+                        "*&::-webkit-scrollbar-thumb": {
                             background: "#155175",
                             borderRadius: "5px",
                         },
diff --git a/src/components/layouts/dashboard/headerWithSidebar/index.jsx b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
index 715588c..b430f1e 100644
--- a/src/components/layouts/dashboard/headerWithSidebar/index.jsx
+++ b/src/components/layouts/dashboard/headerWithSidebar/index.jsx
@@ -105,7 +105,7 @@ const HeaderWithSidebar = ({ children }) => {
             </Drawer>
             <Main open={open} sx={{ height: '100%', width: '100%', overflow: 'hidden' }}>
                 <DrawerHeader />
-                <Box sx={{ height: '100%', width: '100%', overflowY: 'scroll', overflowX: 'hidden', }}>
+                <Box sx={{ height: '100%', width: '100%', overflowY: 'auto', overflowX: 'hidden', }}>
                     {children}
                 </Box>
             </Main>