diff --git a/client/app/doctor/appointments/page.tsx b/client/app/doctor/appointments/page.tsx
index f8039363..e44a78f6 100644
--- a/client/app/doctor/appointments/page.tsx
+++ b/client/app/doctor/appointments/page.tsx
@@ -1,16 +1,17 @@
-import TabSection from '@/components/view/tab/AppointmentTab'
+import AppointmentTable from '@/components/view/table/DoctorAppointmentTable';
 import { Metadata } from 'next'
-import React from 'react'
 
 
-export const metadata:Metadata = {
-    title:"Appointments"
+export const metadata: Metadata = {
+  title: "Appointments"
 }
 
-const Appointments = () => {
+const Appointments = ({ searchParams }: { searchParams: { page: number } }) => {
+  const page = searchParams.page || 0;
+
   return (
-    <TabSection />
+    <AppointmentTable page={page} />
   )
 }
 
-export default Appointments
\ No newline at end of file
+export default Appointments
diff --git a/client/app/doctor/page.tsx b/client/app/doctor/page.tsx
index 7e4ed94f..a495122b 100644
--- a/client/app/doctor/page.tsx
+++ b/client/app/doctor/page.tsx
@@ -1,3 +1,9 @@
+import { Metadata } from "next";
+
+export const metadata:Metadata= {
+   title:"Dashboard"
+}
+
 const Dashboard = () => {
    return (
       <main className="">
diff --git a/client/components/doctor/appointments/AppointmentTabContent.tsx b/client/components/doctor/appointments/AppointmentTabContent.tsx
deleted file mode 100644
index c3dfc66f..00000000
--- a/client/components/doctor/appointments/AppointmentTabContent.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-'use client'
-
-import { useGetAppointmentsDoctor } from "@/lib/hooks/appointment/useAppointment"
-import { AppointmentStatus } from "@/types"
-
-const AppointmentTabContent = () => {
-  const {data,isLoading} = useGetAppointmentsDoctor(AppointmentStatus.PENDING,0,10);
-  console.log(data);
-  
-  return (
-    <div>AppointmentTabContent {}</div>
-  )
-}
-
-export default AppointmentTabContent
\ No newline at end of file
diff --git a/client/components/skeletons/TableSkelton.tsx b/client/components/skeletons/TableSkelton.tsx
index eb6c9d38..dabc4871 100644
--- a/client/components/skeletons/TableSkelton.tsx
+++ b/client/components/skeletons/TableSkelton.tsx
@@ -48,7 +48,7 @@ export default function TableSkeleton({
                      <TableRow key={rowIndex}>
                         {columns.map((column, colIndex) => (
                            <TableCell key={colIndex}>
-                              <Skeleton className={`h-4 ${column.width || "w-full"}`} />
+                              <Skeleton className={`h-6 ${column.width || "w-full"}`} />
                            </TableCell>
                         ))}
                      </TableRow>
diff --git a/client/components/view/tab/AppointmentTab.tsx b/client/components/view/tab/AppointmentTab.tsx
deleted file mode 100644
index a81de9e0..00000000
--- a/client/components/view/tab/AppointmentTab.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Tabs } from "@/components/ui/tabs-v2";
-import TabContent from "@/components/doctor/appointments/AppointmentTabContent";
-
-export default function TabSection() {
-  
-  const tabs = [{title:"Pending Appointments", value:"PENDING"},{ title: 'Scheduled Appointments', value: 'SCHEDULED',}].map(({title,value}) => ({
-    title,
-    value,
-    content: (
-      <div>
-        <TabContent />
-      </div>
-    ),
-  }));
-
-  return (
-    <div className="space-y-4 sm:space-y-6">
-      <h1 className="text-xl sm:text-2xl md:text-3xl font-bold">Manage Your Appointments</h1>
-      <Tabs tabs={tabs} />
-      <div className='my-14'></div>
-    </div>
-  );
-}
\ No newline at end of file
diff --git a/client/components/view/table/DoctorAppointmentTable.tsx b/client/components/view/table/DoctorAppointmentTable.tsx
new file mode 100644
index 00000000..e1857afd
--- /dev/null
+++ b/client/components/view/table/DoctorAppointmentTable.tsx
@@ -0,0 +1,130 @@
+'use client'
+
+import { useState, useMemo } from "react"
+import { useRouter } from "next/navigation"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useGetAppointmentsDoctor } from "@/lib/hooks/appointment/useAppointment"
+import IAppointment, { AppointmentStatus } from "@/types"
+import TableSkeleton from "@/components/skeletons/TableSkelton"
+import Pagination from "@/components/navigation/Pagination"
+import { Button } from "@/components/ui/button"
+
+const columns = [
+  { name: "Date", width: "w-1/4" },
+  { name: "Type", width: "w-1/4" },
+  { name: "Reason", width: "w-1/4" },
+  { name: "Status", width: "w-1/4" },
+  { name: "Actions", width: "text-right pr-10" }
+]
+
+type Props = {
+  page: number
+}
+
+export default function AppointmentTable({ page }: Props) {
+  const [currentPage, setCurrentPage] = useState(page)
+  const limit = 7;
+  const { data, isLoading, error, refetch } = useGetAppointmentsDoctor(AppointmentStatus.PENDING, currentPage,limit)
+  const router = useRouter()
+
+  const appointments = useMemo(() => data?.items || [], [data])
+
+  const handlePageChange = (pageIndex: number) => {
+    setCurrentPage(pageIndex)
+    router.replace(`/doctor/appointments?page=${pageIndex}`)
+    refetch()
+  }
+
+  const handleViewDetails = (appointmentId:string)=>{
+    console.log('clicked', appointmentId);
+    
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">Error loading appointments. Please try again later.</p>
+      </div>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Appointments</CardTitle>
+        <CardDescription>
+          A list of all pending appointments including date, type, reason, and status.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <TableSkeleton
+            columns={columns}
+            rows={limit}
+            showHeader={false}
+            headerTitle="Appointments"
+            headerDescription="A list of all pending appointments including date, type, reason, and status."
+          />
+        ) : (
+          <div className="overflow-x-auto">
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  {columns.map((column) => (
+                    <TableHead key={column.name} className={column.width}>
+                      {column.name}
+                    </TableHead>
+                  ))}
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {appointments.length >= 1 ? (
+                  appointments.map((appointment) => (
+                    <TableRow key={appointment._id}>
+                      <TableCell>{new Date(appointment.appointmentDate!).toLocaleString().split(",")[0]}</TableCell>
+                      <TableCell>{appointment.appointmentType}</TableCell>
+                      <TableCell>{appointment.reason}</TableCell>
+                      <TableCell>
+                        <Badge variant={appointment.status === AppointmentStatus.PENDING ? "warning" : "success"}>
+                          {appointment.status}
+                        </Badge>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Button
+                          variant="link" size="sm"
+                          onClick={() => handleViewDetails(appointment._id!)}
+                          aria-label={`View profile of ${appointment.reason}`}
+                        >
+                          View Details
+                        </Button>
+                      </TableCell>
+                    </TableRow>
+
+                  ))
+                ) : (
+                  <TableRow>
+                    <TableCell colSpan={4} className="text-center">
+                      No appointments found.
+                    </TableCell>
+                  </TableRow>
+                )}
+              </TableBody>
+            </Table>
+          </div>
+        )}
+        {data && (
+          <Pagination
+            currentPage={currentPage}
+            handlePageChange={handlePageChange}
+            totalPages={data.totalPages}
+            className="mt-4"
+            hasNextPage={data.hasNextPage}
+            hasPrevPage={data.hasPreviousPage}
+          />
+        )}
+      </CardContent>
+    </Card>
+  )
+}
\ No newline at end of file
diff --git a/client/components/view/table/DoctorsTable.tsx b/client/components/view/table/DoctorsTable.tsx
index 15a739fc..69a0a42d 100644
--- a/client/components/view/table/DoctorsTable.tsx
+++ b/client/components/view/table/DoctorsTable.tsx
@@ -36,7 +36,8 @@ export default function DoctorsPage({ page, type }: Props) {
   const [isModelOpen, setModelOpen] = useState(false)
   const [tabType, setTabType] = useState<DoctorsFilter>(DoctorsFilter.VERIFIED)
   const router = useRouter()
-  const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, 7, type);
+  const limit = 7
+  const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, limit, type);
 
   const doctors = useMemo(() => data?.items || [], [data]);
 
@@ -89,7 +90,8 @@ export default function DoctorsPage({ page, type }: Props) {
                 {isLoading ? (
                   <TableSkeleton
                     columns={columns}
-                    rows={5}
+                    rows={limit}
+                    showHeader={false}
                     headerTitle="All Doctors"
                     headerDescription="A list of all doctors including their status, specialty, qualifications, and more."
                   />
@@ -132,8 +134,7 @@ export default function DoctorsPage({ page, type }: Props) {
                               </TableCell>
                               <TableCell className="text-right">
                                 <Button
-                                  variant="ghost"
-                                  size="sm"
+                                  variant="link" size="sm"
                                   onClick={() => handleViewProfile(doctor)}
                                   aria-label={`View profile of ${doctor.name}`}
                                 >
diff --git a/client/components/view/table/PatientsTable.tsx b/client/components/view/table/PatientsTable.tsx
index 63c9e51b..aba9366d 100644
--- a/client/components/view/table/PatientsTable.tsx
+++ b/client/components/view/table/PatientsTable.tsx
@@ -21,7 +21,8 @@ export default function PatientsTable({ page }: Props) {
    const [isModelOpen, setModelOpen] = useState(false);
    const [selectedPatient, setSelectedPatient] = useState({});
    const router = useRouter();
-   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, 7);
+   const limit = 7
+   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, limit);
    const columns = [
       { name: "Image", width: "w-[80px]" },
       { name: "Name", width: "" },
@@ -50,9 +51,10 @@ export default function PatientsTable({ page }: Props) {
             {isLoading ? (
                <TableSkeleton
                   columns={columns}
+                  showHeader={false}
                   headerDescription="A list of all patients including their details."
                   headerTitle="All Patients"
-                  rows={7}
+                  rows={limit}
                />
             ) : (
                <>
diff --git a/client/lib/api/appointment/index.ts b/client/lib/api/appointment/index.ts
index 162d1886..b30f1e70 100644
--- a/client/lib/api/appointment/index.ts
+++ b/client/lib/api/appointment/index.ts
@@ -44,7 +44,7 @@ export const verifyPayment = async ({ appointmentId, paymentData }: verifyPaymen
 export const getAppointmentsDoctor = async (status: AppointmentStatus,offset: number, limit: number,) => {
    const response = await withTempBaseUrl(doctorAxiosInstance, baseUrl, {
       method: 'GET',
-      url: `/doctor?status=${status}&${offset}&${limit}`,
+      url: `/doctor?status=${status}&offset=${offset}&limit=${limit}`,
    })
    return response.data;
 }
\ No newline at end of file
diff --git a/client/lib/hooks/appointment/useAppointment.ts b/client/lib/hooks/appointment/useAppointment.ts
index 25d170ea..c2c77be0 100644
--- a/client/lib/hooks/appointment/useAppointment.ts
+++ b/client/lib/hooks/appointment/useAppointment.ts
@@ -31,7 +31,7 @@ export const useVerifyPaymentAppointment = () => {
 
 export const useGetAppointmentsDoctor = (status: AppointmentStatus, offset: number, limit: number,) => {
     return useQuery<PaginatedResult<IAppointment>, AxiosError<ErrorResponse>>({
-        queryKey: ["appointments", status, offset, limit,],
-        queryFn: () => getAppointmentsDoctor(status, offset, limit,)
+        queryKey: ["appointments", status, offset, limit],
+        queryFn: () => getAppointmentsDoctor(status, offset, limit)
     })
 }
\ No newline at end of file