diff --git a/src/Components/Cards/BlueCard.jsx b/src/Components/Cards/BlueCard.jsx
index e719eee..9b0894c 100644
--- a/src/Components/Cards/BlueCard.jsx
+++ b/src/Components/Cards/BlueCard.jsx
@@ -1,13 +1,16 @@
-import { Box, Stack, Text, Link, Badge } from '@chakra-ui/react';
-import React from 'react';
+import { Box, Stack, Text, Link } from '@chakra-ui/react';
+import React, { useState } from 'react'; // Import useState
 import { MdGroups } from 'react-icons/md';
+import EmployeesAddModal from '../../Pages/ManageHumanResource/EmployeesAddModal';
+
+function BlueCard({ blueCardData }) {
+    const [isOpen, setIsOpen] = useState(false); // State to manage modal visibility
+
+    const openModal = () => setIsOpen(true); // Function to open the modal
+    const closeModal = () => setIsOpen(false); // Function to close the modal
 
-function BlueCard({blueCardData}) {
     return (
-        <Box
-            backgroundColor={blueCardData.backgroundColor}
-            borderRadius="xl"
-        >
+        <Box backgroundColor={blueCardData.backgroundColor} borderRadius="xl">
             <Box bg="#fff" borderRadius="xl" p={4} h="115px">
                 <Stack direction={["column", "row"]} color={blueCardData.backgroundColor}>
                     <Text as="span">
@@ -17,7 +20,7 @@ function BlueCard({blueCardData}) {
                         {blueCardData.title.toUpperCase()}
                     </Text>
                 </Stack>
-                <Text  fontSize="xl" fontWeight={500} mt={2} mb={0}>
+                <Text fontSize="xl" fontWeight={500} mt={2} mb={0}>
                     {blueCardData.count}
                 </Text>
             </Box>
@@ -31,9 +34,12 @@ function BlueCard({blueCardData}) {
                     <MdGroups />
                 </Text>
                 <Text fontSize="sm" m={0} py={2}>
-                    <Link mb={0}>{blueCardData.buttonText}</Link>
+                    <Link mb={0} onClick={openModal}>{blueCardData.buttonText}</Link>
                 </Text>
             </Stack>
+            {blueCardData.title === "Total EMPLOYEES" && (
+                <EmployeesAddModal isOpen={isOpen} onClose={closeModal} />
+            )}
         </Box>
     );
 }
diff --git a/src/Pages/Onboarding/OnboardingAboutCompany.jsx b/src/Pages/Onboarding/OnboardingAboutCompany.jsx
index 6cae1a3..07611d3 100644
--- a/src/Pages/Onboarding/OnboardingAboutCompany.jsx
+++ b/src/Pages/Onboarding/OnboardingAboutCompany.jsx
@@ -38,7 +38,7 @@ const validationSchema = Yup.object().shape({
   mobileNumber_corporate: Yup.string()
     .matches(/^\d{10}$/, "Phone number must be 10 digits")
     .required("Phone number is required"),
-    logo_path_file_name:Yup.mixed().required('Company logo is required'),
+  logo_path_file_name: Yup.mixed().required('Company logo is required'),
 });
 
 const OnboardingAboutCompany = ({
@@ -85,15 +85,12 @@ const OnboardingAboutCompany = ({
   };
 
   const onSubmit = async (data) => {
-        setCorpData({ ...corpData, ...data });
+    setCorpData({ ...corpData, ...data });
     handleNext();
     // Handle your submit logic here
   };
 
 
-
-
-
   const handleFileUpload = async (file, setPreview) => {
     setIsLoading(true)
     console.log('File uploaded:', file);
@@ -103,23 +100,23 @@ const OnboardingAboutCompany = ({
     const code = localStorage?.getItem("codeCorporate");
     try {
       const res = await sendFile({ data: formData, code }); // Upload file to server
-        console.log(res);
+      console.log(res);
       if (res?.data?.data) {
         // Assuming res.data.data contains the file URL or some ID
-        setCorpData({ ...corpData, logo_path_file_name:res?.data?.data });
+        setCorpData({ ...corpData, logo_path_file_name: res?.data?.data });
         setValue("logo_path_file_name", res?.data?.data);
-        console.log(errors); 
+        console.log(errors);
         setPreview(res?.data?.data)
         toast({
           render: () => <ToastBox message={res?.data?.message} />,
         });
         setIsLoading(false);
-      } else if (res?.error?.data?.message){
+      } else if (res?.error?.data?.message) {
         toast({
           render: () => <ToastBox status={'error'} message={res?.error?.data?.message} />,
         });
-        
-      } else if(res?.error){
+
+      } else if (res?.error) {
         toast({
           render: () => <ToastBox status={'error'} message={"Somthing went wrong"} />,
         });
@@ -175,9 +172,9 @@ const OnboardingAboutCompany = ({
 
         {/* Industry Select Field */}
         <FormControl isRequired mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Industry
-          </Text>
+          </FormLabel>
           <InputGroup>
             <Select
               placeholder="Select industry"
@@ -228,156 +225,55 @@ const OnboardingAboutCompany = ({
           </FormErrorMessage>
         </FormControl>
 
-        {/* Upload Company Logo Field */}
-        {/* <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
-            Upload Company Logo
+        <FileUploader
+          label="Upload Company Logo"
+          maxFileSize={3 * 1024 * 1024}  // Max 3MB size
+          onFileUpload={handleFileUpload}
+
+        > {errors.logo_path_file_name?.message && (
+          <Text color="red" fontWeight={500} fontSize="xs">
+            {errors.logo_path_file_name?.message}
           </Text>
-          <Box
-            my={2}
-            position="relative"
-            onClick={() =>
-              document.getElementById("company-logo-file-input").click()
-            }
+        )}
+
+        </FileUploader>
+
+        <HStack mt={6}>
+          <IconButton
+            aria-label="Back"
+            icon={<ArrowBackIcon />}
+            variant="outline"
+            size="sm"
+            px={8}
+            _hover={{ opacity: 0.8 }}
+            color={"#d0b8ef"}
+            border={"1px solid #d0b8ef"}
+            isDisabled={activeStep === 0}
+            onClick={() => setActiveStep(activeStep - 1)}
+          />
+
+          <Button
+            bg={"#6311CB"}
+            color={"#fff"}
+            fontSize={"xs"}
+            fontWeight={500}
+            size="sm"
+            _hover={{ opacity: 0.8 }}
+            rightIcon={<ArrowForwardIcon />}
+            w={"100%"}
+            type="submit"
+          // isLoading={isLoading}
           >
-            <VStack
-              border={"1px dashed #D0D5DD"}
-              boxShadow={"md"}
-              borderRadius={"md"}
-              bg={"#faf8fd"}
-              p={4}
-              h={"28"}
-              justifyContent={"center"}
-              cursor="pointer"
-            >
-              <SlCloudUpload color={"#191D23"} size={30} />
-              <Text
-                color={"#191D23"}
-                fontWeight={"500"}
-                fontSize={"sm"}
-                mt={"2"}
-                mb={0}
-              >
-                Drag and drop files here or{" "}
-                <Text as="span" textDecoration="underline">
-                  Choose file
-                </Text>
-              </Text>
-            </VStack>
-            <input
-              type="file"
-              id="company-logo-file-input"
-              style={{ display: "none" }} // Hide the file input
-              onChange={(e) => {
-                handleFileChange(e); // Handle file input
-              }}
-            />
+            {activeStep === steps.length - 1 ? "Next step" : "Next step"}
+          </Button>
+        </HStack>
 
-            {fileName && (
-              <Text fontSize="sm" mt={2}>
-                Uploaded file: {fileName}
-              </Text>
-            )}
-          </Box>
-
-          {errors.logo_path_file_name && (
-            <Text color="red" fontWeight={500} fontSize="xs">
-              {errors.logo_path_file_name.message}
-            </Text>
-          )}
-
-          <HStack justifyContent={"space-between"}>
-            <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
-              Supported formats- jpg, png, svg
-            </Text>
-            <Text color={"#C3C3C3"} fontSize={"xs"} fontWeight={400} mb={1}>
-              Maximum size - 20MB
-            </Text>
-          </HStack>
-
-          <HStack mt={6}>
-            <IconButton
-              aria-label="Back"
-              icon={<ArrowBackIcon />}
-              variant="outline"
-              size="sm"
-              px={8}
-              _hover={{ opacity: 0.8 }}
-              color={"#d0b8ef"}
-              border={"1px solid #d0b8ef"}
-              isDisabled={activeStep === 0}
-              onClick={() => setActiveStep(activeStep - 1)}
-            />
-
-            <Button
-              bg={"#6311CB"}
-              color={"#fff"}
-              fontSize={"xs"}
-              fontWeight={500}
-              size="sm"
-              _hover={{ opacity: 0.8 }}
-              rightIcon={<ArrowForwardIcon />}
-              w={"100%"}
-              type="submit"
-              isLoading={isLoading}
-            >
-              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
-            </Button>
-          </HStack>
-        </Box> */}
-
-
-
-
-      <FileUploader 
-        label="Upload Company Logo"
-        maxFileSize={3 * 1024 * 1024}  // Max 3MB size
-        onFileUpload={handleFileUpload}
-
-      > {errors.logo_path_file_name?.message && (
-        <Text color="red" fontWeight={500} fontSize="xs">
-          {errors.logo_path_file_name?.message}
-        </Text>
-      )}
-
-      </FileUploader>
-
-              <HStack mt={6}>
-            <IconButton
-              aria-label="Back"
-              icon={<ArrowBackIcon />}
-              variant="outline"
-              size="sm"
-              px={8}
-              _hover={{ opacity: 0.8 }}
-              color={"#d0b8ef"}
-              border={"1px solid #d0b8ef"}
-              isDisabled={activeStep === 0}
-              onClick={() => setActiveStep(activeStep - 1)}
-            />
-
-            <Button
-              bg={"#6311CB"}
-              color={"#fff"}
-              fontSize={"xs"}
-              fontWeight={500}
-              size="sm"
-              _hover={{ opacity: 0.8 }}
-              rightIcon={<ArrowForwardIcon />}
-              w={"100%"}
-              type="submit"
-              // isLoading={isLoading}
-            >
-              {activeStep === steps.length - 1 ? "Next step" : "Next step"}
-            </Button>
-          </HStack>
-        
 
       </Box>
 
-    {/* Display the loading spinner */}
-    {isLoading && (
-        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'}  position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
+      {/* Display the loading spinner */}
+      {isLoading && (
+        <Box border={'1px solid #6310CB'} px={4} py={2} rounded={'md'} shadow={'md'} as="span" bg={'#fff'} position={'fixed'} top={69} left={'40%'} display="flex" justifyContent="center" alignItems="center" >
           <Text as={'span'} fontWeight={600} fontSize={'sm'}>Uploading please wait...</Text>
         </Box>
       )}
diff --git a/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx b/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
index 0cc639a..ed8b032 100644
--- a/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
+++ b/src/Pages/Onboarding/OnboardingAddCompanyDetails.jsx
@@ -225,9 +225,9 @@ const OnboardingAddCompanyDetails = ({
 
         {/* Company PAN Field */}
         <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Company PAN
-          </Text>
+          </FormLabel>
           <Input
             type='text'
             border="1px solid #e2e8f0"
@@ -241,9 +241,9 @@ const OnboardingAddCompanyDetails = ({
 
         {/* Company GST Number */}
         <Box mb={3}>
-          <Text color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
+          <FormLabel color={"#344054"} fontSize={"xs"} fontWeight={500} mb={1}>
             Company GST number
-          </Text>
+          </FormLabel>
           <Input
             type='text'
             border="1px solid #e2e8f0"
diff --git a/src/Pages/Report/Report.jsx b/src/Pages/Report/Report.jsx
index 51fd112..376de26 100644
--- a/src/Pages/Report/Report.jsx
+++ b/src/Pages/Report/Report.jsx
@@ -231,11 +231,11 @@ const Report = () => {
           </Box>
         </HStack>
       <HStack w={"100%"} mb={4}>
-          <Box bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
-            <ApexLine />
+          <Box h={300} bg={"#fff"} me={2} rounded={6} w={"65%"} pb={0} p={4} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            {/* <ApexLine /> */}
           </Box>
-          <Box  bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
-            <PieCharts />
+          <Box  h={300} bg={"#fff"} rounded={6} w={"35%"} p={4} display={"flex"} justifyContent={"center"} boxShadow={"rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"}>
+            {/* <PieCharts /> */}
           </Box>
         </HStack>
       <Box