diff --git a/src/app/(panels)/suite/doctor/patients/page.jsx b/src/app/(panels)/suite/doctor/patients/page.jsx
index 161aae5..202f8fa 100644
--- a/src/app/(panels)/suite/doctor/patients/page.jsx
+++ b/src/app/(panels)/suite/doctor/patients/page.jsx
@@ -12,7 +12,7 @@ import { CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { ChevronDown } from "lucide-react";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import {PersonForm} from "./PatientForm";
+import { PersonForm } from "./PatientForm";
 import { Card } from "@/components/ui/card";
 
 import { faker } from "@faker-js/faker";
@@ -22,17 +22,17 @@ export default function PatientsDOC() {
 
     const router = useRouter();
     const { user } = useUser();
-	const [userData, setUserData] = useState(null);
-	const [patients, setPatients] = useState([]);
+    const [userData, setUserData] = useState(null);
+    const [patients, setPatients] = useState([]);
 
     useEffect(() => {
         if (user) {
-			axios.get(`/api/user?userId=${user.id}`).then(response => {
-				setUserData(response.data);
-				if (response.data.role === 'caregiver') {
-					axios.get('/api/patients').then(res => setPatients(res.data));
-				}
-			});
+            axios.get(`/api/user?userId=${user.id}`).then(response => {
+                setUserData(response.data);
+                if (response.data.role === 'caregiver') {
+                    axios.get('/api/patients').then(res => setPatients(res.data));
+                }
+            });
         }
     }, [user]);
 
@@ -71,37 +71,33 @@ export default function PatientsDOC() {
     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 && userData.role === 'caregiver' && (
-                            <div className="space-y-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                                <div className="mb-4">
-                                    {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-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">
-                                                        <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>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-                    </CardContent>
-                </Card>
+            <div className="h-20 w-full">
+                {userData && userData.role === 'caregiver' && (
+                    <div className="space-y-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                        <div className="mb-4">
+                            {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-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">
+                                                <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>
+                            ))}
+                        </div>
+                    </div>
+                )}
             </div>
         </div>
     )