upDATE

src/components/ChartsTabs.jsx

@@ -22,15 +22,15 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
     const checkbox = getRadioProps();
 
     return (
-      <Box as="label" px={{ base: "6px", md: "px" }}>
+      <Box as="label" >
         <input {...input} />
         <Box
           {...checkbox}
           cursor="pointer"
           // borderWidth="1px"
-          borderRadius="xl"
+          borderRadius="md"
           // boxShadow="md"
-          fontSize={{ base: "xs", md: "sm" }}
+          fontSize={{ base: "xs", md: "xs" }}
           _checked={{
             bg: colorMode === "light" ? "#DEDBEB" : "#fff",
             color: "#000",
@@ -40,8 +40,8 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
             boxShadow: "outline",
           }}
           fontWeight={500}
-          py={2}
-          px={3}
+          py={1}
+          px={2}
         >
           {props.children}
         </Box>
@@ -61,13 +61,26 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
   const group = getRootProps();
 
   return (
-    <HStack alignItems={"center"}  m={3} gap={1}>
-      <Text
-        fontWeight={500}
+    <HStack alignItems={"center"}   gap={1}>
+      
+
+
+      <HStack
+        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
+        p={1.5}
+        rounded={"12px"}
+        justifyContent={{ base: "flex-end" }}
+        gap={{ base: 0, md: 1 }}
+        {...group}
+        ps={3}
+      >
+        <Text
+        fontWeight={600}
         display={"flex"}
         alignItems={"center"}
-        fontSize={{ base: "xs", md: "sm" }}
+        fontSize={{ base: "xs", md: "xs" }}
         color={colorMode === 'light'?'gray.400':"#fff"}
+        
       >
         Last 
                 {/* <Icon
@@ -76,16 +89,6 @@ function ChartsTabs({ selectedValue, setSelectedValue, days }) {
           color={colorMode === "light" ? "gray.400" : "#fff"}
         /> */}
       </Text>
-
-
-      <HStack
-        bg={colorMode === 'light'?'#fff':"#F8F8FF26"}
-        p={2}
-        rounded={"18px"}
-        justifyContent={{ base: "flex-end" }}
-        gap={{ base: 0, md: 1 }}
-        {...group}
-      >
         {options.map((value) => {
           const radio = getRadioProps({ value });
           return (

src/components/LatestTransactions/LatestTransactions.jsx

@@ -144,7 +144,7 @@ const LatestTransactions = () => {
         // bg={"#232127"}
         roundedTop={"lg"}
       >
-        <GridItem display={{ base: "none", md: "grid" }} p={2}>
+        <GridItem display={{ base: "none", md: "grid" }} p={2} ps={3}>
           <Text color={"#fff"}>Sr. no</Text>
         </GridItem>
         <GridItem p={2}>
@@ -181,7 +181,7 @@ rounded={"full"}
       <Box
         roundedBottom={"lg"}
         overflow={"hidden"}
-        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}
+        boxShadow={colorMode === "light" ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;" :"none"}
       >
         {transAll?.data?.items?.map(
           (