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/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index 7335cfa8..ef422ca3 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/frontend/src/components/MessageInput.tsx
@@ -52,7 +52,7 @@ export default function MessageInput({
   };
 
   return (
-    <div className="flex w-full items-center rounded-[40px] border dark:border-grey border-dark-gray bg-lotion dark:bg-charleston-green-3">
+    <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>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 468d7a83..ccdbf119 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -228,7 +228,7 @@ export default function Conversation() {
         status={status}
       />
 
-      <div className="flex flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 w-full md:w-6/12 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]"
diff --git a/frontend/src/conversation/ConversationMessages.tsx b/frontend/src/conversation/ConversationMessages.tsx
index 8cb878ef..c83ee50c 100644
--- a/frontend/src/conversation/ConversationMessages.tsx
+++ b/frontend/src/conversation/ConversationMessages.tsx
@@ -139,7 +139,7 @@ export default function ConversationMessages({
       ref={conversationRef}
       onWheel={handleUserInterruption}
       onTouchMove={handleUserInterruption}
-      className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12 "
+      className="flex justify-center w-full overflow-y-auto h-screen sm:pt-12"
     >
       {queries.length > 0 && !hasScrolledToLast && (
         <button
@@ -155,9 +155,9 @@ export default function ConversationMessages({
         </button>
       )}
 
-      {queries.length > 0 ? (
-        <div className="w-full px-2 md:w-6/12">
-          {queries.map((query, index) => (
+      <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'}
@@ -170,11 +170,11 @@ export default function ConversationMessages({
               />
               {prepResponseView(query, index)}
             </Fragment>
-          ))}
-        </div>
-      ) : (
-        <Hero handleQuestion={handleQuestion} />
-      )}
+          ))
+        ) : (
+          <Hero handleQuestion={handleQuestion} />
+        )}
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index 57e207e2..107ecb81 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -158,8 +158,8 @@ 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 className="border-b p-2 dark:border-b-silver w-full md:w-6/12">
+      <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>
@@ -179,7 +179,7 @@ export const SharedConversation = () => {
           queries={queries}
           status={status}
         />
-        <div className="flex flex-col items-center gap-4 pb-2 w-full md:w-6/12">
+        <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 ? (
             <MessageInput
               value={input}