diff --git a/lib/components/sidebar/index.tsx b/lib/components/sidebar/index.tsx
index 22a32e8..c8d2b79 100644
--- a/lib/components/sidebar/index.tsx
+++ b/lib/components/sidebar/index.tsx
@@ -51,6 +51,16 @@ export const Sidebar: React.FC<SideGroupProps> = React.memo(({ sides }) => {
           overflow-x: hidden;
           height: calc(100vh - 140px);
         }
+        
+        .box::-webkit-scrollbar {
+          width: 5px;
+          background-color: ${theme.palette.accents_1};
+        }
+        
+        .box::-webkit-scrollbar-thumb {
+          background-color: ${theme.palette.accents_2};
+          border-radius: ${theme.layout.radius};
+        }
 
         .box>:global(.item) {
           margin-bottom: 10px;
diff --git a/pages/_app.tsx b/pages/_app.tsx
index d21d246..44bdaf3 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -36,45 +36,55 @@ const Application: NextPage<AppProps> = ({ Component, pageProps }) => {
           <Component {...pageProps} />
         </ConfigContext>
         <style global jsx>{`
-        .tag {
-          color: ${theme.palette.accents_5};
-        }
-        
-        .punctuation {
-          color: ${theme.palette.accents_5};
-        }
-        
-        .attr-name {
-          color: ${theme.palette.accents_6};
-        }
-        
-        .attr-value {
-          color: ${theme.palette.accents_4};
-        }
-        
-        .language-javascript {
-          color: ${theme.palette.accents_4};
-        }
-        
-        span.class-name {
-          color: ${theme.palette.warning};
-        }
-        
-        span.maybe-class-name {
-          color: ${theme.palette.purple};
-        }
-        
-        span.token.string {
-          color: ${theme.palette.accents_5};
-        }
-        
-        span.keyword {
-          color: ${theme.palette.success}
-        }
-        
-        span.plain-text {
-          color: ${theme.palette.accents_3};
-        }
+          .tag {
+            color: ${theme.palette.accents_5};
+          }
+          
+          .punctuation {
+            color: ${theme.palette.accents_5};
+          }
+          
+          .attr-name {
+            color: ${theme.palette.accents_6};
+          }
+          
+          .attr-value {
+            color: ${theme.palette.accents_4};
+          }
+          
+          .language-javascript {
+            color: ${theme.palette.accents_4};
+          }
+          
+          span.class-name {
+            color: ${theme.palette.warning};
+          }
+          
+          span.maybe-class-name {
+            color: ${theme.palette.purple};
+          }
+          
+          span.token.string {
+            color: ${theme.palette.accents_5};
+          }
+          
+          span.keyword {
+            color: ${theme.palette.success}
+          }
+          
+          span.plain-text {
+            color: ${theme.palette.accents_3};
+          }
+          
+          body::-webkit-scrollbar {
+            width: 5px;
+            background-color: ${theme.palette.accents_1};
+          }
+          
+          body::-webkit-scrollbar-thumb {
+            background-color: ${theme.palette.accents_2};
+            border-radius: ${theme.layout.radius};
+          }
       `}</style>
       </ZEITUIProvider>
     </>