diff --git a/src/assets/images/bannerImg.png b/src/assets/images/bannerImg.png
new file mode 100644
index 0000000..9f5f92f
Binary files /dev/null and b/src/assets/images/bannerImg.png differ
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index 43c0702..f9050fb 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -9,13 +9,107 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import React from "react";
+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 statsData = [
+    {
+      label: "RBT Price",
+      value: "$53,000",
+      icon: <FaWallet color="white" fontSize={"20px"} />,
+    },
+    {
+      label: "Transaction",
+      value: "2,300",
+      icon: <FaGlobe color="white" fontSize={"20px"} />,
+    },
+    {
+      label: "DID count",
+      value: "+3,052",
+      icon: <FaFileAlt color="white" fontSize={"20px"} />,
+    },
+  ];
+
+  const statsDataFour = [
+    {
+      label: "Total Supply",
+      value: "$173,000",
+      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+    },
+    {
+      label: "Circulating Supply",
+      value: "$173,000",
+      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+    },
+    {
+      label: "Pledged RBT",
+      value: "$173,000",
+      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+    },
+    {
+      label: "Pledged RBT",
+      value: "$173,000",
+      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+    },
+  ];
+
   return (
     <VStack>
+      <Container maxW="4xl">
+        <Grid
+          templateColumns="repeat(3, 2fr)"
+          gap={4}
+          bg={colorMode === "light" ? "light.100" : "black.900"}
+          justifyContent="center"
+          alignItems="center"
+        >
+          {statsData.map((item, index) => (
+            <GridItem
+              key={index}
+              bg={
+                colorMode === "light"
+                  ? "#230A7926"
+                  : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
+              }
+              display={"flex"}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+              p={3}
+              rounded={10}
+            >
+              <Box>
+                <Text
+                  fontSize={"sm"}
+                  color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+                >
+                  {item.label}
+                </Text>
+                <Text
+                  fontSize={"sm"}
+                  color={colorMode === "light" ? "#230A79" : "#fff"}
+                >
+                  {item.value}
+                </Text>
+              </Box>
+              <Box
+                backgroundColor={"#4023A6"}
+                w={30}
+                h={30}
+                display={"flex"}
+                alignItems={"center"}
+                justifyContent={"center"}
+                rounded={10}
+              >
+                {item.icon}
+              </Box>
+            </GridItem>
+          ))}
+        </Grid>
+      </Container>
       <Container maxW="6xl">
         <Grid
           templateColumns="repeat(4, 2fr)"
@@ -24,272 +118,47 @@ const AmountCard = () => {
           justifyContent="center"
           alignItems="center"
         >
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
+          {statsDataFour.map((item, index) => (
+            <GridItem
+              key={index}
+              bg={
+                colorMode === "light"
+                  ? "#230A7926"
+                  : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"
+              }
               display={"flex"}
+              justifyContent={"space-between"}
               alignItems={"center"}
-              justifyContent={"center"}
+              p={3}
               rounded={10}
             >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+              <Box>
+                <Text
+                  fontSize={"sm"}
+                  color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
+                >
+                  {item.label}
+                </Text>
+                <Text
+                  fontSize={"sm"}
+                  color={colorMode === "light" ? "#230A79" : "#fff"}
+                >
+                  {item.value}
+                </Text>
+              </Box>
+              <Box
+                backgroundColor={"#4023A6"}
+                w={30}
+                h={30}
+                display={"flex"}
+                alignItems={"center"}
+                justifyContent={"center"}
+                rounded={10}
               >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
-          <GridItem
-            bg={
-              colorMode === "light"
-                ? "#230A7926"
-                : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%)"
-            }
-            display={"flex"}
-            justifyContent={"space-between"}
-            alignItems={"center"}
-            p={3}
-            rounded={10}
-          >
-            <Box>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#A0AEC0"}
-              >
-                RBT Price
-              </Text>
-              <Text
-                fontSize={"sm"}
-                color={colorMode === "light" ? "#230A79" : "#fff"}
-              >
-                $53,000
-              </Text>
-            </Box>
-            <Box
-              backgroundColor={"#4023A6"}
-              w={30}
-              h={30}
-              display={"flex"}
-              alignItems={"center"}
-              justifyContent={"center"}
-              rounded={10}
-            >
-              <PiWalletFill color="white" fontSize={"20px"} />
-            </Box>
-          </GridItem>
+                {item.icon}
+              </Box>
+            </GridItem>
+          ))}
         </Grid>
       </Container>
     </VStack>
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 47e150b..e998b40 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -3,6 +3,7 @@ import React, { useContext } from "react";
 import { MdOutlineErrorOutline } from "react-icons/md";
 import Pagination from "../Pagination";
 import GlobalStateContext from "../../Contexts/GlobalStateContext";
+import { Link } from "react-router-dom";
 
 
 
@@ -45,7 +46,9 @@ 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"}>{transaction.sender}</Text>
+                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"} textDecoration={"underline"}>
+                      <Link>{transaction.sender}</Link>
+                    </Text>
                   </HStack>
                   <HStack fontSize={"sm"} gap={4} mb={3}>
                     <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>Receiver :</Text>
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index a3123dc..f30a203 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -53,7 +53,7 @@ const NavBar = () => {
         id="navbar"
         // bg={colorMode === "light" ? "light" : "black.900"}
         color={colorMode === "light" ? "light" : "black.900"}
-        padding={"15px 0px"}
+        padding={"22px 0px"}
         // borderBottom={"1px solid #ccc"}
         borderBottom={colorMode === "light" ? "1px solid #ccc" : "none"}
       >
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
index 7a620d7..4615e0c 100644
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -60,7 +60,7 @@ const Pagination = ({
           className="link pointer"
           isDisabled={currentPage === 1}
           aria-label="Previous Page"
-          bg={colorMode === "light" ? "light.100" : "#757575"}
+          bg={colorMode === "light" ? "light.100" : "#232127"}
           border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
         >
           Previous
@@ -87,7 +87,7 @@ const Pagination = ({
           className="link pointer"
           isDisabled={currentPage === totalPages}
           aria-label="Previous Page"
-          bg={colorMode === "light" ? "light.100" : "#757575"}
+          bg={colorMode === "light" ? "light.100" : "#232127"}
           border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
         >
           Next
diff --git a/src/components/SwitchBtn/SwitchBtn.jsx b/src/components/SwitchBtn/SwitchBtn.jsx
index 315c91b..b402354 100644
--- a/src/components/SwitchBtn/SwitchBtn.jsx
+++ b/src/components/SwitchBtn/SwitchBtn.jsx
@@ -19,8 +19,8 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
           display="flex"
           justifyContent="normal"
           alignItems="center"
-          width="90px"
-          height="45px"
+          width="80px"
+          height="35px"
           borderRadius="50px"
           // backgroundColor={"#27262B"}
           onClick={switch_onChange_handle}
@@ -29,15 +29,15 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
           _before={{
             content: '""',
             position: "absolute",
-            width: "32px",
-            height: "32px",
+            width: "28px",
+            height: "28px",
             borderRadius: "50%",
             backgroundColor: colorMode === "light" ? "#fff" : "#D9D9D933",
             boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
-            transform: isSwitchOn ? "translateX(48px)" : "translateX(0)",
+            transform: isSwitchOn ? "translateX(42px)" : "translateX(0)",
             transition: "transform 0.2s",
             left: "5px",
-            top:"6px"
+            top:"3px"
           }}
         >
           <Icon
@@ -48,7 +48,7 @@ const SwitchBtn = ({ isSwitchOn, setIsSwitchOn }) => {
             position="absolute"
             left={isSwitchOn ? "10px" : "auto"}
             right={isSwitchOn ? "auto" : "10px"}
-            fontSize={"25px"}
+            fontSize={"24px"}
           />
         </Box>
       </Stack>
diff --git a/src/components/SwitchBtn/SwitchCharts.jsx b/src/components/SwitchBtn/SwitchCharts.jsx
index ac8a69a..5e5070e 100644
--- a/src/components/SwitchBtn/SwitchCharts.jsx
+++ b/src/components/SwitchBtn/SwitchCharts.jsx
@@ -24,8 +24,8 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
           display="flex"
           justifyContent="normal"
           alignItems="center"
-          width="150px"
-          height="45px"
+          width="130px"
+          height="40px"
           borderRadius="10px"
           // backgroundColor={"#27262B"}
           onClick={switch_onChange_handle}
@@ -34,20 +34,20 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
           _before={{
             content: '""',
             position: "absolute",
-            width: "60px",
-            height: "32px",
+            width: "40px",
+            height: "25px",
             borderRadius: "10px",
-            backgroundColor: "#fff",
+            backgroundColor: colorMode === "light" ? "#DEDBEB" : "#fff", // Correct usage of backgroundColor
             boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
             transform: isSwitchOn ? "translateX(80px)" : "translateX(0)",
             transition: "transform 0.2s",
-            left: "5px",
-            top: "6px",
+            left: "4px",
+            top: "7px",
           }}
+          
         >
           <Text
-            
-         color={colorMode === "light" ? "#000" : "#ccc"}
+            color={colorMode === "light" ? "#000" : "#ccc"}
             fontWeight="400"
             zIndex={1}
             position="absolute"
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index c797a12..e58f376 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -19,6 +19,7 @@ import SwitchCharts from "../components/SwitchBtn/SwitchCharts";
 import LatestTransactions from "../components/LatestTransactions/LatestTransactions";
 import { Link } from "react-router-dom";
 import Pagination from "../components/Pagination";
+import bannerImage from "../assets/images/bannerImg.png";
 
 const Home = () => {
   const [isSwitchOn, setIsSwitchOn] = useState(true);
@@ -26,9 +27,11 @@ const Home = () => {
 
   return (
     <>
-      <Box 
-        // bg={colorMode === "light" ? "#fff" : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 0.5) 91.2%);"}
-        bg={colorMode === "light" ? "#fff" : "#000"}
+      <Box
+        bg={colorMode === "light" ? "#fff" : "none"}
+        backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"}
+        backgroundSize="contain"
+        backgroundRepeat="no-repeat"
       >
         <VStack mb={"5rem"}>
           <Container maxW="container.sm" position={"relative"}>
@@ -37,21 +40,24 @@ const Home = () => {
                 width={"100%"}
                 size="sm"
                 bg={colorMode === "light" ? "light.100" : "#393939"}
-                border={"none"}
+                // border={"none"}
                 rounded={5}
               >
                 <Input
+                  roundedLeft={8}
+                  w={"77%"}
                   border={`1px solid ${
                     colorMode === "light" ? "#230A79" : "#393939"
                   }`}
                   h={"42px"}
                   type="search"
                   placeholder="Search by Transaction hash, token hash , DID or smart contract"
-                  rounded="md"
-                  focusBorderColor="#3725EA"
-                  // value={searchTerm}
                   onChange={(e) => setSearchTerm(e.target.value)}
                   _placeholder={colorMode === "light" ? "red" : "red"}
+                  _focusVisible={{
+                    borderColor:
+                      colorMode === "light" ? "none" : "1px solid #230A79",
+                  }}
                 />
                 <Button
                   zIndex={99}
@@ -61,9 +67,12 @@ const Home = () => {
                   right={"0"}
                   top={"0"}
                   fontSize={"sm"}
+                  rounded={0}
                   border={`1px solid ${
                     colorMode === "light" ? "#230A79" : "#393939"
                   }`}
+                  borderLeft={0}
+                  borderRight={0}
                   bg={colorMode === "light" ? "transparent" : "#565252"}
                   _hover={{
                     border: `1px solid ${
@@ -80,9 +89,8 @@ const Home = () => {
                 pointerEvents="none"
                 position={"inherit"}
                 right={"0"}
-                // bg={"#393939"}
                 h={"42px"}
-                rounded={7}
+                roundedRight={7}
                 w={"42px"}
                 display={"flex"}
                 justifyContent={"center"}