diff --git a/assets/css/app.css b/assets/css/app.css
index 9fde003..64eb387 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -6,7 +6,7 @@
 @import "syntax.css";
 
 .search-hit {
-  color: #fb923c
+  color: #fb923c;
 }
 
 /* Alerts and form errors used by phx.new */
@@ -96,4 +96,23 @@
   color: black;
   text-decoration: none;
   cursor: pointer;
-}
\ No newline at end of file
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  padding: 0px 4px 0px 4px;
+  margin-right: 12px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #888888;
+  border-radius: 12px;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.custom-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: 8px; /* Firefox */
+  scrollbar-color: #888888 transparent;
+}
diff --git a/lib/ash_hq_web/pages/docs.ex b/lib/ash_hq_web/pages/docs.ex
index a436de6..23ebb55 100644
--- a/lib/ash_hq_web/pages/docs.ex
+++ b/lib/ash_hq_web/pages/docs.ex
@@ -82,27 +82,29 @@ defmodule AshHqWeb.Pages.Docs do
         </div>
       </span>
       <div class="grow w-screen overflow-hidden flex flex-row h-full justify-between md:space-x-12 bg-white dark:bg-primary-black">
-        <DocSidebar
-          id="sidebar"
-          class="hidden xl:block pt-10 w-80 overflow-x-hidden border-r"
-          change_version={@change_version}
-          add_version={@add_version}
-          remove_version={@remove_version}
-          module={@module}
-          libraries={@libraries}
-          extension={@extension}
-          sidebar_state={@sidebar_state}
-          collapse_sidebar={@collapse_sidebar}
-          expand_sidebar={@expand_sidebar}
-          guide={@guide}
-          library={@library}
-          library_version={@library_version}
-          selected_versions={@selected_versions}
-          dsl={@dsl}
-        />
+        <div class="lg:border-r lg:pr-2 lg:pt-14">
+          <DocSidebar
+            id="sidebar"
+            class="hidden xl:block w-80 overflow-x-hidden custom-scrollbar"
+            change_version={@change_version}
+            add_version={@add_version}
+            remove_version={@remove_version}
+            module={@module}
+            libraries={@libraries}
+            extension={@extension}
+            sidebar_state={@sidebar_state}
+            collapse_sidebar={@collapse_sidebar}
+            expand_sidebar={@expand_sidebar}
+            guide={@guide}
+            library={@library}
+            library_version={@library_version}
+            selected_versions={@selected_versions}
+            dsl={@dsl}
+          />
+        </div>
         <div
           id="docs-window"
-          class="w-full prose prose-xl max-w-4xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto"
+          class="w-full prose prose-xl max-w-4xl dark:bg-primary-black dark:prose-invert overflow-y-auto overflow-x-visible md:pr-8 md:mt-14 px-4 md:px-auto custom-scrollbar"
           phx-hook="Docs"
         >
           <div id="module-docs" class="w-full nav-anchor text-black dark:text-white relative py-4 md:py-auto">