diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx
index 3750a05..3c034aa 100644
--- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx
+++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/AddRoleModalAdvance.jsx
@@ -61,43 +61,135 @@ const AddRoleModalAdvance = ({ isOpen, onClose }) => {
 
   const data = [
     {
-      action: "Dashboard",
-      all: "John Doe",
-      view: 28,
-      add: "Text",
-      edit: "Text",
-      delete: "Text",
+      Title: "Manage Human Resource",
     },
     {
       action: "Dashboard",
-      all: "John Doe",
-      view: 28,
-      add: "Text",
-      edit: "Text",
-      delete: "Text",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "Employees",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "Approvers",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "Subadmins",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      Title: "Expense Management",
     },
     {
       action: "Dashboard",
-      all: "John Doe",
-      view: 28,
-      add: "Text",
-      edit: "Text",
-      delete: "Text",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
     },
     {
-      action: "Dashboard",
-      all: "John Doe",
-      view: 28,
-      add: "Text",
-      edit: "Text",
-      delete: "Text",
+      action: "Card program",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
     },
+    {
+      action: "Wallet program",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "Reimbursement Request",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "Expense Request",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+      action: "EVM Card Request",
+      all: <Checkbox colorScheme="purple" />,
+      view: <Checkbox colorScheme="purple" />,
+      add: <Checkbox colorScheme="purple" />,
+      edit: <Checkbox colorScheme="purple" />,
+      delete: <Checkbox colorScheme="purple" />,
+    },
+    {
+        Title: "Gifting Management",
+      },
+      {
+        action: "Dashboard",
+        all: <Checkbox colorScheme="purple" />,
+        view: <Checkbox colorScheme="purple" />,
+        add: <Checkbox colorScheme="purple" />,
+        edit: <Checkbox colorScheme="purple" />,
+        delete: <Checkbox colorScheme="purple" />,
+      },
+      {
+        action: "Employees",
+        all: <Checkbox colorScheme="purple" />,
+        view: <Checkbox colorScheme="purple" />,
+        add: <Checkbox colorScheme="purple" />,
+        edit: <Checkbox colorScheme="purple" />,
+        delete: <Checkbox colorScheme="purple" />,
+      },
+      {
+        Title: "Manage Human Resource",
+      },
+      {
+        action: "Dashboard",
+        all: <Checkbox colorScheme="purple" />,
+        view: <Checkbox colorScheme="purple" />,
+        add: <Checkbox colorScheme="purple" />,
+        edit: <Checkbox colorScheme="purple" />,
+        delete: <Checkbox colorScheme="purple" />,
+      },
+      {
+        action: "Employees",
+        all: <Checkbox colorScheme="purple" />,
+        view: <Checkbox colorScheme="purple" />,
+        add: <Checkbox colorScheme="purple" />,
+        edit: <Checkbox colorScheme="purple" />,
+        delete: <Checkbox colorScheme="purple" />,
+      },
   ];
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} isCentered size={"xl"}>
       <ModalOverlay />
-      <ModalContent height={"600px"} overflow={"scroll"}>
+      <ModalContent height={"550px"} overflow={"scroll"}>
         <ModalHeader fontSize={"sm"}>Add Role Advance</ModalHeader>
         <ModalCloseButton />
         <Box as="form" onSubmit={handleSubmit(onSubmit)}>
@@ -212,50 +304,40 @@ const AddRoleModalAdvance = ({ isOpen, onClose }) => {
                   </Checkbox>
                 </CheckboxGroup>
               </FormControl>
-              <Box backgroundColor={"#6311CB14"} p={4} rounded={"md"}>
-                <Text
-                  display={"flex"}
-                  alignItems={"center"}
-                  fontSize={"sm"}
-                  me={2}
-                  color={"#000"}
-                  mb={2}
-                >
-                  <Text mb={0} me={2} fontSize={"md"}>
-                    <IoSettingsOutline color="#6311CB" />
-                  </Text>{" "}
-                  Advance Setting
-                </Text>
-                <Text color={"#878787"} fontSize={"xs"}>
-                  Enable this to provide Corporate dashboard access to this
-                  role.
-                </Text>
-                <PrimaryButton title={"Give Access"} />
-              </Box>
 
               <Box margin="auto" mt={5} overflow={"scroll"}>
-                <Table variant="striped">
-                  {/* <TableCaption>Employee Details</TableCaption> */}
+                <Table w={"100%"}>
                   <Thead>
                     <Tr>
-                      <Th>Actions</Th>
-                      <Th>All</Th>
-                      <Th>View</Th>
-                      <Th>Add</Th>
-                      <Th>Edit</Th>
-                      <Th>Delete</Th>
+                      <Th textTransform={"inherit"} py={2}>Actions</Th>
+                      <Th textTransform={"inherit"} py={2}>All</Th>
+                      <Th textTransform={"inherit"} py={2}>View</Th>
+                      <Th textTransform={"inherit"} py={2}>Add</Th>
+                      <Th textTransform={"inherit"} py={2}>Edit</Th>
+                      <Th textTransform={"inherit"} py={2}>Delete</Th>
                     </Tr>
                   </Thead>
                   <Tbody>
-                    {data.map((row) => (
-                      <Tr key={row.id}>
-                        <Td fontSize={"xs"}>{row.action}</Td>
-                        <Td fontSize={"xs"}>{row.all}</Td>
-                        <Td fontSize={"xs"}>{row.view}</Td>
-                        <Td fontSize={"xs"}>{row.add}</Td>
-                        <Td fontSize={"xs"}>{row.edit}</Td>
-                        <Td fontSize={"xs"}>{row.delete}</Td>
-                      </Tr>
+                    {data.map((row, index) => (
+                      <>
+                        {row.Title && (
+                          <Tr backgroundColor={"#3725EA0F"} key={`title-${index}`}>
+                            <Td colSpan={6} py={1}>
+                              <Text color={"#3725EA"}  fontSize={"sm"} mb={0}>{row.Title}</Text>
+                            </Td>
+                          </Tr>
+                        )}
+                        {row.action && (
+                          <Tr key={`action-${index}`}>
+                            <Td fontSize={"xs"} py={2}>{row.action}</Td>
+                            <Td fontSize={"xs"} py={2}>{row.all}</Td>
+                            <Td fontSize={"xs"} py={2}>{row.view}</Td>
+                            <Td fontSize={"xs"} py={2}>{row.add}</Td>
+                            <Td fontSize={"xs"} py={2}>{row.edit}</Td>
+                            <Td fontSize={"xs"} py={2}>{row.delete}</Td>
+                          </Tr>
+                        )}
+                      </>
                     ))}
                   </Tbody>
                 </Table>
diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx
index 732a986..c93d981 100644
--- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx
+++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/EmployeePermissions.jsx
@@ -20,11 +20,10 @@ import {
   import { LuListFilter } from "react-icons/lu";
   import GlobalStateContext from "../../../Contexts/GlobalStateContext";
   import { OPACITY_ON_LOAD } from "../../../Layout/animations";
-  import PrimaryButton from "../../../Components/Buttons/PrimaryButton";
   import NormalTable from "../../../Components/DataTable/NormalTable";
   import SwitchButton from "../../../Components/SwitchButton";
   import AddDepartment from "./AddDepartmentModal";
-  import { PiReceipt } from "react-icons/pi";
+  import { MdOutlineEdit } from "react-icons/md";
   
   const EmployeePermissions = () => {
     const { employeePermissions } = useContext(GlobalStateContext);
@@ -78,9 +77,10 @@ import {
       "Department": item?.department,
       "Role": item?.role,
       "Permissions":(
-          <Box  bg='#dfdfdf' display={"inline-block"} p={1} rounded={4}>
-              {item?.permissions}
-          </Box>
+        <Box display={"flex"} alignItems={"center"}>
+            <Text color={"#6311CB"} bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text>
+            <Text as={"span"}><MdOutlineEdit color={"#6311CB"} fontSize={"18px"} /></Text>
+        </Box>
       ),
       "Action": (
         <Box
diff --git a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx
index 871c7b8..8b52cce 100644
--- a/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx
+++ b/src/Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles.jsx
@@ -80,8 +80,11 @@ const Roles = () => {
     "Created duration": item?.createdDuration,
     "Created By": item?.createdBy,
     Permissions:(
-        <Box  bg='#dfdfdf' display={"inline-block"} p={1} rounded={4}>
-            {item?.permissions}
+        <Box display={"inline-block"}>
+            <Text bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text>
+            <Text bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text> 
+            <Text bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text>
+            <Text bg='#dfdfdf' p={1} rounded={"md"} as={"span"}>{item?.permissions}</Text>
         </Box>
     ),
     Status: (
diff --git a/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
new file mode 100644
index 0000000..f2dc4a1
--- /dev/null
+++ b/src/Pages/OptiFiiExpense/OptiFiiExpenseDashboard.jsx
@@ -0,0 +1,203 @@
+import {
+    Box,
+    Button,
+    Card,
+    CardBody,
+    CardFooter,
+    CardHeader,
+    Checkbox,
+    Heading,
+    Icon,
+    Input,
+    InputGroup,
+    InputLeftElement,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuList,
+    Radio,
+    SimpleGrid,
+    Text,
+    useDisclosure,
+    VStack,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  import { AddIcon, ChevronDownIcon, SearchIcon } from "@chakra-ui/icons";
+  import { LuListFilter } from "react-icons/lu";
+  import NormalTable from "../../Components/DataTable/NormalTable";
+  import { MdOutlineEdit } from "react-icons/md";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+  
+  const OptiFiiExpenseDashboard = () => {
+    const { employeePermissions } = useContext(GlobalStateContext);
+    const [isLoading, setIsLoading] = useState(false);
+    const [searchTerm, setSearchTerm] = useState("");
+    const [isSwitchOn, setIsSwitchOn] = useState(true);
+  
+    useEffect(() => {
+      // Set isLoading to true
+      setIsLoading(true);
+  
+      // Simulate a 3-second delay
+      const timer = setTimeout(() => {
+        setIsLoading(false); // Set isLoading to false after 3 seconds
+      }, 500);
+  
+      // Cleanup the timer when the component unmounts or when the useEffect re-runs
+      return () => clearTimeout(timer);
+    }, []); // Empty dependency array means this effect runs once after the component mounts
+  
+    // ===============================[ Table Header ]
+    const tableHeadRow = [
+      "Employee ID",
+      "Name",
+      "Email ID",
+      "Department",
+      "Role",
+      "Permissions",
+      "Action",
+    ];
+  
+    // const extractedArray = reportsHistory.map((item)=>({ }))
+  
+    const extractedArray = employeePermissions.map((item, index) => ({
+      "Employee ID": (
+        <Checkbox colorScheme="purple" value="1">
+          <Text
+            as={"span"}
+            display={"flex"}
+            gap={2}
+            alignItems={"center"}
+            fontSize={"xs"}
+          >
+            {item?.id} 
+          </Text>
+        </Checkbox>
+      ),
+      "Name": item?.name,
+      "Email ID": item?.emailID,
+      "Department": item?.department,
+      "Role": item?.role,
+      "Permissions":(
+        <Box display={"flex"} alignItems={"center"}>
+            <Text color={"#6311CB"} bg='#dfdfdf' p={1} rounded={"md"} as={"span"} me={1}>{item?.permissions}</Text>
+            <Text as={"span"}><MdOutlineEdit color={"#6311CB"} fontSize={"18px"} /></Text>
+        </Box>
+      ),
+      "Action": (
+        <Box
+          display={"flex"}
+          gap={1}
+          alignItems={"center"}
+          justifyContent={"center"}
+        >
+          Btn
+        </Box>
+      ),
+    }));
+  
+    return (
+      <Box {...OPACITY_ON_LOAD} overflowX={"scroll"}  p={4}>
+        <SimpleGrid spacing={4} templateColumns='repeat(auto-fill, minmax(200px, 1fr))'>
+        <Card>
+            <CardHeader>
+            <Heading size='md'> Customer dashboard</Heading>
+            </CardHeader>
+            <CardBody>
+            <Text>View a summary of all your customers over the last month.</Text>
+            </CardBody>
+            <CardFooter>
+            <Text>View here</Text>
+            </CardFooter>
+        </Card>
+        <Card>
+            <CardHeader>
+            <Heading size='md'> Customer dashboard</Heading>
+            </CardHeader>
+            <CardBody>
+            <Text>View a summary of all your customers over the last month.</Text>
+            </CardBody>
+            <CardFooter>
+            <Text>View here</Text>
+            </CardFooter>
+        </Card>
+        <Card>
+            <CardHeader>
+            <Heading size='md'> Customer dashboard</Heading>
+            </CardHeader>
+            <CardBody>
+            <Text>View a summary of all your customers over the last month.</Text>
+            </CardBody>
+            <CardFooter>
+            <Text>View here</Text>
+            </CardFooter>
+        </Card>
+        </SimpleGrid>
+        <Box
+          rounded={"xl"}
+          py={3}
+          // pb={0}
+          display={"flex"}
+          flexDirection={"column"}
+          bg={"#fff"}
+          shadow={"md"}
+          minH={"100%"}
+        >
+          <VStack mb={3} px={3} alignItems={"start"} gap={0}>
+            <Box
+              display={"flex"}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+              w={"100%"}
+            >
+              <InputGroup width={300} size="sm" ml={5}>
+                <InputLeftElement pointerEvents="none">
+                  <SearchIcon color="gray.300" />
+                </InputLeftElement>
+                <Input
+                  type="search"
+                  placeholder="Search"
+                  rounded="md"
+                  focusBorderColor="#3725EA"
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                />
+              </InputGroup>
+              <Box>
+                <Menu>
+                  <MenuButton
+                    as={Button}
+                    leftIcon={<LuListFilter fontSize={"16px"} />}
+                    rightIcon={<ChevronDownIcon />}
+                    fontSize={"xs"}
+                    color={"gray.700"}
+                    variant="outline"
+                    size={"sm"}
+                    me={2}
+                  >
+                    Filter
+                  </MenuButton>
+                  <MenuList>
+                    <MenuItem fontSize={"sm"}>Ascending</MenuItem>
+                    <MenuItem fontSize={"sm"}>Descending</MenuItem>
+                    <MenuItem fontSize={"sm"}>Recently Viewed</MenuItem>
+                    <MenuItem fontSize={"sm"}>Recently Added</MenuItem>
+                  </MenuList>
+                </Menu>
+              </Box>
+            </Box>
+          </VStack>
+          <NormalTable
+            emptyMessage={`We don't have any Sponers `}
+            tableHeadRow={tableHeadRow}
+            data={extractedArray}
+            isLoading={isLoading}
+          />
+        </Box>
+      </Box>
+    );
+  };
+  
+  export default OptiFiiExpenseDashboard;
+  
\ No newline at end of file
diff --git a/src/Routes/Nav.js b/src/Routes/Nav.js
index d41d977..f15c335 100644
--- a/src/Routes/Nav.js
+++ b/src/Routes/Nav.js
@@ -66,26 +66,22 @@ export const nav = [
     submenu: [
       {
         title: "Dashboard",
-        path: "/dashboard",
-        icon: TbSquareRoundedFilled,
+        path: "/optiFii-expense-dashboard",
         colorCode:"#70a1ff"
       },
       {
         title: "Wallet program",
         path: "/wallet-program",
-        icon: TbSquareRoundedFilled,
         colorCode:"#70a1ff"
       },
       {
         title: "Reimbursement request",
         path: "/reimbursement-request",
-        icon: TbSquareRoundedFilled,
         colorCode:"#7bed9f"
       },
       {
         title: "Advance expense request",
         path: "/advance-expense-request",
-        icon: TbSquareRoundedFilled,
         colorCode:"#7bed9f"
       },
     ],
diff --git a/src/Routes/Routes.js b/src/Routes/Routes.js
index 144a470..8a793df 100644
--- a/src/Routes/Routes.js
+++ b/src/Routes/Routes.js
@@ -15,6 +15,7 @@ import AdvanceExpenseRequest from "../Pages/OptiFiiExpense/AdvanceExpenseRequest
 import ManageDepartmentAndRoles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/ManageDepartmentAndRoles";
 import Department from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Department";
 import Roles from "../Pages/ManageHumanResource/ManageDepartmentAndRoles/Roles";
+import OptiFiiExpenseDashboard from "../Pages/OptiFiiExpense/OptiFiiExpenseDashboard";
 
 export const RouteLink = [
   
@@ -35,5 +36,6 @@ export const RouteLink = [
   { path: "/settings", Component: Settings },
   { path: "/department", Component: Department }, 
   { path: "/roles", Component: Roles }, 
+  { path: "/optiFii-expense-dashboard", Component: OptiFiiExpenseDashboard }, 
   
 ];