diff --git a/src/app/(panels)/suite/patient/chat/page.jsx b/src/app/(panels)/suite/patient/chat/page.jsx
index 878feab..c696e92 100644
--- a/src/app/(panels)/suite/patient/chat/page.jsx
+++ b/src/app/(panels)/suite/patient/chat/page.jsx
@@ -13,42 +13,86 @@ import { useUser } from "@clerk/nextjs";
 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 { 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]);
+    useEffect(() => {
+        if (user) {
+            axios.get(`/api/user?userId=${user.id}`).then(response => {
+                setUserData(response.data);
+            });
+        }
+    }, [user]);
 
-	if (userData) {
-        if (userData.role != "patient") {
+    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 }),
+        });
+
+        const data = await response.json();
+
+        setChatHistory([
+            ...chatHistory,
+            { type: 'user', text: userQuery },
+            { type: 'bot', text: data.answer },
+        ]);
+
+        setUserQuery('');
+        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">
-                                <Message avatarUrl="/vercel.svg" message="Hello, how can I assist you today?" sender="Dr. Smith" />
-                                <Message avatarUrl="/vercel.svg" message="I have some questions about my medication." sender="You" />
-                            </div>
-                            <div className="flex items-center">
-                                <Input id="message" placeholder="Type your message here..." className="flex-grow mx-0 rounded-none" />
-                                <Button className="mx-0 rounded-none">Send</Button>
-                            </div>
+                        <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>
             </div>
         </div>
     )
-}
\ No newline at end of file
+}
diff --git a/src/app/api/chat/route.js b/src/app/api/chat/route.js
new file mode 100644
index 0000000..fd19ce9
--- /dev/null
+++ b/src/app/api/chat/route.js
@@ -0,0 +1,20 @@
+import { InferenceAPI } from '@huggingface/inference';
+
+const hfAPI = new InferenceAPI({ apiKey: process.env.HUGGING_FACE_API_KEY });
+
+export default async function handler(req, res) {
+  if (req.method === 'POST') {
+    try {
+      const { query } = req.body;
+
+      const response = await hfAPI.query('m42-health/Llama3-Med42-8B', { inputs: { text: query } });
+
+      res.status(200).json({ answer: response.data[0].generated_text });
+    } catch (error) {
+      console.error(error);
+      res.status(500).json({ error: 'Error generating response' });
+    }
+  } else {
+    res.status(405).json({ error: 'Method Not Allowed' });
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
index ac07830..34c66d8 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx", "src/app/api/chat/route.js"],
   "exclude": ["node_modules"]
 }