diff --git a/src/App.css b/src/App.css
index 6c2c0db..3ce3ce7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -168,13 +168,14 @@
 
 .table-scroll::-webkit-scrollbar{
   width: 2px !important;
-  height: 10px !important;
+  height: 5px !important;
 }
 
 /* Total scrollbar width */
 ::-webkit-scrollbar {
   width: 2px;
   height: 12px;
+  
 }
 
 /* The track (background) of the scrollbar */
@@ -185,14 +186,14 @@
 
 /* The draggable scrollbar handle */
 ::-webkit-scrollbar-thumb {
-  background: #0041184f;
+  background: #3f2a7900;
   border-radius: 0px;
   cursor: grabbing;
 }
 
 /* On hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: #0041189a;
+  background: #3f2a799a;
 }
 
 
diff --git a/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx b/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx
index bc3e5db..3d6bcb4 100644
--- a/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx
+++ b/src/Pages/RegisteredCorporate/RegisteredCorporate.jsx
@@ -28,7 +28,7 @@ import RegisteredCorporateAddNewModal from "./RegisteredCorporateAddNewModal";
 import { useNavigate } from "react-router-dom";
 import { useGetAllCorpQuery } from "../../Services/register.corporate.service";
 
-const getStatusColor = (status) => {
+export const getStatusColor = (status) => {
   switch (status) {
     case 1:
       return { bg: "blue.100", text: "blue.700", label: "Requested" };
diff --git a/src/Pages/ViewCorporates/ViewCorporates.jsx b/src/Pages/ViewCorporates/ViewCorporates.jsx
index 47fafd1..5f1536c 100644
--- a/src/Pages/ViewCorporates/ViewCorporates.jsx
+++ b/src/Pages/ViewCorporates/ViewCorporates.jsx
@@ -17,7 +17,10 @@ import {
   List,
   ListIcon,
   ListItem,
+  Spinner,
   Tag,
+  TagLabel,
+  TagLeftIcon,
   Text,
   useDisclosure,
   VStack,
@@ -43,6 +46,73 @@ import pancard from "../../assets/pancard.svg";
 import gift from "../../assets/gift.svg";
 import { useNavigate, useParams } from "react-router-dom";
 import { useGetViewIdQuery } from "../../Services/register.corporate.service";
+import { getStatusColor } from "../RegisteredCorporate/RegisteredCorporate";
+
+
+
+
+const DocBox = ({title, imgLink}) =>{
+  return(<Box
+    // key={item.id}
+    bg={"#F4F4F4"}
+    p={2}
+    rounded={"md"}
+    maxW={300}
+    
+  >
+    <Box  overflow={'hidden'} shadow={"md"} rounded={"md"}>
+      <Box rounded={"md"} w="100%">
+        <Image
+          src={
+            import.meta.env.VITE_IMAGE_URL +
+            imgLink
+          }
+          alt={title}
+          width={300}
+          height={150}
+          objectFit="cover"
+          roundedTop={"md"}
+        />
+      </Box>
+      <HStack
+        justifyContent={"space-between"}
+        bg={"#FFFFFF"}
+        p={2}
+        roundedBottom={"md"}
+      >
+        <Box>
+          <Text
+            color={"#1E1E1E"}
+            fontWeight={500}
+            fontSize={"sm"}
+            mb={2}
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              width: "100%", // or any specific width
+            }}
+          >
+            {title}
+          </Text>
+          <Text
+            color={"#777777"}
+            fontWeight={400}
+            fontSize={"xs"}
+            mb={0}
+          >
+            489kb
+          </Text>
+        </Box>
+        <BsDownload
+          color={"#6311CB"}
+          fontSize={"16px"}
+          cursor={"pointer"}
+        />
+      </HStack>
+    </Box>
+  </Box>)
+}
 
 const ViewCorporates = () => {
   const navigate = useNavigate();
@@ -65,9 +135,6 @@ const ViewCorporates = () => {
     error,
   } = useGetViewIdQuery({ id });
 
-  console.log(data?.data);
-
-
   const panCardData = [
     { id: 1, src: pancard, title: "Wdipl PAN. pdf", size: "201 kb" },
     { id: 2, src: pancard, title: "Corporate PAN. pdf", size: "310 kb" },
@@ -81,7 +148,7 @@ const ViewCorporates = () => {
     return () => clearTimeout(timer);
   }, []);
 
-  console.log(empData);
+  // console.log(empData);
 
   // Table headers
   const tableHeadRow = [
@@ -186,24 +253,26 @@ const ViewCorporates = () => {
   }));
 
   return (
-    (data && <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
-      <MiniHeader backButton={true} title={""} />
+    corporateLoading ?<Box display={'flex'} justifyContent={'center'} alignItems={'center'} w={'100%'} h={'100vh'}><Spinner color="purple.600"/></Box> :(
+      <Box as={"span"} {...OPACITY_ON_LOAD} p={4} pb={3} overflowX={"scroll"}>
+        <MiniHeader backButton={true} title={""} />
 
-      <Box roundedTop={"lg"} shadow={"md"} p={4} bg={"#fff"}>
-        <HStack justifyContent={"space-between"}>
-          <Box>
-            <HStack spacing={4} alignItems={"start"}>
-              <BsBuildingsFill />
-              <VStack spacing={"1"} alignItems={"start"}>
-                <Text mb={0} fontSize={"md"} fontWeight={500}>
-                  Website developers India
-                </Text>
-                <Text fontSize={"sm"} color={"#999999"}>
-                  Limited Liability Partnership (LLP)
-                </Text>
-              </VStack>
+        <Box roundedTop={"lg"} shadow={"md"} p={4} bg={"#fff"}>
+          <HStack justifyContent={"space-between"}>
+            <Box>
+              <HStack spacing={4} alignItems={"start"}>
+                <BsBuildingsFill />
+                <VStack spacing={"1"} alignItems={"start"}>
+                  <Text mb={0} fontSize={"md"} fontWeight={500}>
+                    {data?.data?.corporate_name}
+                  </Text>
+                  <Text fontSize={"sm"} color={"#999999"}>
+                    {/* Limited Liability Partnership (LLP) */}
+                    {data?.data?.corporate_code}
+                  </Text>
+                </VStack>
 
-              {/* <Badge
+                {/* <Badge
                 bg={"#ebf8ef"}
                 color={"#00A438"}
                 fontSize={"xs"}
@@ -219,542 +288,506 @@ const ViewCorporates = () => {
 
                 
               </Badge> */}
-              <Tag bg={"green.100"} size="sm">
-                <GoDotFill color={"#00A438"} />{" "}
-                <Text
-                  ms={1}
-                  bgGradient="linear(to-l, green.700, green.600)"
-                  bgClip="text"
-                  fontSize={"xs"}
-                  as={"span"}
-                  fontWeight={600}
+                <Tag
+                  bg={getStatusColor(data?.data?.corporate_status_xid)?.bg}
+                  size="sm"
                 >
-                  Registered
-                </Text>
-              </Tag>
-            </HStack>
-          </Box>
+                  <TagLeftIcon
+                    boxSize="12px"
+                    as={GoDotFill}
+                    color={
+                      getStatusColor(data?.data?.corporate_status_xid)?.text
+                    }
+                  />
+                  <TagLabel>
+                    <Text
+                      // ms={1}
+                      bgGradient={`linear(to-l, ${
+                        getStatusColor(data?.data?.corporate_status_xid)?.text
+                      }, ${
+                        getStatusColor(data?.data?.corporate_status_xid)?.text
+                      })`}
+                      bgClip="text"
+                      fontSize="xs"
+                      as="span"
+                      fontWeight={600}
+                    >
+                      {getStatusColor(data?.data?.corporate_status_xid)?.label}
+                    </Text>
+                  </TagLabel>
+                </Tag>
+              </HStack>
+            </Box>
 
-          <HStack>
-            <PrimaryButton
-              title={"Edit"}
-              size={"sm"}
-              leftIcon={<MdOutlineModeEdit fontSize={"xs"} color="#fff" />}
-            />
-            <SecondaryButton
-              title={"Archive"}
-              size={"sm"}
-              leftIcon={<LuArchive fontSize={"xs"} />}
-            />
+            <HStack>
+              <PrimaryButton
+                title={"Edit"}
+                size={"sm"}
+                leftIcon={<MdOutlineModeEdit fontSize={"xs"} color="#fff" />}
+              />
+              <SecondaryButton
+                title={"Archive"}
+                size={"sm"}
+                leftIcon={<LuArchive fontSize={"xs"} />}
+              />
+            </HStack>
           </HStack>
-        </HStack>
-        <Divider />
-      </Box>
-      {/* for pink bg */}
-      <Box bg={"#f4eefb"} py={2} px={4}>
-        <HStack>
-          <FiUser fontSize={"xs"} color="#6311CB" />
-          <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
-            User details
+          <Divider />
+        </Box>
+        {/* for pink bg */}
+        <Box bg={"#f4eefb"} py={2} px={4}>
+          <HStack>
+            <FiUser fontSize={"xs"} color="#6311CB" />
+            <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
+              User details
+            </Text>
+          </HStack>
+        </Box>
+        <Box shadow={"md"} p={4} bg={"#fff"}>
+          <HStack spacing={12}>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Full Name
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.entity_name}
+              </Text>
+            </VStack>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Email address
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.emailAddress}
+              </Text>
+            </VStack>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Phone number
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.mobileNumber}
+              </Text>
+            </VStack>
+          </HStack>
+        </Box>
+        {/* for pink bg */}
+        <Box bg={"#f4eefb"} py={2} px={4}>
+          <HStack>
+            <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
+            <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
+              About company
+            </Text>
+          </HStack>
+        </Box>
+        <Box shadow={"md"} p={4} bg={"#fff"}>
+          <HStack spacing={12}>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Company Name
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.corporate_name}
+              </Text>
+            </VStack>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Industry
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.industry_xid}
+              </Text>
+            </VStack>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                type
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.corporate_type_xid}
+              </Text>
+            </VStack>
+          </HStack>
+        </Box>
+        {/* for pink bg */}
+        <Box bg={"#f4eefb"} py={2} px={4}>
+          <HStack>
+            <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
+            <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
+              Company Details
+            </Text>
+          </HStack>
+        </Box>
+        <Box shadow={"md"} p={4} bg={"#fff"}>
+          <HStack spacing={12} mb={6}>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                CIN
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                
+              {data?.data?.other_details?.cin_number}
+              </Text>
+            </VStack>
+            <VStack alignItems={"start"}>
+              <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
+                Company GST number
+              </Text>
+              <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
+                {data?.data?.other_details?.gst_number}
+              </Text>
+            </VStack>
+          </HStack>
+          <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
+            Documentsss
           </Text>
-        </HStack>
-      </Box>
-      <Box shadow={"md"} p={4} bg={"#fff"}>
-        <HStack spacing={12}>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Full Name
+
+          <HStack spacing={4} wrap="wrap">
+            
+<DocBox title={data?.data?.other_details?.corporate_pancard_file_path_name?.split("/").pop()} imgLink={import.meta.env.VITE_IMAGE_URL +
+                            data?.data?.other_details?.corporate_pancard_file_path_name} />
+            
+                            <DocBox title={data?.data?.other_details?.corporate_pancard_file_path_name?.split("/").pop()} imgLink={import.meta.env.VITE_IMAGE_URL +
+                                                        data?.data?.other_details?.corporate_pancard_file_path_name} />
+
+
+
+
+          </HStack>
+
+
+        </Box>
+
+        {/* for pink bg */}
+        <Box bg={"#f4eefb"} py={2} px={4}>
+          <HStack>
+            <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
+            <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
+              Director Details
             </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              {data?.data?.entity_name}
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Email address
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-            {data?.data?.emailAddress}
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Phone number
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              {data?.data?.mobileNumber}
-            </Text>
-          </VStack>
-        </HStack>
-      </Box>
-      {/* for pink bg */}
-      <Box bg={"#f4eefb"} py={2} px={4}>
-        <HStack>
-          <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
-          <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
-            About company
-          </Text>
-        </HStack>
-      </Box>
-      <Box shadow={"md"} p={4} bg={"#fff"}>
-        <HStack spacing={12}>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Company Name
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              {data?.data?.corporate_name}
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Industry
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              {data?.data?.industry_xid}
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              type
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              {data?.data?.corporate_type_xid}
-            </Text>
-          </VStack>
-        </HStack>
-      </Box>
-      {/* for pink bg */}
-      <Box bg={"#f4eefb"} py={2} px={4}>
-        <HStack>
-          <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
-          <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
-            Company Details
-          </Text>
-        </HStack>
-      </Box>
-      <Box shadow={"md"} p={4} bg={"#fff"}>
-        <HStack spacing={12} mb={6}>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              CIN
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              WDIPL
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Company GST number
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              Fintech
-            </Text>
-          </VStack>
-        </HStack>
-        <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
-          Documents
-        </Text>
-        <HStack spacing={4} wrap="wrap">
-          {panCardData.map((item) => (
-            <Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
-              <Box p={2}>
-                <Box w="100%">
-                  <Image
-                    src={item.src}
-                    alt={item.title}
-                    width="100%"
-                    objectFit="cover"
-                  />
-                </Box>
-                <HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
-                  <Box>
-                    <Text
-                      color={"#1E1E1E"}
-                      fontWeight={500}
-                      fontSize={"sm"}
-                      mb={2}
-                    >
-                      {item.title}
-                    </Text>
+          </HStack>
+        </Box>
+        <Box shadow={"md"} p={4} bg={"#fff"}>
+          {data?.data?.director?.map(
+            (
+              {
+                director_name,
+                emailAddress,
+                mobileNumber,
+                pancard_file_path_name,
+                aadhar_file_path_name,
+                ISDCode,
+              },
+              index
+            ) => (
+              <>
+                <Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
+                  Director {index + 1}
+                </Text>
+                <HStack spacing={12} mb={6}>
+                  <VStack alignItems={"start"}>
                     <Text
                       color={"#777777"}
                       fontWeight={400}
                       fontSize={"xs"}
                       mb={0}
                     >
-                      {item.size}
+                      Full Name
                     </Text>
-                  </Box>
-                  <BsDownload color={"#6311CB"} fontSize={"xs"} />
-                </HStack>
-              </Box>
-            </Box>
-          ))}
-        </HStack>
-      </Box>
-      {/* for pink bg */}
-      <Box bg={"#f4eefb"} py={2} px={4}>
-        <HStack>
-          <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
-          <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
-            Director Details
-          </Text>
-        </HStack>
-      </Box>
-      <Box shadow={"md"} p={4} bg={"#fff"}>
-        <Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
-          Director 1
-        </Text>
-        <HStack spacing={12} mb={6}>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Full Name
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              Jenny Wilson
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Email address
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              jennywilson@gmail.com
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Phone number
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              +91 4578451245
-            </Text>
-          </VStack>
-        </HStack>
-        <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
-          Documents
-        </Text>
-        <HStack spacing={4} wrap="wrap">
-          {panCardData.map((item) => (
-            <Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
-              <Box p={2}>
-                <Box w="100%">
-                  <Image
-                    src={item.src}
-                    alt={item.title}
-                    width="100%"
-                    objectFit="cover"
-                  />
-                </Box>
-                <HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
-                  <Box>
                     <Text
-                      color={"#1E1E1E"}
+                      color={"#090909"}
                       fontWeight={500}
                       fontSize={"sm"}
-                      mb={2}
+                      mb={0}
                     >
-                      {item.title}
+                      {director_name}
                     </Text>
+                  </VStack>
+                  <VStack alignItems={"start"}>
                     <Text
                       color={"#777777"}
                       fontWeight={400}
                       fontSize={"xs"}
                       mb={0}
                     >
-                      {item.size}
+                      Email address
                     </Text>
-                  </Box>
-                  <BsDownload color={"#6311CB"} fontSize={"xs"} />
-                </HStack>
-              </Box>
-            </Box>
-          ))}
-        </HStack>
-
-        <Divider />
-        <Text color={"#090909"} fontWeight={500} fontSize={"sm"}>
-          Director 2
-        </Text>
-        <HStack spacing={12} mb={6}>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Full Name
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              Jenny Wilson
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Email address
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              jennywilson@gmail.com
-            </Text>
-          </VStack>
-          <VStack alignItems={"start"}>
-            <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={0}>
-              Phone number
-            </Text>
-            <Text color={"#090909"} fontWeight={500} fontSize={"sm"} mb={0}>
-              +91 4578451245
-            </Text>
-          </VStack>
-        </HStack>
-        <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
-          Documents
-        </Text>
-        <HStack spacing={4} wrap="wrap">
-          {panCardData.map((item) => (
-            <Box key={item.id} bg={"#F4F4F4"} p={2} rounded={"md"} minW={280}>
-              <Box p={2}>
-                <Box w="100%">
-                  <Image
-                    src={item.src}
-                    alt={item.title}
-                    width="100%"
-                    objectFit="cover"
-                  />
-                </Box>
-                <HStack justifyContent={"space-between"} bg={"#FFFFFF"} p={2}>
-                  <Box>
                     <Text
-                      color={"#1E1E1E"}
+                      color={"#090909"}
                       fontWeight={500}
                       fontSize={"sm"}
-                      mb={2}
+                      mb={0}
                     >
-                      {item.title}
+                      {emailAddress}
                     </Text>
+                  </VStack>
+                  <VStack alignItems={"start"}>
                     <Text
                       color={"#777777"}
                       fontWeight={400}
                       fontSize={"xs"}
                       mb={0}
                     >
-                      {item.size}
+                      Phone number
                     </Text>
-                  </Box>
-                  <BsDownload color={"#6311CB"} fontSize={"xs"} />
+                    <Text
+                      color={"#090909"}
+                      fontWeight={500}
+                      fontSize={"sm"}
+                      mb={0}
+                    >
+                      +{mobileNumber}
+                    </Text>
+                  </VStack>
                 </HStack>
-              </Box>
-            </Box>
-          ))}
-        </HStack>
-      </Box>
+                <Text color={"#777777"} fontWeight={400} fontSize={"xs"} mb={4}>
+                  Documents
+                </Text>
+                <HStack spacing={4} wrap="wrap">
 
-      {/* for pink bg */}
-      <Box bg={"#f4eefb"} py={2} px={4}>
-        <HStack>
-          <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
-          <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
-            Package selected
-          </Text>
-        </HStack>
-      </Box>
-      <Box roundedBottom={"lg"} shadow={"md"} p={4} bg={"#fff"}>
-        <HStack spacing={6}>
-          <Box bg={"#f7f6fe"} p={4} rounded={"md"}>
-            <HStack justifyContent={"space-between"} mb={4}>
-              <HStack>
-                <Image src={gift}></Image>
-                <Text color={"#393939"} fontWeight={500} fontSize={"sm"} mb={0}>
-                  OptiFii Benefit
-                </Text>
-              </HStack>
-              <HStack>
-                <GoClock size={16} color={"#00A438"} />
-                <Text color={"#00A438"} fontWeight={400} fontSize={"xs"} mb={0}>
-                  Renewal in 30 days
-                </Text>
-              </HStack>
-            </HStack>
-            <Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
-              massa mi.
+
+            
+<DocBox title={pancard_file_path_name?.split("/").pop()} imgLink={pancard_file_path_name} />
+<DocBox title={aadhar_file_path_name?.split("/").pop()} imgLink={aadhar_file_path_name} />
+
+         
+                </HStack>
+                <Divider />
+              </>
+            )
+          )}
+        </Box>
+
+        {/* for pink bg */}
+        <Box bg={"#f4eefb"} py={2} px={4}>
+          <HStack>
+            <BsBuildingsFill fontSize={"xs"} color="#6311CB" />
+            <Text color={"#1C1C1C"} fontWeight={500} fontSize={"sm"} mb={0}>
+              Package selected
             </Text>
-
-            <HStack spacing={4}>
-              <List spacing={3} pl={0}>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
+          </HStack>
+        </Box>
+        <Box roundedBottom={"lg"} shadow={"md"} p={4} bg={"#fff"}>
+          <HStack spacing={6}>
+            <Box bg={"#f7f6fe"} p={4} rounded={"md"}>
+              <HStack justifyContent={"space-between"} mb={4}>
+                <HStack>
+                  <Image src={gift}></Image>
+                  <Text
+                    color={"#393939"}
+                    fontWeight={500}
+                    fontSize={"sm"}
+                    mb={0}
+                  >
+                    OptiFii Benefit
                   </Text>
-                </ListItem>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                </HStack>
+                <HStack>
+                  <GoClock size={16} color={"#00A438"} />
+                  <Text
+                    color={"#00A438"}
+                    fontWeight={400}
+                    fontSize={"xs"}
+                    mb={0}
+                  >
+                    Renewal in 30 days
                   </Text>
-                </ListItem>
-              </List>
-              <List spacing={3} pl={0}>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-              </List>
-            </HStack>
-          </Box>
-          <Box bg={"#f7f6fe"} p={4} rounded={"md"}>
-            <HStack justifyContent={"space-between"} mb={4}>
-              <HStack>
-                <Image src={gift}></Image>
-                <Text color={"#393939"} fontWeight={500} fontSize={"sm"} mb={0}>
-                  OptiFii Benefit
-                </Text>
+                </HStack>
               </HStack>
-              <HStack>
-                <GoClock size={16} color={"#00A438"} />
-                <Text color={"#00A438"} fontWeight={400} fontSize={"xs"} mb={0}>
-                  Renewal in 30 days
-                </Text>
-              </HStack>
-            </HStack>
-            <Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
-              massa mi.
-            </Text>
+              <Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+                massa mi.
+              </Text>
 
-            <HStack spacing={4}>
-              <List spacing={3} pl={0}>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-              </List>
-              <List spacing={3} pl={0}>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-                <ListItem display={"flex"} gap={0}>
-                  <ListIcon
-                    as={MdCheckCircle}
-                    color="#3725EA"
-                    fontSize={"lg"}
-                  />
-                  <Text color={"#585858"} fontSize={"xs"}>
-                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-                  </Text>
-                </ListItem>
-              </List>
-            </HStack>
-          </Box>
-        </HStack>
-
-        <Box />
-      </Box>
-
-      <Box rounded={"lg"} mt={4} shadow={"md"} py={2} bg={"#fff"}>
-        <Accordion allowMultiple>
-          <AccordionItem border={"none"}>
-            <Text mb={0}>
-              <AccordionButton py={2}>
-                <Box as="span" flex="1" textAlign="left">
-                  <HStack>
-                    <FaRegFile color="#6311CB" />
-                    <Text fontWeight={500} fontSize={"sm"} mb={0}>
-                      Employee list
+              <HStack spacing={4}>
+                <List spacing={3} pl={0}>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
                     </Text>
+                  </ListItem>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                </List>
+                <List spacing={3} pl={0}>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                </List>
+              </HStack>
+            </Box>
+            <Box bg={"#f7f6fe"} p={4} rounded={"md"}>
+              <HStack justifyContent={"space-between"} mb={4}>
+                <HStack>
+                  <Image src={gift}></Image>
+                  <Text
+                    color={"#393939"}
+                    fontWeight={500}
+                    fontSize={"sm"}
+                    mb={0}
+                  >
+                    OptiFii Benefit
+                  </Text>
+                </HStack>
+                <HStack>
+                  <GoClock size={16} color={"#00A438"} />
+                  <Text
+                    color={"#00A438"}
+                    fontWeight={400}
+                    fontSize={"xs"}
+                    mb={0}
+                  >
+                    Renewal in 30 days
+                  </Text>
+                </HStack>
+              </HStack>
+              <Text color={"#6F8196"} fontWeight={400} fontSize={"sm"} mb={8}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et
+                massa mi.
+              </Text>
+
+              <HStack spacing={4}>
+                <List spacing={3} pl={0}>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                </List>
+                <List spacing={3} pl={0}>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                  <ListItem display={"flex"} gap={0}>
+                    <ListIcon
+                      as={MdCheckCircle}
+                      color="#3725EA"
+                      fontSize={"lg"}
+                    />
+                    <Text color={"#585858"} fontSize={"xs"}>
+                      Lorem ipsum dolor sit amet, consectetur adipisicing elit
+                    </Text>
+                  </ListItem>
+                </List>
+              </HStack>
+            </Box>
+          </HStack>
+
+          <Box />
+        </Box>
+
+        <Box rounded={"lg"} mt={4} shadow={"md"} py={2} bg={"#fff"}>
+          <Accordion allowMultiple>
+            <AccordionItem border={"none"}>
+              <Text mb={0}>
+                <AccordionButton py={2}>
+                  <Box as="span" flex="1" textAlign="left">
+                    <HStack>
+                      <FaRegFile color="#6311CB" />
+                      <Text fontWeight={500} fontSize={"sm"} mb={0}>
+                        Employee list
+                      </Text>
+                    </HStack>
+                  </Box>
+                  <AccordionIcon
+                    bg={"#f4eefb"}
+                    rounded={"full"}
+                    color={"#6311CB"}
+                  />
+                </AccordionButton>
+              </Text>
+              <AccordionPanel pb={4}>
+                {/* table knvfidem  */}
+                <VStack gap={3} py={3} bg={"#fff"}>
+                  <HStack px={3} w={"100%"} justifyContent={"space-between"}>
+                    <Text as={"span"} fontWeight={500} fontSize={"sm"}>
+                      Corporates
+                    </Text>
+                    <HStack>
+                      <InputGroup width={350} size="sm" ml={5}>
+                        <InputLeftElement pointerEvents="none">
+                          <SearchIcon color="gray.500" />
+                        </InputLeftElement>
+                        <Input
+                          type="search"
+                          placeholder="Search..."
+                          rounded="md"
+                          bg={"gray.100"}
+                          border={"none"}
+                          // value={searchTerm}
+                          // onChange={(e) => setSearchTerm(e.target.value)}
+                        />
+                      </InputGroup>
+                    </HStack>
                   </HStack>
-                </Box>
-                <AccordionIcon
-                  bg={"#f4eefb"}
-                  rounded={"full"}
-                  color={"#6311CB"}
-                />
-              </AccordionButton>
-            </Text>
-            <AccordionPanel pb={4}>
-              {/* table knvfidem  */}
-              <VStack gap={3} py={3} bg={"#fff"}>
-                <HStack px={3} w={"100%"} justifyContent={"space-between"}>
-                  <Text as={"span"} fontWeight={500} fontSize={"sm"}>
-                    Corporates
-                  </Text>
-                  <HStack>
-                    <InputGroup width={350} size="sm" ml={5}>
-                      <InputLeftElement pointerEvents="none">
-                        <SearchIcon color="gray.500" />
-                      </InputLeftElement>
-                      <Input
-                        type="search"
-                        placeholder="Search..."
-                        rounded="md"
-                        bg={"gray.100"}
-                        border={"none"}
-                        // value={searchTerm}
-                        // onChange={(e) => setSearchTerm(e.target.value)}
-                      />
-                    </InputGroup>
-                  </HStack>
-                </HStack>
-                <NormalTable
-                  emptyMessage={`We don't have any Sponsors `}
-                  tableHeadRow={tableHeadRow}
-                  data={extractedArray}
-                  isLoading={isLoading}
-                  radio={true}
-                  showRadioButton={true}
-                  selectedRadio={selectedRadio}
-                  setSelectedRadio={setSelectedRadio}
-                />
-              </VStack>
-            </AccordionPanel>
-          </AccordionItem>
-        </Accordion>
+                  <NormalTable
+                    emptyMessage={`We don't have any Sponsors `}
+                    tableHeadRow={tableHeadRow}
+                    data={extractedArray}
+                    isLoading={isLoading}
+                    radio={true}
+                    showRadioButton={true}
+                    selectedRadio={selectedRadio}
+                    setSelectedRadio={setSelectedRadio}
+                  />
+                </VStack>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </Box>
       </Box>
-    </Box>)
+    )
   );
 };
 
diff --git a/src/assets/aadhaar-card-7579588_1280.png b/src/assets/aadhaar-card-7579588_1280.png
new file mode 100644
index 0000000..27ca79a
Binary files /dev/null and b/src/assets/aadhaar-card-7579588_1280.png differ
diff --git a/src/assets/pan_card_1565610340828_1572021543426.webp b/src/assets/pan_card_1565610340828_1572021543426.webp
new file mode 100644
index 0000000..63d34ad
Binary files /dev/null and b/src/assets/pan_card_1565610340828_1572021543426.webp differ
diff --git a/src/assets/pancard-news-pixabay.webp b/src/assets/pancard-news-pixabay.webp
new file mode 100644
index 0000000..f88169d
Binary files /dev/null and b/src/assets/pancard-news-pixabay.webp differ
diff --git a/src/assets/sample-pan-card.jpg b/src/assets/sample-pan-card.jpg
new file mode 100644
index 0000000..6e95c25
Binary files /dev/null and b/src/assets/sample-pan-card.jpg differ