diff --git a/src/components/ChartsTabs.jsx b/src/components/ChartsTabs.jsx
new file mode 100644
index 0000000..04aa665
--- /dev/null
+++ b/src/components/ChartsTabs.jsx
@@ -0,0 +1,61 @@
+import { Box, HStack, useRadio, useRadioGroup } from '@chakra-ui/react';
+
+function ChartsTabs() {
+  // This function represents the RadioCard part
+  function RadioCard(props) {
+    const { getInputProps, getRadioProps } = useRadio(props);
+    const input = getInputProps();
+    const checkbox = getRadioProps();
+
+    return (
+      <Box as='label'>
+        <input {...input} />
+        <Box 
+          {...checkbox}
+          cursor='pointer'
+          borderWidth='1px'
+          borderRadius='md'
+          boxShadow='md'
+          _checked={{
+            bg: '#4023A6',
+            color: 'white',
+            borderColor: '#4023A6',
+          }}
+          _focus={{
+            boxShadow: 'outline',
+          }}
+          px={4}
+          py={1}
+        >
+          {props.children}
+        </Box>
+      </Box>
+    );
+  }
+
+  // Setting defaultValue to 'Daily'
+  const options = ['Daily', 'Monthly', 'Yearly'];
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name: 'framework',
+    defaultValue: 'Daily', // Default tab is set to 'Daily'
+    onChange: console.log,
+  });
+
+  const group = getRootProps();
+
+  return (
+    <HStack {...group}>
+      {options.map((value) => {
+        const radio = getRadioProps({ value });
+        return (
+          <RadioCard key={value} {...radio}>
+            {value}
+          </RadioCard>
+        );
+      })}
+    </HStack>
+  );
+}
+
+export default ChartsTabs;
diff --git a/src/components/Doughnut/LineChart.jsx b/src/components/Doughnut/LineChart.jsx
index dd5bb11..f98792a 100644
--- a/src/components/Doughnut/LineChart.jsx
+++ b/src/components/Doughnut/LineChart.jsx
@@ -1,12 +1,17 @@
 // LineChart.js
-import React from 'react';
+import React, { useState } from 'react';
 import { Line } from 'react-chartjs-2';
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from 'chart.js';
+import { BsBorderWidth } from 'react-icons/bs';
+import { border, Box, Heading, Radio, RadioGroup, Stack } from '@chakra-ui/react';
+import ChartsTabs from '../ChartsTabs';
 
 // Register the components of Chart.js you need
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
 
 const LineChart = () => {
+
+
     const data = {
         labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
         datasets: [
@@ -14,14 +19,16 @@ const LineChart = () => {
                 label: 'Transaction Data',
                 data: [1000, 3000, 2000, 3500, 4000, 3000, 5000, 6000, 5000, 4500, 4800, 5200],
                 borderColor: '#978FED',
-                backgroundColor: 'rgba(75, 192, 192, 0.2)',
-                fill: true,
-                // tension: 0.4,
+                // backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                // fill: true,
+                tension: 0.3,
                 pointRadius: 4,
-                pointBackgroundColor: 'white',
-                pointBorderColor: 'blue',
-                pointHoverRadius: 7,
+                pointBackgroundColor: '#232127',
+                pointBorderColor: '#978FED',
+                pointHoverRadius: 5,
                 pointHoverBackgroundColor: '#978FED',
+                borderWidth: 2,
+                pointBorder:0
             },
         ],
     };
@@ -29,31 +36,35 @@ const LineChart = () => {
     const options = {
         responsive: true,
         plugins: {
+          legend: {
+            display:false
+          },
             tooltip: {
-                callbacks: {
-                  enabled: true, // Enable/disable tooltip
-                mode: 'index', // Display all items at the same index (can use 'nearest' or other modes)
-                intersect: false, 
-                    label: function (tooltipItem) {
-                        return `Price: $${tooltipItem.raw}`;
-                    },
-                    afterLabel: function (tooltipItem) {
-                        return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
-                    },
-                },
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                titleColor: '#fff',
-                bodyColor: '#fff',
+              callbacks: {
+                 enabled: true, // Enable/disable tooltip
+                  mode: 'index', // Display all items at the same index (can use 'nearest' or other modes)
+                  intersect: false, 
+                  beforeLabel: function (tooltipItem) {
+                      return `Transactions: $${tooltipItem.raw}`;
+                  },
+                  label: function (tooltipItem) {
+                      return `Price: $${tooltipItem.raw}`;
+                  },
+                  afterLabel: function (tooltipItem) {
+                      return `Gas Fee: $${Math.round(tooltipItem.raw * 0.05)}`;
+                  },
+              },
+                backgroundColor: '#fff',
+                titleColor: '#4B4B4B',
+                bodyColor: '#4B4B4B',
                 displayColors: false,
+                boxShadow:"3px 3px 3px #000",
+
             },
         },
         scales: {
             y: {
                 beginAtZero: true,
-                title: {
-                    display: true,
-                    text: 'Transactions (k)',
-                },
                 ticks: {
                     callback: function (value) {
                         return value / 1000 + 'k';
@@ -64,9 +75,18 @@ const LineChart = () => {
     };
 
     return (
-        <div>
+        <>
+          <Box
+              display={"flex"}
+              justifyContent={"space-between"}
+              alignItems={"center"}
+              mb={4}
+            >
+              <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
+              <ChartsTabs />
+            </Box>
             <Line data={data} options={options} />
-        </div>
+        </>
     );
 };
 
diff --git a/src/components/Pagination.jsx b/src/components/Pagination.jsx
index 4615e0c..aa35160 100644
--- a/src/components/Pagination.jsx
+++ b/src/components/Pagination.jsx
@@ -62,6 +62,12 @@ const Pagination = ({
           aria-label="Previous Page"
           bg={colorMode === "light" ? "light.100" : "#232127"}
           border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+          _hover={{
+            bg: colorMode === "light" ? "inherit" : "#312F35",
+          }}
+          _focus={{
+            outline:"none"
+          }}
         >
           Previous
         </Button>
@@ -89,6 +95,12 @@ const Pagination = ({
           aria-label="Previous Page"
           bg={colorMode === "light" ? "light.100" : "#232127"}
           border={colorMode === "light" ? "1px solid #a39797" : "#757575"}
+          _hover={{
+            bg: colorMode === "light" ? "inherit" : "#312F35",
+          }}
+          _focus={{
+            outline:"none"
+          }}
         >
           Next
         </Button>
diff --git a/src/components/SwitchBtn/SwitchCharts.jsx b/src/components/SwitchBtn/SwitchCharts.jsx
index 5e5070e..720c1de 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="130px"
-          height="40px"
+          width="110px"
+          height="32px"
           borderRadius="10px"
           // backgroundColor={"#27262B"}
           onClick={switch_onChange_handle}
@@ -34,15 +34,15 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
           _before={{
             content: '""',
             position: "absolute",
-            width: "40px",
-            height: "25px",
-            borderRadius: "10px",
+            width: "30px",
+            height: "20px",
+            borderRadius: "5px",
             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)",
+            transform: isSwitchOn ? "translateX(70px)" : "translateX(0)",
             transition: "transform 0.2s",
-            left: "4px",
-            top: "7px",
+            left: "5px",
+            top: "5px",
           }}
           
         >
@@ -55,6 +55,7 @@ const SwitchCharts = ({ isSwitchOn, setIsSwitchOn }) => {
             // color={isSwitchOn ? "#A9A9A9" : "#A9A9A9"}
             left={isSwitchOn ? "10px" : "auto"}
             right={isSwitchOn ? "auto" : "10px"}
+            fontSize={"14px"}
           >
             {isSwitchOn ? "Monthly" : "Daily"}
           </Text>
diff --git a/src/index.css b/src/index.css
index 5e9fa8d..4f61627 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,3 +76,5 @@ a:hover {
     background-color: #f9f9f9;
   }
 }
+
+
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 5183c5a..f878ae5 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -172,17 +172,6 @@ const Home = () => {
             rounded={10}
             bg={colorMode === "light" ? "#DEDBEB47" : "#232127"}
           >
-            <Box
-              display={"flex"}
-              justifyContent={"space-between"}
-              alignItems={"center"}
-            >
-              <Heading fontSize={"md"} fontWeight={500}>Transaction History</Heading>
-              <SwitchCharts
-                isSwitchOn={isSwitchOn}
-                setIsSwitchOn={setIsSwitchOn}
-              />
-            </Box>
             <LineChart />
           </Box>
         </Container>