diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
index a444eada..8f3f3b26 100644
--- a/frontend/src/Hero.tsx
+++ b/frontend/src/Hero.tsx
@@ -10,11 +10,11 @@ const demos: { header: string; query: string }[] = [
   },
   {
     header: 'Write Code',
-    query: 'Write code for api request for /api/answer',
+    query: 'Write code for api request to /api/answer',
   },
   {
     header: 'Learning Assistance',
-    query: 'Write potential questions that can be answered by context',
+    query: 'Write potential questions for context',
   },
 ];
 
@@ -25,7 +25,7 @@ export default function Hero({
 }) {
   return (
     <div
-      className={`mt-14 mb-4 flex w-11/12 flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-7/12 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="flex h-full w-full flex-col items-center justify-center">
         <div className="flex items-center">
@@ -35,12 +35,12 @@ export default function Hero({
 
         <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
       </div>
-      <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:gap-6 md:text-sm  lg:grid-cols-2">
+      <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"
+              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]"
             >
               <p className="mb-1 font-semibold text-black dark:text-silver">
                 {demo.header}
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 5835090b..f2b40579 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -130,11 +130,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-[86vh] overflow-y-auto"
+        className="flex h-[85vh] w-full justify-center overflow-y-auto p-4"
       >
         {queries.length > 0 && !hasScrolledToLast && (
           <button
@@ -151,12 +151,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,9 +169,8 @@ export default function Conversation() {
           </div>
         )}
         {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 sm:w-6/12">
+      <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"
@@ -211,7 +210,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>