diff --git a/packages/renderer/src/components/scroll-area/index.tsx b/packages/renderer/src/components/scroll-area/index.tsx
index 72552cae6..1582a74bf 100644
--- a/packages/renderer/src/components/scroll-area/index.tsx
+++ b/packages/renderer/src/components/scroll-area/index.tsx
@@ -13,7 +13,7 @@ const StyledScrollArea = styled(MantineScrollArea)`
   }
 
   & .mantine-ScrollArea-scrollbar {
-    width: 8px;
+    width: 12px;
     padding: 0;
     background: var(--scrollbar-track-bg);
   }
diff --git a/packages/renderer/src/styles/global.scss b/packages/renderer/src/styles/global.scss
index ef9b69dae..652aae2b4 100644
--- a/packages/renderer/src/styles/global.scss
+++ b/packages/renderer/src/styles/global.scss
@@ -46,8 +46,8 @@ html {
 }
 
 ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
 }
 
 ::-webkit-scrollbar-corner {
@@ -91,6 +91,32 @@ button {
   display: none; /* Safari and Chrome */
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.mantine-ScrollArea-thumb[data-state="visible"] {
+  animation: fadeIn 0.3s forwards;
+}
+
+.mantine-ScrollArea-scrollbar[data-state="hidden"] {
+  animation: fadeOut 0.2s forwards;
+}
+
 @font-face {
   font-family: "AnekTamil";
   src: url("../fonts/AnekTamil-Regular.ttf") format("truetype");