diff --git a/web/src/components/layout/sidebar.tsx b/web/src/components/layout/sidebar.tsx
index 7d2f6d90d..cdaaec50f 100644
--- a/web/src/components/layout/sidebar.tsx
+++ b/web/src/components/layout/sidebar.tsx
@@ -21,11 +21,11 @@ export function Sidebar() {
   const tLayer = useTranslations("layer_labels");
 
   return (
-    <nav className="hidden w-56 shrink-0 md:block">
-      <div className="sticky top-[calc(3.5rem+2rem)] space-y-5">
+    <nav className="hidden w-72 shrink-0 md:block">
+      <div className="sticky top-[calc(3.5rem+2rem)] max-h-[calc(100vh-6rem)] space-y-6 overflow-y-auto pr-2">
         {LAYERS.map((layer) => (
           <div key={layer.id}>
-            <div className="flex items-center gap-1.5 pb-1.5">
+            <div className="flex items-center gap-1.5 pb-2">
               <span className={cn("h-2 w-2 rounded-full", LAYER_DOT_BG[layer.id])} />
               <span className="text-[11px] font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
                 {tLayer(layer.id)}