diff --git a/app/public/css/buttons.css b/app/public/css/buttons.css
index d89cb3a4..500ea70c 100644
--- a/app/public/css/buttons.css
+++ b/app/public/css/buttons.css
@@ -343,11 +343,6 @@
   background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
 }
 
-.toolbar-button[aria-pressed="true"] {
-  background: var(--falkor-accent, rgba(150,120,220,0.22));
-  transform: translateY(-4px) scale(1.03);
-}
-
 #toolbar-buttons {
   display: flex;
   flex-direction: column;
@@ -364,19 +359,83 @@
   flex-shrink: 0;
 }
 
-@media (max-width: 768px) {
-  #left-toolbar {
-    left: 8px;
-    top: 12px;
-    bottom: auto;
-    width: auto;
-    height: 48px;
-    padding: 4px;
-    border-radius: 8px;
-    flex-direction: row;
+/* Collapsed state: only show the burger button. Remove background/border/shadow so the bar is unobtrusive. */
+#left-toolbar.collapsed {
+  /* minimize width to avoid blocking content */
+  width: 0px;
+  padding: 0;
+  transition: width 220ms ease, padding 220ms ease, background 200ms ease;
+  background: transparent;
+  box-shadow: none;
+  border: none;
+  align-items: flex-start; /* keep burger at top */
+  overflow: visible;
+  position: relative; /* allow z-index for inner button */
+  pointer-events: none; /* let clicks pass through, but burger will override */
+}
+
+#left-toolbar.collapsed .toolbar-button {
+  display: none; /* hide all toolbar buttons */
+}
+
+#left-toolbar.collapsed #burger-toggle-btn {
+  display: flex;
+  width: 48px;
+  height: 48px;
+  margin: 6px 0;
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  z-index: 9999; /* keep on top so it's always clickable */
+  pointer-events: auto;
+}
+
+/* Mobile fallback: without JS, default to only the burger visible on small viewports */
+@media (max-width: 767px) {
+  #left-toolbar.collapsed {
+    width: 0px;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    border: none;
+    align-items: flex-start;
+    pointer-events: none;
+  }
+  
+  /* When NOT collapsed on mobile, show full toolbar */
+  #left-toolbar:not(.collapsed) {
+    width: 48px;
+    padding: 6px 6px;
+    background: var(--bg-tertiary, rgba(255,255,255,0.02));
+    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
+    border: 1px solid var(--border-color, rgba(255,255,255,0.03));
+    backdrop-filter: blur(6px);
     align-items: center;
+    pointer-events: auto;
+    z-index: 1050;
+  }
+  
+  /* On mobile hide buttons only when explicitly collapsed (so burger can open toolbar) */
+  #left-toolbar.collapsed .toolbar-button { display: none; }
+  #left-toolbar.collapsed #burger-toggle-btn { 
+    display: flex; 
+    width: 48px; 
+    height: 48px; 
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    pointer-events: auto;
+  }
+  /* When not collapsed, show toolbar buttons as normal */
+  #left-toolbar:not(.collapsed) .toolbar-button { display: flex; }
+  #left-toolbar:not(.collapsed) #burger-toggle-btn { 
+    display: flex; 
+    position: relative;
+    top: auto;
+    left: auto;
+    pointer-events: auto;
   }
-  #left-toolbar-inner { flex-direction: row; gap: 6px; }
 }
 
 
+
diff --git a/app/public/css/chat-components.css b/app/public/css/chat-components.css
index 78c05656..df098210 100644
--- a/app/public/css/chat-components.css
+++ b/app/public/css/chat-components.css
@@ -28,6 +28,24 @@
   background-color: var(--falkor-secondary);
 }
 
+@media (max-width: 768px) {
+  .chat-messages {
+    padding: 2px;
+  }
+
+  .chat-container {
+    padding-right: 10px;
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    /* Ensure no horizontal overflow */
+    max-width: 100vw;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    /* Ensure content is accessible when toolbar is open */
+    transition: margin-left 220ms ease;
+  }
+}
 .message-container {
   display: flex;
   flex-direction: row;
diff --git a/app/public/css/responsive.css b/app/public/css/responsive.css
index 01be5d39..57f16e7c 100644
--- a/app/public/css/responsive.css
+++ b/app/public/css/responsive.css
@@ -2,11 +2,55 @@
 
 /* Layout Responsive */
 @media (max-width: 768px) {
-  .chat-container {
-    padding-right: 10px;
-    padding-left: 10px;
-    padding-top: 10px;
-    padding-bottom: 10px;
+  /* When left toolbar is open, push content to make room */
+  body.left-toolbar-open .chat-container {
+    max-width: calc(100vw - 48px);
+  }
+
+  /* Ensure body doesn't overflow */
+  body {
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+
+  /* Main container mobile adjustments */
+  #container {
+    width: 100%;
+    max-width: 100vw;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    transition: margin-left 220ms ease;
+  }
+
+  /* Adjust container when toolbar is open */
+  body.left-toolbar-open #container {
+    margin-left: 48px;
+    width: calc(100% - 48px);
+    max-width: calc(100vw - 48px);
+  }
+
+  /* Prevent any background showing behind the shifted content */
+  body.left-toolbar-open {
+    background: var(--falkor-secondary);
+  }
+
+  /* Ensure chat container fills the available space properly */
+  body.left-toolbar-open .chat-container {
+    background: var(--falkor-secondary);
+    border-left: none;
+  }
+
+  /* Ensure chat header elements are properly positioned when toolbar is open */
+  body.left-toolbar-open .chat-header {
+    padding-left: 15px; /* Add extra padding to prevent overlap */
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Ensure dropdown and buttons in header don't get cut off */
+  body.left-toolbar-open .chat-header > * {
+    margin-left: 0;
+    width: 100%;
   }
 }
 
@@ -56,22 +100,102 @@
 
 /* Button Container Responsive */
 @media (max-width: 768px) {
-  .button-container {
-    flex-direction: row;
+  .chat-header .button-container {
+    width: 100%;
+    max-width: 100%;
+    padding: 0 10px;
+    margin: 0;
+    box-sizing: border-box;
     gap: 8px;
+    flex-wrap: nowrap;
+    align-items: stretch;
+  }
+  
+  /* Hide vertical separators on mobile */
+  .vertical-separator {
+    display: none;
+  }
+  
+  /* Make selectors and buttons fit screen width */
+  #graph-select,
+  #custom-file-upload {
+    flex: 1;
+    min-width: 0;
+    padding: 8px 6px;
+    font-size: 13px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    height: 40px;
+    box-sizing: border-box;
+  }
+  
+  #graph-select {
+    max-width: 30%;
+  }
+  
+  #custom-file-upload {
+    max-width: 35%;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+  }
+  
+  .dropdown-container {
+    flex: 1;
+    max-width: 35%;
+  }
+  
+  .custom-dropdown {
+    width: 100%;
+    height: 40px;
+  }
+  
+  .dropdown-selected {
+    padding: 8px 6px;
+    font-size: 13px;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .dropdown-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    flex: 1;
+  }
+  
+  .dropdown-arrow {
+    margin-left: 4px;
+    flex-shrink: 0;
   }
 }
 
-/* Select Elements Responsive */
-@media (max-width: 768px) {
+@media (max-width: 480px) {
+  .chat-header .button-container {
+    padding: 0;
+    gap: 5px;
+  }
+  
   #graph-select,
-  #custom-file-upload,
-  #open-pg-modal {
-    min-width: 120px;
-    width: auto;
-    padding: 8px 10px;
-    font-size: 14px;
-    flex: 1;
+  #custom-file-upload {
+    padding: 6px 4px;
+    font-size: 12px;
+    height: 36px;
+  }
+  
+  .custom-dropdown {
+    height: 36px;
+  }
+  
+  .dropdown-selected {
+    padding: 6px 4px;
+    font-size: 12px;
   }
 }
 
@@ -99,8 +223,35 @@
   }
 
   .chat-input {
-    padding: 12px 16px;
-    gap: 12px;
+    padding: 0px;
+    gap: 8px;
+    /* Ensure it fits within viewport width */
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  .input-container {
+    /* Reduce padding on mobile to maximize input space */
+    padding: 8px;
+    gap: 4px;
+    min-width: 0; /* Allow container to shrink */
+    flex-shrink: 1;
+  }
+
+  #message-input {
+    font-size: 16px !important; /* Prevent zoom on iOS */
+    min-width: 0; /* Allow input to shrink */
+  }
+
+  #message-input::placeholder {
+    font-size: 16px !important;
+  }
+
+  /* Ensure buttons don't overflow */
+  .input-button {
+    width: 40px;
+    height: 40px;
+    flex-shrink: 0; /* Prevent buttons from shrinking */
   }
 }
 
diff --git a/app/templates/components/left_toolbar.j2 b/app/templates/components/left_toolbar.j2
index b706f464..c7310a4b 100644
--- a/app/templates/components/left_toolbar.j2
+++ b/app/templates/components/left_toolbar.j2
@@ -1,34 +1,39 @@
 {# Left vertical toolbar to host expandable buttons (keeps future buttons easy to add) #}
 <nav id="left-toolbar" aria-label="Left toolbar" role="toolbar" aria-orientation="vertical">
     <div id="left-toolbar-inner">
-        <!-- small brand slot (icon-only) -->
-        <div id="left-toolbar-logo" title="QueryWeaver" aria-hidden="true"
-            style="width:40px; height:40px; display:flex; align-items:center; justify-content:center;">
-            <div
-                style="width:20px;height:12px;border-radius:3px;background:var(--falkor-accent, rgba(150,120,220,0.22));">
-            </div>
-        </div>
-
         <!-- Toolbar buttons container -->
         <div id="toolbar-buttons">
+            <button id="burger-toggle-btn" class="action-button toolbar-button" title="Open menu" aria-label="Open menu">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="3" y="6" width="18" height="2" rx="1" fill="currentColor" />
+                    <rect x="3" y="11" width="18" height="2" rx="1" fill="currentColor" />
+                    <rect x="3" y="16" width="18" height="2" rx="1" fill="currentColor" />
+                </svg>
+            </button>
+
             <!-- Theme toggle moved here from the top toolbar -->
-            <button id="theme-toggle-btn" class="action-button toolbar-button" title="Toggle Theme" 
+            <button id="theme-toggle-btn" class="action-button toolbar-button" title="Toggle Theme"
                 aria-label="Toggle theme" aria-pressed="false" tabindex="-1">
-                <svg class="theme-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <circle class="sun" cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
-                    <path class="sun" d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke="currentColor" stroke-width="2"/>
-                    <path class="moon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" fill="currentColor"/>
+                <svg class="theme-icon" width="18" height="18" viewBox="0 0 24 24" fill="none"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <circle class="sun" cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2" />
+                    <path class="sun"
+                        d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"
+                        stroke="currentColor" stroke-width="2" />
+                    <path class="moon" d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor"
+                        stroke-width="2" fill="currentColor" />
                     <defs>
                         <clipPath id="leftHalf">
-                            <rect x="0" y="0" width="12" height="24"/>
+                            <rect x="0" y="0" width="12" height="24" />
                         </clipPath>
                         <clipPath id="rightHalf">
-                            <rect x="12" y="0" width="12" height="24"/>
+                            <rect x="12" y="0" width="12" height="24" />
                         </clipPath>
                     </defs>
-                    <circle class="system" cx="12" cy="12" r="8" fill="currentColor" clip-path="url(#leftHalf)"/>
-                    <circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" clip-path="url(#rightHalf)"/>
-                    <circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/>
+                    <circle class="system" cx="12" cy="12" r="8" fill="currentColor" clip-path="url(#leftHalf)" />
+                    <circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"
+                        clip-path="url(#rightHalf)" />
+                    <circle class="system" cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2" />
                 </svg>
             </button>
             <button class="action-button toolbar-button" id="menu-button" title="Instructions" aria-label="Instructions"
@@ -40,13 +45,14 @@
                 </svg>
             </button>
             <!-- Schema button (replaces analytics) -->
-            <button class="action-button toolbar-button" id="schema-button" title="Schema"
-                aria-label="Open schema" aria-pressed="false" tabindex="-1">
+            <button class="action-button toolbar-button" id="schema-button" title="Schema" aria-label="Open schema"
+                aria-pressed="false" tabindex="-1">
                 <!-- Simple database/schema icon: cylinder + table nodes -->
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <!-- Cylinder (database) -->
                     <ellipse cx="12" cy="5" rx="6" ry="2.2" stroke="currentColor" stroke-width="1.2" fill="none" />
-                    <path d="M6 5v8c0 1.1 2.7 2.2 6 2.2s6-1.1 6-2.2V5" stroke="currentColor" stroke-width="1.2" fill="none"/>
+                    <path d="M6 5v8c0 1.1 2.7 2.2 6 2.2s6-1.1 6-2.2V5" stroke="currentColor" stroke-width="1.2"
+                        fill="none" />
                     <ellipse cx="12" cy="13.2" rx="6" ry="2.2" stroke="currentColor" stroke-width="1.2" fill="none" />
                     <!-- Small table nodes to indicate schema boxes -->
                     <rect x="7" y="15.5" width="3" height="2" rx="0.4" fill="currentColor" />
@@ -57,4 +63,81 @@
         </div>
     </div>
     <div id="left-toolbar-footer"></div>
-</nav>
\ No newline at end of file
+</nav>
+
+<script>
+// Left toolbar open/close behavior
+(function () {
+    const nav = document.getElementById('left-toolbar');
+    const btn = document.getElementById('burger-toggle-btn');
+    if (!nav || !btn) return;
+
+    // Utility to set open/closed state. We toggle a "collapsed" class and update ARIA/title attributes.
+    function setOpen(open) {
+        if (open) {
+            nav.classList.remove('collapsed');
+            document.body.classList.add('left-toolbar-open');
+            btn.setAttribute('title', 'Close menu');
+            btn.setAttribute('aria-label', 'Close menu');
+            btn.setAttribute('aria-pressed', 'true');
+            btn.setAttribute('aria-expanded', 'true');
+        } else {
+            nav.classList.add('collapsed');
+            document.body.classList.remove('left-toolbar-open');
+            btn.setAttribute('title', 'Open menu');
+            btn.setAttribute('aria-label', 'Open menu');
+            btn.setAttribute('aria-pressed', 'false');
+            btn.setAttribute('aria-expanded', 'false');
+        }
+    }
+
+    // Media query: desktop when >= 768px (adjust if your breakpoints differ)
+    const mq = window.matchMedia('(min-width: 768px)');
+
+    // Initialize based on media query: desktop -> open, mobile -> closed
+    try {
+        setOpen(mq.matches);
+    } catch (e) {
+        // fail-safe: keep open
+        setOpen(true);
+    }
+
+    // Listen for viewport changes and update default state accordingly
+    if (typeof mq.addEventListener === 'function') {
+        mq.addEventListener('change', (ev) => setOpen(ev.matches));
+    } else if (typeof mq.addListener === 'function') {
+        mq.addListener((ev) => setOpen(ev.matches));
+    }
+
+    // Toggle on burger button click. Use pointerdown for reliable mobile/touch handling
+    let ignoreNextClick = false;
+    function handleToggleEvent() {
+        const isCollapsed = nav.classList.contains('collapsed');
+        setOpen(isCollapsed);
+    }
+
+    btn.addEventListener('pointerdown', function (e) {
+        // Prevent unwanted focus/ghost clicks and handle touch/pen/mouse uniformly
+        e.preventDefault();
+        handleToggleEvent();
+        // ignore the following 'click' event which may also fire
+        ignoreNextClick = true;
+    });
+
+    btn.addEventListener('click', function (e) {
+        if (ignoreNextClick) {
+            // consume the synthetic click after pointerdown
+            ignoreNextClick = false;
+            return;
+        }
+        handleToggleEvent();
+    });
+
+    // Expose a minimal API for other scripts if needed
+    window.__leftToolbar = {
+        open: () => setOpen(true),
+        close: () => setOpen(false),
+        toggle: () => setOpen(!nav.classList.contains('collapsed'))
+    };
+})();
+</script>
\ No newline at end of file