diff --git a/app/backend/ChatHistory.ts b/app/backend/ChatHistory.ts
deleted file mode 100644
index f050898..0000000
--- a/app/backend/ChatHistory.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-type ChatMessage = {
-    name: string;
-    message: any;
-    timestamp: number;
-};
-
-let chatHistory: ChatMessage[] = [];
-
-function addMessage(name: string, message: any): void {
-    const newMessage: ChatMessage = {
-        name: name,
-        message: message,
-        timestamp: Date.now()
-    };
-    chatHistory.push(newMessage);
-    console.log(`Added message from ${name}: ${message}`);
-}
-
-function removeMessage(timestamp: number): void {
-    const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
-    if (index > -1) {
-        chatHistory.splice(index, 1);
-        console.log(`Removed message with timestamp: ${timestamp}`);
-    } else {
-        console.log(`Message not found with timestamp: ${timestamp}`);
-    }
-}
diff --git a/app/backend/InputOutputHandler.tsx b/app/backend/InputOutputHandler.tsx
index 983a512..33f7153 100644
--- a/app/backend/InputOutputHandler.tsx
+++ b/app/backend/InputOutputHandler.tsx
@@ -1,6 +1,6 @@
 "use client"
 import React, { use, useEffect, useRef, useState } from "react";
-import ConversationFrontend from '../components/ConversationFrontend';
+import ConversationFrontend from "../components/ConversationFrontend";
 import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
@@ -55,7 +55,6 @@ const InputOutputBackend: React.FC = () => {
   }, [preferredCurrency, preferredLanguage, timeFormat, dateFormat, preferredMeasurement, timeZone]);
 
 
-  const conversationRef = useRef<HTMLDivElement>(null)
   const [copyClicked, setCopyClicked] = useState(false)
   const [accessToken, setAccessToken] = useState("")
   const postWorkerRef = useRef<Worker | null>(null)
@@ -270,7 +269,6 @@ const InputOutputBackend: React.FC = () => {
   return (
     <>
       <ConversationFrontend
-        ref={conversationRef}
         messages={messages}
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}
diff --git a/app/components/ConversationFrontend.tsx b/app/components/ConversationFrontend.tsx
index 5a5632f..f32e19a 100644
--- a/app/components/ConversationFrontend.tsx
+++ b/app/components/ConversationFrontend.tsx
@@ -14,31 +14,32 @@ interface ConversationProps {
 }
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
-  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
-
-    const messagesEndRef = useRef<HTMLDivElement | null>(null)
-
-    useEffect(() => {
-      messagesEndRef.current?.scrollIntoView()
-    }, [messages])
-
+  ({ messages, onResendClick, onEditClick, onCopyClick, isClicked}, ref: ForwardedRef<HTMLDivElement>) => {
+    const endOfMessagesRef = useRef<HTMLDivElement>(null);
+  
     return (
-      <div className="output" ref={ref}>
-        <div className="conversation resize" id="conversation">
+      <div className="output">
+        <div className="conversation resize" id="conversation" ref={ref}>
           {messages.map((message, index) => {
-            if (index >= 1) {
+            let isUserMessage
+            if (message.role == "user") {
+              isUserMessage = message
+            }
+            if (index >= 1){
 
               return (
                 <div
                   key={index}
-                  className={message.role === "user" ? 'user-message' : 'ai-message'}
-                >
+                  className={isUserMessage ? 'user-message' : 'ai-message'}
+                  >
                   <p> {message.content}</p>
                 </div>
               );
             }
           })}
-
+        
+          {/* Dummy div to mark the end of the conversation for auto-scrolling */}
+          <div ref={endOfMessagesRef} />
           <div className="button-container">
             <button type="button" onClick={onResendClick}>
               <img src="/img/resend.svg" alt="resend" />
@@ -49,9 +50,8 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
             <button type="button" onClick={onCopyClick}>
               <img src="/img/copy.svg" alt="copy" />
             </button>
-            <p id="copiedText" style={{ opacity: isClicked ? "1" : "0", transition: "all 0.3s ease-in-out" }}>Copied!</p>
+            <p id="copiedText" style={{opacity:isClicked?"1":"0", transition:"all 0.3s ease-in-out"}}>Copied!</p>
           </div>
-          <div ref={messagesEndRef} />
         </div>
       </div>
     );
diff --git a/app/styles/history.css b/app/styles/history.css
index 14c8428..8133955 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,7 +1,7 @@
 .history-background {
     grid-column: 1/2;
     grid-row: 1/2;
-    height: 35dvh;
+    height: 40dvh;
     overflow: hidden;
     background-color: var(--history-background-color);
     padding: 1em;
@@ -40,6 +40,6 @@
 
 .history-models{
     position: relative;
-    height: 86dvh;
+    height: 90dvh;
     /* padding-bottom: 3dvh; */
 }
diff --git a/app/styles/output.css b/app/styles/output.css
index 179f174..0f9ed42 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -4,7 +4,6 @@
     grid-row: 1 / 4;
     background-color: var(--output-background-color);
     margin: 1em;
-    margin-bottom: 0;
     padding-bottom: 14dvh;
     display: flex;
     flex-direction: column;
@@ -12,7 +11,7 @@
     font-size: 1em;
     overflow-y: auto;
     width: calc(100% - 2em); /* Corrected calculation for width */
-    height: 86dvh;
+    height: 90dvh;
 }
 
 #conversation {
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index ae65dfd..57ec871 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -73,31 +73,29 @@
   /* Input styles */
   .input {
     grid-column: 1 / -1;
-    gap: 5px;
+    gap: 10px;
     padding: 0.5em;
     margin: 0 auto;
     align-items: center;
-    bottom: 3dvh;
-    right: 2vw;
-    left: 2vw;
-    justify-content: flex-start;
+    width: 90%;
+    bottom: 10dvh
   }
 
   .input input {
     font-size: 1em; /* Adjust font size */
-    max-width: 70%;
+    max-width: 65%;
     margin-right: 0;
     border-color: var(--input-border-color); /* Use variable for input border */
     color: var(--text-color); /* Use variable for text color */
   }
 
   .input button {
-    height: 100%; /* Adjust button height */
-    width: 15%; /* Adjust button width */
+    height: 40px; /* Adjust button height */
+    width: 40px; /* Adjust button width */
     font-size: 1.2em; /* Adjust button font size */
+    margin: auto;
     background-color: var(--input-button-color); /* Use variable for button color */
     color: var(--user-message-text-color); /* Use variable for button text color */
-    margin: 0;
   }
 
   .header-logo{