diff --git a/packages/nextjs/app/leaderboard/page.tsx b/packages/nextjs/app/leaderboard/page.tsx
index 5f8ed11..722f21f 100644
--- a/packages/nextjs/app/leaderboard/page.tsx
+++ b/packages/nextjs/app/leaderboard/page.tsx
@@ -42,10 +42,13 @@ export default function Leaderboard() {
     rank: index + 1,
     address: stake.user,
     totalStaked: formatEther(BigInt(stake.totalStaked)),
-    id: stake.id
+    id: stake.id,
   }));
 
-  const totalStaked = leaderboardData.reduce((sum: number, entry: LeaderboardEntry) => sum + Number(entry.totalStaked), 0);
+  const totalStaked = leaderboardData.reduce(
+    (sum: number, entry: LeaderboardEntry) => sum + Number(entry.totalStaked),
+    0,
+  );
 
   return (
     <div className="flex flex-col h-screen">
@@ -53,9 +56,7 @@ export default function Leaderboard() {
       <div className="bg-dark-surface py-8">
         <div className="max-w-2xl mx-auto text-center">
           <h1 className="text-4xl font-bold mb-4 text-neon-green glow-text">Top Stakers</h1>
-          <p className="text-gray-300">
-            The highest stakers on our platform are showcased here
-          </p>
+          <p className="text-gray-300">The highest stakers on our platform are showcased here</p>
         </div>
       </div>
 
@@ -79,29 +80,35 @@ export default function Leaderboard() {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 0.3, delay: index * 0.05 }}
                 className={`p-4 rounded-lg ${
-                  entry.rank === 1 ? 'bg-dark-surface border border-neon-green shadow-neon-glow' :
-                  entry.rank === 2 ? 'bg-dark-surface border border-gray-500' :
-                  entry.rank === 3 ? 'bg-dark-surface border border-orange-600' :
-                  'bg-dark-surface'
+                  entry.rank === 1
+                    ? "bg-dark-surface border border-neon-green shadow-neon-glow"
+                    : entry.rank === 2
+                      ? "bg-dark-surface border border-gray-500"
+                      : entry.rank === 3
+                        ? "bg-dark-surface border border-orange-600"
+                        : "bg-dark-surface"
                 } hover:bg-medium-surface transition-all duration-200 transform hover:scale-[1.02]`}
               >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-4">
-                    <div className={`w-8 h-8 rounded-full flex items-center justify-center ${
-                      entry.rank === 1 ? 'bg-neon-green text-black' :
-                      entry.rank === 2 ? 'bg-gray-500' :
-                      entry.rank === 3 ? 'bg-orange-600' :
-                      'bg-medium-surface'
-                    }`}>
+                    <div
+                      className={`w-8 h-8 rounded-full flex items-center justify-center ${
+                        entry.rank === 1
+                          ? "bg-neon-green text-black"
+                          : entry.rank === 2
+                            ? "bg-gray-500"
+                            : entry.rank === 3
+                              ? "bg-orange-600"
+                              : "bg-medium-surface"
+                      }`}
+                    >
                       <span className="font-bold">{entry.rank}</span>
                     </div>
                     <span className="text-gray-300 font-mono">
                       {entry.address.slice(0, 6)}...{entry.address.slice(-4)}
                     </span>
                   </div>
-                  <span className={`font-bold ${
-                    entry.rank === 1 ? 'text-neon-green' : 'text-gray-300'
-                  }`}>
+                  <span className={`font-bold ${entry.rank === 1 ? "text-neon-green" : "text-gray-300"}`}>
                     {Number(entry.totalStaked).toFixed(4)} ETH
                   </span>
                 </div>
@@ -115,19 +122,15 @@ export default function Leaderboard() {
       <div className="bg-dark-surface py-6">
         <div className="max-w-2xl mx-auto grid grid-cols-2 gap-4 text-center">
           <div>
-            <h3 className="text-2xl font-bold text-neon-green glow-text">
-              {leaderboardData.length}
-            </h3>
+            <h3 className="text-2xl font-bold text-neon-green glow-text">{leaderboardData.length}</h3>
             <p className="text-gray-300">Total Stakers</p>
           </div>
           <div>
-            <h3 className="text-2xl font-bold text-neon-green glow-text">
-              {totalStaked.toFixed(4)} ETH
-            </h3>
+            <h3 className="text-2xl font-bold text-neon-green glow-text">{totalStaked.toFixed(4)} ETH</h3>
             <p className="text-gray-300">Total Value Staked</p>
           </div>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/nextjs/app/leaderboard/queries.ts b/packages/nextjs/app/leaderboard/queries.ts
index 49eb05f..115f463 100644
--- a/packages/nextjs/app/leaderboard/queries.ts
+++ b/packages/nextjs/app/leaderboard/queries.ts
@@ -8,4 +8,4 @@ export const LEADERBOARD = gql`
       id
     }
   }
-`;
\ No newline at end of file
+`;
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 39042af..064a934 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -36,11 +36,11 @@ const Home: NextPage = () => {
           </h1>
 
           <div className="flex justify-center my-4">
-            <StepComponent currentSteps={2000} totalSteps={6000} />
+            <StatsComponent steps={2259} minutes={23} calories={68} stepsGoal={6000} />
           </div>
 
           <div className="flex justify-center my-4">
-            <StatsComponent steps={2259} minutes={23} calories={68} stepsGoal={6000} />
+            <StepComponent currentSteps={2000} totalSteps={6000} />
           </div>
 
           <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
diff --git a/packages/nextjs/components/NewHeader.tsx b/packages/nextjs/components/NewHeader.tsx
index 80cec6d..bb3deda 100644
--- a/packages/nextjs/components/NewHeader.tsx
+++ b/packages/nextjs/components/NewHeader.tsx
@@ -2,106 +2,107 @@ import React, { useState } from "react";
 import Image from "next/image";
 import "./Header.css";
 import blockies from "ethereum-blockies";
-import { useAccount, useConnect, useChainId, useSwitchChain, useDisconnect } from "wagmi";
+import { base, baseSepolia, mainnet, optimism, sepolia } from "viem/chains";
+import { useAccount, useChainId, useConnect, useDisconnect, useSwitchChain } from "wagmi";
 import { injected } from "wagmi/connectors";
-import { sepolia, baseSepolia, mainnet, base, optimism } from "viem/chains";
 
 export const NewHeader = () => {
-    const { isConnected, address } = useAccount();
-    const { connect } = useConnect();
-    const { switchChain } = useSwitchChain();
-    const currentChainId = useChainId();
-    const { disconnect } = useDisconnect();
-    const [isWalletMenuOpen, setIsWalletMenuOpen] = useState(false);
+  const { isConnected, address } = useAccount();
+  const { connect } = useConnect();
+  const { switchChain } = useSwitchChain();
+  const currentChainId = useChainId();
+  const { disconnect } = useDisconnect();
+  const [isWalletMenuOpen, setIsWalletMenuOpen] = useState(false);
 
-    const identicon = address ? blockies.create({ seed: address }).toDataURL() : "";
+  const identicon = address ? blockies.create({ seed: address }).toDataURL() : "";
 
-    const networks = [
-        { id: sepolia.id, name: sepolia.name, icon: "🔵", config: sepolia },
-        { id: baseSepolia.id, name: baseSepolia.name, icon: "🟣", config: baseSepolia },
-        { id: mainnet.id, name: mainnet.name, icon: "🌐", config: mainnet },
-        { id: base.id, name: base.name, icon: "🔷", config: base },
-        { id: optimism.id, name: optimism.name, icon: "🔴", config: optimism }
-    ];
-    
-    const currentNetwork = networks.find(network => network.id === currentChainId) || networks[0];
+  const networks = [
+    { id: sepolia.id, name: sepolia.name, icon: "🔵", config: sepolia },
+    { id: baseSepolia.id, name: baseSepolia.name, icon: "🟣", config: baseSepolia },
+    { id: mainnet.id, name: mainnet.name, icon: "🌐", config: mainnet },
+    { id: base.id, name: base.name, icon: "🔷", config: base },
+    { id: optimism.id, name: optimism.name, icon: "🔴", config: optimism },
+  ];
 
-    const handleNetworkSwitch = async (chainId: number) => {
-        try {
-            await switchChain({ chainId });
-        } catch (err) {
-            console.error("Failed to switch network:", err);
-        }
-    };
+  const currentNetwork = networks.find(network => network.id === currentChainId) || networks[0];
 
-    return (
-        <div className="header-container p-3 flex justify-between items-center">
-            {/* Left side - Logo */}
-            <div className="flex items-center">
-                <span className="text-xl font-bold text-white">StakeFIT</span>
-            </div>
+  const handleNetworkSwitch = async (chainId: number) => {
+    try {
+      await switchChain({ chainId });
+    } catch (err) {
+      console.error("Failed to switch network:", err);
+    }
+  };
+
+  return (
+    <div className="header-container p-3 flex justify-between items-center">
+      {/* Left side - Logo */}
+      <div className="flex items-center">
+        <span className="text-xl font-bold text-white">StakeFIT</span>
+      </div>
+
+      {/* Right side - Wallet Connection with Network Selection */}
+      {!isConnected ? (
+        <button
+          className="connect-button bg-primary px-4 py-2 rounded-lg text-white hover:bg-primary-focus"
+          onClick={() => connect({ connector: injected() })}
+        >
+          Connect Wallet
+        </button>
+      ) : (
+        <div className="relative">
+          <button
+            className="connected-status flex items-center gap-3 bg-base-200 px-4 py-2 rounded-lg hover:bg-base-300"
+            onClick={() => setIsWalletMenuOpen(!isWalletMenuOpen)}
+          >
+            <span className="flex items-center gap-2">
+              <span>{currentNetwork.icon}</span>
+              <span className="text-white text-sm">{currentNetwork.name}</span>
+            </span>
+            <Image src={identicon} alt="Profile" className="profile-pic rounded-full" width={24} height={24} />
+            <div className="overflow-hidden w-24 text-ellipsis text-white">{address}</div>
+          </button>
 
-            {/* Right side - Wallet Connection with Network Selection */}
-            {!isConnected ? (
+          {isWalletMenuOpen && (
+            <div
+              className="absolute right-0 mt-2 w-56 bg-base-200 rounded-lg shadow-xl z-50 
+            "
+            >
+              {/* Network Selection */}
+              <div className="p-2 border-b border-base-300">
+                <div className="text-sm text-base-content mb-2 px-2">Switch Network</div>
+                {networks.map(network => (
+                  <button
+                    key={network.id}
+                    className={`w-full px-4 py-2 text-left hover:bg-base-300 flex items-center gap-2 rounded-lg
+                                        ${currentChainId === network.id ? "bg-base-300" : ""}`}
+                    onClick={() => handleNetworkSwitch(network.id)}
+                  >
+                    <span>{network.icon}</span>
+                    <span className="text-white">{network.name}</span>
+                  </button>
+                ))}
+              </div>
+
+              {/* Wallet Actions */}
+              <div className="p-2">
                 <button
-                    className="connect-button bg-primary px-4 py-2 rounded-lg text-white hover:bg-primary-focus"
-                    onClick={() => connect({ connector: injected() })}
+                  className="w-full px-4 py-2 text-left hover:bg-base-300 text-white rounded-lg flex items-center gap-2"
+                  onClick={() => {
+                    disconnect();
+                    setIsWalletMenuOpen(false);
+                  }}
                 >
-                    Connect Wallet
+                  <span>🔌</span>
+                  <span>Disconnect</span>
                 </button>
-            ) : (
-                <div className="relative">
-                    <button
-                        className="connected-status flex items-center gap-3 bg-base-200 px-4 py-2 rounded-lg hover:bg-base-300"
-                        onClick={() => setIsWalletMenuOpen(!isWalletMenuOpen)}
-                    >
-                        <span className="flex items-center gap-2">
-                            <span>{currentNetwork.icon}</span>
-                            <span className="text-white text-sm">{currentNetwork.name}</span>
-                        </span>
-                        <Image src={identicon} alt="Profile" className="profile-pic rounded-full" width={24} height={24} />
-                        <div className="overflow-hidden w-24 text-ellipsis text-white">
-                            {address}
-                        </div>
-                    </button>
-
-                    {isWalletMenuOpen && (
-                        <div className="absolute right-0 mt-2 w-56 bg-base-200 rounded-lg shadow-xl z-50">
-                            {/* Network Selection */}
-                            <div className="p-2 border-b border-base-300">
-                                <div className="text-sm text-base-content mb-2 px-2">Switch Network</div>
-                                {networks.map((network) => (
-                                    <button
-                                        key={network.id}
-                                        className={`w-full px-4 py-2 text-left hover:bg-base-300 flex items-center gap-2 rounded-lg
-                                        ${currentChainId === network.id ? 'bg-base-300' : ''}`}
-                                        onClick={() => handleNetworkSwitch(network.id)}
-                                    >
-                                        <span>{network.icon}</span>
-                                        <span className="text-white">{network.name}</span>
-                                    </button>
-                                ))}
-                            </div>
-                            
-                            {/* Wallet Actions */}
-                            <div className="p-2">
-                                <button
-                                    className="w-full px-4 py-2 text-left hover:bg-base-300 text-white rounded-lg flex items-center gap-2"
-                                    onClick={() => {
-                                        disconnect();
-                                        setIsWalletMenuOpen(false);
-                                    }}
-                                >
-                                    <span>🔌</span>
-                                    <span>Disconnect</span>
-                                </button>
-                            </div>
-                        </div>
-                    )}
-                </div>
-            )}
+              </div>
+            </div>
+          )}
         </div>
-    );
+      )}
+    </div>
+  );
 };
 
-export default NewHeader;
\ No newline at end of file
+export default NewHeader;
diff --git a/packages/nextjs/components/StepComponent.tsx b/packages/nextjs/components/StepComponent.tsx
index 75f3edb..61c1bd1 100644
--- a/packages/nextjs/components/StepComponent.tsx
+++ b/packages/nextjs/components/StepComponent.tsx
@@ -7,25 +7,23 @@ interface StepComponentProps {
 
 const StepComponent: FC<StepComponentProps> = ({ currentSteps, totalSteps }) => {
   const percentage = Math.round((currentSteps / totalSteps) * 100);
-  
+
   return (
     <div className="flex items-center justify-between w-full rounded-xl bg-[#2d2c2e] p-4">
       <div className="flex flex-col">
-        <span className="text-[#fbf8fe] text-4xl font-bold">
-          {currentSteps.toLocaleString()}
-        </span>
+        <span className="text-[#fbf8fe] text-4xl font-bold">{currentSteps.toLocaleString()}</span>
         <span className="text-[#a3a2a7] text-lg">/{totalSteps.toLocaleString()} steps</span>
       </div>
-      
+
       <div className="relative flex items-center">
         <div className="relative w-32 h-3 bg-[#000001] rounded-full overflow-hidden">
-          <div 
+          <div
             className="absolute top-0 left-0 h-full bg-[#11ce6f] rounded-full transition-all duration-300"
             style={{ width: `${percentage}%` }}
           />
         </div>
-        <div 
-          className="absolute -top-8 transition-all duration-300"
+        <div
+          className="absolute -top-8 transition-all duration-300 pointer-events-none"
           style={{ left: `${percentage}%` }}
         >
           <div className="relative bg-[#11ce6f] text-[#fbf8fe] text-xs px-2 py-1 rounded-md -translate-x-1/2">
@@ -38,4 +36,4 @@ const StepComponent: FC<StepComponentProps> = ({ currentSteps, totalSteps }) =>
   );
 };
 
-export default StepComponent;
\ No newline at end of file
+export default StepComponent;