diff --git a/apps/Frontend/src/components/claims/claim-edit-modal.tsx b/apps/Frontend/src/components/claims/claim-edit-modal.tsx
index 2d89850..480a78d 100644
--- a/apps/Frontend/src/components/claims/claim-edit-modal.tsx
+++ b/apps/Frontend/src/components/claims/claim-edit-modal.tsx
@@ -99,11 +99,11 @@ export default function ClaimEditModal({
               <div className="mt-2 space-y-2">
                 <p>
                   <span className="text-gray-500">Date of Birth:</span>{" "}
-                  {new Date(claim.dateOfBirth).toLocaleDateString()}
+                  {formatDateToHumanReadable(claim.dateOfBirth)}
                 </p>
                 <p>
                   <span className="text-gray-500">Service Date:</span>{" "}
-                  {new Date(claim.serviceDate).toLocaleDateString()}
+                  {formatDateToHumanReadable(claim.serviceDate)}
                 </p>
                 <div>
                   <span className="text-gray-500">Status:</span>
@@ -199,7 +199,7 @@ export default function ClaimEditModal({
                       </p>
                       <p>
                         <span className="text-gray-500">Procedure Date:</span>{" "}
-                        {new Date(line.procedureDate).toLocaleDateString()}
+                        {formatDateToHumanReadable(line.procedureDate)}
                       </p>
                       {line.oralCavityArea && (
                         <p>
diff --git a/apps/Frontend/src/components/claims/claim-view-modal.tsx b/apps/Frontend/src/components/claims/claim-view-modal.tsx
index 7c9d2a2..4ad8c81 100644
--- a/apps/Frontend/src/components/claims/claim-view-modal.tsx
+++ b/apps/Frontend/src/components/claims/claim-view-modal.tsx
@@ -77,11 +77,11 @@ export default function ClaimViewModal({
                 <div className="mt-2 space-y-2">
                   <p>
                     <span className="text-gray-500">Date of Birth:</span>{" "}
-                    {new Date(claim.dateOfBirth).toLocaleDateString()}
+                    {formatDateToHumanReadable(claim.dateOfBirth)}
                   </p>
                   <p>
                     <span className="text-gray-500">Service Date:</span>{" "}
-                    {new Date(claim.serviceDate).toLocaleDateString()}
+                    {formatDateToHumanReadable(claim.serviceDate)}
                   </p>
                   <p>
                     <span className="text-gray-500">Status:</span>{" "}
@@ -179,7 +179,7 @@ export default function ClaimViewModal({
                         </p>
                         <p>
                           <span className="text-gray-500">Procedure Date:</span>{" "}
-                          {new Date(line.procedureDate).toLocaleDateString()}
+                          {formatDateToHumanReadable(line.procedureCode)}
                         </p>
                         {line.oralCavityArea && (
                           <p>
diff --git a/apps/Frontend/src/components/claims/claims-of-patient-table.tsx b/apps/Frontend/src/components/claims/claims-of-patient-table.tsx
index 5337004..b546def 100644
--- a/apps/Frontend/src/components/claims/claims-of-patient-table.tsx
+++ b/apps/Frontend/src/components/claims/claims-of-patient-table.tsx
@@ -9,7 +9,13 @@ import ClaimsRecentTable from "./claims-recent-table";
 import { PatientTable } from "../patients/patient-table";
 import { PatientUncheckedCreateInputObjectSchema } from "@repo/db/usedSchemas";
 import { z } from "zod";
-import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
 
 const PatientSchema = (
   PatientUncheckedCreateInputObjectSchema as unknown as z.ZodObject<any>
@@ -28,6 +34,9 @@ export default function ClaimsOfPatientModal() {
       setSelectedPatient(patient);
       setClaimsPage(1);
       setIsModalOpen(true);
+    } else {
+      setSelectedPatient(null);
+      setIsModalOpen(false);
     }
   };
 
@@ -36,7 +45,7 @@ export default function ClaimsOfPatientModal() {
       {/* Claims Section */}
       {selectedPatient && (
         <Card>
-          <CardHeader className="pb-4">
+          <CardHeader>
             <CardTitle>
               Claims for {selectedPatient.firstName} {selectedPatient.lastName}
             </CardTitle>
@@ -44,7 +53,7 @@ export default function ClaimsOfPatientModal() {
               Displaying recent claims for the selected patient.
             </CardDescription>
           </CardHeader>
-          <div className="p-4">
+          <CardContent>
             <ClaimsRecentTable
               patientId={selectedPatient.id}
               allowView
@@ -52,25 +61,25 @@ export default function ClaimsOfPatientModal() {
               allowDelete
               onPageChange={setClaimsPage}
             />
-          </div>
+          </CardContent>
         </Card>
       )}
 
       {/* Patients Section */}
       <Card>
-        <CardHeader className="pb-4">
-          <CardTitle>Patients</CardTitle>
+        <CardHeader>
+          <CardTitle>Patient Records</CardTitle>
           <CardDescription>
-            Select a patient to view their recent claims.
+            View and manage all patient information
           </CardDescription>
         </CardHeader>
-        <div className="p-4">
+        <CardContent>
           <PatientTable
             allowView
             allowCheckbox
             onSelectPatient={handleSelectPatient}
           />
-        </div>
+        </CardContent>
       </Card>
     </div>
   );
diff --git a/apps/Frontend/src/components/claims/claims-recent-table.tsx b/apps/Frontend/src/components/claims/claims-recent-table.tsx
index 0cb430d..7591729 100644
--- a/apps/Frontend/src/components/claims/claims-recent-table.tsx
+++ b/apps/Frontend/src/components/claims/claims-recent-table.tsx
@@ -39,9 +39,7 @@ import { useAuth } from "@/hooks/use-auth";
 import LoadingScreen from "@/components/ui/LoadingScreen";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { cn } from "@/lib/utils";
 import { formatDateToHumanReadable } from "@/utils/dateUtils";
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import ClaimViewModal from "./claim-view-modal";
 import ClaimEditModal from "./claim-edit-modal";
 
@@ -319,10 +317,6 @@ export default function ClaimsRecentTable({
   };
 
   return (
-    <Card className="mt-8">
-      <CardHeader className="pb-8">
-        <CardTitle>Recently Submitted Claims</CardTitle>
-      </CardHeader>
       <div className="bg-white shadow rounded-lg overflow-hidden">
         <div className="overflow-x-auto">
           <Table>
@@ -581,6 +575,5 @@ export default function ClaimsRecentTable({
           </div>
         )}
       </div>
-    </Card>
   );
 }
diff --git a/apps/Frontend/src/components/patients/patient-table.tsx b/apps/Frontend/src/components/patients/patient-table.tsx
index 06ab1eb..08910f7 100644
--- a/apps/Frontend/src/components/patients/patient-table.tsx
+++ b/apps/Frontend/src/components/patients/patient-table.tsx
@@ -537,9 +537,7 @@ export function PatientTable({
                   <div className="mt-2 space-y-2">
                     <p>
                       <span className="text-gray-500">Date of Birth:</span>{" "}
-                      {new Date(
-                        currentPatient.dateOfBirth
-                      ).toLocaleDateString()}
+                      {formatDateToHumanReadable(currentPatient.dateOfBirth)}
                     </p>
                     <p>
                       <span className="text-gray-500">Gender:</span>{" "}
diff --git a/apps/Frontend/src/pages/claims-page.tsx b/apps/Frontend/src/pages/claims-page.tsx
index 16dcf8f..2e03bbb 100644
--- a/apps/Frontend/src/pages/claims-page.tsx
+++ b/apps/Frontend/src/pages/claims-page.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { TopAppBar } from "@/components/layout/top-app-bar";
 import { Sidebar } from "@/components/layout/sidebar";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent, CardDescription } from "@/components/ui/card";
 import { ClaimForm } from "@/components/claims/claim-form";
 import { useToast } from "@/hooks/use-toast";
 import { useAuth } from "@/hooks/use-auth";
@@ -704,11 +704,21 @@ export default function ClaimsPage() {
           </div>
 
           {/* Recent Claims Section */}
-          <ClaimsRecentTable
+          <Card>
+              <CardHeader>
+                <CardTitle>Recently Submitted Claims</CardTitle>
+                <CardDescription>
+                  View and manage all recent claims information
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ClaimsRecentTable
             allowEdit={true}
             allowView={true}
             allowDelete={true}
           />
+              </CardContent>
+            </Card>
 
           {/* Recent Claims by Patients */}
           <ClaimsOfPatientModal />