diff --git a/assets/css/app.css b/assets/css/app.css
index 3e1ffdce1..e5e7fd69a 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -7,3 +7,34 @@
 @import 'tailwindcss/utilities';
 
 /* You can add custom styles here */
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  background: transparent;
+}
+
+.scrollbar-main::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+body::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::-webkit-scrollbar-corner {
+  background: transparent;
+}
diff --git a/assets/css/themes/dark.css b/assets/css/themes/dark.css
index 56364be8d..90286d0a8 100644
--- a/assets/css/themes/dark.css
+++ b/assets/css/themes/dark.css
@@ -18,6 +18,10 @@
     --ui-muted: var(--gray-600);
     --ui-accent: var(--swm-sea-blue-60);
 
+    /* Scrollbar */
+    --scrollbar-thumb: var(--gray-600);
+    --scrollbar-thumb-hover: var(--gray-500);
+
     /* Navbar */
     --navbar-bg: var(--gray-900);
     --navbar-border: var(--gray-700);
diff --git a/assets/css/themes/light.css b/assets/css/themes/light.css
index 20a550619..65ea10b38 100644
--- a/assets/css/themes/light.css
+++ b/assets/css/themes/light.css
@@ -18,6 +18,10 @@
     --ui-muted: var(--slate-300);
     --ui-accent: var(--swm-brand);
 
+    /* Scrollbar */
+    --scrollbar-thumb: var(--slate-300);
+    --scrollbar-thumb-hover: var(--slate-400);
+
     /* Navbar */
     --navbar-bg: var(--neutrals-white);
     --navbar-border: var(--slate-200);
diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index cc040c269..831e46de2 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -237,7 +237,7 @@ defmodule LiveDebugger.Components do
         </div>
       </div>
       <div class={[
-        "flex flex-1 overflow-auto rounded-sm bg-surface-0-bg m-2" | List.wrap(@inner_class)
+        "flex flex-1 overflow-auto rounded-sm bg-surface-0-bg" | List.wrap(@inner_class)
       ]}>
         <%= render_slot(@inner_block) %>
       </div>
diff --git a/lib/live_debugger/components/traces.ex b/lib/live_debugger/components/traces.ex
index bb9a81946..90fc9d240 100644
--- a/lib/live_debugger/components/traces.ex
+++ b/lib/live_debugger/components/traces.ex
@@ -94,7 +94,7 @@ defmodule LiveDebugger.Components.Traces do
         </div>
       </:label>
       <div class="relative">
-        <div class="absolute right-[17px] top-0 z-10">
+        <div class="absolute right-0 top-0 z-10">
           <.fullscreen_button
             id={"trace-fullscreen-#{@id}"}
             class="m-2"
diff --git a/lib/live_debugger/live_views/channel_dashboard_live.ex b/lib/live_debugger/live_views/channel_dashboard_live.ex
index d27226c4b..abacba7c3 100644
--- a/lib/live_debugger/live_views/channel_dashboard_live.ex
+++ b/lib/live_debugger/live_views/channel_dashboard_live.ex
@@ -71,7 +71,7 @@ defmodule LiveDebugger.LiveViews.ChannelDashboardLive do
             node_id={@node_id || lv_process.pid}
           />
 
-          <div class="flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto">
+          <div class="flex grow flex-col xl:flex-row gap-4 xl:gap-8 p-8 overflow-y-auto xl:overflow-y-hidden max-w-screen-2xl mx-auto scrollbar-main">
             <div class="xl:w-1/2">
               <StateLive.live_render
                 id="node-state-lv"