diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 34ffbc7..cd6083f 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -1,13 +1,13 @@
 import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
-import Markdown from 'react-markdown';
+import Markdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { useChatHistory } from '../hooks/useChatHistory';
 
 type Message = {
-  role: string;
-  content: string;
-};
+  role: string
+  content: string
+}
 
 interface ConversationProps {
   messages: Message[];
@@ -15,7 +15,7 @@ interface ConversationProps {
   onResendClick: () => void;
   onEditClick: () => void;
   onCopyClick: () => void;
-  isClicked: boolean;
+  isClicked: boolean
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
@@ -28,14 +28,16 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       const observer = new IntersectionObserver(
         (entries) => {
           if (entries[0].isIntersecting) {
+            console.log('End of messages reached');
             setIsScrolling(true);
           } else {
+            console.log('End of messages not reached');
             setIsScrolling(false);
           }
         },
         {
           root: document.querySelector('.output'),
-          threshold: 1.0,
+          threshold: 1.0, // Ensure the whole element is visible
         }
       );
 
@@ -51,6 +53,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
       };
     }, [messages]);
 
+    // Scroll to bottom when new messages arrive
     useEffect(() => {
       if (isScrolling) {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
@@ -62,6 +65,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
         <div className="conversation resize" id="conversation">
           {chatHistory.chats[chatHistory.selectedIndex].messages.map((message, index) => {
             if (index >= 1) {
+
               return (
                 <div
                   key={index}
@@ -73,9 +77,8 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
                 </div>
               );
             }
-            return null; // Ensure to return null for the first message or if condition is not met
           })}
-          <div ref={messagesEndRef} />
+
           <div className="button-container">
             <div className="tooltip">
               <button type="button" onClick={onStopClick}>
@@ -107,7 +110,6 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
           <svg style={{ fill: "var(--text-color)" }} viewBox="0 0 384 512" height={30}><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" /></svg>
         </button>
       </div>
-      
     );
   }
 );
diff --git a/app/styles/header.css b/app/styles/header.css
index 29431c5..ff5baf3 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -125,5 +125,4 @@ header {
     position: absolute;
     left: 10vw;
     cursor: pointer;
-    padding: 10px;
 }
\ No newline at end of file
diff --git a/app/styles/output.css b/app/styles/output.css
index 7cc0166..320b68b 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -35,7 +35,6 @@
     margin: 5px 0;
     max-width: 75%;
     word-wrap: break-word;
-    overflow-wrap: break-word;
 }
 
 .user-message {
@@ -50,56 +49,42 @@
     color: var(--ai-message-text-color);
 }
 
-.ai-message a {
+.ai-message a{
     color: var(--text-color);
 }
 
-.ai-message table {
-    display: block; /* Treat the table as a block element */
-    position: relative;
-    overflow-x: auto; /* Allow horizontal scrolling */
-    white-space: nowrap; /* Prevent table content from wrapping */
+.ai-message table{
     border: 1px solid var(--ai-message-text-color);
     border-collapse: collapse;
     background-color: var(--conversation-background-color);
-    max-width: 100%; /* Ensure the table doesn't exceed the container width */
-    padding: 10px; /* Optional: Add padding similar to pre/code */
-    border-radius: 4px; /* Optional: Add border radius similar to pre/code */
-    margin-top: 5px;
 }
 
-
-.ai-message th {
+.ai-message th{
     background-color: var(--user-message-background-color);
     align-items: center;
     padding: 5px;
 }
 
-.ai-message td {
+.ai-message td{
     align-items: center;
     padding: 5px;
 }
 
-.ai-message img {
+.ai-message img{
     max-width: 80%;
 }
 
-.ai-message a:hover {
+.ai-message a:hover{
     filter: brightness(70%);
 }
 
-.ai-message li {
+.ai-message li{
     margin-left: 1em;
 }
 
-.ai-message code, .ai-message pre {
-    overflow-x: auto;
-    white-space: pre;
-    display: block;
-    max-width: 100%;
-    padding: 10px;
-    background-color: var(--code-background-color);
-    border-radius: 4px;
+.ai-message code{
+    width: 100%;
+    overflow: scroll;
 }
 
 /* Button Container */
@@ -136,14 +121,19 @@
     text-align: center;
     padding: 5px;
     border-radius: 4px;
-    font-size: calc(var(--font-size) * 0.8);
+    font-size: calc(var(--font-size)*0.8);
 
+    /* Position the tooltip */
     position: absolute;
     top: 100%;
+    /* Adjusts tooltip to be below the button */
     left: 50%;
     transform: translateX(-50%);
+    /* Center the tooltip */
     white-space: nowrap;
+    /* Prevent line breaks */
 
+    /* Add smooth transition */
     opacity: 0;
     transition: all 0.3s;
 }
@@ -152,6 +142,7 @@
     content: "";
     position: absolute;
     bottom: 100%;
+    /* Arrow on top of tooltip */
     left: 50%;
     transform: translateX(-50%);
     border-width: 5px;
@@ -159,19 +150,20 @@
     border-color: transparent transparent var(--user-message-background-color) transparent;
 }
 
+/* Show the tooltip on hover */
 .tooltip:hover .tooltiptext {
     visibility: visible;
     opacity: 1;
 }
 
-#copiedText {
+#copiedText{
     margin-top: 1em;
-    cursor: default;
+    cursor:default;
     pointer-events: none;
     user-select: none;
 }
 
-#scrollToBottom {
+#scrollToBottom{
     scroll-behavior: smooth;
     visibility: hidden;
     position: absolute;
@@ -182,4 +174,4 @@
     bottom: 16dvh;
     left: 50%;
     translate: -25px;
-}
\ No newline at end of file
+}