diff --git a/ai-hub/app/core/pipelines/question_decider.py b/ai-hub/app/core/pipelines/question_decider.py
index f5db8e2..56b5d4b 100644
--- a/ai-hub/app/core/pipelines/question_decider.py
+++ b/ai-hub/app/core/pipelines/question_decider.py
@@ -32,7 +32,7 @@
             * The `code_diff` field must be empty.
 
         * **Decision: 'code_change'**
-            * Choose this if the user's request involves modifying or adding to the code (e.g., "fix this bug," "implement this feature," "refactor this function").
+            * Choose this if the user's request involves modifying or adding to the code (e.g., "fix this bug," "implement this feature," "refactor this function", "show me full code").
             * You must have all the relevant files with content in `retrieved_paths_with_content` to propose the change.
             * The `answer` field can be an optional, high-level summary of the change.
             * The `code_diff` field must contain the full and complete git diff showing the exact modifications, could be multiple file diffs.
diff --git a/ui/client-app/src/components/ChatArea.css b/ui/client-app/src/components/ChatArea.css
new file mode 100644
index 0000000..4b4c6d6
--- /dev/null
+++ b/ui/client-app/src/components/ChatArea.css
@@ -0,0 +1,3 @@
+.chat-area-fixed-height {
+    height: calc(100vh - 72px); /* Subtract input + padding */
+  }
\ No newline at end of file
diff --git a/ui/client-app/src/components/ChatArea.js b/ui/client-app/src/components/ChatArea.js
index be3cf35..b897700 100644
--- a/ui/client-app/src/components/ChatArea.js
+++ b/ui/client-app/src/components/ChatArea.js
@@ -1,10 +1,11 @@
-// src/components/ChatArea.js
 import React, { useState, useRef, useEffect } from "react";
 import ChatWindow from "./ChatWindow";
+import './ChatArea.css';
 
 const ChatArea = ({ chatHistory, onSendMessage, isProcessing }) => {
   const [inputValue, setInputValue] = useState("");
   const inputRef = useRef(null);
+  const chatScrollRef = useRef(null);
 
   const handleSendMessage = (e) => {
     e.preventDefault();
@@ -14,44 +15,47 @@
     }
   };
 
+  // Scroll chat to bottom on new message
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
+    if (chatScrollRef.current) {
+      chatScrollRef.current.scrollTop = chatScrollRef.current.scrollHeight;
     }
-  }, [isProcessing]);
+  }, [chatHistory]);
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Chat history display area */}
-      <div className="flex-grow overflow-y-auto mb-4">
+    <div className="flex flex-col chat-area-fixed-height">
+      {/* Scrollable ChatWindow */}
+      <div ref={chatScrollRef} className="flex-grow overflow-y-auto">
         <ChatWindow chatHistory={chatHistory} />
       </div>
 
-      {/* Message input and send button area */}
-      <form onSubmit={handleSendMessage} className="flex flex-grow items-center space-x-2">
-        <input
-          ref={inputRef}
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          disabled={isProcessing}
-          className="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-          placeholder={isProcessing ? "AI is thinking..." : "Type a message..."}
-        />
-        <button
+      {/* Sticky Input */}
+      <div className="p-2 bg-transparent sticky bottom-0 left-0 z-10">
+        <form onSubmit={handleSendMessage} className="flex items-center space-x-2">
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            disabled={isProcessing}
+            className="flex-grow p-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            placeholder={isProcessing ? "AI is thinking..." : "Type a message..."}
+          />
+          <button
             type="submit"
             disabled={isProcessing}
-            className={`p-3 rounded-lg text-white font-bold transition-colors flex-shrink-0 ${ // Add flex-shrink-0 here
-            isProcessing
+            className={`p-3 rounded-lg text-white font-bold transition-colors flex-shrink-0 ${
+              isProcessing
                 ? "bg-gray-400 dark:bg-gray-600 cursor-not-allowed"
                 : "bg-indigo-600 hover:bg-indigo-700"
             }`}
-        >
-          Send
-        </button>
-      </form>
+          >
+            Send
+          </button>
+        </form>
+      </div>
     </div>
   );
 };
 
-export default ChatArea;
\ No newline at end of file
+export default ChatArea;
diff --git a/ui/client-app/src/components/ChatWindow.js b/ui/client-app/src/components/ChatWindow.js
index f802ed9..ce79bc1 100644
--- a/ui/client-app/src/components/ChatWindow.js
+++ b/ui/client-app/src/components/ChatWindow.js
@@ -1,10 +1,10 @@
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactMarkdown from 'react-markdown';
 import './ChatWindow.css';
 import FileListComponent from "./FileList";
 import DiffViewer from "./DiffViewer";
 
-// Individual message component for better modularity
+// Individual message component
 const ChatMessage = ({ message }) => {
   const [selectedFile, setSelectedFile] = useState(null);
   const [isReasoningExpanded, setIsReasoningExpanded] = useState(false);
@@ -13,36 +13,31 @@
     setIsReasoningExpanded(!isReasoningExpanded);
   };
 
-    // A simple handler to close the diff viewer
-    const handleCloseDiff = () => {
-      setSelectedFile(null);
-    };
-  
-    const handleFileClick = (file) => {
-      setSelectedFile(file);
-    };
+  const handleCloseDiff = () => {
+    setSelectedFile(null);
+  };
 
-  const messageClasses = `max-w-md p-4 rounded-lg shadow-md ${
-    message.isUser 
-      ? "bg-indigo-500 text-white ml-auto" 
-      : "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 mr-auto"
-  }`;
+  const handleFileClick = (file) => {
+    setSelectedFile(file);
+  };
+
+  const assistantMessageClasses = `p-4 rounded-lg shadow-md w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100`;
+  const userMessageClasses = `max-w-md p-4 rounded-lg shadow-md bg-indigo-500 text-white ml-auto`;
 
   return (
-    <div className={messageClasses}>
+    <div className={message.isUser ? userMessageClasses : assistantMessageClasses}>
       {message.reasoning && (
         <div className="mb-2">
-          <button 
-            onClick={toggleReasoning} 
+          <button
+            onClick={toggleReasoning}
             className="text-sm font-semibold text-indigo-700 hover:text-indigo-800 dark:text-gray-300 dark:hover:text-gray-100 focus:outline-none"
           >
             {isReasoningExpanded ? "Hide Reasoning ▲" : "Show Reasoning ▼"}
           </button>
-          <div 
+          <div
             className={`mt-2 text-xs transition-max-h duration-500 ease-in-out overflow-hidden ${
               isReasoningExpanded ? "max-h-96" : "max-h-0"
-            } 
-            text-gray-700 dark:text-gray-300`} 
+            } text-gray-700 dark:text-gray-300`}
           >
             <ReactMarkdown>{message.reasoning}</ReactMarkdown>
           </div>
@@ -50,23 +45,33 @@
       )}
       <ReactMarkdown>{message.text}</ReactMarkdown>
       {message.code_diff && (
-                <FileListComponent files={message.code_diff} onFileClick={handleFileClick} />
-            )}
+        <FileListComponent files={message.code_diff} onFileClick={handleFileClick} />
+      )}
       {selectedFile && <DiffViewer diff={selectedFile.diff} onClose={handleCloseDiff} />}
     </div>
   );
 };
 
-// Main ChatWindow component remains the same
-const ChatWindow = ({ chatHistory }) => {
+// Main ChatWindow component with dynamic height calculation
+const ChatWindow = ({ chatHistory, maxHeight }) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [chatHistory]);
+
   return (
-    <div className="space-y-4">
+    <div
+      ref={containerRef}
+      style={{ maxHeight: maxHeight, overflowY: 'auto' }}
+      className="px-2 py-4 space-y-4 bg-transparent"
+    >
       {chatHistory.map((message, index) => (
         <div
           key={index}
-          className={`flex ${
-            message.isUser ? "justify-end" : "justify-start"
-          }`}
+          className={`flex ${message.isUser ? "justify-end" : "justify-start"} w-full`}
         >
           <ChatMessage message={message} />
         </div>
@@ -75,4 +80,4 @@
   );
 };
 
-export default ChatWindow;
\ No newline at end of file
+export default ChatWindow;
diff --git a/ui/client-app/src/components/InteractionLog.js b/ui/client-app/src/components/InteractionLog.js
index 3d43c14..517c27e 100644
--- a/ui/client-app/src/components/InteractionLog.js
+++ b/ui/client-app/src/components/InteractionLog.js
@@ -1,34 +1,84 @@
-// src/components/InteractionLog.js
-import React from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 const InteractionLog = ({ logs }) => {
+  const [expandedLogs, setExpandedLogs] = useState({});
+  const [containerHeight, setContainerHeight] = useState("500px");
+
+  const scrollRef = useRef(null);
+
+  // Auto-size based on window height
+  useEffect(() => {
+    const updateHeight = () => {
+      const windowHeight = window.innerHeight;
+      const offset = 300; // adjust this based on layout
+      setContainerHeight(`${windowHeight - offset}px`);
+    };
+
+    updateHeight();
+    window.addEventListener("resize", updateHeight);
+    return () => window.removeEventListener("resize", updateHeight);
+  }, []);
+
+  // Auto-scroll to bottom on new logs
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  const toggleExpand = (index) => {
+    setExpandedLogs((prev) => ({
+      ...prev,
+      [index]: !prev[index],
+    }));
+  };
+
+  const getPreviewText = (message, maxLength = 200) => {
+    if (message.length <= maxLength) return message;
+    return message.slice(0, maxLength) + "…";
+  };
+
   return (
-    <div className="h-full overflow-y-auto p-4 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-inner">
+    <div
+      ref={scrollRef}
+      className="overflow-y-auto p-4 bg-gray-50 dark:bg-gray-800 rounded-lg shadow-inner"
+      style={{ height: containerHeight }}
+    >
       <div className="space-y-3">
         {logs.length > 0 ? (
-          logs.map((log, index) => (
-            <div
-              key={index}
-              className={`p-3 rounded-md transition-colors duration-200 ${
-                log.type === "ai"
-                  ? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
-                  : log.type === "user"
-                  ? "bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100"
-                  : log.type === "remote"
-                  ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100"
-                  : log.type === "local"
-                  ? "bg-purple-100 dark:bg-purple-900 text-purple-900 dark:text-purple-100"
-                  : "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
-              }`}
-            >
-              <p className="font-semibold text-sm">
-                {log.type.charAt(0).toUpperCase() + log.type.slice(1)}:
-              </p>
-              <pre className="mt-1 whitespace-pre-wrap text-sm font-mono">
-                {log.message}
-              </pre>
-            </div>
-          ))
+          logs.map((log, index) => {
+            const isExpanded = expandedLogs[index];
+
+            return (
+              <div
+                key={index}
+                className={`p-3 rounded-md transition-colors duration-200 cursor-pointer ${
+                  log.type === "ai"
+                    ? "bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100"
+                    : log.type === "user"
+                    ? "bg-green-100 dark:bg-green-900 text-green-900 dark:text-green-100"
+                    : log.type === "remote"
+                    ? "bg-yellow-100 dark:bg-yellow-900 text-yellow-900 dark:text-yellow-100"
+                    : log.type === "local"
+                    ? "bg-purple-100 dark:bg-purple-900 text-purple-900 dark:text-purple-100"
+                    : "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+                }`}
+                onClick={() => toggleExpand(index)}
+              >
+                <p className="font-semibold text-sm">
+                  {log.type.charAt(0).toUpperCase() + log.type.slice(1)}:
+                </p>
+                <pre className="mt-1 whitespace-pre-wrap text-sm font-mono">
+                  {isExpanded ? log.message : getPreviewText(log.message)}
+                </pre>
+                {!isExpanded && log.message.length > 200 && (
+                  <p className="text-xs mt-1 italic text-gray-600 dark:text-gray-400">
+                    Click to expand
+                  </p>
+                )}
+              </div>
+            );
+          })
         ) : (
           <p className="text-gray-500 dark:text-gray-400 text-center py-10">
             No interactions yet.
@@ -39,4 +89,4 @@
   );
 };
 
-export default InteractionLog;
\ No newline at end of file
+export default InteractionLog;
diff --git a/ui/client-app/src/hooks/useCodeAssistant.js b/ui/client-app/src/hooks/useCodeAssistant.js
index 17c067c..63c98a4 100644
--- a/ui/client-app/src/hooks/useCodeAssistant.js
+++ b/ui/client-app/src/hooks/useCodeAssistant.js
@@ -179,7 +179,7 @@
       if (readFiles.length > 0) {
         const displayMessage = readFiles.length > 10
           ? `Read ${readFiles.length} files successfully.`
-          : `Read files and send successfully: [${readFiles.join(', ')}]`;
+          : `Read files and send successfully: [${readFiles.map(f => `"${f}"`).join(', ')}]`;
         newMessages.push({ type: "local", message: displayMessage });
       }
       return [...prev, ...newMessages];
diff --git a/ui/client-app/src/pages/CodingAssistantPage.js b/ui/client-app/src/pages/CodingAssistantPage.js
index 05532d5..1618a89 100644
--- a/ui/client-app/src/pages/CodingAssistantPage.js
+++ b/ui/client-app/src/pages/CodingAssistantPage.js
@@ -39,27 +39,32 @@
   return (
     <div className="flex flex-col flex-grow h-full min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
       {/* Main content area */}
-      <div className="flex-grow p-4 overflow-y-auto" ref={pageContainerRef}>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 h-full">
-          {/* Left Column: Chat and Code Access */}
-          <div className="flex flex-col space-y-4">
+      <div className="flex-grow px-4 overflow-hidden" ref={pageContainerRef}>
+        {/* Adjusted grid for narrow right panel */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 h-full">
+          {/* Left Column: Chat Area */}
+          <div className="md:col-span-2 flex flex-col">
             {/* Area 1: Chat with LLM */}
             <div className="flex-grow p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
               <h2 className="text-xl font-bold mb-2">Chat with the LLM</h2>
+              {/* Note: ChatArea component needs to be implemented with a <textarea> */}
               <ChatArea chatHistory={chatHistory} onSendMessage={handleSendChat} isProcessing={isProcessing} />
             </div>
+          </div>
 
-            {/* Area 2: Code Folder Lookup */}
+          {/* Right Column: Code Folder Access & AI Thinking Process */}
+          <div className="md:col-span-1 flex flex-col space-y-4">
+            {/* Area 2: Code Folder Lookup - Moved to the right */}
             <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
               <h2 className="text-xl font-bold mb-2">Code Folder Access</h2>
               <CodeFolderAccess selectedFolder={selectedFolder} onSelectFolder={handleSelectFolder} />
             </div>
-          </div>
 
-          {/* Right Column: Thinking Process and Interaction Log */}
-          <div className="p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
-            <h2 className="text-xl font-bold mb-2">AI Thinking Process</h2>
-            <InteractionLog logs={thinkingProcess} />
+            {/* Area 3: Thinking Process */}
+            <div className="flex-grow p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
+              <h2 className="text-xl font-bold mb-2">AI Thinking Process</h2>
+              <InteractionLog logs={thinkingProcess} />
+            </div>
           </div>
         </div>
       </div>