diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index d76fd73..15aeba9 100644
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.4ngos72cbag"
+    "revision": "0.0iof9eg3rjg"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/Services/api.service.js b/src/Services/api.service.js
index f5a6eb3..01494dd 100644
--- a/src/Services/api.service.js
+++ b/src/Services/api.service.js
@@ -28,7 +28,11 @@ export const rubix = createApi({
       providesTags: ["getTransAll"],
     }),
     
-
+    getTransById: builder.query({
+      query: (id) => 
+        `/api/Transaction/GetById/${id}`,
+      providesTags: ["getTransAll"],
+    }),
 
 
 
@@ -36,5 +40,6 @@ export const rubix = createApi({
 });
 export const {
   useGetTransCountQuery,
-  useGetTransAllQuery
+  useGetTransAllQuery,
+  useGetTransByIdQuery,
 } = rubix;
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
index 1f98df0..289504d 100644
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -50,10 +50,11 @@ const Pagination = ({
   };
 
   return (
-    <HStack mt={14} display={"flex"} justifyContent={"end"}>
+    <HStack mt={{base:5,md : 14}} display={"flex"} justifyContent={{base:"space-around",md:"end"}}>
       <Box className="pagination-controls" display={"flex"} fontSize={"sm"} alignItems={"center"}>
-        <Text>Rows per page :</Text>
+        <Text display={{base:"none",md :"block"}}>Rows per page :</Text>
         <Select
+          display={{base:"none",md :"block"}}
           mx={4}
           width={"60px"}
           rounded="md"
@@ -67,7 +68,7 @@ const Pagination = ({
         </Select>
 
         {/* Display the current page range and total items */}
-        <Text mx={5}>
+        <Text mx={5} display={{base:"none",md :"block"}}>
           {displayRange.start}-{displayRange.end} of {totalItems}
         </Text>
 
@@ -97,6 +98,21 @@ const Pagination = ({
             <FiChevronLeft />
           </Button>
 
+          <Select
+            display={{base:"block",md :"none"}}
+            border={"none"}
+            mx={4}
+            width={"60px"}
+            rounded="md"
+            size="xs"
+            value={pageSize}
+            onChange={handlePageSizeChange} // Handle page size change
+          >
+            <option value={10}>10</option>
+            <option value={20}>20</option>
+            <option value={30}>30</option>
+          </Select>
+
           <Button
             bg={"none"}
             p={0}
diff --git a/src/pages/MainNetIdOverview.jsx b/src/pages/MainNetIdOverview.jsx
index ccf99e7..84e727c 100644
--- a/src/pages/MainNetIdOverview.jsx
+++ b/src/pages/MainNetIdOverview.jsx
@@ -59,17 +59,17 @@ const MainNetOveriew = () => {
       <Box>
         <Container maxW="6xl">
           <Grid
-            templateColumns="10% 90%"
+            templateColumns={{ base: "100% 0%", md: "10% 90%" }}
             gap={0}
             bg={colorMode === "light" ? "#230A79" : "#232127"}
             // bg={"#232127"}
             borderTopRightRadius={4}
             borderTopLeftRadius={4}
           >
-            <GridItem p={2}>
+            <GridItem p={2} display={{ base: "none", md: "grid" }}>
               <Text color={"#fff"}>Sr. no</Text>
             </GridItem>
-            <GridItem p={2}>
+            <GridItem p={2} >
               <Text color={"#fff"}>Transactions</Text>
             </GridItem>
           </Grid>
@@ -182,6 +182,7 @@ const MainNetOveriew = () => {
                       color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                       textDecoration={"underline"}
                       fontSize={{base:"xs", md:"sm" }}
+                      isTruncated
                     >
                       <Text
                         cursor={"pointer"} 
diff --git a/src/pages/SmartContract.jsx b/src/pages/SmartContract.jsx
index 40e453c..0d6ee98 100644
--- a/src/pages/SmartContract.jsx
+++ b/src/pages/SmartContract.jsx
@@ -14,6 +14,7 @@ import {
   import RelatedTransactions from "../components/RelatedTransactions/RelatedTransactions";
   import bannerImage from "../assets/images/bannerImg.png";
 import ToastBox from "../components/ToastBox";
+import TransactionTable from "./Transaction/TransactionTable";
   
   const Transaction = () => {
     const { colorMode } = useColorMode();
@@ -176,7 +177,7 @@ import ToastBox from "../components/ToastBox";
                       </Text>
                   </HStack>
               </Box>
-              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={5} rounded={6}>
+              <Box bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"} p={4} mb={0} rounded={6}>
                   <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
                       <Box>
                           <Text>Pledge amount</Text>
@@ -187,37 +188,8 @@ import ToastBox from "../components/ToastBox";
                           <Text color={"#A1A1A1"}>18 hours ago, 29/07/2024</Text>
                       </Box>
                   </HStack>
-                  <Text color={colorMode === "light" ? "#000" : "#fff"} fontSize={"sm"}>Quorum list</Text>
-                  <HStack whiteSpace={"nowrap"} // Prevent the text from wrapping
-                    textOverflow={"ellipsis"}
-                    isTruncated 
-                    cursor={"pointer"} fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Text 
-                      whiteSpace={"nowrap"} // Prevent the text from wrapping
-                      textOverflow={"ellipsis"}
-                      isTruncated> 
-                      <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
-                    </Text> 
-                      <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
-                    cursor={"pointer"}  fontSize={"sm"} pb={3} color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
-                    <Text 
-                      whiteSpace={"nowrap"} // Prevent the text from wrapping
-                      textOverflow={"ellipsis"}
-                      isTruncated>
-                        <Link  style={{ fontWeight: "inherit" }}>bafybmibqle4w7k6acjbznk6ksapiyfwff6vwbwyaqx25wmzagt3awzbeky</Link>
-                    </Text>  
-                      <Text  as={"span"} ml={5} cursor={"pointer"}>
-                          <MdContentCopy onClick={() => copyToClipboard(transaction.sender)}/>
-                      </Text>
-                  </HStack>
               </Box>
+              <TransactionTable />
             </Container>
           </Box>
           <RelatedTransactions />
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 9cf8a93..e242008 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -16,12 +16,25 @@ import bannerImage from "../../assets/images/bannerImg.png";
 import ToastBox from "../../components/ToastBox";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import TransactionTable from "./TransactionTable";
+import { useGetTransByIdQuery } from "../../Services/api.service";
 
 const TransactionDetails = () => {
   const navigate = useNavigate();
   const params = useParams();
   const { colorMode } = useColorMode();
   console.log(params?.id);
+
+
+  const {
+    data,
+    isLoading,
+    refetch,
+    errors,
+  } = useGetTransByIdQuery(params?.id);
+
+  console.log(data?.data?.netWorkType);
+  
+  
   // Scroll to top when component mounts or params change
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
@@ -213,7 +226,7 @@ const TransactionDetails = () => {
                 isTruncated
                 cursor={"pointer"}
               >
-                {filteredData?.sender}
+                {data?.data?.netWorkType}
               </Text>
               <Text
                 _hover={{ bg: "gray.50" }}
@@ -248,7 +261,7 @@ const TransactionDetails = () => {
                 isTruncated
                 cursor={"pointer"}
               >
-                {filteredData?.sender}
+                {data?.data?.sender}
               </Text>
               <Text
                 _hover={{ bg: "gray.50" }}
@@ -283,7 +296,7 @@ const TransactionDetails = () => {
                 isTruncated
                 cursor={"pointer"}
               >
-                {filteredData?.receiver}
+                {data?.data?.receiver}
               </Text>
               <Text
                 _hover={{ bg: "gray.50" }}
@@ -304,10 +317,10 @@ const TransactionDetails = () => {
             boxShadow={colorMode === "light" && "md"}
             bg={colorMode === "light" ? "#F3F3F3" : "#1D1D1D"}
             p={4}
-            mb={5}
+            mb={0}
             rounded={6}
           >
-            <HStack fontSize={"sm"} gap={"8rem"} mb={5}>
+            <HStack fontSize={"sm"} gap={"8rem"} mb={2}>
               <Box>
                 <Text>Amount</Text>
                 <Text color={"#A1A1A1"}>$ 100</Text>
@@ -317,81 +330,6 @@ const TransactionDetails = () => {
                 <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
-                fontWeight={"inherit"}
-                whiteSpace={"nowrap"} // Prevent the text from wrapping
-                textOverflow={"ellipsis"}
-                isTruncated
-                cursor={"pointer"}
-              >
-                {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
-                fontWeight={"inherit"}
-                whiteSpace={"nowrap"} // Prevent the text from wrapping
-                textOverflow={"ellipsis"}
-                isTruncated
-                cursor={"pointer"}
-              >
-                {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>
           <TransactionTable />
         </Container>
diff --git a/src/pages/Transaction/TransactionTable.jsx b/src/pages/Transaction/TransactionTable.jsx
index 37819ce..9484adb 100644
--- a/src/pages/Transaction/TransactionTable.jsx
+++ b/src/pages/Transaction/TransactionTable.jsx
@@ -1,73 +1,53 @@
-import {
-    Badge,
-    Box,
-    Button,
-    Container,
-    Heading,
-    HStack,
-    Icon,
-    Image,
-    Input,
-    InputGroup,
-    Select,
-    Text,
-    useColorMode,
-    VStack,
-  } from "@chakra-ui/react";
-  import React, { useContext, useEffect, useState } from "react";
-  import { useNavigate, useParams } from "react-router-dom";
+import { Box, Text, useColorMode } from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
 import NormalTable from "../../components/DataTable/NormalTable";
-  
-  const TransactionTable = () => {
-    const { subnetId } = useContext(GlobalStateContext);
-    const [isLoading, setIsLoading] = useState(false);
-    const { colorMode } = useColorMode();
-    const navigate = useNavigate();
-  
-    useEffect(() => {
-      setIsLoading(true);
-      const timer = setTimeout(() => {
-        setIsLoading(false); 
-      }, 500);
-      return () => clearTimeout(timer);
-    }, []);
-  
-    // ===============================[ Table Header ]
-    const tableHeadRow = [
-      "Sr. no",
-      "Subnet ID",
-      "Transaction count",
-    ];
-  
-    // const extractedArray = reportsHistory.map((item)=>({ }))
-    const extractedArray = subnetId.map((item, index) => ({
-      "Sr. no": (
-        <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
-          {index + 1}
-        </Text>
-      ),
-      "Subnet ID": (
-          <Box color={colorMode === "light"? "#230A79" : "#B09AFF"}  onClick={() =>
-              navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}>
-            {item?.subnetId}
-           </Box>
-       ),
-      "Transaction count": item?.transactionCount,
-    }));
-    return (
+
+const TransactionTable = () => {
+  const { subnetId } = useContext(GlobalStateContext);
+  const [isLoading, setIsLoading] = useState(false);
+  const { colorMode } = useColorMode();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setIsLoading(true);
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  // ===============================[ Table Header ]
+  const tableHeadRow = ["Sr. no", "Quorum DID", "Pledge Token(s)"];
+
+  // const extractedArray = reportsHistory.map((item)=>({ }))
+  const extractedArray = subnetId.map((item, index) => ({
+    "Sr. no": (
+      <Text as={"span"} display={"flex"} gap={2} alignItems={"center"}>
+        {index + 1}
+      </Text>
+    ),
+    "Quorum DID": (
       <Box
-        pt={"2rem"}
+        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
+        onClick={() => navigate(`/subnet-id-overview/${row["Subnet Id"]}`)}
       >
-          <NormalTable
-              emptyMessage={`We don't have any Sponers `}
-              tableHeadRow={tableHeadRow}
-              data={extractedArray}
-              isLoading={isLoading}
-          />
+        {item?.subnetId}
       </Box>
-    );
-  };
-  
-  export default TransactionTable;
-  
\ No newline at end of file
+    ),
+    "Pledge Token(s)": item?.transactionCount,
+  }));
+  return (
+    <Box pt={5}>
+      <NormalTable
+        emptyMessage={`We don't have any Sponers `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={isLoading}
+      />
+    </Box>
+  );
+};
+
+export default TransactionTable;