diff --git a/src/App.css b/src/App.css
index 5ace92e..24c3d77 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,7 +7,7 @@
 * {
   box-sizing: border-box;
   margin: 0;
-  padding: 0;
+  padding: 0; 
   /* font-family: "League Spartan", sans-serif !important; */
   font-family: "Poppins", sans-serif !important;
   
@@ -32,9 +32,10 @@
 }
 
 .active {
-  background-color: #E5195E;
+  background-color: #210A33;
   color: #fff;
-  /* background-color: #ced8e6a2; */
+  /* background-color: black; */
+  background: linear-gradient(90deg, rgba(55, 37, 234, 0.6) 0%, rgba(94, 15, 205, 0.6) 100%);
 }
 
 .link {
@@ -50,7 +51,7 @@
 }
 
 .active:hover {
-  background-color: #E5195E;
+  background-color: #210A33;
   /* color: #fff; */
   /* background-color: #ced8e6a2 !important; */
 }
@@ -107,7 +108,7 @@
 }
 
 .primary-btn {
-  background-color: #E5195E !important;
+  background-color: #210A33 !important;
 }
 
 .team-slider .swiper-button-next:after {
diff --git a/src/Components/HeaderMain.jsx b/src/Components/HeaderMain.jsx
index b5597c4..3bb3b9b 100644
--- a/src/Components/HeaderMain.jsx
+++ b/src/Components/HeaderMain.jsx
@@ -1,9 +1,16 @@
-import { AddIcon, ArrowBackIcon } from "@chakra-ui/icons";
+import {
+  AddIcon,
+  ArrowBackIcon,
+  ArrowLeftIcon,
+  ArrowRightIcon,
+} from "@chakra-ui/icons";
 import {
   Avatar,
   Box,
   Button,
   HStack,
+  Image,
+  Input,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -14,15 +21,16 @@ import {
   Text,
   useColorMode,
 } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { IoMdDownload } from "react-icons/io";
 import * as XLSX from "xlsx";
 import profile from "../assets/proavatar.webp";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import { MdOutlineDarkMode, MdOutlineLightMode } from "react-icons/md";
-import logoMini from "../assets/propic.png"
+import logoMini from "../assets/propic.png";
 import { BsBack } from "react-icons/bs";
+import mainLogo from "../assets/optifii_logo.png";
 
 const HeaderMain = ({
   link,
@@ -32,34 +40,98 @@ const HeaderMain = ({
   logOutHandler,
   slideDirecttion,
 }) => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const { colorMode, toggleColorMode } = useContext(GlobalStateContext);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const [openDrawerClick, setOpenDrawerClick] = useState(true);
+  const [searchTerm, setSearchTerm] = useState("");
 
+  const openDrawerOnClick = () => {
+    setOpenDrawerClick(!openDrawerClick);
+  };
 
   return (
-    <Box
+    <Box position={"relative"}
       className={` pt-2 pb-2   fw-400 border-bottom d-flex ${
         slideDirecttion ? "flex-row-reverse ps-2" : ""
       }  justify-content-between align-items-center`}
       // boxShadow={"0 0px 8px rgba(0, 0, 0, 0.2)"}
-
       zIndex={999}
     >
-      <HStack>
-      {/* <ArrowBackIcon onClick={()=>navigate(-1)} /> */}
-      <Text
-        as={"span"}
-        fontWeight={"500"}
-        // color={"forestGreen.500"}
-        color={'black.100'}
-        fontSize={'sm'}
+      <div
+        className={`d-flex  ${
+          isDrawerOpen || openDrawerClick
+            ? "justify-content-start"
+            : "justify-content-center"
+        }  p-4 pt-0 pb-0 position-relative `}
+        height={"10%"}
       >
-        {/* <icon /> */}
-        {title}
-      </Text>
-      </HStack>
+        {isDrawerOpen || openDrawerClick ? (
+          <Image
+            style={{
+              width: 100,
+            }}
+            src={mainLogo}
+            alt="Logo"
+            onClick={() => navigate("/")}
+            cursor={"pointer"}
+          />
+        ) : (
+          <Image
+            style={{
+              width: 50,
+            }}
+            src={mainLogo}
+            alt="Logo"
+            onClick={() => navigate("/")}
+            cursor={"pointer"}
+          />
+        )}
+      </div>
+      <Button
+        colorScheme={"forestGreen"}
+        rounded={"lg"}
+        // onMouseOver={() => setIsDrawerOpen(true)}
+        // onMouseLeave={() => setIsDrawerOpen(false)}
+        onClick={openDrawerOnClick}
+        style={{
+          width: "28px",
+          height: "28px",
+          minWidth:"28px",
+          position: "absolute",
+          left: 200,
+          top: 17,
+          zIndex: 99,
+          backgroundColor:"#6311CB29"
+        }}
+      >
+        {isDrawerOpen || openDrawerClick ? (
+          <ArrowLeftIcon className="web-text-small" color={"#6311CB"} />
+        ) : (
+          <ArrowRightIcon className="web-text-small " />
+        )}
+      </Button>
+      {/* <HStack>
+        <Text
+          as={"span"}
+          fontWeight={"500"}
+          color={"black.100"}
+          fontSize={"sm"}
+        >
+          {title}
+        </Text>
+      </HStack> */}
+      <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
 
-      
       <Box me={4} gap={2} className="d-flex justify-content-center ">
         <Popover placement="bottom">
           <Portal>
@@ -92,7 +164,7 @@ const HeaderMain = ({
                 // name="D"
                 // src={logoMini}
                 bg={"#000"}
-                
+
                 // p={1}
               />
               <Box
diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
index 8a5decd..ebc7586 100644
--- a/src/Constants/Constants.js
+++ b/src/Constants/Constants.js
@@ -31,7 +31,7 @@ export function removeTrailingZeros(value) {
 
 
  export function getCountdownTimer(utcDateString) {
-  // Parse the UTC datetime string into a Date object
+  // Parse the UTC datetime string into a Date object 
   const targetDate = new Date(utcDateString);
   const now = new Date();
 
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index b2587b8..469b25d 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -28,15 +28,6 @@ import { nav } from "../Routes/Nav";
 import {
   Avatar,
   Box,
-  Button,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTrigger,
-  Portal,
   Text,
   WrapItem,
   Popover,
@@ -51,6 +42,7 @@ import {
   AlertIcon,
   Breadcrumb,
   Divider,
+  Button,
 } from "@chakra-ui/react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Cookies from "js-cookie"; // Import the Cookies library
@@ -64,7 +56,11 @@ import {
   RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { VscSymbolClass } from "react-icons/vsc";
-import { MdNotificationsNone, MdOutlineAddChart, MdOutlineTaskAlt } from "react-icons/md";
+import {
+  MdNotificationsNone,
+  MdOutlineAddChart,
+  MdOutlineTaskAlt,
+} from "react-icons/md";
 import { HiOutlineChartSquareBar } from "react-icons/hi";
 import { GrManual, GrNotification } from "react-icons/gr";
 import { LuContact } from "react-icons/lu";
@@ -75,6 +71,7 @@ import CustomBreadcrumb from "../Components/CutomBreadcrumb";
 import { getCountdownTimer } from "../Constants/Constants";
 import { FiHome } from "react-icons/fi";
 
+
 const DashboardLayout = ({ isOnline }) => {
   const navigate = useNavigate();
   const dispach = useDispatch();
@@ -109,7 +106,7 @@ const DashboardLayout = ({ isOnline }) => {
     // Set a timer to hide the splash screen after 3 seconds
     const timer = setTimeout(() => {
       setSplashVisible(false);
-    },1000); // 3000ms = 3 seconds
+    }, 1000); // 3000ms = 3 seconds
 
     // Cleanup the timer
     return () => clearTimeout(timer);
@@ -123,9 +120,9 @@ const DashboardLayout = ({ isOnline }) => {
     // dispach(loginUser(false));
     setIsAuthenticate(false);
     Cookies.remove("isAuthenticated");
-    localStorage.removeItem('refreshToken')
-    localStorage.removeItem('accessToken')
-    localStorage.removeItem('refreshTokenExp')
+    localStorage.removeItem("refreshToken");
+    localStorage.removeItem("accessToken");
+    localStorage.removeItem("refreshTokenExp");
     navigate("/login");
   };
 
@@ -317,9 +314,11 @@ const DashboardLayout = ({ isOnline }) => {
         );
 
       default:
-        return <span className="d-flex align-items-end  gap-2">
-        <FiHome className="fs-5" /> Home
-      </span>
+        return (
+          <span className="d-flex align-items-end  gap-2">
+             Home
+          </span>
+        );
     }
   };
 
@@ -328,35 +327,44 @@ const DashboardLayout = ({ isOnline }) => {
   }
 
   return (
-    <Box
-      style={{
-        height: "100vh",
-        width: "100vw",
-        position: "relative",
-        overflow: "hidden",
-      }}
-      className="d-flex"
-      pe={0.5}
-    >
-      <Alert
-        transition={"0.5s"}
-        h={53}
-        transform={isOnline ? "translateY(-100px)" : "translateY(0px)"}
-        position={"absolute"}
-        zIndex={999}
-        status="info"
-        variant="solid"
-        bgGradient="linear(to-r, red.500, yellow.500, red.500)"
-        // bgGradient='linear(to-r, #1EBCA3, #22CAB3)'
-        color={"white"}
-        fontWeight={600}
-        fontSize={"md"}
+    <Box>
+      <Box>
+        <HeaderMain
+          slideDirecttion={slideFromRight}
+          logOutHandler={logOutHandler}
+          icon
+          title={getTitle()}
+        />
+      </Box>
+      <Box
+        style={{
+          height: "100vh",
+          width: "100vw",
+          position: "relative",
+          overflow: "hidden",
+        }}
+        className="d-flex"
+        pe={0.5}
       >
-        <AlertIcon color={"white"} />
-        No Internet !
-      </Alert>
+        <Alert
+          transition={"0.5s"}
+          h={53}
+          transform={isOnline ? "translateY(-100px)" : "translateY(0px)"}
+          position={"absolute"}
+          zIndex={999}
+          status="info"
+          variant="solid"
+          bgGradient="linear(to-r, red.500, yellow.500, red.500)"
+          // bgGradient='linear(to-r, #1EBCA3, #22CAB3)'
+          color={"white"}
+          fontWeight={600}
+          fontSize={"md"}
+        >
+          <AlertIcon color={"white"} />
+          No Internet !
+        </Alert>
 
-      {/* <Box
+        {/* <Box
         bottom={4}
         right={!slideFromRight ? 4 : "auto"}
         left={slideFromRight ? 4 : "auto"}
@@ -381,95 +389,167 @@ const DashboardLayout = ({ isOnline }) => {
         zIndex={999}
       >
         <IoMdSwap />
-      </Box> */}
+      </Box>     */}
 
-      {slideFromRight ? null : (
-        <aside
-          className="h-100  position-relative sideBar  "
-          // onMouseOver={() => setIsDrawerOpen(true)}
-          // onMouseLeave={() => setIsDrawerOpen(false)}
-          style={{
-            width: isDrawerOpen || openDrawerClick ? 230 : 74,
-            transition: "width 0.3s ease-in-out", // Smooth transition for width change
-            // overflow: "hidden",
-            backgroundColor: "#f1f2f6",
-            position: "relative",
-            // backgroundColor: "#002F0F",
-          }}
-        >
-          <div
-            className={`d-flex  ${
-              isDrawerOpen || openDrawerClick
-                ? "justify-content-start"
-                : "justify-content-center"
-            }  p-3 pt-3 pb-3 position-relative `}
-            height={"10%"}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <Image
-                style={{
-                  width: 30,
-                }}
-                src={"https://www.wdipl.com/public/img/black_logo.svg"}
-                alt="Logo"
-                onClick={()=> navigate('/')}
-                cursor={"pointer"}
-              />
-            ) : (
-              <Image
-                style={{
-                  width: 30,
-                }}
-                src={"https://www.wdipl.com/public/img/black_logo.svg"}
-                alt="Logo"
-                onClick={()=> navigate('/')}
-                cursor={"pointer"}
-              />
-            )}
-          </div>
-
-          <Box
-            className="ps-2 scroll-bar pe-1"
+        {slideFromRight ? null : (
+          <aside
+            className="h-100 position-relative sideBar  "
+            // onMouseOver={() => setIsDrawerOpen(true)}
+            // onMouseLeave={() => setIsDrawerOpen(false)}
             style={{
-              height: "90%",
-              overflowY: "scroll",
-              overflowX: "hidden",
-              paddingBottom: "5rem",
+              width: isDrawerOpen || openDrawerClick ? 230 : 74,
+              transition: "width 0.3s ease-in-out", // Smooth transition for width change
+              backgroundColor: "#210A33",
+              position: "relative",
+              color: "#fff",
             }}
           >
-            <Accordion
-              m={0}
-              allowToggle
-              defaultIndex={-1}
-              index={openIndex}
-              onChange={handleAccordionChange}
+            
+
+            <Box
+              className="ps-2 scroll-bar pe-1 pt-3"
+              style={{
+                height: "90%",
+                overflowY: "scroll",
+                overflowX: "hidden",
+                paddingBottom: "5rem",
+              }}
             >
-              {nav.map(({ title, type, Icon, submenu, path, colorCode }, index) => {
-                if (type === "accordion") {
-                  return (
-                    <AccordionItem key={index} border={"none"}>
-                      <AccordionButton
-                        style={{ height: "auto" }}
-                        _hover={{bg:"#ced8e6a2"}}
-                        className={`${
-                          isDrawerOpen || openDrawerClick
-                            ? "p-2 web-text-medium ps-3 justify-content-between"
-                            : "p-2 ps-1 web-text-xlarge justify-content-center"
-                        } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
-                      >
-                        <Box
-                          as="span"
-                          display={"flex"}
-                          gap={2}
-                          alignItems={"center"}
+              <Accordion
+                m={0}
+                allowToggle
+                defaultIndex={-1}
+                index={openIndex}
+                onChange={handleAccordionChange}
+              >
+                {nav.map(
+                  ({ title, type, Icon, submenu, path, colorCode }, index) => {
+                    if (type === "accordion") {
+                      return (
+                        <AccordionItem key={index} border={"none"}>
+                          <AccordionButton
+                            style={{ height: "auto" }}
+                            _hover={{ bg: "#ced8e6a2" }}
+                            className={`${
+                              isDrawerOpen || openDrawerClick
+                                ? "p-2 web-text-medium ps-3 justify-content-between"
+                                : "p-2 ps-1 web-text-xlarge justify-content-center"
+                            } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
+                          >
+                            <Box
+                              as="span"
+                              display={"flex"}
+                              gap={2}
+                              alignItems={"center"}
+                            >
+                              {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
+                              {Icon && (
+                                <Icon
+                                  fontSize={title === "Admin" ? "18px" : "15px"}
+                                />
+                              )}
+                              <Text
+                                as={"span"}
+                                display={
+                                  isDrawerOpen || openDrawerClick
+                                    ? "flex"
+                                    : "none"
+                                }
+                                alignItems="center"
+                                overflow="hidden"
+                                textAlign={"left"}
+                              >
+                                {title}
+                              </Text>
+                            </Box>
+                            <AccordionIcon />
+                          </AccordionButton>
+                          <AccordionPanel
+                            p={0}
+                            pb={1}
+                            display={"flex"}
+                            flexDirection={"column"}
+                            gap={1}
+                          >
+                            {submenu?.map(
+                              (
+                                {
+                                  title: subMenuTitle,
+                                  path: link,
+                                  icon: SubIcon,
+                                  colorCode,
+                                },
+                                i
+                              ) => (
+                                <Box
+                                  key={i}
+                                  style={{
+                                    height: "auto",
+                                    position: "relative",
+                                  }}
+                                  className={`${
+                                    isDrawerOpen || openDrawerClick
+                                      ? " web-text-medium ps-3"
+                                      : " web-text-xlarge  justify-content-center"
+                                  }  d-flex align-items-center  p-0`}
+                                >
+                                  <NavLink
+                                    className={`${
+                                      isDrawerOpen || openDrawerClick
+                                        ? "p-2 ps-1 ms-2 web-text-medium "
+                                        : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
+                                    } rounded-1 link d-flex align-items-center gap-2 w-100 `}
+                                    to={link}
+                                  >
+                                    {SubIcon && (
+                                      <SubIcon
+                                        fontSize={"8px"}
+                                        className="ms-2"
+                                        // style={{ zIndex: 111, color:colorCode?colorCode:"" }}
+                                      />
+                                    )}
+                                    <Text
+                                      as={"span"}
+                                      display={
+                                        isDrawerOpen || openDrawerClick
+                                          ? "flex"
+                                          : "none"
+                                      }
+                                      alignItems="center"
+                                      overflow="hidden"
+                                    >
+                                      {subMenuTitle}
+                                    </Text>
+                                  </NavLink>
+                                </Box>
+                              )
+                            )}
+                          </AccordionPanel>
+                        </AccordionItem>
+                      );
+                    } else if (type === "title") {
+                      return (
+                        <Text
+                          as={"span"}
+                          key={index}
+                          className="web-text-xxsmall fw-600  text-secondary fw-bold"
                         >
-                          {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
-                          {Icon && (
-                            <Icon
-                            
-                              fontSize={title === "Admin" ? "18px" : "15px"}
-                            />
-                          )}
+                          {title}
+                        </Text>
+                      );
+                    } else if (type === "single") {
+                      return (
+                        <NavLink
+                          key={index}
+                          style={{ height: "auto", position: "relative" }}
+                          className={`${
+                            isDrawerOpen || openDrawerClick
+                              ? "p-2 web-text-medium"
+                              : "p-2 ps-0 web-text-xlarge justify-content-start"
+                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
+                          to={path}
+                        >
+                          {Icon && <Icon className="web-text-large ms-2" />}
                           <Text
                             as={"span"}
                             display={
@@ -477,183 +557,60 @@ const DashboardLayout = ({ isOnline }) => {
                             }
                             alignItems="center"
                             overflow="hidden"
-                            textAlign={"left"}
                           >
                             {title}
                           </Text>
-                        </Box>
-                        <AccordionIcon />
-                      </AccordionButton>
-                      <AccordionPanel
-                        p={0}
-                        pb={1}
-                        display={"flex"}
-                        flexDirection={"column"}
-                        gap={1}
-                      >
-                        {submenu?.map(
-                          (
-                            { title: subMenuTitle, path: link, icon: SubIcon, colorCode },
-                            i
-                          ) => (
-                            <Box
-                              key={i}
-                              style={{ height: "auto", position: "relative" }}
-                              className={`${
-                                isDrawerOpen || openDrawerClick
-                                  ? " web-text-medium ps-4"
-                                  : " web-text-xlarge  justify-content-center"
-                              }  d-flex align-items-center  p-0`}
-                            >
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  top: 0,
-                                  width: 2,
-                                  left: 22,
-                                  height:
-                                    i === submenu?.length - 1 ? "55%" : "120%",
-                                  borderRadius: "0 0 10px 10px",
-                                }}
-                              />
-                              <Box
-                                backgroundColor={"gray.300"}
-                                style={{
-                                  position: "absolute",
-                                  width: 10,
-                                  left: 22,
-                                  height: 2,
-                                }}
-                              />
+                        </NavLink>
+                      );
+                    } else {
+                      return null;
+                    }
+                  }
+                )}
+              </Accordion>
+            </Box>
 
-                              <NavLink
-                                className={`${
-                                  isDrawerOpen || openDrawerClick
-                                    ? "p-2 ps-1 ms-2 web-text-medium "
-                                    : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
-                                } rounded-1 link d-flex align-items-center gap-2 w-100 `}
-                                to={link}
-                              >
-                                {SubIcon && (
-                                  <SubIcon
-                                    className="web-text-large ms-2"
-                                    style={{ zIndex: 111, color:colorCode?colorCode:"" }}
+            
+            <Text
+              textAlign={"center"}
+              fontWeight={500}
+              fontSize={"xs"}
+              color={"gray.600"}
+            >
+              {getCountdownTimer(localStorage.getItem("accessTokenExp"))}
+            </Text>
+          </aside>
+        )}
 
-                                  />
-                                )}
-                                <Text
-                                  as={"span"}
-                                  display={
-                                    isDrawerOpen || openDrawerClick
-                                      ? "flex"
-                                      : "none"
-                                  }
-                                  alignItems="center"
-                                  overflow="hidden"
-                                >
-                                  {subMenuTitle}
-                                </Text>
-                              </NavLink>
-                            </Box>
-                          )
-                        )}
-                      </AccordionPanel>
-                    </AccordionItem>
-                  );
-                } else if (type === "title") {
-                  return (
-                    <Text
-                      as={"span"}
-                      key={index}
-                      className="web-text-xxsmall fw-600  text-secondary fw-bold"
-                    >
-                      {title}
-                    </Text>
-                  );
-                } else if (type === "single") {
-                  return (
-                    <NavLink
-                      key={index}
-                      style={{ height: "auto", position: "relative" }}
-                      className={`${
-                        isDrawerOpen || openDrawerClick
-                          ? "p-2 web-text-medium"
-                          : "p-2 ps-0 web-text-xlarge justify-content-start"
-                      } rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
-                      to={path}
-                    >
-                      {Icon && <Icon className="web-text-large ms-2"  />}
-                      <Text
-                        as={"span"}
-                        display={
-                          isDrawerOpen || openDrawerClick ? "flex" : "none"
-                        }
-                        alignItems="center"
-                        overflow="hidden"
-                      >
-                        {title}
-                      </Text>
-                    </NavLink>
-                  );
-                } else {
-                  return null;
-                }
-              })}
-            </Accordion>
-          </Box>
+        <main
+          className={`h-100   ${
+            slideFromRight ? "pe-3" : "ps-3"
+          } d-flex flex-column gap-0`}
+          style={{
+            width: `calc(100% - ${
+              isDrawerOpen || openDrawerClick ? 230 : 74
+            }px)`,
+            transition: "width 0.3s ease-in-out",
+            background:
+              "linear-gradient(90deg, rgba(232, 232, 238, 0.6) 0%, rgba(200, 200, 210, 0.6) 100%)",
+          }}
+        >
+          <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
+            <span className="fs-5">{getTitle()}</span>
+          </header>
 
-          {/* <Button
-            colorScheme={"forestGreen"}
-            rounded={"lg"}
-            // onMouseOver={() => setIsDrawerOpen(true)}
-            // onMouseLeave={() => setIsDrawerOpen(false)}
-            onClick={openDrawerOnClick}
-            style={{
-              width: 18,
-              height: 26,
-              position: "absolute",
-              right: -19,
-              bottom: 28,
-              zIndex: 99,
-            }}
-          >
-            {isDrawerOpen || openDrawerClick ? (
-              <ArrowLeftIcon className="web-text-small" />
-            ) : (
-              <ArrowRightIcon className="web-text-small " />
-            )}
-          </Button> */}
-          <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text>
-
-        </aside>
-      )}
-
-      <main
-        className={`h-100   ${slideFromRight ? "pe-3" : "ps-3"} d-flex flex-column gap-0`}
-        style={{
-          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
-          transition: "width 0.3s ease-in-out",
-
-        }}
-      >
-        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
-          <span className="fs-5">{getTitle()}</span>
-        </header> */}
-
-        <HeaderMain
+          {/* <HeaderMain
           slideDirecttion={slideFromRight}
           logOutHandler={logOutHandler}
           icon
           title={getTitle()}
-        />
-        
-      {/* <CustomBreadcrumb /> */}
+        /> */}
 
-        <AppContent />
-      </main>
+          {/* <CustomBreadcrumb /> */}
 
-    
+          <AppContent />
+        </main>
+      </Box>
     </Box>
   );
 };
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 1150b51..211e1bb 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -127,7 +127,7 @@ const Login = () => {
 
 <Box width={"450px"} display={'flex'} justifyContent={'center'}>
           <Image 
-          w={300}
+            w={150}
             src={"https://www.wdipl.com/public/img/black_logo.svg"}
             alt="img"
             
@@ -202,7 +202,8 @@ const Login = () => {
                 h="1.75rem"
                 size="sm"
                 fontSize={"xs"}
-                color={"#E5195E"}
+                colorScheme={"deepPurple"}
+                // variant={"ghost"}
                 onClick={handleClick}
               >
                 {show ? "Hide" : "Show"}
@@ -222,7 +223,7 @@ const Login = () => {
           type="submit"
           className="w-100 primary-btn"
           color={"whitesmoke"}
-          // colorScheme="red.500"
+          colorScheme="red.500"
           size="lg"
           rounded={'sm'}
         >
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index 94cf95a..3d7426d 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -1,256 +1,62 @@
 import { HiOutlineNewspaper } from "react-icons/hi";
-import { TbBrandMedium, TbChartHistogram, TbLayoutDashboard, TbReportMoney, TbSquareRoundedFilled } from "react-icons/tb";
+import { TbBrandMedium, TbSquareRoundedFilled } from "react-icons/tb";
 import {
-  RiBankLine,
-  RiFileUserLine,
   RiMoneyDollarBoxLine,
 } from "react-icons/ri";
 import { RiExchangeBoxLine } from "react-icons/ri";
-import { VscGitPullRequestGoToChanges, VscSymbolClass } from "react-icons/vsc";
+import { VscSymbolClass } from "react-icons/vsc";
 import { FiHome, FiUsers } from "react-icons/fi";
-import { PiCrown } from "react-icons/pi";
-import { MdOutlineAddChart, MdOutlineAdminPanelSettings, MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
-import { HiOutlineChartSquareBar } from "react-icons/hi";
-import { TbListDetails } from "react-icons/tb";
-import { TbTransactionDollar } from "react-icons/tb";
-import { TbCalendarDollar } from "react-icons/tb";
-import { TbDeviceDesktopDollar } from "react-icons/tb";
-import { BiMoneyWithdraw } from "react-icons/bi";
-import { GrDocumentUpdate, GrManual, GrNotification } from "react-icons/gr";
-import { MdBrowserUpdated } from "react-icons/md";
-import { AiOutlineUserDelete } from "react-icons/ai";
-import { MdNotificationsNone } from "react-icons/md";
-import { SiAcademia } from "react-icons/si";
-import { LuContact } from "react-icons/lu";
-import { LiaCrownSolid } from "react-icons/lia";
-import { PiCrownDuotone } from "react-icons/pi";
-import { IoMdNotificationsOutline } from "react-icons/io";
-import { BellIcon } from "@chakra-ui/icons";
+import {MdOutlineEditCalendar, MdOutlinePolicy, MdOutlineTaskAlt, MdWorkspacesOutline } from "react-icons/md";
+import {  GrNotification } from "react-icons/gr";
+import HomeIcon from "../assets/homeIcon.png"
 
 export const nav = [
 
-  // {
-  //   title: "My menu",
-  //   type: "title",
-  // },
   {
     title: "Home",
-    type: "single",
-    path: "/",
     Icon: FiHome,
+    path: "/",
+    submenu: [
+      {
+        title: "Report",
+        path: "/",
+        icon: TbSquareRoundedFilled,
+        colorCode:"#70a1ff"
+      },
+      {
+        title: "Requests",
+        path: "/ReGroup",
+        icon: TbSquareRoundedFilled,
+        colorCode:"#7bed9f"
+      },
+    ],
+    type: "accordion",
   },
+
   {
-    title: "My tasks",
+    title: "Expenses",
     type: "single",
     path: "/task",
     Icon: MdOutlineTaskAlt,
   },
   {
-    title: "Notification",
+    title: "Benefit",
     type: "single",
     path: "/notification",
     Icon: GrNotification,
   },
-  // {
-  //   title: "Projects",
-  //   type: "title",
-  // },
   {
-    title: "Projects",
-    submenu: [
-      {
-        title: "Tanami",
-        path: "/tanami",
-        icon: TbSquareRoundedFilled,
-        colorCode:"#70a1ff"
-      },
-      {
-        title: "ReGroup",
-        path: "/ReGroup",
-        icon: TbSquareRoundedFilled,
-        colorCode:"#7bed9f"
-      },
-      {
-        title: "Woka",
-        path: "/Woka",
-        icon: TbSquareRoundedFilled,
-        colorCode:"#eccc68"
-      },
-    ],
-    type: "accordion",
-    Icon: MdWorkspacesOutline,
-  },
-  {
-      title: "Officials",
-      type: "title",
-    },
-
-  {
-    title: "Leaves",
+    title: "Gifts",
     type: "single",
-    path: "/leaves",
-    Icon: MdOutlineEditCalendar,
+    path: "/notification",
+    Icon: GrNotification,
   },
-
   {
-    title: "Policy",
+    title: "Help & Support",
     type: "single",
-    path: "/policy",
-    Icon: MdOutlinePolicy,
+    path: "/notification",
+    Icon: GrNotification,
   },
-  // {
-  //   title: "IO Management",
-  //   submenu: [
-  //     {
-  //       title: "Create IO",
-  //       path: "/create-io",
-  //       icon: MdOutlineAddChart,
-  //     },
-  //     {
-  //       title: "View IO",
-  //       path: "/view-io",
-  //       icon: HiOutlineChartSquareBar,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: TbDeviceDesktopDollar,
-  // },
-  // {
-  //   title: "Investor Management",
-  //   submenu: [
-  //     {
-  //       title: "Investor Details",
-  //       path: "/investor-details",
-  //       icon: TbListDetails,
-  //     },
-  //     {
-  //       title: "Investor Transactions",
-  //       path: "/investor-transactions",
-  //       icon: TbTransactionDollar,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: TbCalendarDollar,
-  // },
-  // {
-  //   title: "INVESTORS REQUEST",
-  //   type: "title",
-  // },
-  // {
-  //   title: "Deposit",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/deposit-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/deposit-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: BiMoneyWithdraw,
-  // },
-  // {
-  //   title: "Withdrawal",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/withdraw-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/withdraw-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: BiMoneyWithdraw,
-  // },
-  // {
-  //   title: "Investor Upgradation",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/investor-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/investor-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: MdBrowserUpdated,
-  // },
-  // {
-  //   title: "Account Deletion",
-  //   submenu: [
-  //     {
-  //       title: "Pending Request",
-  //       path: "/deletion-request",
-  //       icon: RiMoneyDollarBoxLine,
-  //     },
-  //     {
-  //       title: "View History",
-  //       path: "/deletion-history",
-  //       icon: RiExchangeBoxLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: AiOutlineUserDelete,
-  // },
-  // {
-  //   title: "MANAGE ADMIN",
-  //   type: "title",
-  // },
-  // {
-  //   title: "Admin",
-  //   submenu: [
-  //     {
-  //       title: "Ban / Unban Investor",
-  //       path: "/bank-investor",
-  //       icon: TbReportMoney,
-  //     },
-  //     {
-  //       title: "Academy",
-  //       path: "/academy",
-  //       icon: GrManual,
-  //     },
-  //     {
-  //       title: "Notification",
-  //       path: "/notification",
-  //       icon: MdNotificationsNone,
-  //     },
-  //     {
-  //       title: "Contact Details",
-  //       path: "/contact",
-  //       icon: LuContact,
-  //     },
-  //     {
-  //       title: "Users",
-  //       path: "/users",
-  //       icon: RiFileUserLine,
-  //     },
-  //     {
-  //       title: "Bank Details",
-  //       path: "/bank-details",
-  //       icon: RiBankLine,
-  //     },
-  //   ],
-  //   type: "accordion",
-  //   Icon: MdOutlineAdminPanelSettings,
-  // },
-  // {
-  //   title: "Single Link",
-  //   type: "single",
-  //   path: "/logout",
-  //   Icon: HiOutlineNewspaper,
-  // },
 ];
 
 export const nestedNav = [
diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index 05c8f71..67d9d5d 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -27,18 +27,19 @@ const customTheme = extendTheme({
       800: "#DE858E",
       900: "#DE858E",
     },
-    forestGreen: {
-      50: "#e6f3e9",
-      100: "#c2e1c7",
-      200: "#9dcda4",
-      300: "#78b982",
-      400: "#54a560",
-      500: "#004118", // primary shade for your custom color
-      600: "#003b14",
-      700: "#003310",
-      800: "#002b0c",
-      900: "#002308",
+    deepPurple: {
+      50: "#F1EAF4",   // lightest shade
+      100: "#DBC7E4",
+      200: "#BFA0D0",
+      300: "#9D78B8",
+      400: "#794DA0",
+      500: "#210A33",  // primary shade for your custom color
+      600: "#1C082D",
+      700: "#160524",
+      800: "#10041C",
+      900: "#0A0212",  // darkest shade
     },
+    
   },
   components: {
     // Switch: {
diff --git a/src/assets/Ellipse-37.png b/src/assets/Ellipse-37.png
deleted file mode 100644
index cd7e58a..0000000
Binary files a/src/assets/Ellipse-37.png and /dev/null differ
diff --git a/src/assets/Ellipse-38.png b/src/assets/Ellipse-38.png
deleted file mode 100644
index 6af52ca..0000000
Binary files a/src/assets/Ellipse-38.png and /dev/null differ
diff --git a/src/assets/Ellipse-39.png b/src/assets/Ellipse-39.png
deleted file mode 100644
index 8b58fe6..0000000
Binary files a/src/assets/Ellipse-39.png and /dev/null differ
diff --git a/src/assets/Ellipse.png b/src/assets/Ellipse.png
deleted file mode 100644
index f2db4bf..0000000
Binary files a/src/assets/Ellipse.png and /dev/null differ
diff --git a/src/assets/EmptySearchList.png b/src/assets/EmptySearchList.png
deleted file mode 100644
index 2d43ea0..0000000
Binary files a/src/assets/EmptySearchList.png and /dev/null differ
diff --git a/src/assets/ExpensesIcon.png b/src/assets/ExpensesIcon.png
new file mode 100644
index 0000000..1ab0da8
Binary files /dev/null and b/src/assets/ExpensesIcon.png differ
diff --git a/src/assets/GiftsIcon.png b/src/assets/GiftsIcon.png
new file mode 100644
index 0000000..f699ead
Binary files /dev/null and b/src/assets/GiftsIcon.png differ
diff --git a/src/assets/IOheader.png b/src/assets/IOheader.png
deleted file mode 100644
index 9eead41..0000000
Binary files a/src/assets/IOheader.png and /dev/null differ
diff --git a/src/assets/accademicbanner.png b/src/assets/accademicbanner.png
deleted file mode 100644
index 5595d64..0000000
Binary files a/src/assets/accademicbanner.png and /dev/null differ
diff --git a/src/assets/bahrain_flag.png b/src/assets/bahrain_flag.png
deleted file mode 100644
index 6b650a1..0000000
Binary files a/src/assets/bahrain_flag.png and /dev/null differ
diff --git a/src/assets/commingsoon.png b/src/assets/commingsoon.png
deleted file mode 100644
index e576b78..0000000
Binary files a/src/assets/commingsoon.png and /dev/null differ
diff --git a/src/assets/favicone.png b/src/assets/favicone.png
deleted file mode 100644
index 72359f5..0000000
Binary files a/src/assets/favicone.png and /dev/null differ
diff --git a/src/assets/helpIcon.png b/src/assets/helpIcon.png
new file mode 100644
index 0000000..1452984
Binary files /dev/null and b/src/assets/helpIcon.png differ
diff --git a/src/assets/homeIcon.png b/src/assets/homeIcon.png
new file mode 100644
index 0000000..b3009e1
Binary files /dev/null and b/src/assets/homeIcon.png differ
diff --git a/src/assets/kuwait_flag.png b/src/assets/kuwait_flag.png
deleted file mode 100644
index 514bf42..0000000
Binary files a/src/assets/kuwait_flag.png and /dev/null differ
diff --git a/src/assets/linkedin.png b/src/assets/linkedin.png
deleted file mode 100644
index 1e7032b..0000000
Binary files a/src/assets/linkedin.png and /dev/null differ
diff --git a/src/assets/logo-min copy.png b/src/assets/logo-min copy.png
new file mode 100644
index 0000000..8185f0a
Binary files /dev/null and b/src/assets/logo-min copy.png differ
diff --git a/src/assets/logo2 copy.png b/src/assets/logo2 copy.png
new file mode 100644
index 0000000..da697bc
Binary files /dev/null and b/src/assets/logo2 copy.png differ
diff --git a/src/assets/oman_flag.png b/src/assets/oman_flag.png
deleted file mode 100644
index 5bd32a0..0000000
Binary files a/src/assets/oman_flag.png and /dev/null differ
diff --git a/src/assets/optifii_logo.png b/src/assets/optifii_logo.png
new file mode 100644
index 0000000..2cc151f
Binary files /dev/null and b/src/assets/optifii_logo.png differ
diff --git a/src/assets/photo-1472313420546-a46e561861d8.avif b/src/assets/photo-1472313420546-a46e561861d8.avif
deleted file mode 100644
index 601721c..0000000
Binary files a/src/assets/photo-1472313420546-a46e561861d8.avif and /dev/null differ
diff --git a/src/assets/pro1.jpg b/src/assets/pro1.jpg
deleted file mode 100644
index 65756c8..0000000
Binary files a/src/assets/pro1.jpg and /dev/null differ
diff --git a/src/assets/proavatar copy.webp b/src/assets/proavatar copy.webp
new file mode 100644
index 0000000..0e9ecbf
Binary files /dev/null and b/src/assets/proavatar copy.webp differ
diff --git a/src/assets/qatar_flag.png b/src/assets/qatar_flag.png
deleted file mode 100644
index c3fc0ad..0000000
Binary files a/src/assets/qatar_flag.png and /dev/null differ
diff --git a/src/assets/saudi_arabia_flag.png b/src/assets/saudi_arabia_flag.png
deleted file mode 100644
index 654d7ac..0000000
Binary files a/src/assets/saudi_arabia_flag.png and /dev/null differ
diff --git a/src/assets/uae_flag.png b/src/assets/uae_flag.png
deleted file mode 100644
index ebc9a38..0000000
Binary files a/src/assets/uae_flag.png and /dev/null differ
diff --git a/src/assets/welcome2.avif b/src/assets/welcome2.avif
deleted file mode 100644
index ad27134..0000000
Binary files a/src/assets/welcome2.avif and /dev/null differ