diff --git a/client/app/(patient)/appointments/page.tsx b/client/app/(patient)/appointments/page.tsx
index c00d89eb..512fb28b 100644
--- a/client/app/(patient)/appointments/page.tsx
+++ b/client/app/(patient)/appointments/page.tsx
@@ -2,22 +2,22 @@
 
 import Pagination from "@/components/navigation/Pagination";
 import { useGetAppointmentsPatient } from "@/lib/hooks/appointment/useAppointmentPatient";
+import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
+import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
+import { ButtonV2 } from "@/components/common/ButtonV2";
 import { useRouter } from "next/navigation";
 import { format } from "date-fns";
-import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
-import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
 import { Calendar, FileText, Video, User } from "lucide-react";
 import { useState } from "react";
-import { ButtonV2 } from "@/components/common/ButtonV2";
 
 const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: number } }) => {
-   const page = searchParams.page || 0;
+   const page = searchParams.page || 1;
    const [currentPage, setCurrentPage] = useState(page);
-   const { data } = useGetAppointmentsPatient(page, 4);
+   const { data, isLoading } = useGetAppointmentsPatient(page-1, 4);
    const router = useRouter();
 
    const handlePageChange = (pageIndex: number) => {
-      if (pageIndex > data?.totalPages!) return null;
+      if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
       router.replace(`/appointments?page=${pageIndex}`);
       setCurrentPage(pageIndex);
    };
@@ -77,14 +77,15 @@ const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: numbe
             ))}
 
             <div className="mt-6">
-               {}
-               <Pagination
-                  currentPage={currentPage}
-                  handlePageChange={handlePageChange}
-                  hasNextPage={data?.hasNextPage!}
-                  hasPrevPage={data?.hasPreviousPage!}
-                  totalPages={data?.totalPages!}
-               />
+               {!isLoading && (
+                  <Pagination
+                     currentPage={currentPage}
+                     handlePageChange={handlePageChange}
+                     hasNextPage={data?.hasNextPage!}
+                     hasPrevPage={data?.hasPreviousPage!}
+                     totalPages={data?.totalPages!}
+                  />
+               )}
             </div>
          </div>
       </div>
diff --git a/client/app/admin/doctors/page.tsx b/client/app/admin/doctors/page.tsx
index 7a7936c3..053181e6 100644
--- a/client/app/admin/doctors/page.tsx
+++ b/client/app/admin/doctors/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 };
 
 const Page = ({ searchParams }: { searchParams: { page: number; type: DoctorsFilter } }) => {
-   const page = searchParams.page || 0;
+   const page = searchParams.page || 1;
    const type = searchParams.type || DoctorsFilter.VERIFIED;
 
    return <DoctorTable page={page} type={type} />;
diff --git a/client/app/admin/patients/page.tsx b/client/app/admin/patients/page.tsx
index 875b7bc1..242e3426 100644
--- a/client/app/admin/patients/page.tsx
+++ b/client/app/admin/patients/page.tsx
@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 };
 
 const Page = ({ searchParams }: { searchParams: { page: number } }) => {
-   const page = searchParams.page || 0;
+   const page = searchParams.page || 1;
 
    return (
       <main>
diff --git a/client/app/doctor/appointments/page.tsx b/client/app/doctor/appointments/page.tsx
index 19cfa985..6273703e 100644
--- a/client/app/doctor/appointments/page.tsx
+++ b/client/app/doctor/appointments/page.tsx
@@ -6,7 +6,7 @@ export const metadata: Metadata = {
 };
 
 const Appointments = ({ searchParams }: { searchParams: { page: number } }) => {
-   const page = searchParams.page || 0;
+   const page = searchParams.page || 1;
 
    return <AppointmentTable page={page} />;
 };
diff --git a/client/components/models/admin/PatientProfileModel.tsx b/client/components/models/admin/PatientProfileModel.tsx
index 4107106a..e02071ee 100644
--- a/client/components/models/admin/PatientProfileModel.tsx
+++ b/client/components/models/admin/PatientProfileModel.tsx
@@ -16,7 +16,7 @@ import { IPatient } from "@/types";
 import { useChangeStatusAdmin } from "@/lib/hooks/admin/useAdminPatients";
 import { toast } from "@/components/ui/use-toast";
 import { Badge } from "@/components/ui/badge";
-
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
 type Props = {
    open: boolean;
    setOpen: Dispatch<SetStateAction<boolean>>;
@@ -70,13 +70,10 @@ const AdminPatientProfileModel = ({ open, setOpen, patient, refetch }: Props) =>
             <AlertDialogDescription></AlertDialogDescription>
             <div className="space-y-6">
                <div className="flex items-center space-x-6">
-                  <Image
-                     src={patient.profile || "/assets/icons/user.svg?height=128&width=128"}
-                     alt={patient.name || "Profile"}
-                     width={128}
-                     height={128}
-                     className="rounded-full object-cover"
-                  />
+                  <Avatar className="h-28 w-28 rounded-full object-cover">
+                     <AvatarImage src={patient.profile || "/assets/icons/circle-user.svg"} alt={patient.name} />
+                     <AvatarFallback>{(patient.name!||"P").charAt(0)}</AvatarFallback>
+                  </Avatar>
                   <div>
                      <h3 className="text-2xl font-semibold">{patient.name}</h3>
                      <p className="text-muted-foreground">{patient.gender || "Not specified"}</p>
diff --git a/client/components/navigation/Pagination.tsx b/client/components/navigation/Pagination.tsx
index 80537d27..4bb31412 100644
--- a/client/components/navigation/Pagination.tsx
+++ b/client/components/navigation/Pagination.tsx
@@ -22,8 +22,6 @@ export default function Pagination({
    handlePageChange,
    totalPages,
    className,
-   hasNextPage,
-   hasPrevPage,
 }: Props) {
    if (totalPages <= 1) return null;
 
@@ -52,8 +50,9 @@ export default function Pagination({
             <PaginationItem>
                <PaginationPrevious
                   href="#"
+                  isActive={currentPage > 1}
                   onClick={(e) => handleClick(e, currentPage - 1)}
-                  aria-disabled={!hasPrevPage || currentPage <= 1}
+                  aria-disabled={currentPage <= 1}
                />
             </PaginationItem>
             {getPageRange().map((page, index) => (
@@ -74,8 +73,9 @@ export default function Pagination({
             <PaginationItem>
                <PaginationNext
                   href="#"
+                  isActive={currentPage < totalPages}
                   onClick={(e) => handleClick(e, currentPage + 1)}
-                  aria-disabled={!hasNextPage || currentPage >= totalPages}
+                  aria-disabled={currentPage >= totalPages}
                />
             </PaginationItem>
          </PaginationContent>
diff --git a/client/components/view/table/DoctorAppointmentTable.tsx b/client/components/view/table/DoctorAppointmentTable.tsx
index a28b2e8b..3c997dbe 100644
--- a/client/components/view/table/DoctorAppointmentTable.tsx
+++ b/client/components/view/table/DoctorAppointmentTable.tsx
@@ -31,7 +31,7 @@ export default function AppointmentTable({ page }: Props) {
    const [statusFilter, setStatusFilter] = useState<AppointmentStatus | "all">("all");
    const limit = 7;
    const { data, isLoading, error, refetch } = useGetAppointmentsDoctor(
-      currentPage,
+      currentPage-1,
       limit,
       statusFilter === "all" ? undefined : statusFilter
    );
@@ -40,6 +40,7 @@ export default function AppointmentTable({ page }: Props) {
    const appointments = useMemo(() => data?.items || [], [data?.items]);
 
    const handlePageChange = (pageIndex: number) => {
+      if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
       setCurrentPage(pageIndex);
       router.replace(`/doctor/appointments?page=${pageIndex}&status=${statusFilter}`);
       refetch();
@@ -51,7 +52,7 @@ export default function AppointmentTable({ page }: Props) {
 
    const handleStatusChange = (status: AppointmentStatus | "all") => {
       setStatusFilter(status);
-      setCurrentPage(0);
+      setCurrentPage(1);
       router.replace(`/doctor/appointments?page=1&status=${status}`);
       refetch();
    };
diff --git a/client/components/view/table/DoctorsTable.tsx b/client/components/view/table/DoctorsTable.tsx
index faff1fed..8bc382a3 100644
--- a/client/components/view/table/DoctorsTable.tsx
+++ b/client/components/view/table/DoctorsTable.tsx
@@ -36,7 +36,7 @@ export default function DoctorsPage({ page, type }: Props) {
    const [tabType, setTabType] = useState<DoctorsFilter>(DoctorsFilter.VERIFIED);
    const router = useRouter();
    const limit = 7;
-   const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage, limit, type);
+   const { data, isLoading, error, refetch } = useGetDoctorsAdmin(currentPage-1, limit, type);
 
    const doctors = useMemo(() => data?.items || [], [data]);
 
@@ -46,6 +46,7 @@ export default function DoctorsPage({ page, type }: Props) {
    };
 
    const handlePageChange = (pageIndex: number) => {
+      if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
       setCurrentPage(pageIndex);
       router.push(`/admin/doctors?page=${pageIndex}&type=${tabType}`);
       refetch();
@@ -53,7 +54,7 @@ export default function DoctorsPage({ page, type }: Props) {
 
    const handleTabChange = (value: DoctorsFilter) => {
       setTabType(value);
-      setCurrentPage(0);
+      setCurrentPage(1);
       router.push(`/admin/doctors?page=${currentPage}&type=${value}`);
       refetch();
    };
diff --git a/client/components/view/table/PatientsTable.tsx b/client/components/view/table/PatientsTable.tsx
index 0c265fd6..9325f18e 100644
--- a/client/components/view/table/PatientsTable.tsx
+++ b/client/components/view/table/PatientsTable.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import { useState } from "react";
-import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { useGetPatientsAdmin } from "@/lib/hooks/admin/useAdminPatients";
 import Pagination from "@/components/navigation/Pagination";
-import {IPatient}  from "@/types";
+import { IPatient } from "@/types";
 import AdminPatientProfileModel from "@/components/models/admin/PatientProfileModel";
 import { useRouter } from "next/navigation";
 import TableSkeleton from "@/components/skeletons/TableSkelton";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 
 type Props = {
    page: number;
@@ -22,7 +22,7 @@ export default function PatientsTable({ page }: Props) {
    const [selectedPatient, setSelectedPatient] = useState({});
    const router = useRouter();
    const limit = 7;
-   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage, limit);
+   const { data, isLoading, refetch } = useGetPatientsAdmin(currentPage-1, limit);
    const columns = [
       { name: "Image", width: "w-[80px]" },
       { name: "Name", width: "" },
@@ -35,6 +35,7 @@ export default function PatientsTable({ page }: Props) {
    const patients = data?.items!;
 
    const handlePageChange = (pageIndex: number) => {
+      if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
       setCurrentPage(pageIndex);
       router.push(`/admin/patients?page=${pageIndex}`);
       refetch();
@@ -80,19 +81,15 @@ export default function PatientsTable({ page }: Props) {
                                     <TableRow key={patient._id}>
                                        <TableCell>
                                           <div
-                                             className={`relative w-16 h-16 rounded-full ${
-                                                patient.isBlocked
-                                                   ? "border-4 border-destructive"
-                                                   : "border-4 border-primary"
-                                             }`}
+                                             className={`relative w-16 h-16 rounded-full ${patient.isBlocked
+                                                ? "border-4 border-destructive"
+                                                : "border-4 border-primary"
+                                                }`}
                                           >
-                                             <Image
-                                                src={patient.profile || "/placeholder.svg?height=64&width=64"}
-                                                alt={patient.name || "Profile"}
-                                                width={64}
-                                                height={64}
-                                                className="rounded-full object-cover"
-                                             />
+                                             <Avatar className="w-full h-full" >
+                                                <AvatarImage src={patient.profile || "/assets/icons/circle-user.svg"} alt={patient.name} />
+                                                <AvatarFallback>{(patient.name!||"P").charAt(0)}</AvatarFallback>
+                                             </Avatar>
                                           </div>
                                        </TableCell>
                                        <TableCell className="font-medium">{patient.name}</TableCell>