diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
index 450622c..3498852 100644
--- a/src/components/stakingCalculator.tsx
+++ b/src/components/stakingCalculator.tsx
@@ -1,6 +1,6 @@
 import { StakingPoolsStorage } from "@/contexts/stakingPoolsStorage";
 import { useEffect, useState } from "react";
-import { Button, Input } from "antd";
+import { Button, Input, Tooltip } from "antd";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddress } from "@/misc/formatting";
 import { formatUnits, parseEther } from "viem";
@@ -32,7 +32,7 @@ const StakingCalculator: React.FC = () => {
   const [zilToStake, setZilToStake] = useState<string>(formatUnits(stakingPoolForView?.stakingPool.definition.minimumStake || 0n, 18));
 
   useEffect(() => {
-    setZilToStake("0.00");
+    onMinClick();
   }, [stakingPoolForView]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,7 +48,7 @@ const StakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-     if (zilToStake === '0.00') setZilToStake('');
+     if (zilToStake === '') onMinClick();
   };
 
   const handleBlur = () => {
@@ -62,7 +62,7 @@ const StakingCalculator: React.FC = () => {
     }
     setZilToStake(valueTemp.replace(/0*(\d+)/, '$1'));
 
-    if (zilToStake === '') setZilToStake('0.00');
+    if (zilToStake === '') onMinClick();
   };
 
   const zilToStakeNumber = parseFloat(zilToStake);
@@ -84,7 +84,7 @@ const StakingCalculator: React.FC = () => {
     stakingPoolForView && (
       <>
         <div>
-          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
+          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
                 className={`h3 flex items-baseline !bg-transparent !border-transparent ${
@@ -97,22 +97,25 @@ const StakingCalculator: React.FC = () => {
                 prefix="ZIL"
                 status={!zilToStakeOk ? 'error' : undefined}
               />
-              <span className="flex items-center ">
+              <span className="flex items-center whitespace-nowrap ">
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
-                    <span className="body1">
+                    <span className="body2-bold">
                       ~
-                      {convertZilValueInToken(
-                        zilToStakeNumber,
-                        stakingPoolForView.stakingPool.data
-                          .zilToTokenRate
-                      )}{' '}
+                      {
+                        !isNaN(zilToStakeNumber) && !isNaN(stakingPoolForView.stakingPool.data
+                          .zilToTokenRate)
+                          ? convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data
+                            .zilToTokenRate)
+                          : ""
+                      }                      
+                      {' '}
                       {
                         stakingPoolForView.stakingPool.definition
                           .tokenSymbol
                       }{' '}
                     </span>
-                    <span className="body1 ml-2 text-aqua1">
+                    <span className="body2-bold ml-2 text-aqua1">
                       ~
                       {formatPercentage(
                         stakingPoolForView!.stakingPool.data.apr
@@ -122,7 +125,7 @@ const StakingCalculator: React.FC = () => {
                 ) : (
                   <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
                 )}
-                <span className="body1 text-aqua1"> APR</span>
+                <span className="body2-bold text-aqua1"> APR</span>
               </span>
             </div>
 
@@ -164,11 +167,13 @@ const StakingCalculator: React.FC = () => {
               <div className="base flex flex-col xl:flex-row xl:gap-5">
                 <div>Rate</div>
                    {stakingPoolForView!.stakingPool.data && (
-                <div>{`1 ZIL = ~${convertZilValueInToken(zilToStakeNumber, stakingPoolForView.stakingPool.data.zilToTokenRate)} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
+                <div>{`1 ZIL = ~${ stakingPoolForView.stakingPool.data.zilToTokenRate} ${stakingPoolForView.stakingPool.definition.tokenSymbol}`}</div>
                   )}
               </div>
               <div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
-               <div>APR:</div>
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
                     ~{formatPercentage(
@@ -206,7 +211,7 @@ const StakingCalculator: React.FC = () => {
         } 
 
         {stakeContractCallError && (
-          <div className="text-red-500 text-center">
+          <div className="text-red1 text-center">
             {stakeContractCallError.message}
           </div>
         )}
diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx
index 804c6c7..10a3f52 100644
--- a/src/components/stakingPoolCard.tsx
+++ b/src/components/stakingPoolCard.tsx
@@ -1,6 +1,7 @@
 import { formatPercentage, formatUnitsToHumanReadable } from '@/misc/formatting';
 import { StakingPool } from '@/misc/stakingPoolsConfig';
 import { UserStakingPoolData } from '@/misc/walletsConfig';
+import { Tooltip } from 'antd';
 import Image from 'next/image';
 
 interface StakingPoolCardProps {
@@ -49,7 +50,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                 {stakingPoolData.definition.tokenSymbol}
               </div>
             </div>
-            <div className="base2 lg:block hidden">
+            <div className="base2 lg:block hidden text-aqua1">
               {userStakingPoolData &&
               userStakingPoolData.stakingTokenAmount ? (
                 <> 
@@ -60,7 +61,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                     )} ${stakingPoolData.definition.tokenSymbol}`}
                 </>
               ) : (
-                <span className="text-gray2">-</span>
+                <span className="text-aqua1">-</span>
               )}
             </div>
             <Image
@@ -78,7 +79,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                 {
                   stakingPoolData.data ? (
                     <div
-                      className={`base max-xs:ml-2 xs:max-md:ml-6 ${
+                      className={`base max-xs:ml-2 xs:max-lg:ml-6 ${
                         stakingPoolData.data.votingPower * 100 >= 50
                           ? 'text-red1'
                           : stakingPoolData.data.votingPower * 100 >= 30
@@ -90,7 +91,7 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                     </div>
                   ) : (
                     <>
-                      <span className='base max-xs:ml-2 xs:max-md:ml-6'>VP</span>
+                      <span className='base max-xs:ml-2 xs:max-lg:ml-6'>VP</span>
                       <span className="w-[3em] ml-1 animated-gradient" />
                     </>
                   )
@@ -108,8 +109,13 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                   }
                 </div>
               </div>
-              <div className="flex base text-aqua1 max-md:order-1">
-                APR{' '}
+          
+            
+              <div className="flex base text-gray2 max-md:order-1 ">  
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
+                
                 {
                   stakingPoolData.data ? (
                     <>
diff --git a/src/components/stakingPoolDetailsView.tsx b/src/components/stakingPoolDetailsView.tsx
index 1b911d2..11008f1 100644
--- a/src/components/stakingPoolDetailsView.tsx
+++ b/src/components/stakingPoolDetailsView.tsx
@@ -74,8 +74,8 @@ const StakingPoolDetailsView: React.FC<StakingPoolDetailsViewProps> = ({
   const humanReadableStakingToken = (value: bigint) => formatUnitsToHumanReadable(value, stakingPoolData.definition.tokenDecimals);
 
   return (
-    <div className="relative overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-20vh)]
-      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2"
+    <div className="relative overflow-y-auto max-h-[calc(90vh-10vh)] sm:max-h-[calc(90vh-15vh)]
+      scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-2"
     >
       <div className="items-center flex justify-between py-1 lg:py-7.5">
         <div className="max-lg:ms-1 items-center flex">
diff --git a/src/components/stakingPoolsList.tsx b/src/components/stakingPoolsList.tsx
index 40f8a95..57ff5d4 100644
--- a/src/components/stakingPoolsList.tsx
+++ b/src/components/stakingPoolsList.tsx
@@ -50,11 +50,11 @@ const StakingPoolsList: React.FC = () => {
 
   return (
     <>
-      <div className="h3 text-white2 max-lg:w-1/4  mb-4">
+      <div className="h3 text-white2 sm:max-lg:w-1/4 mb-4 max-h-[10vh]">
         Liquid Validators
       </div>
 
-      <div className="flex gap-x-2.5 mt-6 mb-5">
+      <div className="flex gap-x-2.5 mt-6 mb-5 max-h-[5vh]">
         <SortBtn
           variable="APR"
           isClicked={isAscending && sortCriteria == 'APR'}
@@ -72,8 +72,8 @@ const StakingPoolsList: React.FC = () => {
         />
       </div>
 
-      <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-30vh)] lg:max-h-[calc(100vh-27vh)]
-       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
+      <div className="grid grid-cols-1 gap-2.5 lg:gap-4 overflow-y-auto max-h-[calc(90vh-25vh)]
+       scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 pb-20">
         {sortedStakingPoolsData.map(({ stakingPool, userData }) => (
           <StakingPoolCard
             key={stakingPool.definition.id}
diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
index d9b46f4..153151a 100644
--- a/src/components/unstakingCalculator.tsx
+++ b/src/components/unstakingCalculator.tsx
@@ -1,6 +1,6 @@
 import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage';
 import { useEffect, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
 import {
   formatPercentage,
   convertTokenToZil,
@@ -32,7 +32,7 @@ const UnstakingCalculator: React.FC = () => {
   };
 
   const handleFocus = () => {
-    if (zilToUnstake === '0.00') setZilToUnstake('');
+    if (zilToUnstake === '') onMaxClick();
   };
 
   const handleBlur = () => {
@@ -44,11 +44,11 @@ const UnstakingCalculator: React.FC = () => {
       valueTemp = zilToUnstake.slice(0, -1);
     }
     setZilToUnstake(valueTemp.replace(/0*(\d+)/, '$1'));
-    if (zilToUnstake === '') setZilToUnstake('0.00');
+    if (zilToUnstake === '') onMaxClick();
   };
 
   useEffect(() => {
-    setZilToUnstake('0.00');
+    setZilToUnstake('1');
   }, [stakingPoolForView]);
 
   const stakedTokenAvailable =
@@ -82,7 +82,7 @@ const UnstakingCalculator: React.FC = () => {
     stakingPoolForView && (
       <div className="bg-black">
         <div>
-          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7.5 bg-darkbg rounded-3xl">
+          <div className="flex justify-between gap-10 my-2.5 lg:my-7.5 p-3 lg:p-5 xl:p-7 bg-darkbg rounded-3xl items-center">
             <div className="h-fit self-center">
               <Input
                 className={`h3 flex items-baseline !bg-transparent !border-transparent ${
@@ -172,13 +172,14 @@ const UnstakingCalculator: React.FC = () => {
                       = ~
                       {formatUnitsToHumanReadable(
                         convertTokenToZil(
-                          zilInWei,
+                          parseEther('1'),
                           stakingPoolForView.stakingPool.data
                             .zilToTokenRate
                         ),
                         18
                       )}
-                    </>
+
+                     </>
                   ) : (
                     <div className="animated-gradient mr-1 h-[1.5em] w-[3em]"></div>
                   )}
@@ -186,7 +187,9 @@ const UnstakingCalculator: React.FC = () => {
                 </div>
               </div>
               <div className=" regular-base flex flex-row xl:gap-5">
-                <div>APR:</div>
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
                     ~
@@ -202,7 +205,7 @@ const UnstakingCalculator: React.FC = () => {
           </div>
 
           {unstakeContractCallError && (
-            <div className="text-red-500 text-center">
+            <div className="text-red1 text-center">
               {unstakeContractCallError.message}
             </div>
           )}
diff --git a/src/components/withdrawUnstakedZilPanel.tsx b/src/components/withdrawUnstakedZilPanel.tsx
index 708b69c..5c0dfc6 100644
--- a/src/components/withdrawUnstakedZilPanel.tsx
+++ b/src/components/withdrawUnstakedZilPanel.tsx
@@ -60,17 +60,21 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
 
       {!!availableUnstake?.length ? (
         availableUnstake.map((item, claimIdx) => (
-          <div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
+          <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full"
             key={claimIdx}
           >
             <div className="items-center h4 w-full flex justify-between text-gray4">
               {stakingPoolData.data ? (
-                <div>
-                  {parseFloat(
-                    formatUnits(item.zilAmount, 18)
-                  ).toFixed(3)}{' '}
-                  ZIL
-                </div>
+                 <div className='flex'>
+                 <div>
+                   {parseFloat(
+                     formatUnits(item.zilAmount, 18)
+                   ).toFixed(3)}{' '}
+                   ZIL
+                 </div>
+                 <div className="body1-s lg:ml-2.5  mt-2">avZIL</div>
+ 
+                 </div>
               ) : (
                 <div className="w-[4em] h-[1em] animated-gradient" />
               )}
@@ -89,7 +93,7 @@ const WithdrawZilPanel: React.FC<WithdrawZilPanelProps> = ({
           </div>
         ))
       ) : !!pendingUnstake?.length ? (
-        <div className="flex flex-col justify-between gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
+        <div className="flex flex-col min-h-[114px] lg:min-h-[157px] xl:min-h-[173px] justify-evenly gap-2 my-2.5 lg:my-7.5 py-2 lg:py-6 xl:py-8 px-3 lg:px-7.5 xl:px-10 bg-gradientbg rounded-3xl w-full">
              <div className="body2 text-gray2">
             Next available reward             </div>
             <div className=" h4 mt-2 w-full flex justify-between text-gray4">
diff --git a/src/components/withdrawZilView.tsx b/src/components/withdrawZilView.tsx
index 683792d..2be2c56 100644
--- a/src/components/withdrawZilView.tsx
+++ b/src/components/withdrawZilView.tsx
@@ -22,20 +22,23 @@ const WithdrawZilView: React.FC = () => {
   ]
 
   return (
-    <div className="flex flex-col gap-4" >
-      <div className=" text-center lg:text-end">
+    <div className="relative overflow-y-auto max-h-[calc(90vh-15vh)]   
+    scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2
+     flex flex-col gap-2" >
+      <div className=" text-center lg:text-end max-h-[20vh]">
         <h1 className="hero text-white mt-4">
           <span className="hidden lg:block">Staking Portal</span>
           <span className="block lg:hidden">Claims</span>
         </h1>
-        <p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto mt-2 lg:mt-5 body2">
+        <p className="w-2/3 sm:w-1/2 md:w-1/4 lg:w-full max-lg:mx-auto my-2 lg:my-5 body2">
           Below are withdrawal claims waiting for you       
         </p>
       </div>
 
       {
         unstakingItems.length > 0 ? (
-          <div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto max-h-[calc(100vh-38vh)] xs:max-h-[calc(100vh-42vh)] lg:max-h-[calc(100vh-27vh)]
+
+          <div className="grid grid-cols-1 gap-4 lg:gap-5 overflow-y-auto  max-h-[calc(90vh-30vh)]
           scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2 lg:pb-10">
             {
               unstakingItems.map((item, claimIdx) => (
diff --git a/src/misc/formatting.ts b/src/misc/formatting.ts
index 283ea3c..e44681f 100644
--- a/src/misc/formatting.ts
+++ b/src/misc/formatting.ts
@@ -38,7 +38,7 @@ export function convertTokenToZil(tokenAmount: bigint, zilToTokenRate: number):
 }
 
 export function convertZilValueInToken(zilAmount: number, zilToTokenRate: number) {
-  return `${(zilAmount * zilToTokenRate).toFixed(2)}`
+   return `${(zilAmount * zilToTokenRate).toFixed(2)}`
 }
 
 export function formatUnitsToHumanReadable(value: bigint, decimals: number): string {
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 3bf4d07..3835179 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -48,7 +48,7 @@ const HomePage = () => {
   const [mobileShowClaims, setMobileShowClaims] = useState<boolean>(false);
 
   const mobileOverlayWrapper = (children: React.ReactNode) => (
-    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4 pt-[5em]'>
+    <div className='absolute lg:hidden top-0 left-0 z-25 h-full w-full bg-black p-4 lg:pt-[10vh]'>
       {children}
     </div>
   )
@@ -59,7 +59,8 @@ const HomePage = () => {
         !isWalletConnected ? (
           <LoginView />
         ) : stakingPoolForView ? (
-          <div className="bg-black xs:pt-5 lg:pt-7.5 xs:px-5 lg:px-7.5 rounded-2.5xl">
+          <div className="bg-black xs:pt-5 lg:pt-7.5 xs:px-5 lg:px-7.5 rounded-2.5xl overflow-y-auto  max-h-[80vh]
+          scrollbar-thin scrollbar-thumb-gray1 scrollbar-track-gray3 hover:scrollbar-thumb-gray2">
             <StakingPoolDetailsView
               selectStakingPoolForStaking={(stakingPoolId) => {
                 selectStakingPoolForView(null);
@@ -105,14 +106,14 @@ const HomePage = () => {
   )
 
   const mobileBottomNavition = (
-    <div className='fixed bottom-0 left-0 lg:hidden w-full mt-7.5'>
+    <div className='fixed bottom-0 left-0 lg:hidden w-full mt-7.5 bg-black pt-1.5'>
       <div className='flex justify-between gap-1 mb-4 mx-2.5'>
       {
         isWalletConnected ? (
           <>
             {
               mobileShowClaims && (
-                <div className='min-w-[200px] xs:min-w-[320px] mx-auto'>
+                <div className='max-lg:w-full lg:min-w-[320px] mx-auto'>
                   <Button
                     type="default"
                     size="large"
@@ -134,7 +135,7 @@ const HomePage = () => {
             }
             {
               !mobileShowClaims && stakingPoolForView && (
-                <div className='w-1/2'>
+                <div className={`${!mobileShowClaims && availableForUnstaking.length + pendingUnstaking.length != 0 ? "w-1/2" : "w-full"}`}>
                 <Button
                   type="default"
                   size="large"
@@ -177,7 +178,31 @@ const HomePage = () => {
             }
           </>
         ) : (
-          connectWallet
+      <>
+       {       stakingPoolForView && (
+              <div className='w-1/2'>
+              <Button
+                type="default"
+                size="large"
+                className='btn-secondary-lg group justify-start'
+                onClick={() => {
+                  selectStakingPoolForView(null);
+                }}
+              > <Image
+                  className="mx-1 xs:mx-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:-translate-x-2"
+                  src={ArrowBack}
+                  alt={`arrow icon`}
+                  width={24}
+                  height={24}
+                /> 
+                Back
+              </Button></div>
+            ) }
+            <div className={`${stakingPoolForView ? "xs:w-1/2" : "w-full"}`}>
+            {connectWallet}
+           </div>
+            </>
+  
         )
       }
     </div></div>
@@ -187,7 +212,7 @@ const HomePage = () => {
     <div className="h-screen w-screen relative">
 
       {/* Header */}
-      <div className="absolute z-50 top-0 left-0 h-[4em] w-full flex items-center justify-center text-white border-b-2 border-white">
+      <div className="h-[10vh] w-full flex items-center justify-center text-white border-b-2 border-white">
         <div className="flex max-w-screen-2xl w-full justify-between px-4">
 
           <div className="flex items-center">
@@ -233,10 +258,11 @@ const HomePage = () => {
         </div>
       </div>
 
-      <div className="relative max-w-screen-2xl mx-auto h-screen overflow-y-hidden">
-        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 pt-[5em]'>
+      <div className={` ${(mobileShowClaims || stakingPoolForView || availableForUnstaking.length + pendingUnstaking.length != 0) ? 'lg:h-[90vh] h-[80vh] ' : ' h-[90vh] ' } relative max-w-screen-2xl mx-auto 
+      overflow-y-hidden `}>
+        <div className='grid grid-cols-1 lg:grid-cols-2 gap-5 px-4 pt-3 lg:pt-[10vh]'>
         {/* Left column */}
-        <div className="bg-black xs:p-6 rounded-2.5xl">
+        <div className="bg-black p-2 xs:p-6 rounded-2.5xl">
           <StakingPoolsList />
         </div>
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8369684..996cce1 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -101,7 +101,7 @@ body {
   }
 
   .btn-secondary-colored {
-    @apply !gap-0 !bg-transparent !whitespace-normal py-3 px-8 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out;
+    @apply !gap-0 !bg-transparent !whitespace-normal py-1.5 px-4 w-full rounded font-int-extrabold text-12 leading-6 tracking-widest !h-auto uppercase border-solid border-2 cursor-pointer duration-500 ease-in-out;
 
     &:hover {
       @apply !opacity-80;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 56631c8..c4cc5d3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,9 +13,8 @@ const config: Config = {
         "gradient-conic":
         "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
         'primary-gradient' : 'radial-gradient(120.62% 683.52% at 110.84% 156.15%, #C5FFFD 6.84%, rgba(111, 255, 194, 0.760784) 48.36%, #00DABA 100%)',
-        'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)',
-        'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)',
- 
+         'gradientbg': 'linear-gradient(129.93deg, rgba(175, 175, 175, 0.12) 16.6%, rgba(17, 243, 179, 0.12) 90.65%)',
+         'darkbg': 'linear-gradient(314.92deg, rgba(17, 39, 49, 0.4) 28.08%, rgba(9, 9, 9, 0.4) 97.04%)',
        },
        colors: {
         black1: '#010101',