diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index be66ecc..b9a6377 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.g2sg6ddrvtg"
+    "revision": "0.clcjjkrum98"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index db3e511..4dbb3cf 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -50,6 +50,12 @@ const AmountCard = () => {
       value: kpDetails?.data?.didCount,
       icon: <FaFileAlt color="white" fontSize={"20px"} />,
     },
+    {
+      label: "Total Supply",
+      value: kpDetails?.data?.totalSupply,
+      icon: <FaGlobe color="white" fontSize={"20px"} />,
+      display: { base: "block", md: "none" }, // Hidden on small, shown on medium and up
+    },
   ];
 
   const statsDataFour = [
@@ -57,6 +63,7 @@ const AmountCard = () => {
       label: "Total Supply",
       value: kpDetails?.data?.totalSupply,
       icon: <FaGlobe color="white" fontSize={"20px"} />,
+      display: { base: "none", md: "block" }, // Hidden on small, shown on medium and up
     },
     {
       label: "Circulating Supply",
@@ -75,129 +82,122 @@ const AmountCard = () => {
     },
   ];
 
-
-
-
-
-
-
-
-
-
-
-
   return (
     <VStack>
       <Container maxW="4xl">
         <Grid
         
-          mb={{base:"16px",md:"16px" }}
+          mb={{base:"10px",md:"16px" }}
           // templateColumns="repeat(3, 2fr)"
-          templateColumns={{base :"repeat(1, 1fr)",md : "repeat(3, 2fr)" }}
-          gap={6}
+          templateColumns={{base :"repeat(2, 2fr)",md : "repeat(3, 2fr)" }}
+          gap={{base:4,md:6}}
           bg={colorMode === "light" ? "light.100" : "black.900"}
           justifyContent="center"
           alignItems="center"
         >
           {statsData.map((item, index) => (
-            <GridItem
-              key={index}
-              bg={
-                colorMode === "light"
-                  ? "#230A7926"
-                  : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
-              }
-              display={"flex"}
-              justifyContent={"space-between"}
-              alignItems={"center"}
-              p={3}
-              rounded={"lg"}
-              boxShadow={'md'}
-            >
-              <Box>
-                <Text
-                  fontSize={"xs"}
-                  color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-                >
-                  {item.label}
-                </Text>
-                <Text
-                  fontWeight={600}
-                  fontSize={"sm"}
-                  color={colorMode === "light" ? "#230A79" : "#fff"}
-                >
-                  {item.value}
-                </Text>
-              </Box>
-              <Box
-                backgroundColor={"#4023A6"}
-                w={30}
-                h={30}
+            <Box  display={item.display || "block"}>
+              <GridItem
+                key={index}
+                bg={
+                  colorMode === "light"
+                    ? "#230A7926"
+                    : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
+                }
                 display={"flex"}
+                justifyContent={"space-between"}
                 alignItems={"center"}
-                justifyContent={"center"}
-                rounded={10}
-                p={2}
+                p={3}
+                rounded={"lg"}
+                boxShadow={'md'}
               >
-                {item.icon}
-              </Box>
-            </GridItem>
+                <Box>
+                  <Text
+                    fontSize={"xs"}
+                    color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+                  >
+                    {item.label}
+                  </Text>
+                  <Text
+                    fontWeight={600}
+                    fontSize={"sm"}
+                    color={colorMode === "light" ? "#230A79" : "#fff"}
+                  >
+                    {item.value}
+                  </Text>
+                </Box>
+                <Box
+                  backgroundColor={"#4023A6"}
+                  w={30}
+                  h={30}
+                  display={"flex"}
+                  alignItems={"center"}
+                  justifyContent={"center"}
+                  rounded={10}
+                  p={2}
+                >
+                  {item.icon}
+                </Box>
+              </GridItem>
+            </Box>
           ))}
         </Grid>
       </Container>
       <Container maxW="6xl">
         <Grid
           // templateColumns="repeat(4, 2fr)"
-          templateColumns={{base:"repeat(1, 2fr)",md :"repeat(4, 2fr)"}}
-          gap={6}
+          templateColumns={{base:"repeat(2, 2fr)",md :"repeat(4, 2fr)"}}
+          gap={{base:4,md:6}}
           bg={colorMode === "light" ? "light.100" : "black.900"}
           justifyContent="center"
           alignItems="center"
         >
           {statsDataFour.map((item, index) => (
-            <GridItem
-              key={index}
-              bg={
-                colorMode === "light"
-                  ? "#230A7926"
-                  : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
-              }
-              display={"flex"}
-              justifyContent={"space-between"}
-              alignItems={"center"}
-              p={3}
-              rounded={"lg"}
-              boxShadow={'md'}
-            >
-              <Box>
-                <Text
-                  fontSize={"xs"}
-                  color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-
-                >
-                  {item.label}
-                </Text>
-                <Text
-                  fontSize={"sm"}
-                  fontWeight={600}
-                  color={colorMode === "light" ? "#230A79" : "#fff"}
-                >
-                  {item.value}
-                </Text>
-              </Box>
-              <Box
-                backgroundColor={"#4023A6"}
-                w={30}
-                h={30}
+            <Box  display={item.display || "block"}>
+              <GridItem
+                key={index}
+                bg={
+                  colorMode === "light"
+                    ? "#230A7926"
+                    : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
+                }
                 display={"flex"}
+                justifyContent={"space-between"}
                 alignItems={"center"}
-                justifyContent={"center"}
-                rounded={10}
-                p={2}
+                p={3}
+                rounded={"lg"}
+                boxShadow={'md'}
               >
-                {item.icon}
-              </Box>
-            </GridItem>
+                <Box>
+                  <Text
+                    fontSize={"xs"}
+                    color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+
+                  >
+                    {item.label}
+                  </Text>
+                  <Text
+                    fontSize={"sm"}
+                    fontWeight={600}
+                    color={colorMode === "light" ? "#230A79" : "#fff"}
+                  >
+                    {item.value}
+                  </Text>
+                </Box>
+                <Box
+                  backgroundColor={"#4023A6"}
+                  w={30}
+                  h={30}
+                  display={"flex"}
+                  alignItems={"center"}
+                  justifyContent={"center"}
+                  rounded={10}
+                  p={2}
+                >
+                  {item.icon}
+                </Box>
+              </GridItem>
+            </Box>
           ))}
         </Grid>
       </Container>
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index 394937a..efcb232 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -244,7 +244,7 @@ const LineChart = () => {
           mt={{ base: 2, md: 0 }}
           fontSize={{ base: "sm", md: "md" }}
           fontWeight={500}
-          mb={{ base: "0px", md: "0px" }}
+          mb={{ base: "5px", md: "0px" }}
           px={{ base: "8px", md: "0px" }}
         >
           Transaction History
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index 46d8ed1..be42f2d 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -144,14 +144,9 @@ const MainNet = () => {
         >
           Main Net - Overview
         </Heading>
-        {/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
-          View total number of records
-          <Select width={"70px"} rounded="md" size="xs">
-            <option value='option1'>10</option>
-            <option value='option2'>20</option>
-            <option value='option3'>30</option>
-          </Select>
-        </Text> */}
+        <HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
+          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{mainNetData?.data?.tvl} RBT</Text>
+        </HStack>
       </Container>
       <Box>
         <Container maxW="6xl">
@@ -184,11 +179,10 @@ const MainNet = () => {
         >
           <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
           <Icon
-
-bg={colorMode==="light"?'#fff':"#434147"}
-p={1.5}
-boxSize={7}
-rounded={"full"}
+            bg={colorMode==="light"?'#fff':"#434147"}
+            p={1.5}
+            boxSize={7}
+            rounded={"full"}
             as={HiOutlineRefresh}
             animation={
               isRotating || isMainNetDataLoading
diff --git a/src/pages/SubnetId.jsx b/src/pages/SubnetId.jsx
index 4078d07..25722b9 100644
--- a/src/pages/SubnetId.jsx
+++ b/src/pages/SubnetId.jsx
@@ -10,6 +10,7 @@ import {
   Input,
   InputGroup,
   Select,
+  Stack,
   Text,
   useColorMode,
   VStack,
@@ -22,6 +23,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import Pagination from "../components/Pagination";
 import { useGetSubnetAllQuery, useGetSubnetCountQuery } from "../Services/api.service";
 import { BiSearch, BiSearchAlt } from "react-icons/bi";
+import { MdArrowRight } from "react-icons/md";
 
 const SubnetId = () => {
   const { subnetId } = useContext(GlobalStateContext);
@@ -83,6 +85,10 @@ const SubnetId = () => {
         <Box color={colorMode === "light"? "#230A79" : "#B09AFF"}  onClick={() =>
             navigate(`/subnet-id-overview/${item?.networkId}`)}>
           {item?.networkId}
+          <HStack fontSize={"xs"} mt={1} w={"280px"} justifyContent={"space-between"}>
+            <Text display={"flex"} alignItems={"center"}>Tvl<MdArrowRight /> {item?.tvl} (RBT)</Text> 
+            <Text  display={"flex"} alignItems={"center"}>Count<MdArrowRight />{item?.transctionsCount}</Text>
+          </HStack>
          </Box>
      ),
     "Network Name": item?.networkName,
diff --git a/src/pages/SubnetIdOverview.jsx b/src/pages/SubnetIdOverview.jsx
index a2a19ff..e6fc31a 100644
--- a/src/pages/SubnetIdOverview.jsx
+++ b/src/pages/SubnetIdOverview.jsx
@@ -19,8 +19,6 @@ const SubnetInner = () => {
   const navigate = useNavigate()
   const params = useParams()
 
-
-
   const [isRotating, setIsRotating] = useState(false);
   const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
   const [pageSize, setPageSize] = useState(10); // Number of items per page
@@ -50,7 +48,6 @@ const SubnetInner = () => {
       });
   }
 
-
   const {
     data,
     isLoading,
@@ -61,13 +58,10 @@ const SubnetInner = () => {
     pageSize: pageSize,
   })
 
-
   useEffect(() => {
     setTotalItems(data?.data?.totalCount);
   }, [data]);
 
-
-
   const handleRefreshClick = () => {
     setIsRotating(true); // Start rotation
     refetch();
@@ -78,8 +72,6 @@ const SubnetInner = () => {
     setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
   };
 
-
-
   useEffect(() => {
     // Update relative time every minute
     const intervalId = setInterval(() => {
@@ -104,7 +96,6 @@ const SubnetInner = () => {
   };
 
 
-
   return (
     <Box minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
@@ -117,6 +108,9 @@ const SubnetInner = () => {
         <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
         Subnet ID  - {params?.id}
         </Heading>
+        <HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
+          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{data?.data?.tvl} RBT</Text>
+        </HStack>
         {/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
           View total number of records
           <Select width={"70px"} rounded="md" size="xs">
@@ -146,8 +140,6 @@ const SubnetInner = () => {
               <Text color={"#fff"}>Transactions</Text>
             </GridItem>
 
-
-
         <Box
           as="span"
           cursor={"pointer"}
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 1fd8bb4..b9cc8cc 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -27,12 +27,7 @@ const TransactionDetails = () => {
   const navigate = useNavigate();
   const params = useParams();
   const { colorMode } = useColorMode();
-  const {
-    data,
-    isLoading,
-    refetch,
-    errors,
-  } = useGetTransByIdQuery(params?.id);
+  const { data, isLoading, refetch, errors } = useGetTransByIdQuery(params?.id);
   // Scroll to top when component mounts or params change
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -58,14 +53,13 @@ const TransactionDetails = () => {
         console.error("Failed to copy text: ", err);
       });
   }
-
-  console.log(data?.data?.quorumList);
+  console.log("Bug", data);
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
-    // "Sr. no", 
-    "Quorum List"];
-
+    // "Sr. no",
+    "Quorum List",
+  ];
 
   // const extractedArray = reportsHistory.map((item)=>({ }))
   const extractedArray = data?.data?.quorumList?.map((item, index) => ({
@@ -112,15 +106,16 @@ const TransactionDetails = () => {
               Transaction ID
             </Text>
             <HStack fontSize={"sm"}>
-              <HStack                  
-                  isTruncated
-                  color={colorMode === "light" ? "gray.400" : "gray.100"}>
+              <HStack
+                isTruncated
+                color={colorMode === "light" ? "gray.400" : "gray.100"}
+              >
                 <Text
-                 whiteSpace={"nowrap"} // Prevent the text from wrapping
-                 textOverflow={"ellipsis"}
-                 isTruncated
-                 overflow={"hidden"}
-                 cursor={"pointer"}
+                  whiteSpace={"nowrap"} // Prevent the text from wrapping
+                  textOverflow={"ellipsis"}
+                  isTruncated
+                  overflow={"hidden"}
+                  cursor={"pointer"}
                 >
                   {data?.data?.transactionId}
                 </Text>
@@ -140,206 +135,221 @@ const TransactionDetails = () => {
               </HStack>
             </HStack>
             <Divider mt={4} mb={5} />
-            {data?.data?.tokenList || data?.data?.blockHash&&<Text
-              fontSize={"md"}
-              mb={2}
-              color={colorMode === "light" ? "#230A79" : "#fff"}
-            >
-              Token Information
-            </Text>}
-            {data?.data?.tokenList &&
-            <Box
-              fontSize={"sm"}
-              gap={4}
-              mb={2}
-              display={{ base: "block", md: "flex" }}
-            >
-              <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                Token ID :
-              </Text>
-              <HStack
-                color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                textDecoration={"underline"}
-              >
-                <Text
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated
-                  cursor={"pointer"}
-                >
-                  {data?.data?.tokenList}
-                </Text>
-                <Text
-                  _hover={{ bg: "gray.50" }}
-                  transition={"0.5s"}
-                  rounded={"sm"}
-                  p={1}
-                  as={"span"}
-                  ml={1}
-                  cursor={"pointer"}
-                >
-                  <MdContentCopy
-                    onClick={() => copyToClipboard(data?.data?.tokenList)}
-                  />
-                </Text>
-              </HStack>
-            </Box>}
-            {data?.data?.blockHash && <Box
-              fontSize={"sm"}
-              gap={4}
-              mb={2}
-              display={{ base: "block", md: "flex" }}
-            >
-              <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                Block ID :
-              </Text>
+            {data?.data["tokenList"] && data?.data?.blockHash && (
               <Text
-                display={"flex"}
-                alignItems={"center"}
-                color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                textDecoration={"underline"}
+                fontSize={"md"}
+                mb={2}
+                color={colorMode === "light" ? "#230A79" : "#fff"}
               >
-                <Text 
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated>{data?.data?.blockHash}</Text>
-                <Text
-                  _hover={{ bg: "gray.50" }}
-                  transition={"0.5s"}
-                  rounded={"sm"}
-                  p={1}
-                  as={"span"}
-                  ml={1}
-                  cursor={"pointer"}
-                >
-                  <MdContentCopy
-                    onClick={() => copyToClipboard(data?.data?.blockHash)}
-                  />
-                </Text>
+                Token Information
               </Text>
-            </Box>}
+            )}
+            {data?.data?.tokenList && (
+              <Box
+                fontSize={"sm"}
+                gap={4}
+                mb={2}
+                display={{ base: "block", md: "flex" }}
+              >
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Token ID :
+                </Text>
+                <HStack
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
+                >
+                  <Text
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                  >
+                    {data?.data?.tokenList["0"].tokenId}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() =>
+                        copyToClipboard(data?.data?.tokenList["0"].tokenId)
+                      }
+                    />
+                  </Text>
+                </HStack>
+              </Box>
+            )}
+            {data?.data?.blockHash && (
+              <Box
+                fontSize={"sm"}
+                gap={4}
+                mb={2}
+                display={{ base: "block", md: "flex" }}
+              >
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Block ID :
+                </Text>
+                <Text
+                  display={"flex"}
+                  alignItems={"center"}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
+                >
+                  <Text
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                  >
+                    {data?.data?.blockHash}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.blockHash)}
+                    />
+                  </Text>
+                </Text>
+              </Box>
+            )}
           </Box>
 
-
-
-
           <Box
             boxShadow={colorMode === "light" && "md"}
             bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
             p={4}
-            mb={extractedArray&&5}
+            mb={extractedArray && 5}
             rounded={6}
           >
-            {data?.data?.netWorkType && <>
-              <Text
-                color={colorMode === "light" ? "#000" : "#fff"}
-                fontSize={"sm"}
-              >
-                {data?.data?.netWorkType}
-              </Text>
-              <HStack
-                fontSize={"sm"}
-                pb={3}
-                color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-              >
+            {data?.data?.netWorkType && (
+              <>
                 <Text
-                  fontWeight={"inherit"}
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated
-                  cursor={"pointer"}
+                  color={colorMode === "light" ? "#000" : "#fff"}
+                  fontSize={"sm"}
                 >
-                  {data?.data?.subNetworkId}
+                  {data?.data?.netWorkType}
                 </Text>
+                <HStack
+                  fontSize={"sm"}
+                  pb={3}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                >
+                  <Text
+                    fontWeight={"inherit"}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                  >
+                    {data?.data?.subNetworkId}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.netWorkType)}
+                    />
+                  </Text>
+                </HStack>
+              </>
+            )}
+            {data?.data?.sender && (
+              <>
                 <Text
-                  _hover={{ bg: "gray.50" }}
-                  transition={"0.5s"}
-                  rounded={"sm"}
-                  p={1}
-                  as={"span"}
-                  ml={1}
-                  cursor={"pointer"}
+                  color={colorMode === "light" ? "#000" : "#fff"}
+                  fontSize={"sm"}
                 >
-                  <MdContentCopy
-                    onClick={() => copyToClipboard(data?.data?.netWorkType)}
-                  />
+                  Sender
                 </Text>
-              </HStack>
-            </>}
-            {data?.data?.sender && <>
-              <Text
-                color={colorMode === "light" ? "#000" : "#fff"}
-                fontSize={"sm"}
-              >
-                Sender
-              </Text>
-              <HStack
-                fontSize={"sm"}
-                pb={3}
-                color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-              >
+                <HStack
+                  fontSize={"sm"}
+                  pb={3}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                >
+                  <Text
+                    onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
+                    fontWeight={"inherit"}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                  >
+                    {data?.data?.sender}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.receiver)}
+                    />
+                  </Text>
+                </HStack>
+              </>
+            )}
+            {data?.data?.receiver && (
+              <>
                 <Text
-                  onClick={() => navigate(`/did-info/${data?.data?.sender}`)}
-                  fontWeight={"inherit"}
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated
-                  cursor={"pointer"}
+                  color={colorMode === "light" ? "#000" : "#fff"}
+                  fontSize={"sm"}
                 >
-                  {data?.data?.sender}
+                  Receiver
                 </Text>
-                <Text
-                  _hover={{ bg: "gray.50" }}
-                  transition={"0.5s"}
-                  rounded={"sm"}
-                  p={1}
-                  as={"span"}
-                  ml={1}
-                  cursor={"pointer"}
+                <HStack
+                  fontSize={"sm"}
+                  pb={3}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                 >
-                  <MdContentCopy
-                    onClick={() => copyToClipboard(data?.data?.receiver)}
-                  />
-                </Text>
-              </HStack>
-            </>}
-            {data?.data?.receiver && <>
-            <Text
-              color={colorMode === "light" ? "#000" : "#fff"}
-              fontSize={"sm"}
-            >
-              Receiver
-            </Text>
-            <HStack
-              fontSize={"sm"}
-              pb={3}
-              color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-            >
-              <Text
-                onClick={() => navigate(`/did-info/${data?.data?.receiver}`)}
-                fontWeight={"inherit"}
-                whiteSpace={"nowrap"} // Prevent the text from wrapping
-                textOverflow={"ellipsis"}
-                isTruncated
-                cursor={"pointer"}
-              >
-                {data?.data?.receiver}
-              </Text>
-              <Text
-                _hover={{ bg: "gray.50" }}
-                transition={"0.5s"}
-                rounded={"sm"}
-                p={1}
-                as={"span"}
-                ml={1}
-                cursor={"pointer"}
-              >
-                <MdContentCopy
-                  onClick={() => copyToClipboard(data?.data?.receiver)}
-                />
-              </Text>
-            </HStack>
-            </>}
+                  <Text
+                    onClick={() =>
+                      navigate(`/did-info/${data?.data?.receiver}`)
+                    }
+                    fontWeight={"inherit"}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                  >
+                    {data?.data?.receiver}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.receiver)}
+                    />
+                  </Text>
+                </HStack>
+              </>
+            )}
           </Box>
           <Box
             boxShadow={colorMode === "light" && "md"}
@@ -347,41 +357,40 @@ const TransactionDetails = () => {
             p={4}
             mb={5}
             rounded={6}
-          
           >
-            <HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
-              {data?.data?.amount && <Box>
-                <Text>Amount</Text>
-                <Text
-                  display={"flex"}
-                  gap={2}
-                  alignItems={"center"}
-                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                >
-                  <Image w={4} src={rbtLogoOutline} />
-                  {data?.data?.amount}
-                </Text>
-              </Box>}
-              {data?.data?.timestamp && <Box>
-                <Text>Timestamp</Text>
-                <Text color={"#A1A1A1"}>{formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}</Text>
-              </Box>}
+            <HStack fontSize={"sm"} gap={{ base: "4rem", md: "8rem" }} mb={2}>
+              {data?.data?.amount && (
+                <Box>
+                  <Text>Amount</Text>
+                  <Text
+                    display={"flex"}
+                    gap={2}
+                    alignItems={"center"}
+                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  >
+                    <Image w={4} src={rbtLogoOutline} />
+                    {data?.data?.amount}
+                  </Text>
+                </Box>
+              )}
+              {data?.data?.timestamp && (
+                <Box>
+                  <Text>Timestamp</Text>
+                  <Text color={"#A1A1A1"}>
+                    {formatUTCToDDMMYYHHMMSS(data?.data?.timestamp)}
+                  </Text>
+                </Box>
+              )}
             </HStack>
           </Box>
 
-
-
-
-
-      {extractedArray&&<NormalTable
-        tableHeadRow={tableHeadRow}
-        data={extractedArray}
-        isLoading={isLoading}
-      />}
-
-
-
-
+          {extractedArray && (
+            <NormalTable
+              tableHeadRow={tableHeadRow}
+              data={extractedArray}
+              isLoading={isLoading}
+            />
+          )}
 
           <TransactionTable />
         </Container>