diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index de75c73e..f3f8befc 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -5,7 +5,7 @@ import About from './About';
 import PageNotFound from './PageNotFound';
 import { inject } from '@vercel/analytics';
 import { useMediaQuery } from './hooks';
-import { useState,useEffect } from 'react';
+import { useState} from 'react';
 import Setting from './Setting';
 
 inject();
@@ -32,4 +32,4 @@ export default function App() {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 1f0b94ca..e23c06f7 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -6,14 +6,15 @@ export default function Hero({ className = '' }: { className?: string }) {
   const { isMobile } = useMediaQuery();
   const [isDarkTheme] = useDarkTheme()
   return (
-    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
+    <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'} flex flex-col text-black-1000 dark:text-bright-gray`}>
       <div className=" mb-2 flex items-center justify-center sm:mb-10">
+        
         <p className="mr-2 text-4xl font-semibold">DocsGPT</p>
         <img className="mb-2 h-14" src={DocsGPT3} alt="DocsGPT" />
       </div>
       {isMobile ? (
         <p className="mb-3 text-center leading-6">
-          Welcome to <span className="font-bold ">DocsGPT</span>, your technical
+          Welcome to <span className="font-bold">DocsGPT</span>, your technical
           documentation assistant! Start by entering your query in the input
           field below, and we&apos;ll provide you with the most relevant
           answers.
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 2605629e..13a3d485 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -17,20 +17,17 @@ import Spinner from './../assets/spinner.svg';
 import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
 import ArrowDown from './../assets/arrow-down.svg';
-import { selectConversationId } from '../preferences/preferenceSlice';
 export default function Conversation() {
   const queries = useSelector(selectQueries);
   const status = useSelector(selectStatus);
-  const conversationId = useSelector(selectConversationId)
   const dispatch = useDispatch<AppDispatch>();
   const endMessageRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
   const [isDarkTheme] = useDarkTheme();
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
-  const conversationRef = useRef<HTMLDivElement>(null);
   const fetchStream = useRef<any>(null);
   const [eventInterrupt, setEventInterrupt] = useState(false);
-  useEffect(() => console.log(status, eventInterrupt))
+
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === "loading")
       setEventInterrupt(true)
@@ -134,10 +131,10 @@ export default function Conversation() {
   };
 
   return (
-    <div ref={conversationRef}
+    <div
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex flex-col h-[86vh] overflow-y-scroll justify-center p-4 md:flex-row">
+      className="flex flex-col justify-center w-full p-4 md:flex-row">
       {queries.length > 0 && !hasScrolledToLast && (
         <button
           onClick={scrollIntoView}
@@ -153,7 +150,7 @@ export default function Conversation() {
       )}
 
       {queries.length > 0 && (
-        <div className="mt-20 mb-9  flex flex-col transition-all md:w-3/4">
+        <div className="mt-20 mb-9 flex flex-col transition-all md:w-3/4">
           {queries.map((query, index) => {
             return (
               <Fragment key={index}>
@@ -171,10 +168,10 @@ export default function Conversation() {
         </div>
       )}
       {queries.length === 0 && (
-        <Hero className="mt-24 h-[100vh] md:mt-52"></Hero>
+        <Hero className="mt-24 md:mt-52"></Hero>
       )}
-      <div className="absolute bottom-0 flex w-11/12 md:w-[65%] h-[14vh] flex-col items-end self-center bg-white dark:bg-raisin-black pt-1 md:fixed">
-        <div className="flex w-full">
+      <div className="absolute bottom-0 flex w-11/12 md:w-[65%] flex-col items-end self-center bg-white dark:bg-raisin-black pt-4 md:fixed">
+        <div className="flex h-full w-full">
           <div
             id="inputbox"
             ref={inputRef}