diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index e515af16..0161eac2 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,6 +1,6 @@
-import { Fragment } from 'react';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import { useTranslation } from 'react-i18next';
+
 export default function Hero({
   handleQuestion,
 }: {
@@ -17,40 +17,41 @@ export default function Hero({
     header: string;
     query: string;
   }>;
-  return (
-    <div
-      className={`pt-20 sm:pt-0 pb-6 sm:pb-12 flex h-full  w-full flex-col  text-black-1000 dark:text-bright-gray sm:w-full px-2 sm:px-0`}
-    >
-      <div className="flex h-full w-full flex-col items-center justify-center">
-        <div className="flex items-center">
-          <span className="p-0 text-4xl font-semibold">DocsGPT</span>
-          <img className="mb-1 inline w-14 p-0" src={DocsGPT3} alt="docsgpt" />
-        </div>
 
-        <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
+  return (
+    <div className="flex h-full w-full flex-col text-black-1000 dark:text-bright-gray items-center justify-between">
+      {/* Header Section */}
+      <div className="flex flex-col items-center justify-center flex-grow pt-8 md:pt-0">
+        <div className="flex items-center mb-4">
+          <span className="text-4xl font-semibold">DocsGPT</span>
+          <img className="mb-1 inline w-14" src={DocsGPT3} alt="docsgpt" />
+        </div>
       </div>
-      <div className="mb-16 grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6  md:mb-0 md:text-sm lg:grid-cols-2">
-        {demos?.map(
-          (demo: { header: string; query: string }, key: number) =>
-            demo.header &&
-            demo.query && (
-              <Fragment key={key}>
+
+      {/* Demo Buttons Section */}
+      <div className="w-full max-w-full mb-8 md:mb-16">
+        <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2 gap-3 md:gap-4 text-xs">
+          {demos?.map(
+            (demo: { header: string; query: string }, key: number) =>
+              demo.header &&
+              demo.query && (
                 <button
+                  key={key}
                   onClick={() => handleQuestion({ question: demo.query })}
-                  className={`w-full rounded-full border bg-transparent px-6 py-4 text-left min-w-11/12 sm:min-w-[362px] focus:outline-none
+                  className="w-full rounded-[66px] border bg-transparent px-6 py-[14px] text-left transition-colors
                     border-dark-gray text-just-black hover:bg-cultured
-                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green`}
+                    dark:border-dim-gray dark:text-chinese-white dark:hover:bg-charleston-green"
                 >
-                  <p className="mb-1 font-semibold text-black-1000 dark:text-bright-gray">
+                  <p className="mb-2 font-semibold text-black-1000 dark:text-bright-gray">
                     {demo.header}
                   </p>
-                  <span className="text-gray-700 dark:text-gray-300 opacity-60">
+                  <span className="text-gray-700 dark:text-gray-300 opacity-60 line-clamp-2">
                     {demo.query}
                   </span>
                 </button>
-              </Fragment>
-            ),
-        )}
+              ),
+          )}
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/Input.tsx b/frontend/src/components/Input.tsx
index 39dff2b0..3fd84bdc 100644
--- a/frontend/src/components/Input.tsx
+++ b/frontend/src/components/Input.tsx
@@ -35,7 +35,7 @@ const Input = ({
     <div className={`relative ${className}`}>
       <input
         ref={inputRef}
-        className={`h-[42px] w-full rounded-full px-3 py-1 
+        className={`peer h-[42px] w-full rounded-full px-3 py-1 
           bg-transparent outline-none 
           text-jet dark:text-bright-gray
           placeholder-transparent 
diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
new file mode 100644
index 00000000..ef422ca3
--- /dev/null
+++ b/frontend/src/components/MessageInput.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDarkTheme } from '../hooks';
+import Send from '../assets/send.svg';
+import SendDark from '../assets/send_dark.svg';
+import SpinnerDark from '../assets/spinner-dark.svg';
+import Spinner from '../assets/spinner.svg';
+
+interface MessageInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onSubmit: () => void;
+  loading: boolean;
+}
+
+export default function MessageInput({
+  value,
+  onChange,
+  onSubmit,
+  loading,
+}: MessageInputProps) {
+  const { t } = useTranslation();
+  const [isDarkTheme] = useDarkTheme();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleInput = () => {
+    if (inputRef.current) {
+      if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
+      else inputRef.current.style.height = '64px';
+      inputRef.current.style.height = `${Math.min(
+        inputRef.current.scrollHeight,
+        96,
+      )}px`;
+    }
+  };
+
+  // Focus the textarea and set initial height on mount.
+  useEffect(() => {
+    inputRef.current?.focus();
+    handleInput();
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit();
+      if (inputRef.current) {
+        inputRef.current.value = '';
+        handleInput();
+      }
+    }
+  };
+
+  return (
+    <div className="flex w-full mx-2 items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3">
+      <label htmlFor="message-input" className="sr-only">
+        {t('inputPlaceholder')}
+      </label>
+      <textarea
+        id="message-input"
+        ref={inputRef}
+        value={value}
+        onChange={onChange}
+        tabIndex={1}
+        placeholder={t('inputPlaceholder')}
+        className="inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-lotion dark:bg-charleston-green-3 py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50 px-6"
+        onInput={handleInput}
+        onKeyDown={handleKeyDown}
+        aria-label={t('inputPlaceholder')}
+      />
+      {loading ? (
+        <img
+          src={isDarkTheme ? SpinnerDark : Spinner}
+          className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
+          alt={t('loading')}
+        />
+      ) : (
+        <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
+          <button
+            onClick={onSubmit}
+            aria-label={t('send')}
+            className="flex items-center justify-center"
+          >
+            <img
+              className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
+              src={isDarkTheme ? SendDark : Send}
+              alt={t('send')}
+            />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
index a3f1b38d..c8434f05 100644
--- a/frontend/src/components/SourceDropdown.tsx
+++ b/frontend/src/components/SourceDropdown.tsx
@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Trash from '../assets/trash.svg';
 import Arrow2 from '../assets/dropdown-arrow.svg';
-import { Doc } from '../models/misc';
+import { Doc, ActiveState } from '../models/misc';
 import { useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+import ConfirmationModal from '../modals/ConfirmationModal';
+
 type Props = {
   options: Doc[] | null;
   selectedDocs: Doc | null;
@@ -30,6 +32,10 @@ function SourceDropdown({
     import.meta.env.VITE_EMBEDDINGS_NAME ||
     'huggingface_sentence-transformers/all-mpnet-base-v2';
 
+  const [deleteModalState, setDeleteModalState] =
+    useState<ActiveState>('INACTIVE');
+  const [documentToDelete, setDocumentToDelete] = useState<Doc | null>(null);
+
   const handleEmptyDocumentSelect = () => {
     dispatch(setSelectedDocs(null));
     setIsDocsListOpen(false);
@@ -50,6 +56,25 @@ function SourceDropdown({
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+
+  const confirmDelete = (option: Doc) => {
+    setDocumentToDelete(option);
+    setDeleteModalState('ACTIVE');
+  };
+
+  const handleConfirmedDelete = () => {
+    if (documentToDelete) {
+      handleDeleteClick(documentToDelete);
+      setDeleteModalState('INACTIVE');
+      setDocumentToDelete(null);
+    }
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteModalState('INACTIVE');
+    setDocumentToDelete(null);
+  };
+
   return (
     <div className="relative w-5/6 rounded-3xl" ref={dropdownRef}>
       <button
@@ -76,7 +101,7 @@ function SourceDropdown({
         />
       </button>
       {isDocsListOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
+        <div className="absolute left-0 right-0 z-20 -mt-1 max-h-28 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
           {options ? (
             options.map((option: any, index: number) => {
               if (option.model === embeddingsName) {
@@ -106,7 +131,7 @@ function SourceDropdown({
                         id={`img-${index}`}
                         onClick={(event) => {
                           event.stopPropagation();
-                          handleDeleteClick(option);
+                          confirmDelete(option);
                         }}
                       />
                     )}
@@ -132,6 +157,17 @@ function SourceDropdown({
           </div>
         </div>
       )}
+      <ConfirmationModal
+        message={t('settings.documents.deleteWarning', {
+          name: documentToDelete?.name,
+        })}
+        modalState={deleteModalState}
+        setModalState={setDeleteModalState}
+        handleSubmit={handleConfirmedDelete}
+        handleCancel={handleCancelDelete}
+        submitLabel={t('convTile.delete')}
+        variant="danger"
+      />
     </div>
   );
 }
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 7b90bb44..9f54ddbd 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -1,23 +1,14 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom';
-import Hero from '../Hero';
 import { useDropzone } from 'react-dropzone';
 import DragFileUpload from '../assets/DragFileUpload.svg';
-import ArrowDown from '../assets/arrow-down.svg';
 import newChatIcon from '../assets/openNewChat.svg';
-import Send from '../assets/send.svg';
-import SendDark from '../assets/send_dark.svg';
 import ShareIcon from '../assets/share.svg';
-import SpinnerDark from '../assets/spinner-dark.svg';
-import Spinner from '../assets/spinner.svg';
-import RetryIcon from '../components/RetryIcon';
-import { useDarkTheme, useMediaQuery } from '../hooks';
+import { useMediaQuery } from '../hooks';
 import { ShareConversationModal } from '../modals/ShareConversationModal';
 import { selectConversationId } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
-import ConversationBubble from './ConversationBubble';
 import { handleSendFeedback } from './conversationHandlers';
 import { FEEDBACK, Query } from './conversationModels';
 import {
@@ -32,19 +23,16 @@ import {
 } from './conversationSlice';
 import Upload from '../upload/Upload';
 import { ActiveState } from '../models/misc';
+import ConversationMessages from './ConversationMessages';
+import MessageInput from '../components/MessageInput';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
-  const navigate = useNavigate();
   const status = useSelector(selectStatus);
   const conversationId = useSelector(selectConversationId);
   const dispatch = useDispatch<AppDispatch>();
-  const conversationRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-  const [isDarkTheme] = useDarkTheme();
-  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
+  const [input, setInput] = useState('');
   const fetchStream = useRef<any>(null);
-  const [eventInterrupt, setEventInterrupt] = useState(false);
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
@@ -91,23 +79,6 @@ export default function Conversation() {
     },
   });
 
-  const handleUserInterruption = () => {
-    if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
-  };
-  useEffect(() => {
-    !eventInterrupt && scrollIntoView();
-    if (queries.length == 0) {
-      resetConversation();
-    }
-  }, [queries.length, queries[queries.length - 1]]);
-
-  useEffect(() => {
-    const element = document.getElementById('inputbox') as HTMLTextAreaElement;
-    if (element) {
-      element.focus();
-    }
-  }, []);
-
   useEffect(() => {
     if (queries.length) {
       queries[queries.length - 1].error && setLastQueryReturnedErr(true);
@@ -115,19 +86,6 @@ export default function Conversation() {
     }
   }, [queries[queries.length - 1]]);
 
-  const scrollIntoView = () => {
-    if (!conversationRef?.current || eventInterrupt) return;
-
-    if (status === 'idle' || !queries[queries.length - 1].response) {
-      conversationRef.current.scrollTo({
-        behavior: 'smooth',
-        top: conversationRef.current.scrollHeight,
-      });
-    } else {
-      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
-    }
-  };
-
   const handleQuestion = ({
     question,
     isRetry = false,
@@ -146,7 +104,6 @@ export default function Conversation() {
     } else {
       question = question.trim();
       if (question === '') return;
-      setEventInterrupt(false);
       !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
       fetchStream.current = dispatch(fetchAnswer({ question }));
     }
@@ -181,14 +138,14 @@ export default function Conversation() {
   ) => {
     if (updated === true) {
       handleQuestion({ question: updatedQuestion as string, updated, indx });
-    } else if (inputRef.current?.value && status !== 'loading') {
+    } else if (input && status !== 'loading') {
       if (lastQueryReturnedErr) {
         // update last failed query with new prompt
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: inputRef.current.value,
+              prompt: input,
             },
           }),
         );
@@ -197,10 +154,9 @@ export default function Conversation() {
           isRetry: true,
         });
       } else {
-        handleQuestion({ question: inputRef.current.value });
+        handleQuestion({ question: input });
       }
-      inputRef.current.value = '';
-      handleInput();
+      setInput('');
     }
   };
   const resetConversation = () => {
@@ -215,84 +171,8 @@ export default function Conversation() {
     if (queries && queries.length > 0) resetConversation();
   };
 
-  const prepResponseView = (query: Query, index: number) => {
-    let responseView;
-    if (query.response) {
-      responseView = (
-        <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
-          key={`${index}ANSWER`}
-          message={query.response}
-          type={'ANSWER'}
-          sources={query.sources}
-          toolCalls={query.tool_calls}
-          feedback={query.feedback}
-          handleFeedback={(feedback: FEEDBACK) =>
-            handleFeedback(query, feedback, index)
-          }
-        ></ConversationBubble>
-      );
-    } else if (query.error) {
-      const retryBtn = (
-        <button
-          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5  text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
-          disabled={status === 'loading'}
-          onClick={() => {
-            handleQuestion({
-              question: queries[queries.length - 1].prompt,
-              isRetry: true,
-            });
-          }}
-        >
-          <RetryIcon
-            width={isMobile ? 12 : 12} // change the width and height according to device size if necessary
-            height={isMobile ? 12 : 12}
-            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
-            strokeWidth={10}
-          />
-        </button>
-      );
-      responseView = (
-        <ConversationBubble
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
-          key={`${index}ERROR`}
-          message={query.error}
-          type="ERROR"
-          retryBtn={retryBtn}
-        ></ConversationBubble>
-      );
-    }
-    return responseView;
-  };
-
-  const handleInput = () => {
-    if (inputRef.current) {
-      if (window.innerWidth < 350) inputRef.current.style.height = 'auto';
-      else inputRef.current.style.height = '64px';
-      inputRef.current.style.height = `${Math.min(
-        inputRef.current.scrollHeight,
-        96,
-      )}px`;
-    }
-  };
-  const checkScroll = () => {
-    const el = conversationRef.current;
-    if (!el) return;
-    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
-    setHasScrolledToLast(isBottom);
-  };
-  useEffect(() => {
-    handleInput();
-    window.addEventListener('resize', handleInput);
-    conversationRef.current?.addEventListener('scroll', checkScroll);
-    return () => {
-      window.removeEventListener('resize', handleInput);
-      conversationRef.current?.removeEventListener('scroll', checkScroll);
-    };
-  }, []);
   return (
-    <div className="flex flex-col gap-1 h-full justify-end ">
+    <div className="flex flex-col gap-1 h-full justify-end">
       {conversationId && queries.length > 0 && (
         <div className="absolute top-4 right-20">
           <div className="flex mt-2 items-center gap-4">
@@ -327,113 +207,39 @@ export default function Conversation() {
             </button>
           </div>
           {isShareModalOpen && (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
-              <div className="absolute inset-0 bg-black/50 dark:bg-gray-alpha" />
-              <div className="relative z-50 w-full max-w-md rounded-3xl">
-                <ShareConversationModal
-                  close={() => {
-                    setShareModalState(false);
-                  }}
-                  conversationId={conversationId}
-                />
-              </div>
-            </div>
+            <ShareConversationModal
+              close={() => {
+                setShareModalState(false);
+              }}
+              conversationId={conversationId}
+            />
           )}
         </div>
       )}
-      <div
-        ref={conversationRef}
-        onWheel={handleUserInterruption}
-        onTouchMove={handleUserInterruption}
-        className="flex justify-center w-full overflow-y-auto h-screen sm:mt-12"
-      >
-        {queries.length > 0 && !hasScrolledToLast && (
-          <button
-            onClick={scrollIntoView}
-            aria-label="scroll to bottom"
-            className="fixed bottom-40 right-14 z-10 flex h-7 w-7  items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-purple-taupe md:h-9 md:w-9 md:bg-opacity-100 "
-          >
-            <img
-              src={ArrowDown}
-              alt="arrow down"
-              className="h-4 w-4 opacity-50 md:h-5 md:w-5"
-            />
-          </button>
-        )}
 
-        {queries.length > 0 ? (
-          <div className="w-full md:w-8/12">
-            {queries.map((query, index) => {
-              return (
-                <Fragment key={index}>
-                  <ConversationBubble
-                    className={'first:mt-5'}
-                    key={`${index}QUESTION`}
-                    message={query.prompt}
-                    type="QUESTION"
-                    handleUpdatedQuestionSubmission={handleQuestionSubmission}
-                    questionNumber={index}
-                    sources={query.sources}
-                  ></ConversationBubble>
+      <ConversationMessages
+        handleQuestion={handleQuestion}
+        handleQuestionSubmission={handleQuestionSubmission}
+        handleFeedback={handleFeedback}
+        queries={queries}
+        status={status}
+      />
 
-                  {prepResponseView(query, index)}
-                </Fragment>
-              );
-            })}
-          </div>
-        ) : (
-          <Hero handleQuestion={handleQuestion} />
-        )}
-      </div>
-
-      <div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-[calc(min(742px,92%))] h-auto py-1">
+      <div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] h-auto py-1">
         <div
           {...getRootProps()}
-          className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3"
+          className="flex w-full items-center rounded-[40px]"
         >
           <label htmlFor="file-upload" className="sr-only">
             {t('modals.uploadDoc.label')}
           </label>
           <input {...getInputProps()} id="file-upload" />
-          <label htmlFor="message-input" className="sr-only">
-            {t('inputPlaceholder')}
-          </label>
-          <textarea
-            id="message-input"
-            ref={inputRef}
-            tabIndex={1}
-            placeholder={t('inputPlaceholder')}
-            className={`inputbox-style w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-lotion dark:bg-charleston-green-3 py-5 text-base leading-tight opacity-100 focus:outline-none dark:text-bright-gray dark:placeholder-bright-gray dark:placeholder-opacity-50`}
-            onInput={handleInput}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                handleQuestionSubmission();
-              }
-            }}
-            aria-label={t('inputPlaceholder')}
-          ></textarea>
-          {status === 'loading' ? (
-            <img
-              src={isDarkTheme ? SpinnerDark : Spinner}
-              className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
-              alt={t('loading')}
-            />
-          ) : (
-            <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
-              <button
-                onClick={() => handleQuestionSubmission()}
-                aria-label={t('send')}
-                className="flex items-center justify-center"
-              >
-                <img
-                  className="ml-[4px] h-6 w-6 text-white filter dark:invert-[0.45] invert-[0.35]"
-                  src={isDarkTheme ? SendDark : Send}
-                  alt={t('send')}
-                />
-              </button>
-            </div>
-          )}
+          <MessageInput
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onSubmit={handleQuestionSubmission}
+            loading={status === 'loading'}
+          />
         </div>
 
         <p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
new file mode 100644
index 00000000..c83ee50c
--- /dev/null
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -0,0 +1,180 @@
+import { Fragment, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ConversationBubble from './ConversationBubble';
+import Hero from '../Hero';
+import { FEEDBACK, Query, Status } from './conversationModels';
+import ArrowDown from '../assets/arrow-down.svg';
+import RetryIcon from '../components/RetryIcon';
+import { useDarkTheme } from '../hooks';
+
+interface ConversationMessagesProps {
+  handleQuestion: (params: {
+    question: string;
+    isRetry?: boolean;
+    updated?: boolean | null;
+    indx?: number;
+  }) => void;
+  handleQuestionSubmission: (
+    updatedQuestion?: string,
+    updated?: boolean,
+    indx?: number,
+  ) => void;
+  handleFeedback?: (query: Query, feedback: FEEDBACK, index: number) => void;
+  queries: Query[];
+  status: Status;
+}
+
+export default function ConversationMessages({
+  handleQuestion,
+  handleQuestionSubmission,
+  queries,
+  status,
+  handleFeedback,
+}: ConversationMessagesProps) {
+  const [isDarkTheme] = useDarkTheme();
+  const { t } = useTranslation();
+
+  const conversationRef = useRef<HTMLDivElement>(null);
+  const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
+  const [eventInterrupt, setEventInterrupt] = useState(false);
+
+  const handleUserInterruption = () => {
+    if (!eventInterrupt && status === 'loading') {
+      setEventInterrupt(true);
+    }
+  };
+
+  const scrollIntoView = () => {
+    if (!conversationRef?.current || eventInterrupt) return;
+
+    if (status === 'idle' || !queries[queries.length - 1]?.response) {
+      conversationRef.current.scrollTo({
+        behavior: 'smooth',
+        top: conversationRef.current.scrollHeight,
+      });
+    } else {
+      conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
+    }
+  };
+
+  const checkScroll = () => {
+    const el = conversationRef.current;
+    if (!el) return;
+    const isBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 10;
+    setHasScrolledToLast(isBottom);
+  };
+
+  useEffect(() => {
+    !eventInterrupt && scrollIntoView();
+  }, [queries.length, queries[queries.length - 1]]);
+
+  useEffect(() => {
+    if (status === 'idle') {
+      setEventInterrupt(false);
+    }
+  }, [status]);
+
+  useEffect(() => {
+    conversationRef.current?.addEventListener('scroll', checkScroll);
+    return () => {
+      conversationRef.current?.removeEventListener('scroll', checkScroll);
+    };
+  }, []);
+
+  const prepResponseView = (query: Query, index: number) => {
+    let responseView;
+    if (query.response) {
+      responseView = (
+        <ConversationBubble
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
+          key={`${index}ANSWER`}
+          message={query.response}
+          type={'ANSWER'}
+          sources={query.sources}
+          toolCalls={query.tool_calls}
+          feedback={query.feedback}
+          handleFeedback={
+            handleFeedback
+              ? (feedback) => handleFeedback(query, feedback, index)
+              : undefined
+          }
+        />
+      );
+    } else if (query.error) {
+      const retryBtn = (
+        <button
+          className="flex items-center justify-center gap-3 self-center rounded-full py-3 px-5 text-lg text-gray-500 transition-colors delay-100 hover:border-gray-500 disabled:cursor-not-allowed dark:text-bright-gray"
+          disabled={status === 'loading'}
+          onClick={() => {
+            handleQuestion({
+              question: queries[queries.length - 1].prompt,
+              isRetry: true,
+            });
+          }}
+        >
+          <RetryIcon
+            width={12}
+            height={12}
+            fill={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+            stroke={isDarkTheme ? 'rgb(236 236 241)' : 'rgb(107 114 120)'}
+            strokeWidth={10}
+          />
+        </button>
+      );
+      responseView = (
+        <ConversationBubble
+          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
+          key={`${index}ERROR`}
+          message={query.error}
+          type="ERROR"
+          retryBtn={retryBtn}
+        />
+      );
+    }
+    return responseView;
+  };
+
+  return (
+    <div
+      ref={conversationRef}
+      onWheel={handleUserInterruption}
+      onTouchMove={handleUserInterruption}
+      className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12"
+    >
+      {queries.length > 0 && !hasScrolledToLast && (
+        <button
+          onClick={scrollIntoView}
+          aria-label="scroll to bottom"
+          className="fixed bottom-40 right-14 z-10 flex h-7 w-7 items-center justify-center rounded-full border-[0.5px] border-gray-alpha bg-gray-100 bg-opacity-50 dark:bg-gunmetal md:h-9 md:w-9 md:bg-opacity-100"
+        >
+          <img
+            src={ArrowDown}
+            alt="arrow down"
+            className="h-4 w-4 opacity-50 md:h-5 md:w-5 filter dark:invert"
+          />
+        </button>
+      )}
+
+      <div className="w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1300px] px-2">
+        {queries.length > 0 ? (
+          queries.map((query, index) => (
+            <Fragment key={index}>
+              <ConversationBubble
+                className={'first:mt-5'}
+                key={`${index}QUESTION`}
+                message={query.prompt}
+                type="QUESTION"
+                handleUpdatedQuestionSubmission={handleQuestionSubmission}
+                questionNumber={index}
+                sources={query.sources}
+              />
+              {prepResponseView(query, index)}
+            </Fragment>
+          ))
+        ) : (
+          <Hero handleQuestion={handleQuestion} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index b231ed1e..993556e4 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -1,12 +1,9 @@
-import { Query } from './conversationModels';
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
-
+import ConversationMessages from './ConversationMessages';
+import MessageInput from '../components/MessageInput';
 import conversationService from '../api/services/conversationService';
-import ConversationBubble from './ConversationBubble';
-import Send from '../assets/send.svg';
-import Spinner from '../assets/spinner.svg';
 import {
   selectClientAPIKey,
   setClientApiKey,
@@ -27,6 +24,7 @@ import {
 } from './sharedConversationSlice';
 import { useSelector } from 'react-redux';
 import { Helmet } from 'react-helmet';
+import { formatDate } from '../utils/dateTimeUtils';
 
 export const SharedConversation = () => {
   const navigate = useNavigate();
@@ -38,27 +36,14 @@ export const SharedConversation = () => {
   const apiKey = useSelector(selectClientAPIKey);
   const status = useSelector(selectStatus);
 
-  const inputRef = useRef<HTMLDivElement>(null);
-  const sharedConversationRef = useRef<HTMLDivElement>(null);
+  const [input, setInput] = useState('');
   const { t } = useTranslation();
   const dispatch = useDispatch<AppDispatch>();
 
   const [lastQueryReturnedErr, setLastQueryReturnedErr] = useState(false);
-  const [eventInterrupt, setEventInterrupt] = useState(false);
-  const endMessageRef = useRef<HTMLDivElement>(null);
-  const handleUserInterruption = () => {
-    if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
-  };
-  useEffect(() => {
-    !eventInterrupt && scrollIntoView();
-  }, [queries.length, queries[queries.length - 1]]);
 
   useEffect(() => {
     identifier && dispatch(setIdentifier(identifier));
-    const element = document.getElementById('inputbox') as HTMLInputElement;
-    if (element) {
-      element.focus();
-    }
   }, []);
 
   useEffect(() => {
@@ -68,20 +53,6 @@ export const SharedConversation = () => {
     }
   }, [queries[queries.length - 1]]);
 
-  const scrollIntoView = () => {
-    if (!sharedConversationRef?.current || eventInterrupt) return;
-
-    if (status === 'idle' || !queries[queries.length - 1].response) {
-      sharedConversationRef.current.scrollTo({
-        behavior: 'smooth',
-        top: sharedConversationRef.current.scrollHeight,
-      });
-    } else {
-      sharedConversationRef.current.scrollTop =
-        sharedConversationRef.current.scrollHeight;
-    }
-  };
-
   const fetchQueries = () => {
     identifier &&
       conversationService
@@ -97,7 +68,7 @@ export const SharedConversation = () => {
               setFetchedData({
                 queries: data.queries,
                 title: data.title,
-                date: data.date,
+                date: formatDate(data.timestamp),
                 identifier,
               }),
             );
@@ -105,47 +76,16 @@ export const SharedConversation = () => {
           }
         });
   };
-  const handlePaste = (e: React.ClipboardEvent) => {
-    e.preventDefault();
-    const text = e.clipboardData.getData('text/plain');
-    inputRef.current && (inputRef.current.innerText = text);
-  };
-  const prepResponseView = (query: Query, index: number) => {
-    let responseView;
-    if (query.response) {
-      responseView = (
-        <ConversationBubble
-          ref={endMessageRef}
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'}`}
-          key={`${index}ANSWER`}
-          message={query.response}
-          type={'ANSWER'}
-          sources={query.sources ?? []}
-          toolCalls={query.tool_calls}
-        ></ConversationBubble>
-      );
-    } else if (query.error) {
-      responseView = (
-        <ConversationBubble
-          ref={endMessageRef}
-          className={`${index === queries.length - 1 ? 'mb-32' : 'mb-7'} `}
-          key={`${index}ERROR`}
-          message={query.error}
-          type="ERROR"
-        ></ConversationBubble>
-      );
-    }
-    return responseView;
-  };
+
   const handleQuestionSubmission = () => {
-    if (inputRef.current?.textContent && status !== 'loading') {
+    if (input && status !== 'loading') {
       if (lastQueryReturnedErr) {
         // update last failed query with new prompt
         dispatch(
           updateQuery({
             index: queries.length - 1,
             query: {
-              prompt: inputRef.current.textContent,
+              prompt: input,
             },
           }),
         );
@@ -154,9 +94,9 @@ export const SharedConversation = () => {
           isRetry: true,
         });
       } else {
-        handleQuestion({ question: inputRef.current.textContent });
+        handleQuestion({ question: input });
       }
-      inputRef.current.textContent = '';
+      setInput('');
     }
   };
 
@@ -169,7 +109,6 @@ export const SharedConversation = () => {
   }) => {
     question = question.trim();
     if (question === '') return;
-    setEventInterrupt(false);
     !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
     dispatch(fetchSharedAnswer({ question }));
   };
@@ -194,93 +133,47 @@ export const SharedConversation = () => {
           content="Shared conversations with DocsGPT"
         />
       </Helmet>
-      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
-        <div
-          ref={sharedConversationRef}
-          onWheel={handleUserInterruption}
-          onTouchMove={handleUserInterruption}
-          className="flex w-full justify-center overflow-auto"
-        >
-          <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
-            <div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
-              <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
-                {title}
-              </h1>
-              <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-                {t('sharedConv.subtitle')}{' '}
-                <a href="/" className="text-[#007DFF]">
-                  DocsGPT
-                </a>
-              </h2>
-              <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
-                {date}
-              </h2>
-            </div>
-            <div className="">
-              {queries?.map((query, index) => {
-                return (
-                  <Fragment key={index}>
-                    <ConversationBubble
-                      ref={endMessageRef}
-                      className={'mb-1 last:mb-28 md:mb-7'}
-                      key={`${index}QUESTION`}
-                      message={query.prompt}
-                      type="QUESTION"
-                      sources={query.sources}
-                    ></ConversationBubble>
-
-                    {prepResponseView(query, index)}
-                  </Fragment>
-                );
-              })}
-            </div>
-          </div>
+      <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black ">
+        <div className="border-b p-2 dark:border-b-silver w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
+          <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
+            {title}
+          </h1>
+          <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+            {t('sharedConv.subtitle')}{' '}
+            <a href="/" className="text-[#007DFF]">
+              DocsGPT
+            </a>
+          </h2>
+          <h2 className="font-semi-bold text-base text-chinese-black dark:text-chinese-silver">
+            {date}
+          </h2>
         </div>
-
-        <div className="flex w-11/12 flex-col items-center gap-4 pb-2 md:w-10/12 lg:w-6/12">
+        <ConversationMessages
+          handleQuestion={handleQuestion}
+          handleQuestionSubmission={handleQuestionSubmission}
+          queries={queries}
+          status={status}
+        />
+        <div className="flex flex-col items-center gap-4 pb-2 w-full md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12 max-w-[1200px]">
           {apiKey ? (
-            <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
-              <div
-                id="inputbox"
-                ref={inputRef}
-                tabIndex={1}
-                onPaste={handlePaste}
-                placeholder={t('inputPlaceholder')}
-                contentEditable
-                className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter' && !e.shiftKey) {
-                    e.preventDefault();
-                    handleQuestionSubmission();
-                  }
-                }}
-              ></div>
-              {status === 'loading' ? (
-                <img
-                  src={Spinner}
-                  className="relative right-[38px] bottom-[24px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent filter dark:invert"
-                ></img>
-              ) : (
-                <div className="mx-1 cursor-pointer rounded-full p-3 text-center hover:bg-gray-3000 dark:hover:bg-dark-charcoal">
-                  <img
-                    onClick={handleQuestionSubmission}
-                    className="ml-[4px] h-6 w-6 text-white filter dark:invert"
-                    src={Send}
-                  ></img>
-                </div>
-              )}
-            </div>
+            <MessageInput
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onSubmit={() => handleQuestionSubmission()}
+              loading={status === 'loading'}
+            />
           ) : (
             <button
               onClick={() => navigate('/')}
-              className="w-fit rounded-full bg-purple-30 p-4 text-white shadow-xl transition-colors duration-200 hover:bg-purple-taupe mb-14 sm:mb-0"
+              className="w-fit rounded-full bg-purple-30 py-3 px-5 text-white shadow-xl transition-colors duration-200 hover:bg-violets-are-blue mb-14 sm:mb-0"
             >
               {t('sharedConv.button')}
             </button>
           )}
-          <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
+
+          <p className="text-gray-4000 hidden w-[100vw] self-center bg-transparent py-2 text-center text-xs dark:text-sonic-silver md:inline md:w-full">
             {t('sharedConv.meta')}
-          </span>
+          </p>
         </div>
       </div>
     </>
diff --git a/frontend/src/conversation/conversationSlice.ts b/frontend/src/conversation/conversationSlice.ts
index 4473d3a9..f00eb546 100644
--- a/frontend/src/conversation/conversationSlice.ts
+++ b/frontend/src/conversation/conversationSlice.ts
@@ -265,8 +265,7 @@ export const conversationSlice = createSlice({
           return state;
         }
         state.status = 'failed';
-        state.queries[state.queries.length - 1].error =
-          'Something went wrong. Please check your internet connection.';
+        state.queries[state.queries.length - 1].error = 'Something went wrong';
       });
   },
 });
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 88e56469..07760385 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -501,15 +501,15 @@ input:-webkit-autofill:active {
 .dark input:-webkit-autofill:hover,
 .dark input:-webkit-autofill:focus,
 .dark input:-webkit-autofill:active {
-  -webkit-text-fill-color: #E5E7EB !important;
+  -webkit-text-fill-color: #e5e7eb !important;
   -webkit-box-shadow: 0 0 0 30px transparent inset !important;
   background-color: transparent !important;
-  caret-color: #E5E7EB;
+  caret-color: #e5e7eb;
 }
 
 /* Additional autocomplete dropdown styles for dark mode */
 .dark input:-webkit-autofill::first-line {
-  color: #E5E7EB;
+  color: #e5e7eb;
 }
 
 .inputbox-style {
diff --git a/frontend/src/modals/ShareConversationModal.tsx b/frontend/src/modals/ShareConversationModal.tsx
index 80d673c4..3fd444ad 100644
--- a/frontend/src/modals/ShareConversationModal.tsx
+++ b/frontend/src/modals/ShareConversationModal.tsx
@@ -138,7 +138,7 @@ export const ShareConversationModal = ({
           </span>
           {status === 'fetched' ? (
             <button
-              className="my-1 h-10 w-28 rounded-full border border-solid bg-purple-30 p-2 text-sm text-white hover:bg-violets-are-blue"
+              className="my-1 h-10 w-28 rounded-full bg-purple-30 p-2 text-sm text-white hover:bg-violets-are-blue"
               onClick={() => handleCopyKey(`${domain}/share/${identifier}`)}
             >
               {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
diff --git a/frontend/src/utils/dateTimeUtils.ts b/frontend/src/utils/dateTimeUtils.ts
index 7f89007c..caddf961 100644
--- a/frontend/src/utils/dateTimeUtils.ts
+++ b/frontend/src/utils/dateTimeUtils.ts
@@ -1,19 +1,39 @@
 export function formatDate(dateString: string): string {
-  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
+  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}[+-]\d{2}:\d{2}$/.test(dateString)) {
+    // ISO 8601 format
     const dateTime = new Date(dateString);
-    return dateTime.toLocaleTimeString([], {
+    return dateTime.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
+    const dateTime = new Date(dateString);
+    return dateTime.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
     });
   } else if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/.test(dateString)) {
     const dateTime = new Date(dateString);
-    return dateTime.toLocaleTimeString([], {
+    return dateTime.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
       hour: '2-digit',
       minute: '2-digit',
     });
   } else if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
     const date = new Date(dateString);
-    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
   } else {
     return dateString;
   }