diff --git a/src/Constants/Constants.js b/src/Constants/Constants.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/Constants/Constants.js
@@ -0,0 +1 @@
+
diff --git a/src/assets/images/search.png b/src/assets/images/search.png
new file mode 100644
index 0000000..f7679e2
Binary files /dev/null and b/src/assets/images/search.png differ
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index f9050fb..ee56ff4 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -13,8 +13,9 @@ import { FaFileAlt, FaShoppingCart } from "react-icons/fa";
 import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
 import { PiWalletFill } from "react-icons/pi";
 
+
 const AmountCard = () => {
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { colorMode} = useColorMode();
 
   const statsData = [
     {
@@ -61,6 +62,7 @@ const AmountCard = () => {
     <VStack>
       <Container maxW="4xl">
         <Grid
+          mb={2}
           templateColumns="repeat(3, 2fr)"
           gap={4}
           bg={colorMode === "light" ? "light.100" : "black.900"}
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index e998b40..c13bedf 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -1,17 +1,37 @@
 import { Box, Container, Grid, GridItem, HStack, Text, useColorMode } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { MdOutlineErrorOutline } from "react-icons/md";
+import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
 import Pagination from "../Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import { Link } from "react-router-dom";
+import ToastBox from "../ToastBox";
 
 
 
 const LatestTransactions = () => {
 
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { colorMode} = useColorMode();
   const { transactions } = useContext(GlobalStateContext);
 
+
+ 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>
       <Container maxW="6xl">
@@ -46,13 +66,17 @@ const LatestTransactions = () => {
                   </Text>
                   <HStack fontSize={"sm"} gap={4} mb={2}>
                     <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Sender :</Text>
-                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
-                      <Link>{transaction.sender}</Link>
-                    </Text>
+                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                      <Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
+                    </HStack>
                   </HStack>
                   <HStack fontSize={"sm"} gap={4} mb={3}>
                     <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
-                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>{transaction.receiver}</Text>
+                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                      <Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
+                    </HStack>
                   </HStack>
                   <HStack
                     display={"flex"}
@@ -89,12 +113,14 @@ const LatestTransactions = () => {
                       <HStack>
                         <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Transaction type :</Text>
                         <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                          {transaction.transactionType}
+                        <Link to="/transaction" style={{fontWeight:"inherit"}}>{transaction.transactionType}</Link>
                         </Text>
                       </HStack>
                       <HStack>
                         <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Subnet ID/Main net :</Text>
-                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>{transaction.subnetID}</Text>
+                        <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                         <Link to="/subnet-inner" style={{fontWeight:"inherit"}}>{transaction.subnetID}</Link>
+                        </Text>
                       </HStack>
                     </Box>
                   </HStack>
diff --git a/src/components/RelatedTransactions/RelatedTransactions.jsx b/src/components/RelatedTransactions/RelatedTransactions.jsx
new file mode 100644
index 0000000..1ad2846
--- /dev/null
+++ b/src/components/RelatedTransactions/RelatedTransactions.jsx
@@ -0,0 +1,23 @@
+import { Box, Container, Heading, HStack, Image, Text, useColorMode } from '@chakra-ui/react'
+import React from 'react'
+import Search from '../../assets/images/search.png'
+
+const RelatedTransactions = () => {
+    const { colorMode} = useColorMode();
+    
+  return (
+    <Box p={"4rem 0"} bg={colorMode === "light" ? "#F3F3F3" : "#101015"}>
+       <Container maxW="6xl">
+          <Heading fontSize={"md"} fontWeight={400}>
+            Related transactions info
+          </Heading>
+          <HStack justifyContent={"center"} mt={10}>
+            <Image w={"40px"} src={Search}/>
+            <Text as={"span"} color={"#787878"}>No records found</Text>
+          </HStack>
+       </Container>
+    </Box>
+  )
+}
+
+export default RelatedTransactions
diff --git a/src/components/ToastBox.jsx b/src/components/ToastBox.jsx
new file mode 100644
index 0000000..bbddff2
--- /dev/null
+++ b/src/components/ToastBox.jsx
@@ -0,0 +1,24 @@
+
+import { Box, Text } from "@chakra-ui/react";
+import React from "react";
+import { FaCheck } from "react-icons/fa";
+import { IoWarningOutline } from "react-icons/io5";
+
+const ToastBox = ({ message, status }) => {
+  return (
+    <Box
+      className="web-text-large d-flex gap-2 align-items-center"
+      p={3}
+      color={status === "error" ? "red.500" : status === "warn" ?  "blue.500" : "green.500"}
+      bg={"#fff"}
+      boxShadow={'md'}
+      rounded={'md'}
+    >
+
+      {status === "error" || status === "warn" ? <IoWarningOutline /> : <FaCheck /> }
+      <Text as={"span"}>{message}</Text>
+    </Box>
+  );
+};
+
+export default ToastBox;
diff --git a/src/index.css b/src/index.css
index f2d0c7b..4271550 100644
--- a/src/index.css
+++ b/src/index.css
@@ -59,6 +59,11 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
+a:hover {
+  color: inherit !important;
+  font-weight: inherit;
+}
+
 @media (prefers-color-scheme: light) {
   :root {
     color: #213547;
diff --git a/src/pages/DidInfo.jsx b/src/pages/DidInfo.jsx
new file mode 100644
index 0000000..736764a
--- /dev/null
+++ b/src/pages/DidInfo.jsx
@@ -0,0 +1,54 @@
+import {
+    Box,
+    Container,
+    Divider,
+    Heading,
+    HStack,
+    Text,
+    useColorMode,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import { MdContentCopy} from "react-icons/md";
+  import { Link } from "react-router-dom";
+  import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
+  import bannerImage from "../assets/images/bannerImg.png";
+  
+  const DidInfo = () => {
+    const { colorMode } = useColorMode();
+  
+    return (
+      <>
+          <Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
+           backgroundRepeat="no-repeat" pb={"8rem"}>
+           <Container maxW="6xl" pt={"8rem"}>
+                <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}>
+                  <Text color={"#969696"} fontSize={"sm"}>DID</Text>
+                  <HStack fontSize={"sm"}>
+                    <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>   
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                    </HStack>
+                  </HStack>
+                  <Divider mt={4} mb={5} />
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Balance</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Link  style={{ fontWeight: "inherit" }}>$ 10000.12345</Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                  </HStack>
+              </Box>
+            </Container>
+          </Box>
+          <RelatedTransactions />
+      </>
+    );
+  };
+  
+  export default DidInfo;
+  
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index e58f376..78d54d9 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -45,7 +45,7 @@ const Home = () => {
               >
                 <Input
                   roundedLeft={8}
-                  w={"77%"}
+                  w={"76%"}
                   border={`1px solid ${
                     colorMode === "light" ? "#230A79" : "#393939"
                   }`}
@@ -78,6 +78,8 @@ const Home = () => {
                     border: `1px solid ${
                       colorMode === "light" ? "#230A79" : "#393939"
                     }`,
+                    borderLeft:"0px",
+                    borderRight:"0px",
                     outline: "0px",
                   }}
                   _focus={{ outline: "none" }}
@@ -118,7 +120,7 @@ const Home = () => {
               justifyContent={"space-between"}
               alignItems={"center"}
             >
-              <Heading fontSize={"md"}>Transaction History</Heading>
+              <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
               <SwitchCharts
                 isSwitchOn={isSwitchOn}
                 setIsSwitchOn={setIsSwitchOn}
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index c757629..bbd11a6 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -1,7 +1,6 @@
 import { Box, Container, Grid, GridItem, Heading, HStack, Select, Text, useColorMode } from "@chakra-ui/react";
 import React, { useContext } from "react";
-import { Link } from "react-router-dom";
-import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
+import bannerImage from "../assets/images/bannerImg.png";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Pagination from "../components/Pagination";
 import { MdOutlineErrorOutline } from "react-icons/md";
@@ -9,10 +8,10 @@ import { MdOutlineErrorOutline } from "react-icons/md";
 const MainNet = () => {
 
   const { overview } = useContext(GlobalStateContext);
-  const { colorMode, toggleColorMode } = useColorMode();
+  const { colorMode} = useColorMode();
 
   return (
-    <Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
+    <Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
         maxW="6xl"
         color="white"
diff --git a/src/pages/SmartContract.jsx b/src/pages/SmartContract.jsx
new file mode 100644
index 0000000..c078422
--- /dev/null
+++ b/src/pages/SmartContract.jsx
@@ -0,0 +1,149 @@
+import {
+    Box,
+    Container,
+    Divider,
+    HStack,
+    Text,
+    useColorMode,
+  } from "@chakra-ui/react";
+  import React from "react";
+  import { MdContentCopy} from "react-icons/md";
+  import { Link } from "react-router-dom";
+  import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
+  import bannerImage from "../assets/images/bannerImg.png";
+  
+  const Transaction = () => {
+    const { colorMode } = useColorMode();
+  
+    return (
+      <>
+          <Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
+           backgroundRepeat="no-repeat" pb={"5rem"}>
+           <Container maxW="6xl" pt={"8rem"}>
+              <Heading mb={5} fontSize={"sm"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+               Smart Contract Info
+              </Heading>
+              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <Text color={"#969696"} fontSize={"sm"}>Smart Contract Token</Text>
+                  <HStack fontSize={"sm"}>
+                  <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}>abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%&</Link>   
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+                  </HStack>
+                  <Divider mt={4} mb={5} />
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Transaction ID</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+                  <Text fontSize={"md"} mb={2} color={colorMode === "light" ? "#230A79" : "#fff"}>
+                     Block
+                  </Text>
+                  <HStack fontSize={"sm"} gap={4} mb={2}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Block ID:
+                    </Text>
+                    <HStack
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        textDecoration={"underline"}
+                    >
+                        <Link style={{ fontWeight: "inherit" }}>
+                            abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz
+                            !"§ $%&
+                        </Link>
+                        <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                        </Text>
+                    </HStack>
+                  </HStack>
+                  <HStack fontSize={"sm"} gap={4} mb={3}>
+                    <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                       Block Hash:
+                    </Text>
+                    <Text
+                        display={"flex"}
+                        alignItems={"center"}
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        textDecoration={"underline"}
+                    >
+                        <Link style={{ fontWeight: "inherit" }}>
+                            abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
+                        </Link>
+                        <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
+                        </Text>
+                    </Text>
+                  </HStack>
+                  <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>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Executor</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Deployer</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Creator</Text>
+                  <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+                  <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
+                      <Box>
+                          <Text>Pledge amount</Text>
+                          <Text color={"#A1A1A1"}>$ 100</Text>
+                      </Box>
+                      <Box>
+                          <Text>Timestamp</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"}>
+                      <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+              <Box 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>
+                      <Text as={"span"} ml={5} cursor={"pointer"}>
+                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                      </Text>
+                  </HStack>
+              </Box>
+            </Container>
+          </Box>
+          <RelatedTransactions />
+      </>
+    );
+  };
+  
+  export default Transaction;
+  
\ No newline at end of file
diff --git a/src/pages/Subnet.jsx b/src/pages/Subnet.jsx
index 38a3def..964da80 100644
--- a/src/pages/Subnet.jsx
+++ b/src/pages/Subnet.jsx
@@ -5,6 +5,7 @@ import LatestTransactions from "../components/LatestTransactions/LatestTransacti
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Pagination from "../components/Pagination";
 import { MdOutlineErrorOutline } from "react-icons/md";
+import bannerImage from "../assets/images/bannerImg.png";
 
 const Subnet = () => {
 
@@ -12,7 +13,7 @@ const Subnet = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
-    <Box p={"10rem 0 4rem 0"} bg={colorMode === "light" ? "#fff" : "#000"}>
+    <Box p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
       <Container
         maxW="6xl"
         color="white"
diff --git a/src/pages/SubnetInner.jsx b/src/pages/SubnetInner.jsx
new file mode 100644
index 0000000..ca73909
--- /dev/null
+++ b/src/pages/SubnetInner.jsx
@@ -0,0 +1,194 @@
+import { Box, Container, Grid, GridItem, Heading, HStack, Link, Select, Text, useColorMode } from "@chakra-ui/react";
+import React, { useContext } 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";
+
+const SubnetInner = () => {
+
+  const { overview } = useContext(GlobalStateContext);
+  const { colorMode} = useColorMode();
+
+  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 p={"10rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
+      <Container
+        maxW="6xl"
+        color="white"
+        display={"flex"}
+        justifyContent={"space-between"}
+        mb={10}
+      >
+        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"}>
+           Main Net - A1B2C3D4E5
+        </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>
+      </Container>
+      <Box>
+        <Container maxW="6xl">
+          <Grid
+            templateColumns="10% 90%"
+            gap={0}
+            bg={colorMode === "light" ? "#230A79" : "#232127"}
+            // bg={"#232127"}
+            borderTopRightRadius={4}
+            borderTopLeftRadius={4}
+          >
+            <GridItem p={2}>
+              <Text color={"#fff"}>Sr. no</Text>
+            </GridItem>
+            <GridItem p={2}>
+              <Text color={"#fff"}>Transactions</Text>
+            </GridItem>
+          </Grid>
+          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
+            {overview.map((transaction, index) => (
+                <Grid
+                bg={
+                    index % 2 === 0
+                    ? colorMode === "light"
+                        ? "#F2EFFF"
+                        : "#312F35"
+                    : colorMode === "light"
+                    ? "#fff"
+                    : "#232127"
+                }
+                key={transaction.id}
+                templateColumns="10% 90%"
+                gap={0}
+                >
+                <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"}
+                    >
+                        {transaction.description}
+                    </Text>
+                    <HStack fontSize={"sm"} gap={4} mb={2}>
+                        <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Sender :
+                        </Text>
+                        <Text display={"flex"} alignItems={"center"} color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                            <Link style={{fontWeight:"inherit"}}>{transaction.sender}</Link>
+                            <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.sender)} /></Text>
+                        </Text>
+                    </HStack>
+                    <HStack fontSize={"sm"} gap={4} mb={3}>
+                        <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                        Receiver :
+                        </Text>
+                        <Text display={"flex"} alignItems={"center"} color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                            <Link style={{fontWeight:"inherit"}}>{transaction.receiver}</Link>
+                            <Text as={"span"} ml={5} cursor={"pointer"}><MdContentCopy onClick={()=> copyToClipboard(transaction.receiver)} /></Text>
+                        </Text>
+                    </HStack>
+                    <HStack
+                        display={"flex"}
+                        justifyContent={"space-between"}
+                        w={"80%"}
+                        fontSize={"sm"}
+                        mb={3}
+                    >
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Smart contract ID dd :
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.contract}
+                        </Text>
+                        </Box>
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Date and Time Stamp :
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.date}
+                        </Text>
+                        </Box>
+                        <Box>
+                        <Text
+                            mb={2}
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                        >
+                            Amount:
+                        </Text>
+                        <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                        >
+                            {transaction.amount}
+                        </Text>
+                        </Box>
+                    </HStack>
+                    <HStack fontSize={"sm"} alignItems={"flex-start"}>
+                        <MdOutlineErrorOutline
+                        fontSize={"20px"}
+                        style={{ paddingTop: "4px" }}
+                        />
+                        <Box>
+                        <HStack>
+                            <Text
+                            color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                            >
+                            Transaction type :
+                            </Text>
+                            <Text
+                            color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                            >
+                            {transaction.transactionType}
+                            </Text>
+                        </HStack>
+                        </Box>
+                    </HStack>
+                    </Box>
+                </GridItem>
+                </Grid>
+            ))}
+          </Box>
+          <Pagination />
+        </Container>
+      </Box>
+    </Box>
+  );
+};
+
+export default SubnetInner;
diff --git a/src/pages/Transaction.jsx b/src/pages/Transaction.jsx
new file mode 100644
index 0000000..8447cd8
--- /dev/null
+++ b/src/pages/Transaction.jsx
@@ -0,0 +1,132 @@
+import {
+  Box,
+  Container,
+  Divider,
+  Heading,
+  HStack,
+  Text,
+  useColorMode,
+} from "@chakra-ui/react";
+import React from "react";
+import { MdContentCopy} from "react-icons/md";
+import { Link } from "react-router-dom";
+import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
+import bannerImage from "../assets/images/bannerImg.png";
+
+const Transaction = () => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <>
+        <Box backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} backgroundSize="cover"
+         backgroundRepeat="no-repeat" pb={"5rem"}>
+         <Container maxW="6xl" pt={"8rem"}>
+            <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}>
+                <Text color={"#969696"} fontSize={"sm"}>Transaction ID</Text>
+                <HStack fontSize={"sm"}>
+                  <HStack color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>   
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.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"}
+                  >
+                    <Link style={{ fontWeight: "inherit" }}>
+                        abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
+                    </Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                     <MdContentCopy onClick={() => copyToClipboard(transaction.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"}
+                  >
+                    <Link style={{ fontWeight: "inherit" }}>
+                      abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz!"§ $%&
+                    </Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                    <MdContentCopy onClick={() => copyToClipboard(transaction.receiver)}/>
+                    </Text>
+                  </Text>
+                </HStack>
+            </Box>
+            <Box 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>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                </HStack>
+                <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Sender</Text>
+                <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                </HStack>
+                <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Receiver</Text>
+                <HStack fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                    <Link  style={{ fontWeight: "inherit" }}> abc5def6ghi7jkl8mno9pqrs2tuv5wxyzabcdefghijklmnopqrs5674577tuvwxyz !"§ $%& </Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                </HStack>
+            </Box>
+            <Box 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"}>
+                    <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                </HStack>
+            </Box>
+            <Box 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>
+                    <Text as={"span"} ml={5} cursor={"pointer"}>
+                        <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
+                    </Text>
+                </HStack>
+            </Box>
+          </Container>
+        </Box>
+        <RelatedTransactions />
+    </>
+  );
+};
+
+export default Transaction;
diff --git a/src/routes/_routes.jsx b/src/routes/_routes.jsx
index 9facc83..ad1ef6d 100644
--- a/src/routes/_routes.jsx
+++ b/src/routes/_routes.jsx
@@ -2,6 +2,10 @@
 import Home from "../pages/Home";
 import MainNet from "../pages/MainNet";
 import Subnet from "../pages/Subnet";
+import SubnetInner from "../pages/SubnetInner";
+import Transaction from "../pages/Transaction";
+import SmartContract from "../pages/SmartContract";
+import DidInfo from "../pages/DidInfo";
 
 export const route = [
   {
@@ -16,4 +20,20 @@ export const route = [
     path: "/subnet",
     element: <Subnet />,
   },
+  {
+    path: "/subnet-inner",
+    element: <SubnetInner />,
+  },
+  {
+    path: "/transaction",
+    element: <Transaction />,
+  },
+  {
+    path: "/smart-contract",
+    element: <SmartContract />,
+  },
+  {
+    path: "/did-info",
+    element: <DidInfo />,
+  },
 ];