diff --git a/client/app/(patient)/appointments/[id]/page.tsx b/client/app/(patient)/appointments/[id]/page.tsx
index f2ec5176..f003afbd 100644
--- a/client/app/(patient)/appointments/[id]/page.tsx
+++ b/client/app/(patient)/appointments/[id]/page.tsx
@@ -1,31 +1,29 @@
-"use client";
+'use client'
 
-import {
-   useGetAppointmentDetailsPatient,
-   useUpdateAppointmentStatusAndNotesPatient,
-} from "@/lib/hooks/appointment/useAppointmentPatient";
-import { notFound, useParams } from "next/navigation";
-import { format } from "date-fns";
-import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
-import { Calendar, Clock, FileText, Video, User, Mail, Phone, Edit2 } from "lucide-react";
-import Image from "next/image";
-import { useState } from "react";
-import { useAuth } from "@/lib/hooks/useAuth";
-import { toast } from "@/components/ui/use-toast";
-import ConfirmCancelAppointmentModelPatient from "@/components/models/appointment/ConfirmCancelAppointmentPatient";
-import { AppointmentStatus } from "@/types";
+import { useState } from "react"
+import { useParams, notFound } from "next/navigation"
+import { format } from "date-fns"
+import Image from "next/image"
+import { Clock } from "lucide-react"
+import { useGetAppointmentDetailsPatient, useUpdateAppointmentStatusAndNotesPatient } from "@/lib/hooks/appointment/useAppointmentPatient"
+import { useAuth } from "@/lib/hooks/useAuth"
+import { AppointmentStatus } from "@/types"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Textarea } from "@/components/ui/textarea"
+import { toast } from "@/components/ui/use-toast"
+import { Badge } from "@/components/ui/badge"
+import { Separator } from "@/components/ui/separator"
+import ConfirmCancelAppointmentModelPatient from "@/components/models/appointment/ConfirmCancelAppointmentPatient"
+import { ButtonV2 } from "@/components/button/ButtonV2"
 
-const Page = () => {
-   const id = useParams().id as string;
-   const [isEditingNote, setIsEditingNote] = useState(false);
-   const [isCancelModelOpen, setCancelModelOpen] = useState(false);
-   const { data: appointment, refetch } = useGetAppointmentDetailsPatient(id);
-   const { mutate: update, isPending } = useUpdateAppointmentStatusAndNotesPatient();
-   const [newNote, setNewNote] = useState("");
-   const { patientToken } = useAuth();
+export default function AppointmentDetailsPage() {
+   const id = useParams().id as string
+   const [isEditingNote, setIsEditingNote] = useState(false)
+   const [isCancelModelOpen, setCancelModelOpen] = useState(false)
+   const { data: appointment, refetch } = useGetAppointmentDetailsPatient(id)
+   const { mutate: update } = useUpdateAppointmentStatusAndNotesPatient()
+   const [newNote, setNewNote] = useState("")
+   const { patientToken } = useAuth()
 
    const handleUpdateNote = async () => {
       if (newNote.trim()) {
@@ -34,30 +32,29 @@ const Page = () => {
             {
                onSuccess: () => {
                   toast({
-                     title: "Note Updated 🎉",
-                     description: "Your note has been successfully updated!",
-                     variant: "success",
-                  });
-                  setIsEditingNote(false);
-                  refetch();
+                     title: "Note Updated",
+                     description: "Your note has been successfully updated.",
+                  })
+                  setIsEditingNote(false)
+                  refetch()
                },
                onError: () => {
                   toast({
-                     title: "Error 😞",
-                     description: "Something went wrong while updating the note. Please try again.",
+                     title: "Error",
+                     description: "Failed to update the note. Please try again.",
                      variant: "destructive",
-                  });
+                  })
                },
             }
-         );
+         )
       } else {
          toast({
-            title: "Invalid Input 🚫",
+            title: "Invalid Input",
             description: "Note cannot be empty. Please enter some text.",
-            variant: "warning",
-         });
+            variant: "destructive",
+         })
       }
-   };
+   }
 
    const handleCancelAppointment = async () => {
       update(
@@ -65,111 +62,135 @@ const Page = () => {
          {
             onSuccess: () => {
                toast({
-                  title: "Appointment Cancelled 🛑",
+                  title: "Appointment Cancelled",
                   description: "Your appointment has been successfully cancelled.",
-                  variant: "success",
-               });
-               refetch();
-               setCancelModelOpen(false);
+               })
+               refetch()
+               setCancelModelOpen(false)
             },
             onError: () => {
                toast({
-                  title: "Error Cancelling 😞",
-                  description: "Something went wrong while cancelling the appointment. Please try again.",
+                  title: "Error",
+                  description: "Failed to cancel the appointment. Please try again.",
                   variant: "destructive",
-               });
+               })
             },
          }
-      );
-   };
+      )
+   }
 
    const isCancellable = () => {
-      if (!appointment?.slot?.startTime || !appointment?.appointmentDate) return false;
+      if (!appointment?.slot?.startTime || !appointment?.appointmentDate) return false
 
-      const appointmentDate = new Date(appointment.appointmentDate);
-      const [hours, minutes] = appointment.slot.startTime.split(":");
-      const isPM = appointment.slot.startTime.includes("PM");
+      const appointmentDate = new Date(appointment.appointmentDate)
+      const [hours, minutes] = appointment.slot.startTime.split(":")
+      const isPM = appointment.slot.startTime.includes("PM")
 
-      appointmentDate.setHours(isPM ? parseInt(hours) + 12 : parseInt(hours), parseInt(minutes.split(" ")[0]));
+      appointmentDate.setHours(isPM ? parseInt(hours) + 12 : parseInt(hours), parseInt(minutes.split(" ")[0]))
 
-      const currentTime = new Date();
-      const threeHoursBefore = new Date(appointmentDate.getTime() - 3 * 60 * 60 * 1000);
-      return currentTime < threeHoursBefore;
-   };
+      const currentTime = new Date()
+      const threeHoursBefore = new Date(appointmentDate.getTime() - 3 * 60 * 60 * 1000)
+      return currentTime < threeHoursBefore
+   }
 
    if (!patientToken) {
-      notFound();
+      notFound()
    }
 
    if (!appointment) {
-      return <div className="text-center mt-8">Loading appointment details...</div>;
+      return <div className="text-center mt-8">Loading appointment details...</div>
    }
+
    return (
-      <div className="container mx-auto px-4 py-8">
+      <div className="container mx-auto px-4 py-8 md:mb-56">
          <h1 className="text-3xl font-bold mb-6">Appointment Details</h1>
-         <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-            <Card className="lg:col-span-2">
+         <div className="grid gap-6 md:grid-cols-3">
+            <Card className="md:col-span-2">
                <CardHeader>
-                  <CardTitle className="flex justify-between items-center">
-                     <span>Appointment Information</span>
-                     <GetStatusBadge status={appointment.status!} />
-                  </CardTitle>
+                  <div className="flex justify-between items-center">
+                     <CardTitle>Appointment Information</CardTitle>
+                     <Badge variant={appointment.status === AppointmentStatus.CONFIRMED ? "default" : "secondary"}>
+                        {appointment.status}
+                     </Badge>
+                  </div>
                </CardHeader>
                <CardContent className="space-y-4">
-                  <div className="flex items-center space-x-2">
-                     <Calendar className="w-5 h-5" />
-                     <span>{format(new Date(appointment.appointmentDate!), "PPPP")}</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                     <Clock className="w-5 h-5" />
-                     <span>{format(new Date(appointment.appointmentDate!), "p")}</span>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                     {appointment.appointmentType === "video-consulting" ? (
-                        <Video className="w-5 h-5" />
-                     ) : (
-                        <User className="w-5 h-5" />
-                     )}
-                     <span>{appointment.appointmentType}</span>
+                  <div className="grid gap-4 sm:grid-cols-2">
+                     <div className="flex items-center space-x-2">
+                        <Image src={'/assets/icons/calendar.svg'} alt="Video section" width={50} height={50} className="w-6 h-6 text-muted-foreground" />
+                        <span>{format(new Date(appointment.appointmentDate!), "PPPP")}</span>
+                     </div>
+                     <div className="flex items-center space-x-2">
+                        <Clock className="w-6 h-6 text-muted-foreground" />
+                        <span>{appointment.slot?.startTime} - {appointment.slot?.endTime}</span>
+                     </div>
+                     <div className="flex items-center space-x-2">
+                        {appointment.appointmentType === "video-consulting" ? (
+                           <Image src={'/assets/icons/utils/video.svg'} alt="Video section" width={50} height={50} className="w-6 h-6 text-muted-foreground" />
+                        ) : (
+                           <Image src={'/assets/icons/circle-user.svg'} alt="Video section" width={50} height={50} />
+                        )}
+                        <span className="capitalize">{appointment.appointmentType}</span>
+                     </div>
                   </div>
+                  <Separator />
                   <div>
-                     <h3 className="font-semibold mb-1 flex items-center">
-                        <FileText className="w-5 h-5 mr-2" />
-                        Reason
+                     <h3 className="font-semibold mb-2 flex items-center">
+                        <Image src={'/assets/icons/utils/file.svg'} alt="Video section" width={50} height={50} className="w-6 h-6 mr-2 text-muted-foreground" />
+                        Reason for Visit
                      </h3>
-                     <p>{appointment.reason}</p>
+                     <p className="text-sm text-muted-foreground">{appointment.reason}</p>
                   </div>
+                  <Separator />
                   <div>
-                     <h3 className="font-semibold mb-1 flex items-center">
-                        <FileText className="w-5 h-5 mr-2" />
-                        Notes
-                        <Button
+                     <h3 className="font-semibold mb-2 flex items-center justify-between">
+                        <span className="flex items-center">
+                           <Image src={'/assets/icons/utils/file.svg'} alt="Video section" width={50} height={50} className="w-6 h-6 mr-2 text-muted-foreground" />
+                           Notes
+                        </span>
+                        <ButtonV2
                            variant="ghost"
                            size="sm"
-                           className="ml-2"
                            onClick={() => {
-                              setNewNote(appointment.notes || "");
-                              setIsEditingNote(true);
+                              setNewNote(appointment.notes || "")
+                              setIsEditingNote(true)
                            }}
                         >
-                           <Edit2 className="w-4 h-4" />
-                        </Button>
+                           <Image src={'/assets/icons/edit.svg'} alt="Video section" width={50} height={50} className="w-6 h-6 mr-2" />
+                           Edit
+                        </ButtonV2>
                      </h3>
                      {isEditingNote ? (
-                        <div className="flex items-center space-x-2">
-                           <Input value={newNote} onChange={(e) => setNewNote(e.target.value)} className="flex-grow" />
-                           <Button variant={"info"} onClick={handleUpdateNote}>
-                              Save
-                           </Button>
-                           <Button variant="outline" onClick={() => setIsEditingNote(false)}>
-                              Cancel
-                           </Button>
+                        <div className="space-y-2">
+                           <Textarea
+                              value={newNote}
+                              onChange={(e) => setNewNote(e.target.value)}
+                              className="w-full"
+                              rows={3}
+                           />
+                           <div className="flex justify-end space-x-2">
+                              <ButtonV2 variant="secondary" onClick={() => setIsEditingNote(false)}>
+                                 Cancel
+                              </ButtonV2>
+                              <ButtonV2 variant={"ringHover"} onClick={handleUpdateNote}>
+                                 Save
+                              </ButtonV2>
+                           </div>
                         </div>
                      ) : (
-                        <p>{appointment.notes}</p>
+                        <p className="text-sm text-muted-foreground">{appointment.notes || "No notes added yet."}</p>
                      )}
                   </div>
                </CardContent>
+               <CardFooter className="justify-end">
+                  {(appointment.status === AppointmentStatus.CONFIRMED ||
+                     appointment.status === AppointmentStatus.PENDING) &&
+                     isCancellable() && (
+                        <ButtonV2 variant="destructive" onClick={() => setCancelModelOpen(true)}>
+                           Cancel Appointment
+                        </ButtonV2>
+                     )}
+               </CardFooter>
             </Card>
 
             <Card>
@@ -188,57 +209,33 @@ const Page = () => {
                      </div>
                      <div>
                         <h3 className="font-semibold">{appointment.doctor?.name}</h3>
-                        <p className="text-sm">{appointment.doctor?.qualifications?.join(", ")}</p>
+                        <p className="text-sm text-muted-foreground">{appointment.doctor?.qualifications?.join(", ")}</p>
                      </div>
                   </div>
+                  <Separator />
                   <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                         <Image
-                           src={"/assets/icons/email.svg"}
-                           width={23}
-                           height={23}
-                           alt={appointment.doctor?.email!}
-                           className="w-4 h-4"
+                           src="/assets/icons/email.svg"
+                           width={20}
+                           height={20}
+                           alt="Email"
+                           className="text-muted-foreground"
                         />
-                        <span>{appointment.doctor?.email}</span>
+                        <span className="text-sm">{appointment.doctor?.email}</span>
                      </div>
                      <div className="flex items-center space-x-2">
-                        <Phone className="w-4 h-4" />
-                        <span>{appointment.doctor?.phone}</span>
-                     </div>
-                  </div>
-               </CardContent>
-            </Card>
-
-            <Card className="lg:col-span-3">
-               <CardHeader>
-                  <CardTitle>Slot Information</CardTitle>
-               </CardHeader>
-               <CardContent className="grid grid-cols-1 md:grid-cols-3 gap-4">
-                  <div className="flex items-center space-x-2">
-                     <Clock className="w-5 h-5" />
-                     <div>
-                        <p className="font-semibold">Start Time</p>
-                        <p>{appointment.slot?.startTime}</p>
-                     </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                     <Clock className="w-5 h-5" />
-                     <div>
-                        <p className="font-semibold">End Time</p>
-                        <p>{appointment.slot?.endTime}</p>
+                        <Image
+                           src="/assets/icons/phone.svg"
+                           width={20}
+                           height={20}
+                           alt="Phone"
+                           className="text-muted-foreground"
+                        />
+                        <span className="text-sm">{appointment.doctor?.phone}</span>
                      </div>
                   </div>
                </CardContent>
-               <CardFooter className="justify-end">
-                  {(appointment.status === AppointmentStatus.CONFIRMED ||
-                     appointment.status === AppointmentStatus.PENDING) &&
-                     isCancellable() && (
-                        <Button variant="destructive" className="ml-2" onClick={() => setCancelModelOpen(true)}>
-                           Cancel Appointment
-                        </Button>
-                     )}
-               </CardFooter>
             </Card>
          </div>
          <ConfirmCancelAppointmentModelPatient
@@ -247,7 +244,5 @@ const Page = () => {
             handleCancelAppointment={handleCancelAppointment}
          />
       </div>
-   );
-};
-
-export default Page;
+   )
+}
\ No newline at end of file
diff --git a/client/app/(patient)/appointments/page.tsx b/client/app/(patient)/appointments/page.tsx
index 512fb28b..07224c16 100644
--- a/client/app/(patient)/appointments/page.tsx
+++ b/client/app/(patient)/appointments/page.tsx
@@ -1,95 +1,98 @@
-"use client";
+'use client'
 
-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 { Calendar, FileText, Video, User } from "lucide-react";
-import { useState } from "react";
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { format } from "date-fns"
+import { FileText, Video, User } from "lucide-react"
+import { useGetAppointmentsPatient } from "@/lib/hooks/appointment/useAppointmentPatient"
+import Pagination from "@/components/navigation/Pagination"
+import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+import { ButtonV2 } from "@/components/button/ButtonV2"
 
-const AppointmentsPageSection = ({ searchParams }: { searchParams: { page: number } }) => {
-   const page = searchParams.page || 1;
-   const [currentPage, setCurrentPage] = useState(page);
-   const { data, isLoading } = useGetAppointmentsPatient(page-1, 4);
-   const router = useRouter();
+export default function AppointmentsPageSection({ searchParams }: { searchParams: { page: number } }) {
+  const page = searchParams.page || 1
+  const [currentPage, setCurrentPage] = useState(page)
+  const { data, isLoading } = useGetAppointmentsPatient(page - 1, 4)
+  const router = useRouter()
 
-   const handlePageChange = (pageIndex: number) => {
-      if (pageIndex > data?.totalPages! || pageIndex < 1) return null;
-      router.replace(`/appointments?page=${pageIndex}`);
-      setCurrentPage(pageIndex);
-   };
+  const handlePageChange = (pageIndex: number) => {
+    if (pageIndex > data?.totalPages! || pageIndex < 1) return null
+    router.replace(`/appointments?page=${pageIndex}`)
+    setCurrentPage(pageIndex)
+  }
 
-   const handleViewDetails = (appointmentId: string) => {
-      router.push(`/appointments/${appointmentId}`);
-   };
+  const handleViewDetails = (appointmentId: string) => {
+    router.push(`/appointments/${appointmentId}`)
+  }
 
-   return (
-      <div className="min-h-screen p-4 sm:p-6 md:p-8">
-         <div className="max-w-4xl mx-auto space-y-4">
-            <h1 className="text-3xl font-bold text-green-400 mb-6">My Appointments</h1>
-
-            {data?.items.map((appointment) => (
-               <Card
-                  key={appointment._id}
-                  className="mb-4 bg-dark-400 border-gray-400 shadow-md hover:shadow-lg transition-shadow duration-300"
-               >
-                  <CardHeader className="py-3 px-4 bg-gray-750 border-b border-gray-700">
-                     <CardTitle className="flex justify-between items-center text-base">
-                        <div className="flex items-center space-x-2">
-                           <Calendar className="w-4 h-4 text-green-400" />
-                           <span className="text-gray-100">
-                              {format(new Date(appointment.appointmentDate!), "dd/MM/yy")}
-                           </span>
-                        </div>
-                        <GetStatusBadge status={appointment.status!} />
-                     </CardTitle>
-                  </CardHeader>
-                  <CardContent className="py-3 px-4">
-                     <div className="grid grid-cols-2 gap-2 text-sm">
-                        <div className="flex items-center space-x-2">
-                           {appointment.appointmentType === "video-consulting" ? (
-                              <Video className="w-4 h-4 text-blue-400" />
-                           ) : (
-                              <User className="w-4 h-4 text-blue-400" />
-                           )}
-                           <p className="text-gray-300">{appointment.appointmentType}</p>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                           <FileText className="w-4 h-4 text-blue-400" />
-                           <p className="text-gray-300 truncate">{appointment.reason}</p>
-                        </div>
-                     </div>
-                  </CardContent>
-                  <CardFooter className="py-2 px-4 bg-gray-750 border-t border-gray-700 flex justify-end">
-                     <ButtonV2
-                        variant="gooeyRight"
-                        size="sm"
-                        onClick={() => handleViewDetails(appointment._id!)}
-                        className="text-green-400  border-green-500"
-                     >
-                        View Details
-                     </ButtonV2>
-                  </CardFooter>
-               </Card>
-            ))}
-
-            <div className="mt-6">
-               {!isLoading && (
-                  <Pagination
-                     currentPage={currentPage}
-                     handlePageChange={handlePageChange}
-                     hasNextPage={data?.hasNextPage!}
-                     hasPrevPage={data?.hasPreviousPage!}
-                     totalPages={data?.totalPages!}
-                  />
-               )}
-            </div>
-         </div>
-      </div>
-   );
-};
-
-export default AppointmentsPageSection;
+  return (
+    <div className="container mx-auto py-10">
+      <h1 className="text-4xl font-bold mb-8 text-primary">My Appointments</h1>
+      {isLoading ? (
+        <div className="space-y-4">
+          {[...Array(4)].map((_, index) => (
+            <Card key={index} className="bg-card">
+              <CardHeader>
+                <Skeleton className="h-6 w-1/3" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-4 w-full mb-2" />
+                <Skeleton className="h-4 w-2/3" />
+              </CardContent>
+              <CardFooter>
+                <Skeleton className="h-10 w-28" />
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {data?.items.map((appointment) => (
+            <Card key={appointment._id} className="bg-card hover:shadow-lg transition-shadow duration-300">
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-lg font-medium">
+                  Appointment on {format(new Date(appointment.appointmentDate!), "MMMM d, yyyy")}
+                </CardTitle>
+                <GetStatusBadge status={appointment.status!} />
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="flex items-center space-x-2">
+                    {appointment.appointmentType === "video-consulting" ? (
+                      <Video className="h-4 w-4 text-primary" />
+                    ) : (
+                      <User className="h-4 w-4 text-primary" />
+                    )}
+                    <span className="text-sm text-muted-foreground capitalize">{appointment.appointmentType}</span>
+                  </div>
+                  <div className="flex items-center space-x-2 col-span-2">
+                    <FileText className="h-4 w-4 text-primary" />
+                    <span className="text-sm text-muted-foreground truncate">{appointment.reason}</span>
+                  </div>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <ButtonV2 onClick={() => handleViewDetails(appointment._id!)} variant="ringHover" className="w-full">
+                  View Details
+                </ButtonV2>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      )}
+      {!isLoading && (
+        <div className="mt-8">
+          <Pagination
+            currentPage={currentPage}
+            handlePageChange={handlePageChange}
+            hasNextPage={data?.hasNextPage!}
+            hasPrevPage={data?.hasPreviousPage!}
+            totalPages={data?.totalPages!}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/client/app/(patient)/chats/@chatList/page.tsx b/client/app/(patient)/chats/@chatList/page.tsx
index f162de75..98e1734d 100644
--- a/client/app/(patient)/chats/@chatList/page.tsx
+++ b/client/app/(patient)/chats/@chatList/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import NewChatModal, { ChatModelUser } from "@/components/models/chat/AddChatModel";
 import ChatList from "@/components/page-components/chat/ChatList"
 import { toast } from "@/components/ui/use-toast";
diff --git a/client/app/(patient)/new-appointment/cancel/[id]/page.tsx b/client/app/(patient)/new-appointment/cancel/[id]/page.tsx
index f9d4b5b6..e5b4166d 100644
--- a/client/app/(patient)/new-appointment/cancel/[id]/page.tsx
+++ b/client/app/(patient)/new-appointment/cancel/[id]/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { XCircle } from "lucide-react";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import { useEffect, useState } from "react";
 import { BreadcrumbCollapsed } from "@/components/navigation/BreadCrumbs";
 
diff --git a/client/app/(patient)/profile/page.tsx b/client/app/(patient)/profile/page.tsx
index 64a5c59b..eb483bc5 100644
--- a/client/app/(patient)/profile/page.tsx
+++ b/client/app/(patient)/profile/page.tsx
@@ -4,7 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import Image from "next/image";
 import { useState } from "react";
 import { useGetPatientProfile } from "@/lib/hooks/patient/usePatient";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import dynamic from "next/dynamic";
 import Loading from "@/components/skeletons/Loader";
 
diff --git a/client/app/(patient)/signin/reset-password/page.tsx b/client/app/(patient)/signin/reset-password/page.tsx
index 07fcfa77..5b87e76b 100644
--- a/client/app/(patient)/signin/reset-password/page.tsx
+++ b/client/app/(patient)/signin/reset-password/page.tsx
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
 import CustomFormField from "@/components/common/CustomFormField";
 import { FormFieldType } from "@/types/fromTypes";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { useUpdatePassword } from "@/lib/hooks/patient/usePatientAuth";
 import { Form } from "@/components/ui/form";
 import { useAuth } from "@/lib/hooks/useAuth";
diff --git a/client/app/doctor/@auth/reset-password/page.tsx b/client/app/doctor/@auth/reset-password/page.tsx
index 5e0c5f46..b7b72c3d 100644
--- a/client/app/doctor/@auth/reset-password/page.tsx
+++ b/client/app/doctor/@auth/reset-password/page.tsx
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
 import CustomFormField from "@/components/common/CustomFormField";
 import { FormFieldType } from "@/types/fromTypes";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { useUpdatePassword } from "@/lib/hooks/patient/usePatientAuth";
 import { Form } from "@/components/ui/form";
 import { useAuth } from "@/lib/hooks/useAuth";
diff --git a/client/app/doctor/appointments/[id]/page.tsx b/client/app/doctor/appointments/[id]/page.tsx
index 4e95c43d..bd825362 100644
--- a/client/app/doctor/appointments/[id]/page.tsx
+++ b/client/app/doctor/appointments/[id]/page.tsx
@@ -12,7 +12,7 @@ import AppointmentCancellationModal from '@/components/models/appointment/Confir
 import { Calendar, Clock, FileText, Video, User, Phone, AlertCircle } from 'lucide-react'
 import { format } from 'date-fns'
 import { useState } from 'react'
-import { ButtonV2 } from '@/components/common/ButtonV2'
+import { ButtonV2 } from '@/components/button/ButtonV2'
 
 export default function AppointmentDetailsPage() {
   const params = useParams()
diff --git a/client/components/common/ButtonV2.tsx b/client/components/button/ButtonV2.tsx
similarity index 100%
rename from client/components/common/ButtonV2.tsx
rename to client/components/button/ButtonV2.tsx
diff --git a/client/components/button/NotificationButtonDoctor.tsx b/client/components/button/NotificationButtonDoctor.tsx
index 59086443..c2247a9b 100644
--- a/client/components/button/NotificationButtonDoctor.tsx
+++ b/client/components/button/NotificationButtonDoctor.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import { Bell } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import NotificationModal from "@/components/models/NotificationModel";
 import {
   useGetAllDoctorNotifications,
diff --git a/client/components/button/NotificationButtonPatient.tsx b/client/components/button/NotificationButtonPatient.tsx
index 854ccc91..1cfbd816 100644
--- a/client/components/button/NotificationButtonPatient.tsx
+++ b/client/components/button/NotificationButtonPatient.tsx
@@ -2,7 +2,7 @@
 
 import { Bell } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import { useState } from "react";
 import { useGetAllPatientNotifications, useClearPatientNotification, useClearMultiplePatientNotifications } from "@/lib/hooks/notification/useNotificationPatient";
 import { INotification } from "@/types";
diff --git a/client/components/common/SubmitButton.tsx b/client/components/button/SubmitButton.tsx
similarity index 100%
rename from client/components/common/SubmitButton.tsx
rename to client/components/button/SubmitButton.tsx
diff --git a/client/components/forms/admin/SigninForm.tsx b/client/components/forms/admin/SigninForm.tsx
index 3f5a0cf4..e5e33368 100644
--- a/client/components/forms/admin/SigninForm.tsx
+++ b/client/components/forms/admin/SigninForm.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { signinFormValidation } from "@/components/forms/actions/adminValidation";
 import { FormFieldType } from "@/types/fromTypes";
 import { useSigninAdmin } from "@/lib/hooks/admin/useAdminAuth";
diff --git a/client/components/forms/doctor/ForgetPasswordForm.tsx b/client/components/forms/doctor/ForgetPasswordForm.tsx
index a00b5aa4..ae4506b6 100644
--- a/client/components/forms/doctor/ForgetPasswordForm.tsx
+++ b/client/components/forms/doctor/ForgetPasswordForm.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import SubmitButton from "../../common/SubmitButton";
+import SubmitButton from "../../button/SubmitButton";
 import CustomFormField from "../../common/CustomFormField";
 import { FormFieldType } from "@/types/fromTypes";
 import { toast } from "../../ui/use-toast";
diff --git a/client/components/forms/doctor/SigninForm.tsx b/client/components/forms/doctor/SigninForm.tsx
index e75eacdd..bb7a6eb7 100644
--- a/client/components/forms/doctor/SigninForm.tsx
+++ b/client/components/forms/doctor/SigninForm.tsx
@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form, FormMessage } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { signinFormValidation } from "@/components/forms/actions/adminValidation";
 import { FormFieldType } from "@/types/fromTypes";
 import Link from "next/link";
diff --git a/client/components/forms/doctor/SignupForm.tsx b/client/components/forms/doctor/SignupForm.tsx
index 8c3884ca..c59e462b 100644
--- a/client/components/forms/doctor/SignupForm.tsx
+++ b/client/components/forms/doctor/SignupForm.tsx
@@ -2,16 +2,15 @@
 
 import { useState } from "react";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { FormFieldType } from "@/types/fromTypes";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
-import { Button } from "@/components/ui/button";
 import { useSignUpDoctor, useUpdateProfileImageDoctor } from "@/lib/hooks/doctor/useDoctorAuth";
 import useCrop from "@/lib/hooks/useCrop";
 import CropImage from "@/components/common/CropImage";
@@ -19,7 +18,8 @@ import getCroppedImg from "@/lib/utils/cropImage";
 import { Input } from "@/components/ui/input";
 import { getPresignedUrlDoctor } from "@/lib/api/doctor/authenticationRoutes";
 import axios from "axios";
-import { PlusCircle, X } from "lucide-react";
+import { DoctorDegrees } from "@/constants";
+import { MultiSelect } from "@/components/ui/multi-select"
 
 const ALLOWED_FILE_TYPES = ["image/jpeg", "image/png"];
 const MAX_FILE_SIZE = 5 * 1024 * 1024;
@@ -101,15 +101,10 @@ const SignUpForm = () => {
          name: "",
          email: "",
          confirmPassword: "",
-         qualifications: [""],
+         qualifications: [],
       },
    });
 
-   const { fields, append, remove } = useFieldArray({
-      control: form.control,
-      name: "qualifications" as never,
-   });
-
    const onSubmit = async (formData: FormValues) => {
       setError("");
       setLoading(true);
@@ -290,46 +285,16 @@ const SignUpForm = () => {
             <FormField
                control={form.control}
                name="qualifications"
-               render={() => (
+               render={({ field }) => (
                   <FormItem className="space-y-4">
                      <FormLabel>Qualifications *</FormLabel>
-                     <div className="flex flex-wrap items-center gap-2">
-                        {fields.map((field, index) => (
-                           <div key={field.id} className="flex items-center bg-secondary rounded-full pl-3 pr-1 py-1">
-                              <Controller
-                                 name={`qualifications.${index}`}
-                                 control={form.control}
-                                 render={({ field }) => (
-                                    <Input
-                                       {...field}
-                                       placeholder="Enter qualification"
-                                       className="border-none bg-transparent p-0 h-auto text-sm focus-visible:ring-0 focus-visible:ring-offset-0"
-                                    />
-                                 )}
-                              />
-                              <Button
-                                 type="button"
-                                 variant="ghost"
-                                 size="sm"
-                                 className="h-auto p-1 hover:bg-secondary-foreground/10 rounded-full"
-                                 onClick={() => remove(index)}
-                                 aria-label="Remove qualification"
-                              >
-                                 <X className="h-4 w-4" />
-                              </Button>
-                           </div>
-                        ))}
-                        <Button
-                           type="button"
-                           variant="outline"
-                           size="sm"
-                           onClick={() => append("")}
-                           className="rounded-full"
-                        >
-                           <PlusCircle className="h-4 w-4 mr-2" />
-                           Add
-                        </Button>
-                     </div>
+                     <MultiSelect
+                        options={DoctorDegrees.map(degree => ({ label: degree, value: degree }))}
+                        placeholder="Select qualifications"
+                        className="w-full"
+                        {...field}
+                        onValueChange={(value) => field.onChange(value)}
+                     />
                      <FormMessage className="shad-error" />
                   </FormItem>
                )}
diff --git a/client/components/forms/patient/AppointmentForm.tsx b/client/components/forms/patient/AppointmentForm.tsx
index 798505d0..4d0fff2b 100644
--- a/client/components/forms/patient/AppointmentForm.tsx
+++ b/client/components/forms/patient/AppointmentForm.tsx
@@ -5,7 +5,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { appointmentFormValidation } from "@/components/forms/actions/userValidation";
 import { SelectItem } from "@/components/ui/select";
 import Image from "next/image";
diff --git a/client/components/forms/patient/OtpForms.tsx b/client/components/forms/patient/OtpForms.tsx
index 1ab3cf25..f864cbd1 100644
--- a/client/components/forms/patient/OtpForms.tsx
+++ b/client/components/forms/patient/OtpForms.tsx
@@ -4,7 +4,7 @@ import { FormEvent } from "react";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/input-otp";
 import { Otptimer } from "otp-timer-ts";
 import { OtpFromProps } from "@/types/fromTypes";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 
 export default function OtpVerificationSection({
    handleVerify,
diff --git a/client/components/forms/patient/RegistrationForm.tsx b/client/components/forms/patient/RegistrationForm.tsx
index 65520da4..15699185 100644
--- a/client/components/forms/patient/RegistrationForm.tsx
+++ b/client/components/forms/patient/RegistrationForm.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form, FormControl } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { registerFormValidation } from "@/components/forms/actions/userValidation";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@radix-ui/react-label";
diff --git a/client/components/forms/patient/SigninForm.tsx b/client/components/forms/patient/SigninForm.tsx
index 249357b8..69921b0b 100644
--- a/client/components/forms/patient/SigninForm.tsx
+++ b/client/components/forms/patient/SigninForm.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { signinFormValidation } from "@/components/forms/actions/userValidation";
 import Link from "next/link";
 import { FormFieldType } from "@/types/fromTypes";
diff --git a/client/components/forms/patient/SignupForm.tsx b/client/components/forms/patient/SignupForm.tsx
index ed761716..da60fbe9 100644
--- a/client/components/forms/patient/SignupForm.tsx
+++ b/client/components/forms/patient/SignupForm.tsx
@@ -6,7 +6,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { Form } from "@/components/ui/form";
 import CustomFormField from "@/components/common/CustomFormField";
-import SubmitButton from "@/components/common/SubmitButton";
+import SubmitButton from "@/components/button/SubmitButton";
 import { signupFormValidation } from "@/components/forms/actions/userValidation";
 import { FormFieldType } from "@/types/fromTypes";
 import Link from "next/link";
diff --git a/client/components/layout/NavBar.tsx b/client/components/layout/NavBar.tsx
index cd99afda..a60de849 100644
--- a/client/components/layout/NavBar.tsx
+++ b/client/components/layout/NavBar.tsx
@@ -20,7 +20,7 @@ import { useLogoutMutation } from "@/lib/hooks/patient/usePatientAuth";
 import { toast } from "../ui/use-toast";
 import { useState } from "react";
 import LogoutModel from "../models/LogoutModel";
-import { ButtonV2 } from "../common/ButtonV2";
+import { ButtonV2 } from "../button/ButtonV2";
 import NotificationButtonPatient from "../button/NotificationButtonPatient";
 
 export const NavBar = () => {
diff --git a/client/components/models/NotificationModel.tsx b/client/components/models/NotificationModel.tsx
index 1a5c32a7..b4168188 100644
--- a/client/components/models/NotificationModel.tsx
+++ b/client/components/models/NotificationModel.tsx
@@ -14,7 +14,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { INotification } from "@/types";
 import getNotificationDetails from "@/lib/utils/getNotificationDetails";
 import { XIcon, Trash2Icon } from "lucide-react";
-import { ButtonV2 } from "../common/ButtonV2";
+import { ButtonV2 } from "../button/ButtonV2";
 import Link from "next/link";
 
 type Props = {
diff --git a/client/components/models/patient/ForgetPasswordModel.tsx b/client/components/models/patient/ForgetPasswordModel.tsx
index a6e476f9..3ca2ca26 100644
--- a/client/components/models/patient/ForgetPasswordModel.tsx
+++ b/client/components/models/patient/ForgetPasswordModel.tsx
@@ -14,7 +14,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Form } from "@/components/ui/form";
-import SubmitButton from "../../common/SubmitButton";
+import SubmitButton from "../../button/SubmitButton";
 import CustomFormField from "../../common/CustomFormField";
 import { FormFieldType } from "@/types/fromTypes";
 import { useForgetPassword } from "@/lib/hooks/patient/usePatientAuth";
diff --git a/client/components/models/patient/UpdateProfilePatient.tsx b/client/components/models/patient/UpdateProfilePatient.tsx
index 216713bf..f720eb22 100644
--- a/client/components/models/patient/UpdateProfilePatient.tsx
+++ b/client/components/models/patient/UpdateProfilePatient.tsx
@@ -7,7 +7,7 @@ import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { updateProfileFormValidation } from "@/components/forms/actions/userValidation";
 import { zodResolver } from "@hookform/resolvers/zod";
-import SubmitButton from "../../common/SubmitButton";
+import SubmitButton from "../../button/SubmitButton";
 import { IPatient } from "@/types";
 import CustomFormField from "../../common/CustomFormField";
 import { FormFieldType } from "@/types/fromTypes";
diff --git a/client/components/models/patient/UploadProfileModel.tsx b/client/components/models/patient/UploadProfileModel.tsx
index a3a8535e..450ea6ef 100644
--- a/client/components/models/patient/UploadProfileModel.tsx
+++ b/client/components/models/patient/UploadProfileModel.tsx
@@ -7,7 +7,7 @@ import { Form, FormLabel } from "../../ui/form";
 import { useForm, SubmitHandler } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import SubmitButton from "../../common/SubmitButton";
+import SubmitButton from "../../button/SubmitButton";
 import {IPatient}  from "@/types";
 import { Input } from "../../ui/input";
 import { toast } from "../../ui/use-toast";
diff --git a/client/components/page-components/chat/ChatList.tsx b/client/components/page-components/chat/ChatList.tsx
index b96278d2..0a466e4d 100644
--- a/client/components/page-components/chat/ChatList.tsx
+++ b/client/components/page-components/chat/ChatList.tsx
@@ -6,7 +6,7 @@ import { PlusCircle } from "lucide-react"
 import { IChat } from "@/types"
 import { getSenderData } from './getUserData'
 import ChatListSkeleton from "@/components/skeletons/ChatList"
-import { ButtonV2 } from "@/components/common/ButtonV2"
+import { ButtonV2 } from "@/components/button/ButtonV2"
 
 interface ChatListProps {
   chats: IChat[];
diff --git a/client/components/page-components/chat/ChatSection.tsx b/client/components/page-components/chat/ChatSection.tsx
index 410a8652..f9c1ddd8 100644
--- a/client/components/page-components/chat/ChatSection.tsx
+++ b/client/components/page-components/chat/ChatSection.tsx
@@ -10,7 +10,7 @@ import { Spinner } from "@/components/skeletons/spinner"
 import { getReceiverData, getSenderData } from "./getUserData"
 import dynamic from 'next/dynamic'
 import { EmojiClickData, Theme } from 'emoji-picker-react'
-import { ButtonV2 } from "@/components/common/ButtonV2"
+import { ButtonV2 } from "@/components/button/ButtonV2"
 import Messages from "./Messages"
 import { useQueryClient } from "@tanstack/react-query"
 
diff --git a/client/components/page-components/chat/NotAuthenticated.tsx b/client/components/page-components/chat/NotAuthenticated.tsx
index 59942ff5..a1199c8e 100644
--- a/client/components/page-components/chat/NotAuthenticated.tsx
+++ b/client/components/page-components/chat/NotAuthenticated.tsx
@@ -1,4 +1,4 @@
-import { ButtonV2 } from "@/components/common/ButtonV2"
+import { ButtonV2 } from "@/components/button/ButtonV2"
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
 import { LogIn } from "lucide-react"
 import Link from "next/link"
diff --git a/client/components/page-components/landing/home/ImageSlider.tsx b/client/components/page-components/landing/home/ImageSlider.tsx
index 9184f513..5a8b84db 100644
--- a/client/components/page-components/landing/home/ImageSlider.tsx
+++ b/client/components/page-components/landing/home/ImageSlider.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { ImagesSlider } from "@/components/ui/images-slider";
 import { SliderImages } from "@/constants";
 import { useAuth } from "@/lib/hooks/useAuth";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 
 const ImageSlider = () => {
    const { patientToken } = useAuth();
diff --git a/client/components/page-components/patient/profile/NavSection.tsx b/client/components/page-components/patient/profile/NavSection.tsx
index 9fd01b1c..9fbcf931 100644
--- a/client/components/page-components/patient/profile/NavSection.tsx
+++ b/client/components/page-components/patient/profile/NavSection.tsx
@@ -6,7 +6,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { IPatient } from "@/types";
 import UploadProfileModel from "@/components/models/patient/UploadProfileModel";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 
 interface Props {
   setSection: (state: "profile") => void;
diff --git a/client/components/view/table/DoctorAppointmentTable.tsx b/client/components/view/table/DoctorAppointmentTable.tsx
index 3c997dbe..8740e7ee 100644
--- a/client/components/view/table/DoctorAppointmentTable.tsx
+++ b/client/components/view/table/DoctorAppointmentTable.tsx
@@ -10,7 +10,7 @@ import TableSkeleton from "@/components/skeletons/TableSkelton";
 import Pagination from "@/components/navigation/Pagination";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import GetStatusBadge from "@/components/page-components/doctor/appointment/GetStatusBadge";
-import { ButtonV2 } from "@/components/common/ButtonV2";
+import { ButtonV2 } from "@/components/button/ButtonV2";
 import { format } from 'date-fns'
 
 
diff --git a/client/constants/index.ts b/client/constants/index.ts
index c681b324..3e4c1790 100644
--- a/client/constants/index.ts
+++ b/client/constants/index.ts
@@ -109,6 +109,39 @@ export const SliderImages: string[] = [
    // "https://images.unsplash.com/photo-1482189349482-3defd547e0e9?q=80&w=2848&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
 ];
 
+export const DoctorDegrees = [
+   "MBBS (Medicine and Surgery)",
+   "MD (Medicine)",
+   "DO (Osteopathic Medicine)",
+   "DDS (Dental Surgery)",
+   "DMD (Dental Medicine)",
+   "BDS (Bachelor of Dental Surgery)",
+   "BAMS (Ayurveda Medicine and Surgery)",
+   "BUMS (Unani Medicine and Surgery)",
+   "BHMS (Homeopathic Medicine and Surgery)",
+   "DPM (Podiatric Medicine)",
+   "DC (Chiropractic)",
+   "OD (Optometry)",
+   "PharmD (Pharmacy)",
+   "DVM (Veterinary Medicine)",
+   "DrPH (Public Health)",
+   "PsyD (Psychology)",
+   "DPT (Physical Therapy)",
+   "OTD (Occupational Therapy)",
+   "AuD (Audiology)",
+   "ND (Naturopathic Medicine)",
+   "DSc (Doctor of Science)",
+   "DNP (Nursing Practice)",
+   "DHSc (Health Science)",
+   "MS (Master of Surgery)",
+   "MCh (Master of Chirurgiae)",
+   "MSc (Master of Science in Medicine)",
+   "PhD (Doctor of Philosophy in Medicine)",
+   "DM (Doctor of Medicine)",
+   "MD-PhD (Dual Degree in Medicine and Research)"
+ ];
+ 
+
 export const DummyDoctors = [
    {
       _id: "66e18ca5f2448c308b75a861",
diff --git a/client/public/assets/icons/utils/file.svg b/client/public/assets/icons/utils/file.svg
new file mode 100644
index 00000000..fbffddcc
--- /dev/null
+++ b/client/public/assets/icons/utils/file.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-clipboard-text"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M9 12h6" /><path d="M9 16h6" /></svg>
\ No newline at end of file
diff --git a/client/public/assets/icons/utils/video.svg b/client/public/assets/icons/utils/video.svg
new file mode 100644
index 00000000..7f3aa4a8
--- /dev/null
+++ b/client/public/assets/icons/utils/video.svg
@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="white"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-video"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" /><path d="M3 6m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /></svg>
\ No newline at end of file