diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index 3c328b38bd86f8e66b62350b6047486cbce24d76..53519b1b83181435dfab3268f223886d2ce7bc9c 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -61,6 +61,7 @@ function App() {
   const [conversations, setConversations] = useState<Conversation[]>([]);
   const [currentConversationId, setCurrentConversationId] = useState<string | null>(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerCollapsed, setDrawerCollapsed] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const initialSlugResolved = useRef(false);
@@ -146,6 +147,10 @@ function App() {
     setDrawerOpen(false);
   };
 
+  const toggleDrawerCollapsed = () => {
+    setDrawerCollapsed((prev) => !prev);
+  };
+
   const updateConversation = (updatedConversation: Conversation) => {
     setConversations((prev) =>
       prev.map((conv) =>
@@ -229,7 +234,9 @@ function App() {
       {/* Conversations drawer */}
       <ConversationDrawer
         isOpen={drawerOpen}
+        isCollapsed={drawerCollapsed}
         onClose={() => setDrawerOpen(false)}
+        onToggleCollapse={toggleDrawerCollapsed}
         conversations={conversations}
         currentConversationId={currentConversationId}
         onSelectConversation={selectConversation}
@@ -249,6 +256,8 @@ function App() {
           onConversationUpdate={updateConversation}
           onFirstMessage={handleFirstMessage}
           mostRecentCwd={mostRecentCwd}
+          isDrawerCollapsed={drawerCollapsed}
+          onToggleDrawerCollapse={toggleDrawerCollapsed}
         />
       </div>
 
diff --git a/ui/src/components/ChatInterface.tsx b/ui/src/components/ChatInterface.tsx
index eee3b9d76edbd9d9cb49499d96518c0794374acf..1f60c0d2c53afa3cf04a3087fc111816532aba12 100644
--- a/ui/src/components/ChatInterface.tsx
+++ b/ui/src/components/ChatInterface.tsx
@@ -354,6 +354,8 @@ interface ChatInterfaceProps {
   onConversationUpdate?: (conversation: Conversation) => void;
   onFirstMessage?: (message: string, model: string, cwd?: string) => Promise<void>;
   mostRecentCwd?: string | null;
+  isDrawerCollapsed?: boolean;
+  onToggleDrawerCollapse?: () => void;
 }
 
 function ChatInterface({
@@ -364,6 +366,8 @@ function ChatInterface({
   onConversationUpdate,
   onFirstMessage,
   mostRecentCwd,
+  isDrawerCollapsed,
+  onToggleDrawerCollapse,
 }: ChatInterfaceProps) {
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
@@ -1041,6 +1045,25 @@ function ChatInterface({
             </svg>
           </button>
 
+          {/* Expand drawer button - desktop only when collapsed */}
+          {isDrawerCollapsed && onToggleDrawerCollapse && (
+            <button
+              onClick={onToggleDrawerCollapse}
+              className="btn-icon show-on-desktop-only"
+              aria-label="Expand sidebar"
+              title="Expand sidebar"
+            >
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                />
+              </svg>
+            </button>
+          )}
+
           <h1 className="header-title" title={currentConversation?.slug || "Shelley"}>
             {getDisplayTitle()}
           </h1>
diff --git a/ui/src/components/ConversationDrawer.tsx b/ui/src/components/ConversationDrawer.tsx
index 294ad2c02056785002a16975d44db441b298ea01..4f16da4e605be88f2c7f433aa45e783b8d21b1b7 100644
--- a/ui/src/components/ConversationDrawer.tsx
+++ b/ui/src/components/ConversationDrawer.tsx
@@ -4,7 +4,9 @@ import { api } from "../services/api";
 
 interface ConversationDrawerProps {
   isOpen: boolean;
+  isCollapsed: boolean;
   onClose: () => void;
+  onToggleCollapse: () => void;
   conversations: Conversation[];
   currentConversationId: string | null;
   onSelectConversation: (id: string) => void;
@@ -16,7 +18,9 @@ interface ConversationDrawerProps {
 
 function ConversationDrawer({
   isOpen,
+  isCollapsed,
   onClose,
+  onToggleCollapse,
   conversations,
   currentConversationId,
   onSelectConversation,
@@ -189,7 +193,7 @@ function ConversationDrawer({
   return (
     <>
       {/* Drawer */}
-      <div className={`drawer ${isOpen ? "open" : ""}`}>
+      <div className={`drawer ${isOpen ? "open" : ""} ${isCollapsed ? "collapsed" : ""}`}>
         {/* Header */}
         <div className="drawer-header">
           <h2 className="drawer-title">{showArchived ? "Archived" : "Conversations"}</h2>
@@ -225,6 +229,22 @@ function ConversationDrawer({
                 />
               </svg>
             </button>
+            {/* Collapse button - desktop only */}
+            <button
+              onClick={onToggleCollapse}
+              className="btn-icon show-on-desktop-only"
+              aria-label="Collapse sidebar"
+              title="Collapse sidebar"
+            >
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                />
+              </svg>
+            </button>
           </div>
         </div>
 
diff --git a/ui/src/styles.css b/ui/src/styles.css
index e3fd300f8eee5f84450bdeb6f8d7abe5786a53f7..6b8de47efd2cd6ede454cdc9404e6c3928b362e1 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -2226,15 +2226,30 @@ svg {
     transform: translateX(0) !important;
   }
 
+  .drawer.collapsed {
+    display: none;
+  }
+
   .hide-on-desktop {
     display: none !important;
   }
 
+  .show-on-desktop-only {
+    display: flex !important;
+  }
+
   .backdrop {
     display: none !important;
   }
 }
 
+/* Hide desktop-only elements on mobile */
+@media (max-width: 767px) {
+  .show-on-desktop-only {
+    display: none !important;
+  }
+}
+
 /* Rotation animation for running tools */
 @keyframes rotate {
   from {