diff --git a/dev-dist/sw.js b/dev-dist/sw.js
index 4976af6..0958a25 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.5tjbmcd5mug"
+    "revision": "0.r1a5oko6jr"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
diff --git a/src/components/AmountCard/AmountCard.jsx b/src/components/AmountCard/AmountCard.jsx
index e051f56..db3e511 100644
--- a/src/components/AmountCard/AmountCard.jsx
+++ b/src/components/AmountCard/AmountCard.jsx
@@ -9,9 +9,12 @@ import {
   VStack,
 } from "@chakra-ui/react";
 import React from "react";
-import { FaFileAlt, FaShoppingCart } from "react-icons/fa";
+import { FaFileAlt, FaFileContract, FaMoneyCheckAlt, FaShoppingCart } from "react-icons/fa";
 import { FaClipboard, FaGlobe, FaWallet } from "react-icons/fa6";
-import { PiWalletFill } from "react-icons/pi";
+import { PiCircuitryFill, PiWalletFill } from "react-icons/pi";
+import { LiaFileContractSolid } from "react-icons/lia";
+import { TbTransactionDollar } from "react-icons/tb";
+import { BsRCircleFill } from "react-icons/bs";
 
 
 const AmountCard = () => {
@@ -40,7 +43,7 @@ const AmountCard = () => {
     {
       label: "Transaction",
       value: kpDetails?.data?.transactionCount,
-      icon: <FaGlobe color="white" fontSize={"20px"} />,
+      icon: <FaMoneyCheckAlt color="white" fontSize={"29px"} />,
     },
     {
       label: "DID count",
@@ -53,22 +56,22 @@ const AmountCard = () => {
     {
       label: "Total Supply",
       value: kpDetails?.data?.totalSupply,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <FaGlobe color="white" fontSize={"20px"} />,
     },
     {
       label: "Circulating Supply",
       value: kpDetails?.data?.circulatingSupply,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <PiCircuitryFill color="white" fontSize={"20px"} />,
     },
     {
       label: "Pledged RBT",
       value: kpDetails?.data?.pledgedRBT,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <BsRCircleFill color="white" fontSize={"20px"} />,
     },
     {
       label: "Number of smart contracts",
       value: kpDetails?.data?.numberContracts,
-      icon: <FaShoppingCart color="white" fontSize={"20px"} />,
+      icon: <FaFileContract color="white" fontSize={"20px"} />,
     },
   ];
 
diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
index 4fe6edf..96a46ec 100644
--- a/src/components/ChartsTabs.jsx
+++ b/src/components/ChartsTabs.jsx
@@ -50,11 +50,11 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   }
 
   // Setting defaultValue to '24 DayusHrs'
-  const options = ["24 Hrs", `${days} Days`, "12 Months"];
+  const options = ["24 Hrs", `30 Days`, "12 Months"];
 
   const { getRootProps, getRadioProps } = useRadioGroup({
     name: "framework",
-    defaultValue: "24 Hrs", // Default tab is set to '24 Hrs'
+    defaultValue: "12 Months", // Default tab is set to '24 Hrs'
     onChange: (value) => setSelectedValue(value),
   });
 
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index 14d3d9a..495bca7 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -30,7 +30,6 @@ ChartJS.register(
 
 
 function formatAndSortDataByDayName(data=[]) {
-  console.log("======", data);
 
   // Create a shallow copy of the data array before sorting
   const sortedData = [...data]?.sort((a, b) => a.dayId - b.dayId);
@@ -49,7 +48,7 @@ function formatAndSortDataByDayName(data=[]) {
 
 const LineChart = () => {
   const { colorMode } = useColorMode();
-  const [selectedValue, setSelectedValue] = useState("24 Hrs");
+  const [selectedValue, setSelectedValue] = useState("12 Months");
   const [labels, setLabels] = useState([]);
   const [dataset, setDataset] = useState([]);
 
@@ -89,7 +88,7 @@ const LineChart = () => {
       setLabels(dataLableDaily);
       // Generate random data for each day
       setDataset(dataSetDaily);
-    } else if (selectedValue === `${dayjs().daysInMonth()} Days`) {
+    } else if (selectedValue === `30 Days`) {
       // Create labels for the current month (days)
       setLabels(dataLableDate);
       // Generate random data for each day
@@ -141,14 +140,57 @@ const LineChart = () => {
       },
       tooltip: {
         callbacks: {
+          // Tooltip title: show the day or month name (depending on data)
+          title: function(tooltipItems) {
+            const index = tooltipItems[0]?.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return data?.dayName || data?.monthName || '';
+          },
+          // Show transaction count in the tooltip
           beforeLabel: function (tooltipItem) {
-            return `Transactions: $${tooltipItem.raw}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Transactions: ${data?.transactionCount}`;
           },
+          // Show total price in the tooltip
           label: function (tooltipItem) {
-            return `Price: $${tooltipItem.raw}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Price: $${data?.totalPrice}`;
           },
+          // Show gas fee in the tooltip
           afterLabel: function (tooltipItem) {
-            return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
+            const index = tooltipItem.dataIndex;
+            let data;
+            if (selectedValue === "24 Hrs") {
+              data = dailyData[index];
+            } else if (selectedValue === "30 Days") {
+              data = dateData?.data[index];
+            } else if (selectedValue === "12 Months") {
+              data = monthlyData[index];
+            }
+            return `Gas Fee: ${data?.totalGasFee}`;
           },
         },
         backgroundColor: "#fff",