diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..51a8ed5
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/logo-light.png b/public/logo-light.png
new file mode 100644
index 0000000..1293296
Binary files /dev/null and b/public/logo-light.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..51a8ed5
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/app/icon.png b/src/app/icon.png
new file mode 100644
index 0000000..a87d03a
Binary files /dev/null and b/src/app/icon.png differ
diff --git a/src/app/icon.svg b/src/app/icon.svg
deleted file mode 100644
index 53b9056..0000000
--- a/src/app/icon.svg
+++ /dev/null
@@ -1,72 +0,0 @@
-<svg
-  width="32"
-  height="32"
-  viewBox="0 0 100 100"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  {/* Outer Ring */}
-  <circle
-    cx="50"
-    cy="50"
-    r="44"
-    stroke="#683285"
-    strokeWidth="6.5"
-    fill="white"
-  />
-
-  {/* Back Handle Arch */}
-  <path
-    d="M 33 51 L 33 42 C 33 8, 62 8, 62 42 L 62 51"
-    stroke="#683285"
-    strokeWidth="3.2"
-    strokeLinecap="round"
-    fill="none"
-  />
-
-  {/* Main N Bag Body */}
-  <path
-    d="M 24 81 L 24 42 L 38 42 L 54 71 L 54 42 L 68 42 L 68 81 L 54 81 L 38 52 L 38 81 Z"
-    fill="#683285"
-  />
-
-  {/* 3D Side Face of Right Bag */}
-  <path
-    d="M 68 42 L 72 46.5 L 76 44 L 76 82.5 L 68 81 Z"
-    fill="#683285"
-  />
-
-  {/* Front Handle Arch */}
-  <path
-    d="M 30 51 L 30 42 C 30 12, 59 12, 59 42 L 59 51"
-    stroke="#683285"
-    strokeWidth="3.2"
-    strokeLinecap="round"
-    fill="none"
-  />
-
-  {/* Negative Space lines for Creases and Separators */}
-  {/* Separator between Right Leg Front and Side */}
-  <line
-    x1="68"
-    y1="42"
-    x2="68"
-    y2="81"
-    stroke="white"
-    strokeWidth="1.8"
-  />
-
-  {/* Crease fold on the 3D Side */}
-  <path
-    d="M 72 46.5 L 72 81.5"
-    stroke="white"
-    strokeWidth="1.8"
-    strokeLinecap="round"
-  />
-
-  {/* Handle holes/grommets */}
-  <circle cx="30" cy="51" r="1.4" fill="white" />
-  <circle cx="33" cy="51" r="1.4" fill="white" />
-  <circle cx="59" cy="51" r="1.4" fill="white" />
-  <circle cx="62" cy="51" r="1.4" fill="white" />
-</svg>
diff --git a/src/components/home/Download.tsx b/src/components/home/Download.tsx
index 8e66fb7..3026f95 100644
--- a/src/components/home/Download.tsx
+++ b/src/components/home/Download.tsx
@@ -1,136 +1,181 @@
 'use client'
 
 import { motion } from 'framer-motion'
-import { SectionHeader } from '@/components/ui/SectionHeader'
-import { GlassCard } from '@/components/ui/GlassCard'
 import { fadeUp, staggerContainer, viewportConfig } from '@/lib/animations'
 
-type DownloadCard = {
-  name: string
-  role: string
-  desc: string
-  playUrl: string
-  qrSymbol: string
-  color: string
-  tag: string
-}
-
-const CARDS: DownloadCard[] = [
-  {
-    name: 'Nearle Deal',
-    role: 'For Residents',
-    desc: 'Order groceries, buy daily essentials, secure community deals, and manage local bookings in one dashboard.',
-    playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.deal',
-    qrSymbol: '🥦',
-    color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
-    tag: 'Shop Now',
-  },
-  {
-    name: 'Nearle Partner',
-    role: 'For Businesses',
-    desc: 'List catalog products, manage orders instantly, inspect revenue graphs, and execute instant escrow cash outs.',
-    playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.partner',
-    qrSymbol: '🏪',
-    color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
-    tag: 'Grow Sales',
-  },
-  {
-    name: 'Nearle Gear',
-    role: 'For Riders',
-    desc: 'Receive optimized route paths, complete geolocated drop confirmations, and view comprehensive fleet earnings.',
-    playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.gear',
-    qrSymbol: '🛵',
-    color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
-    tag: 'Earn Daily',
-  },
-  {
-    name: 'Nearle Admin',
-    role: 'For Coordinators',
-    desc: 'Oversee local hubs, monitor rider activity levels, approve new merchant stores, and check operational health.',
-    playUrl: 'https://play.google.com/store/apps/details?id=com.nearle.admin',
-    qrSymbol: '🔮',
-    color: 'border-purple-lavender/50 hover:border-purple-primary bg-gradient-to-br from-white to-purple-soft/20',
-    tag: 'Manage Hub',
-  },
-]
-
 export function Download() {
   return (
-    <div className="py-24 sm:py-32 bg-nearle-bgsoft px-5 sm:px-8 relative overflow-hidden">
-      {/* Decorative Grids */}
-      <div className="absolute inset-0 bg-grid-soft opacity-30 pointer-events-none" />
+    <section id="download" className="py-24 sm:py-32 bg-white relative overflow-hidden px-5 sm:px-8 border-t border-purple-soft">
+      {/* Background soft glowing blur elements */}
+      <div className="absolute top-1/2 left-0 -translate-y-1/2 w-96 h-96 bg-purple-soft/60 rounded-full blur-3xl -z-10 pointer-events-none" />
+      <div className="absolute top-1/3 right-0 -translate-y-1/2 w-[500px] h-[500px] bg-purple-lavender/25 rounded-full blur-3xl -z-10 pointer-events-none" />
 
       <div className="max-w-7xl mx-auto">
-        <SectionHeader
-          label="Mobile Suite"
-          heading={
-            <>
-              Deploy the Nearle
-              <br />
-              <span className="bg-gradient-purple bg-clip-text text-transparent">
-                Platform Today
-              </span>
-            </>
-          }
-          sub="Scan the QR codes or download directly from Google Play Store to activate your smart neighbourhood ecosystem."
-          align="center"
-          className="mb-16 sm:mb-20"
-        />
+        <div className="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
+          
+          {/* Left Column: Interactive Mobile Mockup Showcase */}
+          <div className="lg:col-span-5 flex justify-center items-center relative">
+            
+            {/* Glowing Backdrop Lights */}
+            <div className="absolute -inset-4 bg-gradient-purple rounded-[40px] opacity-10 blur-xl pointer-events-none" />
+            
+            {/* Floating UI Elements */}
+            <div className="absolute left-[-20px] top-[15%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float">
+              <span className="text-2xl">🥦</span>
+              <div>
+                <div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Residents</div>
+                <div className="text-xs font-extrabold text-nearle-dark">Fresh Greens Delivered</div>
+              </div>
+            </div>
 
-        <motion.div
-          variants={staggerContainer}
-          initial="hidden"
-          whileInView="visible"
-          viewport={viewportConfig}
-          className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
-        >
-          {CARDS.map((card) => (
-            <motion.div key={card.name} variants={fadeUp} className="group">
-              <GlassCard className={`h-full flex flex-col justify-between p-6 ${card.color} shadow-nearle-sm hover:shadow-nearle-lg group-hover:scale-[1.02] transition-all duration-300`}>
-                <div>
-                  <div className="flex items-center justify-between gap-3 mb-6">
-                    <span className="text-[10px] font-mono font-bold tracking-widest text-purple-primary uppercase">
-                      {card.role}
-                    </span>
-                    <span className="bg-purple-lavender text-purple-deep rounded-full px-2.5 py-0.5 font-mono text-[9px] font-bold tracking-widest uppercase">
-                      {card.tag}
-                    </span>
-                  </div>
+            <div className="absolute right-[-20px] bottom-[20%] bg-white/90 backdrop-blur-md border border-purple-lavender/50 rounded-2xl p-3 shadow-nearle-md flex items-center gap-3 z-20 animate-float" style={{ animationDelay: '2s' }}>
+              <span className="text-2xl">🛵</span>
+              <div>
+                <div className="text-[10px] font-bold text-nearle-mid uppercase tracking-wide">Rider Network</div>
+                <div className="text-xs font-extrabold text-nearle-dark">Optimized Delivery Routes</div>
+              </div>
+            </div>
 
-                  <h3 className="font-display font-extrabold text-xl text-nearle-dark group-hover:text-purple-deep transition-colors duration-200">
-                    {card.name}
-                  </h3>
-
-                  <p className="font-body text-nearle-mid text-xs leading-relaxed mt-3 mb-8">
-                    {card.desc}
-                  </p>
+            {/* Phone Mockup Frame */}
+            <div className="w-[280px] h-[560px] rounded-[48px] border-[12px] border-nearle-dark bg-[#0F1115] shadow-2xl relative overflow-hidden flex flex-col justify-between">
+              
+              {/* Camera Notch */}
+              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-32 h-6 bg-nearle-dark rounded-b-2xl z-30" />
+              
+              {/* Inner Screen Content */}
+              <div className="w-full h-full bg-gradient-to-b from-[#1E1129] via-[#0F0916] to-[#0A060E] p-5 pt-8 flex flex-col justify-between relative overflow-hidden select-none">
+                
+                {/* Micro glowing backgrounds inside the phone */}
+                <div className="absolute top-[20%] left-[10%] w-32 h-32 bg-purple-primary/20 rounded-full blur-2xl pointer-events-none" />
+                
+                {/* Header */}
+                <div className="flex justify-between items-center z-10">
+                  <div className="text-[9px] font-mono text-purple-lavender">Nearle App</div>
+                  <div className="text-[9px] font-mono text-white/50">4G LTE</div>
                 </div>
 
-                <div className="flex items-center justify-between gap-4 pt-6 border-t border-nearle-border/40">
-                  {/* Mock QR Code container */}
-                  <div className="w-16 h-16 rounded-xl bg-white border border-nearle-border flex flex-col items-center justify-center p-1 shadow-sm relative group-hover:border-purple-primary transition-all duration-300 select-none">
-                    <div className="w-full h-full border-2 border-dashed border-purple-lavender rounded-lg flex items-center justify-center text-xl">
-                      {card.qrSymbol}
+                {/* Main Content inside Mockup */}
+                <div className="my-auto flex flex-col gap-5 z-10">
+                  <div className="text-center">
+                    <span className="inline-block bg-purple-primary/20 text-purple-accent border border-purple-primary/30 rounded-full px-2.5 py-0.5 text-[8px] font-bold tracking-widest uppercase mb-2">
+                      Hyperlocal Suite
+                    </span>
+                    <h4 className="font-display font-extrabold text-xl text-white tracking-tight leading-tight">
+                      Your World,<br />Inside Your Pocket
+                    </h4>
+                  </div>
+
+                  {/* Inside App Preview Cards */}
+                  <div className="flex flex-col gap-2.5">
+                    
+                    {/* App item 1 */}
+                    <div className="bg-white/5 border border-white/10 rounded-2xl p-2.5 flex items-center gap-2.5 backdrop-blur-sm">
+                      <div className="w-8 h-8 rounded-xl bg-purple-deep flex items-center justify-center text-sm">
+                        🏪
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-[8px] font-bold text-white/40 uppercase">Nearle Partner</div>
+                        <div className="text-[10px] font-extrabold text-white">Local Merchant App</div>
+                      </div>
+                    </div>
+
+                    {/* App item 2 */}
+                    <div className="bg-white/5 border border-white/10 rounded-2xl p-2.5 flex items-center gap-2.5 backdrop-blur-sm">
+                      <div className="w-8 h-8 rounded-xl bg-purple-deep flex items-center justify-center text-sm">
+                        🔮
+                      </div>
+                      <div className="flex-1">
+                        <div className="text-[8px] font-bold text-white/40 uppercase">Nearle Admin</div>
+                        <div className="text-[10px] font-extrabold text-white">Community Coordinator</div>
+                      </div>
                     </div>
-                  </div>
 
-                  <div className="flex-1 flex flex-col gap-1.5">
-                    <a
-                      href={card.playUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="inline-flex items-center justify-center gap-1.5 px-4 py-2 bg-nearle-dark hover:bg-purple-deep text-white rounded-full font-bold text-[10px] tracking-wider uppercase transition active:scale-95 shadow-sm"
-                    >
-                      <span>🤖</span>
-                      <span>Play Store</span>
-                    </a>
                   </div>
                 </div>
-              </GlassCard>
-            </motion.div>
-          ))}
-        </motion.div>
+
+                {/* Footer UI inside Phone */}
+                <div className="border-t border-white/10 pt-3 text-center z-10">
+                  <div className="text-[7px] text-white/40 uppercase tracking-widest">Coimbatore, India</div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+          {/* Right Column: Premium Text & Direct CTA Layout */}
+          <div className="lg:col-span-7 flex flex-col justify-center">
+            
+            <div className="inline-flex items-center gap-2 bg-purple-soft border border-purple-lavender rounded-full px-4 py-1.5 text-purple-deep font-bold text-xs uppercase tracking-wide mb-6 w-fit select-none">
+              <span className="w-2 h-2 rounded-full bg-purple-primary animate-ping" />
+              <span>Get the Nearle App</span>
+            </div>
+
+            <h2 className="font-display font-extrabold text-3xl sm:text-4xl lg:text-5xl text-nearle-dark tracking-tight leading-[1.1] mb-6">
+              Redefine Your<br />
+              <span className="bg-gradient-purple bg-clip-text text-transparent">
+                Neighbourhood Living
+              </span>
+            </h2>
+
+            <p className="font-body text-nearle-mid text-sm sm:text-base leading-relaxed mb-8 max-w-xl">
+              Experience the ease of having all local amenities, stores, daily fresh goods, and customized neighborhood home services compiled inside India's #1 hyperlocal platform. Download directly to activate your neighborhood Living.
+            </p>
+
+            {/* Quick Benefits Grid */}
+            <div className="grid sm:grid-cols-2 gap-4 mb-10 max-w-lg">
+              {[
+                { title: 'Nearle Deal', desc: 'Instantly shop daily goods and fresh groceries.', emoji: '🥦' },
+                { title: 'Nearle Partner', desc: 'Manage catalog products and instant store setups.', emoji: '🏪' },
+                { title: 'Nearle Gear', desc: 'Optimized rider log and route mappings.', emoji: '🛵' },
+                { title: 'Nearle Admin', desc: 'Operate local hubs and coordinate logistics.', emoji: '🔮' },
+              ].map((b) => (
+                <div key={b.title} className="flex gap-3 p-3.5 bg-nearle-bgsoft/60 border border-nearle-border/40 rounded-2xl hover:border-purple-lavender/60 transition duration-300">
+                  <span className="text-xl">{b.emoji}</span>
+                  <div>
+                    <h5 className="font-display font-extrabold text-xs text-nearle-dark">{b.title}</h5>
+                    <p className="font-body text-[10px] text-nearle-mid leading-normal mt-0.5">{b.desc}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Direct High-Fidelity Call To Action Container */}
+            <div className="flex flex-col gap-4 pt-6 border-t border-nearle-border/40 max-w-md">
+              <div className="text-[9px] font-mono text-purple-primary font-extrabold uppercase tracking-widest mb-1">Direct Download</div>
+              
+              <div className="flex flex-wrap gap-3">
+                {/* Google Play Store Link Button */}
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center gap-2.5 px-6 py-3 bg-gradient-purple text-white hover:shadow-cta hover:scale-[1.02] transition-all duration-300 rounded-full font-bold text-xs tracking-wider uppercase active:scale-95 shadow-md flex-1 min-w-[170px]"
+                >
+                  <span>🤖</span>
+                  <span>Google Play</span>
+                </a>
+
+                {/* Apple App Store Link Button */}
+                <a
+                  href="https://apps.apple.com"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center justify-center gap-2.5 px-6 py-3 bg-nearle-dark text-white hover:bg-purple-deep hover:shadow-cta hover:scale-[1.02] transition-all duration-300 rounded-full font-bold text-xs tracking-wider uppercase active:scale-95 shadow-md flex-1 min-w-[170px]"
+                >
+                  <span>🍎</span>
+                  <span>App Store</span>
+                </a>
+              </div>
+
+              <div className="text-[10px] text-nearle-mid leading-relaxed mt-1">
+                Install the unified ecosystem app directly on your Android or iOS device to get started instantly.
+              </div>
+            </div>
+
+          </div>
+
+        </div>
       </div>
-    </div>
+    </section>
   )
 }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 641e9a8..2637827 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -22,10 +22,7 @@ export function Footer() {
       <div className="max-w-7xl mx-auto px-5 sm:px-8 pt-16 pb-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10">
         <div>
           <div className="flex items-center gap-2">
-            <NearleLogo size={48} fill="white" stroke="#683285" />
-            <span className="font-display font-extrabold text-white text-3xl tracking-tight">
-              Nearle
-            </span>
+            <NearleLogo size={40} light />
           </div>
           <p className="font-body text-nearle-light mt-4 max-w-xs">
             Your Neighbourhood, Your World.
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index adcf43b..28aaaf1 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -24,10 +24,9 @@ const HOME_SECTIONS = [
 
 const NAV: NavItem[] = [
   { label: 'Home', href: '/', sectionId: 'home' },
+  { label: 'Business', href: '/businesses' },
+  { label: 'People', href: '/communities', sectionId: 'map' },
   { label: 'About', href: '/about' },
-  { label: 'Communities', href: '/communities', sectionId: 'map' },
-  { label: 'Businesses', href: '/businesses' },
-  { label: 'Download', href: '/#download', sectionId: 'download' },
   { label: 'Contact', href: '/contact', sectionId: 'contact' },
 ]
 
@@ -72,10 +71,7 @@ export function Navbar() {
     >
       <nav className="max-w-7xl mx-auto px-5 sm:px-8 h-14 md:h-16 flex items-center justify-between">
         <Link href="/" className="flex items-center gap-2 group">
-          <NearleLogo size={44} />
-          <span className="font-display font-extrabold text-purple-deep text-3xl tracking-tight">
-            Nearle
-          </span>
+          <NearleLogo size={32} />
         </Link>
 
         <ul className="hidden lg:flex items-center gap-1">
@@ -99,12 +95,14 @@ export function Navbar() {
         </ul>
 
         <div className="hidden lg:flex items-center gap-3">
-          <Link
-            href="/#download"
+          <a
+            href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+            target="_blank"
+            rel="noopener noreferrer"
             className="bg-purple-deep text-white rounded-full px-5 py-2 font-semibold text-sm hover:bg-purple-primary shadow-cta hover:shadow-cta-hover transition-all"
           >
             Get Ready Now
-          </Link>
+          </a>
         </div>
 
         <button
@@ -150,12 +148,14 @@ export function Navbar() {
                 )
               })}
               <li className="pt-3">
-                <Link
-                  href="/#download"
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.nearle.gear"
+                  target="_blank"
+                  rel="noopener noreferrer"
                   className="block text-center bg-purple-deep text-white rounded-full px-5 py-3 font-semibold hover:bg-purple-primary shadow-cta transition-all"
                 >
                   Get Ready Now
-                </Link>
+                </a>
               </li>
             </ul>
           </motion.div>
diff --git a/src/components/ui/NearleLogo.tsx b/src/components/ui/NearleLogo.tsx
index 1e06d58..b0fc8e5 100644
--- a/src/components/ui/NearleLogo.tsx
+++ b/src/components/ui/NearleLogo.tsx
@@ -1,90 +1,23 @@
 type Props = {
   size?: number
   className?: string
+  light?: boolean
   stroke?: string
   fill?: string
+  ringColor?: string
 }
 
 export function NearleLogo({
   size = 40,
   className = '',
-  stroke = '#683285',
-  fill = 'white',
+  light = false,
 }: Props) {
   return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 100 100"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+    <img
+      src={light ? '/logo-light.png' : '/logo.png'}
+      style={{ height: size, width: 'auto' }}
+      alt="Nearle logo"
       className={className}
-      aria-label="Nearle logo"
-    >
-      {/* Outer Ring */}
-      <circle
-        cx="50"
-        cy="50"
-        r="44"
-        stroke={stroke}
-        strokeWidth="6.5"
-        fill={fill}
-      />
-
-      {/* Back Handle Arch */}
-      <path
-        d="M 33 51 L 33 42 C 33 8, 62 8, 62 42 L 62 51"
-        stroke={stroke}
-        strokeWidth="3.2"
-        strokeLinecap="round"
-        fill="none"
-      />
-
-      {/* Main N Bag Body */}
-      <path
-        d="M 24 81 L 24 42 L 38 42 L 54 71 L 54 42 L 68 42 L 68 81 L 54 81 L 38 52 L 38 81 Z"
-        fill={stroke}
-      />
-
-      {/* 3D Side Face of Right Bag */}
-      <path
-        d="M 68 42 L 72 46.5 L 76 44 L 76 82.5 L 68 81 Z"
-        fill={stroke}
-      />
-
-      {/* Front Handle Arch */}
-      <path
-        d="M 30 51 L 30 42 C 30 12, 59 12, 59 42 L 59 51"
-        stroke={stroke}
-        strokeWidth="3.2"
-        strokeLinecap="round"
-        fill="none"
-      />
-
-      {/* Negative Space lines for Creases and Separators */}
-      {/* Separator between Right Leg Front and Side */}
-      <line
-        x1="68"
-        y1="42"
-        x2="68"
-        y2="81"
-        stroke={fill}
-        strokeWidth="1.8"
-      />
-
-      {/* Crease fold on the 3D Side */}
-      <path
-        d="M 72 46.5 L 72 81.5"
-        stroke={fill}
-        strokeWidth="1.8"
-        strokeLinecap="round"
-      />
-
-      {/* Handle holes/grommets */}
-      <circle cx="30" cy="51" r="1.4" fill={fill} />
-      <circle cx="33" cy="51" r="1.4" fill={fill} />
-      <circle cx="59" cy="51" r="1.4" fill={fill} />
-      <circle cx="62" cy="51" r="1.4" fill={fill} />
-    </svg>
+    />
   )
 }