diff --git a/src/app/ui/pages/chat/chat.css b/src/app/ui/pages/chat/chat.css
index f5991d3e..b099a8db 100644
--- a/src/app/ui/pages/chat/chat.css
+++ b/src/app/ui/pages/chat/chat.css
@@ -6,7 +6,6 @@
     width: 51.25rem;
     outline: solid white;
     height: 3.1rem;
-    margin-right: 1.2rem;
     border-radius: 2.5rem;
     padding-left: 1rem;
 }
@@ -52,3 +51,37 @@
     margin-right: 2rem;
 }
 
+/* Add these styles to your existing styles or create a new CSS file */
+
+/* Chat container styles */
+.chat-container {
+    overflow-y:scroll;
+    max-height: 200px;
+    width: 46%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* User message styles */
+  .user-message {
+    background-color: #f58308;
+    color: #ffffff;
+    max-width: 70%;
+    align-self: flex-end;
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 8px;
+  }
+  
+  /* Bot message styles */
+  .bot-message {
+    background-color: #EAEAEA;
+    color: #333;
+    max-width: 70%;
+    align-self: flex-start;
+    border-radius: 10px;
+    padding: 10px;
+    margin-bottom: 8px;
+  }
+  
diff --git a/src/app/ui/pages/chat/chat.js b/src/app/ui/pages/chat/chat.js
index a8faed24..e960ad82 100644
--- a/src/app/ui/pages/chat/chat.js
+++ b/src/app/ui/pages/chat/chat.js
@@ -1,22 +1,93 @@
 "use client"
 import "./chat.css";
+import { useState } from "react";
 import { Grid, IconButton,Avatar,Tooltip,Typography} from "@mui/material";
 import { InfoOutlined} from "@material-ui/icons";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 
+const dummyData = [
+    {
+      "prompt": "Hii Anudesh",
+      "output": "Hello! How can I assist you today?"
+    },
+    {
+      "prompt": "What is a computer?",
+      "output": "Computer is an electronic device"
+    },
+    {
+      "prompt": "What is it used for?",
+      "output": "It is used for computation"
+    },
+    {
+      "prompt": "Thanks, any additional points?",
+      "output": "No"
+    }
+  ];
 
-export default function Chat()
-{
+
+const Chat = () =>{
+
+    const [inputValue, setInputValue] = useState('');
+    const [chatHistory, setChatHistory] = useState([]);
+    const [showChatContainer, setShowChatContainer] = useState(false);
     const router = useRouter();
-    return(
-        <>
-        
-        
-        <div className="w-100% h-100vh bg-white flex flex-col gap-2">
-            <div className="flex justify-between">
+    const handleButtonClick = () => {
+        if (inputValue) {
+          const response = dummyData.find(item => item.prompt === inputValue);
+          if (response) {
+            setChatHistory(prev => [...prev, { message: inputValue, isUser: true }, { message: response.output, isUser: false }]);
+          } else {
+            setChatHistory(prev => [...prev, { message: inputValue, isUser: true }, { message: "I'm sorry, I don't understand.", isUser: false }]);
+          }
+    
+          setInputValue('');
+          setShowChatContainer(true);
+        } else {
+          alert('Please provide a prompt.');
+        }
+      };
+
+    const renderChatHistory = () => {
+      const chatElements = [];
+      for (let index = 0; index < chatHistory.length; index++) {
+      const message = chatHistory[index];
+      const isUser = message.isUser;
+      const boxClassName = isUser ? "box1 flex w-[40vw] py-7 justify-start items-center space-x-6" : "box2 bg-orange-100 flex w-full py-7 justify-center items-center";
+
+        chatElements.push(
+          <div key={index} className={boxClassName}>
+            {isUser ? (
+              <>
+                <div>
+                  <Avatar />
+                </div>
+                <div>{message.message}</div>
+              </>
+            ) : (
+              <div className="w-[40vw] flex justify-start items-center space-x-6">
+                <img
+                  src="https://i.imgur.com/56Ut9oz.png"
+                  className="w-10 h-10"
+                  alt="Bot Avatar"
+                />
+                <div>{message.message}</div>
+              </div>
+            )}
+          </div>
+        );
+      }
+      return chatElements;
+    };
+
+    return( 
+        <>        
+        <div className="relative z-0 flex flex-col h-full w-full overflow-hidden">
+            <div className="flex justify-between w-full">
+            <div>
             <img src="https://i.imgur.com/56Ut9oz.png" className="mt-4 ml-10 h-[61px] w-[60px]" onClick={() => router.push("/home") }></img>
+            </div>
             <div className="flex">
                 <img src="https://i.imgur.com/FGmAyjz.png" className="w-6 h-6 mt-11"/>
                 <img src="https://i.imgur.com/A3Rcbqe.jpeg" className="w-6 h-6 mt-11 ml-4"/>
@@ -30,46 +101,77 @@ export default function Chat()
                 <Avatar
                     className="user-profile"
                 /> 
-            </div>      
-                     
+            </div>           
             </div>
-            <div className="w-[98%] h-[55rem] mx-auto bg-stone-600 bg-opacity-5 rounded-2xl flex flex-col items-center">
-                <div className="w-auto h-36 mt-20 mx-auto bg-white rounded-2xl flex flex-row gap-2">
-                    <img src="https://i.imgur.com/56Ut9oz.png" className="mt-6 mx-5 h-[6.2rem] w-[6rem]"></img>
-                    <div>
-                    <h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
-                    <p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
-                    </div> 
-                </div>
-                <div className="grid grid-cols-3 gap-9 mt-16">
-                    <div className="div-grid flex flex-col">
-                        <h3 className="grid-heading">What is Anudesh?</h3>
-                        <p className="text-xl mx-6">data leta hai multilingual(indic), will be used for model training for indic llms, 22, open source -  model and data</p>
-                    </div>
-                    <div className="div-grid">
-                        <h3 className="grid-heading">How can you help?</h3>
-                        <p className="text-xl mx-20 my-16">GIF</p>
-                    </div>
-                    <div className="div-grid">
-                        <h3 className="grid-heading">Why Contribute?</h3>
-                        <p className="text-xl mx-20 my-16">Graph</p>
-                    </div>
-                </div>
-
-                <div className="mt-48 flex">
-                    <input
-                       className="myInput"
-                       name=""
-                       placeholder="Enter a prompt here"
-                    /> 
-                    <img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-4"/>
-                </div>
+            <div className="w-[98%] h-full overflow-hidden mx-auto bg-stone-600 bg-opacity-5 rounded-2xl flex flex-col mt-4">
+                {showChatContainer ? 
+                    (<>
+                       <div className="w-auto h-36 mt-12 mx-auto bg-white rounded-2xl flex flex-row gap-2">
+                          <img src="https://i.imgur.com/56Ut9oz.png" className="my-4 mx-5 h-[6.2rem] w-[6rem]"></img>
+                          <div>
+                          <h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
+                          <p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
+                          </div> 
+                      </div>
+                       <div className="w-full flex items-center flex-col overflow-auto h-full">
+                        {renderChatHistory()}
+                        </div>
+                        <div className="w-auto mx-auto my-10 flex">
+                          <input
+                          className="myInput"
+                          value={inputValue}
+                          placeholder="Enter a prompt here"
+                          onChange={(e) => setInputValue(e.target.value)}
+                          />
+                          <IconButton
+                          onClick={handleButtonClick}
+                          >
+                          <img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-2" alt="Send Icon" />
+                          </IconButton>
+                        </div>
+                    </>):
+                    (<>
+                      <div className="w-auto h-36 mt-12 mx-auto bg-white rounded-2xl flex flex-row gap-2">
+                          <img src="https://i.imgur.com/56Ut9oz.png" className="mt-6 mx-5 h-[6.2rem] w-[6rem]"></img>
+                          <div>
+                          <h3 className="text-3xl text-orange-600 font-bold mt-8">Namaste</h3>
+                          <p className="text-sm text-[#6c5f5b] font-normal mr-16">Tell me what’s on your mind or pick a suggestion. I have limitations and won't always get it right, but your <br></br> feedback will help me to improve.</p>
+                          </div> 
+                      </div>
+                      <div className="w-auto mx-auto grid grid-cols-3 gap-9 mt-16">
+                          <div className="div-grid flex flex-col">
+                              <h3 className="grid-heading">What is Anudesh?</h3>
+                              <p className="text-xl mx-6">data leta hai multilingual(indic), will be used for model training for indic llms, 22, open source -  model and data</p>
+                          </div>
+                          <div className="div-grid">
+                              <h3 className="grid-heading">How can you help?</h3>
+                              <p className="text-xl mx-20 my-16">GIF</p>
+                          </div>
+                          <div className="div-grid">
+                              <h3 className="grid-heading">Why Contribute?</h3>
+                              <p className="text-xl mx-20 my-16">Graph</p>
+                          </div>
+                      </div>
+                      <div className="w-auto mx-auto mt-56 flex">
+                        <input
+                        className="myInput"
+                        value={inputValue}
+                        placeholder="Enter a prompt here"
+                        onChange={(e) => setInputValue(e.target.value)}
+                        />
+                        <IconButton
+                        onClick={handleButtonClick}
+                        >
+                        <img src="https://i.imgur.com/2sWOT6F.png" className=" w-5 h-4 mt-2" alt="Send Icon" />
+                        </IconButton>
+                      </div>
+                    </>)
+                    }
             </div>
         </div>
-        
-        
-        
 
         </>
-    )
-}
+    );
+};
+
+export default Chat;