diff --git a/src/Services/api.service.js b/src/Services/api.service.js
index 01494dd..250f1ea 100644
--- a/src/Services/api.service.js
+++ b/src/Services/api.service.js
@@ -10,31 +10,31 @@ export const rubix = createApi({
   }),
   tagTypes: [
     "getTransCount",
-    "getTransAll"
+    "getTransAll",
+    "getTransById",
+    "getMainNet"
   ],
   endpoints: (builder) => ({
 
-
     getTransCount: builder.query({
       query: () => `api/Analytics/Transactions/GetCount`,
       providesTags: ["getTransCount"],
     }),
 
-
-
     getTransAll: builder.query({
-      query: ({ pageNumber = 1, pageSize = 10 }) => 
-        `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
+      query: ({ pageNumber = 1, pageSize = 10 }) => `api/Analytics/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
       providesTags: ["getTransAll"],
     }),
     
     getTransById: builder.query({
-      query: (id) => 
-        `/api/Transaction/GetById/${id}`,
-      providesTags: ["getTransAll"],
+      query: (id) => `/api/Transaction/GetById/${id}`,
+      providesTags: ["getTransById"],
     }),
 
-
+    getMainNet: builder.query({
+      query: ({ pageNumber = 1, pageSize = 10 }) => `api/MainNet/Transactions/GetAll?pageNumber=${pageNumber}&pageSize=${pageSize}`,
+      providesTags: ["getMainNet"],
+    }),
 
   }),
 });
@@ -42,4 +42,5 @@ export const {
   useGetTransCountQuery,
   useGetTransAllQuery,
   useGetTransByIdQuery,
+  useGetMainNetQuery,
 } = rubix;
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index b269db8..e2c3c8f 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -22,15 +22,15 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
     const checkbox = getRadioProps();
 
     return (
-      <Box as="label" px={{ base: "6px", md: "px" }}>
+      <Box as="label" >
         <input {...input} />
         <Box
           {...checkbox}
           cursor="pointer"
           // borderWidth="1px"
-          borderRadius="xl"
+          borderRadius="md"
           // boxShadow="md"
-          fontSize={{ base: "xs", md: "sm" }}
+          fontSize={{ base: "xs", md: "xs" }}
           _checked={{
             bg: colorMode === "light" ? "#DEDBEB" : "#fff",
             color: "#000",
@@ -40,8 +40,8 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
             boxShadow: "outline",
           }}
           fontWeight={500}
-          py={2}
-          px={3}
+          py={1}
+          px={2}
         >
           {props.children}
         </Box>
@@ -61,13 +61,26 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   const group = getRootProps();
 
   return (
-    <HStack alignItems={"center"}  m={3} gap={1}>
-      <Text
-        fontWeight={500}
+    <HStack alignItems={"center"}   gap={1}>
+      
+
+
+      <HStack
+        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
+        p={1.5}
+        rounded={"12px"}
+        justifyContent={{ base: "flex-end" }}
+        gap={{ base: 0, md: 1 }}
+        {...group}
+        ps={3}
+      >
+        <Text
+        fontWeight={600}
         display={"flex"}
         alignItems={"center"}
-        fontSize={{ base: "xs", md: "sm" }}
+        fontSize={{ base: "xs", md: "xs" }}
         color={colorMode === 'light'?'gray.400':"#fff"}
+        
       >
         Last 
                 {/* <Icon
@@ -76,16 +89,6 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
           color={colorMode === "light" ? "gray.400" : "#fff"}
         /> */}
       </Text>
-
-
-      <HStack
-        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
-        p={2}
-        rounded={"18px"}
-        justifyContent={{ base: "flex-end" }}
-        gap={{ base: 0, md: 1 }}
-        {...group}
-      >
         {options.map((value) => {
           const radio = getRadioProps({ value });
           return (
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index cb0321b..8f19d9f 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -144,7 +144,7 @@ const LatestTransactions = () => {
         // bg={"#232127"}
         roundedTop={"lg"}
       >
-        <GridItem display={{ base: "none", md: "grid" }} p={2}>
+        <GridItem display={{ base: "none", md: "grid" }} p={2} ps={3}>
           <Text color={"#fff"}>Sr. no</Text>
         </GridItem>
         <GridItem p={2}>
@@ -162,7 +162,7 @@ const LatestTransactions = () => {
           gap={2}
           onClick={handleRefreshClick} // Trigger the rotation when clicked
         >
-          <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#7B7B7B"}>Last refresh {relativeRefreshTime} </Text>
+          <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
           <Icon
 
 bg={colorMode==="light"?'#fff':"#434147"}
@@ -181,7 +181,7 @@ rounded={"full"}
       <Box
         roundedBottom={"lg"}
         overflow={"hidden"}
-        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
+        boxShadow={colorMode === "light" ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" :"none"}
       >
         {transAll?.data?.items?.map(
           (
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 7a28217..38844b4 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -142,6 +142,8 @@ const Home = () => {
           >
             Latest Transactions
           </Heading>
+
+          
           <Link
             to="/view-all-transaction"
             style={{
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index 38f0418..7f7ac04 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -1,26 +1,50 @@
-import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
-import React, { useContext } from "react";
+import { Box, Container, Grid, GridItem, Heading, HStack, Icon, Image, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
 import bannerImage from "../assets/images/bannerImg.png";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import Pagination from "../components/Pagination";
 import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
 import ToastBox from "../components/ToastBox";
 import { Link, useNavigate } from "react-router-dom";
+import { useGetMainNetQuery } from "../Services/api.service";
+import { formatRelativeDate } from "../Constants/Constants";
+import rbtLogoOutline from "../assets/images/rubix-filled.svg";
 
 const MainNet = () => {
-
   const { overview } = useContext(GlobalStateContext);
   const { colorMode} = useColorMode();
   const navigate = useNavigate()
-
   const toast = useToast()
+
+
+  const [isRotating, setIsRotating] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
+  const [pageSize, setPageSize] = useState(10); // Number of items per page
+  const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
+  const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
+  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now"); 
+
+  const {
+    data: mainNetData,
+    isLoading: isMainNetDataLoading,
+    refetch: mainNetRefetch
+  } = useGetMainNetQuery({
+    pageNumber: currentPage,
+    pageSize: pageSize,
+  })
+
+  console.log(mainNetData);
+
+
+  useEffect(() => {
+    setTotalItems(mainNetData?.data?.totalCount);
+  }, [mainNetData]);
  
+
   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"} />
@@ -44,14 +68,14 @@ const MainNet = () => {
         <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
            Main Net - Overview
         </Heading>
-        <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
+        {/* <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>
+        </Text> */}
       </Container>
       <Box>
         <Container maxW="6xl">
@@ -71,236 +95,280 @@ const MainNet = () => {
             </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={{ base: "100% 0%", md: "10% 90%" }}
-               gap={0}
-             >
-               <GridItem
-                 display={{ base: "none", md: "grid" }}
-                 p={4}
-                 color={colorMode === "light" ? "#000" : "#fff"}
-               >
-                 {index + 1}.
-               </GridItem>
-               <GridItem  p={4}>
-                 {/* <Box> */}
-                 <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
-                   display={"flex"}
-                   fontSize={{base:"xs", md:"sm" }}
-                   mb={2}
-                   color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                 >
-                   <Text
-                     maxW={{base:"100%",md:"100%"}} // Set a max-width to control when the truncation happens
-                     // overflow={'hidden'} // Ensure overflow is hidden
-                     whiteSpace={"nowrap"} // Prevent the text from wrapping
-                     textOverflow={"ellipsis"}
-                     isTruncated 
-                     cursor={"pointer"}
-                     onClick={() =>
-                       navigate(`/transaction/${transaction?.description}`)
-                     }
-                   >
-                     {transaction.description}
-                   </Text>
- 
-                   <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={{base:"xs", md:"sm" }} gap={{base:2,md:4}} mb={2}>
-                   <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                     Sender:
-                   </Text>
- 
- 
-                   <HStack
-                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                     textDecoration={"underline"}
-                     w={'84%'}
-                     justifyContent={'space-between'}
-                     fontSize={{base:"xs", md:"sm" }}
-                   >
-                     <Text
-                       cursor={"pointer"} 
-                       maxW={{base:"90%",md:"100%"}} // Set a max-width to control when the truncation happens
-                       // overflow={'hidden'} // Ensure overflow is hidden
-                       whiteSpace={"nowrap"} // Prevent the text from wrapping
-                       textOverflow={"ellipsis"}
-                       isTruncated
-                       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={{base:"xs", md:"sm" }} cursor={"pointer"}  gap={{base:2,md:4}} mb={3}>
-                   <Text  color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
-                     Receiver:
-                   </Text>
-                   <HStack
-                     color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                     textDecoration={"underline"}
-                     fontSize={{base:"xs", md:"sm" }}
-                     overflow={"hidden"}
-                   >
-                     <Text
-                       cursor={"pointer"} 
-                       maxW={{base:"55%",md:"100%"}}
-                       whiteSpace={"nowrap"} // Prevent the text from wrapping
-                       textOverflow={"ellipsis"}
-                       isTruncated
-                       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
-                   flexDirection={{ base: "column", md: "row" }}
-                   justifyContent={{ base: "", md: "space-between" }}
-                   alignItems={{ base: "flex-start", md: "" }}
-                   // flexWrap={'wrap'}
- 
-                   // w={"80%"}
-                   w={{ base: "100%", md: "80%" }}
-                   fontSize={{ base: "xs", md: "sm" }}
-                   mb={3}
-                 >
-                   <Box>
-                     <Text
-                       mb={2}
-                       // fontSize={{base:"xs", md:"sm" }}
-                       color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
-                     >
-                       Smart contract ID :
-                     </Text>
-                     <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                       <Link to="/smart-contract">{transaction.contract}</Link>
-                     </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"}
-                   position={"relative"}
-                 >
-                   <Icon
-                     as={MdOutlineErrorOutline}
-                     fontSize={"18px"}
-                     display={{ base: "none", md: "block" }}
-                     style={{
-                       marginTop: "1px",
-                       position: "absolute",
-                       top: "2px",
-                       left: "-24px",
-                     }}
-                     color="#7B7B7B"
-                   />
- 
-                   <VStack fontSize={{base:"xs", md:"sm" }}>
-                     <HStack  w={"100%"} justifyContent={"flex-start"}>
-                       <Text
-                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
-                       >
-                         Transaction type :
-                       </Text>
-                       <Text
-                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
-                       >
-                         <Text>{transaction.transactionType}</Text>
-                       </Text>
-                     </HStack>
- 
-                     <HStack w={'100%'} justifyContent={'flex-start'}>
-                        <Text color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}>Main net :</Text>
-                        <Text cursor={'pointer'} onClick={()=>navigate(`/mainnet-id-overview/${transaction.subnetID}`)} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                         {transaction.subnetID}
-                        </Text>
-                      </HStack>
-                   </VStack>
-                 </HStack>
-                 {/* </Box> */}
-               </GridItem>
-             </Grid>
-            ))}
+          {mainNetData?.data?.items?.map(
+          (
+            {
+              transactionId,
+              smartContract,
+              sender,
+              receiver,
+              contract,
+              timestamp,
+              amount,
+              transactionType,
+              subNetworkId,
+            },
+            index
+          ) => (
+            <Grid
+              bg={
+                index % 2 === 0
+                  ? colorMode === "light"
+                    ? "#F2EFFF"
+                    : "#312F35"
+                  : colorMode === "light"
+                  ? "#fff"
+                  : "#232127"
+              }
+              key={transactionId}
+              templateColumns={{ base: "100% 0%", md: "10% 90%" }}
+              gap={0}
+            >
+              <GridItem
+                display={{ base: "none", md: "grid" }}
+                p={4}
+                color={colorMode === "light" ? "#000" : "#fff"}
+              >
+                {index + 1}.
+              </GridItem>
+              <GridItem p={4}>
+                {/* <Box> */}
+                <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
+                  display={"flex"}
+                  fontSize={{ base: "xs", md: "sm" }}
+                  mb={2}
+                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                >
+                  <Text
+                    maxW={{ base: "100%", md: "100%" }} // Set a max-width to control when the truncation happens
+                    // overflow={'hidden'} // Ensure overflow is hidden
+                    whiteSpace={"nowrap"} // Prevent the text from wrapping
+                    textOverflow={"ellipsis"}
+                    isTruncated
+                    cursor={"pointer"}
+                    onClick={() => navigate(`/transaction/${transactionId}`)}
+                  >
+                    {transactionId}
+                  </Text>
+
+                  <Text
+                    _hover={{ bg: "gray.50" }}
+                    transition={"0.5s"}
+                    rounded={"sm"}
+                    p={1}
+                    as={"span"}
+                    ml={1}
+                    cursor={"pointer"}
+                  >
+                    <MdContentCopy
+                      onClick={() => copyToClipboard(transactionId)}
+                    />
+                  </Text>
+                </Text>
+
+                <HStack
+                  fontSize={{ base: "xs", md: "sm" }}
+                  gap={{ base: 2, md: 4 }}
+                  mb={2}
+                >
+                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                    Sender:
+                  </Text>
+
+                  <HStack
+                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    textDecoration={"underline"}
+                    w={"84%"}
+                    // justifyContent={'space-between'}
+                    fontSize={{ base: "xs", md: "sm" }}
+                  >
+                    <Text
+                      cursor={"pointer"}
+                      maxW={{ base: "90%", md: "100%" }} // Set a max-width to control when the truncation happens
+                      // overflow={'hidden'} // Ensure overflow is hidden
+                      whiteSpace={"nowrap"} // Prevent the text from wrapping
+                      textOverflow={"ellipsis"}
+                      isTruncated
+                      onClick={() => navigate(`/did-info/${sender}`)}
+                    >
+                      {sender}
+                    </Text>
+                    <Text
+                      _hover={{ bg: "gray.50" }}
+                      transition={"0.5s"}
+                      rounded={"sm"}
+                      p={1}
+                      as={"span"}
+                      ml={1}
+                      cursor={"pointer"}
+                    >
+                      <MdContentCopy onClick={() => copyToClipboard(sender)} />
+                    </Text>
+                  </HStack>
+                </HStack>
+                <HStack
+                  fontSize={{ base: "xs", md: "sm" }}
+                  cursor={"pointer"}
+                  gap={{ base: 2, md: 4 }}
+                  mb={3}
+                >
+                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
+                    Receiver:
+                  </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/${receiver}`)}
+                    >
+                      {receiver}
+                    </Text>
+                    <Text
+                      _hover={{ bg: "gray.50" }}
+                      transition={"0.5s"}
+                      rounded={"sm"}
+                      p={1}
+                      as={"span"}
+                      ml={1}
+                      cursor={"pointer"}
+                    >
+                      <MdContentCopy
+                        onClick={() => copyToClipboard(receiver)}
+                      />
+                    </Text>
+                  </HStack>
+                </HStack>
+                <HStack
+                  flexDirection={{ base: "column", md: "row" }}
+                  justifyContent={{ base: "", md: "flex-start" }}
+                  gap={44}
+                  alignItems={{ base: "flex-start", md: "" }}
+                  // flexWrap={'wrap'}
+
+                  // w={"80%"}
+                  w={{ base: "100%", md: "80%" }}
+                  fontSize={{ base: "xs", md: "sm" }}
+                  mb={3}
+                >
+                  {smartContract && (
+                    <Box>
+                      <Text
+                        mb={2}
+                        // fontSize={{base:"xs", md:"sm" }}
+                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                      >
+                        Smart contract ID :
+                      </Text>
+                      <Text
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      >
+                        <Link to="/smart-contract">{smartContract}</Link>
+                      </Text>
+                    </Box>
+                  )}
+                  <Box>
+                    <Text
+                      mb={2}
+                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                    >
+                      Date and Time Stamp :
+                    </Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
+                      {formatRelativeDate(timestamp)}
+                    </Text>
+                  </Box>
+                  <Box>
+                    <Text
+                      mb={2}
+                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                    >
+                      Amount:
+                    </Text>
+                    <Text
+                      display={"flex"}
+                      gap={2}
+                      alignItems={"center"}
+                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                    >
+                      <Image w={4} src={rbtLogoOutline} />
+                      {amount}
+                    </Text>
+                  </Box>
+                </HStack>
+
+                <HStack
+                  fontSize={"sm"}
+                  alignItems={"flex-start"}
+                  position={"relative"}
+                >
+                  <Icon
+                    as={MdOutlineErrorOutline}
+                    fontSize={"18px"}
+                    display={{ base: "none", md: "block" }}
+                    style={{
+                      marginTop: "1px",
+                      position: "absolute",
+                      top: "2px",
+                      left: "-24px",
+                    }}
+                    color="#7B7B7B"
+                  />
+
+                  <VStack fontSize={{ base: "xs", md: "sm" }}>
+                    <HStack w={"100%"} justifyContent={"flex-start"}>
+                      <Text
+                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                      >
+                        Transaction type :
+                      </Text>
+                      <Text
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      >
+                        <Text>{transactionType}</Text>
+                      </Text>
+                    </HStack>
+
+                    <HStack>
+                      <Text
+                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
+                      >
+                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}{" "}
+                        :
+                      </Text>
+                      <Text
+                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+                      >
+                        <Link
+                          to={`/subnet-id-overview/${subNetworkId}`}
+                          style={{ fontWeight: "inherit" }}
+                        >
+                          {subNetworkId}
+                        </Link>
+                      </Text>
+                    </HStack>
+                  </VStack>
+                </HStack>
+                {/* </Box> */}
+              </GridItem>
+            </Grid>
+          )
+        )}
           </Box>
-          <Pagination />
+      <Pagination
+        pageSize={pageSize}
+        setPageSize={setPageSize}
+        totalItems={totalItems}
+        isLoading={isMainNetDataLoading}
+        setCurrentPage={setCurrentPage}
+        currentPage={currentPage}
+      />
         </Container>
       </Box>
     </Box>