diff --git a/src/Contexts/GlobalStateProvider.jsx b/src/Contexts/GlobalStateProvider.jsx
index cc70110..ff82013 100644
--- a/src/Contexts/GlobalStateProvider.jsx
+++ b/src/Contexts/GlobalStateProvider.jsx
@@ -10,7 +10,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 1,
       description:
-        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mnojhdj9pqrs2tuv5wxys2tuv5wxy',
       sender: 'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ',
       receiver:
         'abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ',
@@ -23,7 +23,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 2,
       description:
-        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5de7euuf6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
       sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       contract:"A1B2C3D4E5F6G",
@@ -35,7 +35,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 3,
       description:
-        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbjfu8c5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
       sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       contract:"A1B2C3D4E5F6G",
@@ -47,7 +47,7 @@ const GlobalStateProvider = ({ children }) => {
     {
       id: 4,
       description:
-        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbc5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
+        'abc5def6ghi7jkl8mno9pqrs2tuv5wxyzbjfhfi9c5def6ghi7jkl8mno9pqrs2tuv5wxys2tuv5wxy',
       sender: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       receiver: "abcdefghiklmnopqrstuvwxyzABCDEGHIJKLMNOPQRSTUVWXYZ",
       contract:"A1B2C3D4E5F6G",
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index 2fe7a57..11230db 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -108,6 +108,7 @@ const AmountCard = () => {
                 alignItems={"center"}
                 justifyContent={"center"}
                 rounded={10}
+                p={2}
               >
                 {item.icon}
               </Box>
@@ -162,6 +163,7 @@ const AmountCard = () => {
                 alignItems={"center"}
                 justifyContent={"center"}
                 rounded={10}
+                p={2}
               >
                 {item.icon}
               </Box>
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index d7c5acb..de97e0c 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -3,13 +3,14 @@ import React, { useContext } from "react";
 import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
 import Pagination from "../Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import ToastBox from "../ToastBox";
 
 
 
 const LatestTransactions = () => {
   const toast = useToast()
+  const navigate = useNavigate()
 
   const { colorMode} = useColorMode();
    const { transactions } = useContext(GlobalStateContext);
@@ -40,8 +41,7 @@ const LatestTransactions = () => {
           gap={0}
           bg={colorMode === "light" ? "#230A79" : "#232127"}
           // bg={"#232127"}
-          borderTopRightRadius={4}
-          borderTopLeftRadius={4}
+          roundedTop={'lg'}
         >
           <GridItem p={2}>
             <Text color={"#fff"}>Sr. no</Text>
@@ -50,7 +50,7 @@ const LatestTransactions = () => {
             <Text color={"#fff"}>Transactions</Text>
           </GridItem>
         </Grid>
-        <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+        <Box  roundedBottom={'lg'} overflow={'hidden'} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
           {transactions.map((transaction, index) => (
             <Grid
               bg={index % 2 === 0 ? (colorMode === "light" ? "#F2EFFF" : "#312F35") : (colorMode === "light" ? "#fff" : "#232127")}
@@ -61,21 +61,28 @@ const LatestTransactions = () => {
               <GridItem p={4} color={colorMode === "light" ? "#000" : "#fff"}>{index + 1}.</GridItem>
               <GridItem p={4}>
                 <Box>
-                  <Text fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Link to="/did-info"> {transaction.description}</Link>
+                  <Text display={'flex'} fontSize={"sm"} mb={2} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Link to={`/transaction/${transaction?.description}`}> {transaction.description}</Link>
+                    
+                  <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.description)}/>
+                      </Text>
                   </Text>
+
                   <HStack fontSize={"sm"} gap={4} mb={2}>
                     <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
                     <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
-                      <Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
-                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
+                      <Text cursor={"pointer"} onClick={()=> navigate(`/did-info/${transaction.sender}`)}  >{transaction.sender}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
                     </HStack>
                   </HStack>
-                  <HStack fontSize={"sm"} gap={4} mb={3}>
+                  <HStack cursor={'pointer'} fontSize={"sm"} gap={4} mb={3}>
                     <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
-                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
-                      <Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
-                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
+                    <HStack  color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                      <Text onClick={()=> navigate(`/did-info/${transaction.receiver}`)} >{transaction.receiver}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
                     </HStack>
                   </HStack>
                   <HStack
@@ -121,7 +128,7 @@ const LatestTransactions = () => {
                       <HStack>
                         <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
                         <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                         <Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
+                         <Link to={`/subnet-id-overview/${transaction.subnetID}`} style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
                         </Text>
                       </HStack>
                       
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index d2a6e12..ab48f86 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,32 +1,27 @@
-/* eslint-disable no-unused-vars */
 import {
   Box,
-  Button,
   Container,
-  Icon,
   Image,
-  Stack,
-  Switch,
   useColorMode,
-  VStack,
 } from "@chakra-ui/react";
-import { Outlet, Link, useLocation, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom";
 import logo from "../../assets/images/rubix.png";
 import logoLight from "../../assets/images/rubixlogo.svg";
 import { useEffect, useState } from "react";
 import SwitchBtn from "../SwitchBtn/SwitchBtn";
 
 const NavBar = () => {
-  // const [isHoveredCommunity, setIsHoveredCommunity] = useState(false);
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const { colorMode, toggleColorMode } = useColorMode();
+  const [isScrolled, setIsScrolled] = useState(false); // Declare isScrolled state
+  const { colorMode } = useColorMode();
   const [isSwitchOn, setIsSwitchOn] = useState(true);
 
   useEffect(() => {
     const handleScroll = () => {
       const scrollPosition = window.scrollY;
-      setIsScrolled(scrollPosition > 0);
+      setIsScrolled(scrollPosition > 0); // Update isScrolled based on scroll position
     };
+    
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
@@ -40,8 +35,6 @@ const NavBar = () => {
     };
   }, []);
 
-  const theme = localStorage?.getItem("light");
-
   return (
     <>
       <Box
@@ -51,12 +44,9 @@ const NavBar = () => {
         top={0}
         left={0}
         id="navbar"
-        // bg={colorMode === "light" ? "light" : "black.900"}
         color={colorMode === "light" ? "light" : "black.900"}
         padding={"16px 0px"}
-        // borderBottom={"1px solid #ccc"}
         borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
-        // boxShadow={'md'}
       >
         <Container maxW="6xl">
           <Box
@@ -78,7 +68,9 @@ const NavBar = () => {
                 style={({ isActive }) => ({
                   fontSize: "14px",
                   fontWeight: "400",
-                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for MAIN NET
+                  borderBottom: isActive
+                    ? "1px solid #DE858E"
+                    : "0px solid #fff", // Active style for MAIN NET
                 })}
               >
                 MAIN NET
@@ -88,7 +80,9 @@ const NavBar = () => {
                 style={({ isActive }) => ({
                   fontSize: "14px",
                   fontWeight: "400",
-                  borderBottom: isActive ? "1px solid #DE858E" : "0px solid #fff", // Active style for SUBNETS
+                  borderBottom: isActive
+                    ? "1px solid #DE858E"
+                    : "0px solid #fff", // Active style for SUBNETS
                 })}
               >
                 SUBNETS
@@ -101,7 +95,6 @@ const NavBar = () => {
           </Box>
         </Container>
       </Box>
-      {/* <Box h={"74px"}></Box> */}
     </>
   );
 };
diff --git a/src/index.css b/src/index.css
index 5e9fa8d..371f632 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,3 +76,8 @@ a:hover {
     background-color: #f9f9f9;
   }
 }
+
+
+.link{
+  background-color: '#ccc' !important;
+}
\ No newline at end of file
diff --git a/src/pages/DidInfo.jsx b/src/pages/DidInfo.jsx
index 0281d44..b1f4b9a 100644
--- a/src/pages/DidInfo.jsx
+++ b/src/pages/DidInfo.jsx
@@ -10,13 +10,14 @@ import {
   } from "@chakra-ui/react";
   import React from "react";
   import { MdContentCopy} from "react-icons/md";
-  import { Link } from "react-router-dom";
+  import { Link, useParams } from "react-router-dom";
   import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
   import bannerImage from "../assets/images/bannerImg.png";
 import ToastBox from "../components/ToastBox";
   
   const DidInfo = () => {
     const { colorMode } = useColorMode();
+    const params = useParams()
 
     const toast = useToast()
  
@@ -38,18 +39,18 @@ import ToastBox from "../components/ToastBox";
   }
   
     return (
-      <>
-          <Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
+      <Box h={"100vh"}display={'flex'} justifyContent={'space-between'} flexDirection={'column'}>
+          <Box  backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
            backgroundRepeat="no-repeat" pb={"8rem"}>
-           <Container maxW="6xl" pt={"8rem"}>
+           <Container  maxW="6xl" pt={"6rem"}>
                 <Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
                 DID Info
               </Heading>
-              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                   <Text color={"#969696"} fontSize={"sm"}>DID</Text>
                   <HStack fontSize={"sm"}>
                     <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>   
+                      <Link  style={{ fontWeight: "inherit" }}> {params?.id}</Link>   
                       <Text as={"span"} ml={5} cursor={"pointer"}>
                           <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
                       </Text>
@@ -67,7 +68,7 @@ import ToastBox from "../components/ToastBox";
             </Container>
           </Box>
           <RelatedTransactions />
-      </>
+      </Box>
     );
   };
   
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index d8850a9..1a9a286 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -32,7 +32,7 @@ const MainNet = () => {
   }
 
   return (
-    <Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
+    <Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
         maxW="6xl"
         color="white"
@@ -190,7 +190,7 @@ const MainNet = () => {
                           <Text
                             color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                           >
-                            <Link to="/subnet-inner">{transaction.subnetID}</Link>
+                            <Link to="/subnet-id-overview">{transaction.subnetID}</Link>
                           </Text>
                         </HStack>
                       </Box>
diff --git a/src/pages/SmartContract.jsx b/src/pages/SmartContract.jsx
index 8e4c4d9..f02dbc7 100644
--- a/src/pages/SmartContract.jsx
+++ b/src/pages/SmartContract.jsx
@@ -8,7 +8,7 @@ import {
     useColorMode,
     useToast,
   } from "@chakra-ui/react";
-  import React from "react";
+  import React, { useEffect } from "react";
   import { MdContentCopy} from "react-icons/md";
   import { Link } from "react-router-dom";
   import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
@@ -17,6 +17,9 @@ import ToastBox from "../components/ToastBox";
   
   const Transaction = () => {
     const { colorMode } = useColorMode();
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
+      }, []);
 
     const toast = useToast()
  
diff --git a/src/pages/Subnet.jsx b/src/pages/Subnet.jsx
index 6b46db4..599ad67 100644
--- a/src/pages/Subnet.jsx
+++ b/src/pages/Subnet.jsx
@@ -33,7 +33,7 @@ const Subnet = () => {
   }
 
   return (
-    <Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
+    <Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
         maxW="6xl"
         color="white"
@@ -42,7 +42,7 @@ const Subnet = () => {
         mb={10}
       >
         <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
-           Main Net - Overview
+        Subnet ID  - Overview
         </Heading>
         <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
           View total number of records
@@ -191,7 +191,7 @@ const Subnet = () => {
                             <Text
                             color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                             >
-                            <Link to="/subnet-inner">{transaction.subnetID}</Link>
+                            <Link to="/subnet-id-overview">{transaction.subnetID}</Link>
                             </Text>
                         </HStack>
                         </Box>
diff --git a/src/pages/SubnetInner.jsx b/src/pages/SubnetIdOverview.jsx
similarity index 94%
rename from src/pages/SubnetInner.jsx
rename to src/pages/SubnetIdOverview.jsx
index 29b9c7a..b873ddc 100644
--- a/src/pages/SubnetInner.jsx
+++ b/src/pages/SubnetIdOverview.jsx
@@ -1,17 +1,22 @@
 import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode, useToast } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import React, { useContext, useEffect } from "react";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Pagination from "../components/Pagination";
 import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
 import ToastBox from "../components/ToastBox";
 import bannerImage from "../assets/images/bannerImg.png";
+import { useParams } from "react-router-dom";
 
 const SubnetInner = () => {
 
   const { overview } = useContext(GlobalStateContext);
   const { colorMode} = useColorMode();
+  const params = useParams()
 
   const toast = useToast()
+  useEffect(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
+  }, []);
  
   function copyToClipboard(text) {
     navigator.clipboard
@@ -31,7 +36,7 @@ const SubnetInner = () => {
   }
 
   return (
-    <Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
+    <Box p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
         maxW="6xl"
         color="white"
@@ -40,7 +45,7 @@ const SubnetInner = () => {
         mb={10}
       >
         <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
-           Main Net - A1B2C3D4E5
+        Subnet ID  - {params?.id}
         </Heading>
         <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
           View total number of records
diff --git a/src/pages/Transaction.jsx b/src/pages/Transaction.jsx
index 1703dad..44493e5 100644
--- a/src/pages/Transaction.jsx
+++ b/src/pages/Transaction.jsx
@@ -45,7 +45,7 @@ const Transaction = () => {
             <Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
               Transaction Info
             </Heading>
-            <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+            <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                 <Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
                 <HStack fontSize={"sm"}>
                   <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
@@ -92,7 +92,7 @@ const Transaction = () => {
                   </Text>
                 </HStack>
             </Box>
-            <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+            <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                 <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
                 <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                     <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
@@ -115,7 +115,7 @@ const Transaction = () => {
                     </Text>
                 </HStack>
             </Box>
-            <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+            <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
                 <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
                     <Box>
                         <Text>Amount</Text>
@@ -134,7 +134,7 @@ const Transaction = () => {
                     </Text>
                 </HStack>
             </Box>
-            <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
+            <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
                 <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
                 <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                     <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
new file mode 100644
index 0000000..1433918
--- /dev/null
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -0,0 +1,167 @@
+import {
+    Box,
+    Container,
+    Divider,
+    Heading,
+    HStack,
+    Text,
+    useColorMode,
+    useToast,
+  } from "@chakra-ui/react";
+  import React, { useContext, useEffect, useState } from "react";
+  import { MdContentCopy} from "react-icons/md";
+  import { Link, useNavigate, useParams } from "react-router-dom";
+  import RelatedTransactions from "../../components/RelatedTransactions/RelatedTransactions";
+  import bannerImage from "../../assets/images/bannerImg.png";
+  import ToastBox from "../../components/ToastBox";
+import GlobalStateContext from "../../Contexts/GlobalStateContext";
+  
+  const TransactionDetails = () => {
+    const navigate = useNavigate()
+    const params = useParams()
+    const { colorMode } = useColorMode();
+  console.log(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
+  }, [params]);
+
+
+
+
+  const { transactions } = useContext(GlobalStateContext);
+   const filteredData = transactions?.find((item)=> item?.description === params?.id)
+   console.log(filteredData);
+    const toast = useToast()
+   
+    function copyToClipboard(text) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          // console.log('Text copied to clipboard');
+          // alert('Text copied to clipboard');
+          toast({
+            render: () => (
+              <ToastBox status={"warn"} message={"Text copied to clipboard"} />
+            ),
+          });
+        })
+        .catch((err) => {
+          console.error("Failed to copy text: ", err);
+        });
+    }
+  
+    return (
+      <>
+          <Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
+           backgroundRepeat="no-repeat" pb={"5rem"}>
+           <Container maxW="6xl" pt={"6rem"}>
+              <Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+                Transaction Info
+              </Heading>
+              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
+                  <HStack fontSize={"sm"}>
+                    <HStack color={colorMode === "light" ? "gray.400" : "gray.100"}>
+                      <Text> {filteredData?.description} </Text>   
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                    </HStack>
+                  </HStack>
+                  <Divider mt={4} mb={5} />
+                  <Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
+                      Super Title
+                  </Text>
+                  <HStack fontSize={"sm"} gap={4} mb={2}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Token ID :</Text>
+                    <HStack
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      textDecoration={"underline"}
+                    >
+                      <Text>
+                          {filteredData?.sender}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                       <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                    </HStack>
+                  </HStack>
+                  <HStack fontSize={"sm"} gap={4} mb={3}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                      Block ID :
+                    </Text>
+                    <Text
+                      display={"flex"}
+                      alignItems={"center"}
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      textDecoration={"underline"}
+                    >
+                      <Text>
+                      {filteredData?.receiver}
+                      </Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                      <MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
+                      </Text>
+                    </Text>
+                  </HStack>
+              </Box>
+              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Network</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Text  style={{ fontWeight: "inherit" }}> {filteredData?.sender} </Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                  </HStack>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Sender</Text>
+                  <HStack  fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Text onClick={()=> navigate(`/did-info/${filteredData.sender}`)} style={{ fontWeight: "inherit" }}> {filteredData?.sender} </Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                  </HStack>
+                  <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/${filteredData.receiver}`)} style={{ fontWeight: "inherit" }}> {filteredData?.receiver}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.receiver)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
+                      <Box>
+                          <Text>Amount</Text>
+                          <Text color={"#A1A1A1"}>$ 100</Text>
+                      </Box>
+                      <Box>
+                          <Text>$ 100</Text>
+                          <Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
+                      </Box>
+                  </HStack>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Text  style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+              <Box boxShadow={colorMode === 'light'&&"md"}  bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} rounded={6}>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Pledge Token</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Text  style={{ fontWeight: "inherit" }}>{filteredData?.receiver}</Text>
+                      <Text _hover={{bg:"gray.50"}} transition={'0.5s'}  rounded={'sm'} p={1} as={"span"} ml={1} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(filteredData.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+            </Container>
+          </Box>
+          <RelatedTransactions />
+      </>
+    );
+  };
+  
+  export default TransactionDetails;
+  
\ No newline at end of file
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index dd6d800..6f3f2a0 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -2,10 +2,11 @@
 import Home from "../pages/Home";
 import MainNet from "../pages/MainNet";
 import Subnet from "../pages/Subnet";
-import SubnetInner from "../pages/SubnetInner";
+import SubnetInner from "../pages/SubnetIdOverview";
 import Transaction from "../pages/Transaction";
 import SmartContract from "../pages/SmartContract";
 import DidInfo from "../pages/DidInfo";
+import TransactionDetails from "../pages/Transaction/TransactionDetails";
 
 export const route = [
   {
@@ -21,19 +22,24 @@ export const route = [
     element: <Subnet />,
   },
   {
-    path: "/subnet-inner",
+    path: "/subnet-id-overview/:id",
     element: <SubnetInner />,
   },
   {
     path: "/transaction",
     element: <Transaction />,
   },
+
+  {
+    path: "/transaction/:id",
+    element: <TransactionDetails />,
+  },
   {
     path: "/smart-contract",
     element: <SmartContract />,
   },
   {
-    path: "/did-info",
+    path: "/did-info/:id",
     element: <DidInfo />,
   },
 ];