diff --git a/modules/webapp/src/main/elm/Styles.elm b/modules/webapp/src/main/elm/Styles.elm
index ea5c5f94..0be1a211 100644
--- a/modules/webapp/src/main/elm/Styles.elm
+++ b/modules/webapp/src/main/elm/Styles.elm
@@ -3,7 +3,7 @@ module Styles exposing (..)
 
 sidebar : String
 sidebar =
-    " flex flex-col flex-none md:w-80 w-full min-h-max px-4 dark:text-gray-200 shadow overflow-y-auto scrollbar-none h-full transition-opacity transition-duration-200 "
+    " flex flex-col flex-none md:w-80 w-full min-h-max px-4 dark:text-gray-200 shadow overflow-y-auto h-full transition-opacity transition-duration-200 scrollbar-thin scrollbar-light-sidebar dark:scrollbar-dark-sidebar"
 
 
 sidebarBg : String
@@ -18,7 +18,7 @@ sidebarMenuItemActive =
 
 content : String
 content =
-    "container mx-auto px-2 h-screen-12 overflow-y-auto scrollbar-none"
+    "container mx-auto px-2 h-screen-12 overflow-y-auto scrollbar-main scrollbar-thin"
 
 
 sidebarLink : String
diff --git a/modules/webapp/src/main/styles/index.css b/modules/webapp/src/main/styles/index.css
index 165ca2cd..0639a27c 100644
--- a/modules/webapp/src/main/styles/index.css
+++ b/modules/webapp/src/main/styles/index.css
@@ -136,8 +136,47 @@
         display: none;
     }
 
+    .scrollbar-thin {
+        scrollbar-width: thin;
+    }
+    .scrollbar-thin::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    @variants dark {
+        .scrollbar-dark-sidebar {
+            scrollbar-color: rgba(15,23,42,0.9) rgba(15,23,42,0.3);
+        }
+        .scrollbar-light-sidebar {
+            scrollbar-color: rgba(219, 234, 254, 1.0) rgba(219, 234, 254,0.3);
+        }
+        .scrollbar-main {
+            scrollbar-color: rgba(156, 163, 175,0.9) rgba(156, 163, 175,0.3);
+        }
+
+        .scrollbar-dark-sidebar::-webkit-scrollbar {
+            background-color: rgba(15,23,42,0.3);
+        }
+        .scrollbar-dark-sidebar::-webkit-scrollbar-thumb {
+            background: rgba(15,23,42,0.9);
+        }
+
+        .scrollbar-light-sidebar::-webkit-scrollbar {
+            background-color: rgba(219, 234, 254, 0.3);
+        }
+        .scrollbar-light-sidebar::-webkit-scrollbar-thumb {
+            background: rgba(219, 234, 254, 1.0);
+        }
+
+        .scrollbar-main::-webkit-scrollbar {
+            background-color: rgba(156, 163, 175, 0.3);
+        }
+        .scrollbar-main::-webkit-scrollbar-thumb {
+            background:  rgba(156, 163, 175, 0.9);
+        }
+    }
+
     .ds-card-search-hl strong {
         @apply bg-lime-200 dark:bg-lightblue-700 italic font-bold px-1;
     }
-
 }