diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index 497fc41e..cd6d4397 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -1,191 +1,54 @@
-import { useDarkTheme, useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
+const demos: { header: string; query: string }[] = [
+  {
+    header: 'Learn about DocsGPT',
+    query: 'What is DocsGPT?',
+  },
+  {
+    header: 'Summarise documentation',
+    query: 'Summarise current context',
+  },
+  {
+    header: 'Write Code',
+    query: 'Write code for api request to /api/answer',
+  },
+  {
+    header: 'Learning Assistance',
+    query: 'Write potential questions for context',
+  },
+];
 
-export default function Hero({ className = '' }: { className?: string }) {
-  // const isMobile = window.innerWidth <= 768;
-  const { isMobile } = useMediaQuery();
-  const [isDarkTheme] = useDarkTheme();
+export default function Hero({
+  handleQuestion,
+}: {
+  handleQuestion: (question: string) => void;
+}) {
   return (
     <div
-      className={`mt-14 mb-32 flex flex-col text-black-1000 dark:text-bright-gray lg:mt-6`}
+      className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
     >
-      <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 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>
       </div>
-      {isMobile ? (
-        <p className="mb-3 text-center leading-6">
-          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.
-        </p>
-      ) : (
-        <>
-          <p className="mb-3 text-center leading-6">
-            Welcome to DocsGPT, your technical documentation assistant!
-          </p>
-          <p className="mb-3 text-center leading-6">
-            Enter a query related to the information in the documentation you
-            selected to receive
-            <br /> and we will provide you with the most relevant answers.
-          </p>
-          <p className="mb-3 text-center leading-6">
-            Start by entering your query in the input field below and we will do
-            the rest!
-          </p>
-        </>
-      )}
-      <div
-        className={`mt-0 flex flex-wrap items-center justify-center gap-2 sm:mt-1 sm:gap-4 md:gap-4 lg:gap-0`}
-      >
-        {/* first */}
-        <div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70  via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60  lg:rounded-tr-none lg:rounded-br-none">
-          <div
-            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
-              isMobile ? '3.5' : '6 py-8'
-            }  lg:rounded-tr-none lg:rounded-br-none`}
-          >
-            {/* Add Mobile check here */}
-            {isMobile ? (
-              <div className="flex justify-center">
-                <img
-                  src={
-                    isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
-                  }
-                  alt="lock"
-                  className="h-[24px] w-[24px] "
-                />
-                <h2 className="mb-0 pl-1 text-lg font-bold">
-                  Chat with Your Data
-                </h2>
-              </div>
-            ) : (
-              <>
-                <img
-                  src={
-                    isDarkTheme ? '/message-text-dark.svg' : '/message-text.svg'
-                  }
-                  alt="lock"
-                  className="h-[24px] w-[24px]"
-                />
-                <h2 className="mt-2 mb-3 text-lg font-bold">
-                  Chat with Your Data
-                </h2>
-              </>
-            )}
-            <p
-              className={
-                isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
-                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
-              }
+      <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm  lg:grid-cols-2">
+        {demos.map((demo) => (
+          <>
+            <button
+              onClick={() => handleQuestion(demo.query)}
+              className="w-full rounded-full border-2 border-silver px-6 py-4 text-left hover:border-gray-4000 dark:hover:border-gray-3000 xl:min-w-[24vw]"
             >
-              DocsGPT will use your data to answer questions. Whether its
-              documentation, source code, or Microsoft files, DocsGPT allows you
-              to have interactive conversations and find answers based on the
-              provided data.
-            </p>
-          </div>
-        </div>
-        {/* second */}
-        <div className="h-auto rounded-[50px] bg-gradient-to-r from-[#6EE7B7]/70 via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60  lg:rounded-none  lg:py-1 lg:px-0">
-          <div
-            className={`h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
-              isMobile ? '3.5' : '6 py-6'
-            }  lg:rounded-none`}
-          >
-            {/* Add Mobile check here */}
-            {isMobile ? (
-              <div className="flex justify-center ">
-                <img
-                  src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
-                  alt="lock"
-                  className="h-[24px] w-[24px]"
-                />
-                <h2 className="mb-0 pl-1 text-lg font-bold">
-                  Secure Data Storage
-                </h2>
-              </div>
-            ) : (
-              <>
-                <img
-                  src={isDarkTheme ? '/lock-dark.svg' : '/lock.svg'}
-                  alt="lock"
-                  className="h-[24px] w-[24px]"
-                />
-                <h2 className="mt-2 mb-3 text-lg font-bold">
-                  Secure Data Storage
-                </h2>
-              </>
-            )}
-            <p
-              className={
-                isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
-                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
-              }
-            >
-              The security of your data is our top priority. DocsGPT ensures the
-              utmost protection for your sensitive information. With secure data
-              storage and privacy measures in place, you can trust that your
-              data is kept safe and confidential.
-            </p>
-          </div>
-        </div>
-        {/* third */}
-        <div className="h-auto rounded-[50px] bg-gradient-to-l from-[#6EE7B7]/70  via-[#3B82F6] to-[#9333EA]/50 p-1 dark:from-[#D16FF8] dark:via-[#48E6E0] dark:to-[#C85EF6] lg:h-60 lg:rounded-tl-none lg:rounded-bl-none ">
-          <div
-            className={`firefox h-full rounded-[45px] bg-white dark:bg-dark-charcoal p-${
-              isMobile ? '3.5' : '6 px-6 '
-            } lg:rounded-tl-none lg:rounded-bl-none`}
-          >
-            {/* Add Mobile check here */}
-            {isMobile ? (
-              <div className="flex justify-center">
-                <img
-                  src={
-                    isDarkTheme
-                      ? 'message-programming-dark.svg'
-                      : '/message-programming.svg'
-                  }
-                  alt="lock"
-                  className="h-[24px] w-[24px]"
-                />
-                <h2 className="mb-0 pl-1 text-lg font-bold">
-                  Open Source Code
-                </h2>
-              </div>
-            ) : (
-              <>
-                <img
-                  src={
-                    isDarkTheme
-                      ? '/message-programming-dark.svg'
-                      : '/message-programming.svg'
-                  }
-                  alt="lock"
-                  className="h-[24px] w-[24px]"
-                />
-                <h2 className="mt-2 mb-3 text-lg font-bold">
-                  Open Source Code
-                </h2>
-              </>
-            )}
-            <p
-              className={
-                isMobile
-                  ? `w-[250px] text-center text-xs text-gray-500 dark:text-bright-gray`
-                  : `w-[250px] text-xs text-gray-500 dark:text-bright-gray`
-              }
-            >
-              DocsGPT is built on open source principles, promoting transparency
-              and collaboration. The source code is freely available, enabling
-              developers to contribute, enhance, and customize the app to meet
-              their specific needs.
-            </p>
-          </div>
-        </div>
+              <p className="mb-1 font-semibold text-black dark:text-silver">
+                {demo.header}
+              </p>
+              <span className="text-gray-400">{demo.query}</span>
+            </button>
+          </>
+        ))}
       </div>
     </div>
   );
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 09a49d9c..05c8638c 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -131,11 +131,11 @@ export default function Conversation() {
   };
 
   return (
-    <div className='flex flex-col gap-1 h-screen'>
+    <div className="flex h-screen flex-col gap-1">
       <div
         onWheel={handleUserInterruption}
         onTouchMove={handleUserInterruption}
-        className="flex w-full justify-center p-4 h-[87vh] overflow-y-auto"
+        className="flex h-[85vh] w-full justify-center overflow-y-auto p-4"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -152,12 +152,12 @@ export default function Conversation() {
         )}
 
         {queries.length > 0 && (
-          <div className="w-full md:w-8/12 mt-16">
+          <div className="mt-16 w-full md:w-8/12">
             {queries.map((query, index) => {
               return (
                 <Fragment key={index}>
                   <ConversationBubble
-                    className={'mb-1 md:mb-7 last:mb-28'}
+                    className={'mb-1 last:mb-28 md:mb-7'}
                     key={`${index}QUESTION`}
                     message={query.prompt}
                     type="QUESTION"
@@ -169,11 +169,10 @@ export default function Conversation() {
             })}
           </div>
         )}
-        {queries.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
-
+        {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
-      <div className="bottom-0 flex flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black md:fixed w-11/12 md:w-[60%]">
-        <div className="flex h-full w-full">
+      <div className="bottom-0 flex w-11/12 flex-col items-end self-center bg-white pt-1 dark:bg-raisin-black sm:w-6/12 md:fixed">
+        <div className="flex h-full w-full items-center rounded-full border border-silver">
           <div
             id="inputbox"
             ref={inputRef}
@@ -181,7 +180,7 @@ export default function Conversation() {
             placeholder="Type your message here..."
             contentEditable
             onPaste={handlePaste}
-            className={`border-000000 max-h-24 min-h-[2.6rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-3xl border bg-white py-2 pl-4 pr-9 text-base leading-7 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+            className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -198,9 +197,9 @@ export default function Conversation() {
               className="relative right-[38px] bottom-[15px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
             ></img>
           ) : (
-            <div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
+            <div className="mx-1 cursor-pointer rounded-full p-4 text-center hover:bg-gray-3000">
               <img
-                className="ml-[9px] mt-[9px] text-white"
+                className="w-6 text-white "
                 onClick={() => {
                   if (inputRef.current?.textContent) {
                     handleQuestion(inputRef.current.textContent);
@@ -212,7 +211,7 @@ export default function Conversation() {
             </div>
           )}
         </div>
-        <p className="hidden md:inline text-gray-595959 w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:w-full">
+        <p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
           DocsGPT uses GenAI, please review critial information using sources.
         </p>
       </div>
diff --git a/frontend/src/settings/Documents.tsx b/frontend/src/settings/Documents.tsx
index e9d9c1c9..18ae687c 100644
--- a/frontend/src/settings/Documents.tsx
+++ b/frontend/src/settings/Documents.tsx
@@ -1,6 +1,6 @@
 import { DocumentsProps } from '../models/misc';
 import Trash from '../assets/trash.svg';
-
+import PropTypes from 'prop-types';
 const Documents: React.FC<DocumentsProps> = ({
   documents,
   handleDeleteDocument,
@@ -56,5 +56,8 @@ const Documents: React.FC<DocumentsProps> = ({
     </div>
   );
 };
-
+Documents.propTypes = {
+  documents: PropTypes.array.isRequired,
+  handleDeleteDocument: PropTypes.func.isRequired,
+};
 export default Documents;