diff --git a/src/app/(panels)/suite/patient/chat/page.jsx b/src/app/(panels)/suite/patient/chat/page.jsx
index c696e92..e1cacae 100644
--- a/src/app/(panels)/suite/patient/chat/page.jsx
+++ b/src/app/(panels)/suite/patient/chat/page.jsx
@@ -1,12 +1,10 @@
-"use client"
+"use client";
 
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
-import { Message } from "@/components/panel-ui/patient/app-chat"
-import { Input } from "@/components/ui/input"
-
-import { Card, CardContent } from "@/components/ui/card"
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Message } from "@/components/panel-ui/patient/app-chat";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
 
 import { useRouter } from "next/navigation";
 import { useUser } from "@clerk/nextjs";
@@ -14,85 +12,97 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 
 export default function Chat() {
-    const router = useRouter();
-    const { user } = useUser();
-    const [userData, setUserData] = useState(null);
-    const [userQuery, setUserQuery] = useState('');
-    const [chatHistory, setChatHistory] = useState<{ type: 'user' | 'bot', text: string }>([]);
-    const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const { user } = useUser();
+  const [userData, setUserData] = useState(null);
+  const [userQuery, setUserQuery] = useState("");
+  const [chatHistory, setChatHistory] = useState<
+    { type: "user" | "bot", text: string }
+  >([]);
+  const [loading, setLoading] = useState(false);
 
-    useEffect(() => {
-        if (user) {
-            axios.get(`/api/user?userId=${user.id}`).then(response => {
-                setUserData(response.data);
-            });
-        }
-    }, [user]);
-
-    if (userData) {
-        if (userData.role !== "patient") {
-            router.push("/suite/doctor/dashboard");
-        }
-    }
-
-    const handleSend = async () => {
-        if (!userQuery.trim()) return;
-
-        setLoading(true);
-        const response = await fetch('/api/chat', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ query: userQuery }),
+  useEffect(() => {
+    if (user) {
+      axios
+        .get(`/api/user?userId=${user.id}`)
+        .then((response) => {
+          setUserData(response.data);
+        })
+        .catch((error) => {
+          console.error("Error fetching user data:", error);
         });
+    }
+  }, [user]);
 
-        const data = await response.json();
+  useEffect(() => {
+    if (userData && userData.role !== "patient") {
+      router.push("/suite/doctor/dashboard");
+    }
+  }, [userData, router]);
 
-        setChatHistory([
-            ...chatHistory,
-            { type: 'user', text: userQuery },
-            { type: 'bot', text: data.answer },
-        ]);
+  const handleSend = async () => {
+    if (!userQuery.trim()) return;
 
-        setUserQuery('');
-        setLoading(false);
-    };
+    setLoading(true);
 
-    return (
-        <div className="container mx-auto">
-            <div className="grid gap-4">
-                <Card>
-                    <CardContent className="space-y-4 p-4">
-                        <div className="block items-center">
-                            {chatHistory.map((msg, idx) => (
-                                <Message 
-                                    key={idx} 
-                                    avatarUrl="/vercel.svg" 
-                                    message={msg.text} 
-                                    sender={msg.type === 'user' ? "You" : "Bot"} 
-                                />
-                            ))}
-                        </div>
-                        <div className="flex items-center">
-                            <Input 
-                                id="message" 
-                                placeholder="Ask a medical question" 
-                                value={userQuery}
-                                onChange={(e) => setUserQuery(e.target.value)}
-                                className="flex-grow mx-0 rounded-none" 
-                            />
-                            <Button 
-                                className="mx-0 rounded-none" 
-                                onClick={handleSend} 
-                                disabled={loading}
-                            >
-                                {loading ? 'Loading...' : 'Send'}
-                            </Button>
-                        </div>
-                    </CardContent>
-                </Card>
+    try {
+      const response = await axios.post("/api/chat", { query: userQuery });
+
+      const botResponse = response.data?.answer || "No response from the bot.";
+
+      setChatHistory((prevHistory) => [
+        ...prevHistory,
+        { type: "user", text: userQuery },
+        { type: "bot", text: botResponse },
+      ]);
+
+      setUserQuery("");
+    } catch (error) {
+      console.error("Error sending message:", error);
+      setChatHistory((prevHistory) => [
+        ...prevHistory,
+        { type: "user", text: userQuery },
+        { type: "bot", text: "An error occurred while processing your request." },
+      ]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto">
+      <div className="grid gap-4">
+        <Card>
+          <CardContent className="space-y-4 p-4">
+            <div className="block items-center">
+              {chatHistory.map((msg, idx) => (
+                <Message
+                  key={idx}
+                  avatarUrl="/vercel.svg"
+                  message={msg.text}
+                  sender={msg.type === "user" ? "You" : "Bot"}
+                />
+              ))}
             </div>
-        </div>
-    )
+            <div className="flex items-center">
+              <Input
+                id="message"
+                placeholder="Ask a medical question"
+                value={userQuery}
+                onChange={(e) => setUserQuery(e.target.value)}
+                className="flex-grow mx-0 rounded-none"
+              />
+              <Button
+                className="mx-0 rounded-none"
+                onClick={handleSend}
+                disabled={loading}
+              >
+                {loading ? "Loading..." : "Send"}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
 }