diff --git a/src/frontend/src/App.css b/src/frontend/src/App.css
index 5a97d371e..5564ca084 100644
--- a/src/frontend/src/App.css
+++ b/src/frontend/src/App.css
@@ -90,31 +90,31 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #f1f1f1 !important;
+  background-color: hsl(var(--muted)) !important;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #ccc !important;
+  background-color: hsl(var(--border)) !important;
   border-radius: 999px !important;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #bbb !important;
+  background-color: hsl(var(--ring)) !important;
 }
 
 .jv-indent::-webkit-scrollbar-track {
-  background-color: #f1f1f1 !important;
+  background-color: hsl(var(--muted)) !important;
   border-radius: 10px;
 }
 
 .jv-indent::-webkit-scrollbar-thumb {
-  background-color: #ccc !important;
+  background-color: hsl(var(--border)) !important;
   border-radius: 999px !important;
 }
 
 .jv-indent::-webkit-scrollbar-thumb:hover {
-  background-color: #bbb !important;
+  background-color: hsl(var(--ring)) !important;
 }
 
 .custom-hover {
@@ -138,33 +138,6 @@ body {
   background-color: #bbb !important;
 }
 
-.ag-body-horizontal-scroll-viewport,
-.ag-body-vertical-scroll-viewport {
-  cursor: auto;
-}
-
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
-.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
-.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-}
-
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
-.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
-  background-color: #ccc;
-  border-radius: 999px;
-}
-
-.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
-.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
-  background-color: #bbb;
-}
-
 /* This CSS is to not apply the border for the column having 'no-border' class */
 .no-border.ag-cell:focus {
   border: none !important;
diff --git a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
index c02c6a560..2fc21bedd 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GeneralPage/components/ProfilePictureForm/components/profilePictureChooserComponent/index.tsx
@@ -47,7 +47,7 @@ export default function ProfilePictureChooserComponent({
               <span className="font-normal">{folder}</span>
             </div>
             <div className="block overflow-hidden">
-              <div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-background px-1">
+              <div className="flex items-center gap-1 overflow-x-auto rounded-lg bg-background px-1 custom-scroll">
                 {profilePictures[folder].map((path, idx) => (
                   <Button
                     ref={value === folder + "/" + path ? ref : undefined}
diff --git a/src/frontend/src/style/ag-theme-shadcn.css b/src/frontend/src/style/ag-theme-shadcn.css
index bec2082b4..93e996493 100644
--- a/src/frontend/src/style/ag-theme-shadcn.css
+++ b/src/frontend/src/style/ag-theme-shadcn.css
@@ -28,3 +28,38 @@
   padding-top: 0.675rem;
   padding-bottom: 0.675rem;
 }
+
+.ag-body-horizontal-scroll-viewport,
+.ag-body-vertical-scroll-viewport {
+  cursor: auto;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-track,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-track {
+  background-color: hsl(var(--muted));
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb {
+  background-color: hsl(var(--border));
+  border-radius: 999px;
+}
+
+.ag-body-horizontal-scroll-viewport::-webkit-scrollbar-thumb:hover,
+.ag-body-vertical-scroll-viewport::-webkit-scrollbar-thumb:hover {
+  background-color: hsl(var(--ring));
+}
+
+.ag-paging-page-size {
+  display: none;
+}
+
+.ag-row {
+  cursor: pointer;
+}
diff --git a/src/frontend/src/style/classes.css b/src/frontend/src/style/classes.css
index 47a5687ae..dfe6389d4 100644
--- a/src/frontend/src/style/classes.css
+++ b/src/frontend/src/style/classes.css
@@ -15,14 +15,6 @@ pre {
   font-family: inherit;
 }
 
-.ag-paging-page-size {
-  display: none;
-}
-
-.ag-row {
-  cursor: pointer;
-}
-
 .react-flow__pane {
   cursor: default;
 }
@@ -64,16 +56,16 @@ select:-webkit-autofill:focus {
 }
 
 .ace_scrollbar::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
+  background-color: hsl(var(--muted));
 }
 
 .ace_scrollbar::-webkit-scrollbar-thumb {
-  background-color: #ccc;
+  background-color: hsl(var(--border));
   border-radius: 999px;
 }
 
 .ace_scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: #bbb;
+  background-color: hsl(var(--ring));
   border-radius: 999px;
 }
 
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 6f99f7b58..a754db183 100644
--- a/src/frontend/tailwind.config.js
+++ b/src/frontend/tailwind.config.js
@@ -213,14 +213,14 @@ module.exports = {
             height: "8px",
           },
           "&::-webkit-scrollbar-track": {
-            backgroundColor: "#f1f1f1",
+            backgroundColor: "hsl(var(--muted))",
           },
           "&::-webkit-scrollbar-thumb": {
-            backgroundColor: "#ccc",
+            backgroundColor: "hsl(var(--border))",
             borderRadius: "999px",
           },
           "&::-webkit-scrollbar-thumb:hover": {
-            backgroundColor: "#bbb",
+            backgroundColor: "hsl(var(--ring))",
           },
           cursor: "auto",
         },