diff --git a/app/coordinate/page.tsx b/app/coordinate/page.tsx
index 104bc6f..a1724a9 100644
--- a/app/coordinate/page.tsx
+++ b/app/coordinate/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function CoordinatePage() {
     return (
-        <main className="min-h-screen bg-black text-white overflow-x-hidden selection:bg-[#58B12F] selection:text-black">
+        <main className="min-h-screen bg-black text-white font-sans overflow-x-hidden selection:bg-[#58B12F] selection:text-black">
             <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8 py-12 md:py-16">
                 {/* Navigation */}
                 <div className="mb-10">
@@ -38,13 +38,7 @@ export default function CoordinatePage() {
 
                 {/* Header */}
                 <div className="mb-20 text-center max-w-3xl mx-auto">
-                    <h1
-                        className="text-4xl md:text-5xl lg:text-6xl font-medium text-white mb-6 uppercase leading-tight"
-                        style={{
-                            fontFamily: "var(--font-bebas-neue), sans-serif",
-                            letterSpacing: "0.05em",
-                        }}
-                    >
+                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bebas text-white mb-6 uppercase leading-tight tracking-wide">
                         Coordinate & Scale Impact
                     </h1>
                     <p className="text-xl md:text-2xl text-[#58B12F] mb-4 font-medium uppercase">
@@ -57,10 +51,7 @@ export default function CoordinatePage() {
 
                 {/* The Problem */}
                 <section className="mb-24">
-                    <h2
-                        className="text-3xl md:text-4xl font-medium text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase"
-                        style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                    >
+                    <h2 className="text-3xl md:text-4xl font-bebas text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase tracking-wide">
                         The Problem
                     </h2>
                     <p className="text-gray-200 mb-8 text-lg">
@@ -131,10 +122,7 @@ export default function CoordinatePage() {
 
                 {/* What DeCleanup Provides */}
                 <section className="mb-24">
-                    <h2
-                        className="text-3xl md:text-4xl font-medium text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase"
-                        style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                    >
+                    <h2 className="text-3xl md:text-4xl font-bebas text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase tracking-wide">
                         What DeCleanup Provides
                     </h2>
                     <div className="bg-gray-900/30 border border-gray-800 rounded-2xl p-8 md:p-10">
@@ -160,10 +148,7 @@ export default function CoordinatePage() {
                 {/* DMRV as Infrastructure */}
                 <section className="mb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
                     <div>
-                        <h2
-                            className="text-3xl md:text-4xl font-medium text-white mb-8 border-l-4 border-[#58B12F] pl-4 uppercase"
-                            style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                        >
+                        <h2 className="text-3xl md:text-4xl font-bebas text-white mb-8 border-l-4 border-[#58B12F] pl-4 uppercase tracking-wide">
                             DMRV as Infrastructure
                         </h2>
                         <p className="text-gray-200 mb-6">
@@ -226,10 +211,7 @@ export default function CoordinatePage() {
 
                 {/* Governance Tools Live on Celo */}
                 <section className="mb-24">
-                    <h2
-                        className="text-3xl md:text-4xl font-medium text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase"
-                        style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                    >
+                    <h2 className="text-3xl md:text-4xl font-bebas text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase tracking-wide">
                         Governance Tools Live on Celo
                     </h2>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -274,10 +256,7 @@ export default function CoordinatePage() {
 
                 {/* Example Funding Pools */}
                 <section className="mb-24">
-                    <h2
-                        className="text-3xl md:text-4xl font-medium text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase"
-                        style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                    >
+                    <h2 className="text-3xl md:text-4xl font-bebas text-white mb-10 border-l-4 border-[#58B12F] pl-4 uppercase tracking-wide">
                         Example Funding Pools
                     </h2>
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -309,10 +288,7 @@ export default function CoordinatePage() {
 
                 {/* The Outcome */}
                 <section className="mb-12 bg-gradient-to-r from-gray-900 to-gray-900/50 border border-gray-800 rounded-2xl p-8 md:p-12 text-center">
-                    <h2
-                        className="text-3xl md:text-4xl font-medium text-white mb-8 uppercase"
-                        style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-                    >
+                    <h2 className="text-3xl md:text-4xl font-bebas text-white mb-8 uppercase tracking-wide">
                         The Outcome
                     </h2>
                     <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index 31d6403..820284c 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function DocsPage() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#58B12F] selection:text-white">
+    <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-[#58B12F] selection:text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
         {/* Back + Header */}
         <div className="mb-12 md:mb-16">
diff --git a/app/funders/page.tsx b/app/funders/page.tsx
index 0dd9781..bd1f5ef 100644
--- a/app/funders/page.tsx
+++ b/app/funders/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function FundersPage() {
     return (
-        <main className="min-h-screen bg-black text-white selection:bg-[#58B12F] selection:text-black">
+        <main className="min-h-screen bg-black text-white font-sans selection:bg-[#58B12F] selection:text-black">
             <div className="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
                 {/* Back Button */}
                 <div className="mb-8">
@@ -38,7 +38,7 @@ export default function FundersPage() {
 
                 {/* Page Header */}
                 <div className="text-center mb-12 md:mb-16">
-                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium uppercase text-white mb-6" style={{ fontFamily: "var(--font-bebas-neue), sans-serif", letterSpacing: "0.05em" }}>
+                    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bebas uppercase text-white mb-6 tracking-wide">
                         For those who fund real-world impact
                     </h1>
                     <p className="text-xl md:text-2xl text-[#58B12F] mb-4 font-medium uppercase">
diff --git a/app/get-started/page.tsx b/app/get-started/page.tsx
index c7f144b..3d7dcd0 100644
--- a/app/get-started/page.tsx
+++ b/app/get-started/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 export default function GetStartedPage() {
   return (
-    <main className="min-h-screen bg-black text-white overflow-x-hidden">
+    <main className="min-h-screen bg-black text-white font-sans overflow-x-hidden selection:bg-[#58B12F] selection:text-white">
       <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-12 md:py-16">
         <div className="mb-10">
           <Link
@@ -35,13 +35,7 @@ export default function GetStartedPage() {
         </div>
 
         <div className="mb-12 text-center">
-          <h1
-            className="text-4xl md:text-5xl lg:text-6xl font-medium text-white mb-6 uppercase leading-tight"
-            style={{
-              fontFamily: "var(--font-bebas-neue), sans-serif",
-              letterSpacing: "0.05em",
-            }}
-          >
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bebas text-white mb-6 uppercase leading-tight tracking-wide">
             Get started with DeCleanup Rewards
           </h1>
           <p className="text-xl md:text-2xl text-[#58B12F] mb-4 font-medium uppercase">
diff --git a/app/globals.css b/app/globals.css
index c9fcf5d..5bc20a7 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -10,15 +10,26 @@
   --gray-light: #1a1a1a;
   --gray-medium: #2a2a2a;
   --gray-dark: #111111;
-  
+
   /* Font variables */
   --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-mono: var(--font-geist-sans);
+  /* Consolidating to Geist Sans */
   --font-heading: var(--font-bebas-neue);
-  
-  /* Brand colors */
-  --color-brand-green: #58B12F;
-  --color-brand-yellow: #FAFF00;
+
+  /* Standard Sizes */
+  --text-hero: 5rem;
+  /* 80px */
+  --text-section: 3rem;
+  /* 48px */
+  --text-sub: 1.875rem;
+  /* 30px */
+  --text-body: 1rem;
+  /* 16px */
+  --text-small: 0.875rem;
+  /* 14px */
+  --text-xs: 0.75rem;
+  /* 12px */
 }
 
 /* @theme is a valid Tailwind v4 directive */
@@ -28,6 +39,8 @@
   --font-family-bebas: var(--font-bebas-neue), sans-serif;
   --font-family-heading: var(--font-bebas-neue), sans-serif;
   --font-family-geist: var(--font-geist-sans), sans-serif;
+  --font-family-mono: var(--font-geist-sans), sans-serif;
+  /* Standardizing mono calls */
 }
 
 * {
@@ -38,28 +51,61 @@
   html {
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
-}
+  }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
+  body {
+    background: var(--background);
+    color: var(--foreground);
     font-family: var(--font-geist-sans), system-ui, -apple-system, sans-serif;
+    line-height: 1.5;
     overflow-x: hidden;
     overflow-y: auto;
   }
 
   /* Bebas Neue for all headings - ALL CAPS */
-  h1, h2, h3, h4, h5, h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     font-family: var(--font-bebas-neue), sans-serif;
-    font-weight: normal;
+    font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    line-height: 1.1;
+  }
+
+  h1 {
+    font-size: clamp(2.5rem, 8vw, 5rem);
+  }
+
+  h2 {
+    font-size: clamp(2rem, 5vw, 3rem);
+  }
+
+  h3 {
+    font-size: clamp(1.5rem, 3vw, 1.875rem);
+  }
+
+  p {
+    font-size: 1rem;
+  }
+
+  label,
+  .text-meta {
+    font-size: 0.875rem;
+    font-weight: 500;
   }
 
   /* Better mobile touch targets */
-  button, a {
+  button,
+  a {
     touch-action: manipulation;
   }
+}
+
+@layer utilities {
 
   /* Brand colors */
   .bg-brand-green {
@@ -101,6 +147,7 @@ body {
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
@@ -111,6 +158,7 @@ body {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -122,6 +170,7 @@ body {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
@@ -133,6 +182,7 @@ body {
     opacity: 0;
     transform: translateX(-20px);
   }
+
   to {
     opacity: 1;
     transform: translateX(0);
@@ -162,6 +212,7 @@ body {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -182,10 +233,13 @@ body {
 
 /* Who is this for - subtle border glow */
 @keyframes border-glow {
-  0%, 100% {
+
+  0%,
+  100% {
     border-color: rgba(88, 177, 47, 0.35);
     box-shadow: 0 0 0 1px rgba(88, 177, 47, 0.2);
   }
+
   50% {
     border-color: rgba(88, 177, 47, 0.6);
     box-shadow: 0 0 20px rgba(88, 177, 47, 0.15);
@@ -224,7 +278,4 @@ body {
   display: none;
 }
 
-@media (max-width: 640px) {
- 
-}
-
+@media (max-width: 640px) {}
\ No newline at end of file
diff --git a/app/litepaper/page.tsx b/app/litepaper/page.tsx
index dbc9b79..2be7e65 100644
--- a/app/litepaper/page.tsx
+++ b/app/litepaper/page.tsx
@@ -55,7 +55,7 @@ export default function LitepaperPage() {
                 className="h-8 w-auto object-contain"
               />
             </Link>
-            <span className="text-xs text-gray-300 border-l border-gray-700 pl-3 font-mono">LITEPAPER</span>
+            <span className="text-xs text-gray-300 border-l border-gray-700 pl-3 font-medium">LITEPAPER</span>
           </div>
           <div className="hidden md:flex items-center gap-6 text-sm text-gray-200 font-medium">
             <Link href="#overview" className="hover:text-white transition-colors">Overview</Link>
@@ -85,11 +85,11 @@ export default function LitepaperPage() {
         <div className="max-w-7xl mx-auto relative z-10">
           <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6">
             <div>
-              <div className="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs font-mono mb-4">
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs font-medium mb-4">
                 <span className="w-1.5 h-1.5 rounded-full bg-[#FAFF00] animate-pulse"></span>
                 FEBRUARY 2026 EDITION
               </div>
-              <h1 className="text-6xl md:text-8xl lg:text-9xl text-white leading-[0.9] tracking-tighter mb-4 font-bebas">
+              <h1>
                 DECLEANUP <br />
                 <span className="text-[#58B12F]">NETWORK</span>
               </h1>
@@ -100,12 +100,12 @@ export default function LitepaperPage() {
 
             <div className="flex gap-8 border-l border-white/10 pl-6 md:border-l-0 md:pl-0">
               <div className="text-left md:text-right">
-                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-mono">Status</div>
-                <div className="text-white font-mono text-sm font-bold">PHASE 1: LIVE</div>
+                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-medium">Status</div>
+                <div className="text-white text-sm font-bold">PHASE 1: LIVE</div>
               </div>
               <div className="w-px h-10 bg-white/10 hidden md:block"></div>
               <div className="text-left md:text-right">
-                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-mono">Network</div>
+                <div className="text-xs text-gray-300 uppercase tracking-widest mb-1 font-medium">Network</div>
                 <div className="flex gap-2 justify-start md:justify-end mt-1">
                   <span className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]"></span>
                   <span className="w-2.5 h-2.5 rounded-full bg-[#FAFF00] shadow-[0_0_10px_rgba(250,255,0,0.5)]"></span>
@@ -119,7 +119,7 @@ export default function LitepaperPage() {
       {/* 1. Overview Cards */}
       <section id="overview" className="py-20 bg-[#0A0A0A]">
         <div className="max-w-7xl mx-auto px-6">
-          <h2 className="text-4xl tracking-tight text-white mb-10 flex items-center gap-3 font-bebas">
+          <h2 className="mb-10 flex items-center gap-3">
             <Info className="text-[#58B12F] w-8 h-8" />
             The Mission
           </h2>
@@ -130,7 +130,7 @@ export default function LitepaperPage() {
               <div className="w-12 h-12 rounded-full bg-[#58B12F]/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                 <BadgeCheck className="text-[#58B12F] w-6 h-6" />
               </div>
-              <h3 className="text-2xl text-white mb-2 font-bebas tracking-wide">Verifiable Data</h3>
+              <h3 className="mb-2">Verifiable Data</h3>
               <p className="text-gray-200 text-sm leading-relaxed">
                 Transforming invisible cleanup efforts into standardized, onchain evidence. No more &quot;trust me&quot; - only &quot;verify me.&quot;
               </p>
@@ -141,7 +141,7 @@ export default function LitepaperPage() {
               <div className="w-12 h-12 rounded-full bg-[#FAFF00]/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                 <TrendingUp className="text-[#FAFF00] w-6 h-6" />
               </div>
-              <h3 className="text-2xl text-white mb-2 font-bebas tracking-wide">Auditable Impact</h3>
+              <h3 className="mb-2">Auditable Impact</h3>
               <p className="text-gray-200 text-sm leading-relaxed">
                 Creating specific, traceable records compatible with Hypercerts. Funders can see exactly where capital goes.
               </p>
@@ -152,7 +152,7 @@ export default function LitepaperPage() {
               <div className="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                 <Users className="text-blue-400 w-6 h-6" />
               </div>
-              <h3 className="text-2xl text-white mb-2 font-bebas tracking-wide">Governable Funding</h3>
+              <h3 className="mb-2">Governable Funding</h3>
               <p className="text-gray-200 text-sm leading-relaxed">
                 DAO-based allocation of resources using stable assets. Outcome-based funding pools for long-term sustainability.
               </p>
@@ -175,35 +175,35 @@ export default function LitepaperPage() {
             <div className="bg-amber-600/20 border border-amber-600/30 p-6 rounded-xl hover:bg-amber-600/30 transition-colors group">
               <div className="text-amber-500 text-xs font-bold mb-2 font-mono">SDG 11</div>
               <Building2 className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <div className="text-white text-lg font-bebas leading-none tracking-wide">Sustainable<br />Cities</div>
+              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Sustainable<br />Cities</h3>
             </div>
 
             {/* SDG 12 */}
             <div className="bg-orange-600/20 border border-orange-600/30 p-6 rounded-xl hover:bg-orange-600/30 transition-colors group">
               <div className="text-orange-500 text-xs font-bold mb-2 font-mono">SDG 12</div>
               <RefreshCw className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <div className="text-white text-lg font-bebas leading-none tracking-wide">Responsible<br />Consumption</div>
+              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Responsible<br />Consumption</h3>
             </div>
 
             {/* SDG 13 */}
             <div className="bg-emerald-800/20 border border-emerald-700/30 p-6 rounded-xl hover:bg-emerald-800/30 transition-colors group">
               <div className="text-emerald-500 text-xs font-bold mb-2 font-mono">SDG 13</div>
               <CloudSun className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <div className="text-white text-lg font-bebas leading-none tracking-wide">Climate<br />Action</div>
+              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Climate<br />Action</h3>
             </div>
 
             {/* SDG 14 */}
             <div className="bg-blue-600/20 border border-blue-600/30 p-6 rounded-xl hover:bg-blue-600/30 transition-colors group">
               <div className="text-blue-500 text-xs font-bold mb-2 font-mono">SDG 14</div>
               <Droplets className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity" />
-              <div className="text-white text-lg font-bebas leading-none tracking-wide">Life Below<br />Water</div>
+              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Life Below<br />Water</h3>
             </div>
 
             {/* SDG 15 */}
             <div className="bg-green-600/20 border border-green-600/30 p-6 rounded-xl hover:bg-green-600/30 transition-colors group">
               <div className="text-green-500 text-xs font-bold mb-2 font-mono">SDG 15</div>
               <Leaf className="text-white w-8 h-8 mb-3 opacity-80 group-hover:opacity-100 transition-opacity fill-current" />
-              <div className="text-white text-lg font-bebas leading-none tracking-wide">Life On<br />Land</div>
+              <h3 className="text-white text-lg font-bebas leading-none tracking-wide uppercase">Life On<br />Land</h3>
             </div>
           </div>
         </div>
diff --git a/app/toc/page.tsx b/app/toc/page.tsx
index d8cae5c..b97f0aa 100644
--- a/app/toc/page.tsx
+++ b/app/toc/page.tsx
@@ -48,7 +48,7 @@ function CheckMark({ green = true }: { green?: boolean }) {
 /* ─── Section label ─── */
 function SectionLabel({ children }: { children: React.ReactNode }) {
   return (
-    <p className="text-xs font-mono text-[#58B12F] tracking-widest mb-3 uppercase flex items-center gap-2">
+    <p className="text-xs text-[#58B12F] tracking-widest mb-3 uppercase flex items-center gap-2 font-medium">
       <span className="w-4 h-px bg-[#58B12F]/60" />
       {children}
     </p>
@@ -58,7 +58,7 @@ function SectionLabel({ children }: { children: React.ReactNode }) {
 /* ─── Section heading ─── */
 function SectionHeading({ children, className = "" }: { children: React.ReactNode; className?: string }) {
   return (
-    <h2 className={`text-4xl md:text-5xl font-bebas text-white mb-4 leading-tight tracking-tight ${className}`}>
+    <h2 className={`mb-4 ${className}`}>
       {children}
     </h2>
   );
@@ -91,7 +91,7 @@ function Card({
 
 export default function TocPage() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#58B12F] selection:text-white">
+    <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-[#58B12F] selection:text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
 
         {/* ─── Back link ─── */}
@@ -105,11 +105,11 @@ export default function TocPage() {
 
         {/* ─── Hero ─── */}
         <div className="text-center mb-16 md:mb-24">
-          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs font-mono mb-6">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-[#FAFF00]/20 bg-[#FAFF00]/5 text-[#FAFF00] text-xs mb-6 font-medium">
             <span className="w-1.5 h-1.5 rounded-full bg-[#FAFF00] animate-pulse" />
             THEORY OF CHANGE · v2.2
           </div>
-          <h1 className="text-5xl md:text-7xl lg:text-8xl text-white leading-tight tracking-tighter mb-5 font-bebas">
+          <h1>
             WHY CLEANUP{" "}
             <span className="text-[#58B12F]">STAYS INVISIBLE</span>
           </h1>
@@ -199,7 +199,7 @@ export default function TocPage() {
               <span className="text-[#58B12F] font-semibold">trusted, portable data</span> that connects grassroots action
               to institutional funding, policy decisions, and regenerative ecosystem coordination.
             </p>
-            <p className="text-xs text-gray-500 mt-3 font-mono pl-2">DeCleanup Network - Long-Term Vision (5-10 Years)</p>
+            <p className="text-xs text-gray-500 mt-3 pl-2">DeCleanup Network - Long-Term Vision (5-10 Years)</p>
           </div>
         </section>
 
@@ -225,7 +225,7 @@ export default function TocPage() {
                 { num: "05", Icon: Waves, label: "Capital Flow", desc: "Funders use verified dashboards - fund more cleanups" },
               ].map((step, i) => (
                 <Card key={step.num} accent="green" className="p-5 flex flex-col items-start">
-                  <p className="text-xs font-mono text-[#58B12F] mb-3">{step.num}</p>
+                  <p className="text-xs text-[#58B12F] mb-3 font-medium">{step.num}</p>
                   <div className="inline-flex items-center justify-center w-9 h-9 rounded-xl bg-[#58B12F]/10 mb-3">
                     <step.Icon className="w-4 h-4 text-[#58B12F]" />
                   </div>
@@ -241,7 +241,7 @@ export default function TocPage() {
 
           {/* 30-second test */}
           <Card className="p-6 md:p-8">
-            <p className="text-xs font-mono text-[#58B12F] tracking-widest mb-3 flex items-center gap-2">
+            <p className="text-xs text-[#58B12F] tracking-widest mb-3 flex items-center gap-2 font-medium">
               <Target className="w-3.5 h-3.5" />
               30-Second Strategy Test
             </p>
@@ -547,7 +547,7 @@ export default function TocPage() {
                   </div>
                 </div>
                 <h3 className="text-2xl font-bebas text-white mb-0.5">{ph.title}</h3>
-                <p className="text-xs font-mono text-[#58B12F] mb-2">{ph.subtitle}</p>
+                <p className="text-xs font-medium text-[#58B12F] mb-2">{ph.subtitle}</p>
                 <p className="text-sm text-gray-400 mb-5 leading-relaxed">{ph.desc}</p>
                 <ul className="space-y-2.5">
                   {ph.items.map((it) => (
@@ -620,7 +620,7 @@ export default function TocPage() {
                 ].map((row, i) => (
                   <tr key={i} className="border-b border-neutral-800/50 hover:bg-neutral-900/60 transition-colors">
                     <td className="py-4 px-6">{row[0]}</td>
-                    <td className="py-4 px-6 font-mono text-[#58B12F] whitespace-nowrap">{row[1]}</td>
+                    <td className="py-4 px-6 text-[#58B12F] whitespace-nowrap font-medium">{row[1]}</td>
                     <td className="py-4 px-6 text-gray-400">{row[2]}</td>
                   </tr>
                 ))}
@@ -678,7 +678,7 @@ export default function TocPage() {
               return (
                 <Card key={r.name} accent="none" className="p-5 hover:border-neutral-700/70">
                   <div className="flex items-start justify-between gap-3 mb-3">
-                    <span className={`text-xs font-mono px-2.5 py-1 rounded-full ${levelMap.badge}`}>
+                    <span className={`text-xs font-medium px-2.5 py-1 rounded-full ${levelMap.badge}`}>
                       {r.level} Impact
                     </span>
                     <div className={`w-8 h-8 rounded-xl flex items-center justify-center shrink-0 ${levelMap.iconBg}`}>
diff --git a/app/tokenomics/page.tsx b/app/tokenomics/page.tsx
index 6cff06e..f580dc7 100644
--- a/app/tokenomics/page.tsx
+++ b/app/tokenomics/page.tsx
@@ -11,7 +11,7 @@ export const metadata: Metadata = {
 
 export default function TokenomicsPage() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#58B12F] selection:text-white">
+    <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-[#58B12F] selection:text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
         {/* Back + Header */}
         <div className="mb-12 md:mb-16">
diff --git a/app/userguide/page.tsx b/app/userguide/page.tsx
index 5093f3b..cd32d17 100644
--- a/app/userguide/page.tsx
+++ b/app/userguide/page.tsx
@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function UserGuidePage() {
   return (
-    <div className="min-h-screen bg-[#0A0A0A] text-white selection:bg-[#58B12F] selection:text-white">
+    <div className="min-h-screen bg-[#0A0A0A] text-white font-sans selection:bg-[#58B12F] selection:text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
         {/* Back + Header */}
         <div className="mb-12 md:mb-16">
diff --git a/components/HeroSection/Hero.tsx b/components/HeroSection/Hero.tsx
index 2cccc7d..81bce7d 100644
--- a/components/HeroSection/Hero.tsx
+++ b/components/HeroSection/Hero.tsx
@@ -43,11 +43,7 @@ const Hero = () => {
           />
         </div>
 
-        {/* Main title */}
-        <h1
-          className="mb-6 text-5xl font-normal leading-tight text-white sm:text-6xl md:text-7xl lg:text-8xl"
-          style={{ fontFamily: "var(--font-bebas-neue), sans-serif" }}
-        >
+        <h1 className="mb-6 py-2">
           <span className="bg-gradient-to-r from-[#58B12F] via-[#FAFF00] to-[#58B12F] bg-clip-text text-transparent animate-pulse">
             DECLEANUP
           </span>{" "}
@@ -73,7 +69,7 @@ const Hero = () => {
             rel="noopener noreferrer"
             className="rounded-xl bg-white px-6 py-3 font-medium text-black transition-all duration-300 hover:bg-white/90 hover:shadow-[0_0_24px_rgba(255,255,255,0.15)]"
           >
-            participate now
+            Participate Now
           </Link>
           <Link
             href="/litepaper"
@@ -82,11 +78,6 @@ const Hero = () => {
             Read Litepaper
           </Link>
         </div>
-
-        {/* Sponsored by info */}
-        <p className="mt-6 text-sm font-medium text-[#58B12F]">
-          First Pool Sponsored by Ethereum for the World
-        </p>
       </div>
     </section>
   );
diff --git a/components/UseDeCleanupToday/UseDeCleanupToday.tsx b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
index 1034a07..bd17f32 100644
--- a/components/UseDeCleanupToday/UseDeCleanupToday.tsx
+++ b/components/UseDeCleanupToday/UseDeCleanupToday.tsx
@@ -1,47 +1,18 @@
 import React from "react";
 import Link from "next/link";
-import Image from "next/image";
-
-interface AppConfig {
-  chain: string;
-  title: string;
-  subtitle: string;
-  bullets: string[];
-  href: string;
-  logo: string;
-  accentColor: string;
-}
+import {
+  Smartphone,
+  Layers,
+  Camera,
+  Wand2,
+  Wallet,
+  MapPin,
+  FileText,
+  MessageCircle,
+  ArrowUpRight
+} from "lucide-react";
 
 const UseDeCleanupToday = () => {
-  const ecosystems: AppConfig[] = [
-    {
-      chain: "BASE",
-      title: "Mini App",
-      subtitle: "Lightweight entry for individuals via Farcaster or Base app.",
-      bullets: [
-        "Photo-based logging",
-        "Quick verification",
-        "$bDCU rewards",
-      ],
-      href: "https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards",
-      logo: "/base-logo-white.svg",
-      accentColor: "#58B12F",
-    },
-    {
-      chain: "CELO",
-      title: "Full Platform",
-      subtitle: "Full platform for individuals, NGOs and organizers. Governance and coordination.",
-      bullets: [
-        "Geolocation and maps",
-        "Impact reports (Hypercerts)",
-        "Funding governance",
-      ],
-      href: "https://dapp.decleanup.net",
-      logo: "/celo-celo-logo.svg",
-      accentColor: "#FAFF00",
-    },
-  ];
-
   return (
     <section
       id="ecosystem"
@@ -59,73 +30,88 @@ const UseDeCleanupToday = () => {
         </div>
 
         {/* Cards Layout */}
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {ecosystems.map((app, index) => (
-            <Link
-              key={index}
-              href={app.href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group relative bg-gray-900/50 rounded-2xl border border-gray-800 p-8 lg:p-10 flex flex-col transition-all duration-500 hover:border-[#58B12F]/40 hover:shadow-[0_0_40px_rgba(88,177,47,0.15)] hover:-translate-y-2 overflow-hidden"
-            >
-              {/* Decorative background glow */}
-              <div
-                className="absolute -top-24 -right-24 w-48 h-48 rounded-full blur-[80px] opacity-0 group-hover:opacity-20 transition-opacity duration-500"
-                style={{ backgroundColor: app.accentColor }}
-              />
+        <div className="flex flex-col lg:flex-row gap-8 items-stretch">
+          {/* Base Card */}
+          <Link
+            href="https://farcaster.xyz/miniapps/SfsGBDcHpuSA/decleanup-rewards"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex-1 relative group block"
+          >
+            <div className="absolute inset-0 bg-blue-900/10 rounded-3xl blur-xl group-hover:bg-blue-900/20 transition-all duration-500"></div>
+            <div className="relative h-full bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-blue-500/50 transition-all duration-300">
+              <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
+                <Smartphone className="text-blue-500 w-32 h-32 -rotate-12 translate-x-4 translate-y-4 opacity-10" />
+              </div>
+
+              <div className="flex items-center gap-3 mb-6">
+                <span className="bg-blue-600 text-white text-[10px] font-bold px-2 py-1 rounded tracking-wider">BASE</span>
+                <h3 className="text-3xl text-white font-bebas tracking-wide">Mini App</h3>
+              </div>
+
+              <p className="text-gray-200 mb-8 text-sm leading-relaxed">Lightweight entry for individuals via Farcaster or Base app.</p>
 
-              {/* Chain Label & Logo */}
-              <div className="mb-8 flex items-center gap-3">
-                <Image
-                  src={app.logo}
-                  alt={app.chain}
-                  width={24}
-                  height={24}
-                  className="h-6 w-auto"
-                />
-                <span className="text-sm font-bold tracking-[0.2em] text-gray-400 uppercase">
-                  {app.chain}
-                </span>
+              <div className="space-y-4">
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <Camera className="text-blue-400 w-5 h-5" />
+                  <span className="text-sm text-gray-200">Photo-based logging</span>
+                </div>
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <Wand2 className="text-blue-400 w-5 h-5" />
+                  <span className="text-sm text-gray-200">Quick verification</span>
+                </div>
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <Wallet className="text-blue-400 w-5 h-5" />
+                  <span className="text-sm text-gray-200">$bDCU rewards</span>
+                </div>
               </div>
 
-              {/* Title */}
-              <h3
-                className="text-2xl sm:text-3xl lg:text-4xl font-medium mb-3 text-white normal-case"
-                style={{
-                  fontFamily:
-                    "var(--font-geist-sans), system-ui, -apple-system, sans-serif",
-                }}
-              >
-                {app.title}
-              </h3>
+              <div className="mt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-blue-400 group-hover:text-white transition-colors">
+                Open on Farcaster <ArrowUpRight className="w-4 h-4" />
+              </div>
+            </div>
+          </Link>
 
-              {/* Subtitle */}
-              <p className="text-lg text-gray-300 mb-8 leading-relaxed font-light">
-                {app.subtitle}
-              </p>
+          {/* Celo Card */}
+          <Link
+            href="https://dapp.decleanup.net"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex-1 relative group block"
+          >
+            <div className="absolute inset-0 bg-[#FAFF00]/5 rounded-3xl blur-xl group-hover:bg-[#FAFF00]/10 transition-all duration-500"></div>
+            <div className="relative h-full bg-neutral-900 border border-neutral-800 rounded-3xl p-8 overflow-hidden group-hover:border-[#FAFF00]/50 transition-all duration-300">
+              <div className="absolute top-0 right-0 p-4 opacity-50 pointer-events-none">
+                <Layers className="text-[#FAFF00] w-32 h-32 rotate-12 translate-x-4 translate-y-4 opacity-10" />
+              </div>
 
-              {/* Bullet Points */}
-              <ul className="space-y-4 mb-8 flex-grow">
-                {app.bullets.map((bullet, idx) => (
-                  <li key={idx} className="flex items-start gap-3">
-                    <div
-                      className="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0"
-                      style={{ backgroundColor: app.accentColor }}
-                    />
-                    <span className="text-gray-300 text-base sm:text-lg">{bullet}</span>
-                  </li>
-                ))}
-              </ul>
+              <div className="flex items-center gap-3 mb-6">
+                <span className="bg-[#FAFF00] text-black text-[10px] font-bold px-2 py-1 rounded tracking-wider">CELO</span>
+                <h3 className="text-3xl text-white font-bebas tracking-wide">Full Platform</h3>
+              </div>
+
+              <p className="text-gray-200 mb-8 text-sm leading-relaxed">Full platform for individuals, NGOs and organizers. Governance and coordination.</p>
+
+              <div className="space-y-4">
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <MapPin className="text-[#FAFF00] w-5 h-5" />
+                  <span className="text-sm text-gray-200">Geolocation and maps</span>
+                </div>
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <FileText className="text-[#FAFF00] w-5 h-5" />
+                  <span className="text-sm text-gray-200">Impact reports (Hypercerts)</span>
+                </div>
+                <div className="flex items-center gap-3 p-3 bg-white/5 rounded-lg border border-white/5">
+                  <MessageCircle className="text-[#FAFF00] w-5 h-5" />
+                  <span className="text-sm text-gray-200">Funding governance</span>
+                </div>
+              </div>
 
-              {/* CTA Indicator */}
-              <div className="flex items-center gap-2 text-sm font-bold uppercase tracking-wider text-white group-hover:text-[#FAFF00] transition-colors">
-                Explore on {app.chain}
-                <svg className="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                </svg>
+              <div className="mt-8 flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-[#FAFF00] group-hover:text-white transition-colors">
+                Explore Celo dApp <ArrowUpRight className="w-4 h-4" />
               </div>
-            </Link>
-          ))}
+            </div>
+          </Link>
         </div>
       </div>
     </section>