diff --git a/src/App.tsx b/src/App.tsx
index 1c8db33..d1e18fc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import PreferencesDialog, {
   type PreferencesDialogRef,
 } from "./components/PreferencesDialog";
 import LinkPickerDialog from "./components/LinkPickerDialog";
-import Sidebar, { type SidebarRef } from "./components/sidebar";
+import Sidebar, { clampSidebarWidth, type SidebarRef } from "./components/sidebar";
 import Statusbar from "./components/statusbar";
 import Toolbar from "./components/toolbar";
 import WasmGuest from "./components/WasmGuest";
@@ -27,6 +27,11 @@ import {
   autoLogService,
   createAutoLogSessionDraft,
 } from "./logging/AutoLogService";
+import {
+  loadStoredValue,
+  saveStoredValue,
+  type LocalStorageSchema,
+} from "./persistence";
 import { usePreferences } from "./stores/preferencesStore";
 import { useRoomStore } from "./stores/roomStore";
 import { useConnectionStore } from "./stores/connectionStore";
@@ -36,6 +41,19 @@ import { ensurePushSubscription } from "./webpush";
 const WINDOW_TITLE = "Mongoose Client";
 const DOUBLE_PRESS_WINDOW_MS = 500;
 
+// User-chosen sidebar width in px; absent until the user first resizes.
+const sidebarWidthSchema: LocalStorageSchema<number> = {
+  key: "sidebarWidth",
+  version: 1,
+  migrate: (data) =>
+    typeof data === "number" && Number.isFinite(data) ? data : undefined,
+};
+
+function loadSidebarWidth(): number | null {
+  const stored = loadStoredValue<number | null>(sidebarWidthSchema, null);
+  return stored === null ? null : clampSidebarWidth(stored);
+}
+
 function setWindowSubtitle(subtitle?: string) {
   document.title = subtitle ? `${WINDOW_TITLE} - ${subtitle}` : WINDOW_TITLE;
 }
@@ -92,6 +110,18 @@ function App() {
   const [client, setClient] = useState<MudClient | null>(null);
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(false);
+  const [sidebarWidth, setSidebarWidth] = useState<number | null>(loadSidebarWidth);
+
+  // Persist the user-chosen sidebar width, debounced so drags don't
+  // write localStorage on every pointer move
+  useEffect(() => {
+    if (sidebarWidth === null) return;
+    const timer = window.setTimeout(
+      () => saveStoredValue(sidebarWidthSchema, sidebarWidth),
+      250,
+    );
+    return () => window.clearTimeout(timer);
+  }, [sidebarWidth]);
   const [hostState, setHostState] = useState<WasmHostState>({
     roomId: null,
     guestCount: 0,
@@ -110,8 +140,8 @@ function App() {
 
   const clientInitialized = useRef(false);
   const hapticsRuntimeRef = useRef<HapticsRuntime | null>(null);
-  const midiEnabled = usePreferences((state) => state.midi.enabled);
-  const hapticsEnabled = usePreferences((state) => state.haptics.enabled);
+  const midiEnabled = usePreferences((state) => state.midi.enabled);
+  const hapticsEnabled = usePreferences((state) => state.haptics.enabled);
   const connected = useConnectionStore((state) => state.connected);
   const sessionReady = useConnectionStore((state) => state.sessionReady);
   useFileTransferNotifications(client);
@@ -335,7 +365,7 @@ function App() {
   }, [handleAppKeyDown]);
 
   useEffect(() => {
-    if (!midiEnabled) return;
+    if (!midiEnabled) return;
 
     let cancelled = false;
     import("./VirtualMidiService")
@@ -356,7 +386,7 @@ function App() {
     return () => {
       cancelled = true;
     };
-  }, [midiEnabled]);
+  }, [midiEnabled]);
 
   // Window subtitle tracks the current room from the room store. On disconnect
   // the client resets the store, which clears roomInfo and so clears the subtitle.
@@ -373,8 +403,8 @@ function App() {
   }, [client, roomInfo]);
 
   useEffect(() => {
-    hapticsRuntimeRef.current?.setEnabled(hapticsEnabled);
-  }, [hapticsEnabled]);
+    hapticsRuntimeRef.current?.setEnabled(hapticsEnabled);
+  }, [hapticsEnabled]);
 
   const handleCommand = useCallback(
     (text: string) => {
@@ -435,6 +465,11 @@ function App() {
       {client && (
         <div
           className={`App ${showSidebar ? (sidebarCollapsed ? "sidebar-collapsed" : "sidebar-shown") : ""}`}
+          style={
+            sidebarWidth !== null
+              ? ({ "--sidebar-width": `${sidebarWidth}px` } as React.CSSProperties)
+              : undefined
+          }
         >
           <header style={{ gridArea: "header" }}>
             <Toolbar
@@ -478,6 +513,8 @@ function App() {
               client={client}
               collapsed={sidebarCollapsed}
               onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+              width={sidebarWidth}
+              onWidthChange={setSidebarWidth}
             />
           </aside>
           <footer style={{ gridArea: "status" }}>
diff --git a/src/components/sidebar.css b/src/components/sidebar.css
index 03b09c9..1f6c767 100644
--- a/src/components/sidebar.css
+++ b/src/components/sidebar.css
@@ -1,5 +1,6 @@
 /* Main sidebar container */
 .sidebar {
+  position: relative;
   height: 100%;
   width: var(--sidebar-width);
   display: flex;
@@ -9,6 +10,61 @@
   transition: width var(--duration-slow) var(--ease-default);
 }
 
+/* Instant tracking while the user drags the resize handle */
+.sidebar[data-resizing] {
+  transition: none;
+}
+
+/* Resize handle along the sidebar's left edge (ARIA window splitter) */
+.sidebar-resize-handle {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  margin-left: -4px; /* straddle the border so it's easier to grab */
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+}
+
+.sidebar-resize-handle:hover,
+.sidebar[data-resizing] .sidebar-resize-handle {
+  background: var(--color-primary);
+  opacity: 0.4;
+}
+
+.sidebar-resize-handle:focus-visible {
+  outline: 3px solid var(--color-focus-ring);
+  outline-offset: -3px;
+}
+
+/* Mobile: sidebar is a full-width stacked row; no horizontal resizing */
+@media (max-width: 768px) {
+  .sidebar-resize-handle {
+    display: none;
+  }
+
+  .sidebar {
+    height: auto;
+    border-left: none;
+  }
+
+  /* Cap the tab panel itself so long content scrolls top-to-bottom.
+     (max-height on the auto-height aside can't shrink flex children, so
+     the scroll cap has to live on the overflow container.) Panel cap +
+     tab bar stays within the aside's 40vh/30vh max-height. */
+  .sidebar div[role="tabpanel"] {
+    max-height: 32vh;
+  }
+}
+
+@media (max-width: 768px) and (max-height: 700px) {
+  .sidebar div[role="tabpanel"] {
+    max-height: 22vh;
+  }
+}
+
 /* Collapsed sidebar styles */
 .sidebar.collapsed {
   width: var(--sidebar-width-collapsed, 50px);
@@ -77,8 +133,13 @@
   overflow: hidden;
 }
 
-/* Individual tab panel content area (inside the tabpanel) */
+/* Keep the hidden attribute working despite the display: flex above */
+.sidebar-content[hidden] {
+  display: none;
+}
+
+/* Individual tab panel content area (inside the tabpanel).
+   Padding comes from the tabpanel itself (tabs.css). */
 .sidebar-tab-content {
-  padding: var(--space-5);
   line-height: var(--line-height-base);
 }
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index 8f59789..282f888 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -1,9 +1,21 @@
-import React, { Suspense, useEffect, useState } from 'react'; // Import useState, useEffect
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import React, { Suspense, useEffect, useRef, useState } from 'react'; // Import useState, useEffect
+import {
+  FaBoxOpen,
+  FaChevronLeft,
+  FaChevronRight,
+  FaFolderOpen,
+  FaGamepad,
+  FaHeadphones,
+  FaMapMarkerAlt,
+  FaMusic,
+  FaServer,
+  FaUsers,
+} from 'react-icons/fa';
 import FileTransferUI from './FileTransfer';
 const AudioChat = React.lazy(() => import('./audioChat'));
 const MidiStatus = React.lazy(() => import('./MidiStatus'));
 import Tabs, { type TabProps } from './tabs';
+import './sidebar.css';
 import Userlist from './userlist';
 // import AfflictionsList from "./AfflictionsList"; // Removed
 // import DefencesList from "./DefencesList"; // Removed
@@ -24,16 +36,34 @@ export type SidebarRef = {
   switchToTab: (index: number) => void;
 };
 
+export const MIN_SIDEBAR_WIDTH = 180;
+const KEYBOARD_RESIZE_STEP = 24;
+
+function maxSidebarWidth(): number {
+  return Math.max(MIN_SIDEBAR_WIDTH, Math.round(window.innerWidth * 0.6));
+}
+
+export function clampSidebarWidth(width: number): number {
+  return Math.min(Math.max(Math.round(width), MIN_SIDEBAR_WIDTH), maxSidebarWidth());
+}
+
 interface SidebarProps {
   client: MudClient;
   collapsed: boolean;
   onToggleCollapse: () => void;
+  /** Custom width in px (null = default CSS width). */
+  width?: number | null;
+  /** Called with the new width as the user drags or arrow-keys the resize handle. */
+  onWidthChange?: (width: number) => void;
 }
 
 // Wrap component with forwardRef
 const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
-  ({ client, collapsed, onToggleCollapse }, ref) => {
+  ({ client, collapsed, onToggleCollapse, width = null, onWidthChange }, ref) => {
     const users = useUserlistStore((state) => state.players);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+    const [isResizing, setIsResizing] = useState(false);
+    const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
     const midiPreferences = usePreferences((state) => state.midi);
     const hapticsPreferences = usePreferences((state) => state.haptics);
     const [fileTransferExpanded, setFileTransferExpanded] = useState(true); // Example state
@@ -80,35 +110,93 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
       hapticsService.autoStopTimeoutSecs = hapticsPreferences.autoStopTimeout;
     }, [hapticsPreferences.intensityCap, hapticsPreferences.autoStopTimeout]);
 
+    // Resize handle behavior: pointer drag plus arrow keys (ARIA window
+    // splitter). The sidebar sits on the right, so ArrowLeft grows it.
+    const currentWidth = width ?? measuredWidth;
+
+    useEffect(() => {
+      if (collapsed) return;
+      setMeasuredWidth(containerRef.current?.offsetWidth ?? null);
+    }, [collapsed, width]);
+
+    const handleResizePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!onWidthChange) return;
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsResizing(true);
+    };
+
+    const handleResizePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (!isResizing || !onWidthChange) return;
+      const right = containerRef.current?.getBoundingClientRect().right;
+      if (right === undefined) return;
+      onWidthChange(clampSidebarWidth(right - event.clientX));
+    };
+
+    const handleResizePointerEnd = (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      setIsResizing(false);
+    };
+
+    const handleResizeKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!onWidthChange || currentWidth === null) return;
+      let next: number | null = null;
+      switch (event.key) {
+        case 'ArrowLeft':
+          next = currentWidth + KEYBOARD_RESIZE_STEP;
+          break;
+        case 'ArrowRight':
+          next = currentWidth - KEYBOARD_RESIZE_STEP;
+          break;
+        case 'Home':
+          next = MIN_SIDEBAR_WIDTH;
+          break;
+        case 'End':
+          next = maxSidebarWidth();
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      onWidthChange(clampSidebarWidth(next));
+    };
+
     // Define all possible tabs
     const allTabs: TabProps[] = [
       {
         id: 'room-tab',
         label: 'Room',
+        icon: <FaMapMarkerAlt />,
         content: <RoomInfoDisplay client={client} />,
         condition: hasRoomData, // Condition to show tab
       },
       {
         id: 'inventory-tab',
         label: 'Inventory',
+        icon: <FaBoxOpen />,
         content: <Inventory client={client} />, // Changed to use Inventory component
         condition: hasInventoryData,
       },
       {
         id: 'users-tab', // Add unique IDs
         label: 'Users',
+        icon: <FaUsers />,
         content: <Userlist users={users} />,
         condition: true,
       },
       {
         id: 'server-tab',
         label: 'Server',
+        icon: <FaServer />,
         content: <ServerFeaturesPanel client={client} />,
         condition: true,
       },
       {
         id: 'midi-tab',
         label: 'MIDI',
+        icon: <FaMusic />,
         content: (
           <Suspense fallback={null}>
             <MidiStatus client={client} />
@@ -119,6 +207,7 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
       {
         id: 'haptics-tab',
         label: 'Haptics',
+        icon: <FaGamepad />,
         content: <HapticsStatus client={client} />,
         condition: hapticsPreferences.enabled,
       },
@@ -144,12 +233,14 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
       {
         id: 'files-tab',
         label: 'Files',
+        icon: <FaFolderOpen />,
         content: <FileTransferUI client={client} expanded={fileTransferExpanded} users={users} />,
         condition: true, // Always show Files tab
       },
       {
         id: 'audio-tab',
         label: 'Audio',
+        icon: <FaHeadphones />,
         content: (
           <Suspense fallback={null}>
             <AudioChat client={client} />
@@ -223,7 +314,28 @@ const Sidebar = React.forwardRef<SidebarRef, SidebarProps>(
     );
 
     return (
-      <div className={`sidebar ${collapsed ? 'collapsed' : ''}`}>
+      <div
+        ref={containerRef}
+        className={`sidebar ${collapsed ? 'collapsed' : ''}`}
+        data-resizing={isResizing || undefined}
+      >
+        {!collapsed && onWidthChange && (
+          <div
+            className="sidebar-resize-handle"
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize sidebar"
+            aria-valuemin={MIN_SIDEBAR_WIDTH}
+            aria-valuemax={maxSidebarWidth()}
+            aria-valuenow={currentWidth ?? undefined}
+            tabIndex={0}
+            onPointerDown={handleResizePointerDown}
+            onPointerMove={handleResizePointerMove}
+            onPointerUp={handleResizePointerEnd}
+            onPointerCancel={handleResizePointerEnd}
+            onKeyDown={handleResizeKeyDown}
+          />
+        )}
         {collapsed && collapseButton}
         <div className="sidebar-content" hidden={collapsed}>
           <Tabs tabs={visibleTabs} trailingElement={!collapsed ? collapseButton : undefined} />
diff --git a/src/components/tabs.css b/src/components/tabs.css
index 4c2fb9c..99d1055 100644
--- a/src/components/tabs.css
+++ b/src/components/tabs.css
@@ -8,6 +8,7 @@
 
 /* Tab list container */
 div[role="tablist"] {
+    container-type: inline-size;
     display: flex;
     justify-content: flex-start;
     flex: 1;
@@ -38,6 +39,43 @@ button[role="tab"] {
     min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-1);
+}
+
+.tab-icon {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    font-size: var(--font-size-sm);
+}
+
+.tab-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* When the tab bar is squished, drop to icon-only tabs. The label stays in
+   the accessibility tree (clip pattern) so tab names still announce. */
+@container (max-width: 519px) {
+    button[role="tab"] .tab-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    button[role="tab"] {
+        flex: 1 1 0;
+        padding: var(--space-1);
+    }
 }
 
 /* Selected tab state */
diff --git a/src/components/tabs.tsx b/src/components/tabs.tsx
index 6d30484..459c778 100644
--- a/src/components/tabs.tsx
+++ b/src/components/tabs.tsx
@@ -5,6 +5,7 @@ import './tabs.css'; // Ensure CSS is imported
 export interface TabProps {
   id: string; // Unique ID for the tab and panel
   label: string;
+  icon?: React.ReactNode; // Optional icon; label collapses to icon-only when the bar is squished
   content: JSX.Element;
   condition?: boolean; // Condition is now handled in parent, but keep for potential future use
 }
@@ -87,8 +88,16 @@ const Tabs: React.FC<TabsProps> = ({ tabs, trailingElement, ariaLabel }) => {
                 setSelectedTab(index);
               }}
               tabIndex={selectedTab === index ? undefined : -1}
+              title={tab.icon ? tab.label : undefined}
             >
-              {tab.label}
+              {tab.icon && (
+                <span className="tab-icon" aria-hidden="true">
+                  {tab.icon}
+                </span>
+              )}
+              <span className={tab.icon ? "tab-label" : undefined}>
+                {tab.label}
+              </span>
             </button>
           ))}
         </div>