From 983b8ab1bc40858af5a012ec7da12f5457510406 Mon Sep 17 00:00:00 2001
From: Karishma Shukla <carishmashukla28@gmail.com>
Date: Thu, 1 Jan 2026 22:56:24 +0530
Subject: [PATCH 1/2] feat: custom scrollbar styles for table container dark
 mode

Add custom scrollbar styles for MuiTableContainer component.
---
 src/context/theme-provider.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx
index 5188f53e..9b8b3164 100644
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -102,6 +102,29 @@ const darkTheme = createTheme({
     },
   },
   components: {
+    MuiTableContainer: {
+      styleOverrides: {
+      root: {
+        overflow: 'auto',
+        /* Firefox */
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'currentColor transparent',
+
+        /* WebKit (Chrome, Edge, Safari) */
+        '&::-webkit-scrollbar': {
+          width: '5px',
+          height: '5px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'currentColor',
+          borderRadius: '8px',
+        },
+      },
+    },
+  },
     MuiButton: {
       styleOverrides: {
         root: {
@@ -280,4 +303,4 @@ const ThemeModeProvider = ({ children }: { children: React.ReactNode }) => {
   );
 };
 
-export default ThemeModeProvider;
\ No newline at end of file
+export default ThemeModeProvider;

From 39c27dc4f84e6e564cb8f1b539f5ffdbb99c2eaa Mon Sep 17 00:00:00 2001
From: Karishma Shukla <carishmashukla28@gmail.com>
Date: Thu, 1 Jan 2026 22:57:26 +0530
Subject: [PATCH 2/2] feat: custom scrollbar styles table light mode

Add custom scrollbar styles for MuiTableContainer.
---
 src/context/theme-provider.tsx | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/context/theme-provider.tsx b/src/context/theme-provider.tsx
index 9b8b3164..553d70a5 100644
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -10,6 +10,29 @@ const lightTheme = createTheme({
     },
   },
   components: {
+    MuiTableContainer: {
+      styleOverrides: {
+      root: {
+        overflow: 'auto',
+        /* Firefox */
+        scrollbarWidth: 'thin',
+        scrollbarColor: 'gray transparent',
+
+        /* WebKit (Chrome, Edge, Safari) */
+        '&::-webkit-scrollbar': {
+          width: '5px',
+          height: '5px',
+        },
+        '&::-webkit-scrollbar-track': {
+          background: 'transparent',
+        },
+        '&::-webkit-scrollbar-thumb': {
+          backgroundColor: 'gray',
+          borderRadius: '8px',
+        },
+      },
+    },
+  },
     MuiButton: {
       styleOverrides: {
         root: {