diff --git a/src/components/chatbot/chatbot.tsx b/src/components/chatbot/chatbot.tsx
index f433a04..8e3f233 100644
--- a/src/components/chatbot/chatbot.tsx
+++ b/src/components/chatbot/chatbot.tsx
@@ -218,9 +218,13 @@ const ChatWidget = () => {
   const [isCoding, setIsCoding] = useState(false);
   const { contextMessage } = useContext(ChatContext);
 
+  const screenWidth = typeof window !== "undefined" ? window.innerWidth : 1024;
+
   useEffect(() => {
-    setOpen(true);
-    setUserMessage(contextMessage);
+    if (screenWidth > 640) {
+      setOpen(true);
+      setUserMessage(contextMessage);
+    }
   }, [contextMessage]);
 
   const SUGGESTED_MESSAGE = "I need help";
diff --git a/src/components/layout/HeroChat.module.css b/src/components/layout/HeroChat.module.css
index e4ec4fb..ea30308 100644
--- a/src/components/layout/HeroChat.module.css
+++ b/src/components/layout/HeroChat.module.css
@@ -57,6 +57,18 @@
   }
 }
 
+@media screen and (max-width: 769px) {
+  .prompts {
+    & button {
+      font-size: 12px;
+    }
+  }
+  
+  .textarea {
+    font-size: 14px;
+  }
+}
+
 .send {
   width: 36px;
   height: 36px;
diff --git a/src/components/layout/HeroChat.tsx b/src/components/layout/HeroChat.tsx
index ad94e92..e4c8d2a 100644
--- a/src/components/layout/HeroChat.tsx
+++ b/src/components/layout/HeroChat.tsx
@@ -35,7 +35,7 @@ export default function HeroChat() {
 
       <div className={styles.buttons}>
         <div className={styles.prompts}>
-          <button onClick={() => handleBtnPrompt(promptMsgNoon)}>
+          <button onClick={() => handleBtnPrompt(promptMsgNoon)} className="">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"