diff --git a/src/_nav.js b/src/_nav.js
index 2e8ec6a..b0c36b0 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -24,6 +24,7 @@ import {
   cilUser,
   cilAlarm,
   cilFeaturedPlaylist,
+  cilLocationPin,
 } from "@coreui/icons";
 import { CNavGroup, CNavItem, CNavTitle, CTabContent } from "@coreui/react";
 
@@ -40,12 +41,7 @@ const _nav = [
     icon: <CIcon icon={cilTennisBall} customClassName="nav-icon" />,
     to: "/customers-details",
   },
-  // {
-  //   component: CNavItem,
-  //   name: "Design",
-  //   icon: <CIcon icon={cibMaterialDesign} customClassName="nav-icon" />,
-  //   to: "/design",
-  // },
+
   {
     component: CNavGroup,
     name: "Charts",
@@ -297,6 +293,12 @@ const _nav = [
         icon: <CIcon icon={cilUser} customClassName="nav-icon" />,
         to: "/contact/request",
       },
+      // {
+      //   component: CNavItem,
+      //   name: "Email CMS",
+      //   icon: <CIcon icon={cilLocationPin} customClassName="nav-icon" />,
+      //   to: "/email-cms",
+      // },
     ],
   },
   //Blog start
@@ -306,6 +308,13 @@ const _nav = [
     icon: <CIcon icon={cilNotes} customClassName="nav-icon" />,
     to: "/blogs",
   },
+  // Employee
+  {
+    component: CNavItem,
+    name: "Employee",
+    icon: <CIcon icon={cilImage} customClassName="nav-icon" />,
+    to: "/employee",
+  },
 
   // {
   //   component: CNavGroup,
diff --git a/src/routes.js b/src/routes.js
index c30e161..11c89e1 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -137,6 +137,10 @@ import { element } from "prop-types";
 import OrderdayChart from "./views/Charts/OrderDaywise";
 import RevenueCharts from "./views/Charts/RevenueCharts";
 import AddCustomer from "./views/customerDetails/addCustomer";
+import EmailCms from "./views/CustomerSupport/EmailCMS/EmailCms";
+import RegistrationEmail from "./views/CustomerSupport/EmailCMS/RegistrationEmail";
+import Employee from "./views/EmployeeAccess/Employee";
+import AddEmployee from "./views/EmployeeAccess/addEmployee";
 const routes = [
   { path: "/", exact: true, name: "Home" },
   {
@@ -275,6 +279,16 @@ const routes = [
     element: AddContactRequest,
   },
   //Support Requests
+  // {
+  //   path: "/email-cms",
+  //   name: "CustomerSupport Requests",
+  //   element: EmailCms,
+  // },
+  // {
+  //   path: "/email-cms/registration-email",
+  //   name: "CustomerSupport Requests",
+  //   element: RegistrationEmail,
+  // },
 
   {
     path: "/support/request",
@@ -334,17 +348,17 @@ const routes = [
     path: "/home",
     name: "Home",
     element: Home,
-  }, 
+  },
   {
     path: "/home/panel-1",
     name: "EditPanel1",
     element: EditPanel1,
-  }, 
+  },
   {
     path: "/home/panel-2",
     name: "EditPanel2",
     element: EditPanel2,
-  }, 
+  },
   {
     path: "/home/panel-3",
     name: "EditPanel3",
@@ -354,12 +368,7 @@ const routes = [
     path: "/home/panel-4",
     name: "EditPanel4",
     element: Editpanel4,
-  },  
-  
-
-
-
-
+  },
 
   // { path: '/complaint/view/:id', name: 'view Complain', element: ViewComplaint },
   //Complaints
@@ -568,6 +577,17 @@ const routes = [
     name: "Blogs",
     element: ViewBlog,
   },
+  // Employee
+  {
+    path: "/employee",
+    name: "Employee",
+    element: Employee,
+  },
+  {
+    path: "/add-employee",
+    name: "Employee",
+    element: AddEmployee,
+  },
   //Charts
   {
     path: "/new-user-day-wise",
diff --git a/src/views/CustomerSupport/EmailCMS/EmailCms.js b/src/views/CustomerSupport/EmailCMS/EmailCms.js
new file mode 100644
index 0000000..dfb2489
--- /dev/null
+++ b/src/views/CustomerSupport/EmailCMS/EmailCms.js
@@ -0,0 +1,111 @@
+import {
+  Button,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import React from "react";
+import { Link } from "react-router-dom";
+
+export default function EmailCms() {
+  const pages = [
+    {
+      name: "New user registration",
+      action: "Edit",
+      path: "/email-cms/registration-email",
+    },
+    {
+      name: "Forgot Password",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "Change Password Notification ",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "New Order",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "Order - Processing",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "Order - Dispatched",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "Order - Delivered",
+      action: "Edit",
+      path: "#",
+    },
+    {
+      name: "Order - Cancelled",
+      action: "Edit",
+      path: "#",
+    },
+  ];
+
+  return (
+    <div className="main-content">
+      <Typography variant="h6" fontWeight={"bold"}>
+        Email CMS
+      </Typography>
+      <TableContainer component={Paper}>
+        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell style={{ fontWeight: "bold" }}>Page</TableCell>
+              <TableCell style={{ fontWeight: "bold" }} align="right">
+                Action
+              </TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {pages.map((row) => (
+              <TableRow
+                key={row.name}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                <TableCell component="th" scope="row">
+                  {row.name}
+                </TableCell>
+                <TableCell align="right">
+                  {" "}
+                  <Link to={row.path}>
+                    <button
+                      style={{
+                        color: "white",
+                        marginRight: "1rem",
+                      }}
+                      type="button"
+                      className="
+                                        btn btn-info btn-sm
+                                      waves-effect waves-light
+                                      btn-table
+                                      mt-1
+                                      mx-1
+                                    "
+                    >
+                      {row.action}
+                    </button>
+                  </Link>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+}
diff --git a/src/views/CustomerSupport/EmailCMS/RegistrationEmail.js b/src/views/CustomerSupport/EmailCMS/RegistrationEmail.js
new file mode 100644
index 0000000..2f274f3
--- /dev/null
+++ b/src/views/CustomerSupport/EmailCMS/RegistrationEmail.js
@@ -0,0 +1,207 @@
+import { Typography } from "@material-ui/core";
+import { Box, Button } from "@mui/material";
+
+import React, { useEffect, useState } from "react";
+import ReactrichTextEditor from "../../Content/reactrichTextEditor";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+import { useNavigate, useNavigation } from "react-router-dom";
+
+// const TOOLBAR_OPTIONS = [
+//   [{ header: [1, 2, 3, 4, 5, 6, false] }],
+//   [{ font: [] }],
+//   [{ list: "ordered" }, { list: "bullet" }],
+//   ["bold", "italic", "underline", "strike"],
+//   [{ color: [] }, { background: [] }],
+//   [{ align: [] }],
+//   [{ script: "super" }, { script: "sub" }],
+//   ["undo", "redo"],
+// ];
+
+export default function RegistrationEmail() {
+  const [title, setTitle] = useState("Registration Email");
+  const [welcomemsg, setWelcomeMsg] = useState("");
+  const [welcomemsgforDescription, setWelcomeMsgForDescription] = useState("");
+
+  const [subject, setSubject] = useState("");
+  const [description, setDescription] = useState("");
+  const [content, setContent] = useState("");
+  const [added, setAdded] = useState(false);
+  const [olderContent, setOlderContent] = useState("");
+  const [id, setId] = useState(null);
+
+  const token = isAutheticated();
+
+  const getTermsAndConditions = async () => {
+    const response = await axios.get("/api/get-email-data", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    if (response.status === 200) {
+      if (response.data?.registerEmaildata.length === 0) {
+        return;
+      }
+      // console.log(response);
+      //   setContent(response?.data?.registerEmaildata[0]?.termsAndContionContent);
+      //   setOlderContent(
+      //     response?.data?.registerEmaildata[0]?.termsAndContionContent
+      //   );
+      setSubject(response?.data?.registerEmaildata[0]?.subject);
+      setDescription(response?.data?.registerEmaildata[0]?.description);
+      setId(response?.data?.registerEmaildata[0]?._id);
+    }
+  };
+
+  const addTermsandConditions = async () => {
+    const response = await axios.post(
+      "/api/register-email",
+      { subject: subject, description: description },
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    if (response.status == 200) {
+      swal({
+        title: "Congratulations!!",
+        text: response?.data?.message,
+        icon: "success",
+        button: "OK",
+      });
+    }
+  };
+  const handleCancelClick = () => {
+    setAdded(!added);
+  };
+
+  const handleSaveClick = async () => {
+    // if (id === null) {
+    await addTermsandConditions();
+    setAdded(true);
+    // } else {
+    //   await updateContent();
+    //   setAdded(false);
+    // }
+
+    // Reload terms and conditions
+    // await getTermsAndConditions();
+  };
+  useEffect(() => {
+    // addTermsandConditions();
+    getTermsAndConditions();
+  }, [added]);
+  return (
+    <div>
+      <div style={{ display: "flex" }}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleSaveClick}
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+            marginRight: "5px",
+          }}
+        >
+          Save
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={handleCancelClick}
+          style={{
+            fontWeight: "bold",
+            marginBottom: "1rem",
+            textTransform: "capitalize",
+            marginRight: "5px",
+          }}
+        >
+          Cancel
+        </Button>
+      </div>
+
+      <Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
+        {/* <TextField
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          variant="outlined"
+          size="small"
+          fullWidth
+        /> */}
+        <Typography
+          style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
+          variant="h6"
+        >
+          {" "}
+          Email Confiramtion:{" "}
+        </Typography>
+
+        <div className="mb-3">
+          <label htmlFor="welcomeMsg" className="form-label">
+            Welcome Message*
+          </label>
+
+          <input
+            type="text"
+            className="form-control"
+            style={{ width: "300px" }}
+            id="welcomeMsg"
+            placeholder="Eg: Welcome to "
+            value={welcomemsg}
+            onChange={(e) => setWelcomeMsg(e.target.value)}
+          />
+          <h6 style={{ fontWeight: "bold", marginTop: "1rem" }}>
+            App Name : Smellika
+          </h6>
+
+          <label htmlFor="title" className="form-label">
+            Subject*
+          </label>
+
+          <input
+            type="text"
+            className="form-control"
+            id="title"
+            value={subject}
+            onChange={(e) => setSubject(e.target.value)}
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="welcomeMsgforDes" className="form-label">
+            Welcome Message for Description*
+          </label>
+
+          <input
+            type="text"
+            className="form-control"
+            style={{ width: "300px" }}
+            id="welcomeMsgforDes"
+            placeholder="Eg: Welcome to "
+            value={welcomemsgforDescription}
+            onChange={(e) => setWelcomeMsgForDescription(e.target.value)}
+          />
+          <label htmlFor="title" className="form-label">
+            Description *
+          </label>
+          <textarea
+            type="text"
+            className="form-control"
+            id="description"
+            rows="10"
+            cols="100"
+            value={description}
+            placeholder="your message..."
+            onChange={(e) => setDescription(e.target.value)}
+          ></textarea>
+        </div>
+      </Box>
+    </div>
+  );
+}
diff --git a/src/views/EmployeeAccess/Employee.js b/src/views/EmployeeAccess/Employee.js
new file mode 100644
index 0000000..c1b20b4
--- /dev/null
+++ b/src/views/EmployeeAccess/Employee.js
@@ -0,0 +1,479 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import Button from "@material-ui/core/Button";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import { isAutheticated } from "src/auth";
+import swal from "sweetalert";
+import {
+  Box,
+  FormControl,
+  IconButton,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+} from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import Fuse from "fuse.js";
+import { Typography } from "@material-ui/core";
+// import OrderDetails from "./orderDetails";
+const Employee = () => {
+  const token = isAutheticated();
+  const [query, setQuery] = useState("");
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(true);
+  const [loading1, setLoading1] = useState(true);
+  const [success, setSuccess] = useState(true);
+  const [users, setUsers] = useState([]);
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [itemPerPage, setItemPerPage] = useState(10);
+  const [showData, setShowData] = useState(users);
+
+  const handleShowEntries = (e) => {
+    setCurrentPage(1);
+    setItemPerPage(e.target.value);
+  };
+
+  //   const getUsers = async () => {
+  //     axios
+  //       .get(`/api/v1/admin/users`, {
+  //         headers: {
+  //           Authorization: `Bearer ${token}`,
+  //         },
+  //       })
+  //       .then((res) => {
+  //         setUsers(res.data.users);
+  //         setLoading(false);
+  //       })
+  //       .catch((error) => {
+  //         swal({
+  //           title: error,
+  //           text: "please login to access the resource or refresh the page  ",
+  //           icon: "error",
+  //           button: "Retry",
+  //           dangerMode: true,
+  //         });
+  //         setLoading(false);
+  //       });
+  //   };
+
+  //   useEffect(() => {
+  //     getUsers();
+  //   }, [success]);
+  //   console.log(users);
+
+  //   useEffect(() => {
+  //     const loadData = () => {
+  //       const indexOfLastPost = currentPage * itemPerPage;
+  //       const indexOfFirstPost = indexOfLastPost - itemPerPage;
+  //       setShowData(users.slice(indexOfFirstPost, indexOfLastPost));
+  //     };
+  //     loadData();
+  //   }, [currentPage, itemPerPage, users]);
+  //   console.log(users);
+
+  // const handleDelete = (id) => {
+  //   swal({
+  //     title: "Are you sure?",
+  //     icon: "error",
+  //     buttons: {
+  //       Yes: { text: "Yes", value: true },
+  //       Cancel: { text: "Cancel", value: "cancel" },
+  //     },
+  //   }).then((value) => {
+  //     if (value === true) {
+  //       axios
+  //         .delete(`/api/user-address/deleteAddress/${id}`, {
+  //           headers: {
+  //             "Access-Control-Allow-Origin": "*",
+  //             Authorization: `Bearer ${token}`,
+  //           },
+  //         })
+  //         .then((res) => {
+  //           swal({
+  //             title: "Deleted",
+  //             text: "Address Deleted successfully!",
+  //             icon: "success",
+  //             button: "ok",
+  //           });
+  //           setSuccess((prev) => !prev);
+  //         })
+  //         .catch((err) => {
+  //           swal({
+  //             title: "Warning",
+  //             text: "Something went wrong!",
+  //             icon: "error",
+  //             button: "Retry",
+  //             dangerMode: true,
+  //           });
+  //         });
+  //     }
+  //   });
+  // };
+
+  return (
+    <div className="main-content">
+      <div className="page-content">
+        <div className="container-fluid">
+          <div className="row">
+            <div className="col-12">
+              <div
+                className="
+                    page-title-box
+                    d-flex
+                    align-items-center
+                    justify-content-between
+                  "
+              >
+                <div style={{ fontSize: "22px" }} className="fw-bold">
+                  All Employees
+                </div>
+
+                <div className="page-title-right">
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    style={{
+                      fontWeight: "bold",
+                      marginBottom: "1rem",
+                      textTransform: "capitalize",
+                    }}
+                    onClick={() => {
+                      navigate("/add-employee");
+                    }}
+                  >
+                    Add Employee
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="row">
+            <div className="col-lg-12">
+              <div className="card">
+                <div className="card-body">
+                  <div className="row ml-0 mr-0 mb-10 ">
+                    <div className="col-sm-12 col-md-12">
+                      <div className="dataTables_length">
+                        <label className="w-100">
+                          Show
+                          <select
+                            style={{ width: "10%" }}
+                            name=""
+                            onChange={(e) => handleShowEntries(e)}
+                            className="
+                                select-w
+                                custom-select custom-select-sm
+                                form-control form-control-sm
+                              "
+                          >
+                            <option value="10">10</option>
+                            <option value="25">25</option>
+                            <option value="50">50</option>
+                            <option value="100">100</option>
+                          </select>
+                          entries
+                        </label>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="table-responsive table-shoot mt-3">
+                    <table
+                      className="table table-centered table-nowrap"
+                      style={{ border: "1px solid" }}
+                    >
+                      <thead
+                        className="thead-info"
+                        style={{ background: "rgb(140, 213, 213)" }}
+                      >
+                        <tr>
+                          <th>Employee Name</th>
+                          <th>Email</th>
+
+                          <th>Access to </th>
+
+                          <th>Action</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {!loading && showData.length === 0 && (
+                          <tr className="text-center">
+                            <td colSpan="6">
+                              <h5>No Data Available</h5>
+                            </td>
+                          </tr>
+                        )}
+                        {!loading ? (
+                          <tr>
+                            <td className="text-center" colSpan="6">
+                              Loading...
+                            </td>
+                          </tr>
+                        ) : (
+                          //   showData.map((user, i) => {
+                          //     return (
+                          //       <tr key={i}>
+                          //         <td className="text-start">{user.name}</td>
+                          //         <td>{user._id}</td>
+
+                          //         <td className="text-start">
+                          //           {new Date(user.createdAt).toLocaleString(
+                          //             "en-IN",
+                          //             {
+                          //               weekday: "short",
+                          //               month: "short",
+                          //               day: "numeric",
+                          //               year: "numeric",
+                          //               hour: "numeric",
+                          //               minute: "numeric",
+                          //               hour12: true,
+                          //             }
+                          //           )}
+                          //         </td>
+                          //         {loading1 && (
+                          //           <>
+                          //             <td className="text-start">loading...</td>
+                          //             <td className="text-start">loading...</td>
+                          //           </>
+                          //         )}
+
+                          //         <OrderDetails
+                          //           _id={user?._id}
+                          //           setLoading1={setLoading1}
+                          //         />
+
+                          //         <td className="text-start">
+                          //           {/* <Link
+                          //             to={`/users-address/view/${userAddress._id}`}
+                          //           >
+                          //             <button
+                          //               style={{
+                          //                 color: "white",
+                          //                 marginRight: "1rem",
+                          //               }}
+                          //               type="button"
+                          //               className="
+                          //               btn btn-primary btn-sm
+                          //             waves-effect waves-light
+                          //             btn-table
+                          //             mx-1
+                          //             mt-1
+                          //           "
+                          //             >
+                          //               View
+                          //             </button>
+                          //           </Link>
+                          //           <Link
+                          //             to={`/users-address/edit/${userAddress._id}`}
+                          //           >
+                          //             <button
+                          //               style={{
+                          //                 color: "white",
+                          //                 marginRight: "1rem",
+                          //               }}
+                          //               type="button"
+                          //               className="
+                          //               btn btn-info btn-sm
+                          //             waves-effect waves-light
+                          //             btn-table
+                          //             mt-1
+                          //             mx-1
+                          //           "
+                          //             >
+                          //               Edit
+                          //             </button>
+                          //           </Link>
+                          //           <Link
+                          //             to={"#"}
+                          //             style={{
+                          //               marginRight: "1rem",
+                          //             }}
+                          //           >
+                          //             <button
+                          //               style={{ color: "white" }}
+                          //               type="button"
+                          //               className="
+                          //             btn btn-danger btn-sm
+                          //             waves-effect waves-light
+                          //             btn-table
+                          //             mt-1
+                          //             mx-1
+
+                          //           "
+                          //               onClick={() => {
+                          //                 handleDelete(userAddress._id);
+                          //               }}
+                          //             >
+                          //               Delete
+                          //             </button>
+                          //           </Link> */}
+                          //           <Link to={`/customers-details/${user?._id}`}>
+                          //             <button
+                          //               type="button"
+                          //               className="mt-1 btn btn-info btn-sm  waves-effect waves-light btn-table ml-2"
+                          //             >
+                          //               View
+                          //             </button>
+                          //           </Link>
+                          //         </td>
+                          //       </tr>
+                          //     );
+                          //   })
+                          <tr>
+                            <th>Roshan Garg</th>
+                            <th>roshan@gmail.com</th>
+                            {/* <th>Profile Image</th> */}
+                            <th>dashboard</th>
+
+                            {/* <th>Last Purchase</th>
+                          <th>Orders</th> */}
+                            <th>
+                              <button
+                                style={{
+                                  color: "white",
+                                  marginRight: "1rem",
+                                }}
+                                type="button"
+                                className="
+                                      btn btn-primary btn-sm
+                                    waves-effect waves-light
+                                    btn-table
+                                    mx-1
+                                    mt-1
+                                  "
+                              >
+                                Edit
+                              </button>
+                              <button
+                                style={{
+                                  color: "white",
+                                  marginRight: "1rem",
+                                }}
+                                type="button"
+                                className="
+                                      btn btn-primary btn-sm
+                                    waves-effect waves-light
+                                    btn-table
+                                    mx-1
+                                    mt-1
+                                  "
+                              >
+                                Delete
+                              </button>
+                            </th>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  <div className="row mt-20">
+                    <div className="col-sm-12 col-md-6 mb-20">
+                      <div
+                        className="dataTables_info"
+                        id="datatable_info"
+                        role="status"
+                        aria-live="polite"
+                      >
+                        Showing {currentPage * itemPerPage - itemPerPage + 1} to{" "}
+                        {Math.min(currentPage * itemPerPage, users.length)} of{" "}
+                        {users.length} entries
+                      </div>
+                    </div>
+
+                    <div className="col-sm-12 col-md-6">
+                      <div className="d-flex">
+                        <ul className="pagination ms-auto">
+                          <li
+                            className={
+                              currentPage === 1
+                                ? "paginate_button page-item previous disabled"
+                                : "paginate_button page-item previous"
+                            }
+                          >
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev - 1)}
+                            >
+                              Previous
+                            </span>
+                          </li>
+
+                          {!(currentPage - 1 < 1) && (
+                            <li className="paginate_button page-item">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={(e) =>
+                                  setCurrentPage((prev) => prev - 1)
+                                }
+                              >
+                                {currentPage - 1}
+                              </span>
+                            </li>
+                          )}
+
+                          <li className="paginate_button page-item active">
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                            >
+                              {currentPage}
+                            </span>
+                          </li>
+
+                          {!(
+                            (currentPage + 1) * itemPerPage - itemPerPage >
+                            users.length - 1
+                          ) && (
+                            <li className="paginate_button page-item ">
+                              <span
+                                className="page-link"
+                                style={{ cursor: "pointer" }}
+                                onClick={() => {
+                                  setCurrentPage((prev) => prev + 1);
+                                }}
+                              >
+                                {currentPage + 1}
+                              </span>
+                            </li>
+                          )}
+
+                          <li
+                            className={
+                              !(
+                                (currentPage + 1) * itemPerPage - itemPerPage >
+                                users.length - 1
+                              )
+                                ? "paginate_button page-item next"
+                                : "paginate_button page-item next disabled"
+                            }
+                          >
+                            <span
+                              className="page-link"
+                              style={{ cursor: "pointer" }}
+                              onClick={() => setCurrentPage((prev) => prev + 1)}
+                            >
+                              Next
+                            </span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Employee;
diff --git a/src/views/EmployeeAccess/addEmployee.js b/src/views/EmployeeAccess/addEmployee.js
new file mode 100644
index 0000000..b0efd0d
--- /dev/null
+++ b/src/views/EmployeeAccess/addEmployee.js
@@ -0,0 +1,123 @@
+import { Box, Button, Typography } from "@mui/material";
+import React, { useState } from "react";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import { useNavigate } from "react-router-dom";
+import _nav from "src/_nav";
+
+const AddEmployee = () => {
+  const [employeeName, setEmployeeName] = useState("");
+  const [email, setEmail] = useState("");
+  const navigate = useNavigate();
+  const [checkedItems, setCheckedItems] = useState({});
+  const filteredNav = _nav.filter((item) => item.name !== "Employee");
+  const handleCheckboxChange = (name) => (event) => {
+    setCheckedItems({
+      ...checkedItems,
+      [name]: event.target.checked,
+    });
+  };
+  console.log(checkedItems);
+
+  return (
+    <div>
+      <Box style={{ background: "#FFFFFF", color: "black", padding: "1rem" }}>
+        {/* <TextField
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          variant="outlined"
+          size="small"
+          fullWidth
+        /> */}
+        <Typography
+          style={{ margin: "0.5rem 0rem", fontWeight: "bold" }}
+          variant="h6"
+        >
+          {" "}
+          Add Employee:{" "}
+        </Typography>
+
+        <div className="mb-3">
+          <label htmlFor="title" className="form-label">
+            Employee Name*
+          </label>
+
+          <input
+            type="text"
+            className="form-control"
+            id="title"
+            placeholder="Eg: Roshan Garg"
+            value={employeeName}
+            onChange={(e) => setEmployeeName(e.target.value)}
+          />
+        </div>
+
+        <div className="mb-3">
+          <label htmlFor="welcomeMsgforDes" className="form-label">
+            Email*
+          </label>
+
+          <input
+            type="email"
+            className="form-control"
+            // style={{ width: "300px" }}
+            id="welcomeMsgforDes"
+            placeholder="Eg: rosham@gmailcom "
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+          />
+        </div>
+        <Box>
+          <label htmlFor="welcomeMsgforDes" className="form-label">
+            Access to*
+          </label>
+          <div>
+            {filteredNav.map((item, index) => (
+              <div key={index}>
+                <Checkbox
+                  checked={checkedItems[item.name] || false}
+                  onChange={handleCheckboxChange(item.name)}
+                  inputProps={{ "aria-label": "controlled" }}
+                />
+                {item.name}
+              </div>
+            ))}
+          </div>
+        </Box>
+        <div style={{ display: "flex" }}>
+          <Button
+            variant="contained"
+            color="primary"
+            //   onClick={handleSaveClick}
+            style={{
+              fontWeight: "bold",
+              marginBottom: "1rem",
+              textTransform: "capitalize",
+              marginRight: "5px",
+            }}
+          >
+            Save
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            //   onClick={handleCancelClick}
+            onClick={() => navigate("/employee")}
+            style={{
+              fontWeight: "bold",
+              marginBottom: "1rem",
+              textTransform: "capitalize",
+              marginRight: "5px",
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </Box>
+    </div>
+  );
+};
+
+export default AddEmployee;