diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 293464b9c..9699e0136 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -97,6 +97,20 @@ const themeOptions: ThemeOptions = {
     fontWeightMedium: 500,
   },
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '*::-webkit-scrollbar': {
+          width: '5px',
+        },
+        '*::-webkit-scrollbar-track': {
+          background: '#E4EFEF',
+        },
+        '*::-webkit-scrollbar-thumb': {
+          background: '#1D388F61',
+          borderRadius: '2px',
+        },
+      },
+    },
     MuiCard: {
       styleOverrides: {
         root: {
diff --git a/frontend/src/pages/PageLayout.tsx b/frontend/src/pages/PageLayout.tsx
index 3dc54cf73..e3558894f 100644
--- a/frontend/src/pages/PageLayout.tsx
+++ b/frontend/src/pages/PageLayout.tsx
@@ -15,10 +15,10 @@ export default function PageLayout({ children }: PageLayoutProps) {
         justifyContent="flex-start" // added this
         style={{ height: 'calc(100%) ', flexWrap: 'nowrap' }}
       >
-        <Grid item xs={2.5}>
+        <Grid item xs={2}>
           <Sidebar />
         </Grid>
-        <Grid item xs={9} style={{ overflow: 'auto' }}>
+        <Grid item xs={10} style={{ overflow: 'auto' }}>
           {children}
         </Grid>
       </Grid>