diff --git a/components/CardsSection.tsx b/components/CardsSection.tsx
index 4cf0907..70e5eed 100644
--- a/components/CardsSection.tsx
+++ b/components/CardsSection.tsx
@@ -1,63 +1,125 @@
+import Marquee from "@/components/ui/Marquee";
+
 export default function CardsSection() {
   return (
-    <section className="py-10 px-4 max-w-7xl mx-auto text-center">
+    <section className="py-10 px-0 max-w-full overflow-hidden text-center">
       <h2 className="font-display text-5xl md:text-7xl mb-6 uppercase">
         Data for humans.
         <br />
         Not just bots.
       </h2>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
-        <div className="bg-slush-yellow p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
-          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-black">
-            Frictionless
-            <br />
-            Onboarding
-          </h3>
-          <div className="mt-4 mb-16">
-            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
-              Learn More
-            </button>
+
+      {/* Cards Marquee */}
+      <div className="mt-16">
+        <Marquee pauseOnHover className="[--duration:40s]">
+          {/* Card 1: Monetize Data */}
+          <div className="bg-slush-yellow p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
+            <h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
+              Monetize
+              <br />
+              Your Data
+            </h3>
+            <div className="mt-4 flex-grow">
+              <p className="text-black text-lg leading-tight font-medium">
+                Marketplace to sell your data securely.
+              </p>
+            </div>
+            <div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
+              <button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
+                Start Selling
+              </button>
+              <div className="transform rotate-12 group-hover:rotate-0 transition-transform">
+                <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
+                  monetization_on
+                </span>
+              </div>
+            </div>
           </div>
-          <div className="absolute bottom-4 right-4 transform rotate-12 group-hover:rotate-0 transition-transform">
-            <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
-              swipe
-            </span>
+
+          {/* Card 2: Fraud Prevention */}
+          <div className="bg-slush-purple p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
+            <h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
+              Fraud
+              <br />
+              Prevention
+            </h3>
+            <div className="mt-4 flex-grow">
+              <p className="text-black text-lg leading-tight font-medium">
+                Random subset verification for buyers to prevent scams.
+              </p>
+            </div>
+            <div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
+              <button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
+                Learn More
+              </button>
+              <div className="transform -rotate-12 group-hover:rotate-0 transition-transform">
+                <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
+                  security
+                </span>
+              </div>
+            </div>
           </div>
-        </div>
-        <div className="bg-slush-purple p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
-          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
-            For Data
-            <br />
-            Power Users
-          </h3>
-          <div className="mt-4 mb-16">
-            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
-              Earn +
-            </button>
+
+          {/* Card 3: SDK & Agents */}
+          <div className="bg-primary p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
+            <h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
+              SDK &
+              <br />
+              Agents
+            </h3>
+            <div className="mt-4 flex-grow">
+              <p className="text-black text-lg leading-tight font-medium">
+                Full SDK support and MCP integration for x402.
+              </p>
+            </div>
+            <div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
+              <button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
+                Docs
+              </button>
+              <div className="transform rotate-6 group-hover:rotate-0 transition-transform">
+                <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
+                  code
+                </span>
+              </div>
+            </div>
           </div>
-          <div className="absolute bottom-4 right-4 transform -rotate-12 group-hover:rotate-0 transition-transform">
-            <span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
-              analytics
-            </span>
+
+          {/* Card 4: Enoki */}
+          <div className="bg-slush-red p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300 w-[300px] md:w-[400px] h-[400px] flex flex-col mx-4 cursor-pointer">
+            <h3 className="font-display text-7xl uppercase mb-2 leading-none text-black">
+              Frictionless
+              <br />
+              UX
+            </h3>
+            <div className="mt-4 flex-grow">
+              <p className="text-black text-lg leading-tight font-medium">
+                Auto-sign transactions powered by Enoki.
+              </p>
+            </div>
+            <div className="mt-4 mb-4 flex justify-between items-center w-full px-4">
+              <button className="bg-black text-white px-6 py-3 rounded-full text-sm font-bold uppercase">
+                Try It
+              </button>
+              <div className="transform -rotate-6 group-hover:rotate-0 transition-transform">
+                <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
+                  bolt
+                </span>
+              </div>
+            </div>
           </div>
-        </div>
-        <div className="bg-primary p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
-          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
-            For
-            <br />
-            Developers
-          </h3>
-          <div className="mt-4 mb-16">
-            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
-              Our Discord
-            </button>
-          </div>
-          <div className="absolute bottom-4 right-4 transform rotate-6 group-hover:rotate-0 transition-transform">
-            <span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
-              code
-            </span>
-          </div>
-        </div>
+        </Marquee>
+      </div>
+
+      {/* Moving Text Line */}
+      <div className="mt-16 bg-white text-black py-4 border-y-4 border-black">
+        <Marquee reverse className="[--duration:20s]">
+          <span className="text-4xl md:text-5xl font-display uppercase mx-8">
+            Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
+          </span>
+          <span className="text-4xl md:text-5xl font-display uppercase mx-8">
+            Monetize Data • Prevent Fraud • Developer SDK • MCP Agents • Powered by Enoki •
+          </span>
+        </Marquee>
       </div>
     </section>
   );
diff --git a/package.json b/package.json
index 099dad7..effe33a 100644
--- a/package.json
+++ b/package.json
@@ -32,14 +32,14 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^20.19.30",
+    "@types/react": "^19.2.8",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
     "eslint-config-next": "16.1.3",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "ignoreScripts": [
     "sharp",