diff --git a/packages/nextjs/app/market/page.tsx b/packages/nextjs/app/market/page.tsx
new file mode 100644
index 0000000..a15c505
--- /dev/null
+++ b/packages/nextjs/app/market/page.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { motion } from "framer-motion";
+import { Address } from "~~/components/scaffold-eth";
+
+// Dummy NFT data
+const DUMMY_NFTS = [
+  {
+    id: "1",
+    tokenId: "1",
+    owner: "0x1234567890123456789012345678901234567890",
+    metadata: {
+      name: "Cyber Runner #1",
+      description: "A futuristic cyber athlete in neon-lit streets",
+      image: "https://picsum.photos/400/400?random=1",
+      attributes: [
+        { trait_type: "Background", value: "Neon City" },
+        { trait_type: "Rarity", value: "Legendary" },
+        { trait_type: "Power Level", value: "89" }
+      ]
+    },
+  },
+  {
+    id: "2",
+    tokenId: "2",
+    owner: "0x2345678901234567890123456789012345678901",
+    metadata: {
+      name: "Digital Dreams #42",
+      description: "Abstract digital art with vibrant colors and geometric patterns",
+      image: "https://picsum.photos/400/400?random=2",
+      attributes: [
+        { trait_type: "Style", value: "Abstract" },
+        { trait_type: "Colors", value: "Vibrant" },
+        { trait_type: "Edition", value: "42/100" }
+      ]
+    },
+  },
+  {
+    id: "3",
+    tokenId: "3",
+    owner: "0x3456789012345678901234567890123456789012",
+    metadata: {
+      name: "Neon Samurai",
+      description: "A modern warrior in a cyberpunk setting",
+      image: "https://picsum.photos/400/400?random=3",
+      attributes: [
+        { trait_type: "Class", value: "Warrior" },
+        { trait_type: "Weapon", value: "Plasma Katana" },
+        { trait_type: "Level", value: "75" }
+      ]
+    },
+  },
+];
+
+export default function Marketplace() {
+  const router = useRouter();
+
+  return (
+    <div className="flex flex-col min-h-screen pb-20">
+      {/* Hero Section with Back Button */}
+      <div className="bg-dark-surface py-8">
+        <div className="max-w-6xl mx-auto text-center relative px-4">
+          <button
+            onClick={() => router.back()}
+            className="absolute left-6 top-1/4 -translate-y-1/2 
+                     text-neon-green text-5xl hover:text-green-400 transition-colors"
+          >
+            ←
+          </button>
+
+          <h1 className="text-4xl font-bold mb-4 text-neon-green glow-text">NFT Gallery</h1>
+          <p className="text-gray-300">View your collection of unique digital assets</p>
+        </div>
+      </div>
+
+      {/* NFT Grid */}
+      <div className="flex-grow bg-[#1a1a1a] p-6">
+        <div className="max-w-6xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {DUMMY_NFTS.map((nft, index) => (
+              <motion.div
+                key={nft.id}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.3, delay: index * 0.05 }}
+                className="bg-dark-surface rounded-xl overflow-hidden border border-[#000001] hover:border-neon-green
+                         transition-all duration-200 transform hover:scale-[1.02] shadow-neon-glow"
+              >
+                {/* NFT Image */}
+                <div className="aspect-square relative overflow-hidden">
+                  <img
+                    src={nft.metadata.image}
+                    alt={nft.metadata.name}
+                    className="object-cover w-full h-full"
+                  />
+                </div>
+
+                {/* NFT Details */}
+                <div className="p-4">
+                  <h3 className="text-[#fbf8fe] font-bold text-xl mb-2">{nft.metadata.name}</h3>
+                  <p className="text-gray-400 text-sm mb-4">{nft.metadata.description}</p>
+                  
+                  {/* Owner */}
+                  <div className="flex items-center gap-2 mb-4">
+                    <span className="text-gray-400 text-sm">Owner:</span>
+                    <Address address={nft.owner} format="short" />
+                  </div>
+
+                  {/* Attributes */}
+                  <div className="grid grid-cols-2 gap-2">
+                    {nft.metadata.attributes.map((attr, i) => (
+                      <div 
+                        key={i}
+                        className="bg-[#000001] rounded-lg p-2 text-sm"
+                      >
+                        <div className="text-gray-400">{attr.trait_type}</div>
+                        <div className="text-neon-green font-medium">{attr.value}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Stats Section */}
+      <div className="bg-dark-surface py-6 mb-16">
+        <div className="max-w-2xl mx-auto grid grid-cols-3 gap-4 text-center">
+          <div>
+            <h3 className="text-2xl font-bold text-neon-green glow-text">{DUMMY_NFTS.length}</h3>
+            <p className="text-gray-300">Total NFTs</p>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-neon-green glow-text">
+              {DUMMY_NFTS[0].metadata.attributes.length}
+            </h3>
+            <p className="text-gray-300">Attributes</p>
+          </div>
+          <div>
+            <h3 className="text-2xl font-bold text-neon-green glow-text">
+              {new Set(DUMMY_NFTS.map(nft => nft.owner)).size}
+            </h3>
+            <p className="text-gray-300">Unique Owners</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index cc1bc8b..7be0f3f 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -41,64 +41,122 @@ const Home: NextPage = () => {
   };
 
   return (
-    <div className="flex items-center flex-col flex-grow pt-10">
-      <div className="px-5 max-w-4xl w-full">
-        <h1 className="text-center mb-8">
-          <span className="block text-4xl font-bold mb-2 bg-gradient-to-r from-[#11ce6f] to-[#3b82f6] text-transparent bg-clip-text">
-            Welcome to Momentum
-          </span>
-          <span className="text-xl text-[#a3a2a7]">
-            Stake your steps, earn rewards
+    <>
+      {/* Background Overlay */}
+      <motion.div
+        style={{
+          opacity: bgOpacity,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "black",
+          pointerEvents: "none",
+          zIndex: 40,
+        }}
+      />
+
+      {/* Main Content */}
+      <motion.div
+        drag="y"
+        dragConstraints={{ top: 0, bottom: 0 }}
+        dragElastic={0.9}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        style={{ y }}
+        className="flex items-center flex-col flex-grow pt-10"
+      >
+        {/* Pull Down Indicator */}
+        <motion.div
+          style={{
+            position: "fixed",
+            top: 20,
+            left: "50%",
+            transform: "translateX(-50%)",
+            opacity: useTransform(y, [0, 50], [0, 1]),
+            zIndex: 50,
+          }}
+          className="flex flex-col items-center gap-2"
+        >
+          <motion.div
+            animate={{ y: [0, 10, 0] }}
+            transition={{
+              duration: 2,
+              repeat: Infinity,
+              ease: "easeInOut",
+            }}
+            className="text-[#11ce6f]"
+          >
+            ↓
+          </motion.div>
+          <span className="text-[#11ce6f] font-bold bg-[#2d2c2e] px-4 py-2 rounded-full shadow-lg">
+            Pull down for Leaderboard
           </span>
-        </h1>
+        </motion.div>
 
-        {/* Stats Section */}
-        <div className="space-y-4 mb-8">
-          <StatsComponent stepsGoal={8000} />
-          <StepComponent totalSteps={8000} />
+        <div className="mb-8 text-center text-sm text-[#a3a2a7] animate-pulse">
+          Swipe down to check the leaderboard rankings
         </div>
 
-        {/* Stake Card Section */}
-        <div className="relative mb-8">
-          <div className="absolute -top-12 right-10 animate-bounce">
-            <div className="flex items-center text-[#11ce6f]">
-              <span className="mr-2 font-bold">Stake Now!</span>
-              <svg className="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-              </svg>
-            </div>
+        <div className="px-5 max-w-4xl w-full">
+          <h1 className="text-center mb-8">
+            <span className="block text-4xl font-bold mb-2 bg-gradient-to-r from-[#11ce6f] to-[#3b82f6] text-transparent bg-clip-text">
+              Welcome to Momentum
+            </span>
+            <span className="text-xl text-[#a3a2a7]">
+              Stake your steps, earn rewards
+            </span>
+          </h1>
+
+          {/* Stats Section */}
+          <div className="space-y-4 mb-8">
+            <StatsComponent stepsGoal={8000} />
+            <StepComponent totalSteps={8000} />
           </div>
-          <StakeCard contractAddress={contractAddress} contractABI={contractABI} />
-        </div>
 
-        {/* Connected Address */}
-        {connectedAddress && (
-          <div className="flex justify-center items-center gap-2 mb-8">
-            <span className="text-[#a3a2a7]">Connected:</span>
-            <Address address={connectedAddress} />
+          {/* Stake Card Section */}
+          <div className="relative mb-8">
+            <div className="absolute -top-12 right-10 animate-bounce">
+              <div className="flex items-center text-[#11ce6f]">
+                <span className="mr-2 font-bold">Stake Now!</span>
+                <svg className="w-6 h-6 transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+                </svg>
+              </div>
+            </div>
+            <StakeCard contractAddress={contractAddress} contractABI={contractABI} />
           </div>
-        )}
 
-        {/* Footer Links */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
-          <Link 
-            href="/debug" 
-            className="p-6 rounded-xl bg-[#2d2c2e] hover:bg-[#3d3c3e] transition-colors text-center"
-          >
-            <h3 className="text-lg font-semibold mb-2">Debug Contracts</h3>
-            <p className="text-[#a3a2a7]">Test and debug your smart contracts</p>
-          </Link>
-          
-          <Link 
-            href="/blockexplorer" 
-            className="p-6 rounded-xl bg-[#2d2c2e] hover:bg-[#3d3c3e] transition-colors text-center"
-          >
-            <h3 className="text-lg font-semibold mb-2">Block Explorer</h3>
-            <p className="text-[#a3a2a7]">View transaction history and contract interactions</p>
-          </Link>
+          {/* Connected Address */}
+          {connectedAddress && (
+            <div className="flex justify-center items-center gap-2 mb-8">
+              <span className="text-[#a3a2a7]">Connected:</span>
+              <Address address={connectedAddress} />
+            </div>
+          )}
+
+          {/* Footer Links */}
+          {/* <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-8">
+            <Link 
+              href="/debug" 
+              className="p-6 rounded-xl bg-[#2d2c2e] hover:bg-[#3d3c3e] transition-colors text-center"
+            >
+              <h3 className="text-lg font-semibold mb-2">Debug Contracts</h3>
+              <p className="text-[#a3a2a7]">Test and debug your smart contracts</p>
+            </Link>
+            
+            <Link 
+              href="/blockexplorer" 
+              className="p-6 rounded-xl bg-[#2d2c2e] hover:bg-[#3d3c3e] transition-colors text-center"
+            >
+              <h3 className="text-lg font-semibold mb-2">Block Explorer</h3>
+              <p className="text-[#a3a2a7]">View transaction history and contract interactions</p>
+            </Link>
+          </div> */}
         </div>
-      </div>
-    </div>
+      </motion.div>
+    </>
   );
 };