diff --git a/index.php b/index.php
index f1fa4f0..746ac60 100644
--- a/index.php
+++ b/index.php
@@ -54,7 +54,6 @@
             height: 90vh;
             max-height: 800px;
             display: flex;
-            flex-direction: column;
             background: var(--card-bg);
             backdrop-filter: blur(10px);
             border-radius: 24px;
@@ -62,6 +61,57 @@
             border: 1px solid rgba(255, 255, 255, 0.18);
             overflow: hidden;
             z-index: 1;
+            transition: all 0.5s ease;
+        }
+
+        .quick-actions-sidebar {
+            width: 0;
+            overflow: hidden;
+            flex-shrink: 0;
+            background: rgba(255, 255, 255, 0.5);
+            transition: all 0.5s ease;
+            border-right: 1px solid rgba(255, 255, 255, 0.3);
+        }
+        
+        .chat-container.sidebar-active .quick-actions-sidebar {
+            width: 220px;
+            padding: 1.5rem 1rem;
+        }
+
+        .quick-actions-sidebar h3 {
+            margin-top: 0;
+            font-weight: 600;
+            font-size: 1.1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #ddd;
+            margin-bottom: 1rem;
+        }
+
+        .quick-actions {
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+        }
+
+        .quick-action {
+            background-color: rgba(255, 255, 255, 0.7);
+            border: 1px solid transparent;
+            color: var(--text-dark);
+            padding: 0.6rem 1.1rem;
+            border-radius: 12px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
+            text-align: left;
+            width: 100%;
+        }
+
+        .quick-action:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            background: white;
         }
 
         .chat-main {
@@ -111,37 +161,17 @@
             align-self: flex-end;
             border-bottom-right-radius: 4px;
         }
-
-        .quick-actions-container {
+        
+        .initial-quick-actions {
             padding: 1rem 1.5rem 0.5rem;
             border-top: 1px solid rgba(255, 255, 255, 0.3);
             flex-shrink: 0;
         }
 
-        .quick-actions {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-            justify-content: flex-start;
-        }
-
-        .quick-action {
-            background-color: rgba(255, 255, 255, 0.7);
-            border: 1px solid transparent;
-            color: var(--text-dark);
-            padding: 0.6rem 1.1rem;
-            border-radius: 16px;
-            cursor: pointer;
-            font-size: 0.85rem;
-            font-weight: 500;
-            transition: all 0.3s ease;
-            box-shadow: 0 1px 4px rgba(0,0,0,0.05);
-        }
-
-        .quick-action:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-            background: white;
+        .initial-quick-actions .quick-actions {
+             flex-direction: row;
+             flex-wrap: wrap;
+             justify-content: flex-start;
         }
 
         .chat-input-container {
@@ -211,6 +241,12 @@
 </div>
 
 <div class="chat-container" id="chat-container">
+    <div class="quick-actions-sidebar" id="quick-actions-sidebar">
+        <h3>Quick Actions</h3>
+        <div class="quick-actions" id="sidebar-quick-actions">
+            <!-- Quick actions will be moved here -->
+        </div>
+    </div>
     <div class="chat-main">
         <div class="chat-header">
             Marketplace Business Assistant
@@ -220,14 +256,14 @@
                 Hello! I'm your Marketplace Assistant. How can I help you today? You can select one of the quick actions below or upload a file to analyze.
             </div>
         </div>
-        <div class="quick-actions-container">
-            <div class="quick-actions" id="quick-actions">
+        <div class="initial-quick-actions" id="initial-quick-actions">
+            <div class="quick-actions">
                 <button class="quick-action" data-task="summarize_feedback_weekly">Summarize feedback</button>
                 <button class="quick-action" data-task="analyze_complaints">Analyze complaints</button>
                 <button class="quick-action" data-task="generate_seller_dashboard">Generate seller dashboard</button>
                 <button class="quick-action" data-task="summarize_refunds">Summarize refunds</button>
                 <button class="quick-action" data-task="draft_response_templates">Draft response templates</button>
-                <button class="quick-action" data-task="generate_sales_chart">Generate sales chart</button>
+                <button class="quick-action" data-task="generate_sales_chart">Generate sales report chart</button>
             </div>
         </div>
         <div class="chat-input-container">
@@ -246,11 +282,14 @@
 </div>
 
 <script>
+    const chatContainer = document.getElementById('chat-container');
     const chatMessages = document.getElementById('chat-messages');
     const userInput = document.getElementById('user-input');
     const sendButton = document.getElementById('send-button');
-    const quickActionsContainer = document.getElementById('quick-actions');
+    const initialQuickActions = document.getElementById('initial-quick-actions');
+    const sidebarQuickActions = document.getElementById('sidebar-quick-actions');
     const fileInput = document.getElementById('file-input');
+    let firstInteraction = false;
 
     const assistantResponses = {
         summarize_feedback_weekly: "This week’s customer feedback summary: Top 5 issues are 1. Late deliveries (23%), 2. Incorrect item received (15%), 3. Product not as described (12%), 4. Difficulty applying discounts (8%), 5. Slow seller response time (7%).",
@@ -266,24 +305,52 @@
         taskMap[button.textContent] = button.dataset.task;
     });
 
-    function renderChart() {
-        const chartCanvas = document.getElementById('salesChart');
-        if (!chartCanvas) return;
-        const ctx = chartCanvas.getContext('2d');
-        new Chart(ctx, {
-            type: 'bar',
-            data: {
-                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
-                datasets: [{
-                    label: 'Sales',
-                    data: [12, 19, 3, 5, 2, 3],
-                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                    borderColor: 'rgba(75, 192, 192, 1)',
-                    borderWidth: 1
-                }]
-            },
-            options: { scales: { y: { beginAtZero: true } } }
+    function activateSidebar() {
+        if (firstInteraction) return;
+        firstInteraction = true;
+        
+        chatContainer.classList.add('sidebar-active');
+        
+        const actions = initialQuickActions.querySelectorAll('.quick-action');
+        actions.forEach(action => {
+            sidebarQuickActions.appendChild(action.cloneNode(true));
         });
+        
+        initialQuickActions.style.display = 'none';
+
+        // Re-bind events for the new sidebar actions
+        sidebarQuickActions.addEventListener('click', handleQuickActionClick);
+    }
+
+    function renderChart() {
+        // Use a MutationObserver to wait for the canvas to be added to the DOM
+        const observer = new MutationObserver((mutationsList, observer) => {
+            for(const mutation of mutationsList) {
+                if (mutation.type === 'childList') {
+                    const chartCanvas = document.getElementById('salesChart');
+                    if (chartCanvas) {
+                        const ctx = chartCanvas.getContext('2d');
+                        new Chart(ctx, {
+                            type: 'bar',
+                            data: {
+                                labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+                                datasets: [{
+                                    label: 'Sales',
+                                    data: [12, 19, 3, 5, 2, 3],
+                                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                                    borderColor: 'rgba(75, 192, 192, 1)',
+                                    borderWidth: 1
+                                }]
+                            },
+                            options: { scales: { y: { beginAtZero: true } } }
+                        });
+                        observer.disconnect(); // Stop observing once the chart is rendered
+                        return;
+                    }
+                }
+            }
+        });
+        observer.observe(chatMessages, { childList: true, subtree: true });
     }
 
     function addMessage(text, sender) {
@@ -304,22 +371,32 @@
         const trimmedText = text.trim();
         if (!trimmedText) return;
 
+        activateSidebar();
         addMessage(trimmedText, 'user');
         userInput.value = '';
 
-        const task = taskMap[trimmedText];
-        
+        const task = taskMap[trimmedText] || Object.keys(taskMap).find(key => key.includes(trimmedText));
+
         setTimeout(() => {
             const response = assistantResponses[task] || "I'm a demo assistant. My capabilities are limited to the quick actions for now. Please select one of the options or upload a file.";
-            addMessage(response, 'assistant');
             
             if (task === 'generate_sales_chart') {
-                setTimeout(renderChart, 10);
+                renderChart();
             }
+
+            addMessage(response, 'assistant');
+
         }, 1200);
     }
+    
+    function handleQuickActionClick(event) {
+        if (event.target.classList.contains('quick-action')) {
+            processMessage(event.target.textContent);
+        }
+    }
 
     function analyzeFile(file) {
+        activateSidebar();
         const reader = new FileReader();
         reader.onload = (e) => {
             const content = e.target.result;
@@ -347,11 +424,7 @@
         }
     });
 
-    quickActionsContainer.addEventListener('click', (event) => {
-        if (event.target.classList.contains('quick-action')) {
-            processMessage(event.target.textContent);
-        }
-    });
+    initialQuickActions.addEventListener('click', handleQuickActionClick);
 
     sendButton.addEventListener('click', () => processMessage(userInput.value));
     userInput.addEventListener('keypress', (event) => {