diff --git a/components/AppointmentTable/AppointmentPage.jsx b/components/AppointmentTable/AppointmentPage.jsx
new file mode 100644
index 0000000..1288a33
--- /dev/null
+++ b/components/AppointmentTable/AppointmentPage.jsx
@@ -0,0 +1,98 @@
+import Image from "next/image";
+import dayjs from "dayjs";
+import { TableRow, TableCell } from "@mui/material";
+import { capitalize, formateDate } from "@/utils/heplerFunction";
+
+export default function AppointmentPage({
+  appointments,
+  page,
+  rowsPerPage,
+  order,
+  searchTerm,
+  userType,
+}) {
+  // Function to sort appointments based on booking date and time
+  const sortedAppointments = () => {
+    const comparator = (a, b) => {
+      const dateA = dayjs(a.bookingDate + " " + a.time);
+      const dateB = dayjs(b.bookingDate + " " + b.time);
+
+      if (order === "asc") {
+        return dateA - dateB;
+      } else {
+        return dateB - dateA;
+      }
+    };
+
+    return appointments.sort(comparator);
+  };
+
+  // Function to filter appointments based on search term
+  const filteredAppointments = () => {
+    return sortedAppointments().filter((appointment) =>
+      appointment.doctor.name.toLowerCase().includes(searchTerm?.toLowerCase())
+    );
+  };
+
+  const startIndex = page * rowsPerPage;
+  const endIndex = startIndex + rowsPerPage;
+
+  let filteredAppointment;
+  if (userType === "doctor") {
+    filteredAppointment = sortedAppointments();
+  } else {
+    filteredAppointment = filteredAppointments();
+  }
+
+  // If search term is not empty and no appointments are found, display a message
+  if (searchTerm !== "" && filteredAppointment.length === 0) {
+    return (
+      <p className="p-4 text-headingColor text-[16px] font-semibold">
+        Docter not found
+      </p>
+    );
+  }
+
+  // Render the filtered appointments within the specified range
+  return filteredAppointment.slice(startIndex, endIndex).map((item) => (
+    <TableRow key={item._id}>
+      <TableCell>
+        <div className="flex items-center">
+          <Image
+            src={userType === "doctor" ? item.user?.photo : item.doctor?.photo}
+            alt=""
+            className="rounded-full"
+            width={40}
+            height={40}
+          />
+          <div className="pl-3">
+            <div className="text-base font-semibold">
+              {capitalize(
+                userType === "doctor" ? item.user?.name : item.doctor?.name
+              )}
+            </div>
+            <div className="text-gray-500">
+              {userType === "doctor" ? item.user?.email : item.doctor?.email}
+            </div>
+          </div>
+        </div>
+      </TableCell>
+      <TableCell>
+        {item.isPaid ? (
+          <div className="flex items-center">
+            <div className="h-2.5 w-2.5 bg-green-500 mr-2"></div>
+            Paid
+          </div>
+        ) : (
+          <div className="flex items-center">
+            <div className="h-2.5 w-2.5 bg-red-500 mr-2"></div>
+            Unpaid
+          </div>
+        )}
+      </TableCell>
+      <TableCell>{item.fees}</TableCell>
+      <TableCell>{item.time}</TableCell>
+      <TableCell>{formateDate(item.bookingDate)}</TableCell>
+    </TableRow>
+  ));
+}
diff --git a/components/AppointmentTable/TablePagination.jsx b/components/AppointmentTable/TablePagination.jsx
new file mode 100644
index 0000000..fe9da1e
--- /dev/null
+++ b/components/AppointmentTable/TablePagination.jsx
@@ -0,0 +1,121 @@
+import {
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  TablePagination,
+  TableSortLabel,
+  TextField,
+} from "@mui/material";
+import Head from "next/head";
+import AppointmentPage from "./AppointmentPage";
+import { useState } from "react";
+import { formateDate } from "@/utils/heplerFunction";
+
+export default function AppointmentTablePagination({ type, appointments }) {
+  const [page, setPage] = useState(0);
+  const [rowsPerPage, setRowsPerPage] = useState(5);
+
+  const [order, setOrder] = useState("asc");
+  const [orderBy, setOrderBy] = useState("bookingDate");
+  const [searchTerm, setSearchTerm] = useState("");
+
+  // Function to handle page change
+  const handleChangePage = (event, newPage) => {
+    setPage(newPage);
+  };
+
+  // Function to handle rows per page change
+  const handleChangeRowsPerPage = (event) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  // Function to handle sorting request
+  const handleRequestSort = (property) => {
+    const isAsc = orderBy === property && order === "asc";
+    setOrder(isAsc ? "desc" : "asc");
+    setOrderBy(property);
+  };
+
+  // Function to handle search term change
+  const handleSearchChange = (event) => {
+    setSearchTerm(event.target.value);
+    setPage(0);
+  };
+
+  return (
+    <div>
+      {/* <Head>
+        <title>Appointment page</title>
+        <meta
+          name="description"
+          content="User profile setting and appointment data"
+        />
+      </Head> */}
+
+      {appointments.length === 0 && (
+        <h2 className="mt-5 text-center  leading-7 text-[20px] font-semibold text-primaryColor">
+          {`You did not ${
+            type === "user" ? " book " : " have"
+          } any appointment yet!`}
+        </h2>
+      )}
+
+      {appointments.length > 0 && (
+        <>
+          {type === "user" && (
+            <TextField
+              label="Search Doctor"
+              variant="outlined"
+              fullWidth
+              margin="normal"
+              value={searchTerm}
+              onChange={handleSearchChange}
+              className="mt-5"
+            />
+          )}
+          <Table className="w-full text-left text-sm text-gray-500 mt-3">
+            <TableHead>
+              <TableRow>
+                <TableCell>Doctor Name</TableCell>
+                <TableCell>Status</TableCell>
+                <TableCell>Fees</TableCell>
+                <TableCell>Time</TableCell>
+                <TableCell>
+                  <TableSortLabel
+                    active={orderBy === "bookingDate"}
+                    direction={orderBy === "bookingDate" ? order : "asc"}
+                    onClick={() => handleRequestSort("bookingDate")}
+                  >
+                    Booked For
+                  </TableSortLabel>
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <AppointmentPage
+                appointments={appointments}
+                page={page}
+                rowsPerPage={rowsPerPage}
+                order={order}
+                searchTerm={searchTerm}
+                userType={type}
+              />
+            </TableBody>
+          </Table>
+          <TablePagination
+            rowsPerPageOptions={[5, 8, 10]}
+            component="div"
+            count={appointments.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+          />
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/components/DFL/Card.jsx b/components/DFL/Card.jsx
new file mode 100644
index 0000000..4779698
--- /dev/null
+++ b/components/DFL/Card.jsx
@@ -0,0 +1,17 @@
+import Image from "next/image";
+import style from "../../styles/DFL/HomeDfl.module.scss";
+
+export default function Card({ title, text, img, alt = "" }) {
+  return (
+    <div className={style.card}>
+      <div>
+        <Image className={style.card_img_top} src={img} alt={alt} />
+      </div>
+
+      <div className={style.card_body}>
+        <h4 className={style.card_title}>{title}</h4>
+        <p className={style.card_text}>{text}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/components/DFL/Donate/MedicalInfoForm.js b/components/DFL/Donate/MedicalInfoForm.js
new file mode 100644
index 0000000..6d0b5e8
--- /dev/null
+++ b/components/DFL/Donate/MedicalInfoForm.js
@@ -0,0 +1,131 @@
+import { HashLoader } from "react-spinners";
+import style from "../../../styles/DFL/donate.module.scss";
+
+export default function MedicalInfoForm({
+  formData,
+  loading,
+  onSubmit,
+  onChange,
+  errors,
+  onBlur,
+}) {
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    onChange(name, value);
+  };
+  return (
+    <div>
+      <div className={style.peronsal_info}>
+        <h2 className={style.title}>Medical Info</h2>
+        <form>
+          <div className={style.form_items}>
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="last-donation-date">Last Donation Date</label>
+                <input
+                  type="date"
+                  name="lastDonationDate"
+                  value={formData.lastDonationDate}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.lastDonationDate && <p>{errors.lastDonationDate}</p>}
+              </div>
+              <div>
+                <label htmlFor="bloodType">Blood Type</label>
+                <input
+                  type="text"
+                  name="bloodType"
+                  required
+                  placeholder="Enter your blood type"
+                  value={formData.bloodType}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.bloodType && <p>{errors.bloodType}</p>}
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="styling">
+                  In the last six months have you had any of the following?
+                </label>
+              </div>
+              <div>
+                <label htmlFor="surgery">
+                  Is there any history of surgery in the past six months?
+                </label>
+              </div>
+            </div>
+            <div className={style.form_row}>
+              <div>
+                <select
+                  name="styling"
+                  id="disease"
+                  value={formData.styling}
+                  onChange={handleChange}
+                >
+                  <option value="">select</option>
+                  <option value="tattooing">Tattooing </option>
+                  <option value="ear_piercing">Ear piercing</option>
+                  <option value="dental_extraction">Dental extraction</option>
+                </select>
+              </div>
+              <div>
+                <select
+                  name="surgery"
+                  value={formData.surgery}
+                  onChange={handleChange}
+                >
+                  <option value="">select</option>
+                  <option value="major">Major</option>
+                  <option value="minor">Minor</option>
+                  <option value="blood_transfusion">Blood Transfusion </option>
+                </select>
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="weight">Weight</label>
+              </div>
+              <div>
+                <label htmlFor="disease">
+                  Do you suffer from or have suffered from any diseases?
+                </label>
+              </div>
+            </div>
+            <div className={style.form_row}>
+              <div>
+                <input
+                  type="text"
+                  name="weight"
+                  placeholder="Enter weight in Kg"
+                  required
+                  value={formData.weight}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.weight && <p>{errors.weight}</p>}
+              </div>
+              <div>
+                <input
+                  type="text"
+                  name="disease"
+                  placeholder="Enter disease name"
+                  value={formData.disease}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+              </div>
+            </div>
+          </div>
+          <button type="submit" onClick={onSubmit}>
+            {loading ? <HashLoader size={25} color="#ffffff" /> : "Submit"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/components/DFL/Donate/PersonalInfoForm.js b/components/DFL/Donate/PersonalInfoForm.js
new file mode 100644
index 0000000..6076137
--- /dev/null
+++ b/components/DFL/Donate/PersonalInfoForm.js
@@ -0,0 +1,180 @@
+import Image from "next/image";
+import donateLogo from "../../../public/assets/images/dfl/donate logo.png";
+
+import style from "../../../styles/DFL/donate.module.scss";
+
+export default function PersonalInfoForm({
+  formData,
+  onNextClick,
+  onChange,
+  onBlur,
+  errors,
+}) {
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    onChange(name, value);
+  };
+
+  return (
+    <>
+      <div className={style.peronsal_info}>
+        <div className={style.form_header}>
+          <div className={style.header_logo}>
+            <Image
+              src={donateLogo}
+              alt=""
+              width={400}
+              className="header-logo-left"
+            />
+          </div>
+          <div className={style.header_text}>
+            <h1>Blood Donation Form</h1>
+            <p>
+              Please answer the following questions correctly. This will help to
+              protect you and the patient who receives your blood.
+            </p>
+          </div>
+        </div>
+        <form>
+          <div className={style.form_items}>
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="name">Name</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  autoComplete="name"
+                  required
+                  value={formData.name}
+                  className={style.dfl_form__input}
+                  placeholder="Name"
+                  onChange={handleChange}
+                  onBlur={onBlur}
+                />
+                {errors.name && <p>{errors.name}</p>}
+              </div>
+              <div>
+                <label htmlFor="addharCard">Addhar card No</label>
+                <input
+                  type="text"
+                  name="addharCard"
+                  required
+                  value={formData.addharCard}
+                  className={style.dfl_form__input}
+                  placeholder="xxxx-xxxx-xxxx"
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.addharCard && <p>{errors.addharCard}</p>}
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="email">Email</label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  autoComplete="email"
+                  value={formData.email}
+                  className={style.dfl_form__input}
+                  placeholder="E-mail"
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                  readOnly
+                  aria-readonly
+                />
+                {errors.email && <p>{errors.email}</p>}
+              </div>
+              <div>
+                <label htmlFor="phone">Phone Number</label>
+                <input
+                  type="number"
+                  id="phone"
+                  name="phone"
+                  autoComplete="mobile"
+                  required
+                  value={formData.phone}
+                  className={style.dfl_form__input}
+                  placeholder="Phone Number"
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.phone && <p>{errors.phone}</p>}
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="dob">Date of Birth</label>
+                <input
+                  type="date"
+                  name="dob"
+                  className={style.dfl_form__input}
+                  id="dob"
+                  value={formData.dob}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.dob && <p>{errors.dob}</p>}
+              </div>
+              <div>
+                <label htmlFor="adress">Address</label>
+                <input
+                  type="text"
+                  name="address"
+                  required
+                  value={formData.address}
+                  className={style.dfl_form__input}
+                  placeholder="Enter your address"
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.address && <p>{errors.address}</p>}
+              </div>
+            </div>
+
+            <div className={style.form_row}>
+              <div>
+                <label htmlFor="gender">Gender</label>
+                <select
+                  name="gender"
+                  id="gender"
+                  required
+                  value={formData.gender}
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                >
+                  <option value="">Select</option>
+                  <option value="male">Male</option>
+                  <option value="female">Female</option>
+                  <option value="other">Other</option>
+                </select>
+                {errors.gender && <p>{errors.gender}</p>}
+              </div>
+              <div>
+                <label htmlFor="city">City</label>
+                <input
+                  type="text"
+                  id="city"
+                  name="city"
+                  required
+                  value={formData.city}
+                  placeholder="Enter city name"
+                  onBlur={onBlur}
+                  onChange={handleChange}
+                />
+                {errors.city && <p>{errors.city}</p>}
+              </div>
+            </div>
+          </div>
+          <button type="submit" onClick={onNextClick}>
+            Next
+          </button>
+        </form>
+      </div>
+    </>
+  );
+}
diff --git a/components/DFL/Request/DonorCard.jsx b/components/DFL/Request/DonorCard.jsx
new file mode 100644
index 0000000..b9c3adb
--- /dev/null
+++ b/components/DFL/Request/DonorCard.jsx
@@ -0,0 +1,160 @@
+import Model from "../../Timeslots/Model";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { capitalize } from "@/utils/heplerFunction";
+import { useState } from "react";
+import { FaTimes } from "react-icons/fa";
+import { BASE_URL } from "@/utils/config";
+
+import style from "../../../styles/DFL/request.module.scss";
+
+export default function DonorCard({ donor }) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [phone, setPhone] = useState("");
+  const initalForm = {
+    name: "",
+    phone: "",
+    address: "",
+    message: "",
+  };
+
+  const [formData, setFormData] = useState(initalForm);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  // Function for set Phone number of selected donor
+  const handleContactDonor = (phone) => {
+    setDialogOpen(true);
+    setPhone(phone);
+  };
+
+  // Function for close model and set form data empty
+  const handleCloseDialog = () => {
+    setDialogOpen(false);
+    setFormData(initalForm);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const data = {
+      ...formData,
+      donorPhone: phone,
+    };
+
+    try {
+      await axios.post(`${BASE_URL}/donor/sendSMS`, data);
+      setDialogOpen(false);
+      setFormData(initalForm);
+      toast.success("Message send Succefully!");
+    } catch (error) {
+      const err = error?.response?.data?.message || error?.message;
+      toast.error(err);
+      return null;
+    }
+  };
+
+  return (
+    <div className={style.card}>
+      <div className={style.inner}>
+        <span>{capitalize(donor.bloodType)}</span>
+        <h2>{donor.name}</h2>
+        <p>
+          <strong>Address: </strong> {donor.address}.
+        </p>
+        <ul className={style.features}>
+          <li>
+            <strong>city:</strong> {donor.city}
+          </li>
+          <li>
+            <strong>DOB:</strong>
+            {donor.dob}
+          </li>
+          <li>
+            <strong>Phone:</strong>
+            {donor.phone}
+          </li>
+        </ul>
+        <button
+          className="button"
+          onClick={() => handleContactDonor(donor.phone)}
+        >
+          Contact Donor
+        </button>
+      </div>
+      <Model open={dialogOpen}>
+        <div className={style.contect__model}>
+          <form>
+            <div>
+              <label htmlFor="bloodType">Name :</label>
+              <input
+                type="text"
+                name="name"
+                required
+                value={formData.name}
+                placeholder="Enter your name"
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="bloodType">Phone :</label>
+              <input
+                type="text"
+                name="phone"
+                required
+                value={formData.phone}
+                placeholder="Enter your phone no"
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="adress">Address :</label>
+              <input
+                type="text"
+                name="address"
+                required
+                value={formData.address}
+                placeholder="Enter  address"
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="city">Message :</label>
+              <textarea
+                type="text"
+                name="message"
+                rows={2}
+                value={formData.message}
+                placeholder="Enter message for doner "
+                onChange={handleChange}
+              />
+            </div>
+            <button
+              className={style.search_button}
+              type="submit"
+              onClick={handleSubmit}
+            >
+              Send Message
+            </button>
+          </form>
+        </div>
+        <div
+          className="absolute top-2 right-1 p-3 cursor-pointer text-red-600"
+          onClick={handleCloseDialog}
+        >
+          <FaTimes />
+        </div>
+      </Model>
+    </div>
+  );
+}
diff --git a/components/DFL/Request/LeftSidebar.jsx b/components/DFL/Request/LeftSidebar.jsx
new file mode 100644
index 0000000..a48a85c
--- /dev/null
+++ b/components/DFL/Request/LeftSidebar.jsx
@@ -0,0 +1,88 @@
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { HashLoader } from "react-spinners";
+
+import style from "../../../styles/DFL/request.module.scss";
+import { fetchDonorData, setPrevData } from "@/store/slices/DFLSlice";
+
+export default function LeftSidebar() {
+  const initalForm = {
+    city: "",
+    address: "",
+    bloodType: "",
+  };
+
+  const [formData, setFormData] = useState(initalForm);
+
+  const { loading } = useSelector((state) => state.dfl);
+  const dispatch = useDispatch();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    dispatch(setPrevData());
+    dispatch(fetchDonorData({ formData: formData, page: 1 }));
+    setFormData(initalForm);
+  };
+  return (
+    <div className={style.left_container}>
+      <form>
+        <div className="form-items">
+          <label htmlFor="bloodType">BloodType :</label>
+          <select
+            name="bloodType"
+            required
+            value={formData.bloodType}
+            onChange={handleChange}
+          >
+            <option value="">Select</option>
+            <option value="A+">A+</option>
+            <option value="A-">A-</option>
+            <option value="B+">B+</option>
+            <option value="B-">B-</option>
+            <option value="O+">O+</option>
+            <option value="O-">O-</option>
+            <option value="AB+">AB+</option>
+            <option value="AB-">AB-</option>
+          </select>
+
+          <label htmlFor="adress">Address :</label>
+          <input
+            type="text"
+            name="address"
+            required
+            value={formData.address}
+            placeholder="Enter  address"
+            onChange={handleChange}
+          />
+
+          <label htmlFor="city">City :</label>
+          <input
+            type="text"
+            id="city"
+            name="city"
+            required
+            value={formData.city}
+            placeholder="Enter city name"
+            onChange={handleChange}
+          />
+        </div>
+        <button
+          className={style.search_button}
+          type="submit"
+          onClick={handleSearch}
+        >
+          {loading ? <HashLoader size={25} color="#ffffff" /> : "Search Donor"}
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/components/DFL/Request/RightSidePanal.jsx b/components/DFL/Request/RightSidePanal.jsx
new file mode 100644
index 0000000..7cba072
--- /dev/null
+++ b/components/DFL/Request/RightSidePanal.jsx
@@ -0,0 +1,72 @@
+import DonorCard from "./DonorCard";
+import { useDispatch, useSelector } from "react-redux";
+import { fetchDonorData, getDonorData } from "@/store/slices/DFLSlice";
+import { BsArrowRight, BsArrowLeft } from "react-icons/bs";
+
+import style from "../../../styles/DFL/request.module.scss";
+
+export default function RightSidePanal({}) {
+  const { donorData, requestData, currentPage, prevData } = useSelector(
+    (state) => state.dfl
+  );
+  const dispatch = useDispatch();
+
+  const handleNextPage = () => {
+    const nextPage = currentPage + 1;
+
+    if (prevData[nextPage - 1]) {
+      dispatch(getDonorData({ data: prevData[nextPage - 1], page: nextPage }));
+    } else {
+      dispatch(
+        fetchDonorData({
+          latlng: requestData?.latlng,
+          formData: requestData?.formData,
+          page: nextPage,
+        })
+      );
+    }
+  };
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      const prevPage = currentPage - 1;
+      const data = prevData[prevPage - 1];
+      dispatch(getDonorData({ data, page: prevPage }));
+    }
+  };
+  return (
+    <>
+      <div className={style.right_container}>
+        <div className={style.card_container}>
+          {donorData && donorData.length === 0 && currentPage === 1 ? (
+            <p className="title">
+              No Donor found for given address and bloodType
+            </p>
+          ) : (
+            donorData &&
+            donorData.length === 0 && <p className="title">Go to Previous</p>
+          )}
+
+          {donorData &&
+            donorData?.map((donor, index) => (
+              <DonorCard donor={donor} key={index} />
+            ))}
+        </div>
+        <div className={style.pagination_container}>
+          <button
+            className={style.prev}
+            onClick={handlePrevPage}
+            disabled={currentPage == 1}
+          >
+            <BsArrowLeft className={style.pagination_btn} />
+          </button>
+          {donorData && donorData.length !== 0 && (
+            <button className={style.next} onClick={handleNextPage}>
+              <BsArrowRight className={style.pagination_btn} />
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/components/Doctors/Dashboard/Profile.jsx b/components/Doctors/Dashboard/Profile.jsx
new file mode 100644
index 0000000..bd82424
--- /dev/null
+++ b/components/Doctors/Dashboard/Profile.jsx
@@ -0,0 +1,787 @@
+import Head from "next/head";
+import Image from "next/image";
+import axios from "axios";
+import Error from "@/components/Error/Error";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { updateUser } from "../../../store/slices/userSlice";
+import { HashLoader } from "react-spinners";
+import { AiOutlineDelete } from "react-icons/ai";
+import { uploadImageToCloudinary } from "@/utils/uploadCloudinary";
+import { createTimeSlot, findUpdatedTimeSlots } from "@/utils/heplerFunction";
+import { BASE_URL } from "@/utils/config";
+import toast from "react-hot-toast";
+import {
+  doctorValidateForm,
+  handleInputValidation,
+} from "@/utils/formValidation";
+
+export default function Profile({ doctor }) {
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const { loading, accessToken } = useSelector((state) => state.user);
+
+  const [errors, setErrors] = useState({});
+  const [nestedErrors, setNestedErrors] = useState({});
+  const [formData, setFormData] = useState({
+    bio: doctor?.bio || "",
+    name: doctor?.name || "",
+    email: doctor?.email || "",
+    photo: doctor?.photo || "",
+    about: doctor?.about || "",
+    gender: doctor?.gender || "",
+    address: doctor?.address || "",
+    timeSlots_data: doctor?.timeSlots_data.map((slot) => ({ ...slot })) || [
+      { slot: "", appointments_time: "", startingTime: "", endingTime: "" },
+    ],
+    bloodType: doctor?.bloodType || "",
+    experiences: doctor?.experiences || [
+      { startingDate: "", endingDate: "", position: "", place: "" },
+    ],
+    specialization: doctor?.specialization || "",
+    qualifications: doctor?.qualifications || [
+      { startingDate: "", endingDate: "", degree: "", university: "" },
+    ],
+    phone: doctor?.phone || "",
+    fees: doctor?.fees || "",
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    const newValue =
+      name === "phone" || name === "fees" ? parseInt(value) : value;
+
+    setFormData({
+      ...formData,
+      [name]: newValue,
+    });
+  };
+
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    const formErrors = doctorValidateForm({ ...formData, [name]: value });
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: formErrors[name] || "", // Clear previous errors for this field
+    }));
+  };
+
+  const handleFileInputChange = async (e) => {
+    const file = e.target.files[0];
+
+    const { url } = await uploadImageToCloudinary(file);
+
+    setFormData({ ...formData, photo: url });
+  };
+
+  //reusable function for adding  item
+  const addItem = (e, key) => {
+    e.preventDefault();
+
+    let item;
+
+    if (key === "qualifications") {
+      item = { startingDate: "", endingDate: "", degree: "", university: "" };
+    } else if (key === "experiences") {
+      item = { startingDate: "", endingDate: "", position: "", place: "" };
+    } else if (key === "timeSlots_data") {
+      item = {
+        slot: "",
+        appointments_time: "",
+        startingTime: "",
+        endingTime: "",
+      };
+    }
+
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [key]: [...prevFormData[key], item],
+    }));
+  };
+
+  //reusable function for deleting  item
+  const deleteItem = (e, key, index) => {
+    e.preventDefault();
+
+    setFormData((prevFormData) => ({
+      ...prevFormData,
+      [key]: prevFormData[key].filter((_, i) => i !== index),
+    }));
+  };
+
+  //reuable input change function
+  const handleReuableInputChange = (event, key, index) => {
+    const { name, value } = event.target;
+
+    const newValue =
+      key === "timeSlots_data" && name === "appointments_time"
+        ? parseInt(value)
+        : value;
+
+    if (name === "endingDate") {
+      const date = new Date(value);
+      const data = formData[key][index];
+
+      if (!data.startingDate) {
+        nestedErrors.startingDate = {
+          message: "Please provied first starting date",
+          index,
+          key,
+        };
+      }
+
+      const staringDate = new Date(data.startingDate);
+      if (staringDate >= date) {
+        nestedErrors.startingDate = {
+          message: "Please provied valid starting date",
+          index,
+          key,
+        };
+      }
+    }
+
+    setFormData((prevFormData) => {
+      const updateItems = [...prevFormData[key]];
+
+      updateItems[index][name] = newValue;
+
+      return { ...prevFormData, [key]: updateItems };
+    });
+  };
+
+  const handleReusableBlur = (e, key, index) => {
+    const { name, value } = e.target;
+
+    const updateItems = formData[key][index];
+
+    const formErrors = handleInputValidation(
+      { ...updateItems, [key]: value },
+      index,
+      key
+    );
+
+    setNestedErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: formErrors[name] || "", // Clear previous errors for this field
+    }));
+  };
+
+  const updateProfileHandler = async (e) => {
+    e.preventDefault();
+    const formErrors = doctorValidateForm(formData);
+    setErrors(formErrors);
+
+    if (Object.keys(formErrors).length === 0) {
+      try {
+        const updatedFormData = { ...formData };
+        const newTimeSlotsData = findUpdatedTimeSlots(
+          formData.timeSlots_data,
+          doctor.timeSlots_data
+        );
+
+        let data = null;
+
+        let deleteRequests = [];
+
+        if (newTimeSlotsData.length > 0) {
+          if (doctor.timeSlots_data.length > 0) {
+            newTimeSlotsData.forEach(async (timeslot) => {
+              deleteRequests = await axios.delete(
+                `${BASE_URL}/timeslot/${doctor._id}`,
+                {
+                  headers: {
+                    Authorization: `Bearer ${accessToken}`,
+                  },
+                  data: { slotPhase: timeslot.slot },
+                }
+              );
+            });
+          }
+
+          await Promise.all(deleteRequests);
+
+          data = {
+            formData: updatedFormData,
+            timeSlots: createTimeSlot(newTimeSlotsData),
+          };
+        } else {
+          // No need to update time slots
+          data = {
+            formData: updatedFormData,
+          };
+        }
+
+        dispatch(updateUser(data)).then((result) => {
+          if (result.payload && result.payload.data) {
+            router.push("/doctors/profile");
+          }
+        });
+      } catch (error) {
+        const err = error?.response?.data?.message || error?.message;
+        toast.error(err);
+        return null;
+      }
+    }
+  };
+
+  return (
+    <div>
+      {/* <Head>
+        <title>{`${capitalize(doctor?.name)}'s Profile`}</title>
+        <meta
+          name="description"
+          content="doctor profile setting and appointment data"
+        />
+      </Head> */}
+      <h2 className="text-headingColor text-[24px] font-bold leading-9 mb-10">
+        Profile Information
+      </h2>
+
+      <form>
+        <div className="mb-5">
+          <p className="form__label">Name*</p>
+          <input
+            type="text"
+            name="name"
+            placeholder="Full Name"
+            className="form__input"
+            value={formData.name}
+            onBlur={handleBlur}
+            onChange={handleInputChange}
+          />
+          {errors.name && (
+            <p className="text-red-500 text-md  mb-4">{errors.name}</p>
+          )}
+        </div>
+        <div className="mb-5">
+          <p className="form__label">Email*</p>
+          <input
+            type="email"
+            name="email"
+            placeholder="Email"
+            className="form__input"
+            value={formData.email}
+            readOnly
+            aria-readonly
+          />
+        </div>
+        <div className="mb-5">
+          <p className="form__label">Phone*</p>
+          <input
+            type="number"
+            name="phone"
+            placeholder="Phone Number"
+            className="form__input"
+            onBlur={handleBlur}
+            value={formData.phone}
+            onChange={handleInputChange}
+          />
+          {errors.phone && (
+            <p className="text-red-500 text-md  mb-4">{errors.phone}</p>
+          )}
+        </div>
+        <div className="mb-5">
+          <p className="form__label">Bio*</p>
+          <input
+            type="text"
+            name="bio"
+            placeholder="Bio"
+            className="form__input"
+            value={formData.bio}
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            maxLength={100}
+          />
+          {errors.bio && (
+            <p className="text-red-500 text-md  mb-4">{errors.bio}</p>
+          )}
+        </div>
+        <div className="mb-5">
+          <p className="form__label">Address*</p>
+          <input
+            type="text"
+            name="address"
+            placeholder="Address"
+            className="form__input"
+            value={formData.address}
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            maxLength={100}
+          />
+          {errors.address && (
+            <p className="text-red-500 text-md  mb-4">{errors.address}</p>
+          )}
+        </div>
+        <div className="mb-5">
+          <div className="grid  grid-cols-3 gap-5 mb-[30px]">
+            <div>
+              <p className="form__label">Gender</p>
+              <select
+                name="gender"
+                className="form__input"
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                value={formData.gender}
+              >
+                <option value="">Select</option>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+              </select>
+              {errors.gender && (
+                <p className="text-red-500 text-md  mb-4">{errors.gender}</p>
+              )}
+            </div>
+            <div>
+              <p className="form__label">Specialization</p>
+              <select
+                name="specialization"
+                value={formData.specialization}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className="form__input"
+              >
+                <option value="">Select</option>
+                <option value="surgon">Surgon</option>
+                <option value="neurologist">Neurologist</option>
+                <option value="dermatologist">Dermatologist</option>
+              </select>
+              {errors.specialization && (
+                <p className="text-red-500 text-md  mb-4">
+                  {errors.specialization}
+                </p>
+              )}
+            </div>
+            <div>
+              <p className="form__label">Appointment Fees</p>
+              <input
+                type="number"
+                placeholder="100"
+                name="fees"
+                value={formData.fees}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className="form__input"
+              />
+              {errors.fees && (
+                <p className="text-red-500 text-md  mb-4">{errors.fees}</p>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="mb-5">
+          <p className="form__label ">Qualifications*</p>
+          {formData.qualifications?.map((item, index) => (
+            <div key={index}>
+              <div>
+                <div className="grid grid-cols-2 gap-5 mb-5">
+                  <div>
+                    <p className="form__label ">Starting Date*</p>
+                    <input
+                      type="date"
+                      name="startingDate"
+                      className="form__input"
+                      value={item.startingDate}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "qualifications", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "qualifications", index)
+                      }
+                    />
+                    {nestedErrors.startingDate &&
+                      nestedErrors.startingDate.key === "qualifications" &&
+                      index === nestedErrors.startingDate?.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.startingDate.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">Ending Date*</p>
+                    <input
+                      type="date"
+                      name="endingDate"
+                      className="form__input"
+                      value={item.endingDate}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "qualifications", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "qualifications", index)
+                      }
+                    />
+                    {nestedErrors.endingDate &&
+                      nestedErrors.endingDate.key === "qualifications" &&
+                      index === nestedErrors.endingDate?.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.endingDate.message}
+                        </p>
+                      )}
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-5 ">
+                  <div>
+                    <p className="form__label">Degree*</p>
+                    <input
+                      type="text"
+                      name="degree"
+                      className="form__input"
+                      value={item.degree}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "qualifications", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "qualifications", index)
+                      }
+                    />
+                    {nestedErrors.degree &&
+                      index === nestedErrors.degree?.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.degree.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">University*</p>
+                    <input
+                      type="text"
+                      name="university"
+                      className="form__input"
+                      value={item.university}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "qualifications", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "qualifications", index)
+                      }
+                    />
+                    {nestedErrors.university &&
+                      index === nestedErrors.university.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.university.message}
+                        </p>
+                      )}
+                  </div>
+                </div>
+
+                <button
+                  onClick={(e) => deleteItem(e, "qualifications", index)}
+                  className="bg-red-600 p-2 rounded-full text-white text-[18px] mt-2 mb-[30px]  cursor-pointer"
+                >
+                  <AiOutlineDelete />
+                </button>
+              </div>
+            </div>
+          ))}
+          {errors.qualifications && (
+            <p className="text-red-500 text-md  mb-4">
+              {errors.qualifications}
+            </p>
+          )}
+          <button
+            onClick={(e) => addItem(e, "qualifications")}
+            className="bg-[#000] p-2 px-5 rounded text-white h-fit cursor-pointer"
+          >
+            Add Qualification
+          </button>
+        </div>
+        <div className="mb-5">
+          <p className="form__label">Experiences*</p>
+          {formData.experiences?.map((item, index) => (
+            <div key={index}>
+              <div>
+                <div className="grid grid-cols-2 gap-5 mb-5">
+                  <div>
+                    <p className="form__label">Starting Date*</p>
+                    <input
+                      type="date"
+                      name="startingDate"
+                      className="form__input"
+                      value={item.startingDate}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "experiences", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "experiences", index)
+                      }
+                    />
+                    {nestedErrors.startingDate &&
+                      nestedErrors.startingDate.key === "experiences" &&
+                      index === nestedErrors.startingDate?.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.startingDate.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">Ending Date*</p>
+                    <input
+                      type="date"
+                      name="endingDate"
+                      className="form__input"
+                      value={item.endingDate}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "experiences", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "experiences", index)
+                      }
+                    />
+                    {nestedErrors.endingDate &&
+                      nestedErrors.endingDate.key === "experiences" &&
+                      index === nestedErrors.endingDate?.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.endingDate.message}
+                        </p>
+                      )}
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-2 gap-5 ">
+                  <div>
+                    <p className="form__label">Position*</p>
+                    <input
+                      type="text"
+                      name="position"
+                      className="form__input"
+                      value={item.position}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "experiences", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "experiences", index)
+                      }
+                    />
+                    {nestedErrors.position &&
+                      index === nestedErrors.position.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.position.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">Place*</p>
+                    <input
+                      type="text"
+                      name="place"
+                      className="form__input"
+                      value={item.place}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "experiences", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "experiences", index)
+                      }
+                    />
+                    {nestedErrors.place &&
+                      index === nestedErrors.place.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.place.message}
+                        </p>
+                      )}
+                  </div>
+                </div>
+
+                <button
+                  onClick={(e) => deleteItem(e, "experiences", index)}
+                  className="bg-red-600 p-2 rounded-full text-white text-[18px] mt-2 mb-[30px]  cursor-pointer"
+                >
+                  <AiOutlineDelete />
+                </button>
+              </div>
+            </div>
+          ))}
+          {errors.experiences && (
+            <p className="text-red-500 text-md  mb-4">{errors.experiences}</p>
+          )}
+          <button
+            onClick={(e) => addItem(e, "experiences")}
+            className="bg-[#000] p-2 px-5 rounded text-white h-fit cursor-pointer"
+          >
+            Add Experiences
+          </button>
+        </div>
+        <div className="mb-5">
+          <p className="form__label ">Time Slots*</p>
+          {formData.timeSlots_data?.map((item, index) => (
+            <div key={index}>
+              <div>
+                <div className="grid grid-cols-3 gap-5 md:grid-cols-5 mb-[30px] ">
+                  <div>
+                    <p className="form__label">Slot*</p>
+                    <select
+                      name="slot"
+                      className="form__input"
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "timeSlots_data", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "timeSlots_data", index)
+                      }
+                      value={item.slot}
+                    >
+                      <option value="">Select</option>
+                      <option value="morning">Morning</option>
+                      <option value="afternoon">Afternoon</option>
+                      <option value="evening">Evening</option>
+                    </select>
+
+                    {nestedErrors.slot && index === nestedErrors.slot.index && (
+                      <p className="text-red-500 text-md  mb-4">
+                        {nestedErrors.slot.message}
+                      </p>
+                    )}
+                  </div>
+                  <div>
+                    <p className="form__label">Number*</p>
+                    <input
+                      type="number"
+                      placeholder="10"
+                      name="appointments_time"
+                      value={item.appointments_time}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "timeSlots_data", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "timeSlots_data", index)
+                      }
+                      className="form__input"
+                    />
+                    {nestedErrors.appointments_time &&
+                      index === nestedErrors.appointments_time.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.appointments_time.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">Starting Time*</p>
+                    <input
+                      type="time"
+                      name="startingTime"
+                      className="form__input"
+                      value={item.startingTime}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "timeSlots_data", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "timeSlots_data", index)
+                      }
+                    />
+                    {nestedErrors.startingTime &&
+                      index === nestedErrors.startingTime.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.startingTime.message}
+                        </p>
+                      )}
+                  </div>
+                  <div>
+                    <p className="form__label">Ending Time*</p>
+                    <input
+                      type="time"
+                      name="endingTime"
+                      className="form__input"
+                      value={item.endingTime}
+                      onChange={(e) =>
+                        handleReuableInputChange(e, "timeSlots_data", index)
+                      }
+                      onBlur={(e) =>
+                        handleReusableBlur(e, "timeSlots_data", index)
+                      }
+                    />
+                    {nestedErrors.endingTime &&
+                      index === nestedErrors.endingTime.index && (
+                        <p className="text-red-500 text-md  mb-4">
+                          {nestedErrors.endingTime.message}
+                        </p>
+                      )}
+                  </div>
+                  <div className="flex items-center ">
+                    <button
+                      onClick={(e) => deleteItem(e, "timeSlots_data", index)}
+                      className="bg-red-600 p-2 rounded-full text-white text-[18px]   cursor-pointer mt-6 "
+                    >
+                      <AiOutlineDelete />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+          {errors.timeSlots_data && (
+            <p className="text-red-500 text-md  mb-4">
+              {errors.timeSlots_data}
+            </p>
+          )}
+          <button
+            onClick={(e) => addItem(e, "timeSlots_data")}
+            className="bg-[#000] p-2 px-5 rounded text-white h-fit cursor-pointer"
+          >
+            Add TimeSlot
+          </button>
+        </div>
+        <div className="mb-5">
+          <p className="form__label">About*</p>
+          <textarea
+            name="about"
+            rows="5"
+            placeholder="Write about you"
+            className="form__input"
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            value={formData.about}
+          ></textarea>
+          {errors.about && (
+            <p className="text-red-500 text-md  mb-4">{errors.about}</p>
+          )}
+        </div>
+        <div className="mb-5 flex items-center gap-3">
+          {formData.photo && (
+            <figure className="w-[68px] h-[68px] rounded-full border-2 border-solid border-primaryColor flex items-center justify-center ">
+              <Image
+                src={formData.photo}
+                alt=""
+                className="rounded-full w-[68px] h-[68px]"
+                height={68}
+                width={68}
+              />
+            </figure>
+          )}
+
+          <div className="relative w-[138px] h-[58px]">
+            <input
+              type="file"
+              name="photo"
+              id="customFile"
+              onChange={handleFileInputChange}
+              accept=".jpg , .png"
+              className="absolute top-0 left-0 w-full opacity-0 cursor-pointer"
+            />
+            <label
+              htmlFor="customFile"
+              className="absolute  top-0 left-0 w-full h-full flex items-center px-[1.5rem] py-[0.375rem] text-[15px] leading-6 overflow-hidden bg-[#0066ff46] text-headingColor font-semibold rounded-lg truncate cursor-pointer"
+            >
+              Upload Photo
+            </label>
+          </div>
+        </div>
+        <div className="mt-7">
+          <button
+            type="submit"
+            onClick={updateProfileHandler}
+            className="bg-primaryColor text-white text-[18px] leading-[30px] w-full py-3 px-4 rounded-lg"
+          >
+            {loading ? (
+              <HashLoader size={25} color="#ffffff" />
+            ) : (
+              "Update Profile"
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/components/Doctors/Dashboard/Tabs.jsx b/components/Doctors/Dashboard/Tabs.jsx
new file mode 100644
index 0000000..d1a7ef2
--- /dev/null
+++ b/components/Doctors/Dashboard/Tabs.jsx
@@ -0,0 +1,75 @@
+import { logout } from "@/store/slices/userSlice";
+import { useRouter } from "next/router";
+import React from "react";
+import { BiMenu } from "react-icons/bi";
+import { useDispatch } from "react-redux";
+
+export default function Tabs({ tab, setTab }) {
+  const dispatch = useDispatch();
+  const router = useRouter();
+
+  const handleLogout = () => {
+    dispatch(logout());
+    router.replace("/");
+  };
+  return (
+    <div>
+      <span className="lg:hidden">
+        <BiMenu className="w-6 h-6 cursor-pointer" />
+      </span>
+      <div className="hidden lg:flex flex-col p-[30px] bg-white shadow-panelShadow items-center h-max rounded-md">
+        <button
+          onClick={() => setTab("overview")}
+          className={`${
+            tab === "overview"
+              ? "bg-indigo-100 text-primaryColor "
+              : "bg-transparent text-headingColor"
+          } w-full btn mt-8 rounded-md`}
+        >
+          Overview
+        </button>
+        <button
+          onClick={() => setTab("appointments")}
+          className={`${
+            tab === "appointments"
+              ? "bg-indigo-100 text-primaryColor "
+              : "bg-transparent text-headingColor"
+          } w-full btn mt-8 rounded-md`}
+        >
+          Appointments
+        </button>
+        <button
+          onClick={() => setTab("settings")}
+          className={`${
+            tab === "settings"
+              ? "bg-indigo-100 text-primaryColor "
+              : "bg-transparent text-headingColor"
+          } w-full btn mt-8 rounded-md`}
+        >
+          Profile
+        </button>
+        <button
+          onClick={() => setTab("history")}
+          className={`${
+            tab === "history"
+              ? "bg-indigo-100 text-primaryColor "
+              : "bg-transparent text-headingColor"
+          } w-full btn mt-8 rounded-md`}
+        >
+          History
+        </button>
+        <div className="mt-[100px] w-full ">
+          <button
+            className="w-full bg-[#181A1E] p-3 text-[16px] leading-7 rounded-md  text-white"
+            onClick={handleLogout}
+          >
+            Logout
+          </button>
+          <button className="w-full bg-red-600 mt-4 p-3 text-[16px] leading-7 rounded-md text-white">
+            Delete Account
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/Doctors/DoctorAbout.jsx b/components/Doctors/DoctorAbout.jsx
index 27dc4d5..725980b 100644
--- a/components/Doctors/DoctorAbout.jsx
+++ b/components/Doctors/DoctorAbout.jsx
@@ -1,22 +1,21 @@
 import { formateDate } from "@/utils/heplerFunction";
-import React from "react";
 
-export default function DoctorAbout() {
+export default function DoctorAbout({
+  name,
+  about,
+  qualifications,
+  experiences,
+}) {
   return (
-    <div>
+    <section>
       <div>
         <h3 className="text-[20px] leading-[30px] text-headingColor font-semibold flex items-center gap-2 ">
           About of
           <span className="text-irisBlueColor font-bold text-[24px] leading-5">
-            Jay Zadafiya
+            {name}
           </span>
         </h3>
-        <p className="text__para">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga placeat
-          ducimus facere minus facilis totam praesentium. Asperiores optio
-          blanditiis quae mollitia corporis neque eveniet cum rerum molestias.
-          Hic, fuga expedita.
-        </p>
+        <p className="text__para">{about}</p>
       </div>
 
       <div className="mt-12 ">
@@ -25,33 +24,25 @@ export default function DoctorAbout() {
         </h3>
 
         <ul className="pt-4 md:p-5 ">
-          <li className="flex flex-col sm:flex-row sm:justify-between sm:items-end md:gap-5 mb-[30px]">
-            <div>
-              <span className="text-irisBlueColor text-[15px] leading-6 font-semibold">
-                {formateDate("09-04-2016")}- {formateDate("12-04-2020")}
-              </span>
-              <p className="text-[16px] leading-6 font-medium text-textColor ">
-                PHD in Surgon
-              </p>
-            </div>
-            <p className="text-[14px] leading-5 font-medium text-textColor ">
-              New Apollo Hospital, New Your
-            </p>
-          </li>
-
-          <li className="flex flex-col sm:flex-row sm:justify-between sm:items-end md:gap-5 mb-[30px]">
-            <div>
-              <span className="text-irisBlueColor text-[15px] leading-6 font-semibold">
-                {formateDate("12-04-2010")}- {formateDate("12-04-2010")}
-              </span>
-              <p className="text-[15px] leading-6 font-medium text-textColor ">
-                PHD in Surgon
+          {qualifications?.map((item, index) => (
+            <li
+              key={index}
+              className="flex flex-col sm:flex-row sm:justify-between sm:items-end md:gap-5 mb-[30px]"
+            >
+              <div>
+                <span className="text-irisBlueColor text-[15px] leading-6 font-semibold">
+                  {formateDate(item.startingDate)} -{" "}
+                  {formateDate(item.endingDate)}
+                </span>
+                <p className="text-[15px] leading-6 font-medium text-textColor ">
+                  {item.degree}
+                </p>
+              </div>
+              <p className="text-[14px] leading-5 font-medium text-textColor ">
+                {item.university}
               </p>
-            </div>
-            <p className="text-[14px] leading-5 font-medium text-textColor ">
-              New Apollo Hospital, New Your
-            </p>
-          </li>
+            </li>
+          ))}
         </ul>
       </div>
 
@@ -61,30 +52,22 @@ export default function DoctorAbout() {
         </h3>
 
         <ul className="grid sm:grid-cols-2 gap-[30px] pt-4 md:p-5">
-          <li className="p-4 rounded bg-[#fff9ea]  ">
-            <span className="text-yellowColor text-[15px] leading-6 font-semibold ">
-              {formateDate("12-04-2010")}- {formateDate("12-04-2010")}
-            </span>
-            <p className="text-[15px] leading-6 font-medium text-textColor ">
-              Sr. Surgon
-            </p>
-            <p className="text-[14px] leading-5 font-medium text-textColor ">
-              New Apollo Hospital, New Your
-            </p>
-          </li>
-          <li className="p-4 rounded bg-[#fff9ea]  ">
-            <span className="text-yellowColor text-[15px] leading-6 font-semibold ">
-              {formateDate("12-04-2010")}- {formateDate("12-04-2010")}
-            </span>
-            <p className="text-[15px] leading-6 font-medium text-textColor ">
-              Sr. Surgon
-            </p>
-            <p className="text-[14px] leading-5 font-medium text-textColor ">
-              New Apollo Hospital, New Your
-            </p>
-          </li>
+          {experiences?.map((item, index) => (
+            <li key={index} className="p-4 rounded bg-[#fff9ea]  ">
+              <span className="text-yellowColor text-[15px] leading-6 font-semibold ">
+                {formateDate(item.startingDate)} -{" "}
+                {formateDate(item.endingDate)}
+              </span>
+              <p className="text-[15px] leading-6 font-medium text-textColor ">
+                {item.position}
+              </p>
+              <p className="text-[14px] leading-5 font-medium text-textColor ">
+                {item.place}
+              </p>
+            </li>
+          ))}
         </ul>
       </div>
-    </div>
+    </section>
   );
 }
diff --git a/components/Doctors/DoctorCard.jsx b/components/Doctors/DoctorCard.jsx
index 40e8775..75876cc 100644
--- a/components/Doctors/DoctorCard.jsx
+++ b/components/Doctors/DoctorCard.jsx
@@ -2,20 +2,22 @@ import Image from "next/image";
 import Link from "next/link";
 import { BsArrowRight } from "react-icons/bs";
 import starIcon from "../../public/assets/images/Star.png";
+
 export default function DoctorCard({ doctor }) {
   const {
+    _id,
     name,
     avgRating,
     totalRating,
     photo,
     specialization,
     totalPatients,
-    hospital,
+    experiences,
   } = doctor;
   return (
     <div className="p-3 lg:p-5">
       <div>
-        <Image src={photo} alt="" className="= w-full" />
+        <Image src={photo} alt="" className="w-full" width={300} height={300} />
       </div>
 
       <h2 className="text-[10px] leading-[30px] lg:text-[26px] lg:leading-9 text-headingColor font-[700]">
@@ -33,7 +35,7 @@ export default function DoctorCard({ doctor }) {
             {avgRating}
           </span>
           <span className="text-[14px] leading-6 lg:text-[16px] lg:leading-7  text-textColor">
-            ( {totalRating})
+            ( {totalRating} )
           </span>
         </div>
       </div>
@@ -44,11 +46,11 @@ export default function DoctorCard({ doctor }) {
             +{totalPatients} patients
           </h3>
           <p className="text-[14px] leading-6 font-[400] text-textColor">
-            At {hospital}
+            At {experiences && experiences[0]?.place}
           </p>
         </div>
         <Link
-          href="/doctors/1"
+          href={`/doctors/${_id}`}
           className="w-[44px] h-[44px] rounded-full border border-solid border-[#181A1E] flex  items-center justify-center group hover:bg-primaryColor hover:border-none  "
         >
           <BsArrowRight className="group-hover:text-white w-6 h-6" />
diff --git a/components/Doctors/DoctorList.jsx b/components/Doctors/DoctorList.jsx
index 8a05d0a..5912177 100644
--- a/components/Doctors/DoctorList.jsx
+++ b/components/Doctors/DoctorList.jsx
@@ -1,11 +1,10 @@
-import { doctors } from "@/public/assets/data/doctors";
 import DoctorCard from "./DoctorCard";
 
-export default function DoctorList() {
+export default function DoctorList({ doctors }) {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3  gap-5 lg:gap-[30px] mt-[30px] lg:mt-[55px] ">
-      {doctors.map((doctor) => (
-        <DoctorCard key={doctor.id} doctor={doctor} />
+      {doctors.map((doctor, index) => (
+        <DoctorCard key={index} doctor={doctor} />
       ))}
     </div>
   );
diff --git a/components/Doctors/FeedBack.jsx b/components/Doctors/FeedBack.jsx
index 25ac3c2..daff1f8 100644
--- a/components/Doctors/FeedBack.jsx
+++ b/components/Doctors/FeedBack.jsx
@@ -1,47 +1,97 @@
+import {
+  List,
+  AutoSizer,
+  CellMeasurer,
+  CellMeasurerCache,
+} from "react-virtualized";
 import Image from "next/image";
-import avater from "../../public/assets/images/avatar-icon.png";
+import FeedbackForm from "./FeedbackForm";
 import { formateDate } from "@/utils/heplerFunction";
 import { AiFillStar } from "react-icons/ai";
 import { useState } from "react";
-import FeedbackForm from "./FeedbackForm";
+import { useSelector } from "react-redux";
 
-export default function FeedBack() {
+export default function FeedBack({ reviews, totalRating }) {
+  const { role } = useSelector((state) => state.user);
   const [showFeedbackForm, setShowFeedbackForm] = useState(false);
+
+  const cache = new CellMeasurerCache({
+    fixedWidth: true,
+    defaultHeight: 100,
+  });
   return (
     <div>
-      <div className="mb-[50px]">
+      
+      <div className="mb-[50px] w-[500px]">
         <h4 className="text-[20px] leading-[30px] text-headingColor font-bold mb-[30px]">
-          All reviews (272)
+          All reviews ({totalRating})
         </h4>
+        <div className="w-[750px] h-[600px] overflow-hidden">
+          <AutoSizer>
+            {({ width, height }) => (
+              <List
+                width={width}
+                height={height}
+                rowHeight={cache.rowHeight}
+                deferredMeasurementCache={cache}
+                rowCount={reviews.length}
+                rowRenderer={({ key, index, style, parent }) => {
+                  const review = reviews[index];
 
-        <div className="flex justify-between gap-10 mb-[38px] ">
-          <div className="flex gap-3  ">
-            <figure className="w-10 h-10 rounded-full ">
-              <Image src={avater} alt="" className="w-full" />
-            </figure>
+                  return (
+                    <CellMeasurer
+                      parent={parent}
+                      key={key}
+                      cache={cache}
+                      columnIndex={0}
+                      rowIndex={index}
+                    >
+                      {({ registerChild }) => (
+                        <div
+                          style={style}
+                          ref={registerChild}
+                          className="flex justify-between"
+                        >
+                          <div className="flex gap-3">
+                            <figure className="rounded-full ">
+                              <Image
+                                src={review.user?.photo}
+                                alt=""
+                                width={40}
+                                height={40}
+                              />
+                            </figure>
 
-            <div>
-              <h5 className="tet-[16px] leading-6 text-primaryColor font-bold">
-                Ali ahmed
-              </h5>
-              <p className="text-[14px] leading-6 text-textColor ">
-                {formateDate("02-14-2023")}
-              </p>
+                            <div>
+                              <h5 className="text-[16px] leading-6 text-primaryColor font-bold">
+                                {review?.user?.name}
+                              </h5>
+                              <p className="text-[14px] leading-6 text-textColor ">
+                                {formateDate(review?.createdAt)}
+                              </p>
 
-              <p className="text__para mt-3 font-medium text-[15px]">
-                Good services, Enjoy tretement
-              </p>
-            </div>
-          </div>
-          <div className="flex gap-1">
-            {[...Array(5).keys()].map((_, index) => (
-              <AiFillStar key={index} color="#8067FF" />
-            ))}
-          </div>
+                              <p className="text__para mt-3 font-medium text-[15px]">
+                                {review?.reviewText}
+                              </p>
+                            </div>
+                          </div>
+                          <div className="flex gap-1 mr-5">
+                            {[...Array(review?.rating).keys()].map((_, idx) => (
+                              <AiFillStar key={idx} color="#8067FF" />
+                            ))}
+                          </div>
+                        </div>
+                      )}
+                    </CellMeasurer>
+                  );
+                }}
+              />
+            )}
+          </AutoSizer>
         </div>
       </div>
 
-      {!showFeedbackForm && (
+      {!showFeedbackForm && role === "patient" && (
         <div className="text-center ">
           <button className="btn" onClick={() => setShowFeedbackForm(true)}>
             Give Feedback
diff --git a/components/Doctors/FeedbackForm.jsx b/components/Doctors/FeedbackForm.jsx
index b880c15..99c0f9e 100644
--- a/components/Doctors/FeedbackForm.jsx
+++ b/components/Doctors/FeedbackForm.jsx
@@ -1,65 +1,124 @@
-import React, { useState } from "react";
+import axios from "axios";
+import { useState, useRef } from "react";
+import { useRouter } from "next/router";
+import { useSelector } from "react-redux";
+
+import { HashLoader } from "react-spinners";
 import { AiFillStar } from "react-icons/ai";
+import { BASE_URL } from "@/utils/config";
+
+import Error from "../Error/Error";
+import toast from "react-hot-toast";
 
 export default function FeedbackForm() {
-  const [rating, setRating] = useState(0);
+  const router = useRouter();
+  const ratingRef = useRef(0);
+  const reviewTextRef = useRef();
   const [hover, setHover] = useState(0);
-  const [rerviewText, setRerviewText] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  const { accessToken } = useSelector((state) => state.user);
+
+  const { slug } = router.query;
 
   const handleSubmitReview = async (e) => {
     e.preventDefault();
+
+    setLoading(true);
+
+    const reviewData = {
+      reviewText: reviewTextRef.current.value,
+      rating: ratingRef.current,
+    };
+
+    try {
+      if (ratingRef.current === 0 || !reviewTextRef.current.value) {
+        setLoading(false);
+        setError("Please enter rating and reviewText");
+        return;
+      }
+
+      await axios.post(`${BASE_URL}/doctors/${slug}/reviews`, reviewData, {
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      setLoading(false);
+      toast.success("Thank you for review 😀");
+      router.replace(`/doctors/${slug}`);
+    } catch (error) {
+      setLoading(false);
+
+      const err = error?.response?.data?.message || error?.message;
+      toast.error(err);
+
+      return null;
+    }
+
+    ratingRef.current = 0;
+    reviewTextRef.current.value = "";
+    setHover(0);
   };
+
   return (
-    <form action="">
-      <div>
-        <h3 className="text-headingColor text-[16px] leading-6 font-semibold mb-4 mt-0">
-          How would you rate the overall experience
-        </h3>
+    <>
+      <form action="">
         <div>
-          {[...Array(5).keys()].map((_, index) => {
-            index += 1;
-
-            return (
-              <button
-                className={`${
-                  index <= ((rating && hover) || hover)
-                    ? "text-yellowColor"
-                    : "text-gray-400"
-                } bg-transparent border-none outline-none text-[22px] cursor-pointer`}
-                key={index}
-                type="button"
-                onClick={() => setRating(index)}
-                onMouseEnter={() => setHover(index)}
-                onMouseLeave={() => setHover(rating)}
-                onDoubleClick={() => {
-                  setHover(0);
-                  setRating(0);
-                }}
-              >
-                <span>
-                  <AiFillStar />
-                </span>
-              </button>
-            );
-          })}
+          <h3 className="text-headingColor text-[16px] leading-6 font-semibold mb-4 mt-0">
+            How would you rate the overall experience
+          </h3>
+          <div>
+            {[...Array(5).keys()].map((_, index) => {
+              index += 1;
+
+              return (
+                <button
+                  className={`${
+                    index <= ((ratingRef.current && hover) || hover)
+                      ? "text-yellowColor"
+                      : "text-gray-400"
+                  } bg-transparent border-none outline-none text-[22px] cursor-pointer`}
+                  key={index}
+                  type="button"
+                  onClick={() => (ratingRef.current = index)}
+                  onMouseEnter={() => setHover(index)}
+                  onMouseLeave={() => setHover(ratingRef.current)}
+                  onDoubleClick={() => {
+                    setHover(0);
+                    ratingRef.current = 0;
+                  }}
+                >
+                  <span>
+                    <AiFillStar />
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div className="mt-[30px] ">
+          <h3 className="text-headingColor text-[16px] leading-6 font-semibold mb-4 mt-0">
+            share your feedback or suggestions
+          </h3>
+          <textarea
+            ref={reviewTextRef}
+            className="border border-solid border-[#0066ff34] focus:outline outline-primaryColor w-full px-4 py-3 rounded-md"
+            rows="5"
+            placeholder="write you message"
+          ></textarea>
         </div>
-      </div>
-
-      <div className="mt-[30px] ">
-        <h3 className="text-headingColor text-[16px] leading-6 font-semibold mb-4 mt-0">
-          share your feedback or suggestions
-        </h3>
-        <textarea
-          className="border border-solid border-[#0066ff34] focus:outline outline-primaryColor w-full px-4 py-3 rounded-md"
-          rows="5"
-          placeholder="write you message"
-          onChange={(e) => setRerviewText(e.target.value)}
-        ></textarea>
-      </div>
-
-      <button className="btn" type="submit" onClick={handleSubmitReview}>
-        Submit Feedback
-      </button>
-    </form>
+
+        <button className="btn" type="submit" onClick={handleSubmitReview}>
+          {loading ? (
+            <HashLoader size={25} color="white" />
+          ) : (
+            " Submit Feedback"
+          )}
+        </button>
+      </form>
+    </>
   );
 }
diff --git a/components/Doctors/SidePanel.jsx b/components/Doctors/SidePanel.jsx
index a2bcc55..2e5f67e 100644
--- a/components/Doctors/SidePanel.jsx
+++ b/components/Doctors/SidePanel.jsx
@@ -1,47 +1,78 @@
-export default function SidePanel() {
+import Model from "../Timeslots/Model";
+import Timeslot from "../Timeslots/Timeslot";
+
+import { useMemo, useState } from "react";
+import { FaTimes } from "react-icons/fa";
+import { capitalize, convertTime } from "@/utils/heplerFunction";
+
+export default function SidePanel({ address, timeslots, timeslotsData, fees }) {
+  const [open, setOpen] = useState(false);
+
+  const handelModel = () => {
+    setOpen((prev) => !prev);
+  };
+
+  const sortedTimeslots = useMemo(() => {
+    return timeslotsData.slice().sort((a, b) => {
+      const order = ["morning", "afternoon", "evening"];
+      return (
+        order.indexOf(Object.values(a)[0]) - order.indexOf(Object.values(b)[0])
+      );
+    });
+  }, [timeslotsData]);
+
   return (
-    <div className="shadow-panelShadow p-3 lg:p-5 rounded-md">
-      <div className="flex items-center justify-between">
-        <p className="text__para mt-0 font-semibold">Ticket Price</p>
-        <span className="text-[16px] leading-7 lg:text-[22px] lg:leading-8 text-headingColor font-bold ">
-          500
-        </span>
-      </div>
+    <>
+      <div className="shadow-panelShadow p-3 lg:p-5 rounded-md">
+        <div className="flex items-center justify-between">
+          <p className="text__para mt-0 font-semibold">Fees</p>
+          <span className="text-[16px] leading-7 lg:text-[22px] lg:leading-8 text-headingColor font-bold ">
+            {fees}₹
+          </span>
+        </div>
 
-      <div className="mt-[30px]">
-        <p className="text__para mt-0 font-semibold text-headingColor">
-          Available Time Slots
-        </p>
-
-        <ul className="mt-3">
-          <li className="flex items-center justify-between mb-2">
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              Sunday
-            </p>
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              4:00 PM - 9:30 PM
-            </p>
-          </li>
-          <li className="flex items-center justify-between mb-2">
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              Tuseday
-            </p>
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              4:00 PM - 9:30 PM
-            </p>
-          </li>
-          <li className="flex items-center justify-between mb-2">
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              Wedensday
-            </p>
-            <p className="text-[15px] leading-6 text-textColor font-semiboldr">
-              4:00 PM - 9:30 PM
-            </p>
-          </li>
-        </ul>
-      </div>
+        <div className="mt-[15px]">
+          <p className="text__para mt-0 font-semibold text-headingColor text-[15px]">
+            Address:{" "}
+            <span className="text-[15px] leading-6 text-textColor font-semibold text-wrap">
+              {address}
+            </span>
+          </p>
 
-      <button className="btn px-2 w-full rounded-md">Book Appoitement</button>
-    </div>
+          <ul className="mt-3">
+            {sortedTimeslots.map((slot, index) => (
+              <li
+                key={index}
+                className="flex items-center justify-between mb-2"
+              >
+                <p className="text-[16px] leading-6 text-headingColor font-semiboldr">
+                  {capitalize(slot.slot)}
+                </p>
+                <p className="text-[15px] leading-6 text-textColor font-semiboldr">
+                  {convertTime(slot.startingTime)} -{" "}
+                  {convertTime(slot.endingTime)}
+                </p>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <button
+          className="btn px-2 w-full rounded-md   btn-hover"
+          onClick={handelModel}
+        >
+          Book Appoitement
+        </button>
+      </div>
+      <Model open={open}>
+        <Timeslot timeslots={timeslots} fees={fees} />
+        <div
+          className="absolute top-2 right-1 p-3 cursor-pointer text-red-600"
+          onClick={handelModel}
+        >
+          <FaTimes />
+        </div>
+      </Model>
+    </>
   );
 }
diff --git a/components/ProtectedRoute/ProtectedRoute.jsx b/components/ProtectedRoute/ProtectedRoute.jsx
deleted file mode 100644
index b21a0ff..0000000
--- a/components/ProtectedRoute/ProtectedRoute.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-export default function ProtectedRoute({ children, allowedRoles }) {
-  const user = useSelector((state) => state.user.user); // Assuming user role is stored in Redux state
-  const router = useRouter();
-
-  useEffect(() => {
-    if (!user) {
-      router.push("/login"); // Redirect to login if user not logged in
-    }
-  }, [user, router]);
-
-  return children;
-}
diff --git a/components/TImeslots/Calander.jsx b/components/TImeslots/Calander.jsx
new file mode 100644
index 0000000..04e9e85
--- /dev/null
+++ b/components/TImeslots/Calander.jsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateCalendar } from "@mui/x-date-pickers/DateCalendar";
+import dayjs, { Dayjs } from "dayjs";
+
+export default function Calander({ onChange }) {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateCalendar
+        showDaysOutsideCurrentMonth
+        fixedWeekNumber={5}
+        minDate={dayjs(new Date())}
+        onChange={onChange}
+      />
+    </LocalizationProvider>
+  );
+}
diff --git a/components/TImeslots/Model.jsx b/components/TImeslots/Model.jsx
new file mode 100644
index 0000000..d475e02
--- /dev/null
+++ b/components/TImeslots/Model.jsx
@@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+function Modal({ open, children }) {
+  const [isClient, setIsClient] = useState(false);
+  const dialog = useRef();
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    if (isClient) {
+      if (open) {
+        dialog.current.showModal();
+      } else {
+        dialog.current.close();
+      }
+    }
+  }, [open, isClient]);
+
+  if (!isClient) return null;
+
+  return createPortal(
+    <dialog className="modal" ref={dialog}>
+      <section>
+        <div className="">{open ? children : null}</div>
+      </section>
+    </dialog>,
+    document.getElementById("modal")
+  );
+}
+
+export default Modal;
diff --git a/components/TImeslots/Slot.jsx b/components/TImeslots/Slot.jsx
new file mode 100644
index 0000000..c8e2ffb
--- /dev/null
+++ b/components/TImeslots/Slot.jsx
@@ -0,0 +1,23 @@
+import { capitalize } from "@mui/material";
+import React from "react";
+
+export default function Slot({ slot, period, openDetails }) {
+  return (
+    <>
+      <h3 className="text-headingColor text-[16px] leading-6 font-semibold mb-4 mt-0">
+        {capitalize(period)}
+      </h3>
+      <div className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3  mb-4">
+        {slot[period]?.map(({ time }, timeIndex) => (
+          <div
+            key={`${period}-${timeIndex}`}
+            className="p-2 md:p-4 w-[80px] bg-[#01b5c533] text-[#01B5C5] hover:bg-[#01B5C5]  hover:text-white  rounded cursor-pointer overflow-hidden"
+            onClick={() => openDetails(time, period)}
+          >
+            <p className="text-center  ">{time}</p>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/components/TImeslots/Timeslot.jsx b/components/TImeslots/Timeslot.jsx
new file mode 100644
index 0000000..8cae28f
--- /dev/null
+++ b/components/TImeslots/Timeslot.jsx
@@ -0,0 +1,150 @@
+import Head from "next/head";
+import axios from "axios";
+import Slot from "./Slot";
+import Calander from "./Calander";
+import toast from "react-hot-toast";
+import React, { useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import { useRouter } from "next/router";
+import { FaTimes } from "react-icons/fa";
+import { BASE_URL } from "@/utils/config";
+import { dateToString, timeslotByDate } from "@/utils/heplerFunction";
+
+//Memoize the component to prevent unnecessary re-renders
+const Timeslot = React.memo(({ timeslots, fees }) => {
+  const sortedTimeslots = useMemo(() => {
+    return timeslots.slice().sort((a, b) => {
+      const order = ["morning", "afternoon", "evening"];
+
+      return (
+        order.indexOf(Object.keys(a)[0]) - order.indexOf(Object.keys(b)[0])
+      );
+    });
+  }, [timeslots]);
+
+  const router = useRouter();
+  const { slug } = router.query;
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [selectedTime, setSelectedTime] = useState("");
+  const [selectedSlot, setSelectedSlot] = useState("");
+  const [selectedDate, setSelectedDate] = useState(dateToString(new Date()));
+  const [newTimeslots, setNewTimeslots] = useState(sortedTimeslots);
+
+  const { accessToken } = useSelector((state) => state.user);
+
+  const openDetails = (time, period) => {
+    setSelectedTime(time);
+    setSelectedSlot(period);
+    setDialogOpen(true);
+  };
+
+  const onChangeDate = (newDateStr) => {
+    const formattedDate = dateToString(newDateStr);
+
+    setSelectedDate(formattedDate);
+    setNewTimeslots(timeslotByDate(sortedTimeslots, formattedDate));
+  };
+
+  const confirmBooking = async () => {
+    setDialogOpen(false);
+    try {
+      const data = {
+        bookingDate: selectedDate,
+        time: selectedTime,
+        slotPhase: selectedSlot,
+      };
+
+      const session = await axios.post(
+        `${BASE_URL}/booking/checkout-session/${slug}`,
+        data,
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+
+      if (session.data.url) {
+        router.push(session.data.url);
+      }
+
+      // Reset selectedTime and selectedSlot if needed
+      setSelectedTime("");
+      setSelectedSlot("");
+    } catch (error) {
+      const err = error?.response?.data?.message || error?.message;
+      toast.error(err);
+
+      return null;
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{selectedDate} timeslots</title>
+        <meta name="description" content="Timeslots for appointment booking" />
+      </Head>
+      <div
+        className={`${
+          dialogOpen ? "hidden" : ""
+        } container flex items-center justify-center gap-5  flex-col md:flex-row `}
+      >
+        <div className="p-2">
+          <Calander onChange={onChangeDate} />
+        </div>
+        <div className="md:w-[450px]  ">
+          {newTimeslots.map((slot, index) =>
+            Object.keys(slot).map((period, periodIndex) => (
+              <Slot
+                slot={slot}
+                period={period}
+                openDetails={openDetails}
+                key={`${index}-${periodIndex}`}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      {dialogOpen && (
+        <div className="w-full h-full bg-[#ddf2fc] p-8 mt-[-35px] mb-[-35px]   ">
+          <div className="">
+            <p className="text-[16px] leading-6 font-bold mb-4 mt-0">
+              Selected Date:{" "}
+              <span className="text-textColor ">{selectedDate}</span>
+            </p>
+            <p className="text-[16px] leading-6 font-bold mb-4 mt-0">
+              Selected Slot:{" "}
+              <span className="text-textColor ">{selectedSlot}</span>
+            </p>
+            <p className="text-[16px] leading-6 font-bold mb-4 mt-0">
+              Selected Time:{" "}
+              <span className="text-textColor ">{selectedTime}</span>
+            </p>
+            <p className="text-[16px] leading-6 font-bold mb-4 mt-0">
+              Appointment Fees: <span className="text-textColor ">{fees}</span>
+            </p>
+
+            <button
+              onClick={confirmBooking}
+              className="btn px-2 w-full rounded-md  bg-[#feb60d33] text-[#FEB60D] border border-solid hover:border-[#FEB60D]"
+            >
+              Confirm Booking
+            </button>
+          </div>
+
+          <div
+            className="absolute top-1 right-0 p-4 cursor-pointer text-primaryColor hover:text-red-600"
+            onClick={() => setDialogOpen(false)}
+          >
+            <FaTimes />
+          </div>
+        </div>
+      )}
+    </>
+  );
+});
+
+export default Timeslot;
diff --git a/components/User/MyBookings.jsx b/components/User/MyBookings.jsx
deleted file mode 100644
index a9ad4cf..0000000
--- a/components/User/MyBookings.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import DoctorCard from "../Doctors/DoctorCard";
-
-export default function MyBookings({ appointentments }) {
-  return (
-    <div>
-      {appointentments.length === 0 && (
-        <h2 className="mt-5 text-center  leading-7 text-[20px] font-semibold text-primaryColor">
-          You did not book any doctro yet!
-        </h2>
-      )}
-
-      {appointentments.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
-          {appointentments.map((doctor) => (
-            <DoctorCard doctor={doctor} key={doctor._id} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/components/User/Profile.jsx b/components/User/Profile.jsx
index a8afa5d..87a09d9 100644
--- a/components/User/Profile.jsx
+++ b/components/User/Profile.jsx
@@ -1,21 +1,19 @@
-import { useState } from "react";
-
 import Image from "next/image";
-import axios from "axios";
 import HashLoader from "react-spinners/HashLoader";
+import Error from "../Error/Error";
 
+import { useState } from "react";
 import { useRouter } from "next/router";
-import { uploadImageToCloudinary } from "@/utils/uploadCloudinary";
-import { BASE_URL, token } from "@/utils/config";
-import { useDispatch, useSelector } from "react-redux";
 import { updateUser } from "@/store/slices/userSlice";
-import Error from "../Error/Error";
+import { useDispatch, useSelector } from "react-redux";
+import { uploadImageToCloudinary } from "@/utils/uploadCloudinary";
+import { patientFormValidation } from "@/utils/formValidation";
 
 export default function Profile({ user }) {
-  const [selectFile, setSelectFile] = useState(user?.photo);
   const dispatch = useDispatch();
   const router = useRouter();
   const { error, loading } = useSelector((state) => state.user);
+  const [errors, setErrors] = useState({});
 
   const [formData, setFormDate] = useState({
     name: user?.name || "",
@@ -44,18 +42,38 @@ export default function Profile({ user }) {
     setFormDate({ ...formData, photo: url });
   };
 
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+
+    const formErrors = patientFormValidation({ ...formData, [name]: value });
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: formErrors[name] || "", // Clear previous errors for this field
+    }));
+  };
+
   const submitHandler = async (e) => {
     e.preventDefault();
-    try {
-      dispatch(updateUser({ formData, userId: user._id })).then((result) => {
-        if (result.payload && result.payload.data) {
-          router.push("/users/profile");
-        }
-      });
-    } catch (error) {
-      return <Error errMessgae={error} />;
+
+    const formError = patientFormValidation(formData);
+    setErrors(formError);
+
+    if (Object.keys(formError).length === 0) {
+      try {
+        dispatch(updateUser(formData)).then((result) => {
+          if (result.payload && result.payload.data) {
+            router.push("/users/profile");
+          }
+        });
+      } catch (error) {
+        const err = error?.response?.data?.message || error?.message;
+        toast.error(err);
+
+        return null;
+      }
     }
   };
+
   return (
     <div className="mt-10">
       <form onSubmit={submitHandler}>
@@ -64,11 +82,15 @@ export default function Profile({ user }) {
             type="text"
             placeholder="Full Name"
             name="name"
+            onBlur={handleBlur}
             value={formData.name}
             onChange={handelInputChange}
             className="w-full pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
           />
+          {errors.name && (
+            <p className="text-red-500 text-sm mt-1">{errors.name}</p>
+          )}
         </div>
 
         <div className="mb-5">
@@ -76,10 +98,12 @@ export default function Profile({ user }) {
             type="email"
             placeholder="Enter Your Email"
             name="email"
+            onBlur={handleBlur}
             value={formData.email}
-            onChange={handelInputChange}
             className="w-full  pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
+            aria-readonly
+            readOnly
           />
         </div>
         <div className="mb-5">
@@ -87,28 +111,38 @@ export default function Profile({ user }) {
             type="test"
             placeholder="Blood Type"
             name="bloodType"
+            onBlur={handleBlur}
             value={formData.bloodType}
             onChange={handelInputChange}
             className="w-full  pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
           />
+          {errors.bloodType && (
+            <p className="text-red-500 text-sm mt-1">{errors.bloodType}</p>
+          )}
         </div>
 
-        <div className="mb-5 flex items-center justify-between">
-          <label className="text-headingColor  font-bold text-[16px] leading-7">
-            Gender:
-            <select
-              name="gender"
-              value={formData.gender}
-              onChange={handelInputChange}
-              className="text-textColor font-semibold text-[15px] leading-7 px-4 py-3 focus:outline-none"
-            >
-              <option value="">Select</option>
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-              <option value="other">Other</option>
-            </select>
-          </label>
+        <div className="mb-5">
+          <div className=" flex items-center justify-between">
+            <label className="text-headingColor  font-bold text-[16px] leading-7">
+              Gender:
+              <select
+                name="gender"
+                onBlur={handleBlur}
+                value={formData.gender}
+                onChange={handelInputChange}
+                className="text-textColor font-semibold text-[15px] leading-7 px-4 py-3 focus:outline-none"
+              >
+                <option value="">Select</option>
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+                <option value="other">Other</option>
+              </select>
+            </label>
+          </div>
+          {errors.gender && (
+            <p className="text-red-500 text-sm mt-1">{errors.gender}</p>
+          )}
         </div>
 
         <div className="mb-5 flex items-center gap-3">
diff --git a/components/layout/footer.jsx b/components/layout/footer.jsx
index 195c405..28e79db 100644
--- a/components/layout/footer.jsx
+++ b/components/layout/footer.jsx
@@ -1,10 +1,11 @@
-import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import Logo from "../../public/assets/images/logo.png";
+import dolLogo from "../../public/assets/images/dfl/logo.png";
 
 import { RiLinkedinFill } from "react-icons/ri";
 import { AiFillYoutube, AiFillGithub, AiFillInstagram } from "react-icons/ai";
-import Image from "next/image";
+import { useRouter } from "next/router";
 
 const socialLink = [
   {
@@ -75,14 +76,17 @@ const quickLinks03 = [
 ];
 
 export default function Footer() {
+  const router = useRouter();
   const year = new Date().getFullYear();
+  const isDFL = router.pathname.startsWith("/drop-for-life");
 
   return (
     <footer className="pb-16 pt-10">
       <div className="container">
         <div className="flex justify-between flex-col md:flex-row flex-wrap gap-[30px]">
           <div>
-            <Image src={Logo} alt="" />
+            <Image src={isDFL ? dolLogo : Logo} alt="Logo" width={134} />
+
             <p className="text-[16px] leading-7 font-[400] text-textColor mt-4">
               Coptright @ {year} developed by Jay Zadafiya all right reserved.
             </p>
diff --git a/components/layout/header.jsx b/components/layout/header.jsx
index 97fd011..cfe2f30 100644
--- a/components/layout/header.jsx
+++ b/components/layout/header.jsx
@@ -1,11 +1,13 @@
-import React, { useEffect, useRef } from "react";
-import { useRouter } from "next/router";
 import Image from "next/image";
 import Link from "next/link";
 import logo from "../../public/assets/images/logo.png";
+import dolLogo from "../../public/assets/images/dfl/logo.png";
+import { useEffect, useRef } from "react";
+import { useRouter } from "next/router";
 import { BiMenu } from "react-icons/bi";
 import { useSelector } from "react-redux";
-import avtarImg from "../../public/assets/images/avatar-icon.png";
+import { capitalize } from "@/utils/heplerFunction";
+
 const navLink = [
   {
     path: "/",
@@ -16,8 +18,8 @@ const navLink = [
     display: "Find a Doctor",
   },
   {
-    path: "/services",
-    display: "Searvices",
+    path: "/drop-for-life",
+    display: "Blood Donation",
   },
   {
     path: "/contact",
@@ -30,17 +32,22 @@ export default function Header() {
   const headerRef = useRef(null);
   const menuRef = useRef(null);
 
+  const isDFL = router.pathname.startsWith("/drop-for-life");
+
   const { user, accessToken } = useSelector((state) => state.user);
 
   const handleStickyheader = () => {
     window.addEventListener("scroll", () => {
       const scrollPosition =
         document.body.scrollTop || document.documentElement.scrollTop;
-
       if (scrollPosition > 80) {
-        headerRef.current.classList.add("sticky_header");
+        headerRef?.current?.classList?.add(
+          `${isDFL ? "sticky-header-dol" : "sticky_header"}`
+        );
       } else {
-        headerRef.current.classList.remove("sticky_header");
+        headerRef?.current?.classList?.remove(
+          `${isDFL ? "sticky-header-dol" : "sticky_header"}`
+        );
       }
     });
   };
@@ -50,17 +57,20 @@ export default function Header() {
 
     //unmount
     return () => window.removeEventListener("scroll", handleStickyheader);
-  }, []);
+  }, [headerRef]);
 
-  const toggleMenu = () => menuRef.current.classList.toggle("show__menu");
+  const toggleMenu = () => menuRef.current?.classList?.toggle("show__menu");
 
   return (
-    <header className="header flex items-center" ref={headerRef}>
+    <header
+      className={` ${isDFL ? "dol-header" : "header"} flex items-center `}
+      ref={headerRef}
+    >
       <div className="container">
         <div className="flex items-center justify-between">
           <div>
             <Link href="/">
-              <Image src={logo} alt="Logo" width={134} />
+              <Image src={isDFL ? dolLogo : logo} alt="Logo" width={134} />
             </Link>
           </div>
 
@@ -73,8 +83,14 @@ export default function Header() {
                     href={link.path}
                     className={
                       router.pathname === link.path
-                        ? "text-primaryColor text-[16px]leading-7 font-[600]"
-                        : "text-textColor text-[16px] leading-7 font-[600] hover:text-primaryColor "
+                        ? `${
+                            isDFL ? "text-red-950" : "text-primaryColor"
+                          } text-[16px] leading-7 font-[600]`
+                        : `${
+                            isDFL
+                              ? "text-red-700  hover:text-white"
+                              : "text-textColor hover:text-primaryColor "
+                          } text-[16px] leading-7 font-[600] `
                     }
                   >
                     {link.display}
@@ -85,7 +101,7 @@ export default function Header() {
           </div>
 
           {/* Nav Right */}
-          <div>
+          <div className="flex items-center justify-between gap-5">
             {accessToken && user ? (
               <Link
                 href={`${
@@ -93,10 +109,11 @@ export default function Header() {
                 }`}
                 className="flex items-center gap-4 cursor-pointer"
               >
-                <h2>{user.name}</h2>
-
+                <h2 className={`${isDFL && "text-red-950"} font-semibold`}>
+                  {capitalize(user.name)}
+                </h2>
                 {user.photo && (
-                  <figure className="w-[35px] h-[35px] rounded-full">
+                  <figure className="w-[35px] h-[35px] rounded-full hidden  md:block lg:block">
                     <Image
                       src={user?.photo}
                       alt=""
diff --git a/components/layout/layout.jsx b/components/layout/layout.jsx
index 34e2876..1df22cd 100644
--- a/components/layout/layout.jsx
+++ b/components/layout/layout.jsx
@@ -5,20 +5,41 @@ import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { fetchUser } from "@/store/slices/userSlice";
 import Cookies from "js-cookie";
+import { Toaster } from "react-hot-toast";
 
 export default function Layout({ children }) {
   const dispatch = useDispatch();
+  const token = Cookies.get("token");
 
   useEffect(() => {
-    const token = Cookies.get("token");
-
     if (token) {
       dispatch(fetchUser());
     }
-  }, [dispatch]);
+  }, [dispatch, token]);
+
+  const toastOptions = {
+    style: {
+      borderRadius: "10px",
+      fontSize: "18px",
+      textAline: "left",
+      textAlign: "left",
+      position: "relative",
+      top: "90px",
+      zIndex: "999999",
+      marginTop: "10px",
+    },
+    duration: 5000, // 5 seconds
+  };
+
   return (
     <>
       <Header />
+      <Toaster
+        position="top-right"
+        reverseOrder={false}
+        toastOptions={toastOptions}
+      />
+
       <main>{children}</main>
       <Footer />
     </>
diff --git a/middleware.js b/middleware.js
new file mode 100644
index 0000000..94c9838
--- /dev/null
+++ b/middleware.js
@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import jwt from "jsonwebtoken";
+
+// This function can be marked `async` if using `await` inside
+export function middleware(request) {
+  const authToken = request.cookies.get("token")?.value;
+  //   return NextResponse.redirect(new URL("/home", request.url));
+  const decodedToken = jwt.decode(authToken);
+  const loggedInUserNotAccess = ["/login", "/signup"].includes(
+    request.nextUrl.pathname
+  );
+
+  if (decodedToken.role === "patient" && request.nextUrl.pathname === "/") {
+    return NextResponse.redirect(new URL("/login", request.url));
+  }
+
+  if (
+    decodedToken.role === "doctor" &&
+    request.nextUrl.pathname === "/users/profile"
+  ) {
+    return NextResponse.redirect(new URL("/", request.url));
+  }
+
+  if (loggedInUserNotAccess && authToken) {
+    return NextResponse.redirect(
+      new URL(
+        `/${decodedToken.role === "patient" ? "users" : "doctors"}/profile`,
+        request.url
+      )
+    );
+  } else {
+    if (!authToken) {
+      return NextResponse.redirect(new URL("/login", request.url));
+    }
+  }
+}
+
+// See "Matching Paths" below to learn more
+export const config = {
+  matcher: [
+    "/login",
+    "/signup",
+    "/doctors/profile",
+    "/users/profile",
+    "/((?!_next/static|_next/image|favicon.ico).*)",
+  ],
+};
diff --git a/next.config.mjs b/next.config.mjs
index 12c1c6c..be42d56 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,6 +4,7 @@ const nextConfig = {
   images: {
     domains: ["res.cloudinary.com"],
   },
+
   reactStrictMode: true,
 
   async headers() {
@@ -13,7 +14,7 @@ const nextConfig = {
         source: "/api/:path*",
         headers: [
           { key: "Access-Control-Allow-Credentials", value: "true" },
-          { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
+          { key: "Access-Control-Allow-Origin", value: "*" },
           {
             key: "Access-Control-Allow-Methods",
             value: "GET,DELETE,PATCH,POST,PUT",
diff --git a/package-lock.json b/package-lock.json
index 41c25a4..6282927 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,21 +8,30 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-brands-svg-icons": "^6.5.1",
         "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@mui/material": "^5.15.15",
+        "@mui/x-date-pickers": "^7.2.0",
         "@reduxjs/toolkit": "^2.2.2",
         "axios": "^1.6.8",
+        "dayjs": "^1.11.10",
         "js-cookie": "^3.0.5",
         "jsonwebtoken": "^9.0.2",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18",
+        "react-hot-toast": "^2.4.1",
         "react-icons": "^5.0.1",
         "react-redux": "^9.1.0",
+        "react-slick": "^0.30.2",
         "react-spinners": "^0.13.8",
-        "react-toastify": "^10.0.5",
+        "react-virtualized": "^9.22.5",
         "sharp": "^0.33.3",
+        "slick-carousel": "^1.8.1",
+        "stripe": "^14.24.0",
         "swiper": "^11.0.7"
       },
       "devDependencies": {
@@ -30,6 +39,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.3",
         "postcss": "^8",
+        "sass": "^1.75.0",
         "tailwindcss": "^3.3.0"
       }
     },
@@ -54,11 +64,127 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/code-frame": {
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+      "dependencies": {
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+      "dependencies": {
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.0.tgz",
       "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -66,6 +192,19 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/types": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.1.0.tgz",
@@ -75,6 +214,139 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -131,6 +403,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
@@ -732,6 +1038,301 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
+      "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
+      "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.15",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.14",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/@mui/x-date-pickers": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.2.0.tgz",
+      "integrity": "sha512-hsXugZ+n1ZnHRYzf7+PFrjZ44T+FyGZmTreBmH0M2RUaAblgK+A1V3KNLT+r4Y9gJLH+92LwePxQ9xyfR+E51A==",
+      "dependencies": {
+        "@babel/runtime": "^7.24.0",
+        "@mui/base": "^5.0.0-beta.40",
+        "@mui/system": "^5.15.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.15.14",
+        "date-fns": "^2.25.0 || ^3.2.0",
+        "date-fns-jalali": "^2.13.0-0",
+        "dayjs": "^1.10.7",
+        "luxon": "^3.0.2",
+        "moment": "^2.29.4",
+        "moment-hijri": "^2.1.2",
+        "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "date-fns": {
+          "optional": true
+        },
+        "date-fns-jalali": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        },
+        "moment-hijri": {
+          "optional": true
+        },
+        "moment-jalaali": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.1.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.1.3.tgz",
@@ -926,6 +1527,15 @@
         "node": ">=14"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@reduxjs/toolkit": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.2.tgz",
@@ -969,6 +1579,41 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "20.12.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.5.tgz",
+      "integrity": "sha512-BD+BjQ9LS/D8ST9p5uqBxghlN+S42iuNxjsUGjeZobe/ciXzk2qb1B6IXc6AnRLS+yFJRpN2IPEHMzwspfDJNw==",
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.77",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.77.tgz",
+      "integrity": "sha512-CUT9KUUF+HytDM7WiXKLF9qUSg4tGImwy4FXTlfEDPEkkNUzJ7rVFolYweJ9fS1ljoIaP7M7Rdjc5eUm/Yu5AA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/use-sync-external-store": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
@@ -1464,6 +2109,20 @@
         "dequal": "^2.0.3"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1556,7 +2215,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -1575,7 +2233,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -1660,6 +2317,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -1736,6 +2398,34 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1762,6 +2452,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -1819,6 +2514,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1846,7 +2546,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -1937,6 +2636,15 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1976,6 +2684,24 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/error-ex/node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
     "node_modules/es-abstract": {
       "version": "1.23.2",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.2.tgz",
@@ -2040,7 +2766,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -2052,7 +2777,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2147,7 +2871,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -2646,6 +3369,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2776,7 +3504,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2812,7 +3539,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -2964,11 +3690,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/goober": {
+      "version": "2.1.14",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz",
+      "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==",
+      "peerDependencies": {
+        "csstype": "^3.0.10"
+      }
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -3009,7 +3742,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -3021,7 +3753,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3033,7 +3764,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3060,7 +3790,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3068,6 +3797,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz",
@@ -3086,11 +3823,16 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
       "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
-      "dev": true,
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -3233,7 +3975,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -3596,6 +4337,11 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3608,6 +4354,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "node_modules/json5": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
@@ -3727,8 +4481,7 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -3745,6 +4498,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.includes": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -4016,7 +4774,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4034,7 +4791,6 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4202,7 +4958,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -4210,6 +4965,23 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4240,8 +5012,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.10.1",
@@ -4263,7 +5034,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4474,7 +5244,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -4495,6 +5264,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.12.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
+      "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -4538,6 +5321,21 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-hot-toast": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
+      "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==",
+      "dependencies": {
+        "goober": "^2.1.10"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
@@ -4549,8 +5347,12 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
     "node_modules/react-redux": {
       "version": "9.1.0",
@@ -4578,6 +5380,22 @@
         }
       }
     },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-spinners": {
       "version": "0.13.8",
       "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
@@ -4587,16 +5405,44 @@
         "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-toastify": {
-      "version": "10.0.5",
-      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz",
-      "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==",
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
       "dependencies": {
-        "clsx": "^2.1.0"
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-virtualized": {
+      "version": "9.22.5",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
+      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
       },
       "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18"
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-virtualized/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/read-cache": {
@@ -4657,8 +5503,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
@@ -4683,11 +5528,15 @@
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.0.tgz",
       "integrity": "sha512-aw7jcGLDpSgNDyWBQLv2cedml85qd95/iszJjN988zX1t7AVRJi19d9kto5+W7oCfQ94gyo40dVbT6g2k4/kXg=="
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -4704,7 +5553,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -4840,6 +5688,23 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.75.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
+      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4877,7 +5742,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -4969,7 +5833,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
       "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
@@ -5012,6 +5875,22 @@
         "node": ">=8"
       }
     },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.1.0.tgz",
@@ -5028,6 +5907,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -5205,6 +6089,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stripe": {
+      "version": "14.24.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-14.24.0.tgz",
+      "integrity": "sha512-r0JWz2quThXsFbp1pevkAAoDk4sw3kFMQEc2qvxMFUOhw/SFGqtAGz4vQgP/fMWzO28ljBNEiz68KqRx0JS3dw==",
+      "dependencies": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.11.0"
+      },
+      "engines": {
+        "node": ">=12.*"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
@@ -5227,6 +6123,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -5265,7 +6166,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -5364,6 +6264,14 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -5523,6 +6431,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
diff --git a/package.json b/package.json
index 66f3338..78194c7 100644
--- a/package.json
+++ b/package.json
@@ -9,21 +9,30 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@mui/material": "^5.15.15",
+    "@mui/x-date-pickers": "^7.2.0",
     "@reduxjs/toolkit": "^2.2.2",
     "axios": "^1.6.8",
+    "dayjs": "^1.11.10",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.2",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "react-redux": "^9.1.0",
+    "react-slick": "^0.30.2",
     "react-spinners": "^0.13.8",
-    "react-toastify": "^10.0.5",
+    "react-virtualized": "^9.22.5",
     "sharp": "^0.33.3",
+    "slick-carousel": "^1.8.1",
+    "stripe": "^14.24.0",
     "swiper": "^11.0.7"
   },
   "devDependencies": {
@@ -31,6 +40,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.3",
     "postcss": "^8",
+    "sass": "^1.75.0",
     "tailwindcss": "^3.3.0"
   }
 }
diff --git a/pages/_app.js b/pages/_app.js
index 732c326..719d89b 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,13 +1,22 @@
+import Head from "next/head";
 import Layout from "@/components/layout/layout";
 import store from "@/store/store";
-import "@/styles/globals.css";
 import { Provider } from "react-redux";
+import "@/styles/globals.css";
 
 export default function App({ Component, pageProps }) {
   return (
     <>
       <Provider store={store}>
         <Layout>
+          <Head>
+            <title>Life Link</title>
+            <meta name="description" content="Doctor Appointment " />
+            <meta
+              name="viewport"
+              content="initial-scale=1.0, width=device-width"
+            />
+          </Head>
           <Component {...pageProps} />;
         </Layout>
       </Provider>
diff --git a/pages/_document.js b/pages/_document.js
index bc71c31..6ab3358 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -12,6 +12,7 @@ export default function Document() {
       <body>
         <Main />
         <NextScript />
+        <div id="modal"></div>
       </body>
     </Html>
   );
diff --git a/pages/contact/index.js b/pages/contact/index.js
index 2984c89..1babac4 100644
--- a/pages/contact/index.js
+++ b/pages/contact/index.js
@@ -1,13 +1,19 @@
+import Head from "next/head";
+
 export default function Contact() {
   return (
     <section>
+      <Head>
+        <title>Contact Us</title>
+        <meta name="description" content="Contact us page" />
+      </Head>
       <div className="px-4 mx-auto max-w-screen-md">
         <h2 className="heading text-center">Contact Us</h2>
         <p className="mb-8 lg:mb-16 font-light text-center  text__para">
           Get a technical issue? Want to send feedback about a beta feature? Let
           us know
         </p>
-        <form action="">
+        <form>
           <div>
             <label htmlFor="" className="from__label">
               Your Email
diff --git a/pages/doctors/[slug].js b/pages/doctors/[slug].js
index b578c28..c9abccd 100644
--- a/pages/doctors/[slug].js
+++ b/pages/doctors/[slug].js
@@ -1,80 +1,173 @@
 import Image from "next/image";
-import doctorImg from "../../public/assets/images/doctor-img02.png";
-import starIcon from "../../public/assets/images/Star.png";
-import { useState } from "react";
+import axios from "axios";
+import Head from "next/head";
 import DoctorAbout from "@/components/Doctors/DoctorAbout";
 import FeedBack from "@/components/Doctors/FeedBack";
 import SidePanel from "@/components/Doctors/SidePanel";
+import starIcon from "../../public/assets/images/Star.png";
+import { useEffect, useState } from "react";
+import { BASE_URL } from "@/utils/config";
+import { capitalize } from "@/utils/heplerFunction";
 
-export default function DoctorDetails() {
+export default function DoctorDetails({ doctor, error, timeslots }) {
   const [tab, setTab] = useState("about");
 
+  const {
+    name,
+    averageRating,
+    totalRating,
+    photo,
+    bio,
+    about,
+    specialization,
+    experiences,
+    qualifications,
+    reviews,
+    fees,
+    address,
+    timeSlots_data,
+  } = doctor;
+
+  // Reset the tab to about whenever the doctor prop changes
+  useEffect(() => {
+    setTab("about");
+  }, [doctor]);
+
   return (
-    <section>
-      <div className="max-w-[1170px] px-5 mx-auto">
-        <div className="grid md:grid-cols-3 gap-[50px]">
-          <div className="md:col-span-2">
-            <div className="flex items-center gap-5">
-              <figure className="max-w-[200px] max-h-[200px] ">
-                <Image src={doctorImg} alt="" className="w-full" />
-              </figure>
-              <div className="">
-                <span
-                  className="bg-[#CCF0F3] text-irisBlueColor py-1 px-6 lg:py-2 lg:px-6 text-[12px] leading-4 lg:text-[16px] lg:leading-7 font-semibold
+    <>
+      {error && <Error Error errMessgae={error} />}
+      {!error && (
+        <section>
+          <Head>
+            <title>{`${capitalize(doctor?.name)}'s Detail Page`}</title>
+            <meta name="description" content="Doctor profile page" />
+          </Head>
+          <div className="max-w-[1170px] px-5 mx-auto">
+            <div className="grid md:grid-cols-3 gap-[50px]">
+              <div className="md:col-span-2">
+                <div className="flex items-center gap-5">
+                  <figure>
+                    <Image
+                      src={photo}
+                      alt=""
+                      className="w-full"
+                      width={200}
+                      height={200}
+                    />
+                  </figure>
+                  <div className="">
+                    <span
+                      className="bg-[#CCF0F3] text-irisBlueColor py-1 px-6 lg:py-2 lg:px-6 text-[12px] leading-4 lg:text-[16px] lg:leading-7 font-semibold
              rounded "
-                >
-                  Surgeon
-                </span>
-                <h3 className="text-headingColor text-[22px] leading-9 mt-3 font-bold ">
-                  Jay Zadafiya
-                </h3>
-                <div className="flex items-center gap-[6px]">
-                  <span className="flex items-center gap-[6px] text-[14px] leading-5lg:text-[16px] lg:leading-7 font-semibold text-headingColor ">
-                    <Image src={starIcon} alt="" />
-                    4.8
-                  </span>
-                  <span className=" text-[14px] leading-5lg:text-[16px] lg:leading-7 font-semibold text-headingColor">
-                    (272)
-                  </span>
-                </div>
+                    >
+                      {specialization}
+                    </span>
+                    <h3 className="text-headingColor text-[22px] leading-9 mt-3 font-bold ">
+                      {name}
+                    </h3>
+                    <div className="flex items-center gap-[6px]">
+                      <span className="flex items-center gap-[6px] text-[14px] leading-5lg:text-[16px] lg:leading-7 font-semibold text-headingColor ">
+                        <Image src={starIcon} alt="" />
+                        {averageRating}
+                      </span>
+                      <span className=" text-[14px] leading-5lg:text-[16px] lg:leading-7 font-semibold text-headingColor">
+                        ({totalRating})
+                      </span>
+                    </div>
 
-                <p className=" text__para tetx-[14px]  leading-6  md:text-[15px] lg:max-w-[398px]">
-                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-                  Abasuidahjnzkzu asdasi uashiaihiah
-                </p>
-              </div>
-            </div>
+                    <p className=" text__para tetx-[14px]  leading-6  md:text-[15px] lg:max-w-[398px]">
+                      {bio}
+                    </p>
+                  </div>
+                </div>
 
-            <div className="mt-[50px] border-b border-solid border-[#g066ff34]">
-              <button
-                className={`${
-                  tab === "about" && "border-b border-solid border-primaryColor"
-                } py-2 px-5 mr-5 tetxt-[16px] leading-7 text-headingColor font-semibold   `}
-                onClick={() => setTab("about")}
-              >
-                About
-              </button>
-              <button
-                className={`${
-                  tab === "feedback" &&
-                  "border-b border-solid border-primaryColor"
-                } py-2 px-5 mr-5 tetxt-[16px] leading-7 text-headingColor font-semibold  `}
-                onClick={() => setTab("feedback")}
-              >
-                Feedback
-              </button>
-            </div>
+                <div className="mt-[50px] border-b border-solid border-[#g066ff34]">
+                  <button
+                    className={`${
+                      tab === "about" &&
+                      "border-b border-solid border-primaryColor"
+                    } py-2 px-5 mr-5 tetxt-[16px] leading-7 text-headingColor font-semibold   `}
+                    onClick={() => setTab("about")}
+                  >
+                    About
+                  </button>
+                  <button
+                    className={`${
+                      tab === "feedback" &&
+                      "border-b border-solid border-primaryColor"
+                    } py-2 px-5 mr-5 tetxt-[16px] leading-7 text-headingColor font-semibold  `}
+                    onClick={() => setTab("feedback")}
+                  >
+                    Feedback
+                  </button>
+                </div>
 
-            <div className="mt-[50px] ">
-              {tab === "about" && <DoctorAbout />}
-              {tab === "feedback" && <FeedBack />}
+                <div className="mt-[50px] ">
+                  {tab === "about" && (
+                    <DoctorAbout
+                      name={name}
+                      about={about}
+                      qualifications={qualifications}
+                      experiences={experiences}
+                    />
+                  )}
+                  {tab === "feedback" && (
+                    <FeedBack reviews={reviews} totalRating={totalRating} />
+                  )}
+                </div>
+              </div>
+              <div>
+                <SidePanel
+                  timeslotsData={timeSlots_data}
+                  timeslots={timeslots}
+                  fees={fees}
+                  address={address}
+                />
+              </div>
             </div>
           </div>
-          <div>
-            <SidePanel />
-          </div>
-        </div>
-      </div>
-    </section>
+        </section>
+      )}
+    </>
   );
 }
+
+export async function getStaticProps(context) {
+  try {
+    const { slug } = context.params;
+    const res = await axios.get(`${BASE_URL}/doctors/${slug}`);
+
+    return {
+      props: {
+        doctor: res.data.doctor,
+        timeslots: res.data.timeslots,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        error:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Error fetching doctor data",
+      },
+    };
+  }
+}
+export async function getStaticPaths() {
+  try {
+    const res = await axios.get(`${BASE_URL}/doctors`);
+    const doctors = res.data;
+
+    // Get the paths we want to pre-render based on doctors
+    const paths = doctors.map((doctor) => ({
+      params: { slug: doctor._id },
+    }));
+
+    // { fallback: false } means other routes should 404.
+    return { paths, fallback: false };
+  } catch (error) {
+    console.error("Error fetching doctor data:", error);
+    return { paths: [], fallback: false };
+  }
+}
diff --git a/pages/doctors/index.js b/pages/doctors/index.js
index 72cad4e..ed672ce 100644
--- a/pages/doctors/index.js
+++ b/pages/doctors/index.js
@@ -1,50 +1,118 @@
-import { doctors } from "@/public/assets/data/doctors";
+import axios from "axios";
+import Head from "next/head";
 import DoctorCard from "@/components/Doctors/DoctorCard";
 import Testimonial from "@/components/Testimonial/Testimonial";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { searchDoctor, setDocterList } from "@/store/slices/doctorSlice";
+import { BASE_URL } from "@/utils/config";
+
+export default function Doctors({ doctors, error }) {
+  const query = useRef();
+
+  const dispatch = useDispatch();
+
+  let { doctorList, searchDoctorList } = useSelector((state) => state.doctor);
+
+  useEffect(() => {
+    // docterList use for conditional dispatch action
+    if (!doctorList) {
+      dispatch(setDocterList(doctors));
+    }
+  }, [dispatch, doctors, doctorList]);
+
+  const handleSearch = (e) => {
+    const searchTerm = query.current.value.trim();
+    if (searchTerm !== "") {
+      dispatch(searchDoctor(searchTerm));
+    } else {
+      searchDoctorList = [];
+    }
+  };
 
-export default function Doctors() {
   return (
     <>
-      <section className="bg-[#fff9ea]">
-        <div className="container text-center">
-          <h2 className=" heading">Find a Doctor</h2>
-          <div className="max-w-[578px] mt-[30px] mx-auto bg-[#0866ff2c] rounded-md flex items-center justify-between">
-            <input
-              type="search"
-              className="py-4 px-2 bg-transparent w-full focus:outline-none cursor-pointer placeholder:text-textColor"
-              placeholder="Search Doctor"
-            />
-            <button className="btn mt-0 rounded-r-md rounded-[0px]">
-              Search
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <div className="container">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4   gap-5  ">
-            {doctors.map((doctor) => (
-              <DoctorCard key={doctor.id} doctor={doctor} />
-            ))}
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <div className="container">
-          <div className="lg:w-[470px] mx-auto ">
-            <h2 className="heading text-center">What out patient say</h2>
-            <p className="text__para text-center">
-              Wolrd-class for everyone. Our health System offers unmatched
-              expert health care
-            </p>
-          </div>
-          <Testimonial />
-        </div>
-      </section>
+      {error && <Error Error errMessgae={error} />}
+      {!error && (
+        <>
+          <Head>
+            <title>Find a doctor</title>
+            <meta name="description" content="Doctor search page " />
+          </Head>
+          <section className="bg-[#fff9ea]">
+            <div className="container text-center">
+              <h2 className=" heading">Find a Doctor</h2>
+              <div className="max-w-[578px] mt-[30px] mx-auto bg-[#0866ff2c] rounded-md flex items-center justify-between">
+                <input
+                  type="search"
+                  className="py-4 px-2 bg-transparent w-full focus:outline-none cursor-pointer placeholder:text-textColor"
+                  placeholder="Search Doctor by name or specificatoins"
+                  ref={query}
+                />
+                <button
+                  className="btn mt-0 rounded-r-md rounded-[0px]"
+                  onClick={handleSearch}
+                >
+                  Search
+                </button>
+              </div>
+            </div>
+          </section>
+
+          <section>
+            <div className="container">
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4   gap-5  ">
+                {searchDoctorList?.length > 0 &&
+                  searchDoctorList?.map((doctor) => (
+                    <DoctorCard key={doctor._id} doctor={doctor} />
+                  ))}
+
+                {!query.current?.value &&
+                  doctors?.map((doctor) => (
+                    <DoctorCard key={doctor._id} doctor={doctor} />
+                  ))}
+
+                {query.current?.value.trim() !== "" &&
+                  searchDoctorList?.length === 0 && <div>No Doctor found</div>}
+              </div>
+            </div>
+          </section>
+
+          <section>
+            <div className="container">
+              <div className="lg:w-[470px] mx-auto ">
+                <h2 className="heading text-center">What out patient say</h2>
+                <p className="text__para text-center">
+                  Wolrd-class for everyone. Our health System offers unmatched
+                  expert health care
+                </p>
+              </div>
+              <Testimonial />
+            </div>
+          </section>
+        </>
+      )}
     </>
   );
 }
 
-// export async function getStaticProps() {}
+export async function getStaticProps() {
+  try {
+    const res = await axios.get(`${BASE_URL}/doctors`);
+
+    return {
+      props: {
+        doctors: res.data,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        error:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Error fetching doctor data",
+      },
+    };
+  }
+}
diff --git a/pages/doctors/profile/index.js b/pages/doctors/profile/index.js
index 25758c1..b1f0bcb 100644
--- a/pages/doctors/profile/index.js
+++ b/pages/doctors/profile/index.js
@@ -1,5 +1,154 @@
-import ProtectedRoute from "@/components/ProtectedRoute/ProtectedRoute";
+import axios from "axios";
+import Image from "next/image";
+import Head from "next/head";
+import Error from "@/components/Error/Error";
+import Tabs from "@/components/Doctors/Dashboard/Tabs";
+import avtarImg from "../../../public/assets/images/doctor-img01.png";
+import star from "../../../public/assets/images/Star.png";
+import DoctorAbout from "@/components/Doctors/DoctorAbout";
+import Profile from "@/components/Doctors/Dashboard/Profile";
+import AppointmentTablePagination from "@/components/AppointmentTable/TablePagination";
 
-export default function Dashbord() {
-  return <div>Dashbord</div>;
+import { useState } from "react";
+import { FiInfo } from "react-icons/fi";
+import { BASE_URL } from "@/utils/config";
+import { capitalize } from "@/utils/heplerFunction";
+
+export default function Dashboard({ doctor, error, appointments }) {
+  const [tab, setTab] = useState("overview");
+
+  if (error || !doctor) {
+    return <Error Error errMessgae={error} />;
+  }
+
+  return (
+    <section>
+      <Head>
+        {(tab === "overview" || tab === "settings") && (
+          <title>{`${capitalize(doctor?.name)}'s Profile`}</title>
+        )}
+        <meta
+          name="description"
+          content="doctor profile setting and appointment data"
+        />
+      </Head>
+      <div className="max-w-[1170px] px-5 mx-auto">
+        <div className="grid lg:grid-cols-3 gap-[30px] lg:gap-[50px]">
+          <Tabs tab={tab} setTab={setTab} />
+          <div className="lg:col-span-2 ">
+            <div
+              className={`${
+                doctor.isApproved !== "pending" ? "hidden" : ""
+              } flex items-center justify-evenly p-4 mb-4 text-yellow-800 bg-yellow-50 rounded-lg`}
+            >
+              <FiInfo size={30} />
+
+              <div className="ml-3 text-sm font-medium">
+                To get approval please complete your profile. We&apos;ll review
+                manually and approve within 3 Days
+              </div>
+            </div>
+
+            <div className="mt-8">
+              <div className={`${tab !== "overview" ? "hidden" : ""} mt-8`}>
+                <div className="flex items-center gap-4 mb-18">
+                  <figure className="max-w-[200px] max-h-[200]">
+                    <Image
+                      src={doctor?.photo ? doctor.photo : avtarImg}
+                      alt=""
+                      width={200}
+                      height={200}
+                    />
+                  </figure>
+
+                  <div>
+                    <span className="bg-[#CCF0F3] text-irisBlueColor py-1 px-4 lg:py-2 lg:px-6 rounded text-[12px] leading-4 lg:text-[16px]  font-semibold">
+                      {doctor.specialization}
+                    </span>
+
+                    <h3 className="text-[22pz] leading-9 font-bold text-headingColor mt-3">
+                      {doctor.name}
+                    </h3>
+
+                    <div className="flex items-center gP-[6px]">
+                      <span className="flex items-center gap-[6px] text-headingColor text-[14px] leading-5 lg:text-[16px] lg:leading-6 font-semibold">
+                        <Image src={star} alt="" />
+                        {doctor.averageRating}
+                      </span>
+
+                      <span className="text-textColor text-[14px] leading-5 lg:text-[16px] lg:leading-6 font-semibold">
+                        ({doctor.totalRating})
+                      </span>
+                    </div>
+
+                    <div className="text__para font-[15px] lg:max-w-[390px] leading-6">
+                      {doctor?.bio}
+                    </div>
+                  </div>
+                </div>
+                <DoctorAbout
+                  name={doctor.name}
+                  about={doctor.about}
+                  qualifications={doctor.qualifications}
+                  experiences={doctor.experiences}
+                />
+              </div>
+
+              <div className={`${tab !== "appointments" ? "hidden" : ""}`}>
+                <h2 className="text-primaryColor text-[24px] font-bold leading-9 mb-5">
+                  Upcomming Appointments
+                </h2>
+                <AppointmentTablePagination
+                  type="doctor"
+                  appointments={appointments.upcoming}
+                />
+              </div>
+
+              <div className={`${tab !== "settings" ? "hidden" : ""}`}>
+                <Profile doctor={doctor} />
+              </div>
+
+              <div className={`${tab !== "history" ? "hidden" : ""}`}>
+                <h2 className="text-primaryColor  text-[24px] font-semibold leading-9 mb-5">
+                  Appointment History
+                </h2>
+                <AppointmentTablePagination
+                  type="doctor"
+                  appointments={appointments.history}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export async function getServerSideProps(context) {
+  try {
+    const cookieToken = context.req.cookies.token;
+
+    const res = await axios.get(`${BASE_URL}/doctors/profile`, {
+      headers: {
+        Authorization: `Bearer ${cookieToken}`,
+      },
+    });
+    
+    return {
+      props: {
+        doctor: res.data.doctorDetails,
+        appointments: res.data.appointments,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        error:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Error fetching doctor data",
+      },
+    };
+  }
 }
diff --git a/pages/drop-for-life/donate/index.js b/pages/drop-for-life/donate/index.js
new file mode 100644
index 0000000..5b7afc5
--- /dev/null
+++ b/pages/drop-for-life/donate/index.js
@@ -0,0 +1,110 @@
+import axios from "axios";
+import toast from "react-hot-toast";
+import MedicalInfoForm from "@/components/DFL/Donate/MedicalInfoForm";
+import PersonalInfoForm from "@/components/DFL/Donate/PersonalInfoForm";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import { donorFormValidation } from "@/utils/formValidation";
+import { BASE_URL } from "@/utils/config";
+
+import style from "../../../styles/DFL/donate.module.scss";
+
+export default function Donate() {
+  const [showMedicalForm, setShowMedicalForm] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
+
+  const { user, accessToken } = useSelector((state) => state.user);
+
+  const [formData, setFormData] = useState({
+    dob: "",
+    city: "",
+    phone: "",
+    weight: "",
+    disease: "",
+    styling: "",
+    surgery: "",
+    addharCard: "",
+    lastDonationDate: "",
+    _id: user?._id || "",
+    name: user?.name || "",
+    email: user?.email || "",
+    gender: user?.gender || "",
+    address: user?.address || "",
+    bloodType: user?.bloodType || "",
+  });
+
+  const handleChange = (name, value) => {
+    const newValue = name === "phone" ? parseInt(value) : value;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: newValue,
+    }));
+  };
+
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+
+    const formErrors = donorFormValidation({ ...formData, [name]: value });
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: formErrors[name] || "",
+    }));
+  };
+
+  const handleSubmitPersonalInfo = (e) => {
+    e.preventDefault();
+    setShowMedicalForm(true);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const formError = donorFormValidation(formData);
+    setErrors(formError);
+
+    if (Object.keys(formError).length === 0) {
+      try {
+        setLoading(true);
+        const { data } = await axios.put(`${BASE_URL}/donor`, formData, {
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${accessToken}`,
+          },
+        });
+        console.log(data);
+
+        toast.success("Thank you so much for become donor");
+
+        setLoading(false);
+      } catch (error) {
+        const err = error?.response?.data?.message || error?.message;
+        toast.error(err);
+        setLoading(false);
+        return null;
+      }
+    }
+  };
+  return (
+    <>
+      <PersonalInfoForm
+        formData={formData}
+        onNextClick={handleSubmitPersonalInfo}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        errors={errors}
+      />
+
+      <div className={`${showMedicalForm ? "" : style.hidden}`}>
+        <MedicalInfoForm
+          formData={formData}
+          onSubmit={handleSubmit}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          loading={loading}
+          errors={errors}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/pages/drop-for-life/index.js b/pages/drop-for-life/index.js
new file mode 100644
index 0000000..c1d5038
--- /dev/null
+++ b/pages/drop-for-life/index.js
@@ -0,0 +1,123 @@
+import style from "../../styles/DFL/HomeDfl.module.scss";
+import Image from "next/image";
+import Link from "next/link";
+import Card from "@/components/DFL/Card";
+
+import donate from "../../public/assets/images/dfl/donate.jpg";
+import registration from "../../public/assets/images/dfl/registration.jpg";
+import refreshment from "../../public/assets/images/dfl/refreshment.jpg";
+import bloodcheck from "../../public/assets/images/dfl/bloodcheck.jpg";
+import donation from "../../public/assets/images/dfl/donation.jpg";
+
+export default function () {
+  return (
+    <>
+      <div className={style.banner}>
+        <div className={style.content}>
+          <h1>A DROP FOR LIFE</h1>
+          <p>
+            “Blood Donation Is A Small Act Of Kindness That Does Great And Big
+            Wonders.”
+          </p>
+
+          <div>
+            <Link href="/drop-for-life/donate">
+              <button type="button">DONATE</button>
+            </Link>
+            <Link href="/drop-for-life/request">
+              <button type="button">REQUEST</button>
+            </Link>
+          </div>
+        </div>
+      </div>
+
+      <div className={style.firstblock}>
+        <div className={style.text}>
+          <p>
+            Patients' families in underdeveloped nations like <span>Nepal</span>
+            bear the responsibility and worry of managing and transporting
+            blood.
+          </p>
+          <p>
+            <span>We're working hard to fix that.</span>
+          </p>
+        </div>
+
+        <div className={style.img_container}>
+          <Image
+            src={donate}
+            className="donate"
+            width={800}
+            height={500}
+            alt=""
+          />
+        </div>
+      </div>
+
+      <div className={style.reasons_container}>
+        <h2>5 Reasons to donate blood</h2>
+        <ol>
+          <li> 1/3 of us will need a blood transfusion in our lifetime.</li>
+          <li>
+            3 lives can be saved with the amount of blood donated in one
+            sitting.
+          </li>
+          <li> Every 2 seconds someone in the world needs blood.</li>
+          <li>
+            62 countries got sufficient blood supplies from voluntary donations.
+          </li>
+          <li>
+            It takes 36 hours to naturally replace blood lost from the body.
+          </li>
+        </ol>
+        <h3>
+          “Donate Blood Because You Never Know How Helpful It Might Be To
+          Someone.”
+        </h3>
+      </div>
+
+      <div>
+        <div className={style.process}>
+          <h3>DONATION PROCESS</h3>
+          <p>
+            The donation process from the time you arrive at center until the
+            time you leave
+          </p>
+        </div>
+        <div className={style.card_container}>
+          <div className={style.cards}>
+            <Card
+              title="REGISTRATION"
+              img={registration}
+              text=" You need to complete a very simple registration form which
+                contatins all required contact information to enter in the
+                donation process."
+            />
+            <Card
+              title="SCREENING"
+              img={bloodcheck}
+              text="A drop of blood from your finger will be taken for a simple test
+                to ensure that your blood levels are proper enough for donation."
+            />
+          </div>
+
+          <div className={style.cards}>
+            <Card
+              title="DONATION"
+              img={donation}
+              text="After passing screening test successfully you will be directed
+                to a donor bed for donation. It will take only 6-10 minutes."
+            />
+            <Card
+              title="REFRESHMENT"
+              img={refreshment}
+              text="  you can also stay in the sitting room until you feel strong
+                enough to leave the center. You will receive refreshments in the
+                donation zone"
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/pages/drop-for-life/request/index.js b/pages/drop-for-life/request/index.js
new file mode 100644
index 0000000..f08ea3c
--- /dev/null
+++ b/pages/drop-for-life/request/index.js
@@ -0,0 +1,36 @@
+import Head from "next/head";
+import LeftSidebar from "@/components/DFL/Request/LeftSidebar";
+import RightSidePanal from "@/components/DFL/Request/RightSidePanal";
+import { useEffect } from "react";
+import { useDispatch } from "react-redux";
+
+import style from "../../../styles/DFL/request.module.scss";
+import { fetchDonorData } from "@/store/slices/DFLSlice";
+
+export default function Request() {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      const { latitude, longitude } = position.coords;
+
+      dispatch(
+        fetchDonorData({
+          latlng: `${latitude},${longitude}`,
+          page: 1,
+        })
+      );
+    });
+  }, []);
+
+  return (
+    <div className={style.request_container}>
+      <Head>
+        <title>Donor Request Page</title>
+        <meta name="description" content="User can find donor " />
+      </Head>
+      <LeftSidebar />
+      <RightSidePanal />
+    </div>
+  );
+}
diff --git a/pages/index.js b/pages/index.js
index ccdfd9d..60201fc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -17,13 +17,27 @@ import avatarImage from "../public/assets/images/avatar-icon.png";
 import faqImg from "../public/assets/images/faq-img.png";
 import FaqList from "@/components/Faq/FaqList";
 import Testimonial from "@/components/Testimonial/Testimonial";
-import Cookies from "js-cookie";
-import jwt from "jsonwebtoken";
 import axios from "axios";
 import { BASE_URL } from "@/utils/config";
+import { useDispatch, useSelector } from "react-redux";
+import { setDocterList } from "@/store/slices/doctorSlice";
+import { useEffect } from "react";
+
+export default function Home({ doctors, error }) {
+  const { doctorList } = useSelector((state) => state.doctor);
+
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!doctorList) {
+      dispatch(setDocterList(doctors));
+    }
+  }, [dispatch, doctors, doctorList]);
+
+  if (error) {
+    return <Error Error errMessgae={error} />;
+  }
 
-export default function Home({ userData }) {
-  console.log(userData);
   return (
     <>
       {/* hero Section start */}
@@ -275,7 +289,7 @@ export default function Home({ userData }) {
               expert health care
             </p>
           </div>
-          <DoctorList />
+          <DoctorList doctors={doctors} />
         </div>
       </section>
 
@@ -317,44 +331,22 @@ export default function Home({ userData }) {
   );
 }
 
-// export async function getServerSideProps(context) {
-//   // Fetch user data from the backend
-//   try {
-//     const token = context.req.cookies.token;
-//     console.log("token", token);
-
-//     const decodedToken = jwt.decode(token);
-
-//     console.log(decodedToken);
-//     let userData = null;
-
-//     if (token) {
-//       try {
-//         const response = await axios.get(
-//           `${BASE_URL}/users/${decodedToken.userId}/me`,
-//           {
-//             headers: {
-//               Authorization: `Bearer ${token}`,
-//             },
-//           }
-//         );
-//         userData = response.data;
-//       } catch (error) {
-//         console.log(error);
-//       }
-//     }
-
-//     return {
-//       props: {
-//         userData,
-//       },
-//     };
-//   } catch (error) {
-//     console.error("Error fetching user data:", error);
-//     return {
-//       props: {
-//         userData: null,
-//       },
-//     };
-//   }
-// }
+export async function getStaticProps() {
+  try {
+    const res = await axios.get(`${BASE_URL}/doctors`);
+    return {
+      props: {
+        doctors: res.data,
+      },
+    };
+  } catch (error) {
+    return {
+      props: {
+        error:
+          error?.response?.data?.message ||
+          error?.message ||
+          "Error fetching doctor data",
+      },
+    };
+  }
+}
diff --git a/pages/login/index.js b/pages/login/index.js
index c8f9bef..dd2e0cb 100644
--- a/pages/login/index.js
+++ b/pages/login/index.js
@@ -1,10 +1,12 @@
-import Error from "@/components/Error/Error";
-import { login, setUserState } from "@/store/slices/userSlice";
+import Head from "next/head";
 import Link from "next/link";
+import toast from "react-hot-toast";
+import { useState } from "react";
 import { useRouter } from "next/router";
-import React, { useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
+import { login } from "@/store/slices/userSlice";
 import { HashLoader } from "react-spinners";
+import { loginFormvalidation } from "@/utils/formValidation";
 
 export default function Login() {
   const dispatch = useDispatch();
@@ -15,6 +17,7 @@ export default function Login() {
     email: "",
     password: "",
   });
+  const [errors, setErrors] = useState({});
 
   const handelInputChange = (e) => {
     setFormDate({
@@ -23,21 +26,43 @@ export default function Login() {
     });
   };
 
+  const handleBlur = (e) => {
+    // const { name, value } = e.target;
+    // const formErrors = loginFormvalidation({ ...formData, [name]: value });
+    // setErrors((prevErrors) => ({
+    //   ...prevErrors,
+    //   [name]: formErrors[name] || "", // Clear previous errors for this field
+    // }));
+  };
+
   const handleSubmit = (event) => {
     event.preventDefault();
-    try {
-      dispatch(login(formData)).then((result) => {
-        if (result.payload && result.payload.data) {
-          router.push("/");
-        }
-      });
-    } catch (error) {
-      return <Error errMessgae={error} />;
+
+    const formErrors = loginFormvalidation(formData, true);
+    setErrors(formErrors);
+
+    if (Object.keys(formErrors).length !== 0) {
+      try {
+        dispatch(login(formData)).then((result) => {
+          if (result.payload && result.payload.data) {
+            router.push("/");
+          }
+        });
+      } catch (error) {
+        const err = error?.response?.data?.message || error?.message;
+        toast.error(err);
+
+        return null;
+      }
     }
   };
 
   return (
     <section className="px-5 lg:px-0">
+      <Head>
+        <title>Login Page</title>
+        <meta name="description" content="Login page" />
+      </Head>
       <div className="w-full max-w-[570px] mx-auto rounded-lg shadow-md md:p-10">
         <h3 className="text-headingColor text-[22px] leading-9 font-bold mb-10">
           Hello! <span className="text-primaryColor">Welcome</span> Back
@@ -50,10 +75,14 @@ export default function Login() {
               placeholder="Enter Your Email"
               name="email"
               value={formData.email}
+              onBlur={handleBlur}
               onChange={handelInputChange}
               className="w-full py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
             />
+            {errors.email && (
+              <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+            )}
           </div>
           <div className="mb-5">
             <input
@@ -61,10 +90,14 @@ export default function Login() {
               placeholder="Password"
               name="password"
               value={formData.password}
+              onBlur={handleBlur}
               onChange={handelInputChange}
               className="w-full py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
             />
+            {errors.password && (
+              <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+            )}
           </div>
           <div className="mt-7">
             <button
diff --git a/pages/services/index.js b/pages/services/index.js
index 7426061..5b4c522 100644
--- a/pages/services/index.js
+++ b/pages/services/index.js
@@ -1,9 +1,14 @@
+import Head from "next/head";
 import ServiceCard from "@/components/Services/ServiceCard";
 import { services } from "@/public/assets/data/services";
 
 export default function Services() {
   return (
     <section>
+      <Head>
+        <title>Services Page</title>
+        <meta name="description" content="Services page" />
+      </Head>
       <div className="container">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 lg:gap-[30px] ">
           {services.map((item, index) => (
diff --git a/pages/signup/index.js b/pages/signup/index.js
index 992908d..94c07ef 100644
--- a/pages/signup/index.js
+++ b/pages/signup/index.js
@@ -1,20 +1,22 @@
-import { useState } from "react";
-import { toast } from "react-toastify";
-
 import Link from "next/link";
 import Image from "next/image";
 import axios from "axios";
+import toast from "react-hot-toast";
+import Head from "next/head";
 import HashLoader from "react-spinners/HashLoader";
 
+import { useState } from "react";
+import { useRouter } from "next/router";
 import { BASE_URL } from "@/utils/config";
 import { uploadImageToCloudinary } from "@/utils/uploadCloudinary";
+import { signupFormvalidation } from "@/utils/formValidation";
 import signupImg from "../../public/assets/images/signup.gif";
-import { useRouter } from "next/router";
 
 export default function Signup() {
   const [selectFile, setSelectFile] = useState(null);
   const [previewURL, setPreviewURL] = useState("");
   const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState({});
 
   const router = useRouter();
 
@@ -45,37 +47,57 @@ export default function Signup() {
     setFormDate({ ...formData, photo: url });
   };
 
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    const formErrors = signupFormvalidation({ ...formData, [name]: value });
+    setErrors((prevErrors) => ({
+      ...prevErrors,
+      [name]: formErrors[name] || "", // Clear previous errors for this field
+    }));
+  };
+
   const submitHandler = async (e) => {
     e.preventDefault();
-    setLoading(true);
-
-    try {
-      const res = await axios.post(`${BASE_URL}/auth/signup`, formData);
-
-      router.push("/login");
-      console.log(res);
-      setLoading(false);
-    } catch (error) {
-      setLoading(false);
-      const err = error.response.data.message || error.message;
-      throw new Error(err);
+
+    const formErrors = signupFormvalidation(formData);
+    setErrors(formErrors);
+    if (Object.keys(formErrors).length === 0) {
+      setLoading(true);
+      try {
+        await axios.post(`${BASE_URL}/auth/signup`, formData);
+
+        router.push("/login");
+
+        toast.success("Registration Done !");
+        setLoading(false);
+      } catch (error) {
+        setLoading(false);
+        const err = error?.response?.data?.message || error?.message;
+        toast.error(err);
+
+        return null;
+      }
     }
   };
 
   return (
     <section className="px-5 xl:px-0">
+      <Head>
+        <title>Signup Page</title>
+        <meta name="description" content="Signup page" />
+      </Head>
       <div className="w-full max-w-[1178px] mx-auto ">
         <div className="grid grid-cols-1 lg:grid-cols-2">
           {/* img boc */}
 
-          <div className="hidden lg:block bg-primaryColor rounded-l-lg">
+          <div className="hidden lg:flex items-center bg-primaryColor rounded-l-lg ">
             <figure>
               <Image src={signupImg} alt="" className="w-full rounded-l-lg" />
             </figure>
           </div>
 
           {/* signup form  */}
-          <div className="rounded-l-lg lg:pl-16 py-10 ">
+          <div className="container rounded-l-lg lg:pl-16 py-10 ">
             <h3 className="text-headingColor text-[22px] leading-9 font-bold mb-10">
               Create an <span className="text-primaryColor">account</span>
             </h3>
@@ -88,9 +110,13 @@ export default function Signup() {
                   name="name"
                   value={formData.name}
                   onChange={handelInputChange}
+                  onBlur={handleBlur}
                   className="w-full pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
                 />
+                {errors.name && (
+                  <p className="text-red-500 text-sm ">{errors.name}</p>
+                )}
               </div>
 
               <div className="mb-5">
@@ -99,10 +125,14 @@ export default function Signup() {
                   placeholder="Enter Your Email"
                   name="email"
                   value={formData.email}
+                  onBlur={handleBlur}
                   onChange={handelInputChange}
                   className="w-full  pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
                 />
+                {errors.email && (
+                  <p className="text-red-500 text-sm mt-1">{errors.email}</p>
+                )}
               </div>
               <div className="mb-5">
                 <input
@@ -110,10 +140,15 @@ export default function Signup() {
                   placeholder="Password"
                   name="password"
                   value={formData.password}
+                  onBlur={handleBlur}
                   onChange={handelInputChange}
                   className="w-full  pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
                 />
+
+                {errors.password && (
+                  <p className="text-red-500 text-sm mt-1">{errors.password}</p>
+                )}
               </div>
               <div className="mb-5">
                 <input
@@ -121,10 +156,16 @@ export default function Signup() {
                   placeholder="Confirm Password"
                   name="passwordConfirm"
                   value={formData.passwordConfirm}
+                  onBlur={handleBlur}
                   onChange={handelInputChange}
                   className="w-full  pr-4 py-3 border-b border-solid border-[#8066ff61] focus:outline-none
               focus:border-b-primaryColor text-[16 px] leading-7 text-headingColor cursor-pointer "
                 />
+                {errors.passwordConfirm && (
+                  <p className="text-red-500 text-sm mt-1">
+                    {errors.passwordConfirm}
+                  </p>
+                )}
               </div>
 
               <div className="mb-5 flex items-center justify-between">
@@ -146,6 +187,7 @@ export default function Signup() {
                   <select
                     name="gender"
                     value={formData.gender}
+                    onBlur={handleBlur}
                     onChange={handelInputChange}
                     className="text-textColor font-semibold text-[15px] leading-7 px-4 py-3 focus:outline-none"
                   >
@@ -155,6 +197,10 @@ export default function Signup() {
                     <option value="other">Other</option>
                   </select>
                 </label>
+
+                {errors.gender && (
+                  <p className="text-red-500 text-sm mt-1">{errors.gender}</p>
+                )}
               </div>
 
               <div className="mb-5 flex items-center gap-3">
diff --git a/pages/users/profile/index.js b/pages/users/profile/index.js
index a89d23b..c6c7910 100644
--- a/pages/users/profile/index.js
+++ b/pages/users/profile/index.js
@@ -1,18 +1,23 @@
 import Image from "next/image";
+import Head from "next/head";
 import axios from "axios";
-import MyBookings from "@/components/User/MyBookings";
 import Profile from "@/components/User/Profile";
 import Error from "@/components/Error/Error";
+import AppointmentTablePagination from "@/components/AppointmentTable/TablePagination";
 
-import { useDispatch } from "react-redux";
-import { BASE_URL } from "@/utils/config";
 import { useState } from "react";
+import { useRouter } from "next/router";
+import { useDispatch, useSelector } from "react-redux";
 import { logout } from "@/store/slices/userSlice";
 
-import avtarImg from "../../../public/assets/images/avatar-icon.png";
+import { capitalize } from "@/utils/heplerFunction";
+import { BASE_URL } from "@/utils/config";
+import avtarImg from "../../../public/assets/images/patient-avatar.png";
 
-export default function MyAccount({ user, doctors, error }) {
+export default function MyAccount({ user, appointments, error }) {
   const dispatch = useDispatch();
+  const router = useRouter();
+
   const [tab, setTab] = useState("bookings");
 
   if (!user || error) {
@@ -21,9 +26,18 @@ export default function MyAccount({ user, doctors, error }) {
 
   const handleLogout = () => {
     dispatch(logout());
+    router.replace("/");
   };
+
   return (
     <section>
+      <Head>
+        <title>{`${capitalize(user?.name)}'s Profile`}</title>
+        <meta
+          name="description"
+          content="User profile setting and appointment data"
+        />
+      </Head>
       <div className="max-w[1178px] px-5 mx-auto ">
         <div className="grid md:grid-cols-3 gap-10">
           <div className="pb-[50px] px-[38px] rounded-md">
@@ -75,7 +89,15 @@ export default function MyAccount({ user, doctors, error }) {
                   tab === "bookings" && "bg-primaryColor text-white font-normal"
                 }  p-2 mr-5 px-5 rounded-md text-headingColor font-semibold text-[16px] border border-solid leading-7  border-primaryColor`}
               >
-                My bookings
+                My Appointments
+              </button>
+              <button
+                onClick={() => setTab("history")}
+                className={`${
+                  tab === "history" && "bg-primaryColor text-white font-normal"
+                } p-2 mr-5 px-5 rounded-md text-headingColor font-semibold text-[16px] border border-solid leading-7 border-primaryColor `}
+              >
+                History
               </button>
               <button
                 onClick={() => setTab("settings")}
@@ -86,8 +108,22 @@ export default function MyAccount({ user, doctors, error }) {
                 Profile Settings
               </button>
             </div>
-            {tab === "bookings" && <MyBookings appointentments={doctors} />}
-            {tab === "settings" && <Profile user={user} />}
+            <div className={`${tab !== "bookings" ? "hidden" : ""}`}>
+              <AppointmentTablePagination
+                type="user"
+                appointments={appointments.upcoming}
+              />
+            </div>
+            <div className={`${tab !== "history" ? "hidden" : ""}`}>
+              <AppointmentTablePagination
+                type="user"
+                appointments={appointments.history}
+              />
+            </div>
+
+            <div className={`${tab !== "settings" ? "hidden" : ""}`}>
+              <Profile user={user} />
+            </div>
           </div>
         </div>
       </div>
@@ -106,7 +142,7 @@ export async function getServerSideProps(context) {
       },
     });
 
-    const doctors = await axios.get(`${BASE_URL}/users/my-appointments`, {
+    const appointments = await axios.get(`${BASE_URL}/users/my-appointments`, {
       headers: {
         Authorization: `Bearer ${cookieToken}`,
       },
@@ -114,11 +150,10 @@ export async function getServerSideProps(context) {
     return {
       props: {
         user: user.data,
-        doctors: doctors.data,
+        appointments: appointments.data,
       },
     };
   } catch (error) {
-    console.error("Error fetching user data:", error);
     return {
       props: {
         error:
diff --git a/public/assets/images/dfl/background.jpg b/public/assets/images/dfl/background.jpg
new file mode 100644
index 0000000..8cda28a
Binary files /dev/null and b/public/assets/images/dfl/background.jpg differ
diff --git a/public/assets/images/dfl/blood.png b/public/assets/images/dfl/blood.png
new file mode 100644
index 0000000..686dfac
Binary files /dev/null and b/public/assets/images/dfl/blood.png differ
diff --git a/public/assets/images/dfl/bloodcheck.jpg b/public/assets/images/dfl/bloodcheck.jpg
new file mode 100644
index 0000000..49f5b39
Binary files /dev/null and b/public/assets/images/dfl/bloodcheck.jpg differ
diff --git a/public/assets/images/dfl/donate logo.png b/public/assets/images/dfl/donate logo.png
new file mode 100644
index 0000000..890ad61
Binary files /dev/null and b/public/assets/images/dfl/donate logo.png differ
diff --git a/public/assets/images/dfl/donate.jpg b/public/assets/images/dfl/donate.jpg
new file mode 100644
index 0000000..58c8d64
Binary files /dev/null and b/public/assets/images/dfl/donate.jpg differ
diff --git a/public/assets/images/dfl/donation.jpg b/public/assets/images/dfl/donation.jpg
new file mode 100644
index 0000000..9a61cc6
Binary files /dev/null and b/public/assets/images/dfl/donation.jpg differ
diff --git a/public/assets/images/dfl/footerlogo.png b/public/assets/images/dfl/footerlogo.png
new file mode 100644
index 0000000..83cfdd9
Binary files /dev/null and b/public/assets/images/dfl/footerlogo.png differ
diff --git a/public/assets/images/dfl/homeBanner.png b/public/assets/images/dfl/homeBanner.png
new file mode 100644
index 0000000..940cddb
Binary files /dev/null and b/public/assets/images/dfl/homeBanner.png differ
diff --git a/public/assets/images/dfl/logo.png b/public/assets/images/dfl/logo.png
new file mode 100644
index 0000000..fafb0c6
Binary files /dev/null and b/public/assets/images/dfl/logo.png differ
diff --git a/public/assets/images/dfl/refreshment.jpg b/public/assets/images/dfl/refreshment.jpg
new file mode 100644
index 0000000..fc955b6
Binary files /dev/null and b/public/assets/images/dfl/refreshment.jpg differ
diff --git a/public/assets/images/dfl/registration.jpg b/public/assets/images/dfl/registration.jpg
new file mode 100644
index 0000000..53547cb
Binary files /dev/null and b/public/assets/images/dfl/registration.jpg differ
diff --git a/store/slices/DFLSlice.js b/store/slices/DFLSlice.js
new file mode 100644
index 0000000..4ae5b4f
--- /dev/null
+++ b/store/slices/DFLSlice.js
@@ -0,0 +1,71 @@
+import { BASE_URL } from "@/utils/config";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import axios from "axios";
+import toast from "react-hot-toast";
+
+const initialState = {
+  donorData: null,
+  loading: false,
+  prevData: [],
+  requestData: {},
+  currentPage: 1,
+};
+
+export const fetchDonorData = createAsyncThunk(
+  "DFL/fetchDonorData",
+  async ({ latlng, formData, page }) => {
+    try {
+      let url = `${BASE_URL}/donor?page=${page}&limit=1&`;
+
+      if (formData) {
+        url += `&city=${formData.city}&bloodType=${encodeURIComponent(
+          formData.bloodType
+        )}&address=${formData.address}`;
+      }
+
+      const { data } = await axios.post(url, {
+        latlng: latlng,
+      });
+      return { data, requestData: { latlng, formData }, page };
+    } catch (error) {
+      const err = error?.response?.data?.message || error?.message;
+      throw new Error(err);
+    }
+  }
+);
+const DFLSlice = createSlice({
+  name: "DFL",
+  initialState,
+  reducers: {
+    getDonorData: (state, action) => {
+      state.currentPage = action.payload.page;
+      state.donorData = action.payload.data;
+    },
+    setPrevData: (state) => {
+      state.prevData = [];
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchDonorData.pending, (state, action) => {
+        state.loading = true;
+      })
+      .addCase(fetchDonorData.fulfilled, (state, action) => {
+        state.loading = false;
+
+        state.donorData = action.payload.data;
+        state.requestData = action.payload.requestData;
+        state.prevData.push(action.payload.data);
+        state.currentPage = action.payload.page;
+      })
+      .addCase(fetchDonorData.rejected, (state, action) => {
+        state.loading = false;
+        state.error = action.error.message;
+        toast.error(action.error.message);
+      });
+  },
+});
+
+export const { getDonorData, setPrevData } = DFLSlice.actions;
+
+export default DFLSlice.reducer;
diff --git a/store/slices/doctorSlice.js b/store/slices/doctorSlice.js
new file mode 100644
index 0000000..cd4ffa9
--- /dev/null
+++ b/store/slices/doctorSlice.js
@@ -0,0 +1,53 @@
+import { BASE_URL } from "@/utils/config";
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import axios from "axios";
+
+const initialState = {
+  doctorList: null,
+  searchDoctorList: null,
+  loading: false,
+};
+
+export const searchDoctor = createAsyncThunk(
+  "doctor/searchDoctor",
+  async (query) => {
+    try {
+      const res = await axios.get(`${BASE_URL}/doctors?query=${query}`);
+
+      return { data: res.data };
+    } catch (error) {
+      throw new Error(error.response.data.message);
+    }
+  }
+);
+
+const doctorSlice = createSlice({
+  name: "doctor",
+  initialState,
+  reducers: {
+    setDocterList: (state, { payload }) => {
+      state.doctorList = payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(searchDoctor.pending, (state) => {
+        state.loading = true;
+      })
+      .addCase(searchDoctor.fulfilled, (state, action) => {
+        state.searchDoctorList = action.payload.data;
+        state.loading = false;
+        state.error = null;
+      })
+      .addCase(searchDoctor.rejected, (state, action) => {
+        state.isLogging = false;
+        state.loading = false;
+        state.error = action.error.message;
+        toast.error(action.error.message);
+      });
+  },
+});
+
+export const { setDocterList } = doctorSlice.actions;
+
+export default doctorSlice.reducer;
diff --git a/store/slices/userSlice.js b/store/slices/userSlice.js
index 8029292..3e12878 100644
--- a/store/slices/userSlice.js
+++ b/store/slices/userSlice.js
@@ -3,9 +3,11 @@ import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
 import axios from "axios";
 import Cookies from "js-cookie";
 import jwt from "jsonwebtoken";
+import toast from "react-hot-toast";
 
 const initialState = {
   user: null,
+  role: null,
   accessToken: null,
   isLogging: false,
   loading: false,
@@ -21,54 +23,74 @@ export const login = createAsyncThunk("user/login", async (formData) => {
   }
 });
 
+// Function use to get login user(patient and doctor) data
 export const fetchUser = createAsyncThunk("user/fatchUser", async () => {
   try {
     const token = Cookies.get("token");
 
     const decodedToken = jwt.decode(token);
-
-    let res = null;
+    let data = null;
 
     if (decodedToken.role === "patient") {
-      res = await axios.get(`${BASE_URL}/users/profile`, {
+      const res = await axios.get(`${BASE_URL}/users/profile`, {
         headers: {
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
       });
+
+      data = res.data;
     } else if (decodedToken.role === "doctor") {
-      res = await axios.get(`${BASE_URL}/doctors/${id}`, {
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-      });
+      const res = await axios.get(
+        `${BASE_URL}/doctors/${decodedToken.userId}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
+
+      data = res.data.doctor;
     }
-    return { data: res.data, token };
+    return { data: data, token };
   } catch (error) {
+    toast.error(error.response.data.message);
     throw new Error(error.response.data.message);
   }
 });
 
-export const updateUser = createAsyncThunk(
-  "user/updateUser",
-  async ({ formData, userId }) => {
-    try {
-      console.log(userId);
-      const token = Cookies.get("token");
-      const res = await axios.put(`${BASE_URL}/users/${userId}`, formData, {
+export const updateUser = createAsyncThunk("user/updateUser", async (data) => {
+  try {
+    const token = Cookies.get("token");
+
+    const decodedToken = jwt.decode(token);
+    let res = null;
+
+    if (decodedToken.role === "patient") {
+      res = await axios.put(`${BASE_URL}/users/${decodedToken.userId}`, data, {
         headers: {
+          "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
       });
-
-      console.log(res);
-
-      return { data: res.data };
-    } catch (error) {
-      const err = error?.response?.data?.message || error?.message;
-      throw new Error(err);
+    } else if (decodedToken.role === "doctor") {
+      res = await axios.put(
+        `${BASE_URL}/doctors/${decodedToken.userId}`,
+        data,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        }
+      );
     }
+
+    return { data: res.data };
+  } catch (error) {
+    const err = error?.response?.data?.message || error?.message;
+    throw new Error(err);
   }
-);
+});
 
 const userSlice = createSlice({
   name: "user",
@@ -84,6 +106,7 @@ const userSlice = createSlice({
       Cookies.remove("token");
       state.user = null;
       state.accessToken = null;
+      toast.success("Come back soon!!!");
     },
   },
   extraReducers: (builder) => {
@@ -97,12 +120,29 @@ const userSlice = createSlice({
         state.isLogging = true;
         state.loading = false;
         state.error = null;
-        Cookies.set("token", state.accessToken);
+        Cookies.set("token", state.accessToken, {
+          expires: new Date(
+            Date.now() +
+              process.env.NEXT_PUBLIC_COOKIE_EXPIRESIN * 24 * 60 * 60 * 1000
+          ),
+          secure: true,
+        });
+        toast.success(
+          `Welcome ${action.payload.data.role === "patient" ? "Mr. " : "Dr. "}${
+            action.payload.data.name
+          }`
+        );
       })
       .addCase(login.rejected, (state, action) => {
         state.isLogging = false;
         state.loading = false;
         state.error = action.error.message;
+        toast.error(action.error.message);
+      })
+      .addCase(fetchUser.fulfilled, (state, action) => {
+        state.user = action.payload.data;
+        state.accessToken = action.payload.token;
+        state.role = action.payload.data.role;
       })
       .addCase(updateUser.pending, (state) => {
         state.loading = true;
@@ -111,16 +151,16 @@ const userSlice = createSlice({
         state.user = action.payload.data;
         state.loading = false;
         state.error = null;
+        toast.success(
+          `${action.payload.data.role === "patient" ? "Mr. " : "Dr. "}${
+            action.payload.data.name
+          } data get updated succesfully`
+        );
       })
       .addCase(updateUser.rejected, (state, action) => {
-        state.isLogging = false;
         state.loading = false;
         state.error = action.error.message;
-      })
-      .addCase(fetchUser.fulfilled, (state, action) => {
-        state.user = action.payload.data;
-        state.accessToken = action.payload.token;
-        console.log(state.user);
+        toast.error(action.error.message);
       });
   },
 });
diff --git a/store/store.js b/store/store.js
index de9528d..493f086 100644
--- a/store/store.js
+++ b/store/store.js
@@ -1,9 +1,13 @@
 import { configureStore } from "@reduxjs/toolkit";
 import userReducer from "./slices/userSlice";
+import doctorReducer from "./slices/doctorSlice";
+import DFLReducer from "./slices/DFLSlice";
 
 const store = configureStore({
   reducer: {
     user: userReducer,
+    doctor: doctorReducer,
+    dfl: DFLReducer,
   },
 });
 
diff --git a/styles/DFL/HomeDfl.module.scss b/styles/DFL/HomeDfl.module.scss
new file mode 100644
index 0000000..b3b8a96
--- /dev/null
+++ b/styles/DFL/HomeDfl.module.scss
@@ -0,0 +1,243 @@
+.banner {
+  /* width: 100vw; */
+  height: 100vh;
+  background-image: -webkit-gradient(
+      linear,
+      left top,
+      left bottom,
+      from(rgba(0, 0, 0, 0.9)),
+      to(rgba(0, 0, 0, 0.4))
+    ),
+    url(/assets/images/dfl/background.jpg);
+  background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4)),
+    url(/assets/images/dfl/background.jpg);
+  background-size: cover;
+  background-position: cover;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: #fff;
+
+    h1 {
+      font-size: 65px;
+    }
+
+    p {
+      margin: 20px auto;
+      font-weight: 100;
+      font-size: 2rem;
+      text-align: center;
+    }
+
+    button {
+      width: 200px;
+      padding: 20px;
+      text-align: center;
+      border-radius: 10px;
+      margin: 20px 10px;
+      font-weight: bold;
+      color: #fff;
+      background-color: #b70000;
+      border: 2px solid #fff;
+      cursor: pointer;
+      overflow: hidden;
+      font-size: 19px;
+
+      &:hover {
+        background-color: rgba(252, 83, 83);
+        color: #b70000;
+        border-color: #b70000;
+      }
+    }
+  }
+}
+
+.firstblock {
+  width: 100%;
+  height: max-content;
+  display: flex;
+
+  .text {
+    width: 50%;
+    padding: 5%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 2rem;
+
+    span {
+      color: red;
+    }
+  }
+
+  .img_container {
+    width: 50%;
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: auto;
+      height: 100%;
+    }
+  }
+}
+
+.reasons_container {
+  background: url(/assets/images/dfl/homeBanner.png) no-repeat center;
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2%;
+  color: white;
+  font-size: 1.3rem;
+
+  * {
+    margin: 10px;
+  }
+
+  ol {
+    padding: 5% 0;
+  }
+
+  h3 {
+    font-size: 30px;
+  }
+}
+
+.process {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+
+  h3 {
+    margin-top: 30px;
+    font-size: 60px;
+  }
+
+  p {
+    font-size: 1.25rem;
+    text-align: center;
+    margin-bottom: 30px;
+  }
+}
+.card_container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 20px;
+
+  .cards {
+    width: 50%;
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .card {
+      width: 50%;
+      height: 550px;
+      margin-bottom: 3rem;
+      border: none;
+      border-radius: 0.25rem;
+      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+      .image_top {
+        width: 100%;
+        min-height: 200px;
+        border-radius: 0.25rem 0.25rem 0 0;
+      }
+
+      .card_body {
+        padding: 25px;
+
+        .card_title {
+          font-size: 1.5rem;
+          font-weight: bold;
+          margin-bottom: 0.5rem;
+        }
+
+        .card_text {
+          font-size: 1.25rem;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .card_container {
+    flex-direction: column;
+  }
+
+  .cards {
+    width: 100%;
+    /* justify-content: space-around; */
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .content {
+    h1 {
+      font-size: 40px;
+    }
+
+    p {
+      font-size: 1.5rem;
+    }
+
+    button {
+      font-size: 15px;
+      padding: 10px;
+      width: 150px;
+    }
+  }
+
+  .firstblock {
+    flex-direction: column-reverse;
+    padding: 0;
+
+    .text {
+      width: 90%;
+      padding: 0;
+      font-size: 1.2rem;
+      margin: 5%;
+    }
+
+    .img_container {
+      width: 100%;
+      height: auto;
+
+      img {
+        width: 80%;
+      }
+    }
+  }
+
+  .process {
+    h3 {
+      margin-top: 15px;
+      font-size: 40px;
+    }
+
+    .cards {
+      flex-wrap: wrap;
+    }
+
+    .card {
+      height: 500px;
+    }
+  }
+}
diff --git a/styles/DFL/donate.module.scss b/styles/DFL/donate.module.scss
new file mode 100644
index 0000000..4ef2559
--- /dev/null
+++ b/styles/DFL/donate.module.scss
@@ -0,0 +1,125 @@
+.peronsal_info {
+  display: flex;
+  flex-direction: column;
+  margin: 5% 18%;
+  align-items: center;
+
+  .title {
+    font-size: 2.1rem;
+    font-weight: 500;
+    text-align: center;
+    margin: 30px 0;
+    color: red;
+  }
+
+  .form_header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #cf5e55;
+
+    .header_logo {
+      width: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .header_text {
+      width: 50%;
+      color: white;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      gap: 20px;
+      padding-right: 10px;
+
+      h1 {
+        font-size: 36px;
+        font-weight: bold;
+      }
+
+      p {
+        font-weight: 500;
+      }
+    }
+  }
+
+  form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    font-size: 1.2rem;
+
+    .form_items {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin-top: 30px;
+
+      .form_row {
+        width: 100%;
+        display: flex;
+        gap: 20px;
+
+        div {
+          width: 100%;
+
+          label {
+            color: #4e545f;
+            font-weight: 600;
+            font-size: 16px;
+          }
+
+          select,
+          input {
+            width: 100%;
+            padding: 12px 16px;
+            outline: none;
+            border-radius: 4px;
+            font-size: 16px;
+            line-height: 1.75;
+            color: #4e545f;
+            cursor: pointer;
+            border: 1px solid #4e545f;
+            margin-top: 8px;
+            margin-bottom: 20px;
+
+            &:focus {
+              border-color: #0067ff;
+            }
+          }
+
+          select {
+            padding: 15px;
+          }
+
+          p {
+            color: red;
+            margin-top: 4px;
+            font-size: 14px;
+            line-height: 20px;
+          }
+        }
+      }
+    }
+
+    button {
+      margin: 30px 0 -50px 0;
+      background-color: red;
+      color: white;
+      border: none;
+      padding: 10px 40px;
+      width: max-content;
+      border-radius: 20px;
+      font-size: 1.3rem;
+    }
+  }
+}
+
+.hidden {
+  display: none;
+}
diff --git a/styles/DFL/request.module.scss b/styles/DFL/request.module.scss
new file mode 100644
index 0000000..2c9b53a
--- /dev/null
+++ b/styles/DFL/request.module.scss
@@ -0,0 +1,250 @@
+.request_container {
+  display: flex;
+  gap: 30px;
+  align-content: center;
+  justify-content: center;
+  margin: 3%;
+
+  label {
+    color: #754d42;
+    font-weight: bold;
+  }
+
+  .left_container {
+    width: 25%;
+    padding: 35px 25px;
+    height: min-content;
+    border-radius: 8px;
+    box-shadow: 0px 10px 10px 0px rgba(71, 61, 62, 0.25);
+    border: 1px solid #754d42;
+
+    form {
+      label {
+        font-weight: 600;
+        font-size: 16px;
+        color: #754d42;
+      }
+
+      input,
+      select {
+        width: 100%;
+        padding: 12px 16px;
+        outline: none;
+        border-radius: 4px;
+        font-size: 16px;
+        line-height: 1.75;
+        color: #4e545f;
+        cursor: pointer;
+        border: 1px solid black;
+        margin-top: 8px;
+        margin-bottom: 20px;
+      }
+
+      select {
+        padding: 15px;
+      }
+
+      .search_button {
+        background-color: #754d42;
+        border-radius: 6px;
+        color: white;
+        font-weight: 500;
+        font-size: 18px;
+        width: 100%;
+        padding: 10px;
+        margin-top: 10px;
+        border: 1px solid transparent;
+
+        &:hover {
+          background-color: white;
+          border-color: #754d42;
+          color: #754d42;
+        }
+      }
+    }
+  }
+
+  .right_container {
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+
+    .card_container {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 10px;
+
+      .card {
+        border-radius: 22px;
+        width: 250px;
+        padding: 10px;
+        background-color: #fff;
+        color: #917072;
+        height: min-content;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+
+        .inner {
+          padding: 20px;
+          padding-top: 10px;
+          background-color: #ffedec;
+          border-radius: 12px;
+          position: relative;
+          overflow: hidden;
+
+          span {
+            position: absolute;
+            top: 0;
+            right: 0;
+            background-color: #fbc8be;
+            border-radius: 0 0 0 5px;
+            display: flex;
+            align-items: center;
+            padding: 10px 12px;
+            font-size: 20px;
+            font-weight: 600;
+            color: #754d42;
+          }
+
+          h2 {
+            font-weight: 600;
+            font-size: 20px;
+            color: #754d42;
+            margin-top: 12px;
+          }
+
+          p {
+            margin-top: 16px;
+          }
+
+          ul {
+            display: flex;
+            flex-direction: column;
+
+            li {
+              display: flex;
+              align-items: center;
+              gap: 8px;
+              margin-top: 12px;
+            }
+          }
+
+          button {
+            background-color: #fbc8be;
+            border-radius: 6px;
+            color: #754d42;
+            font-weight: 500;
+            font-size: 18px;
+            width: 100%;
+            padding: 10px;
+            margin-top: 10px;
+            font-weight: bold;
+            border: 1px solid transparent;
+
+            &:hover {
+              background-color: white;
+              border-color: #754d42;
+            }
+          }
+        }
+      }
+    }
+
+    .pagination_container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 3% 2%;
+
+      button {
+        border-radius: 6px;
+        font-weight: bold;
+        font-size: 25px;
+        width: 100px;
+        padding: 8px 0;
+        margin-top: 10px;
+        border: 1px solid transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 5px;
+        border-color: #000;
+
+        &:hover {
+          // background-color: #754d42;
+          color: #000;
+        }
+
+        &.prev:hover::after {
+          font-size: 18px;
+          content: "Prev";
+          color: #000; /* Change color if needed */
+        }
+        &.next:hover::before {
+          flex-direction: row-reverse;
+          font-size: 18px;
+          content: "Next";
+          color: #000;
+        }
+      }
+    }
+  }
+}
+
+.contect__model {
+  background-color: white;
+  padding: 30px;
+  margin: -35px 0;
+  // width: 400px;
+  form {
+    div {
+      display: flex;
+      margin-top: 15px;
+    }
+    label {
+      font-weight: 600;
+      font-size: 16px;
+      color: #754d42;
+      width: 110px;
+    }
+
+    input,
+    select,
+    textarea {
+      width: 100%;
+      padding: 12px 16px;
+      outline: none;
+      border-radius: 4px;
+      font-size: 16px;
+      line-height: 1.75;
+      color: #4e545f;
+      cursor: pointer;
+      border: 1px solid black;
+    }
+
+    select {
+      padding: 15px;
+    }
+
+    textarea {
+      resize: none;
+    }
+
+    .search_button {
+      background-color: #754d42;
+      border-radius: 6px;
+      color: white;
+      font-weight: 500;
+      font-size: 18px;
+      width: 100%;
+      padding: 10px;
+      margin-top: 30px;
+      border: 1px solid transparent;
+
+      &:hover {
+        background-color: white;
+        border-color: #754d42;
+        color: #754d42;
+      }
+    }
+  }
+}
diff --git a/styles/globals.css b/styles/globals.css
index 987d783..559e5d9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -15,7 +15,7 @@ body {
   font-family: "Manrope", sans-serif;
 }
 
-/* //header */
+/* header */
 .sticky_header {
   width: 100%;
   height: 80px;
@@ -28,6 +28,17 @@ body {
   box-shadow: 3px 3px -8px 3px #ddd
 }
 
+.sticky-header-dol {
+  width: 100%;
+  height: 80px;
+  line-height: 80px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  box-shadow: 3px 3px -8px 3px #ddd
+}
+
 .swiper-pagination-bullet {
   width: 12px !important;
   height: 12px !important;
@@ -63,7 +74,7 @@ body {
   top: 90% !important;
 }
 
-.form__lable {
+.form__label {
   @apply text-textColor font-semibold text-[16px] mb-2;
 }
 
@@ -71,6 +82,34 @@ body {
   @apply w-full px-4 py-3 border border-solid border-[#006ff61] focus:outline-none focus:border-primaryColor text-[16px] leading-7 text-headingColor placeholder:text-textColor cursor-pointer rounded-md;
 }
 
+/* model css */
+.modal::backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  background: rgba(20, 22, 27, 0.8);
+}
+
+.modal {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 350px;
+
+  padding: 0;
+  z-index: 9999999;
+  /* background: #ddf2fc; */
+  background: linear-gradient(to left, #b9e9ff 20%, #ddf2fc 80%, #e9f3ff);
+  border-radius: 8px;
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); */
+  animation: slide-down-fade-in 0.3s ease-out forwards;
+}
+
+
+
 @media only screen and (max-width:768px) {
   .navigation {
     width: 100%;
@@ -78,9 +117,10 @@ body {
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 100px;
+    z-index: 100;
     background: #00000084;
     display: none;
+
   }
 
   .menu {
@@ -119,6 +159,10 @@ body {
     @apply bg-primaryColor py-[15px] px-[35px] rounded-[50px] text-white font-[600] mt-[38px];
   }
 
+  .btn-hover {
+    @apply border border-solid hover:border-[3px] hover:border-primaryColor hover:bg-blue-100 hover:font-bold hover:text-[16px] hover:text-primaryColor
+  }
+
   .heading {
     @apply text-[44px] leading-[54px] font-[700] text-headingColor;
   }
@@ -131,6 +175,10 @@ body {
     @apply bg-[url('../public/assets/images/mask.png')] bg-no-repeat bg-center bg-cover w-full h-[100px] leading-[100px];
   }
 
+  .dol-header {
+    @apply bg-gradient-to-r from-pink-100 via-red-400 to-red-500 w-full h-[100px] leading-[100px];
+  }
+
   .hero__section {
     @apply bg-[url('../public/assets/images/hero-bg.png')] bg-no-repeat bg-center bg-cover;
   }
diff --git a/utils/formValidation.js b/utils/formValidation.js
new file mode 100644
index 0000000..0aa6939
--- /dev/null
+++ b/utils/formValidation.js
@@ -0,0 +1,367 @@
+import {
+  vaildatePassword,
+  validateAbout,
+  validateAddress,
+  validateBio,
+  validateDOB,
+  validateDate,
+  validateEmail,
+  validateEndDate,
+  validateExperiences,
+  validatePhone,
+  validateQualifications,
+  validateRequired,
+  validateTimeSlots,
+} from "./inputValidation";
+
+// Doctor Form validation function
+export const doctorValidateForm = (formData) => {
+  const newErrors = {};
+  const {
+    name,
+    email,
+    about,
+    fees,
+    phone,
+    bio,
+    gender,
+    address,
+    timeSlots_data,
+    experiences,
+    qualifications,
+    specialization,
+  } = formData;
+
+  if (!validateRequired(name)) {
+    newErrors.name = "Name is required";
+  }
+
+  if (!validateRequired(email)) {
+    newErrors.email = "Email is required";
+  } else if (!validateEmail(email)) {
+    newErrors.email = "Invalid email format";
+  }
+
+  if (!validatePhone(phone)) {
+    newErrors.phone = "Invalid phone number";
+  }
+  if (fees === "") {
+    newErrors.fees = "Fees is required";
+  } else if (fees === "0") {
+    newErrors.fees = "Fess should be greater than Zero";
+  }
+
+  if (!validateRequired(bio)) {
+    newErrors.bio = "Bio is required";
+  } else if (!validateBio(bio)) {
+    newErrors.bio = "Bio should be less than 100 characters";
+  }
+
+  if (!validateRequired(address)) {
+    newErrors.address = "Address is required";
+  } else if (!validateAddress(address)) {
+    newErrors.address = "Address should be less than 100 characters";
+  }
+
+  if (!validateRequired(specialization)) {
+    newErrors.specialization = "specialization is required";
+  }
+
+  if (!validateRequired(gender)) {
+    newErrors.gender = "Gender is required";
+  }
+
+  if (!validateQualifications(qualifications)) {
+    newErrors.qualifications = "All qualification fields are required";
+  }
+
+  if (!validateExperiences(experiences)) {
+    newErrors.experiences = "All experience fields are required";
+  }
+
+  if (!validateTimeSlots(timeSlots_data)) {
+    newErrors.timeSlots_data = "All time slot fields are required";
+  }
+
+  if (!validateRequired(about)) {
+    newErrors.about = "About is required";
+  } else if (!validateAbout(about)) {
+    newErrors.about = "About is required";
+  }
+
+  return newErrors;
+};
+
+// Doctor Profile page handelInput form validation
+export const handleInputValidation = (formData, index, key) => {
+  const error = {};
+  const {
+    degree,
+    university,
+    place,
+    position,
+    startingDate,
+    endingDate,
+    slot,
+    appointments_time,
+    startingTime,
+    endingTime,
+  } = formData;
+
+  if (key !== "timeSlots_data") {
+    if (!validateRequired(startingDate)) {
+      error.startingDate = { message: "Starting date is required", index, key };
+    } else if (!validateDate(startingDate)) {
+      error.startingDate = { message: "Starting date is invalid", index, key };
+    }
+
+    if (!validateRequired(endingDate)) {
+      error.endingDate = { message: "Ending date is required", index, key };
+    } else if (!validateDate(endingDate)) {
+      error.endingDate = { message: "Ending date is invalid", index, key };
+    } else if (!validateEndDate(endingDate)) {
+      error.endingDate = {
+        message: "Ending date is greater than Current date",
+        index,
+        key,
+      };
+    }
+  }
+
+  if (key === "qualifications") {
+    if (!validateRequired(degree)) {
+      error.degree = { message: "Degree is required", index };
+    }
+    if (!validateRequired(university)) {
+      error.university = { message: "University is required", index };
+    }
+  } else if (key === "experiences") {
+    if (!validateRequired(place)) {
+      error.place = { message: "place is required", index };
+    }
+
+    if (!validateRequired(position)) {
+      error.position = { message: "Position  is required", index };
+    }
+  }
+  if (key === "timeSlots_data") {
+    if (!validateRequired(slot)) {
+      error.slot = { message: "slot is required", index };
+    }
+
+    if (isNaN(appointments_time)) {
+      error.appointments_time = {
+        message: "appointment time is required",
+        index,
+      };
+    } else if (appointments_time < 5 || appointments_time > 60) {
+      error.appointments_time = { message: "5 <= time <=60", index };
+    }
+
+    if (!validateRequired(startingTime)) {
+      error.startingTime = {
+        message: "Start Time is required",
+        index,
+        key,
+      };
+    }
+
+    if (!validateRequired(endingTime)) {
+      error.endingTime = {
+        message: "End Time is required",
+        index,
+        key,
+      };
+    }
+  }
+  return error;
+};
+
+// Signup form validation
+export const signupFormvalidation = (formData) => {
+  const { email, name, password, passwordConfirm, gender } = formData;
+
+  let errors = {};
+
+  // Name validation
+  if (!validateRequired(name)) {
+    errors.name = "Name is required";
+  }
+
+  // Email validation
+  if (!validateRequired(email)) {
+    errors.email = "Email is required";
+  } else if (!validateEmail(email)) {
+    errors.email = "Email is invalid";
+  }
+
+  // Password filed validation
+  if (!validateRequired(password)) {
+    errors.password = "Password is required";
+  } else if (password.length < 4) {
+    errors.password = "Password must be at least 6 characters long";
+  } else if (!vaildatePassword(password)) {
+    errors.password =
+      "Password must have at least one uppercase letter, one lowercase letter, one special character";
+  }
+
+  // password  validation
+  if (password !== passwordConfirm) {
+    errors.passwordConfirm = "Passwords do not match";
+  }
+
+  // Gender filed validation
+  if (gender) {
+    errors.gender = "Gender is required";
+  }
+
+  return errors;
+};
+
+// Login form validation
+export const loginFormvalidation = (formData) => {
+  const { email, password } = formData;
+
+  let errors = {};
+
+  // Email validation
+  if (!validateRequired(email)) {
+    errors.email = "Email is required";
+  } else if (!validateEmail(email)) {
+    errors.email = "Email is invalid";
+  }
+
+  // Password filed validation
+  if (!validateRequired(password)) {
+    errors.password = "Password is required";
+  } else if (password.length < 4) {
+    errors.password = "Password must be at least 6 characters long";
+  } else if (!vaildatePassword(password)) {
+    errors.password =
+      "Password must have at least one uppercase letter, one lowercase letter, one special character";
+  }
+
+  return errors;
+};
+
+// Patient form validation
+export const patientFormValidation = (formData) => {
+  const { email, name, gender, bloodType } = formData;
+  const newErrors = {};
+
+  if (!validateRequired(name)) {
+    newErrors.name = "Name is required";
+  }
+
+  if (!validateRequired(email)) {
+    newErrors.email = "Email is required";
+  } else if (!validateEmail(email)) {
+    newErrors.email = "Invalid email format";
+  }
+
+  if (!validateRequired(gender)) {
+    newErrors.gender = "Gender is required";
+  }
+
+  if (!validateRequired(bloodType)) {
+    newErrors.bloodType = "Blood Type is required";
+  }
+
+  return newErrors;
+};
+
+// Donor form validation
+export const donorFormValidation = (formData) => {
+  const {
+    email,
+    name,
+    gender,
+    bloodType,
+    phone,
+    address,
+    city,
+    addharCard,
+    dob,
+    lastDonationDate,
+    weight,
+  } = formData;
+  const newErrors = {};
+
+  if (!validateRequired(name)) {
+    newErrors.name = "Name is required";
+  }
+
+  if (!validateRequired(email)) {
+    newErrors.email = "Email is required";
+  } else if (!validateEmail(email)) {
+    newErrors.email = "Invalid email format";
+  }
+
+  if (!validateRequired(gender)) {
+    newErrors.gender = "Gender is required";
+  }
+
+  if (!validateRequired(bloodType)) {
+    newErrors.bloodType = "Blood Type is required";
+  }
+
+  if (!validateRequired(city)) {
+    newErrors.city = "City is required";
+  }
+
+  if (!validateRequired(address)) {
+    newErrors.address = "Address is required";
+  } else if (!validateAddress(address)) {
+    newErrors.address = "Address should be less than 100 characters";
+  }
+
+  if (!validatePhone(phone)) {
+    newErrors.phone = "Invalid phone number";
+  }
+
+  if (!validateRequired(addharCard)) {
+    newErrors.addharCard = "Addhar card number isrequierd";
+  } else if (addharCard.trim().length !== 12) {
+    newErrors.addharCard = "Addhar card nummber length must be 12";
+  }
+
+  if (!validateRequired(dob)) {
+    newErrors.dob = "Birth date is requierd";
+  } else if (!validateDOB(dob)) {
+    newErrors.dob = "Age limit is between 18 to 65 ";
+  }
+
+  if (!validateEndDate(lastDonationDate)) {
+    newErrors.lastDonationDate = "Please enter correct Date";
+  }
+
+  if (!validateRequired(weight)) {
+    newErrors.weight = "Weight is required!";
+  } else if (parseInt(weight) < 45) {
+    newErrors.weight = "Minimum 45Kg weight required";
+  }
+
+  return newErrors;
+};
+
+// Request message form validation
+export const requestFormValidation = (fromData) => {
+  const { name, phone, address } = fromData;
+  const newErrors = {};
+
+  if (!validateRequired(name)) {
+    newErrors.name = "Name is required";
+  }
+
+  if (!validatePhone(phone)) {
+    newErrors.phone = "Invalid phone number";
+  }
+
+  if (!validateRequired(address)) {
+    newErrors.address = "Address is required";
+  } else if (!validateAddress(address)) {
+    newErrors.address = "Address should be less than 100 characters";
+  }
+
+  return newErrors;
+};
diff --git a/utils/heplerFunction.js b/utils/heplerFunction.js
index 6c6bf38..2a4365a 100644
--- a/utils/heplerFunction.js
+++ b/utils/heplerFunction.js
@@ -1,5 +1,13 @@
 import jwt from "jsonwebtoken";
 
+/**
+ * Format a given date based on the provided configuration.
+ *
+ * @param {Date} date - The date object to format.
+ * @param {Object} [config] - Configuration options for formatting.
+ * @param {string} [config.format] - The format to use for formatting the date.
+ * @returns {string} The formatted date string.
+ */
 export const formateDate = (date, config) => {
   const defaultOption = { day: "numeric", month: "short", year: "numeric" };
   const option = config ? config : defaultOption;
@@ -7,8 +15,236 @@ export const formateDate = (date, config) => {
   return new Date(date).toLocaleDateString("en-US", option);
 };
 
+/**
+ * Convert a time from 24-hour format to 12-hour format.
+ *
+ * @param {string} time - The time string to convert (in HH:MM format).
+ * @returns {string} The time string in 12-hour format.
+ */
+export const convertTime = (time) => {
+  //timeParts will return an array
+  const timeParts = time.split(":");
+
+  let hours = parseInt(timeParts[0]);
+  let min = parseInt(timeParts[1]);
+
+  let meridiem = "am";
+
+  // Converting to 12-hour format and setting the meridiem (am/pm)
+  if (hours >= 12) {
+    meridiem = "pm";
+
+    if (hours > 12) {
+      hours -= 12;
+    }
+  }
+
+  // Returning the time in 12-hour format
+  return (
+    hours.toString().padStart(2) +
+    ":" +
+    min.toString().padStart(2, "0") +
+    " " +
+    meridiem
+  );
+};
+
+/**
+ * Decode a JWT token and retrieve the payload.
+ *
+ * @param {string} token - The JWT token to decode.
+ * @returns {object|null} The decoded payload, or null if decoding fails.
+ */
 export const decodeToken = (token) => {
   const data = jwt.decode(token);
 
   return data;
 };
+
+/**
+ * Create time slots based on the provided configuration.
+ *
+ * @param {Object[]} slots - The array of slot configurations.
+ * @param {string} slots[].slot - The slot name (e.g., 'morning', 'afternoon', 'evening').
+ * @param {string} slots[].startingTime - The starting time of the slot (in HH:MM format).
+ * @param {string} slots[].endingTime - The ending time of the slot (in HH:MM format).
+ * @param {number} slots[].appointments_time - The time interval between appointments (in minutes).
+ * @returns {Object[]} The array of generated time slots.
+ */
+export const createTimeSlot = (slots) => {
+  let timeSlots = [];
+
+  slots.forEach((item) => {
+    const { slot, startingTime, endingTime, appointments_time } = item;
+    const startMinutes = timeToMinutes(startingTime);
+    const endMinutes = timeToMinutes(endingTime);
+
+    validateTimeslot(slot, startMinutes, endMinutes);
+
+    const generaterSLots = timeslotGenerator(
+      startMinutes,
+      endMinutes,
+      appointments_time
+    );
+
+    timeSlots.push({ [slot]: generaterSLots });
+  });
+
+  return timeSlots;
+};
+
+/**
+ * Generate time slots between the given start and end times.
+ *
+ * @param {number} start - The start time (in minutes).
+ * @param {number} end - The end time (in minutes).
+ * @param {number} time - The time interval between slots (in minutes).
+ * @returns {string[]} The array of generated time slots.
+ */
+export const timeslotGenerator = (start, end, time) => {
+  let timeslots = [];
+  let currentMinute = start;
+
+  while (currentMinute < end) {
+    timeslots.push(minutesToTime(currentMinute));
+    currentMinute += time;
+  }
+
+  return timeslots;
+};
+
+/**
+ * Convert time from HH:MM format to minutes.
+ *
+ * @param {string} time - The time string to convert (in HH:MM format).
+ * @returns {number} The time in minutes.
+ */
+const timeToMinutes = (time) => {
+  const [hours, minutes] = time.split(":").map(Number);
+  return hours * 60 + minutes;
+};
+
+/**
+ * Convert minutes to HH:MM format.
+ *
+ * @param {number} minutes - The time in minutes.
+ * @returns {string} The time string in HH:MM format.
+ */
+const minutesToTime = (minutes) => {
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+};
+
+/**
+ * Validate if the given time slot falls within valid time ranges.
+ *
+ * @param {string} slot - The slot name.
+ * @param {number} startMinutes - The starting time of the slot (in minutes).
+ * @param {number} endMinutes - The ending time of the slot (in minutes).
+ * @throws {Error} If the time slot is not valid.
+ */
+const validateTimeslot = (slot, startMinutes, endMinutes) => {
+  const timeSlots = {
+    morning: { start: "06:00", end: "12:00" },
+    afternoon: { start: "12:00", end: "17:00" },
+    evening: { start: "17:00", end: "21:00" },
+  };
+
+  const { start, end } = timeSlots[slot];
+  const startTime = timeToMinutes(start);
+  const endTime = timeToMinutes(end);
+
+  if (startMinutes < startTime || endMinutes > endTime) {
+    throw new Error("not valid");
+  }
+};
+
+/**
+ * Compare two time slots for equality.
+ *
+ * @param {Object} slot1 - The first time slot.
+ * @param {string} slot1.slot - The slot name.
+ * @param {string} slot1.startingTime - The starting time of the slot.
+ * @param {string} slot1.endingTime - The ending time of the slot.
+ * @param {number} slot1.appointments_time - The time interval between appointments.
+ * @param {Object} slot2 - The second time slot to compare.
+ * @returns {boolean} True if the time slots are equal, otherwise false.
+ */
+function compareTimeSlots(slot1, slot2) {
+  return (
+    slot1.slot === slot2.slot &&
+    slot1.appointments_time === slot2.appointments_time &&
+    slot1.startingTime === slot2.startingTime &&
+    slot1.endingTime === slot2.endingTime
+  );
+}
+
+/**
+ * Find updated time slots from new and existing data.
+ *
+ * @param {Object[]} newData - The array of new time slots.
+ * @param {Object[]} existingData - The array of existing time slots.
+ * @returns {Object[]} The array of updated time slots.
+ */
+export function findUpdatedTimeSlots(newData, existingData) {
+  const updatedSlots = [];
+
+  newData.forEach((newSlot) => {
+    const existingSlot = existingData.find((slot) =>
+      compareTimeSlots(newSlot, slot)
+    );
+    if (!existingSlot) {
+      updatedSlots.push(newSlot);
+    }
+  });
+
+  return updatedSlots;
+}
+
+/**
+ * Capitalize the first letter of a string.
+ *
+ * @param {string} str - The input string.
+ * @returns {string} The input string with the first letter capitalized.
+ */
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);
+
+/**
+ * Convert a date in ISOString format to a string in yyyy-mm-dd format.
+ *
+ * @param {string} newDateStr - The date in ISOString format.
+ * @returns {string} The date string in yyyy-mm-dd format.
+ */
+export const dateToString = (newDateStr) => {
+  const date = new Date(newDateStr);
+
+  date.setUTCHours(date.getUTCHours() + 5); // Add 5 hours for IST
+  date.setUTCMinutes(date.getUTCMinutes() + 30); // Add 30 minutes for IST
+
+  // Convert the date object to an ISO string
+  const ISTDateString = date.toISOString().split("T")[0];
+
+  return ISTDateString;
+};
+
+/**
+ * Convert time slots to exclude bookings for a specific date.
+ *
+ * @param {Object[]} timeslots - The array of time slots.
+ * @param {string} date - The date to exclude bookings for.
+ * @returns {Object[]} The updated time slots with excluded bookings for the specified date.
+ */
+export const timeslotByDate = (timeslots, date) => {
+  const newTimeslots = timeslots.map((slot) =>
+    Object.keys(slot).reduce((newSlot, period) => {
+      // Filter out slots that don't include the specified date
+      const filteredData = slot[period].filter(({ bookingDate }) => {
+        return !bookingDate.includes(date);
+      });
+      newSlot[period] = filteredData;
+      return newSlot;
+    }, {})
+  );
+  return newTimeslots;
+};
diff --git a/utils/inputValidation.js b/utils/inputValidation.js
new file mode 100644
index 0000000..522af40
--- /dev/null
+++ b/utils/inputValidation.js
@@ -0,0 +1,111 @@
+// Validation function for required fields
+export const validateRequired = (value) => {
+  return value?.trim() !== "";
+};
+
+// Validation function for email format
+export const validateEmail = (email) => {
+  const re = /\S+@\S+\.\S+/;
+  return re.test(email);
+};
+
+// Validation function for password format
+export const vaildatePassword = (password) => {
+  const re =
+    /(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+])[A-Za-z\d!@#$%^&*()_+]{4,}/;
+
+  return re.test(password);
+};
+
+// Validation function for phone number
+export const validatePhone = (phone) => {
+  const re = /^[0-9]{10}$/; // Assumes a 10-digit phone number
+  return re.test(phone);
+};
+
+// Validation function for bio length
+export const validateBio = (bio) => {
+  return bio.trim().length <= 100;
+};
+
+// Validation function for address length
+export const validateAddress = (address) => {
+  return address.trim().length <= 100;
+};
+
+// Validation function for about length
+export const validateAbout = (about) => {
+  return about.trim().length <= 1000;
+};
+
+// Validation function for date
+export const validateDate = (dateString) => {
+  // Try to create a new Date object from the given dateString
+  const date = new Date(dateString);
+
+  // Check if the created Date object is invalid or if the provided dateString doesn't match the created Date object
+  return (
+    !isNaN(date.getTime()) && dateString === date.toISOString().slice(0, 10)
+  );
+};
+
+// Validation function for end date
+export const validateEndDate = (endDate) => {
+  const date = new Date(endDate);
+  const currentDate = new Date();
+
+  if (date > currentDate) {
+    return false;
+  }
+
+  return true;
+};
+
+// Validation function for qualifications
+export const validateQualifications = (qualifications) => {
+  return qualifications.every((item) => {
+    return (
+      item.startingDate.trim() !== "" &&
+      item.endingDate.trim() !== "" &&
+      item.degree.trim() !== "" &&
+      item.university.trim() !== ""
+    );
+  });
+};
+
+// Validation function for experiences
+export const validateExperiences = (experiences) => {
+  return experiences.every((item) => {
+    return (
+      item.startingDate.trim() !== "" &&
+      item.endingDate.trim() !== "" &&
+      item.position.trim() !== "" &&
+      item.place.trim() !== ""
+    );
+  });
+};
+
+// Validation function for time slots
+export const validateTimeSlots = (timeSlots) => {
+  return timeSlots.every((item) => {
+    return (
+      item.slot.trim() !== "" &&
+      item.appointments_time !== 0 &&
+      item.startingTime.trim() !== "" &&
+      item.endingTime.trim() !== ""
+    );
+  });
+};
+
+// Validation function for birthDate
+export const validateDOB = (dob) => {
+  const dateOfBirth = new Date(dob);
+  const currentDate = new Date();
+
+  const differenceMs = currentDate - dateOfBirth;
+
+  // Convert the difference to years
+  const differenceYears = differenceMs / (1000 * 60 * 60 * 24 * 365);
+
+  return differenceYears >= 18 && differenceYears <= 65;
+};
diff --git a/utils/uploadCloudinary.js b/utils/uploadCloudinary.js
index a6d5d64..4b1a841 100644
--- a/utils/uploadCloudinary.js
+++ b/utils/uploadCloudinary.js
@@ -1,23 +1,30 @@
+import axios from "axios";
+import toast from "react-hot-toast";
+
 export const uploadImageToCloudinary = async (file) => {
   const upload_preset = process.env.NEXT_PUBLIC_UPLOAD_PRESET;
   const cloud_name = process.env.NEXT_PUBLIC_CLOUD_NAME;
+  try {
+    const uploadData = new FormData();
+    uploadData.append("file", file);
+    uploadData.append("upload_preset", upload_preset);
+    uploadData.append("cloud_name", cloud_name);
 
-  const uploadData = new FormData();
-  uploadData.append("file", file);
-  uploadData.append("upload_preset", upload_preset);
-  uploadData.append("cloud_name", cloud_name);
-
-  const res = await fetch(
-    `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`,
-    {
-      method: "post",
-      body: uploadData,
-    }
-  );
+    const loadingToastId = toast.loading("Uploading photo...", {
+      duration: 0,
+    });
 
-  const data = await res.json();
+    const { data } = await axios.post(
+      `https://api.cloudinary.com/v1_1/${cloud_name}/image/upload`,
+      uploadData
+    );
 
-  console.log(res);
+    toast.dismiss(loadingToastId);
 
-  return data;
+    toast.success("Photo uploaded successfully");
+    return data;
+  } catch {
+    toast.error("Error uploading photo");
+    return null;
+  }
 };