diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 65ba5c7..7a8df88 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -7,8 +7,6 @@ import { EthLogo } from '@/components/commons/Logo/EthLogo';
 import { AssetPriceResponse } from '@/types/api';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
-import { useVesting } from '../hooks/useVesting';
-
 type RewardsCardProps = {
   data: {
     claimable: string;
@@ -24,7 +22,6 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
   const [isClaiming, setIsClaiming] = useState(false);
   const [isCompounding, setIsCompounding] = useState(false);
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
-  const { totalStaked } = useVesting();
   const toast = useToast();
 
   // Fetch GRIX price from CoinGecko
@@ -113,65 +110,50 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
       _hover={{ borderColor: 'gray.800' }}
     >
       <VStack spacing={3} align="stretch">
-        <HStack justify="space-between">
-          <HStack spacing={2}>
-            <EthLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              WETH
-            </Text>
+        <VStack align="stretch" spacing={1}>
+          <HStack justify="space-between" align="flex-start">
+            <HStack spacing={1} align="center">
+              <EthLogo boxSize="12px" />
+              <Text color="gray.500" fontSize="xs">
+                WETH Rewards
+              </Text>
+            </HStack>
+            <VStack align="flex-end" spacing={0}>
+              <Text color="white" fontSize="sm" fontWeight="600">
+                ≤{(0.0001).toFixed(4)} WETH
+              </Text>
+              <Text color="gray.400" fontSize="xs">
+                ≤${(0.01).toFixed(2)}
+              </Text>
+            </VStack>
           </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0}>
-            ≤{(0.0001).toFixed(4)} WETH (≤${(0.01).toFixed(2)})
-          </Text>
-        </HStack>
+        </VStack>
 
-        <HStack justify="space-between">
-          <HStack spacing={2}>
-            <GrixLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              Claimable Rewards
-            </Text>
-          </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
-            {data?.claimable ? Number(data.claimable).toFixed(4) : '0.0000'} esGRIX
-            {grixPrice && data?.claimable && (
-              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-                &nbsp;($
-                {(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                })}
-                )
+        <VStack align="stretch" spacing={1}>
+          <HStack justify="space-between" align="flex-start">
+            <HStack spacing={1} align="center">
+              <GrixLogo boxSize="12px" />
+              <Text color="gray.500" fontSize="xs">
+                Claimable Rewards
               </Text>
-            )}
-          </Text>
-        </HStack>
-
-        <HStack justify="space-between" pt={2} borderTop="1px solid" borderColor="gray.800">
-          <HStack spacing={2}>
-            <GrixLogo boxSize="14px" />
-            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-              Total Staked
-            </Text>
-          </HStack>
-          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
-            {Number(totalStaked).toLocaleString(undefined, {
-              minimumFractionDigits: 1,
-              maximumFractionDigits: 1,
-            })}{' '}
-            GRIX
-            {grixPrice && Number(totalStaked) > 0 && (
-              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
-                &nbsp;($
-                {(Number(totalStaked) * grixPrice).toLocaleString(undefined, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2,
-                })}
-                )
+            </HStack>
+            <VStack align="flex-end" spacing={0}>
+              <Text color="white" fontSize="sm" fontWeight="600">
+                {data?.claimable ? Number(data.claimable).toFixed(4) : '0.00'} esGRIX
               </Text>
-            )}
-          </Text>
-        </HStack>
+              {grixPrice && data?.claimable && Number(data.claimable) > 0 && (
+                <Text color="green.300" fontSize="xs" fontWeight="500">
+                  $
+                  {(Number(data.claimable) * grixPrice).toLocaleString(undefined, {
+                    minimumFractionDigits: 2,
+                    maximumFractionDigits: 2,
+                  })}
+                </Text>
+              )}
+            </VStack>
+          </HStack>
+        </VStack>
+
         <Button
           onClick={() => void handleClaim()}
           isLoading={isClaiming}
diff --git a/src/pages/stakingPage/components/StakeUnstakeModal.tsx b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
index 918cda0..9ea2171 100644
--- a/src/pages/stakingPage/components/StakeUnstakeModal.tsx
+++ b/src/pages/stakingPage/components/StakeUnstakeModal.tsx
@@ -99,14 +99,14 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
       <ModalContent bg="#0D0F12" maxW="400px">
         <Box px={6} py={4}>
           <Flex justify="space-between" align="center" mb={4}>
-            <Text color="white" fontSize="xl" fontWeight="600">
+            <Text color="white" fontSize="sm" fontWeight="600">
               {title}
             </Text>
             <ModalCloseButton position="static" color="gray.400" />
           </Flex>
 
           <VStack spacing={4} align="stretch">
-            <Text color="gray.500" fontSize="md" mb={1}>
+            <Text color="gray.500" fontSize="xs" mb={1}>
               {isStakeMode ? 'Stake Amount' : 'Unstake Amount'}
             </Text>
 
@@ -116,7 +116,7 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   <Box bg="#1E2328" p={2} borderRadius="lg">
                     <GrixLogo boxSize="24px" />
                   </Box>
-                  <Text color="white" fontSize="lg" fontWeight="600">
+                  <Text color="white" fontSize="sm" fontWeight="600">
                     {isEsGrix ? 'esGRIX' : 'GRIX'}
                   </Text>
                 </HStack>
@@ -127,17 +127,17 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   variant="unstyled"
                   textAlign="right"
                   color="white"
-                  fontSize="lg"
+                  fontSize="sm"
                   width="auto"
                 />
               </Flex>
             </Box>
 
             <Flex justify="space-between" align="center">
-              <Text color="gray.500" fontSize="md">
+              <Text color="gray.500" fontSize="xs">
                 {isStakeMode ? 'Available balance' : 'Staked balance'}
               </Text>
-              <Text color="white" fontSize="md">
+              <Text color="white" fontSize="sm">
                 {formatBalance(availableAmount)} {isEsGrix ? 'esGRIX' : 'GRIX'}
               </Text>
             </Flex>
@@ -147,14 +147,39 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                 <Button
                   key={percentage}
                   onClick={() => handlePercentageClick(percentage)}
-                  bg="#1E2328"
-                  color="white"
-                  size="md"
+                  variant="outline"
+                  bg="gray.800"
+                  color="gray.300"
+                  borderColor="gray.600"
+                  size="sm"
                   flex={1}
+                  height="32px"
+                  fontSize="xs"
+                  fontWeight="500"
                   isDisabled={!hasBalance}
-                  opacity={hasBalance ? 1 : 0.5}
-                  _hover={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
-                  _active={{ bg: hasBalance ? '#2A3038' : '#1E2328' }}
+                  _hover={{
+                    bg: hasBalance ? 'gray.700' : 'gray.800',
+                    borderColor: hasBalance ? 'gray.500' : 'gray.600',
+                    color: hasBalance ? 'white' : 'gray.300',
+                    transform: hasBalance ? 'translateY(-1px)' : 'none',
+                    boxShadow: hasBalance ? 'sm' : 'none',
+                  }}
+                  _active={{
+                    bg: hasBalance ? 'gray.600' : 'gray.800',
+                    transform: hasBalance ? 'translateY(0)' : 'none',
+                  }}
+                  _disabled={{
+                    opacity: 0.5,
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.800',
+                      borderColor: 'gray.600',
+                      color: 'gray.300',
+                      transform: 'none',
+                      boxShadow: 'none',
+                    },
+                  }}
+                  transition="all 0.2s"
                 >
                   {percentage}%
                 </Button>
@@ -167,7 +192,7 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   <Box as="span" color="#3B82F6" fontSize="lg">
                     ⓘ
                   </Box>
-                  <Text color="#3B82F6" fontSize="sm">
+                  <Text color="#3B82F6" fontSize="xs">
                     You might not be able to unstake your desired {isEsGrix ? 'esGRIX' : 'GRIX'} if there is an active
                     vesting position.
                   </Text>
@@ -181,15 +206,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isApproving}
                   loadingText="Approving"
                   onClick={handleApprove}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid()}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md',
+                  }}
+                  _active={{
+                    bg: 'teal.700',
+                    transform: 'translateY(0)',
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none',
+                    },
+                  }}
+                  transition="all 0.2s"
                 >
                   Approve
                 </Button>
@@ -198,15 +243,35 @@ export const StakeUnstakeModal: React.FC<StakeUnstakeModalProps> = ({
                   isLoading={isLoading}
                   loadingText={isStakeMode ? 'Staking' : 'Unstaking'}
                   onClick={onSubmit}
-                  bg="#2F6C60"
+                  variant="solid"
+                  bg="teal.500"
                   color="white"
-                  size="lg"
+                  size="md"
                   width="full"
-                  height="48px"
+                  height="40px"
                   fontSize="sm"
+                  fontWeight="500"
                   isDisabled={!isAmountValid() || !amount}
-                  _hover={{ bg: '#2A5F54' }}
-                  _active={{ bg: '#264F46' }}
+                  _hover={{
+                    bg: 'teal.600',
+                    transform: 'translateY(-1px)',
+                    boxShadow: 'md',
+                  }}
+                  _active={{
+                    bg: 'teal.700',
+                    transform: 'translateY(0)',
+                  }}
+                  _disabled={{
+                    bg: 'gray.700',
+                    color: 'gray.500',
+                    cursor: 'not-allowed',
+                    _hover: {
+                      bg: 'gray.700',
+                      transform: 'none',
+                      boxShadow: 'none',
+                    },
+                  }}
+                  transition="all 0.2s"
                 >
                   {isStakeMode ? 'Stake' : 'Unstake'}
                 </Button>
diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index bd61414..4baf5e1 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Flex, Heading, HStack, SimpleGrid, Text, useDisclosure, VStack } from '@chakra-ui/react';
+import { Box, Button, Flex, HStack, SimpleGrid, Text, useDisclosure, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { GrixLogo } from '@/components/commons/Logo';
@@ -70,69 +70,69 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
   return (
     <Box
       bg="gray.950"
-      borderRadius="lg"
-      p={6}
+      borderRadius="md"
+      p={4}
       height="fit-content"
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
-      <Flex align="center" mb={5}>
-        <GrixLogo boxSize={8} mr={3} />
+      <Flex align="center" mb={3}>
+        <GrixLogo boxSize={6} mr={2} />
         <div>
-          <Heading size="md" color="white" mb={1} fontWeight="600">
-            <BoldGrix text={title} />
-          </Heading>
-          <Text color="gray.400" fontSize="sm">
+          <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
+            {title}
+          </Text>
+          <Text color="gray.400" fontSize="xs">
             <BoldGrix text={description} />
           </Text>
         </div>
       </Flex>
 
-      <SimpleGrid columns={2} spacing={5} mb={5}>
-        <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+      <SimpleGrid columns={2} spacing={3} mb={4}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Staked
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="white">
+          <Text fontSize="sm" fontWeight="600" color="white">
             {formatBalance(stakedAmount)}
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Available to stake
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="white">
+          <Text fontSize="sm" fontWeight="600" color="white">
             {formatBalance(availableBalance)}
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             APR
           </Text>
-          <Text fontSize="xl" fontWeight="700" color="green.200" display="flex" alignItems="center" gap={2}>
-            <Text as="span" color="green.300">
+          <Text fontSize="sm" fontWeight="600" color="green.200" display="flex" alignItems="center" gap={1}>
+            <Text as="span" color="green.300" fontSize="xs">
               ↗
             </Text>
             {apr.toFixed(2)}%
           </Text>
         </VStack>
 
-        <VStack align="stretch">
-          <Text fontSize="sm" color="gray.500" mb={1}>
+        <VStack align="stretch" spacing={1}>
+          <Text fontSize="xs" color="gray.500">
             Total Staked
           </Text>
-          <VStack align="flex-start" spacing={1}>
-            <Text fontSize="xl" fontWeight="700" color="white">
+          <VStack align="flex-start" spacing={0}>
+            <Text fontSize="sm" fontWeight="600" color="white">
               {Number(totalStakedInProtocol).toLocaleString(undefined, {
-                minimumFractionDigits: 1,
-                maximumFractionDigits: 1,
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
               })}
             </Text>
             {grixPrice && Number(totalStakedInProtocol) > 0 && (
-              <Text fontSize="sm" color="green.300" fontWeight="600">
+              <Text fontSize="xs" color="green.300" fontWeight="500">
                 ($
                 {(Number(totalStakedInProtocol) * grixPrice).toLocaleString(undefined, {
                   minimumFractionDigits: 2,
@@ -145,17 +145,18 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
         </VStack>
       </SimpleGrid>
 
-      <HStack spacing={4}>
-        <Button onClick={onStakeModalOpen} variant="primary" size="lg" height="48px">
+      <HStack spacing={3}>
+        <Button onClick={onStakeModalOpen} variant="primary" size="md" height="40px" fontSize="sm">
           Stake
         </Button>
         <Button
           onClick={onUnstakeModalOpen}
           variant="secondary"
-          size="lg"
-          height="48px"
+          size="md"
+          height="40px"
+          fontSize="sm"
           color="white"
-          fontWeight="bold"
+          fontWeight="600"
           borderColor="gray.600"
           _hover={{
             bg: 'gray.800',
diff --git a/src/pages/stakingPage/components/VestingCard.tsx b/src/pages/stakingPage/components/VestingCard.tsx
index 754f43c..30df19c 100644
--- a/src/pages/stakingPage/components/VestingCard.tsx
+++ b/src/pages/stakingPage/components/VestingCard.tsx
@@ -229,15 +229,15 @@ export const VestingCard: React.FC<VestingCardProps> = ({ onActionComplete, user
   return (
     <Box
       bg="gray.950"
-      borderRadius="lg"
-      p={6}
+      borderRadius="md"
+      p={4}
       border="1px solid"
       borderColor="gray.900"
       _hover={{ borderColor: 'gray.800' }}
     >
       <VestingHeader />
 
-      <VStack spacing={6} align="stretch">
+      <VStack spacing={4} align="stretch">
         <VestingStats
           vestingData={
             vestingData && {
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
index 66d5861..7754d0a 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingHeader.tsx
@@ -1,15 +1,13 @@
-import { Heading, Text, VStack } from '@chakra-ui/react';
+import { Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
-import { BoldGrix } from '../BoldGrix';
-
 export const VestingHeader: React.FC = () => (
-  <VStack align="stretch" mb={4}>
-    <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
+  <VStack align="stretch" mb={3} spacing={1}>
+    <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
       Vesting
-    </Heading>
-    <Text color="gray.400" fontSize="sm" fontWeight="500">
-      <BoldGrix text="Convert esGRIX tokens to GRIX Token" />
+    </Text>
+    <Text color="gray.400" fontSize="xs">
+      Convert esGRIX tokens to GRIX Token
     </Text>
   </VStack>
 );
diff --git a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
index 011877f..64212be 100644
--- a/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
+++ b/src/pages/stakingPage/components/VestingComponents/VestingStats.tsx
@@ -2,7 +2,6 @@ import { Button, Grid, GridItem, HStack, Progress, Text, VStack } from '@chakra-
 import React from 'react';
 
 import { formatBalance } from '../../utils/formatters';
-import { BoldGrix } from '../BoldGrix';
 
 type VestingProgress = {
   remainingDays: number;
@@ -32,33 +31,33 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
   onWithdraw,
   isWithdrawing,
 }) => (
-  <VStack spacing={4} align="stretch">
-    <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+  <VStack spacing={3} align="stretch">
+    <Grid templateColumns="repeat(2, 1fr)" gap={3}>
       <GridItem>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
-            <BoldGrix text="Claimable GRIX" />
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
+            Claimable GRIX
           </Text>
-          <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? formatBalance(vestingData.claimable) : '0'}
+          <Text color="white" fontSize="sm" fontWeight="600">
+            {vestingData ? formatBalance(vestingData.claimable) : '0.00'}
           </Text>
         </VStack>
       </GridItem>
 
       <GridItem>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
-            <BoldGrix text="Total Vested esGRIX" />
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
+            Total Vested esGRIX
           </Text>
-          <Text color="white" fontSize="lg" fontWeight="700" letterSpacing="-0.01em">
-            {vestingData ? formatBalance(vestingData.totalVested) : '0'}
+          <Text color="white" fontSize="sm" fontWeight="600">
+            {vestingData ? formatBalance(vestingData.totalVested) : '0.00'}
           </Text>
         </VStack>
       </GridItem>
 
       <GridItem colSpan={2}>
-        <VStack align="stretch" spacing={0.5}>
-          <Text color="gray.400" fontSize="xs" fontWeight="600" letterSpacing="-0.01em">
+        <VStack align="stretch" spacing={1}>
+          <Text color="gray.500" fontSize="xs">
             Vesting Progress
           </Text>
           {vestingData?.vestingProgress?.isVesting ? (
@@ -69,13 +68,14 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
                 colorScheme="primary"
                 borderRadius="full"
                 bg="gray.700"
+                height="6px"
               />
-              <Text color="white" fontSize="sm" fontWeight="500">
+              <Text color="gray.400" fontSize="xs" fontWeight="500">
                 {vestingData.vestingProgress.remainingDays} days remaining
               </Text>
             </>
           ) : (
-            <Text color="white" fontSize="sm" fontWeight="500">
+            <Text color="gray.400" fontSize="xs" fontWeight="500">
               No active vesting
             </Text>
           )}
@@ -83,14 +83,14 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
       </GridItem>
     </Grid>
 
-    <HStack spacing={4}>
+    <HStack spacing={3}>
       <Button
         onClick={onVestClick}
         isLoading={isVesting}
         loadingText="Vesting"
         bg="teal.400"
         color="white"
-        size="lg"
+        size="md"
         width="full"
         height="40px"
         fontSize="sm"
@@ -105,7 +105,7 @@ export const VestingStats: React.FC<VestingStatsProps> = ({
         isLoading={isWithdrawing}
         loadingText="Withdrawing"
         variant="outline"
-        size="lg"
+        size="md"
         width="full"
         height="40px"
         fontSize="sm"
diff --git a/src/pages/stakingPage/index.tsx b/src/pages/stakingPage/index.tsx
index 6858e2f..e32ae3f 100644
--- a/src/pages/stakingPage/index.tsx
+++ b/src/pages/stakingPage/index.tsx
@@ -4,7 +4,6 @@ import { useAccount } from 'wagmi';
 
 import { getUserRewardTrackerData } from '@/web3Config/staking/hooks';
 
-import { BoldGrix } from './components/BoldGrix';
 import { RewardsCard } from './components/RewardsCard';
 import { StakingCard } from './components/StakingCard';
 import { VestingCard } from './components/VestingCard';
@@ -61,12 +60,12 @@ export const StakingPage: React.FC = () => {
     <Container maxW="1200px" px={{ base: 3, md: 4 }} py={6}>
       <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={4} mb={6}>
         <GridItem colSpan={{ base: 1, lg: 3 }}>
-          <VStack align="flex-start" spacing={3} bg="gray.950" p={4} borderRadius="xl">
-            <Heading size="lg" color="white" fontWeight="700" letterSpacing="-0.02em">
+          <VStack align="flex-start" spacing={2} bg="gray.950" p={4} borderRadius="md">
+            <Heading size="md" color="white" fontWeight="600" letterSpacing="-0.01em">
               Staking
             </Heading>
-            <Text color="gray.400" fontSize="md" fontWeight="500">
-              <BoldGrix text="Stake GRIX and esGRIX to start earning rewards" />
+            <Text color="gray.400" fontSize="sm">
+              Stake GRIX and esGRIX to start earning rewards
             </Text>
           </VStack>
         </GridItem>
@@ -112,10 +111,10 @@ export const StakingPage: React.FC = () => {
               transition="all 0.2s"
               _active={{ transform: 'scale(0.98)' }}
             >
-              <Heading size="sm" color="white" fontWeight="700" letterSpacing="-0.01em">
+              <Text color="white" fontSize="sm" fontWeight="600" letterSpacing="-0.01em">
                 Learn about Staking
-              </Heading>
-              <Text color="gray.400" fontSize="sm" fontWeight="500">
+              </Text>
+              <Text color="gray.400" fontSize="xs">
                 Check out our staking walkthrough and guides
               </Text>
             </VStack>
@@ -124,13 +123,8 @@ export const StakingPage: React.FC = () => {
       </Grid>
 
       <Grid templateColumns={{ base: '1fr', lg: 'repeat(3, 1fr)' }} gap={4} mb={6}>
-        <GridItem colSpan={{ base: 1, lg: 3 }} bg="gray.950" p={4} borderRadius="xl">
-          <VStack align="stretch" spacing={3}>
-            <Heading size="md" color="white" fontWeight="700" letterSpacing="-0.02em" mb={1}>
-              Vesting
-            </Heading>
-            <VestingCard onActionComplete={triggerRefresh} userRewardData={userRewardData} />
-          </VStack>
+        <GridItem colSpan={{ base: 1, lg: 3 }}>
+          <VestingCard onActionComplete={triggerRefresh} userRewardData={userRewardData} />
         </GridItem>
       </Grid>
     </Container>