diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9b040fcd..e0ad56a44 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,9 @@ Neste arquivo (CHANGELOG.MD) você encontrará somente as mudanças referentes a
 Podemos ter pequenas breaking changes sem alterar o `major` version, apesar de serem pequenas, podem alterar o comportamento da funcionalidade caso não seja feita uma atualização, **preste muita atenção** nas breaking changes dentro das versões quando existirem.
 
 ## Não publicado
+### Adicionado
+- `utils/scroll.scss`: Adicionado classe `secondary-scroll` com um estilo de scroll mais sútil em relação a padrão.
+
 ### Modificado
 - `QasAppUser`: Alterado do menu "Editar" para "Perfil", uma vez que agora a pagina do /me não é somente para editar.
 
diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
index e193f14b6..8758b7065 100644
--- a/docs/src/assets/menu.js
+++ b/docs/src/assets/menu.js
@@ -472,6 +472,10 @@ module.exports = [
         name: 'opacity',
         path: '/styles/opacity'
       },
+      {
+        name: 'scroll',
+        path: '/styles/scroll'
+      },
       {
         name: 'set-brand',
         path: '/styles/set-brand'
diff --git a/docs/src/pages/styles/scroll.md b/docs/src/pages/styles/scroll.md
new file mode 100644
index 000000000..d1f8951b3
--- /dev/null
+++ b/docs/src/pages/styles/scroll.md
@@ -0,0 +1,7 @@
+---
+title: scroll
+---
+
+| **Nome da Classe** |                    **Descrição**                       |
+|--------------------|--------------------------------------------------------|
+|`secondary-scroll`  | Define uma estilização de scroll mais sútil que a padrão
diff --git a/ui/src/components/grabbable/QasGrabbable.vue b/ui/src/components/grabbable/QasGrabbable.vue
index f495b0e9a..b4fe04ab9 100644
--- a/ui/src/components/grabbable/QasGrabbable.vue
+++ b/ui/src/components/grabbable/QasGrabbable.vue
@@ -2,7 +2,7 @@
   <div class="qas-grabbable relative-position">
     <div
       ref="grabContainer"
-      class="flex no-wrap qas-grabbable__container"
+      class="flex no-wrap qas-grabbable__container secondary-scroll"
       :class="classes"
     >
       <slot />
@@ -136,25 +136,6 @@ onBeforeUnmount(() => {
     -webkit-overflow-scrolling: touch;
     -ms-overflow-style: none;
     overflow-x: auto;
-    scrollbar-color: $blue-grey-3 transparent;
-
-    &::-webkit-scrollbar {
-      height: 12px;
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $blue-grey-3;
-      border-radius: var(--qas-generic-border-radius);
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $blue-grey-4;
-    }
 
     &::before,
     &::after {
diff --git a/ui/src/css/utils/index.scss b/ui/src/css/utils/index.scss
index 44d477ad0..9477676a4 100644
--- a/ui/src/css/utils/index.scss
+++ b/ui/src/css/utils/index.scss
@@ -5,5 +5,6 @@
 @import './fonts';
 @import './line-height';
 @import './opacity';
+@import './scroll';
 @import './text';
 @import './unset';
diff --git a/ui/src/css/utils/scroll.scss b/ui/src/css/utils/scroll.scss
new file mode 100644
index 000000000..6f4e05633
--- /dev/null
+++ b/ui/src/css/utils/scroll.scss
@@ -0,0 +1,21 @@
+.secondary-scroll {
+  scrollbar-color: $blue-grey-3 transparent;
+
+  &::-webkit-scrollbar {
+    height: 12px;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $blue-grey-3;
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $blue-grey-4;
+  }
+}