diff --git a/src/app/(panels)/suite/doctor/patients/page.jsx b/src/app/(panels)/suite/doctor/patients/page.jsx
index a577d6e..3dbc4ae 100644
--- a/src/app/(panels)/suite/doctor/patients/page.jsx
+++ b/src/app/(panels)/suite/doctor/patients/page.jsx
@@ -15,6 +15,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
 import {PersonForm} from "./PatientForm";
 import { Card } from "@/components/ui/card";
 
+import { faker } from "@faker-js/faker";
 
 
 export default function PatientsDOC() {
@@ -36,11 +37,37 @@ export default function PatientsDOC() {
     }, [user]);
 
     if (userData) {
-        if (userData.role && userData.role != "caregiver") {
+        if (userData && userData.role != "caregiver") {
             router.push("/suite/patient/dashboard");
         }
     }
 
+    function generateFakePatients(count) {
+        return Array.from({ length: count }, () => ({
+            id: faker.string.uuid(),
+            name: faker.person.fullName(),
+            age: faker.number.int({ min: 18, max: 100 }),
+            gender: faker.helpers.arrayElement(["male", "female", "other"]),
+            bloodType: faker.helpers.arrayElement(["A+", "A-", "B+", "B-", "AB+", "AB-", "O+", "O-"]),
+            lastCheckup: faker.date.recent({ days: 90 }),
+            symptoms: faker.helpers.arrayElements(
+                ["Fever", "Cough", "Fatigue", "Shortness of breath", "Headache", "Nausea", "Dizziness", "Chest pain"],
+                { min: 0, max: 3 },
+            ),
+            vitalSigns: {
+                temperature: faker.number.float({ min: 36.1, max: 37.5, precision: 0.1 }),
+                heartRate: faker.number.int({ min: 60, max: 100 }),
+                bloodPressure: `${faker.number.int({ min: 90, max: 140 })}/${faker.number.int({ min: 60, max: 90 })}`,
+                respiratoryRate: faker.number.int({ min: 12, max: 20 }),
+            },
+        }))
+    }
+
+    let fakePatients = generateFakePatients(20);
+
+    // add two arrays together
+    let finalPatients = patients.concat(fakePatients);
+
     return (
         <div className="container mx-auto">
             <h1 className="text-3xl font-semibold mb-6">Patients</h1>
@@ -50,12 +77,13 @@ export default function PatientsDOC() {
                         {userData && userData.role === 'caregiver' && (
                             <div>
                                 <ul className="mb-4">
-                                    {patients.map(patient => (
+                                    {finalPatients.map(patient => (
                                         <Collapsible key={patient.id}>
                                             <div className="flex items-center justify-between p-2 bg-gray-100 dark:bg-neutral-800 rounded-t-lg">
                                                 <div>
                                                     <h2 className="text-lg font-semibold">{patient.name}</h2>
-                                                    <p className="text-sm text-gray-400">{patient.role}</p>
+                                                    <p className="text-sm text-gray-500 dark:text-neutral-400">Age: {patient.age}</p>
+                                                    <p className="text-sm text-gray-500 dark:text-neutral-400">Last Checkup: {new Date(patient.lastCheckup).toLocaleDateString()}</p>
                                                 </div>
                                                 <CollapsibleTrigger asChild>
                                                     <Button variant="ghost" size="sm">
diff --git a/src/app/(panels)/suite/patient/chat/page.jsx b/src/app/(panels)/suite/patient/chat/page.jsx
index e1cacae..dc09790 100644
--- a/src/app/(panels)/suite/patient/chat/page.jsx
+++ b/src/app/(panels)/suite/patient/chat/page.jsx
@@ -12,97 +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);
-        })
-        .catch((error) => {
-          console.error("Error fetching user data:", error);
-        });
-    }
-  }, [user]);
+	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]);
 
-  useEffect(() => {
-    if (userData && userData.role !== "patient") {
-      router.push("/suite/doctor/dashboard");
-    }
-  }, [userData, router]);
+	useEffect(() => {
+		if (userData && userData.role !== "patient") {
+			router.push("/suite/doctor/dashboard");
+		}
+	}, [userData, router]);
 
-  const handleSend = async () => {
-    if (!userQuery.trim()) return;
+	const handleSend = async () => {
+		if (!userQuery.trim()) return;
 
-    setLoading(true);
+		setLoading(true);
 
-    try {
-      const response = await axios.post("/api/chat", { query: userQuery });
+		try {
+			const response = await axios.post("/api/chat", { query: userQuery });
 
-      const botResponse = response.data?.answer || "No response from the bot.";
+			const botResponse = response.data?.answer || "No response from the bot.";
 
-      setChatHistory((prevHistory) => [
-        ...prevHistory,
-        { type: "user", text: userQuery },
-        { type: "bot", text: botResponse },
-      ]);
+			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);
-    }
-  };
+			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 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>
-  );
+	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>
+			</div>
+		</div>
+	);
 }