diff --git a/components/utilities/kapaModal.css b/components/utilities/kapaModal.css
index d6efcb5e6..ed2d91488 100644
--- a/components/utilities/kapaModal.css
+++ b/components/utilities/kapaModal.css
@@ -2,6 +2,10 @@
   background-color: rgba(166, 168, 184, 0.6) !important;
 }
 
+.mantine-Paper-root {
+  @apply bg-white dark:bg-gray-90;
+}
+
 .mantine-Modal-header,
 .mantine-Modal-header h3 {
   @apply bg-white dark:bg-gray-90 text-gray-90 dark:text-gray-40 border-b-0 font-normal tracking-wide;
diff --git a/components/utilities/search.module.css b/components/utilities/search.module.css
index b11463e98..943715363 100644
--- a/components/utilities/search.module.css
+++ b/components/utilities/search.module.css
@@ -9,6 +9,11 @@
 
 .ContentContainer {
   @apply p-0 rounded-md w-96 overflow-x-hidden overflow-y-auto w-full h-full;
+  @apply bg-gray-10;
+}
+
+:global(.dark) .ContentContainer {
+  @apply bg-gray-90;
 }
 
 /* Search Bar */
diff --git a/styles/globals.css b/styles/globals.css
index 3e4758bc8..8dbf739f8 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -3,13 +3,18 @@
 @tailwind utilities;
 
 html {
-  @apply overflow-x-hidden scroll-pt-12;
+  @apply overflow-x-hidden overflow-y-auto scroll-pt-12;
 }
 
 body {
+  @apply bg-white;
   @apply scroll-m-12;
 }
 
+.dark body {
+  @apply bg-gray-100;
+}
+
 /* Utility to hide text that only is needed in screen readers */
 .sr-only {
   @apply absolute top-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-none;
diff --git a/styles/scrollbars.scss b/styles/scrollbars.scss
index 7fcb05a76..c92942b48 100644
--- a/styles/scrollbars.scss
+++ b/styles/scrollbars.scss
@@ -1,25 +1,39 @@
-/* Improve scrollbars on Chrome + Windows/Linux. */
-body:not(.mac) {
+@supports (scrollbar-color: #000 #111) {
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  :hover {
+    scrollbar-color: theme("colors.gray.40") transparent;
+  }
+
+  .dark:hover,
+  .dark :hover {
+    scrollbar-color: theme("colors.gray.70") transparent;
+  }
+}
+
+@supports not (scrollbar-color: #000 #111) {
   ::-webkit-scrollbar {
-    height: 6px;
-    width: 6px;
-    background: transparent;
+    @apply h-2 w-2 bg-transparent;
   }
 
-  ::-webkit-scrollbar-thumb:horizontal {
-    margin-top: -6px;
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full;
   }
 
-  ::-webkit-scrollbar-thumb:active {
-    opacity: 1;
-    background-color: rgba(128, 132, 149, 0.75);
+  :hover::-webkit-scrollbar-thumb {
+    @apply bg-gray-50 bg-opacity-70;
   }
 
   ::-webkit-scrollbar-thumb:hover,
-  :hover::-webkit-scrollbar-thumb:horizontal,
-  :hover::-webkit-scrollbar-thumb:vertical {
-    border-radius: 9999px;
-    opacity: 1;
-    background-color: rgba(191, 197, 211, 0.75);
+  :hover::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-50 bg-opacity-100;
+  }
+
+  ::-webkit-scrollbar-thumb:active,
+  :hover::-webkit-scrollbar-thumb:active {
+    @apply bg-gray-70 bg-opacity-100;
   }
 }