diff --git a/src/Components/DataTable/NormalTable.jsx b/src/Components/DataTable/NormalTable.jsx
index 43843c2..bf57644 100644
--- a/src/Components/DataTable/NormalTable.jsx
+++ b/src/Components/DataTable/NormalTable.jsx
@@ -63,9 +63,9 @@ const NormalTable = ({
         <EmptySearchList message={emptyMessage} />
       ) : (
         <Table size="sm">
-          <TableCaption p={total ? 0 : null}>
-            {total ? total : "Tanami v1.0.0"}
-          </TableCaption>
+          {/* <TableCaption p={total ? 0 : null}>
+            {total ? total : "Optifii v1.0.0"}
+          </TableCaption> */}
           <Thead bg="purple.100">
             <Tr>
               {showRadioButton && (
diff --git a/src/Layout/DefaultLayout.jsx b/src/Layout/DefaultLayout.jsx
index fbeaddf..d9e3c66 100644
--- a/src/Layout/DefaultLayout.jsx
+++ b/src/Layout/DefaultLayout.jsx
@@ -346,13 +346,12 @@ const DashboardLayout = ({ isOnline }) => {
                                 >
                                   {({ isActive }) => (
                                     <>
-                                      {SubIcon && (
+                                      {/* {SubIcon && (
                                         <SubIcon
-                                          fontSize={"8px"}
+                                          fontSize={"18px"}
                                           className="ms-2"
                                         />
-                                      )}
-                                      {/* Blue Dot when submenu is active */}
+                                      )} */}
                                       {isActive && (
                                         <Box
                                         as="span"
diff --git a/src/Pages/Dashboard/Dashbaord.jsx b/src/Pages/Dashboard/Dashbaord.jsx
index 9bdedc7..e3d0882 100644
--- a/src/Pages/Dashboard/Dashbaord.jsx
+++ b/src/Pages/Dashboard/Dashbaord.jsx
@@ -31,7 +31,6 @@ import React, { useContext, useState } from "react";
 import BlueCard from "../../Components/Cards/BlueCard";
 import { OPACITY_ON_LOAD } from "../../Layout/animations";
 import { HStack, Text, VStack, Icon } from "@chakra-ui/react";
-import { GaugeComponent } from "react-gauge-component";
 
 import {
   BsArrowsAngleExpand,
diff --git a/src/Pages/Onboarding/OnboardingFrame.jsx b/src/Pages/Onboarding/OnboardingFrame.jsx
index 633d6d5..61458e9 100644
--- a/src/Pages/Onboarding/OnboardingFrame.jsx
+++ b/src/Pages/Onboarding/OnboardingFrame.jsx
@@ -1,69 +1,115 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from "react";
 import {
-    Box, Text, Stepper, Step, StepIndicator, StepStatus, StepSeparator, useSteps,
-     StepTitle, Divider, Button, HStack, IconButton, Flex,
-    useDisclosure
-} from '@chakra-ui/react';
-import Header from './Header';
+  Box,
+  Text,
+  Stepper,
+  Step,
+  StepIndicator,
+  StepStatus,
+  StepSeparator,
+  useSteps,
+  StepTitle,
+  Divider,
+  Button,
+  HStack,
+  IconButton,
+  Flex,
+  useDisclosure,
+  Image,
+} from "@chakra-ui/react";
+import Header from "./Header";
 import onboarding_bg from "../../assets/onboarding_bg.webp";
-import { ArrowBackIcon, ArrowForwardIcon, CheckIcon, Icon } from '@chakra-ui/icons';
-import { FaUser, FaBuilding, FaClipboard, FaUserTie, FaBoxOpen } from 'react-icons/fa';
-import OnboardingYourDetails from './OnboardingYourDetails';
-import OnboardingAboutCompany from './OnboardingAboutCompany';
-import OnboardingAddCompanyDetails from './OnboardingAddCompanyDetails';
-import OnboardingDirectorDetails from './OnboardingDirectorDetails';
-import OnboardingSelectPackage from './OnboardingSelectPackage';
-import OnboardingSelectPackageModal from './OnboardingSelectPackageModal'; // Import your modal component
-import { OPACITY_ON_LOAD } from '../../Layout/animations';
-import { useSearchParams } from 'react-router-dom';
-
+import {
+  ArrowBackIcon,
+  ArrowForwardIcon,
+  CheckIcon,
+  Icon,
+} from "@chakra-ui/icons";
+import {
+  FaUser,
+  FaBuilding,
+  FaClipboard,
+  FaUserTie,
+  FaBoxOpen,
+} from "react-icons/fa";
+import OnboardingYourDetails from "./OnboardingYourDetails";
+import OnboardingAboutCompany from "./OnboardingAboutCompany";
+import OnboardingAddCompanyDetails from "./OnboardingAddCompanyDetails";
+import OnboardingDirectorDetails from "./OnboardingDirectorDetails";
+import OnboardingSelectPackage from "./OnboardingSelectPackage";
+import OnboardingSelectPackageModal from "./OnboardingSelectPackageModal"; // Import your modal component
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
+import { useSearchParams } from "react-router-dom";
+import company from "../../assets/company.png";
+import pfp from "../../assets/pfp.png";
 
 // Retrieve the active step from localStorage or set it to 0 if it doesn't exist
 // const initialStep = parseInt(localStorage.getItem("activeStep")) || 0;
 
 const OnboardingFrame = () => {
-
   // Create a searchParams instance
   const [searchParams] = useSearchParams();
-  const [ corpData, setCorpData ] = useState({})
+  const [corpData, setCorpData] = useState({});
 
   useEffect(() => {
     // Extract specific parameters
     if (searchParams) {
-        const codeCorporate = searchParams.get("code_corporate");
-        const codeCorporateId = searchParams.get("code_corporateId");
-        localStorage?.setItem('codeCorporate', codeCorporate)
-        localStorage?.setItem('codeCorporateId', codeCorporateId)        
+      const codeCorporate = searchParams.get("code_corporate");
+      const codeCorporateId = searchParams.get("code_corporateId");
+      localStorage?.setItem("codeCorporate", codeCorporate);
+      localStorage?.setItem("codeCorporateId", codeCorporateId);
     }
-  }, [searchParams])
+  }, [searchParams]);
 
   useEffect(() => {
     localStorage.setItem("corpData", JSON.stringify(corpData));
     console.log(corpData);
-  }, [corpData])
+  }, [corpData]);
 
-     // Modal state and disclosure hook
-     const { isOpen, onOpen, onClose } = useDisclosure();
+  // Modal state and disclosure hook
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
+  const steps = [
+    {
+      title: "Your details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaUser,
+      img: company,
+    },
+    {
+      title: "About Company",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaBuilding,
+      img: company,
+    },
+    {
+      title: "Company details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaClipboard,
+      img: company,
+    },
+    {
+      title: "Director details",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaUserTie,
+      img: pfp,
+    },
+    {
+      title: "Select package",
+      description: "Lorem ipsum dolor sit amet dolor",
+      icon: FaBoxOpen,
+      img: company,
+    },
+  ];
 
-       
-    const steps = [
-        { title: 'Your details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUser },
-        { title: 'About Company', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBuilding },
-        { title: 'Company details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaClipboard },
-        { title: 'Director details', description: 'Lorem ipsum dolor sit amet dolor', icon: FaUserTie },
-        { title: 'Select package', description: 'Lorem ipsum dolor sit amet dolor', icon: FaBoxOpen },
-    ];
-
-
-// Stepper configuration
-const { activeStep, setActiveStep } = useSteps({
+  // Stepper configuration
+  const { activeStep, setActiveStep } = useSteps({
     index: 0, // Initialize the active step from localStorage or 0
     count: steps.length,
   });
 
-// Function to handle the "Next" button click
-const handleNext = () => {
+  // Function to handle the "Next" button click
+  const handleNext = () => {
     if (activeStep === steps.length - 1) {
       // If it's the last step, open the modal
       onOpen();
@@ -71,175 +117,216 @@ const handleNext = () => {
       // Otherwise, go to the next step
       const nextStep = activeStep + 1;
       setActiveStep(nextStep);
-  
+
       // Store the new active step in localStorage
       localStorage.setItem("activeStep", nextStep);
     }
   };
 
-  
+  // Array of components for each step
+  const stepComponents = [
+    <OnboardingYourDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingAboutCompany
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingAddCompanyDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingDirectorDetails
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+    <OnboardingSelectPackage
+      corpData={corpData}
+      setCorpData={setCorpData}
+      setActiveStep={setActiveStep}
+      activeStep={activeStep}
+      steps={steps}
+      handleNext={handleNext}
+    />,
+  ];
 
-    // Array of components for each step
-    const stepComponents = [
-        <OnboardingYourDetails corpData={corpData} setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingAboutCompany corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingAddCompanyDetails corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingDirectorDetails corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />,
-        <OnboardingSelectPackage corpData={corpData}  setCorpData={setCorpData} setActiveStep={setActiveStep} activeStep={activeStep} steps={steps} handleNext={handleNext}  />
-    ];
-
- 
-
-    return (
-        <Box>
-            {/* Onboarding content */}
-            <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
-                <Header />
-                <Box
-                    w={'100%'}
-                    minH="calc(100vh - 62px)"   
-                    bgImage={`url(${onboarding_bg})`}
-                    bgSize={'cover'}
-                    bgPosition={'center'}
-                    position={'relative'}
-                    px={6}
-                    display={"flex"}
-                    gap={"6"}
-                    alignItems={"start"}
-                    _before={{
-                        content: '""',
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        height: '100%',
-                        bg: 'rgba(0, 0, 0, 0.3)',
-                        zIndex: 1,
-                    }}
+  return (
+    <Box>
+      {/* Onboarding content */}
+      <Box {...OPACITY_ON_LOAD} overflowX={"auto"}>
+        <Header />
+        <Box
+          w={"100%"}
+          minH="calc(100vh - 62px)"
+          bgImage={`url(${onboarding_bg})`}
+          bgSize={"cover"}
+          bgPosition={"center"}
+          position={"relative"}
+          px={6}
+          display={"flex"}
+          gap={"6"}
+          alignItems={"start"}
+          _before={{
+            content: '""',
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            bg: "rgba(0, 0, 0, 0.3)",
+            zIndex: 1,
+          }}
+        >
+          {/* Stepper Box */}
+          <Box
+            w={"100%"}
+            my={5}
+            boxShadow={"md"}
+            maxW={"350px"}
+            zIndex={2}
+            bg={"#fff"}
+            py={6}
+            px={4}
+            borderRadius={"md"}
+            maxH={"82.9vh"}
+            overflowY={"auto"}
+            sx={{
+              /* Custom scrollbar styling */
+              "&::-webkit-scrollbar": {
+                width: "6px",
+              },
+              "&::-webkit-scrollbar-thumb": {
+                backgroundColor: "#6311CB",
+                borderRadius: "6px",
+              },
+              "&::-webkit-scrollbar-track": {
+                backgroundColor: "#F6F0FF",
+              },
+            }}
+          >
+            <Box>
+              <Text color={"#49475A"} fontWeight={500} fontSize={"sm"}>
+                Lorem ipsum dolor sit amet, adipiscing elit.
+              </Text>
+              <Divider />
+              <Box>
+                <Stepper
+                  index={activeStep}
+                  orientation="vertical"
+                  h="400"
+                  gap="0"
+                  my={"5"}
+                  sx={{ "--stepper-accent-color": "#6311CB" }}
                 >
-                    {/* Stepper Box */}
-                    <Box
-                        w={'100%'}
-                        my={5}
-                        boxShadow={'md'}
-                        maxW={"350px"}
-                        zIndex={2}
-                        bg={'#fff'}
-                        py={6}
-                        px={4}
-                        borderRadius={'md'}
-                        maxH={"82.9vh"}
-                        overflowY={"auto"}
-                        sx={{
-                            /* Custom scrollbar styling */
-                            '&::-webkit-scrollbar': {
-                              width: '6px',
-                            },
-                            '&::-webkit-scrollbar-thumb': {
-                              backgroundColor: '#6311CB',
-                              borderRadius: '6px',
-                            },
-                            '&::-webkit-scrollbar-track': {
-                              backgroundColor: '#F6F0FF',
-                            },
-                          }}
-                    >
-                        <Box>
-                            <Text color={'#49475A'} fontWeight={500} fontSize={'sm'}>
-                                Lorem ipsum dolor sit amet, adipiscing elit.
-                            </Text>
-                            <Divider />
-                            <Box>
-                                <Stepper
-                                    index={activeStep}
-                                    orientation="vertical"
-                                    h="400"
-                                    gap="0"
-                                    my={"5"}
-                                    sx={{ '--stepper-accent-color': '#6311CB' }}
-                                >
-                                    {steps.map((step, index) => (
-                                        <Step key={index}>
-                                            <StepIndicator>
-                                                <StepStatus
-                                                    complete={<CheckIcon boxSize="16px" />}
-                                                    incomplete={<Icon as={step.icon} color={"purple.400"} boxSize="16px" />}
-                                                    active={<Icon as={step.icon} color={"purple.500"} boxSize="16px" />}
-                                                />
-                                            </StepIndicator>
-                                            <Box flexShrink="0" ml={4}>
-                                                <StepTitle
-                                                    fontWeight={activeStep === index ? "600" : "500"}
-                                                    fontSize={activeStep === index ? "md" : "sm"}
-                                                    mb={1}
-                                                >
-                                                    {step.title}
-                                                </StepTitle>
-                                                <Text fontSize="xs" color="gray.500">
-                                                    {step.description}
-                                                </Text>
-                                            </Box>
-                                            <StepSeparator
-                                                borderColor={activeStep > index ? "purple.500" : "purple.300"}
-                                                borderWidth={1}
-                                            />
-                                        </Step>
-                                    ))}
-                                </Stepper>
-                            </Box>
-                        </Box>
-                    </Box>
+                  {steps.map((step, index) => (
+                    <Step key={index}>
+                      <StepIndicator>
+                        <StepStatus
+                          complete={<CheckIcon boxSize="16px" />}
+                          incomplete={
+                            <Image
+                              src={step.img}
+                              color={"purple.400"}
+                              boxSize="16px"
+                            />
+                          }
+                          active={
+                            <Icon
+                              as={step.icon}
+                              color={"purple.500"}
+                              boxSize="16px"
+                            />
+                          }
+                        />
+                      </StepIndicator>
+                      <Box flexShrink="0" ml={4}>
+                        <StepTitle
+                          fontWeight={activeStep === index ? "600" : "500"}
+                          fontSize={activeStep === index ? "md" : "sm"}
+                          mb={1}
+                        >
+                          {step.title}
+                        </StepTitle>
+                        <Text fontSize="xs" color="gray.500">
+                          {step.description}
+                        </Text>
+                      </Box>
+                      <StepSeparator
+                        borderColor={
+                          activeStep > index ? "purple.500" : "purple.300"
+                        }
+                        borderWidth={1}
+                      />
+                    </Step>
+                  ))}
+                </Stepper>
+              </Box>
+            </Box>
+          </Box>
 
-                    {/* Content Box */}
-                    <Box
-                        w={'100%'}
-                        bg={'#fff'}
-                        p={6}
-                        borderRadius={'md'}
-                        my={5}
-                        boxShadow={'md'}
-                        zIndex={2}
-                        maxH="calc(82vh - 0px)"
-                        overflowY={"auto"}
-                        sx={{
-                            /* Custom scrollbar styling */
-                            '&::-webkit-scrollbar': {
-                              width: '6px',
-                            },
-                            '&::-webkit-scrollbar-thumb': {
-                              backgroundColor: '#6311CB',
-                              borderRadius: '6px',
-                            },
-                            '&::-webkit-scrollbar-track': {
-                              backgroundColor: '#F6F0FF',
-                            },
-                          }}
-                    >
-                        <HStack  justifyContent={"end"}>
+          {/* Content Box */}
+          <Box
+            w={"100%"}
+            bg={"#fff"}
+            p={6}
+            borderRadius={"md"}
+            my={5}
+            boxShadow={"md"}
+            zIndex={2}
+            maxH="calc(82vh - 0px)"
+            overflowY={"auto"}
+            sx={{
+              /* Custom scrollbar styling */
+              "&::-webkit-scrollbar": {
+                width: "6px",
+              },
+              "&::-webkit-scrollbar-thumb": {
+                backgroundColor: "#6311CB",
+                borderRadius: "6px",
+              },
+              "&::-webkit-scrollbar-track": {
+                backgroundColor: "#F6F0FF",
+              },
+            }}
+          >
+            <HStack justifyContent={"end"}>
+              {/* Step Indicator (Horizontal) */}
+              <Flex justify="center" align="center" gap={2} mt={4}>
+                {steps.map((_, index) => (
+                  <Box
+                    key={index}
+                    h="4px"
+                    w="20px"
+                    bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
+                    borderRadius="full"
+                  />
+                ))}
+              </Flex>
+            </HStack>
 
-                            {/* Step Indicator (Horizontal) */}
-                            <Flex justify="center" align="center" gap={2} mt={4}>
-                                {steps.map((_, index) => (
-                                    <Box
-                                        key={index}
-                                        h="4px"
-                                        w="20px"
-                                        bg={index <= activeStep ? "#3725EA" : "#e9e7fd"}
-                                        borderRadius="full"
-                                    />
-                                ))}
-                            </Flex>
-                        </HStack>
+            <Box>
+              <Box w={{ base: "70%", lg: "92%" }} mx={"auto"}>
+                {/* Render the current step component */}
+                {stepComponents[activeStep]}
 
-                        <Box>
-                            <Box
-                                w={{ base: "70%", lg: "92%" }}
-                                mx={"auto"}
-                            >
-                                {/* Render the current step component */}
-                                {stepComponents[activeStep]}
-
-                                {/* <HStack mt={6}>
+                {/* <HStack mt={6}>
                                     <IconButton
                                         aria-label="Back"
                                         icon={<ArrowBackIcon />}
@@ -267,16 +354,16 @@ const handleNext = () => {
                                         {activeStep === steps.length - 1 ? 'Next step' : 'Next step'}
                                     </Button>
                                 </HStack> */}
-                            </Box>
-                        </Box>
-                    </Box>
-                </Box>
+              </Box>
             </Box>
-
-            {/* Modal for final step */}
-            <OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
+          </Box>
         </Box>
-    );
+      </Box>
+
+      {/* Modal for final step */}
+      <OnboardingSelectPackageModal isOpen={isOpen} onClose={onClose} />
+    </Box>
+  );
 };
 
 export default OnboardingFrame;
diff --git a/src/assets/company.png b/src/assets/company.png
new file mode 100644
index 0000000..1bb6e74
Binary files /dev/null and b/src/assets/company.png differ
diff --git a/src/assets/pfp.png b/src/assets/pfp.png
new file mode 100644
index 0000000..bc5f916
Binary files /dev/null and b/src/assets/pfp.png differ