diff --git a/app/ConversationFrontend.tsx b/app/ConversationFrontend.tsx
index b6bd312..d268bfb 100644
--- a/app/ConversationFrontend.tsx
+++ b/app/ConversationFrontend.tsx
@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useRef } from 'react';
+import React, { ForwardedRef } from 'react';
 
 interface ConversationProps {
   messages: string[];
@@ -9,32 +9,22 @@ interface ConversationProps {
 
 const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>(
   ({ messages, onResendClick, onEditClick, onCopyClick }, ref: ForwardedRef<HTMLDivElement>) => {
-    const endOfMessagesRef = useRef<HTMLDivElement>(null);
-
-    // Auto-scroll to the bottom of the conversation whenever a new message is added
-    useEffect(() => {
-      if (endOfMessagesRef.current) {
-        endOfMessagesRef.current.scrollIntoView({ behavior: 'smooth' });
-      }
-    }, [messages]); // Triggers the effect whenever the 'messages' array changes
-
     return (
       <div className="output">
         <div className="conversation resize" id="conversation" ref={ref}>
           {messages.map((message, index) => {
             const isUserMessage = message.startsWith('User:');
-            console.log("output: "+messages)
             return (
               <div
                 key={index}
                 className={isUserMessage ? 'user-message' : 'ai-message'}
               >
-                <p> {message}</p>
+                <p>
+                {message}
+                </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" />
diff --git a/app/InputBackend.tsx b/app/InputBackend.tsx
index ed02d47..796fd88 100644
--- a/app/InputBackend.tsx
+++ b/app/InputBackend.tsx
@@ -1,9 +1,40 @@
-import React, { useState } from 'react';
+import React from 'react';
 import InputFrontend from './InputFrontend';
 import ConversationFrontend from './ConversationFrontend';
 import { Mistral } from '@mistralai/mistralai';
 
+var messages = [
+  'User: Hello!',
+  'AI: Hi there!',
+  'User: How are you?',
+  'AI: I’m good, thank you!'
+];
 
+async function prompt_mistral(model: string, prompt: string, system: string) {
+  const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
+
+  const client = new Mistral({ apiKey: apiKey });
+
+  var chatResponse = await client.chat.complete({
+    model: model,
+    messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
+  });
+
+  if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
+    if (chatResponse.choices[0].message.content) {
+      messages.push('AI: ' + chatResponse.choices[0].message.content);
+      console.error('Error: Brain Not Found');
+      console.log(messages)
+    }
+  } else {
+    console.error('Error: Unexpected API response:', chatResponse);
+  }
+}
+
+const handleSendClick = (message: string) => {
+  messages.push('User: ' + message);
+  prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
+};
 
 const handleMicClick = () => {
   console.log('Mic clicked!');
@@ -26,42 +57,7 @@ const handleCopyClick = () => {
   // Handle copy action
 };
 
-const InputBackend:React.FC = () => {
-  async function prompt_mistral(model: string, prompt: string, system: string) {
-    const apiKey = "m3kZRjN8DRSIo88r8Iti9hmKGWIklrLY";
-    
-    const client = new Mistral({ apiKey: apiKey });
-    
-    var chatResponse = await client.chat.complete({
-      model: model,
-      messages: [{ role: 'user', content: prompt }, { role: 'system', content: system, }],
-    });
-    
-    if (chatResponse && chatResponse.choices && chatResponse.choices.length > 0) {
-      if (chatResponse.choices[0].message.content) {
-        addMessage('AI: ' + chatResponse.choices[0].message.content);
-        console.error('Error: Brain Not Found');
-        console.log(messages)
-      }
-    } else {
-      console.error('Error: Unexpected API response:', chatResponse);
-    }
-  }
-  
-  const handleSendClick = (message: string) => {
-    addMessage('User: ' + message);
-    prompt_mistral("mistral-large-latest", message, "You are a helpful assistant.")
-  };
-  const [messages, setMessages] = useState([
-    'User: Hello!',
-    'AI: Hi there!',
-    'User: How are you?',
-    'AI: I’m good, thank you!'
-  ]);
-  
-  const addMessage = (message: string) => {
-    setMessages((prevMessages) => [...prevMessages, message]);
-  };
+const InputBackend = () => {
   return (
     <div>
       <ConversationFrontend
@@ -69,12 +65,12 @@ const InputBackend:React.FC = () => {
         onResendClick={handleResendClick}
         onEditClick={handleEditClick}
         onCopyClick={handleCopyClick}
-        />
+      />
       <InputFrontend
         message=""
         onSendClick={handleSendClick}
         onMicClick={handleMicClick}
-        />
+      />
     </div>
   );
 };