diff --git a/packages/browser-sdk/src/toolbar/Features.css b/packages/browser-sdk/src/toolbar/Features.css
index 0c8927bf..1083e987 100644
--- a/packages/browser-sdk/src/toolbar/Features.css
+++ b/packages/browser-sdk/src/toolbar/Features.css
@@ -47,13 +47,15 @@
   opacity: 0;
   transform: translateY(-7px);
   transition-property: opacity, transform;
-  transition-duration: 0.1s;
+  transition-duration: 0.075s;
   transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);
 
   &.show {
     opacity: 1;
     transform: translateY(0);
-    transition-delay: calc(0.01s * var(--i));
+    /* stagger effect where first item (i=0) has no delay,
+       and delay is based on item count (n) so total animation time always is 509ms */
+    transition-delay: calc(0.05s * var(--i) / max(var(--n) - 1, 1));
   }
 }
 
diff --git a/packages/browser-sdk/src/toolbar/Features.tsx b/packages/browser-sdk/src/toolbar/Features.tsx
index 67fa7106..ec50bf66 100644
--- a/packages/browser-sdk/src/toolbar/Features.tsx
+++ b/packages/browser-sdk/src/toolbar/Features.tsx
@@ -19,7 +19,7 @@ export function FeaturesTable({
     return <div style={{ color: "var(--gray500)" }}>No features found</div>;
   }
   return (
-    <table class="features-table">
+    <table class="features-table" style={{ "--n": features.length }}>
       <tbody>
         {features.map((feature, index) => (
           <FeatureRow
diff --git a/packages/browser-sdk/src/toolbar/Toolbar.css b/packages/browser-sdk/src/toolbar/Toolbar.css
index 3b3eee4d..08f74ccf 100644
--- a/packages/browser-sdk/src/toolbar/Toolbar.css
+++ b/packages/browser-sdk/src/toolbar/Toolbar.css
@@ -56,9 +56,9 @@
   --gray500: #787c91;
   --black: #1e1f24;
 
-  --bg-color: hsla(230, 9%, 13%, 0.85);
-  --bg-light-color: hsla(230, 9%, 11%, 0.85);
-  --border-color: hsl(227, 10%, 18%);
+  --bg-color: hsla(230, 9%, 8%, 0.85);
+  --bg-light-color: hsla(230, 9%, 6%, 0.85);
+  --border-color: hsla(0, 0%, 100%, 0.1);
   --bg-blur: 3px;
 
   --logo-color: white;
@@ -99,6 +99,43 @@
   z-index: 999999;
   min-width: 200px;
   padding: 0;
+
+  --visible-features: 15;
+  max-height: min(
+    calc(100vh - 36px - 35px),
+    calc(45px + (var(--visible-features) * 27px))
+  );
+
+  &[open] {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.dialog-content {
+  overflow-y: auto;
+  max-height: 100%;
+  flex-grow: 1;
+  margin: 3px 3px 3px 0;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 999px;
+    transition: background-color 0.1s ease;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
 }
 
 .toolbar-toggle {
diff --git a/packages/browser-sdk/src/toolbar/Toolbar.tsx b/packages/browser-sdk/src/toolbar/Toolbar.tsx
index 9ded8201..fd602dd5 100644
--- a/packages/browser-sdk/src/toolbar/Toolbar.tsx
+++ b/packages/browser-sdk/src/toolbar/Toolbar.tsx
@@ -76,6 +76,10 @@ export default function Toolbar({
   const searchedFeatures =
     search === null ? features : features.filter((f) => f.key.includes(search));
 
+  const sortedFeatures = [...searchedFeatures].sort((a, b) =>
+    a.key.localeCompare(b.key),
+  );
+
   const appBaseUrl = bucketClient.getConfig().appBaseUrl;
 
   const { isOpen, close, toggle } = useDialog();
@@ -108,7 +112,7 @@ export default function Toolbar({
         <DialogContent>
           <FeaturesTable
             appBaseUrl={appBaseUrl}
-            features={searchedFeatures}
+            features={sortedFeatures}
             isOpen={isOpen}
             setEnabledOverride={bucketClient.setFeatureOverride.bind(
               bucketClient,
diff --git a/packages/browser-sdk/src/ui/Dialog.css b/packages/browser-sdk/src/ui/Dialog.css
index dcb6c24c..b474bc1b 100644
--- a/packages/browser-sdk/src/ui/Dialog.css
+++ b/packages/browser-sdk/src/ui/Dialog.css
@@ -44,11 +44,11 @@
 
   &[open] {
     animation: /* easeOutQuint */
-      scale 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
+      scale 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      fade 150ms cubic-bezier(0.22, 1, 0.36, 1);
 
     &::backdrop {
-      animation: fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
+      animation: fade 150ms cubic-bezier(0.22, 1, 0.36, 1);
     }
   }
 }
@@ -61,8 +61,8 @@
 
   &[open] {
     animation: /* easeOutQuint */
-      scale 200ms cubic-bezier(0.22, 1, 0.36, 1),
-      fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
+      scale 150ms cubic-bezier(0.22, 1, 0.36, 1),
+      fade 150ms cubic-bezier(0.22, 1, 0.36, 1);
   }
   &.bottom {
     transform-origin: top center;