diff --git a/packages/ui/src/components/instance-tabs.tsx b/packages/ui/src/components/instance-tabs.tsx
index 263cbd51..14537708 100644
--- a/packages/ui/src/components/instance-tabs.tsx
+++ b/packages/ui/src/components/instance-tabs.tsx
@@ -18,8 +18,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
   return (
     <div class="tab-bar tab-bar-instance">
       <div class="tab-container" role="tablist">
-        <div class="tab-scroll flex items-center gap-3 overflow-x-auto w-full">
-          <div class="flex items-center gap-1 flex-1 min-w-0">
+        <div class="tab-scroll">
+          <div class="tab-strip">
             <For each={Array.from(props.instances.entries())}>
               {([id, instance]) => (
                 <InstanceTab
@@ -38,10 +38,8 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
             >
               <Plus class="w-4 h-4" />
             </button>
-          </div>
-          <div class="flex items-center gap-2 flex-shrink-0 ml-auto">
             <Show when={Array.from(props.instances.entries()).length > 1}>
-              <div>
+              <div class="tab-shortcuts">
                 <KeyboardHint
                   shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
                     Boolean,
@@ -58,13 +56,12 @@ const InstanceTabs: Component<InstanceTabsProps> = (props) => {
               >
                 <MonitorUp class="w-4 h-4" />
               </button>
-
             </Show>
           </div>
         </div>
-
       </div>
     </div>
+
   )
 }