diff --git a/stylesheets/_emoji.scss b/stylesheets/_emoji.scss
index dd944b780657..de7192d9113c 100644
--- a/stylesheets/_emoji.scss
+++ b/stylesheets/_emoji.scss
@@ -134,6 +134,13 @@ button.emoji {
   }
   .ep ::-webkit-scrollbar {
     // matches what is set in _global.scss; needs !important to override emoji panel CSS
-    width: 10px !important;
+    width: 9px !important;
+  }
+  .ep ::-webkit-scrollbar-thumb {
+    background: $color-light-35;
+
+    &:hover {
+      background: $color-light-45;
+    }
   }
 }
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index 312595386f10..4bba6c9bf6dd 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -16,6 +16,28 @@ body {
   color: $color-light-90;
 }
 
+::-webkit-scrollbar {
+  width: 9px;
+  height: 9px;
+}
+
+::-webkit-scrollbar-track {
+  background: $color-white;
+}
+
+::-webkit-scrollbar-thumb {
+  background: $color-light-35;
+  border: 2px solid $color-white;
+
+  &:hover {
+    background: $color-light-45;
+  }
+}
+
+::-webkit-scrollbar-corner {
+  background: $color-white;
+}
+
 .dark-overlay {
   position: absolute;
   top: 0;
diff --git a/stylesheets/_index.scss b/stylesheets/_index.scss
index 16cb6852d667..ef7111075c9b 100644
--- a/stylesheets/_index.scss
+++ b/stylesheets/_index.scss
@@ -20,6 +20,15 @@
 
 .gutter {
   background-color: $color-black-008-no-tranparency;
+
+  ::-webkit-scrollbar-track {
+    background: $color-black-008-no-tranparency;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border: 2px solid $color-black-008-no-tranparency;
+  }
+
   float: left;
   width: 300px;
   .content {
diff --git a/stylesheets/_theme_dark.scss b/stylesheets/_theme_dark.scss
index 408be4fbcb41..9879837537ea 100644
--- a/stylesheets/_theme_dark.scss
+++ b/stylesheets/_theme_dark.scss
@@ -155,7 +155,6 @@ body.dark-theme {
   }
 
   // _emoji
-
   .ep-emojies {
     background-color: $color-black;
   }
@@ -170,8 +169,35 @@ body.dark-theme {
     }
   }
 
+  .emoji-panel-container {
+    .ep ::-webkit-scrollbar-thumb {
+      background: $color-dark-55;
+
+      &:hover {
+        background: $color-dark-30;
+      }
+    }
+  }
+
   // _global
 
+  ::-webkit-scrollbar-track {
+    background: $color-black;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: $color-dark-55;
+    border: 2px solid $color-black;
+
+    &:hover {
+      background: $color-dark-30;
+    }
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: $color-black;
+  }
+
   .dark-overlay {
     background-color: $color-black;
   }
@@ -431,6 +457,14 @@ body.dark-theme {
 
   .gutter {
     background-color: $color-dark-85;
+
+    ::-webkit-scrollbar-track {
+      background: $color-dark-85;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border: 2px solid $color-dark-85;
+    }
   }
   .network-status-container {
     .network-status {