diff --git a/frontend/components/chat/chatInputBox.tsx b/frontend/components/chat/chatInputBox.tsx
index bb0c3b6..91621c8 100644
--- a/frontend/components/chat/chatInputBox.tsx
+++ b/frontend/components/chat/chatInputBox.tsx
@@ -68,7 +68,7 @@ const ChatInputBox: React.FC<ChatInputBoxProps> = ({ socketRef }) => {
           onClick={handleSendClick}
           disabled={isTimeout}
           className={`absolute right-2 top-1/2 transform -translate-y-1/2 pr-5 ${
-            isTimeout ? "" : "bg-blue-500"
+            isTimeout ? "bg-blue-500" : ""
           } text-white rounded-full p-2 cursor-pointer`}
         >
           <Image
diff --git a/frontend/components/mdgBox.tsx b/frontend/components/mdgBox.tsx
index 6822978..c47fe5d 100644
--- a/frontend/components/mdgBox.tsx
+++ b/frontend/components/mdgBox.tsx
@@ -7,7 +7,6 @@ import { ProjectList } from "./projects/projectList";
 import { BoxProps } from "../interface/interface";
 
 
-
 export default function Box({ channel }: BoxProps) {
   const router = useRouter();
   const arr = ["public", "private", "chatbot"];
@@ -15,6 +14,7 @@ export default function Box({ channel }: BoxProps) {
   const finalArr = newArr.map((item) => item.toUpperCase());
   const isShown = router.pathname === "/";
   const [projects, setProjects] = useState([]);
+  const [isHoveringChatBot,setIsHoveringChatBot]=useState<boolean>(false);
 
   useEffect(() => {
     async function fetchProjectsData() {
@@ -97,13 +97,16 @@ export default function Box({ channel }: BoxProps) {
                 </div>
               </div>
             </div>
-            <div className=" w-1/2 flex-grow bg-blue rounded-full border bg-white border-customBlue hover:bg-gray-50 hover:cursor-pointer flex-2 text-center dark:hover:bg-gray-100">
+            <div className=" w-1/2 flex-grow bg-blue rounded-full border bg-white border-customBlue hover:bg-gray-50 hover:cursor-pointer flex-2 text-center dark:hover:bg-gray-100"
+            onMouseEnter={() => setIsHoveringChatBot(true)}
+            onMouseLeave={() => setIsHoveringChatBot(false)}>
               <div className="p-2.5">
                 <div
                   className=" text-sm text-customBlue border-collapse font-roboto leading-tight tracking-tight text-Roboto font-medium "
                   onClick={handleRoute2}
                 >
-                  JOIN {finalArr[1]} CHAT
+
+                  {isHoveringChatBot ?  "CHATBOT COMING SOON":`JOIN ${finalArr[1]} CHAT` }
                 </div>
               </div>
             </div>
diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
index 4f11a03..a4a7b3f 100644
--- a/frontend/next-env.d.ts
+++ b/frontend/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/frontend/pages/chat_bot.tsx b/frontend/pages/chat_bot.tsx
index 0798206..45bee3d 100644
--- a/frontend/pages/chat_bot.tsx
+++ b/frontend/pages/chat_bot.tsx
@@ -47,6 +47,12 @@ export default function Home() {
     }
   }, []);
 
+  return(
+    <>
+    <h1>Not Found 404 ! </h1>
+    </>
+  );
+
   return (
     <>
       <div className="main text-slate-950 bg-white w-full bg-contain ">
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
index 77ea60b..77cccda 100644
--- a/frontend/pages/index.tsx
+++ b/frontend/pages/index.tsx
@@ -10,6 +10,7 @@ export default function Home() {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [isChatBotModalOpen, setISChatBotModalOpen] = useState<boolean>(false);
   const [redirect, setRedirect] = useState<string>("");
+  const [isHoveringChatBot,setIsHoveringChatBot]=useState<boolean>(false);
 
   const openModal = (redirect:string) => {
     setIsModalOpen(true);
@@ -17,7 +18,8 @@ export default function Home() {
   };
 
   const openChatBotModal = () => {
-    setISChatBotModalOpen(true);
+    // setISChatBotModalOpen(true);
+    window.open("/404","_self");
   };
 
   const closeModal = () => {
@@ -74,10 +76,12 @@ export default function Home() {
                 <div
                   className="flex items-center justify-center py-4 w-full  px-8 rounded-full bg-customBlue text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-customBlue focus:ring-opacity-50 hover:cursor-pointer"
                   onClick={goToChatbot}
+                  onMouseEnter={() => setIsHoveringChatBot(true)}
+                  onMouseLeave={() => setIsHoveringChatBot(false)}
                 >
                   <p className="font-Roboto font-medium text-xl tracking-tighter flex gap-2">
                     <Image alt={"chat bot"} src={ChatBot} />
-                    TALK TO OUR CHATBOT
+                    {isHoveringChatBot ? "COMING SOON" : "TALK TO OUR CHATBOT"}
                   </p>
                 </div>
                 <div
@@ -91,7 +95,8 @@ export default function Home() {
                 </div>
                 <div
                   className="flex items-center justify-center py-4 w-full  px-8 rounded-full bg-customBlue text-white hover:bg-blue-600 focus:outline-none hover:cursor-pointer focus:ring-2 focus:ring-customBlue focus:ring-opacity-50"
-                  onClick={goToPublicChat}
+                  onClick={()=>window.open("/404", "_blank")}
+                  
                 >
                   <p className="font-Roboto font-medium text-xl tracking-tighter flex gap-2">
                     <Image alt={"slack logo"} src={SlackLogo} />