diff --git a/desktop/src/components/layout/TabBar.tsx b/desktop/src/components/layout/TabBar.tsx
index 788677e5..78eb614f 100644
--- a/desktop/src/components/layout/TabBar.tsx
+++ b/desktop/src/components/layout/TabBar.tsx
@@ -99,14 +99,15 @@ export function TabBar() {
   if (tabs.length === 0) return null
 
   return (
-    <div className="flex items-center border-b border-[var(--color-border)] bg-[var(--color-surface)] min-h-[36px] select-none" data-tauri-drag-region>
+    <div className="flex items-center bg-[var(--color-surface-container)] min-h-[37px] select-none border-b border-[var(--color-border)]" data-tauri-drag-region>
+
       {canScrollLeft && (
-        <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+        <button onClick={() => scroll('left')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
           <span className="material-symbols-outlined text-[16px]">chevron_left</span>
         </button>
       )}
 
-      <div ref={scrollRef} className="flex-1 flex overflow-x-hidden">
+      <div ref={scrollRef} className="flex-1 flex items-center overflow-x-hidden" data-tauri-drag-region>
         {tabs.map((tab) => (
           <TabItem
             key={tab.sessionId}
@@ -120,7 +121,7 @@ export function TabBar() {
       </div>
 
       {canScrollRight && (
-        <button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-full flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
+        <button onClick={() => scroll('right')} className="flex-shrink-0 w-7 h-[37px] flex items-center justify-center text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-surface-hover)]">
           <span className="material-symbols-outlined text-[16px]">chevron_right</span>
         </button>
       )}
@@ -197,10 +198,10 @@ function TabItem({ tab, isActive, onClick, onClose, onContextMenu }: {
       onClick={onClick}
       onContextMenu={onContextMenu}
       className={`
-        flex-shrink-0 flex items-center gap-1.5 px-3 h-[36px] border-r border-[var(--color-border)] cursor-pointer group transition-colors
+        flex-shrink-0 flex items-center gap-1.5 px-3 cursor-pointer group transition-colors
         ${isActive
-          ? 'bg-[var(--color-surface)] border-b-2 border-b-[var(--color-brand)]'
-          : 'bg-[var(--color-surface-container-low)] hover:bg-[var(--color-surface-hover)]'
+          ? 'h-[37px] bg-[var(--color-surface)] border-t-2 border-t-[var(--color-brand)]'
+          : 'h-[37px] bg-transparent hover:bg-[var(--color-surface-hover)]'
         }
       `}
       style={{ width: TAB_WIDTH, maxWidth: TAB_WIDTH }}
diff --git a/desktop/src/pages/Settings.tsx b/desktop/src/pages/Settings.tsx
index 0c09a1a1..2d225b68 100644
--- a/desktop/src/pages/Settings.tsx
+++ b/desktop/src/pages/Settings.tsx
@@ -22,7 +22,7 @@ export function Settings() {
     <div className="flex-1 flex flex-col overflow-hidden bg-[var(--color-surface)]">
       <div className="flex-1 flex overflow-hidden">
         {/* Tab navigation */}
-        <div className="w-48 border-r border-[var(--color-border)] py-3 flex-shrink-0">
+        <div className="w-[180px] border-r border-[var(--color-border)] py-3 flex-shrink-0">
           <TabButton icon="dns" label={t('settings.tab.providers')} active={activeTab === 'providers'} onClick={() => setActiveTab('providers')} />
           <TabButton icon="shield" label={t('settings.tab.permissions')} active={activeTab === 'permissions'} onClick={() => setActiveTab('permissions')} />
           <TabButton icon="tune" label={t('settings.tab.general')} active={activeTab === 'general'} onClick={() => setActiveTab('general')} />