diff --git a/anonymousVoting/clientAnonymousVoting/public/assets/explorer.png b/anonymousVoting/clientAnonymousVoting/public/assets/explorer.png
new file mode 100644
index 00000000..e69de29b
diff --git a/anonymousVoting/clientAnonymousVoting/public/assets/image.png b/anonymousVoting/clientAnonymousVoting/public/assets/image.png
new file mode 100644
index 00000000..418d600e
Binary files /dev/null and b/anonymousVoting/clientAnonymousVoting/public/assets/image.png differ
diff --git a/anonymousVoting/clientAnonymousVoting/src/App.js b/anonymousVoting/clientAnonymousVoting/src/App.js
index 392a179e..952ecd75 100644
--- a/anonymousVoting/clientAnonymousVoting/src/App.js
+++ b/anonymousVoting/clientAnonymousVoting/src/App.js
@@ -1,4 +1,5 @@
 import Navbar from './components/Navbar';
+import Explorer from "./components/Explorer";
 import { BrowserRouter as Router, Route, Routes,Navigate } from 'react-router-dom'
 import 'bootstrap/dist/css/bootstrap.css';
 
@@ -31,6 +32,7 @@ function App() {
     // }else{
       ret = 
       <Routes>
+        <Route path="/explorer" element={<Explorer />} />
         <Route path="/" element={<Navigate to="/auth" />} />
         <Route path="/auth" element={<Register/>} />
         <Route path="/voting/:id" element={<VotingPage/>} />
diff --git a/anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js b/anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js
index 0cbecd89..6d5c6e02 100644
--- a/anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js
+++ b/anonymousVoting/clientAnonymousVoting/src/components/ConnectWallet.js
@@ -5,7 +5,6 @@ import { ethers } from 'ethers';
 
 import { useDispatch, useSelector } from 'react-redux'
 import { selectNetwork, selectCorrectNetwork, setNetwork, setCorrectNetwork } from '../store/home.slice';
-
 import Modal from 'react-bootstrap/Modal';
 
 
@@ -124,4 +123,4 @@ const ConnectWallet = () => {
     );
 }
  
-export default ConnectWallet;
\ No newline at end of file
+export default ConnectWallet;
diff --git a/anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js b/anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js
index f5e4ed38..64218f8a 100644
--- a/anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js
+++ b/anonymousVoting/clientAnonymousVoting/src/components/CreateProcessPage.js
@@ -5,8 +5,8 @@ import styles from './CreateProcessPage.module.css';
 import {ethers} from 'ethers';
 
 //web3 imports
-import { deployVotingProcess, deployTestContract, getTestContract } from '../web3/contracts'
-import { useState, useEffect, useRef } from 'react';
+import { deployVotingProcess} from '../web3/contracts'
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 
@@ -27,35 +27,44 @@ const CreateProcess = () => {
     const [open, setOpen] = useState(false);
     const [transactionResult, setTransactionResult] = useState(null);
 
-    const refValue = useRef(false);
+    // const refValue = useRef(false);
     
-    const createProcess = async (e) => {
-        e.preventDefault();
-        console.log("name: ", name);
-        //format proposals
-        let proposalArray = formatProposals(proposals);
-        //check form inputs
-        if(!isFormValid()){
-            window.alert("Form is not valid");
-            return;
-        }
+   const createProcess = async (e) => {
+    e.preventDefault();
+
+    if (!isFormValid()) {
+        window.alert("Form is not valid");
+        return;
+    }
+
+    try {
         setPending(true);
-        refValue.current = true;
-        //deploy new process contract
-        const result = await deployVotingProcess(name, description, proposalArray,1000000,1000000);
+
+        const proposalArray = formatProposals(proposals);
+        const result = await deployVotingProcess(
+            name,
+            description,
+            proposalArray,
+            1000000,
+            1000000
+        );
+
         setTransactionResult(result);
+        setShow(true);
 
-        refValue.current = false;
+    } catch (err) {
+        console.error(err);
+        window.alert("Transaction failed");
+    } finally {
         setPending(false);
-        
-        setShow(true);
     }
+};
+
 
     const isFormValid = () => {
-        if(proposals < 2)
-            return false;
-        return true;
-    }
+    return proposals.split(',').length >= 2;
+};
+
 
     const formatProposals = (input) => {
         let proposals = input.split(',');
@@ -67,9 +76,6 @@ const CreateProcess = () => {
     }
 
 
-    useEffect(() => {
-        // setPending(!pending);
-    }, [pending])
 
     return (  
         <div >
@@ -105,11 +111,27 @@ const CreateProcess = () => {
                     />
                 </div>
                 <div>
-                    <button className="baseButton">Create new process</button>
+                    <button
+  className="baseButton"
+  type="submit"
+  disabled={pending}
+>
+  {pending ? (
+    <>
+      <Spinner
+        animation="border"
+        size="sm"
+        style={{ marginRight: "8px" }}
+      />
+      Creating...
+    </>
+  ) : (
+    "Create new process"
+  )}
+</button>
+
                 </div>
-                {refValue.current == true && <div style={{marginTop: "2em"}}>
-                    <Spinner animation="border" />
-                </div>}
+                
             </form>
             <Modal show={show} onHide={handleClose}>
                 <Modal.Header closeButton>
diff --git a/anonymousVoting/clientAnonymousVoting/src/components/Explorer.js b/anonymousVoting/clientAnonymousVoting/src/components/Explorer.js
new file mode 100644
index 00000000..5f0038cb
--- /dev/null
+++ b/anonymousVoting/clientAnonymousVoting/src/components/Explorer.js
@@ -0,0 +1,10 @@
+function Explorer() {
+  return (
+    <div style={{ padding: "20px" }}>
+      <h2>Explorer</h2>
+      <p>Blockchain explorer coming soon.</p>
+    </div>
+  );
+}
+
+export default Explorer;
\ No newline at end of file
diff --git a/anonymousVoting/clientAnonymousVoting/src/components/Navbar.js b/anonymousVoting/clientAnonymousVoting/src/components/Navbar.js
index 1f9f1d7a..5d4e5b61 100644
--- a/anonymousVoting/clientAnonymousVoting/src/components/Navbar.js
+++ b/anonymousVoting/clientAnonymousVoting/src/components/Navbar.js
@@ -13,9 +13,28 @@ function Navbar({header, infoText, pictureUrl}) {
             </div>
 
             <div className="navbarMenuOption">
-                <img src="/assets/settings.png" className="navbarMenuIcon navbarMenuLeft" alt="settings"/>
-                <Link to="/"><img src="/assets/logout.png" className="navbarMenuIcon" alt="logout"/></Link>
-            </div>
+    <img
+        src="/assets/settings.png"
+        className="navbarMenuIcon navbarMenuLeft"
+        alt="settings"
+    />
+
+    <Link to="/explorer">
+        <img
+            src="/assets/explorer.png"
+            className="navbarMenuIcon"
+            alt="explorer"
+        />
+    </Link>
+
+    <Link to="/">
+        <img
+            src="/assets/logout.png"
+            className="navbarMenuIcon"
+            alt="logout"
+        />
+    </Link>
+</div>
         </nav>
 	)
 }
diff --git a/anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js b/anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js
index bd2f8af4..126137b8 100644
--- a/anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js
+++ b/anonymousVoting/clientAnonymousVoting/src/components/modals/AddCandidateModal.js
@@ -2,17 +2,20 @@ import { useState } from 'react';
 import { Flex, Modal, Button, Card } from "rimble-ui";
 import { ethers } from "ethers";
 import ElectionOrganiser from "../../build/ElectionOrganizer.json";
-import {successtoast, dangertoast } from '../utilities/Toasts';
+import { successtoast, dangertoast } from '../utilities/Toasts';
 import { toast } from "react-toastify";
-import {addProposal} from '../../web3/contracts';
+import { addProposal } from '../../web3/contracts';
 
 export function AddCandidateModal({ electionId }) {
     const [isOpen, setIsOpen] = useState(false);
+
     const [candidateDetail, setCandidateDetail] = useState({
         name: '',
         description: ''
     });
 
+    // ADDED: terms acceptance state
+    const [acceptedTerms, setAcceptedTerms] = useState(false);
 
     const handleCandidateDetailChange = (e) => {
         const { name, value } = e.target;
@@ -20,34 +23,39 @@ export function AddCandidateModal({ electionId }) {
             ...candidateDetail,
             [name]: value
         });
-    }
-    
+    };
 
     const handleSubmitCandidate = async (e) => {
-        let id ;
         e.preventDefault();
+
+        // Enforce terms acceptance
+        if (!acceptedTerms) {
+            toast.error("You must accept the Terms & Conditions");
+            return;
+        }
+
         try {
-          
-
-            let tx = await addProposal(electionId,ethers.utils.toUtf8Bytes(candidateDetail.name.trim()));
-           
-              await tx.wait();
-              console.log(tx);
-              
-            //   successtoast(id, "Candidate Added Successfully")
-              
-      
-            
-          } catch(err) {
-            dangertoast(id ,"Candidate Addition Failed")
+            let tx = await addProposal(
+                electionId,
+                ethers.utils.toUtf8Bytes(candidateDetail.name.trim())
+            );
+
+            await tx.wait();
+            console.log(tx);
+
+            // successtoast("Candidate Added Successfully")
+            setIsOpen(false);
+            setAcceptedTerms(false);
+        } catch (err) {
+            dangertoast("Candidate Addition Failed");
             console.log(err);
-          }
-        
-    }
+        }
+    };
 
     const closeModal = e => {
         e.preventDefault();
         setIsOpen(false);
+        setAcceptedTerms(false);
     };
 
     const openModal = e => {
@@ -57,14 +65,14 @@ export function AddCandidateModal({ electionId }) {
 
     return (
         <div>
-            <div onClick={openModal} style={{cursor: "pointer"}}>
-                <font size = '2'>Add Candidate</font>
+            <div onClick={openModal} style={{ cursor: "pointer" }}>
+                <font size='2'>Add Candidate</font>
             </div>
-            
+
             <Modal isOpen={isOpen}>
-                <Card width={"90%"} height={"max-content"} p={0} style={{maxWidth: "500px"}}>
+                <Card width={"90%"} height={"max-content"} p={0} style={{ maxWidth: "500px" }}>
                     <Button.Text
-                        style={{margin: "0px"}}
+                        style={{ margin: "0px" }}
                         icononly
                         icon={"Close"}
                         color={"moon-gray"}
@@ -76,52 +84,66 @@ export function AddCandidateModal({ electionId }) {
                         onClick={closeModal}
                     />
 
-                    <div style={{margin: "10px", maxWidth: "700px", width: "90%"}}>
+                    <div style={{ margin: "10px", maxWidth: "700px", width: "90%" }}>
                         <h5>Add candidates</h5>
-
-                        <br/>
+                        <br />
 
                         <div>
-                            <b>Canidate Name</b>
-                            <br/>
-                            
-                            <input 
-                                className="form-control" 
+                            <b>Candidate Name</b>
+                            <br />
+
+                            <input
+                                className="form-control"
                                 placeholder="Name of the candidate"
                                 name="name"
                                 value={candidateDetail.name}
                                 onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
+                                style={{ marginTop: "15px" }}
                             />
                             <br /><br />
 
-                            <b>Canidate Description</b>
-                            <br/>
-                            
+                            <b>Candidate Description</b>
+                            <br />
+
                             <textarea
-                                className="form-control" 
-                                placeholder="Name of the candidate"
+                                className="form-control"
+                                placeholder="Description of the candidate"
                                 name="description"
                                 rows={6}
                                 value={candidateDetail.description}
                                 onChange={handleCandidateDetailChange}
-                                style={{marginTop: "15px"}}
-                            /> 
-                            
+                                style={{ marginTop: "15px" }}
+                            />
+
                             <br /><br />
+
+                            <div>
+                                <label style={{ cursor: "pointer" }}>
+                                    <input
+                                        type="checkbox"
+                                        checked={acceptedTerms}
+                                        onChange={(e) => setAcceptedTerms(e.target.checked)}
+                                        style={{ marginRight: "8px" }}
+                                    />
+                                    I accept the Terms & Conditions
+                                </label>
+                            </div>
                         </div>
                     </div>
-        
-                    <Flex
-                        px={4}
-                        py={3}
-                        justifyContent={"flex-end"}
-                    >
+
+                    <Flex px={4} py={3} justifyContent={"flex-end"}>
                         <Button.Outline onClick={closeModal}>Cancel</Button.Outline>
-                        <Button ml={3} type="submit" onClick={handleSubmitCandidate}>Confirm</Button>
+                        <Button
+                            ml={3}
+                            type="submit"
+                            onClick={handleSubmitCandidate}
+                            disabled={!acceptedTerms}
+                        >
+                            Confirm
+                        </Button>
                     </Flex>
                 </Card>
             </Modal>
         </div>
     );
-}
\ No newline at end of file
+}
diff --git a/chatbot/app.py b/chatbot/app.py
index 7227e6b5..acf119a3 100644
--- a/chatbot/app.py
+++ b/chatbot/app.py
@@ -2,6 +2,7 @@
 import json
 import torch
 import torch.nn as nn
+import os
 from flask import Flask, request, jsonify
 from flask_cors import CORS
 from os.path import dirname, abspath, join
@@ -32,14 +33,15 @@ def forward(self, x):
         return x
 
 app = Flask(__name__)
-CORS(app) 
+CORS(app)
+
 device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
 
 with open('intents.json', 'r') as json_data:
     intents = json.load(json_data)
 
 FILE = "data.pth"
-data = torch.load(FILE,weights_only=True)
+data = torch.load(FILE, weights_only=True)
 
 input_size = data["input_size"]
 hidden_size = data["hidden_size"]
@@ -50,7 +52,7 @@ def forward(self, x):
 
 model = NeuralNet(input_size, hidden_size, output_size).to(device)
 model.load_state_dict(model_state)
-model.eval() 
+model.eval()
 
 bot_name = "Agora"
 
@@ -60,17 +62,14 @@ def chat():
         request_data = request.get_json()
         user_message = request_data.get('message', '')
 
-        # Tokenize and process the message
         sentence = tokenize(user_message)
-        X = bag_of_words(sentence, data['all_words']).unsqueeze(0).to(device)
+        X = bag_of_words(sentence, all_words).unsqueeze(0).to(device)
 
-        # Make prediction
         output = model(X)
         _, predicted = torch.max(output, dim=1)
-        tag = data['tags'][predicted.item()]
+        tag = tags[predicted.item()]
         prob = torch.softmax(output, dim=1)[0][predicted.item()]
 
-        # Determine response
         if prob.item() > 0.75:
             for intent in intents['intents']:
                 if tag == intent["tag"]:
@@ -87,4 +86,5 @@ def chat():
         return jsonify({"error": str(e)})
 
 if __name__ == '__main__':
-    app.run(host="0.0.0.0", port=5000,debug=True)
+    debug_mode = os.getenv("FLASK_DEBUG", "false").lower() == "true"
+    app.run(host="0.0.0.0", port=5000, debug=debug_mode)
diff --git a/chatbot/intents.json b/chatbot/intents.json
index e55d26ea..5cd0ec1c 100644
--- a/chatbot/intents.json
+++ b/chatbot/intents.json
@@ -1,4 +1,4 @@
-{
+      {
   "intents": [
     {
       "tag": "greeting",
@@ -454,4 +454,4 @@
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/client/app/components/ChatBot/ChatBot.tsx b/client/app/components/ChatBot/ChatBot.tsx
index 32bda8f6..f0aa63c7 100644
--- a/client/app/components/ChatBot/ChatBot.tsx
+++ b/client/app/components/ChatBot/ChatBot.tsx
@@ -3,124 +3,192 @@
 import React, { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ArrowUpIcon, ChatBubbleLeftRightIcon } from "@heroicons/react/24/solid";
-import { XMarkIcon } from "@heroicons/react/24/outline"; // Corrected the import for XMarkIcon
+import { XMarkIcon } from "@heroicons/react/24/outline";
 
+/* ------------------ TYPES ------------------ */
 interface Message {
   content: string;
   role: "assistant" | "user";
 }
 
+interface Intent {
+  tag: string;
+  patterns: string[];
+  responses: string[];
+}
+
+/* ------------------ INTENTS ------------------ */
+const intents: Intent[] = [
+  {
+    tag: "greeting",
+    patterns: ["hi", "hello", "hey", "good morning", "good evening"],
+    responses: [
+      "Hello! 👋 How can I help you today?",
+      "Hi there! What would you like to know?",
+    ],
+  },
+  {
+    tag: "voting",
+    patterns: ["vote", "voting", "how to vote", "cast vote"],
+    responses: [
+      "You can vote by selecting an active election and submitting your choice securely.",
+      "Voting is anonymous and blockchain-secured on Agora.",
+    ],
+  },
+  {
+    tag: "blockchain",
+    patterns: ["blockchain", "security", "secure", "decentralized"],
+    responses: [
+      "Agora uses blockchain to ensure transparency and immutability.",
+      "Blockchain guarantees vote integrity and prevents tampering.",
+    ],
+  },
+  {
+    tag: "fallback",
+    patterns: [],
+    responses: [
+      "Sorry, I didn’t understand that. Could you rephrase?",
+      "I'm still learning. Try asking about voting or blockchain.",
+    ],
+  },
+];
+
+/* ------------------ UTIL ------------------ */
+const getBotReply = (message: string): string => {
+  const lowerMsg = message.toLowerCase();
+
+  for (const intent of intents) {
+    for (const pattern of intent.patterns) {
+      if (lowerMsg.includes(pattern)) {
+        return intent.responses[
+          Math.floor(Math.random() * intent.responses.length)
+        ];
+      }
+    }
+  }
+
+  const fallback = intents.find((i) => i.tag === "fallback");
+  return fallback
+    ? fallback.responses[Math.floor(Math.random() * fallback.responses.length)]
+    : "Sorry, something went wrong.";
+};
+
+/* ------------------ COMPONENT ------------------ */
 const ChatBot: React.FC = () => {
-  const [messages, setMessages] = useState([
+  const [messages, setMessages] = useState<Message[]>([
     {
-      content: "Greetings! I'm here to help with any blockchain questions you have",
+      content: "Greetings! I'm here to help with Agora voting questions.",
       role: "assistant",
     },
   ]);
-  const [inputMessage, setInputMessage] = useState<string>("");
-  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [inputMessage, setInputMessage] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [isTyping, setIsTyping] = useState(false);
   const messageEndRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    messageEndRef.current?.scrollIntoView({
-      behavior: "smooth",
-      block: "end",
-    });
-  }, [messages]);
+    messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!inputMessage.trim()) return;
 
-    const newMessage: Message = { content: inputMessage, role: "user" };
-    setMessages((prevMessages) => [...prevMessages, newMessage]);
+    const userMessage: Message = {
+      content: inputMessage,
+      role: "user",
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
     setInputMessage("");
-    await getReply(inputMessage);
-  };
+    setIsTyping(true);
 
-  const getReply = async (value: string) => {
-    try {
-      const response = await fetch("/api/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: value }),
-      });
-      const data = await response.json();
-      const reply: Message = { content: data.message, role: "assistant" };
-      setMessages((prevMessages) => [...prevMessages, reply]);
-    } catch (error) {
-      console.error("Error:", error);
-    }
+    setTimeout(() => {
+      const botReply: Message = {
+        content: getBotReply(userMessage.content),
+        role: "assistant",
+      };
+      setMessages((prev) => [...prev, botReply]);
+      setIsTyping(false);
+    }, 800);
   };
 
   return (
     <div className="fixed bottom-4 right-4 z-50">
-      <motion.div initial={false} animate={isOpen ? "open" : "closed"} className="relative">
-        <motion.button
-          whileHover={{ scale: 1.1 }}
-          whileTap={{ scale: 0.95 }}
-          onClick={() => setIsOpen(!isOpen)}
-          className="bg-blue-600 text-white p-4 rounded-full shadow-lg"
-        >
-          <ChatBubbleLeftRightIcon className="w-6 h-6" />
-        </motion.button>
-
-        <AnimatePresence>
-          {isOpen && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.95, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.95, y: 20 }}
-              transition={{ duration: 0.2 }}
-              className="absolute bottom-16 right-0 w-[280px] xs:w-[320px] sm:w-[350px] md:w-[380px] h-[450px] bg-white rounded-lg shadow-xl overflow-hidden flex flex-col"
-            >
-              <div className="bg-blue-600 text-white p-3 flex items-center justify-between">
-                <h3 className="font-semibold">Agora Chatbot</h3>
-                <button
-                  onClick={() => setIsOpen(false)} // Close chatbot on click
-                  className="text-white focus:outline-none"
+      <motion.button
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={() => setIsOpen(!isOpen)}
+        className="bg-blue-600 text-white p-4 rounded-full shadow-lg"
+      >
+        <ChatBubbleLeftRightIcon className="w-6 h-6" />
+      </motion.button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            className="absolute bottom-16 right-0 w-[360px] h-[450px] bg-white rounded-lg shadow-xl flex flex-col overflow-hidden"
+          >
+            <div className="bg-blue-600 text-white p-3 flex justify-between items-center">
+              <span className="font-semibold">Agora Chatbot</span>
+              <button onClick={() => setIsOpen(false)}>
+                <XMarkIcon className="w-6 h-6" />
+              </button>
+            </div>
+
+            <div className="flex-1 p-3 overflow-y-auto space-y-3">
+              {messages.map((msg, i) => (
+                <div
+                  key={i}
+                  className={`flex ${
+                    msg.role === "assistant"
+                      ? "justify-start"
+                      : "justify-end"
+                  }`}
                 >
-                  <XMarkIcon className="w-6 h-6" />
-                </button>
-              </div>
-
-              <div className="flex-grow overflow-auto p-3 space-y-3">
-                {messages.map((msg, index) => (
-                  <motion.div
-                    key={index}
-                    initial={{ opacity: 0, y: 20 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.3 }}
-                    className={`flex ${msg.role === "assistant" ? "justify-start" : "justify-end"}`}
+                  <div
+                    className={`px-3 py-2 rounded-lg max-w-[80%] text-sm ${
+                      msg.role === "assistant"
+                        ? "bg-gray-200 text-gray-800"
+                        : "bg-blue-600 text-white"
+                    }`}
                   >
-                    <div
-                      className={`max-w-[85%] p-2.5 rounded-lg text-sm ${msg.role === "assistant" ? "bg-gray-200 text-gray-800" : "bg-blue-600 text-white"}`}
-                    >
-                      {msg.content}
-                    </div>
-                  </motion.div>
-                ))}
-                <div ref={messageEndRef} />
-              </div>
-
-              <form onSubmit={handleSubmit} className="p-3 bg-gray-100">
-                <div className="flex items-center gap-2">
-                  <input
-                    type="text"
-                    value={inputMessage}
-                    onChange={(e) => setInputMessage(e.target.value)}
-                    placeholder="Type your message..."
-                    className="flex-grow px-3 py-2 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                  />
-                  <button type="submit" className="bg-blue-600 text-white p-2 rounded-full">
-                    <ArrowUpIcon className="w-5 h-5" />
-                  </button>
+                    {msg.content}
+                  </div>
                 </div>
-              </form>
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </motion.div>
+              ))}
+
+              {isTyping && (
+                <div className="flex justify-start">
+                  <div className="bg-gray-200 px-3 py-2 rounded-lg text-sm animate-pulse">
+                    Typing...
+                  </div>
+                </div>
+              )}
+
+              <div ref={messageEndRef} />
+            </div>
+
+            <form
+              onSubmit={handleSubmit}
+              className="p-3 bg-gray-100 flex gap-2"
+            >
+              <input
+                value={inputMessage}
+                onChange={(e) => setInputMessage(e.target.value)}
+                placeholder="Type your message..."
+                className="flex-1 px-3 py-2 rounded-full text-sm focus:outline-none"
+              />
+              <button className="bg-blue-600 text-white p-2 rounded-full">
+                <ArrowUpIcon className="w-5 h-5" />
+              </button>
+            </form>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 };
diff --git a/client/package-lock.json b/client/package-lock.json
index a3baa66c..10c3dab7 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -3955,6 +3955,126 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nextui-org/theme": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/@nextui-org/theme/-/theme-2.2.6.tgz",
@@ -16583,126 +16703,6 @@
           "optional": true
         }
       }
-    },
-    "node_modules/@next/swc-darwin-x64": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
-      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
-      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
-      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
-      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
-      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
-      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
-      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
-      "cpu": [
-        "ia32"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
-      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }