diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index dbf8ee6..472e42d 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -9,6 +9,7 @@ import {
   Text,
   useColorMode,
   useToast,
+  VStack,
 } from "@chakra-ui/react";
 import React, { useContext, useEffect, useState } from "react";
 import { MdContentCopy } from "react-icons/md";
@@ -49,28 +50,25 @@ const TransactionDetails = () => {
             <ToastBox status={"warn"} message={"Text copied to clipboard"} />
           ),
         });
+        setIsLoading(false)
       })
       .catch((err) => {
         console.error("Failed to copy text: ", err);
       });
   }
-  
 
-  const [ dataArray, setDataArray ] = useState(null)
-  
+  const [dataArray, setDataArray] = useState(null);
+
   useEffect(() => {
     if (data?.data?.pledgeInfo?.pledgeDetails) {
-      const dataArrayOfObject = Object?.entries(data?.data?.pledgeInfo?.pledgeDetails)?.map(([id, linkedIds]) => ({ id, linkedIds }));
-      setDataArray(dataArrayOfObject)
+      const dataArrayOfObject = Object?.entries(
+        data?.data?.pledgeInfo?.pledgeDetails
+      )?.map(([id, linkedIds]) => ({ id, linkedIds }));
+      setDataArray(dataArrayOfObject);
     }
-  }, [data])
+  }, [data]);
 
   console.log(dataArray);
-  
-
-
-
-
 
   // ===============================[ Table Header ]
   const tableHeadRow = [
@@ -95,11 +93,49 @@ const TransactionDetails = () => {
     ),
   }));
 
+  console.log(data?.data?.blockNumber);
+
+
+
+    
+
+  const [ isLoadingURL, setIsLoading ] = useState(false)
+
+  const handleGenrateShortURL = async () => {
+
+    setIsLoading(true)
+    const fullUrl = window.location.href;
+    try {
+      const response = await fetch('https://rexplorerapi.azurewebsites.net/api/ShortUrl/create', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(fullUrl), // Sending searchTerm as a JSON string
+      });
+  
+      if (!response.ok) {
+        throw new Error('Failed to generate short URL');
+      }
+  
+      const result = await response.json();
+      copyToClipboard(result?.shortUrl)
+      // You can handle the result here, e.g., by updating a state with the short URL
+    } catch (error) {
+      console.error("Error generating short URL:", error);
+    }
+  };
+
+
+
+
+
+
+
+
+
 
-  console.log(data?.data?.blockNumber );
 
-  const fullUrl = window.location.href; 
-console.log(fullUrl);
 
   return (
     <>
@@ -110,17 +146,19 @@ console.log(fullUrl);
         pb={"5rem"}
       >
         <Container maxW="6xl" pt={"6rem"}>
-          <HStack justifyContent={'space-between'} alignItems={'center'} mb={3}>
-          <Heading
-            mb={5}
-            fontSize={"sm"}
-            fontWeight={400}
-            as={'span'}
-            color={colorMode === "light" ? "#000" : "#fff"}
-          >
-            {data?.data?.transactionType === "SC" ? "Smart Contract Info":"Transaction Info"}
-          </Heading>
-          <Button size={'sm'}>Generate short url</Button>
+          <HStack justifyContent={"space-between"} alignItems={"center"} mb={3}>
+            <Heading
+              mb={5}
+              fontSize={"sm"}
+              fontWeight={400}
+              as={"span"}
+              color={colorMode === "light" ? "#000" : "#fff"}
+            >
+              {data?.data?.transactionType === "SC"
+                ? "Smart Contract Info"
+                : "Transaction Info"}
+            </Heading>
+            <Button display={'flex'} gap={2} alignItems={'center'} rounded={'sm'} size={"sm"} isLoading={isLoadingURL} onClick={handleGenrateShortURL}><MdContentCopy/> Copy short url</Button>
           </HStack>
           <Box
             boxShadow={colorMode === "light" && "md"}
@@ -132,7 +170,7 @@ console.log(fullUrl);
             <Text color={"#969696"} fontSize={"sm"}>
               Transaction ID
             </Text>
-            <HStack  fontSize={"sm"}>
+            <HStack fontSize={"sm"}>
               <HStack
                 isTruncated
                 color={colorMode === "light" ? "gray.400" : "gray.100"}
@@ -162,17 +200,16 @@ console.log(fullUrl);
               </HStack>
             </HStack>
 
-
             <Divider mt={4} mb={5} />
-        
-              <Text
-                fontSize={"md"}
-                mb={2}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                Token Information
-              </Text>
-            
+
+            <Text
+              fontSize={"md"}
+              mb={2}
+              color={colorMode === "light" ? "#230A79" : "#fff"}
+            >
+              Token Information
+            </Text>
+
             {data?.data?.scTokenHash && (
               <Box
                 fontSize={"sm"}
@@ -205,9 +242,7 @@ console.log(fullUrl);
                     cursor={"pointer"}
                   >
                     <MdContentCopy
-                      onClick={() =>
-                        copyToClipboard(data?.data?.scTokenHash)
-                      }
+                      onClick={() => copyToClipboard(data?.data?.scTokenHash)}
                     />
                   </Text>
                 </HStack>
@@ -253,46 +288,44 @@ console.log(fullUrl);
               </Box>
             )}
 
-            {data?.data?.transactionType === "SC" &&(
+            {data?.data?.transactionType === "SC" && (
               <Box
-              fontSize={"sm"}
-              gap={4}
-              mb={2}
-              display={{ base: "block", md: "flex" }}
-            >
-              <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                Block number:
-              </Text>
-              <HStack
-                color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                textDecoration={"underline"}
+                fontSize={"sm"}
+                gap={4}
+                mb={2}
+                display={{ base: "block", md: "flex" }}
               >
-                <Text
-                  whiteSpace={"nowrap"} // Prevent the text from wrapping
-                  textOverflow={"ellipsis"}
-                  isTruncated
-                  cursor={"pointer"}
-                >
-                  {data?.data?.blockNumber}
-                  {/* hello */}
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Block number:
                 </Text>
-                <Text
-                  _hover={{ bg: "gray.50" }}
-                  transition={"0.5s"}
-                  rounded={"sm"}
-                  p={1}
-                  as={"span"}
-                  ml={1}
-                  cursor={"pointer"}
+                <HStack
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
                 >
-                  <MdContentCopy
-                    onClick={() =>
-                      copyToClipboard(data?.data?.blockNumber)
-                    }
-                  />
-                </Text>
-              </HStack>
-            </Box>
+                  <Text
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                  >
+                    {data?.data?.blockNumber}
+                    {/* hello */}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.blockNumber)}
+                    />
+                  </Text>
+                </HStack>
+              </Box>
             )}
           </Box>
 
@@ -422,150 +455,137 @@ console.log(fullUrl);
               </>
             )}
 
-
-
-            
-{data?.data?.creator&&<Box
+            {data?.data?.creator && (
+              <HStack
+                fontSize={{ base: "xs", md: "sm" }}
+                cursor={"pointer"}
+                gap={{ base: 2, md: 4 }}
+                mb={3}
+              >
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Creator:
+                </Text>
+                <HStack
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
                   fontSize={{ base: "xs", md: "sm" }}
-                  cursor={"pointer"}
-                  gap={{ base: 2, md: 4 }}
-                  mb={3}
                 >
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                    Creator:
-                  </Text>
-                  <HStack
-                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                    textDecoration={"underline"}
-                    fontSize={{ base: "xs", md: "sm" }}
+                  <Text
+                    cursor={"pointer"}
+                    maxW={{ base: "55%", md: "100%" }}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    onClick={() => navigate(`/did-info/${data?.data?.creator}`)}
                   >
-                    <Text
-                      cursor={"pointer"}
-                      maxW={{ base: "55%", md: "100%" }}
-                      whiteSpace={"nowrap"} // Prevent the text from wrapping
-                      textOverflow={"ellipsis"}
-                      isTruncated
-                      onClick={() => navigate(`/did-info/${data?.data?.creator}`)}
-                    >
-                      {data?.data?.creator}
-                    </Text>
-                    <Text
-                      _hover={{ bg: "gray.50" }}
-                      transition={"0.5s"}
-                      rounded={"sm"}
-                      p={1}
-                      as={"span"}
-                      ml={1}
-                      cursor={"pointer"}
-                    >
-                      <MdContentCopy
-                        onClick={() => copyToClipboard(data?.data?.creator)}
-                      />
-                    </Text>
-                  </HStack>
-                </Box>}
+                    {data?.data?.creator}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.creator)}
+                    />
+                  </Text>
+                </HStack>
+              </HStack>
+            )}
 
-                {data?.data?.executor&&<Box
+            {data?.data?.executor && (
+              <HStack
+                fontSize={{ base: "xs", md: "sm" }}
+                cursor={"pointer"}
+                gap={{ base: 2, md: 4 }}
+                mb={3}
+              >
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Executor:
+                </Text>
+                <HStack
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
                   fontSize={{ base: "xs", md: "sm" }}
-                  cursor={"pointer"}
-                  gap={{ base: 2, md: 4 }}
-                  mb={3}
                 >
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                    Executor:
-                  </Text>
-                  <HStack
-                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                    textDecoration={"underline"}
-                    fontSize={{ base: "xs", md: "sm" }}
+                  <Text
+                    cursor={"pointer"}
+                    maxW={{ base: "55%", md: "100%" }}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    onClick={() =>
+                      navigate(`/did-info/${data?.data?.executor}`)
+                    }
                   >
-                    <Text
-                      cursor={"pointer"}
-                      maxW={{ base: "55%", md: "100%" }}
-                      whiteSpace={"nowrap"} // Prevent the text from wrapping
-                      textOverflow={"ellipsis"}
-                      isTruncated
-                      onClick={() => navigate(`/did-info/${data?.data?.executor}`)}
-                    >
-                      {data?.data?.executor}
-                    </Text>
-                    <Text
-                      _hover={{ bg: "gray.50" }}
-                      transition={"0.5s"}
-                      rounded={"sm"}
-                      p={1}
-                      as={"span"}
-                      ml={1}
-                      cursor={"pointer"}
-                    >
-                      <MdContentCopy
-                        onClick={() => copyToClipboard(data?.data?.executor)}
-                      />
-                    </Text>
-                  </HStack>
-                </Box>}
+                    {data?.data?.executor}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.executor)}
+                    />
+                  </Text>
+                </HStack>
+              </HStack>
+            )}
 
-
-                {data?.data?.deployer&&<Box
+            {data?.data?.deployer && (
+              <HStack
+                fontSize={{ base: "xs", md: "sm" }}
+                cursor={"pointer"}
+                gap={{ base: 2, md: 4 }}
+                mb={3}
+              >
+                <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                  Deployer:
+                </Text>
+                <HStack
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
                   fontSize={{ base: "xs", md: "sm" }}
-                  cursor={"pointer"}
-                  gap={{ base: 2, md: 4 }}
-                  mb={3}
                 >
-                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                    Deployer:
-                  </Text>
-                  <HStack
-                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                    textDecoration={"underline"}
-                    fontSize={{ base: "xs", md: "sm" }}
+                  <Text
+                    cursor={"pointer"}
+                    maxW={{ base: "55%", md: "100%" }}
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    onClick={() =>
+                      navigate(`/did-info/${data?.data?.deployer}`)
+                    }
                   >
-                    <Text
-                      cursor={"pointer"}
-                      maxW={{ base: "55%", md: "100%" }}
-                      whiteSpace={"nowrap"} // Prevent the text from wrapping
-                      textOverflow={"ellipsis"}
-                      isTruncated
-                      onClick={() => navigate(`/did-info/${data?.data?.deployer}`)}
-                    >
-                      {data?.data?.deployer}
-                    </Text>
-                    <Text
-                      _hover={{ bg: "gray.50" }}
-                      transition={"0.5s"}
-                      rounded={"sm"}
-                      p={1}
-                      as={"span"}
-                      ml={1}
-                      cursor={"pointer"}
-                    >
-                      <MdContentCopy
-                        onClick={() => copyToClipboard(data?.data?.deployer)}
-                      />
-                    </Text>
-                  </HStack>
-                </Box>}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+                    {data?.data?.deployer}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(data?.data?.deployer)}
+                    />
+                  </Text>
+                </HStack>
+              </HStack>
+            )}
           </Box>
 
-
-
-
-
-
           <Box
             boxShadow={colorMode === "light" && "md"}
             bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
@@ -589,23 +609,25 @@ console.log(fullUrl);
                 </Box>
               )}
 
-{data?.data?.pledgeAmount&&<Box>
-                    <Text
-                      mb={2}
-                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
-                    >
-                      Pledge Amount:
-                    </Text>
-                    <Text
-                      display={"flex"}
-                      gap={2}
-                      alignItems={"center"}
-                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                    >
-                      <Image w={4} src={rbtLogoOutline} />
-                      {data?.data?.pledgeAmount}
-                    </Text>
-                  </Box>}
+              {data?.data?.pledgeAmount && (
+                <Box>
+                  <Text
+                    mb={2}
+                    color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                  >
+                    Pledge Amount:
+                  </Text>
+                  <Text
+                    display={"flex"}
+                    gap={2}
+                    alignItems={"center"}
+                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  >
+                    <Image w={4} src={rbtLogoOutline} />
+                    {data?.data?.pledgeAmount}
+                  </Text>
+                </Box>
+              )}
               {data?.data?.timestamp && (
                 <Box>
                   <Text>Timestamp</Text>
@@ -615,6 +637,54 @@ console.log(fullUrl);
                 </Box>
               )}
             </HStack>
+
+            <VStack w={'100%'} alignItems={'flex-start'}> 
+
+            <Box>
+                  <Text
+                    mb={2}
+                    color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                  >
+                    Token Link:
+                  </Text>
+                  {data?.data?.tokenList?.map(({value,tokenId })=>
+                  <Text
+                  display={"flex"}
+                  alignItems={"center"}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                  textDecoration={"underline"}
+                >
+                  <Text
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+
+                    fontSize={'sm'}
+                  >
+                    {tokenId}
+                  </Text>
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(tokenId)}
+                    />
+                  </Text>
+                </Text>
+
+                  
+                  
+                  
+                  )}
+                </Box>
+
+            </VStack>
           </Box>
 
           {extractedArray && (
@@ -625,7 +695,7 @@ console.log(fullUrl);
             />
           )}
 
-         {dataArray&& <TransactionTable data={dataArray} />}
+          {dataArray && <TransactionTable data={dataArray} />}
         </Container>
       </Box>
       <RelatedTransactions />