diff --git a/src/app/(panels)/suite/doctor/account/page.jsx b/src/app/(panels)/suite/doctor/account/page.jsx
index 01cb049..ff54128 100644
--- a/src/app/(panels)/suite/doctor/account/page.jsx
+++ b/src/app/(panels)/suite/doctor/account/page.jsx
@@ -7,17 +7,9 @@ import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Card, CardHeader, CardContent } from '@/components/ui/card';
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
-import { ChevronDown } from "lucide-react"
-
-import { PersonForm } from './PatientForm';
-
-import { useRouter } from 'next/navigation';
-
 const AccountPage = () => {
 	const { user } = useUser();
 	const [userData, setUserData] = useState(null);
-	const [patients, setPatients] = useState([]);
 
 	useEffect(() => {
 		if (user) {
@@ -72,33 +64,6 @@ const AccountPage = () => {
 					<Button onClick={handleRoleChange} className="mb-4">
 						Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
 					</Button>
-
-					{userData.role === 'caregiver' && (
-						<div>
-							<h2 className="text-xl font-bold mb-4">Patients</h2>
-							<ul className="mb-4">
-								{patients.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>
-											</div>
-											<CollapsibleTrigger asChild>
-												<Button variant="ghost" size="sm">
-													<ChevronDown className="h-4 w-4" />
-													<span className="sr-only">Toggle</span>
-												</Button>
-											</CollapsibleTrigger>
-										</div>
-										<CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
-											<PersonForm person={patient} />
-										</CollapsibleContent>
-									</Collapsible>
-								))}
-							</ul>
-						</div>
-					)}
 				</CardContent>
 			</Card>
 		</div>
diff --git a/src/app/(panels)/suite/doctor/dashboard/AppList.jsx b/src/app/(panels)/suite/doctor/dashboard/AppList.jsx
new file mode 100644
index 0000000..fb50e13
--- /dev/null
+++ b/src/app/(panels)/suite/doctor/dashboard/AppList.jsx
@@ -0,0 +1,33 @@
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Card, CardContent } from "@/components/ui/card"
+
+export function AppointmentList({ appointments }) {
+    return (
+        <Card>
+            <CardContent>
+                <Table>
+                    <TableCaption>A list of your upcoming appointments.</TableCaption>
+                    <TableHeader>
+                        <TableRow>
+                            <TableHead className="w-[100px]">ID</TableHead>
+                            <TableHead>Date</TableHead>
+                            <TableHead>Status</TableHead>
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {appointments.map((appointment) => {
+                            return (
+                                <TableRow key={appointment.id}>
+                                    <TableCell className="font-medium">{appointment.id}</TableCell>
+                                    <TableCell>{new Date(appointment.date).toLocaleString()}</TableCell>
+                                    <TableCell>{appointment.status}</TableCell>
+                                </TableRow>
+                            )
+                        })}
+                    </TableBody>
+                </Table>
+            </CardContent>
+        </Card>
+    )
+}
+
diff --git a/src/app/(panels)/suite/doctor/dashboard/page.jsx b/src/app/(panels)/suite/doctor/dashboard/page.jsx
index eb7ef22..445de82 100644
--- a/src/app/(panels)/suite/doctor/dashboard/page.jsx
+++ b/src/app/(panels)/suite/doctor/dashboard/page.jsx
@@ -1,32 +1,35 @@
 "use client"
 
 import { PatientTable } from "./PatientTable"
+import { AppointmentList } from "./AppList"
 
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import { useUser } from '@clerk/nextjs';
 
+import React from "react";  
+
 
 export default function Dashboard() {
 
     const router = useRouter();
-	const { user } = useUser();
-	const [userData, setUserData] = useState(null);
+    const { user } = useUser();
+    const [userData, setUserData] = useState(null);
 
-	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) {
         if (userData.role != "caregiver") {
             router.push("/suite/patient/dashboard");
         }
-	}
+    }
 
     const patients = [
         { id: 1, name: "John Doe", age: 30, lastVisit: "2024-10-01" },
@@ -34,11 +37,21 @@ export default function Dashboard() {
         { id: 3, name: "Sam Johnson", age: 40, lastVisit: "2024-10-05" },
     ];
 
+
+    const appointments = [
+        { id: 1, patientId: 1, date: "2025-01-27T09:00:00", status: "Scheduled" },
+        { id: 2, patientId: 2, date: "2025-01-27T10:30:00", status: "Scheduled" },
+        { id: 3, patientId: 3, date: "2025-01-27T14:00:00", status: "Scheduled" },
+        { id: 4, patientId: 4, date: "2025-01-28T11:00:00", status: "Scheduled" },
+        { id: 5, patientId: 5, date: "2025-01-28T15:30:00", status: "Scheduled" },
+    ]
+
     return (
         <div className="container mx-auto">
             <h1 className="text-3xl font-semibold mb-6">Dashboard</h1>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div className="h-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                 <PatientTable data={patients} />
+                <AppointmentList appointments={appointments} />
             </div>
         </div>
     )
diff --git a/src/app/(panels)/suite/doctor/account/PatientForm.tsx b/src/app/(panels)/suite/doctor/patient/PatientForm.tsx
similarity index 100%
rename from src/app/(panels)/suite/doctor/account/PatientForm.tsx
rename to src/app/(panels)/suite/doctor/patient/PatientForm.tsx
diff --git a/src/app/(panels)/suite/doctor/patient/page.jsx b/src/app/(panels)/suite/doctor/patient/page.jsx
new file mode 100644
index 0000000..1ff4180
--- /dev/null
+++ b/src/app/(panels)/suite/doctor/patient/page.jsx
@@ -0,0 +1,69 @@
+
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { useRouter } from "next/navigation";
+
+import axios from "axios";
+import { useUser } from "@clerk/nextjs";
+import { CardContent } from "@/components/ui/card";
+
+export default function Dashboard() {
+
+    const router = useRouter();
+    const { user } = useUser();
+	const [userData, setUserData] = useState(null);
+	const [patients, setPatients] = useState([]);
+
+    useEffect(() => {
+        if (user) {
+            axios.get(`/api/user?userId=${user.id}`).then(response => {
+                setUserData(response.data);
+            });
+        }
+    }, [user]);
+
+    if (userData) {
+        if (userData.role != "caregiver") {
+            router.push("/suite/patient/dashboard");
+        }
+    }
+
+    return (
+        <div className="container mx-auto">
+            <h1 className="text-3xl font-semibold mb-6">Patients</h1>
+            <div className="h-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <Card>
+                    <CardContent>
+                        {userData.role === 'caregiver' && (
+                            <div>
+                                <ul className="mb-4">
+                                    {patients.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>
+                                                </div>
+                                                <CollapsibleTrigger asChild>
+                                                    <Button variant="ghost" size="sm">
+                                                        <ChevronDown className="h-4 w-4" />
+                                                        <span className="sr-only">Toggle</span>
+                                                    </Button>
+                                                </CollapsibleTrigger>
+                                            </div>
+                                            <CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
+                                                <PersonForm person={patient} />
+                                            </CollapsibleContent>
+                                        </Collapsible>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                    </CardContent>
+                </Card>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index ac07830..161b9f9 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/(panels)/suite/doctor/dashboard/AppList.jsx", "src/app/(panels)/suite/doctor/patient/page.jsx"],
   "exclude": ["node_modules"]
 }