diff --git a/public/js/chat.js b/public/js/chat.js
index e7465b74..b93288a0 100644
--- a/public/js/chat.js
+++ b/public/js/chat.js
@@ -105,11 +105,33 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Keeps the chat box scrolled to the bottom
 
+  // Function to scroll to the bottom
   function scrollToBottom() {
-    chatBox.scrollTop = chatBox.scrollHeight;
+    // Check if auto-scrolling is enabled
+    if (shouldAutoScroll) {
+      chatBox.scrollTop = chatBox.scrollHeight;
+    }
   }
 
-  window.onload = scrollToBottom;
+  // Flag to keep track of whether auto-scrolling should be performed
+  let shouldAutoScroll = true;
+
+  window.onload = function() {
+    scrollToBottom();
+    // Detect manual scrolling by the user
+    chatBox.addEventListener('scroll', () => {
+      // Calculate the distance from the bottom
+      const distanceFromBottom = chatBox.scrollHeight - chatBox.scrollTop - chatBox.clientHeight;
+
+      // If the distance from the bottom is small (or zero), the user is at the bottom
+      if (distanceFromBottom < 1) {
+        shouldAutoScroll = true;
+      } else {
+        // If the user has scrolled up, disable auto-scrolling
+        shouldAutoScroll = false;
+      }
+    });
+  };
 
   const observer = new MutationObserver(scrollToBottom);
   observer.observe(chatBox, { childList: true });
diff --git a/sass/_project-sass/_project-Main.scss b/sass/_project-sass/_project-Main.scss
index b029fae7..79d77932 100644
--- a/sass/_project-sass/_project-Main.scss
+++ b/sass/_project-sass/_project-Main.scss
@@ -2286,6 +2286,8 @@ pre, code {
   height: 95%; /* This will make it fill its parent container */
   background-color: #121212;
   color: #e0e0e0;
+
+  border-left: 1px solid #373737;
   font-family: Arial, sans-serif;
 }
 
@@ -2373,7 +2375,6 @@ pre, code {
   }
 }
 
-
 .chat-container {
   form {
     display: flex;
@@ -2389,6 +2390,11 @@ pre, code {
     border: 1px solid #777;
     color: #fff;
   }
+
+  button {
+    margin-top: 9px;
+    height: 30px;
+  }
 }
 
 .welcoming-cat {
diff --git a/views/site_files/text_editor.erb b/views/site_files/text_editor.erb
index d120a48d..5347a673 100644
--- a/views/site_files/text_editor.erb
+++ b/views/site_files/text_editor.erb
@@ -112,7 +112,7 @@
   <div class="col col-66" style="flex: 66%; padding: 10px">
     <div id="editor"><h3>Loading...</h3></div>
   </div>
-  <div class="col col-33" style="flex: 33%; padding: 10px">
+  <div class="col col-33 chat-col" style="flex: 33%">
     <div class="chat-container">
       <div id="chat-box" class="chat-box">
         <div class="bot-message message">
@@ -120,11 +120,13 @@
           <p>How can I help you today?</p>
         </div>
       </div>
-        <form id="chat-form">
-          <input name="csrf_token" value="<%= csrf_token %>" type="hidden">
-          <input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
-          <button type="submit" class="btn-Action">Send</button>
-        </form>
+        <div id="chat-form">
+          <form>
+            <input name="csrf_token" value="<%= csrf_token %>" type="hidden">
+            <input type="text" id="chat-input" placeholder="Ask a coding question..." value="give me a hello world html file" autocomplete="off">
+            <button type="submit" class="btn-Action">Send</button>
+          </form>
+        </div>
       </div>
     </div>
   </div>