diff --git a/packages/ui/src/components/message-list-header.tsx b/packages/ui/src/components/message-list-header.tsx
index 5369a320..e6989253 100644
--- a/packages/ui/src/components/message-list-header.tsx
+++ b/packages/ui/src/components/message-list-header.tsx
@@ -21,8 +21,8 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
 
   return (
     <div class="connection-status">
-      <div class="connection-status-menu">
-        <Show when={props.showSidebarToggle}>
+      <Show when={props.showSidebarToggle}>
+        <div class="connection-status-menu">
           <button
             type="button"
             class="session-sidebar-menu-button"
@@ -31,8 +31,8 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
           >
             <span aria-hidden="true" class="session-sidebar-menu-icon">☰</span>
           </button>
-        </Show>
-      </div>
+        </div>
+      </Show>
 
       <div class="connection-status-text connection-status-info">
         <div class="connection-status-usage">
diff --git a/packages/ui/src/styles/messaging/message-section.css b/packages/ui/src/styles/messaging/message-section.css
index 68f8b3fc..8033789e 100644
--- a/packages/ui/src/styles/messaging/message-section.css
+++ b/packages/ui/src/styles/messaging/message-section.css
@@ -11,7 +11,7 @@
 }
 
 .connection-status-menu {
-  display: none;
+  @apply flex items-center;
   grid-area: menu;
 }