diff --git a/ui/src/components/ConversationDrawer.tsx b/ui/src/components/ConversationDrawer.tsx
index d0e84eabc7a54d7820757a436522018ed08f061a..294ad2c02056785002a16975d44db441b298ea01 100644
--- a/ui/src/components/ConversationDrawer.tsx
+++ b/ui/src/components/ConversationDrawer.tsx
@@ -193,53 +193,40 @@ function ConversationDrawer({
         {/* Header */}
         <div className="drawer-header">
           <h2 className="drawer-title">{showArchived ? "Archived" : "Conversations"}</h2>
-          <button
-            onClick={onClose}
-            className="btn-icon hide-on-desktop"
-            aria-label="Close conversations"
-          >
-            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-
-        {/* New conversation button */}
-        {!showArchived && (
-          <div className="drawer-section">
+          <div className="drawer-header-actions">
+            {/* New conversation button - mobile only */}
+            {!showArchived && (
+              <button
+                onClick={onNewConversation}
+                className="btn-icon hide-on-desktop"
+                aria-label="New conversation"
+              >
+                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 4v16m8-8H4"
+                  />
+                </svg>
+              </button>
+            )}
             <button
-              onClick={onNewConversation}
-              className="btn-primary"
-              style={{
-                width: "100%",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                gap: "0.5rem",
-              }}
+              onClick={onClose}
+              className="btn-icon hide-on-desktop"
+              aria-label="Close conversations"
             >
-              <svg
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                style={{ width: "1rem", height: "1rem" }}
-              >
+              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M12 4v16m8-8H4"
+                  d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-              <span>New Conversation</span>
             </button>
           </div>
-        )}
+        </div>
 
         {/* Conversations list */}
         <div className="drawer-body scrollable">
diff --git a/ui/src/styles.css b/ui/src/styles.css
index 22cb0aeea3783fe1521d9548908afb3d3548ee71..a7955e6b5eb42e191c53f67be37dcde33e62d515 100644
--- a/ui/src/styles.css
+++ b/ui/src/styles.css
@@ -365,8 +365,8 @@ button {
 .btn-new {
   width: 2rem;
   height: 2rem;
-  background: var(--green-600);
-  color: white;
+  background: var(--text-primary);
+  color: var(--bg-base);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -375,7 +375,7 @@ button {
 }
 
 .btn-new:hover {
-  background: var(--green-700);
+  background: var(--text-secondary);
 }
 
 /* Header */
@@ -452,6 +452,12 @@ button {
   border-bottom: 1px solid var(--border);
 }
 
+.drawer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .drawer-title {
   font-size: 1.125rem;
   font-weight: 600;