diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 2563da0e8..8b03a1634 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -5746,6 +5746,23 @@ button.module-image__border-overlay:focus {
 // Module: conversation list
 
 .module-conversation-list {
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    visibility: hidden;
+    width: 6px;
+
+    @include light-theme {
+      background: $color-black-alpha-40;
+    }
+    @include dark-theme {
+      background: $color-white-alpha-40;
+    }
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    visibility: visible;
+  }
+
   &--scroll-behavior {
     &-default {
       @include smooth-scroll;
diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index 566f01692..a0d711b60 100644
--- a/stylesheets/components/Preferences.scss
+++ b/stylesheets/components/Preferences.scss
@@ -112,7 +112,7 @@
 
   &__settings-pane {
     height: 100vh;
-    overflow: scroll;
+    overflow: overlay;
     width: 100%;
 
     &::-webkit-scrollbar-corner {
diff --git a/ts/components/ConversationList.tsx b/ts/components/ConversationList.tsx
index 0c7d4563a..09c91109a 100644
--- a/ts/components/ConversationList.tsx
+++ b/ts/components/ConversationList.tsx
@@ -337,7 +337,7 @@ export const ConversationList: React.FC<PropsType> = ({
       rowHeight={calculateRowHeight}
       rowRenderer={renderRow}
       scrollToIndex={scrollToRowIndex}
-      style={{ overflow: scrollable ? 'auto' : 'hidden' }}
+      style={{ overflow: scrollable ? 'overlay' : 'hidden' }}
       tabIndex={-1}
       width={width}
     />