diff --git a/src/Theme/Theme.js b/src/Theme/Theme.js
index 153f3d8..0267111 100644
--- a/src/Theme/Theme.js
+++ b/src/Theme/Theme.js
@@ -53,7 +53,19 @@ const customTheme = extendTheme({
       700: "#666666", // Dark gray
       800: "#4d4d4d", // Very dark gray
       900: "#333333", // Almost black
-    }
+    },
+    whiteScheme: {
+      50: "#ffffff",
+      100: "#ffffff",
+      200: "#ffffff",
+      300: "#ffffff",
+      400: "#ffffff",
+      500: "#ffffff",
+      600: "#ffffff",
+      700: "#ffffff",
+      800: "#ffffff",
+      900: "#ffffff",
+    },
     
   },
   components: {
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index 28c5a2d..4fe6edf 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -40,8 +40,8 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
             boxShadow: "outline",
           }}
           fontWeight={500}
-          py={1}
-          px={2}
+          py={{base:"3px",md: 1 }}
+          px={{base:"6px",md: 2 }}
         >
           {props.children}
         </Box>
@@ -61,7 +61,7 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   const group = getRootProps();
 
   return (
-    <HStack alignItems={"center"} gap={1}>
+    <HStack alignItems={"center"} gap={1} ml={{base:2,md:0}}>
       <Text
         fontWeight={600}
         display={"flex"}
@@ -78,7 +78,7 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
       </Text>
       <HStack
         bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
-        p={1.5}
+        p={{base : 1,md : 1.5}}
         rounded={"8px"}
         justifyContent={{ base: "flex-end" }}
         gap={{ base: 0, md: 1 }}
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index 62be87b..8bc68ee 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -155,6 +155,15 @@ const LineChart = () => {
         titleColor: "#4B4B4B",
         bodyColor: "#4B4B4B",
         displayColors: false,
+        padding: 12,
+        bodyFont: {
+          size: 14, // Increase the font size here
+          lineHeight: 1.3,
+          boxShadow:"3px 3px 3px #000"
+        },
+        boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Box shadow CSS
+        borderColor: "#ccc", // Optional: adding border to complement the shadow
+        borderWidth: 1,
       },
     },
     scales: {
@@ -166,13 +175,13 @@ const LineChart = () => {
           },
         },
         grid: {
-          drawBorder: false,
+          border:false,
           borderColor: 'transparent' // Remove the border on the Y-axis
         },
       },
       x: {
         grid: {
-          drawBorder: false,
+          border:false,
           borderColor: 'transparent' // Optionally remove the border on the X-axis
         },
       },
diff --git a/src/components/LatestTransactions/LatestTransactions.jsx b/src/components/LatestTransactions/LatestTransactions.jsx
index 552feb0..4fcabca 100644
--- a/src/components/LatestTransactions/LatestTransactions.jsx
+++ b/src/components/LatestTransactions/LatestTransactions.jsx
@@ -50,8 +50,7 @@ const LatestTransactions = () => {
   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 [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");
 
   const {
     data: transCount,
@@ -157,18 +156,23 @@ const LatestTransactions = () => {
           position={"absolute"}
           right={0}
           m={1.5}
-          display={'flex'}
-          alignItems={'center'}
+          display={"flex"}
+          alignItems={"center"}
           gap={2}
           onClick={handleRefreshClick} // Trigger the rotation when clicked
         >
-          <Text as={'span'} fontSize={'xs'} color={colorMode==="light"?'#fff':"#ccc"}>Last refresh {relativeRefreshTime} </Text>
+          <Text
+            as={"span"}
+            fontSize={"xs"}
+            color={colorMode === "light" ? "#fff" : "#ccc"}
+          >
+            Last refresh {relativeRefreshTime}{" "}
+          </Text>
           <Icon
-
-bg={colorMode==="light"?'#fff':"#434147"}
-p={1.5}
-boxSize={7}
-rounded={"full"}
+            bg={colorMode === "light" ? "#fff" : "#434147"}
+            p={1.5}
+            boxSize={7}
+            rounded={"full"}
             as={HiOutlineRefresh}
             animation={
               isRotating || isTransAllLoading
@@ -181,7 +185,11 @@ rounded={"full"}
       <Box
         roundedBottom={"lg"}
         overflow={"hidden"}
-        boxShadow={colorMode === "light" ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" :"none"}
+        boxShadow={
+          colorMode === "light"
+            ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"
+            : "none"
+        }
       >
         {transAll?.data?.items?.map(
           (
@@ -336,7 +344,7 @@ rounded={"full"}
                 <HStack
                   flexDirection={{ base: "column", md: "row" }}
                   justifyContent={{ base: "", md: "flex-start" }}
-                  gap={44}
+                  gap={{base:4,md:44}}
                   alignItems={{ base: "flex-start", md: "" }}
                   // flexWrap={'wrap'}
 
@@ -423,14 +431,11 @@ rounded={"full"}
                       </Text>
                     </HStack>
 
-                    
-
-                    <HStack w={"100%"} justifyContent={'flex-start'}>
+                    <HStack w={"100%"} justifyContent={"flex-start"}>
                       <Text
                         color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                       >
-                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}
-                        :
+                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}:
                       </Text>
                       <Text
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
diff --git a/src/pages/MainNet.jsx b/src/pages/MainNet.jsx
index e5b50db..70eaea2 100644
--- a/src/pages/MainNet.jsx
+++ b/src/pages/MainNet.jsx
@@ -317,6 +317,7 @@ rounded={"full"}
                         color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                         textDecoration={"underline"}
                         fontSize={{ base: "xs", md: "sm" }}
+                        isTruncated
                       >
                         <Text
                           cursor={"pointer"}
@@ -346,7 +347,7 @@ rounded={"full"}
                     <HStack
                       flexDirection={{ base: "column", md: "row" }}
                       justifyContent={{ base: "", md: "flex-start" }}
-                      gap={44}
+                      gap={{base:4,md:44}}
                       alignItems={{ base: "flex-start", md: "" }}
                       // flexWrap={'wrap'}
 
diff --git a/src/pages/Transaction/TransactionDetails.jsx b/src/pages/Transaction/TransactionDetails.jsx
index 5d7e24e..1d1f98f 100644
--- a/src/pages/Transaction/TransactionDetails.jsx
+++ b/src/pages/Transaction/TransactionDetails.jsx
@@ -331,7 +331,7 @@ const TransactionDetails = () => {
             mb={0}
             rounded={6}
           >
-            <HStack fontSize={"sm"} gap={"8rem"} mb={2}>
+            <HStack fontSize={"sm"} gap={{base:"4rem",md:"8rem"}} mb={2}>
               {data?.data?.amount && <Box>
                 <Text>Amount</Text>
                 <Text