diff --git a/public/ens-logo.png b/public/ens-logo.png
new file mode 100644
index 0000000..4e67677
Binary files /dev/null and b/public/ens-logo.png differ
diff --git a/public/eth-global.png b/public/eth-global.png
new file mode 100644
index 0000000..83256e3
Binary files /dev/null and b/public/eth-global.png differ
diff --git a/public/eth-logo.svg b/public/eth-logo.svg
deleted file mode 100644
index 684e968..0000000
--- a/public/eth-logo.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<!-- Creator: CorelDRAW 2019 (64-Bit) -->
-<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" height="100%" version="1.1" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd"
-viewBox="0 0 784.37 1277.39"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
- <g id="Layer_x0020_1">
-  <metadata id="CorelCorpID_0Corel-Layer"/>
-  <g id="_1421394342400">
-   <g>
-    <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54 "/>
-    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33 "/>
-    <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89 "/>
-    <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89 "/>
-    <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33 "/>
-    <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33 "/>
-   </g>
-  </g>
- </g>
-</svg>
diff --git a/src/app/(public)/components/features-section.tsx b/src/app/(public)/components/features-section.tsx
index 88c8f25..5ab1a5e 100644
--- a/src/app/(public)/components/features-section.tsx
+++ b/src/app/(public)/components/features-section.tsx
@@ -1,84 +1,207 @@
-import { CheckCircle, DollarSign, Shield, Sparkles, Users } from 'lucide-react'
+'use client'
+
+import {
+  ArrowRight,
+  Globe,
+  Mail,
+  PieChart,
+  Rocket,
+  ShieldCheck,
+  Zap,
+} from 'lucide-react'
+import { motion, useScroll, useTransform } from 'motion/react'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
 
 interface Feature {
   icon: React.ReactNode
   title: string
   description: string
+  highlight: string
 }
 
 const features: Feature[] = [
   {
-    icon: <Sparkles className="text-primary h-6 w-6" />,
+    icon: <Mail className="h-6 w-6" />,
     title: 'No wallet? No problem',
     description:
       "Start with just an email. We'll create an embedded wallet for you and upgrade to self-custody when you're ready.",
+    highlight: 'Embedded Wallets',
   },
   {
-    icon: <DollarSign className="text-primary h-6 w-6" />,
-    title: 'Transparent revenue splits',
+    icon: <Globe className="h-6 w-6" />,
+    title: 'Your .eth domain',
     description:
-      'Set revenue percentages once. Every payment automatically splits between treasury and owners on-chain.',
+      'Professional ENS names that work as domains, wallets, and identities. Own your name forever.',
+    highlight: 'Onchain Identity',
   },
   {
-    icon: <Shield className="text-primary h-6 w-6" />,
+    icon: <ShieldCheck className="h-6 w-6" />,
     title: 'Multi-sig security',
     description:
       'Enterprise-grade protection with Safe multisig wallets. Multiple signatures required for critical decisions.',
+    highlight: 'Treasury Safe',
   },
   {
-    icon: <Users className="text-primary h-6 w-6" />,
-    title: 'Your .eth domain',
+    icon: <Zap className="h-6 w-6" />,
+    title: 'Gasless transactions',
     description:
-      'Professional ENS names that work as domains, wallets, and identities. Own your name forever.',
+      "No need to buy crypto to get started. We cover gas fees for email users until you're ready to self-custody.",
+    highlight: 'Sponsored Gas',
   },
   {
-    icon: <CheckCircle className="text-primary h-6 w-6" />,
-    title: 'Gasless transactions',
+    icon: <PieChart className="h-6 w-6" />,
+    title: 'Transparent revenue splits',
     description:
-      "No need to buy crypto to get started. We cover gas fees for email users until you're ready to self-custody.",
+      'Set revenue percentages once. Every payment automatically splits between treasury and owners on-chain.',
+    highlight: 'Smart Splits',
   },
   {
-    icon: <Sparkles className="text-primary h-6 w-6" />,
+    icon: <Rocket className="h-6 w-6" />,
     title: 'Built for scale',
     description:
       'From MVP to IPO, our infrastructure grows with you. Add team members, adjust splits, upgrade security.',
+    highlight: 'Growth Ready',
   },
 ]
 
 export function FeaturesSection() {
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start 20%', 'end 80%'],
+  })
+
+  const height = useTransform(scrollYProgress, [0, 1], ['0%', '100%'])
+
   return (
-    <section id="features" className="bg-card/30 relative py-24">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="mb-16 text-center">
-          <h2 className="text-foreground mb-6 text-3xl font-bold md:text-5xl">
-            Everything you need to
-            <span className="text-primary"> build unstoppable</span>
-          </h2>
-          <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
-            From idea to IPO, all the infrastructure you need for a transparent,
-            decentralized business
-          </p>
+    <section
+      id="features"
+      ref={containerRef}
+      className="bg-background relative overflow-hidden py-24 md:py-32"
+    >
+      {/* Dynamic Background */}
+      <div className="pointer-events-none absolute inset-0 -z-10 overflow-hidden">
+        <div className="absolute top-0 left-0 -translate-x-1/2 translate-y-[-20%] opacity-20 blur-[100px]">
+          <div className="bg-primary h-[600px] w-[600px] rounded-full mix-blend-screen" />
+        </div>
+        <div className="absolute right-0 bottom-0 translate-x-1/2 translate-y-[20%] opacity-20 blur-[100px]">
+          <div className="bg-accent h-[600px] w-[600px] rounded-full mix-blend-screen" />
         </div>
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] bg-[size:4rem_4rem] opacity-[0.05]" />
+      </div>
 
-        <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
-          {features.map((feature, index) => (
-            <div key={index} className="group relative">
-              <div className="from-primary/20 to-accent/20 absolute inset-0 rounded-2xl bg-gradient-to-r opacity-25 blur transition-opacity group-hover:opacity-40"></div>
-              <div className="bg-card border-border hover:border-primary/50 relative rounded-2xl border p-8 transition-all duration-300">
-                <div className="bg-primary/10 mb-6 flex h-12 w-12 items-center justify-center rounded-2xl">
-                  {feature.icon}
-                </div>
-                <h3 className="text-foreground mb-4 text-xl font-semibold">
-                  {feature.title}
-                </h3>
-                <p className="text-muted-foreground leading-relaxed">
-                  {feature.description}
-                </p>
-              </div>
-            </div>
-          ))}
+      <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-24 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+            <h2 className="text-foreground mb-6 text-4xl leading-tight font-bold tracking-tighter md:text-5xl lg:text-6xl">
+              The complete{' '}
+              <span className="animate-gradient-x bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
+                onchain OS
+              </span>
+            </h2>
+            <p className="text-muted-foreground mx-auto max-w-2xl text-xl">
+              A unified platform for your company&apos;s entire lifecycle. From
+              day one to IPO.
+            </p>
+          </motion.div>
+        </div>
+
+        <div className="relative mx-auto max-w-5xl">
+          {/* Vertical Timeline Line (Desktop Center / Mobile Left) */}
+          <div className="bg-border/40 absolute top-0 bottom-0 left-8 w-[2px] md:left-1/2 md:-ml-px" />
+
+          <motion.div
+            style={{ height }}
+            className="from-primary via-accent to-primary absolute top-0 left-8 w-[2px] origin-top bg-gradient-to-b md:left-1/2 md:-ml-px"
+          />
+
+          <div className="space-y-12 md:space-y-24">
+            {features.map((feature, index) => (
+              <FeatureNode key={index} feature={feature} index={index} />
+            ))}
+          </div>
         </div>
       </div>
     </section>
   )
 }
+
+function FeatureNode({ feature, index }: { feature: Feature; index: number }) {
+  const isEven = index % 2 === 0
+
+  return (
+    <div
+      className={cn(
+        'relative flex items-center md:justify-between',
+        isEven ? 'md:flex-row' : 'md:flex-row-reverse'
+      )}
+    >
+      {/* Node Point */}
+      <div className="border-background bg-foreground shadow-primary/20 absolute left-8 z-20 -ml-[11px] flex h-[22px] w-[22px] items-center justify-center rounded-full border-[3px] shadow-lg md:left-1/2 md:-ml-[11px]">
+        <div className="bg-background h-2 w-2 rounded-full" />
+      </div>
+
+      {/* Content Card */}
+      <motion.div
+        initial={{ opacity: 0, x: isEven ? -30 : 30 }}
+        whileInView={{ opacity: 1, x: 0 }}
+        viewport={{ once: true, margin: '-10% 0px -10% 0px' }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+        className={cn('ml-20 md:ml-0 md:w-[45%]', 'group relative')}
+      >
+        {/* Connector Line (Horizontal) */}
+        <div
+          className={cn(
+            'bg-border/50 absolute top-1/2 hidden h-px w-8 md:block',
+            isEven ? '-right-8' : '-left-8'
+          )}
+        />
+        {/* Mobile Connector */}
+        <div className="bg-border/50 absolute top-8 -left-12 h-px w-12 md:hidden" />
+
+        <div className="group/card border-border/50 bg-card/30 hover:border-primary/30 relative overflow-hidden rounded-2xl border p-6 backdrop-blur-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-xl md:p-8">
+          {/* Hover Glow */}
+          <div className="from-primary/10 to-accent/10 absolute -inset-px -z-10 bg-gradient-to-r opacity-0 blur-xl transition-opacity duration-500 group-hover/card:opacity-100" />
+
+          {/* Icon Box */}
+          <div className="from-primary/10 to-accent/10 border-primary/20 text-primary mb-5 inline-flex h-12 w-12 items-center justify-center rounded-xl border bg-gradient-to-br shadow-sm transition-transform duration-300 group-hover/card:scale-110 group-hover/card:rotate-3">
+            {feature.icon}
+          </div>
+
+          <div className="space-y-3">
+            <div className="flex items-center gap-3">
+              <span className="text-primary/80 text-xs font-bold tracking-wider uppercase">
+                Step 0{index + 1}
+              </span>
+              <div className="bg-border/50 h-px flex-1" />
+            </div>
+
+            <h3 className="text-foreground text-xl font-bold tracking-tight md:text-2xl">
+              {feature.title}
+            </h3>
+
+            <p className="text-muted-foreground text-base leading-relaxed md:text-lg">
+              {feature.description}
+            </p>
+          </div>
+
+          {/* Interactive Arrow */}
+          <div className="text-primary mt-5 flex -translate-x-2 items-center text-sm font-medium opacity-0 transition-all duration-300 group-hover/card:translate-x-0 group-hover/card:opacity-100">
+            <span className="mr-2">{feature.highlight}</span>
+            <ArrowRight className="h-4 w-4" />
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Spacer for the other side (desktop only) */}
+      <div className="hidden md:block md:w-[45%]" />
+    </div>
+  )
+}
diff --git a/src/app/(public)/components/footer.tsx b/src/app/(public)/components/footer.tsx
index dee1dd9..fd46eed 100644
--- a/src/app/(public)/components/footer.tsx
+++ b/src/app/(public)/components/footer.tsx
@@ -1,38 +1,61 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
+import { ChainLogo } from '@/components/ui/chain-logo'
+
 export function Footer() {
   return (
-    <footer className="border-border bg-card/50 border-t py-12">
+    <footer className="border-border bg-card/50 border-t py-12 backdrop-blur-sm">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-        <div className="flex flex-col items-center justify-between md:flex-row">
-          <Link href="/" className="flex items-center space-x-2 py-5">
-            <Image
-              src="/logo.svg"
-              width={35}
-              height={35}
-              alt="StartUpChain Logo"
-            />
-            <span className="text-foreground text-3xl font-normal tracking-widest">
-              StartUpChain
-            </span>
-          </Link>
-          <div className="text-muted-foreground flex items-center space-x-6 text-sm">
-           {/*<a href="#" className="hover:text-foreground transition-colors">
+        <div className="flex flex-col items-center justify-between gap-8 md:flex-row">
+          <div className="flex flex-col items-center md:items-start">
+            <Link href="/" className="flex items-center space-x-2">
+              <ChainLogo width={40} height={40} className="text-primary" />
+              <span className="text-foreground text-2xl font-bold tracking-tight">
+                StartupChain
+              </span>
+            </Link>
+            <p className="text-muted-foreground mt-2 text-sm">
+              The onchain operating system for modern companies.
+            </p>
+          </div>
+
+          <div className="text-muted-foreground flex flex-wrap items-center justify-center gap-6 text-sm md:justify-end">
+            <Link
+              href="#privacy"
+              className="hover:text-primary transition-colors"
+            >
               Privacy
-            </a>
-            <a href="#" className="hover:text-foreground transition-colors">
+            </Link>
+            <Link
+              href="#terms"
+              className="hover:text-primary transition-colors"
+            >
               Terms
-            </a>
-            <a href="#" className="hover:text-foreground transition-colors">
+            </Link>
+            <a
+              href="https://twitter.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-primary transition-colors"
+            >
               Twitter
-            </a>*/}
-            <a href="#" className="hover:text-foreground transition-colors">
+            </a>
+            <a
+              href="https://discord.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-primary transition-colors"
+            >
               Discord
             </a>
- 
           </div>
         </div>
+
+        <div className="border-border/50 text-muted-foreground mt-8 border-t pt-8 text-center text-sm md:text-left">
+          <p>
+            &copy; {new Date().getFullYear()} StartupChain. All rights reserved.
+          </p>
+        </div>
       </div>
     </footer>
   )
diff --git a/src/app/(public)/components/hero-section.tsx b/src/app/(public)/components/hero-section.tsx
index 72d1a4b..d40b50a 100644
--- a/src/app/(public)/components/hero-section.tsx
+++ b/src/app/(public)/components/hero-section.tsx
@@ -1,27 +1,87 @@
+import { Shield, Wallet } from 'lucide-react'
+import Image from 'next/image'
+
+import AnimatedRocket from '@/app/(public)/components/AnimatedRocket/AnimatedRocket'
+
 import { EnsNameChecker } from '../../../components/ens-name-checker'
 
 export function HeroSection() {
   return (
-    <section className="relative flex min-h-[calc(100vh-4rem)] items-end overflow-hidden lg:items-center">
-      <div className="relative mx-auto w-full max-w-7xl px-4 py-12 pb-32 sm:px-6 sm:pb-36 md:pb-15 lg:px-8 lg:py-20">
-        <div className="text-center lg:max-w-3xl lg:text-left">
+    <section
+      id="start"
+      className="relative flex min-h-[calc(100vh-4rem)] items-center justify-center overflow-hidden pt-14 pb-16 md:pt-20 md:pb-32"
+    >
+      {/* Background Effects */}
+      <div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] bg-[size:24px_24px] opacity-20" />
+      <div className="bg-primary/20 absolute top-0 right-0 left-0 h-[500px] w-full rounded-full opacity-20 blur-[100px]" />
+
+      <div className="relative mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col items-center text-center lg:items-start lg:text-left">
           {/* Main Headline */}
-          <h1 className="text-foreground mb-6 text-4xl font-semibold tracking-tight md:text-6xl lg:text-7xl">
+          <h1 className="text-foreground mx-auto max-w-4xl text-5xl font-bold tracking-tight md:text-7xl lg:mx-0 lg:text-8xl">
             Build your business
             <br />
-            <span className="from-primary via-secondary to-primary animate-gradient-x bg-gradient-to-r bg-clip-text text-transparent">
+            <span className="from-primary via-accent to-secondary animate-gradient-x bg-gradient-to-r bg-clip-text pb-2 text-transparent">
               onchain
             </span>
           </h1>
 
-          <EnsNameChecker />
+          {/* Subheadline */}
+          <p className="text-muted-foreground mt-4 max-w-2xl text-lg leading-relaxed md:mt-6 md:text-xl">
+            The all-in-one operating system for your company. Secure your
+            identity, manage treasury, and issue tokens in minutes.
+          </p>
+
+          <AnimatedRocket
+            animated={true}
+            speedLines={true}
+            scrollEffect={true}
+            className="pointer-events-none relative z-0 mt-10 size-80 sm:mt-12 sm:size-96 lg:fixed lg:top-1/2 lg:-right-[5%] lg:left-auto lg:mt-0 lg:size-160 lg:translate-x-15 lg:-translate-y-1/2 xl:size-200"
+          />
+
+          <div className="mt-8 w-full max-w-xl md:mt-12">
+            <EnsNameChecker />
+          </div>
+
+          <div className="mt-12 flex flex-col gap-8 lg:mt-24">
+            {/* Built at ETHGlobal */}
+            <div className="flex flex-col items-center gap-4 lg:items-start">
+              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
+                Built at
+              </p>
+              <div className="relative h-14 w-48 opacity-80 transition-opacity hover:opacity-100">
+                <Image
+                  src="/eth-global.png"
+                  alt="ETHGlobal"
+                  fill
+                  className="object-contain object-center invert lg:object-left"
+                />
+              </div>
+            </div>
 
-          {/* Social Proof */}
-          <div className="flex flex-wrap items-center justify-center gap-8 opacity-60 lg:justify-start">
-            <div className="text-muted-foreground text-sm">Powered by</div>
-            <div className="flex items-center gap-6">
-              <div className="text-lg font-semibold">ENS</div>
-              <div className="text-lg font-semibold">Privy</div>
+            {/* Partners */}
+            <div className="flex flex-col items-center gap-4 lg:items-start">
+              <p className="text-muted-foreground text-xs font-medium tracking-widest uppercase">
+                Powered by industry leaders
+              </p>
+              <div className="flex flex-wrap items-center justify-center gap-12 lg:justify-start">
+                <div className="relative h-6 w-20 opacity-80 transition-opacity hover:opacity-100 sm:h-7 sm:w-24">
+                  <Image
+                    src="/ens-logo.png"
+                    alt="ENS"
+                    fill
+                    className="object-contain brightness-0 invert lg:object-left"
+                  />
+                </div>
+                <div className="flex items-center gap-2 opacity-80 transition-opacity hover:opacity-100">
+                  <Wallet className="h-6 w-6" />
+                  <span className="text-xl font-semibold">Privy</span>
+                </div>
+                <div className="flex items-center gap-2 opacity-80 transition-opacity hover:opacity-100">
+                  <Shield className="h-6 w-6" />
+                  <span className="text-xl font-semibold">Safe</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/app/(public)/components/navbar.tsx b/src/app/(public)/components/navbar.tsx
index e6613ac..d08f4e8 100644
--- a/src/app/(public)/components/navbar.tsx
+++ b/src/app/(public)/components/navbar.tsx
@@ -1,38 +1,107 @@
 'use client'
 
+import { Menu } from 'lucide-react'
 import Link from 'next/link'
 
 import { useProvidersReady } from '@/components/providers/providers-shell'
 import { Button } from '@/components/ui/button'
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/components/ui/sheet'
 import { useWalletAuth } from '@/hooks/use-wallet-auth'
 
 import { ChainLogo } from '../../../components/ui/chain-logo'
 import { LoadingSpinner } from '../../../components/ui/loading-spinner'
 
+const navLinks = [
+  { label: 'Features', href: '#features' },
+  { label: 'Get started', href: '#start' },
+]
+
 export function Navbar() {
   const { ready: providersReady } = useProvidersReady()
 
   return (
-    <nav className="sticky top-0 z-50 h-16 w-full py-4 backdrop-blur-sm">
-      <div className="mx-auto h-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-        <div className="flex h-full items-center justify-between">
+    <nav className="border-border/60 bg-background/75 sticky top-0 z-50 border-b backdrop-blur-xl">
+      <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+        <div className="flex items-center gap-8">
           <Link
             href="/"
-            className="hover:text-primary group flex items-center space-x-2 py-5 text-white"
+            className="group text-foreground hover:text-primary flex items-center space-x-2 transition-colors"
           >
             <ChainLogo className="text-foreground transition-all duration-200" />
-            <span className="text-foreground group-hover:text-primary text-3xl font-normal tracking-widest">
+            <span className="group-hover:text-primary text-2xl font-normal tracking-widest">
               StartUpChain
             </span>
           </Link>
+          <div className="hidden items-center gap-6 md:flex">
+            {navLinks.map((link) => (
+              <Link
+                key={link.label}
+                href={link.href}
+                className="text-muted-foreground hover:text-foreground text-sm font-medium transition-colors"
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        </div>
 
+        <div className="flex items-center gap-3">
           <NavbarActions providersReady={providersReady} />
+          <MobileMenu />
         </div>
       </div>
     </nav>
   )
 }
 
+function MobileMenu() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="md:hidden"
+          aria-label="Open menu"
+        >
+          <Menu className="size-4" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="border-border/70 bg-background/95">
+        <SheetHeader className="border-border/60 border-b pb-4">
+          <SheetTitle className="flex items-center gap-2 text-lg">
+            <ChainLogo className="text-foreground" />
+            <span className="text-foreground text-lg font-semibold tracking-wide">
+              StartUpChain
+            </span>
+          </SheetTitle>
+        </SheetHeader>
+        <div className="mt-6 flex flex-col gap-3">
+          {navLinks.map((link) => (
+            <Link
+              key={link.label}
+              href={link.href}
+              className="hover:border-primary/60 border-border/60 bg-card/40 text-foreground flex items-center justify-between rounded-xl border px-4 py-3 text-sm font-medium transition"
+            >
+              {link.label}
+            </Link>
+          ))}
+        </div>
+        <div className="border-border/70 bg-card/40 text-muted-foreground mt-8 rounded-xl border p-4 text-sm">
+          Launch your onchain company in minutes with ENS, Safe, and automated
+          registration.
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
 function NavbarActions({ providersReady }: { providersReady: boolean }) {
   if (!providersReady) {
     return <NavbarLoadingState />
diff --git a/src/app/(public)/page.tsx b/src/app/(public)/page.tsx
index 81dae07..61a686e 100644
--- a/src/app/(public)/page.tsx
+++ b/src/app/(public)/page.tsx
@@ -1,11 +1,10 @@
-import AnimatedRocket from '@/app/(public)/components/AnimatedRocket/AnimatedRocket'
+import { Suspense } from 'react'
+
+import { AutoAuthRedirect } from '@/app/(public)/components/auto-auth-redirect'
 import { FeaturesSection } from '@/app/(public)/components/features-section'
 import { Footer } from '@/app/(public)/components/footer'
 
-import { Suspense } from 'react'
-
 import { HeroSection } from './components/hero-section'
-import { AutoAuthRedirect } from '@/app/(public)/components/auto-auth-redirect'
 
 export default function Home() {
   return (
@@ -13,12 +12,6 @@ export default function Home() {
       <Suspense>
         <AutoAuthRedirect />
       </Suspense>
-      <AnimatedRocket
-        animated={true}
-        speedLines={true}
-        scrollEffect={true}
-        className="scroll-effect pointer-events-none fixed top-7 left-1/2 z-0 size-80 -translate-x-1/2 sm:size-150 lg:top-1/2 lg:right-0 lg:left-auto lg:size-160 lg:translate-x-15 lg:-translate-y-1/2 xl:size-200"
-      />
       <HeroSection />
       <FeaturesSection />
       <Footer />
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e950f3a..caae5b3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,8 +5,8 @@ import { Fredoka } from 'next/font/google'
 import { cookies, headers } from 'next/headers'
 
 import { AIChatTrigger } from '@/components/ai-chat/ai-chat-trigger'
-import { CookieConsent } from '@/components/ui/cookie-consent'
 import { ProvidersShell } from '@/components/providers/providers-shell'
+import { CookieConsent } from '@/components/ui/cookie-consent'
 import { getServerSession } from '@/lib/auth/server-session'
 import '@/style.css'
 
@@ -65,7 +65,11 @@ export default async function RootLayout({
   })
 
   return (
-    <html lang="en" className={`${fredoka.variable} dark`}>
+    <html
+      lang="en"
+      className={`${fredoka.variable} dark`}
+      suppressHydrationWarning
+    >
       <head />
       <body className="antialiased">
         <ProvidersShell initialSession={session || undefined}>
diff --git a/src/components/ai-chat/ai-chat-trigger.tsx b/src/components/ai-chat/ai-chat-trigger.tsx
index ec82024..f22f341 100644
--- a/src/components/ai-chat/ai-chat-trigger.tsx
+++ b/src/components/ai-chat/ai-chat-trigger.tsx
@@ -58,8 +58,9 @@ export function AIChatTrigger() {
         <button
           onClick={toggleChat}
           className={cn(
-            'fixed right-4 bottom-4 z-50 flex cursor-pointer items-center gap-2 rounded-full bg-[#917772] px-5 py-2 text-sm font-semibold text-slate-900 shadow-[0_18px_40px_-18px_rgba(97,199,255,0.65)] transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#61c7ff]/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 sm:right-6 sm:bottom-6 dark:bg-gray-700 dark:text-white dark:hover:bg-[#74d0ff]/40',
-            isOpen && 'pointer-events-none opacity-0'
+            'bg-primary text-primary-foreground focus-visible:ring-ring fixed right-4 bottom-4 z-50 flex cursor-pointer items-center gap-2 rounded-full px-5 py-3 text-sm font-medium shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 sm:right-6 sm:bottom-6',
+            !isOpen && 'animate-pulse-slow',
+            isOpen && 'pointer-events-none translate-y-4 opacity-0'
           )}
           aria-label="Open chat"
         >
@@ -70,7 +71,7 @@ export function AIChatTrigger() {
 
       <SheetContent
         side="right"
-        className="flex h-auto max-h-[82vh] w-full translate-y-0 flex-col gap-0 border-l-0 p-0 sm:max-w-md sm:bottom-6 sm:right-6 sm:top-auto sm:rounded-xl"
+        className="flex h-[82vh] w-full translate-y-0 flex-col gap-0 border-l-0 p-0 sm:top-auto sm:right-6 sm:bottom-6 sm:max-w-md sm:rounded-xl"
       >
         <SheetTitle className="sr-only">AI Chat Assistant</SheetTitle>
         <AIChatWidget
diff --git a/src/components/ai-chat/ai-chat-widget.tsx b/src/components/ai-chat/ai-chat-widget.tsx
index adb5064..d10c06a 100644
--- a/src/components/ai-chat/ai-chat-widget.tsx
+++ b/src/components/ai-chat/ai-chat-widget.tsx
@@ -2,7 +2,7 @@
 
 import { UIMessage } from '@ai-sdk/react'
 import type { ChatStatus } from 'ai'
-import { Send } from 'lucide-react'
+import { Bot, Send, Sparkles, StopCircle } from 'lucide-react'
 import type { Dispatch, SetStateAction } from 'react'
 import { useEffect, useMemo, useRef } from 'react'
 
@@ -62,78 +62,147 @@ export function AIChatWidget({
 
   const placeholder = useMemo(() => {
     if (isBusy) return 'StartupChain Assistant is responding...'
-    return 'Ask about company setup, Safe treasury, ENS registration, or your dashboard.'
+    return 'Ask about company setup, Safe treasury, ENS...'
   }, [isBusy])
 
+  const suggestions = [
+    'How do I register a company?',
+    'Explain Safe treasury',
+    'What is an ENS name?',
+    'Check my dashboard',
+  ]
+
+  const handleSuggestionClick = (suggestion: string) => {
+    onInputChange(suggestion)
+    // Optional: auto-send or just focus input
+    // onSend() would require updating the state first which might be async
+  }
+
   return (
     <div
       ref={containerRef}
       tabIndex={-1}
-      className="border-border bg-background text-foreground flex h-full flex-col overflow-hidden rounded-xl border shadow-lg focus:outline-none"
+      className="bg-background/95 border-border text-foreground flex h-full flex-col overflow-hidden rounded-xl border shadow-2xl backdrop-blur-xl focus:outline-none"
     >
-      <header className="border-border bg-muted/50 flex items-center justify-between border-b px-4 py-3">
-        <div className="space-y-0.5">
-          <p className="text-sm font-semibold">StartupChain Assistant</p>
-          <p className="text-muted-foreground text-xs">
-            Your guide to company setup & management
-          </p>
+      {/* Header */}
+      <header className="from-primary/10 via-background to-accent/10 border-border flex items-center justify-between border-b bg-gradient-to-r px-6 py-4 backdrop-blur-md">
+        <div className="flex items-center gap-3">
+          <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded-xl shadow-inner">
+            <Bot size={20} />
+          </div>
+          <div className="space-y-0.5">
+            <p className="flex items-center gap-2 text-sm font-semibold">
+              StartupChain AI
+              <Sparkles size={12} className="text-accent animate-pulse-slow" />
+            </p>
+            <p className="text-muted-foreground text-[11px] font-medium tracking-wide uppercase">
+              Assistant
+            </p>
+          </div>
         </div>
       </header>
 
-      <div className="bg-muted/40 text-foreground/90 min-h-76 flex-1 space-y-3 overflow-y-auto p-4 text-sm">
-        {messages.length === 0 && (
-          <div className="border-border bg-card text-muted-foreground rounded-lg border p-3 text-xs leading-relaxed shadow-sm">
-            <p className="text-foreground font-medium">
-              Welcome to StartupChain!
-            </p>
-            <p>Ask about company registration, Safe treasury, ENS names, founder setup, or your dashboard.</p>
-          </div>
-        )}
+      {/* Messages Area */}
+      <div className="bg-muted/30 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent min-h-0 flex-1 overflow-y-auto p-4 sm:p-6">
+        <div className="flex flex-col space-y-6">
+          {messages.length === 0 && (
+            <div className="animate-in fade-in slide-in-from-bottom-4 space-y-6 py-8 duration-500">
+              <div className="bg-card/50 border-border mx-auto max-w-[90%] rounded-2xl border p-6 text-center shadow-sm backdrop-blur-sm">
+                <div className="bg-accent/10 text-accent mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+                  <Sparkles size={24} />
+                </div>
+                <h3 className="text-foreground mb-2 font-semibold">
+                  Welcome to StartupChain
+                </h3>
+                <p className="text-muted-foreground text-sm leading-relaxed">
+                  I can help you navigate company formation, manage your
+                  treasury, or understand your dashboard.
+                </p>
+              </div>
 
-        {messages.map((message) => {
-          const text = message.parts
-            .map((part) => (part.type === 'text' ? part.text : ''))
-            .join('')
-            .trim()
-          if (!text) return null
-
-          const isUser = message.role === 'user'
-
-          return (
-            <div
-              key={message.id}
-              className={cn(
-                'flex w-full',
-                isUser ? 'justify-end' : 'justify-start'
-              )}
-            >
+              <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+                {suggestions.map((suggestion, i) => (
+                  <button
+                    key={i}
+                    onClick={() => handleSuggestionClick(suggestion)}
+                    className="bg-background/50 hover:bg-background hover:text-primary hover:border-primary/30 text-muted-foreground border-border flex items-center justify-start rounded-lg border px-4 py-3 text-left text-xs transition-all duration-200 hover:shadow-md"
+                  >
+                    {suggestion}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {messages.map((message) => {
+            const text = message.parts
+              .map((part) => (part.type === 'text' ? part.text : ''))
+              .join('')
+              .trim()
+            if (!text) return null
+
+            const isUser = message.role === 'user'
+
+            return (
               <div
+                key={message.id}
                 className={cn(
-                  'max-w-[82%] rounded-2xl px-4 py-2.5 shadow-sm transition-colors',
-                  isUser
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-secondary text-secondary-foreground'
+                  'animate-in fade-in slide-in-from-bottom-2 flex w-full duration-300',
+                  isUser ? 'justify-end' : 'justify-start'
                 )}
               >
-                <p className="leading-relaxed whitespace-pre-line">{text}</p>
+                <div
+                  className={cn(
+                    'flex max-w-[85%] flex-col gap-1',
+                    isUser ? 'items-end' : 'items-start'
+                  )}
+                >
+                  <div className="flex items-center gap-2 px-1">
+                    <span className="text-muted-foreground text-[10px] font-medium uppercase">
+                      {isUser ? 'You' : 'AI Assistant'}
+                    </span>
+                  </div>
+                  <div
+                    className={cn(
+                      'relative rounded-2xl px-5 py-3.5 text-sm shadow-sm',
+                      isUser
+                        ? 'bg-primary text-primary-foreground rounded-tr-sm'
+                        : 'bg-card/80 text-foreground border-border rounded-tl-sm border backdrop-blur-sm'
+                    )}
+                  >
+                    <p className="leading-relaxed whitespace-pre-line">
+                      {text}
+                    </p>
+                  </div>
+                </div>
               </div>
-            </div>
-          )
-        })}
+            )
+          })}
 
-        {isBusy ? (
-          <div className="flex justify-start">
-            <div className="border-border bg-secondary text-secondary-foreground rounded-lg border px-3 py-2 text-xs shadow-sm">
-              Thinking…
+          {isBusy && (
+            <div className="animate-in fade-in flex w-full justify-start duration-300">
+              <div className="flex max-w-[85%] flex-col items-start gap-1">
+                <div className="flex items-center gap-2 px-1">
+                  <span className="text-muted-foreground text-[10px] font-medium uppercase">
+                    AI Assistant
+                  </span>
+                </div>
+                <div className="bg-card/80 border-border flex items-center gap-1.5 rounded-2xl rounded-tl-sm border px-5 py-4 shadow-sm backdrop-blur-sm">
+                  <span className="bg-primary h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]"></span>
+                  <span className="bg-primary h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]"></span>
+                  <span className="bg-primary h-2 w-2 animate-bounce rounded-full"></span>
+                </div>
+              </div>
             </div>
-          </div>
-        ) : null}
+          )}
 
-        <div ref={scrollAnchorRef} />
+          <div ref={scrollAnchorRef} />
+        </div>
       </div>
 
-      <div className="border-border bg-background/90 border-t p-4">
-        <div className="flex items-start gap-2.5">
+      {/* Input Area */}
+      <div className="bg-background/80 border-border border-t p-4 backdrop-blur-md">
+        <div className="bg-muted/30 ring-border focus-within:bg-background focus-within:ring-primary/30 relative flex items-end gap-2 rounded-xl p-2 ring-1 transition-all focus-within:shadow-lg focus-within:ring-2">
           <textarea
             value={inputValue}
             onChange={(event) => onInputChange(event.target.value)}
@@ -144,39 +213,54 @@ export function AIChatWidget({
               }
             }}
             placeholder={placeholder}
-            className="border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-primary/50 h-20 w-full resize-none rounded-lg border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
+            className="text-foreground placeholder:text-muted-foreground min-h-[44px] w-full resize-none bg-transparent px-3 py-2.5 text-sm focus:outline-none"
+            rows={1}
+            style={{
+              minHeight: '44px',
+              maxHeight: '120px',
+              height:
+                Math.min(
+                  120,
+                  Math.max(44, inputValue.split('\n').length * 20 + 24)
+                ) + 'px',
+            }}
           />
           <button
             onClick={onSend}
             disabled={!inputValue.trim() || isBusy}
             className={cn(
-              'bg-primary text-primary-foreground focus-visible:ring-primary flex h-11 w-11 items-center justify-center rounded-lg shadow-sm transition hover:brightness-105 focus:outline-none focus-visible:ring-2',
-              (!inputValue.trim() || isBusy) && 'opacity-50'
+              'bg-primary text-primary-foreground focus-visible:ring-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg shadow-sm transition-all duration-200 hover:scale-105 hover:shadow-md focus:outline-none focus-visible:ring-2',
+              (!inputValue.trim() || isBusy) && 'cursor-not-allowed opacity-50'
             )}
             aria-label="Send message"
           >
-            <Send size={16} />
+            <Send size={16} className={cn(isBusy && 'absolute opacity-0')} />
+            {isBusy && (
+              <span className="absolute h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+            )}
           </button>
         </div>
-        {isBusy ? (
-          <div className="text-muted-foreground mt-3 flex items-center justify-between text-xs">
-            <span>Generating a reply…</span>
+
+        <div className="mt-2 flex items-center justify-between px-1">
+          <p className="text-muted-foreground text-[10px]">
+            {inputValue.length}/1000
+          </p>
+          {isBusy && (
             <button
-              type="button"
-              onClick={() => {
-                void stop()
-              }}
-              className="text-primary hover:text-primary/80 font-medium transition focus:outline-none"
+              onClick={() => void stop()}
+              className="text-destructive hover:text-destructive/80 flex items-center gap-1 text-[10px] font-medium uppercase transition-colors"
             >
-              Stop
+              <StopCircle size={10} />
+              Stop Generating
             </button>
-          </div>
-        ) : null}
-        {error ? (
-          <p className="text-destructive mt-2 text-xs">
+          )}
+        </div>
+
+        {error && (
+          <div className="bg-destructive/10 text-destructive mt-3 rounded-lg px-3 py-2 text-xs">
             {error.message ?? 'Something went wrong. Please try again.'}
-          </p>
-        ) : null}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/ens-name-checker/EnsInput.tsx b/src/components/ens-name-checker/EnsInput.tsx
index 6a6026b..2715cca 100644
--- a/src/components/ens-name-checker/EnsInput.tsx
+++ b/src/components/ens-name-checker/EnsInput.tsx
@@ -1,4 +1,7 @@
-import { useState } from 'react'
+import { type ChangeEvent, useState } from 'react'
+
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
 
 interface EnsInputProps {
   ensName: string
@@ -9,41 +12,34 @@ export function EnsInput({ ensName, setEnsName }: EnsInputProps) {
   const [isFocused, setIsFocused] = useState(false)
 
   return (
-    <>
-      {/* Title that disappears on focus */}
+    <div className="group relative w-full">
       <div
-        className={`absolute top-4 right-6 left-6 transition-all duration-300 ${
-          isFocused ? '-translate-y-2 opacity-0' : 'translate-y-0 opacity-100'
-        }`}
-      >
-        <h3 className="text-foreground text-center text-xl font-medium">
-          Enter your business name
-        </h3>
-      </div>
+        className={cn(
+          'from-primary via-accent to-secondary absolute -inset-0.5 rounded-2xl bg-gradient-to-r opacity-30 blur transition duration-500 group-hover:opacity-60',
+          isFocused && 'opacity-100 blur-md duration-200'
+        )}
+      />
 
-      {/* Input field that moves up when focused */}
-      <div
-        className={`relative transition-all duration-300 ${
-          isFocused ? 'translate-y-0' : 'translate-y-12'
-        }`}
-      >
-        <input
+      <div className="relative">
+        <Input
           type="text"
-          placeholder="Your company name"
+          placeholder="search-your-name"
           value={ensName}
-          onChange={(e) =>
+          onChange={(event: ChangeEvent<HTMLInputElement>) =>
             setEnsName(
-              e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
+              event.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '')
             )
           }
           onFocus={() => setIsFocused(true)}
-          onBlur={() => !ensName && setIsFocused(false)}
-          className="text-primary border-border focus:ring-primary focus:border-primary placeholder:text-muted-foreground w-full rounded-2xl border bg-white px-6 py-4 pr-16 text-lg transition-all duration-200 focus:ring-2"
+          onBlur={() => setIsFocused(false)}
+          className="border-border/50 bg-background/80 placeholder:text-muted-foreground/80 h-16 w-full rounded-xl px-6 pr-20 text-xl shadow-xl backdrop-blur-xl transition-all focus-visible:border-transparent focus-visible:ring-0 md:text-2xl"
         />
-        <div className="text-muted-foreground absolute top-1/2 right-4 -translate-y-1/2 font-medium">
-          .eth
+        <div className="pointer-events-none absolute inset-y-0 right-6 flex items-center">
+          <span className="text-muted-foreground text-xl font-medium md:text-2xl">
+            .eth
+          </span>
         </div>
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/components/ens-name-checker/EnsNameChecker.tsx b/src/components/ens-name-checker/EnsNameChecker.tsx
index 37f6c7e..ae27996 100644
--- a/src/components/ens-name-checker/EnsNameChecker.tsx
+++ b/src/components/ens-name-checker/EnsNameChecker.tsx
@@ -56,7 +56,7 @@ function EnsLogic({ ensName }: { ensName: string }) {
 
   return (
     <EnsStatus
-      ensName={ensName}
+      ensName={debouncedEnsName}
       normalizedName={normalizedName}
       isLoading={isLoading}
       error={error}
@@ -75,7 +75,7 @@ export function EnsNameChecker() {
 
   return (
     <div className="mx-auto mb-13 max-w-2xl md:mb-15 lg:mx-0">
-      <div className="bg-card border-border/50 relative min-h-[200px] overflow-hidden rounded-2xl border p-6 shadow-2xl backdrop-blur-sm">
+      <div className="bg-card border-border/50 relative min-h-[140px] overflow-hidden rounded-2xl border p-4 shadow-2xl backdrop-blur-sm md:min-h-[200px] md:p-6">
         <EnsInput ensName={ensName} setEnsName={setEnsName} />
         {ready ? (
           <EnsLogic ensName={ensName} />
diff --git a/src/components/ens-name-checker/EnsStatus.tsx b/src/components/ens-name-checker/EnsStatus.tsx
index 9121feb..7794506 100644
--- a/src/components/ens-name-checker/EnsStatus.tsx
+++ b/src/components/ens-name-checker/EnsStatus.tsx
@@ -1,4 +1,17 @@
-import { AlertCircle, ArrowRight, CheckCircle, Loader2 } from 'lucide-react'
+'use client'
+
+import {
+  AlertCircle,
+  ArrowRight,
+  Check,
+  ExternalLink,
+  Loader2,
+  Sparkles,
+  XCircle,
+} from 'lucide-react'
+import { AnimatePresence, Variants, motion } from 'motion/react'
+
+import { Button } from '@/components/ui/button'
 
 import { isValidEnsName } from '../../lib/ens'
 
@@ -25,95 +38,235 @@ export function EnsStatus({
   onProceed,
   isAuthenticating,
 }: EnsStatusProps) {
-  return (
-    <div className="mt-4 min-h-[120px]">
-      {normalizedName && isValidEnsName(ensName) && (
-        <div className="animate-in fade-in duration-300">
-          {isLoading ? (
-            <div className="text-muted-foreground flex items-center gap-3">
-              <Loader2 className="h-5 w-5 animate-spin" />
-              <span>Checking availability on ENS...</span>
+  // Animation variants
+  const containerVariants: Variants = {
+    hidden: { opacity: 0, y: 10, scale: 0.98 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 300,
+        damping: 25,
+      },
+    },
+    exit: {
+      opacity: 0,
+      y: -10,
+      scale: 0.98,
+      transition: { duration: 0.2 },
+    },
+  }
+
+  // Helper to format address
+  const formatAddress = (addr: string) => {
+    return `${addr.slice(0, 6)}...${addr.slice(-4)}`
+  }
+
+  // Invalid Name State
+  if (!ensName || !isValidEnsName(ensName)) {
+    if (ensName.length > 0) {
+      return (
+        <AnimatePresence mode="wait">
+          <motion.div
+            key="invalid"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="mt-4"
+          >
+            <div className="border-destructive/20 bg-destructive/5 relative overflow-hidden rounded-xl border p-4 backdrop-blur-md">
+              <div className="flex items-start gap-4">
+                <div className="bg-destructive/10 text-destructive rounded-full p-2">
+                  <XCircle className="h-5 w-5" />
+                </div>
+                <div>
+                  <h4 className="text-destructive font-semibold">
+                    Invalid name format
+                  </h4>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    Use only letters, numbers, and hyphens (3-63 chars)
+                  </p>
+                </div>
+              </div>
             </div>
-          ) : error ? (
-            <div className="bg-destructive/10 border-destructive/20 rounded-2xl border p-4">
-              <div className="text-destructive flex items-center gap-3">
-                <AlertCircle className="h-5 w-5" />
-                <span className="font-medium">Error checking availability</span>
+          </motion.div>
+        </AnimatePresence>
+      )
+    }
+    return <div className="min-h-[130px]" />
+  }
+
+  return (
+    <div className="mt-6 min-h-[130px] w-full">
+      <AnimatePresence mode="wait">
+        {isLoading ? (
+          <motion.div
+            key="loading"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="border-primary/10 bg-card/40 relative overflow-hidden rounded-xl border p-6 backdrop-blur-md"
+          >
+            <div className="flex flex-col items-center justify-center gap-4 py-2">
+              <div className="relative">
+                <div className="bg-primary/20 absolute inset-0 animate-ping rounded-full opacity-75"></div>
+                <div className="bg-primary/10 relative rounded-full p-3">
+                  <Loader2 className="text-primary h-6 w-6 animate-spin" />
+                </div>
+              </div>
+              <div className="text-center">
+                <h4 className="text-foreground font-medium">
+                  Checking availability...
+                </h4>
+                <p className="text-muted-foreground text-xs">
+                  Scanning Ethereum network
+                </p>
               </div>
-              <p className="text-muted-foreground mt-2 text-sm">
-                Failed to check name availability. Please try again.
-              </p>
             </div>
-          ) : isTaken ? (
-            <div className="bg-destructive/10 border-destructive/20 rounded-2xl border p-4">
-              <div className="text-destructive flex items-center gap-3">
+          </motion.div>
+        ) : error ? (
+          <motion.div
+            key="error"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="border-destructive/20 bg-destructive/5 relative overflow-hidden rounded-xl border p-4 backdrop-blur-md"
+          >
+            <div className="flex items-center gap-4">
+              <div className="bg-destructive/10 text-destructive rounded-full p-2">
                 <AlertCircle className="h-5 w-5" />
-                <span className="font-medium">This name is already taken</span>
               </div>
-              <div className="mt-3 space-y-2">
-                {resolvedAddress && (
-                  <p className="text-muted-foreground font-mono text-sm">
-                    Owned by: {resolvedAddress.slice(0, 6)}...
-                    {resolvedAddress.slice(-4)}
-                  </p>
-                )}
+              <div>
+                <h4 className="text-destructive font-semibold">
+                  Connection Error
+                </h4>
                 <p className="text-muted-foreground text-sm">
-                  Try adding your industry or location (e.g., {ensName}tech,{' '}
-                  {ensName}dao)
+                  Could not verify name availability.
                 </p>
               </div>
             </div>
-          ) : isAvailable ? (
-            <div className="bg-primary/10 border-primary/20 rounded-2xl border p-4">
-              <div className="flex items-center justify-between">
-                <div className="text-primary flex items-center gap-3">
-                  <CheckCircle className="h-5 w-5" />
-                  <div>
-                    <span className="font-medium">
-                      Great! {ensName}.eth is available
+          </motion.div>
+        ) : isTaken ? (
+          <motion.div
+            key="taken"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="border-secondary bg-card/60 relative overflow-hidden rounded-xl border p-5 backdrop-blur-md"
+          >
+            <div className="mb-4 flex items-start justify-between">
+              <div className="flex items-center gap-3">
+                <div className="bg-secondary/20 text-muted-foreground rounded-full p-2">
+                  <XCircle className="h-5 w-5" />
+                </div>
+                <div>
+                  <h4 className="text-foreground font-semibold">
+                    Already Registered
+                  </h4>
+                  {resolvedAddress && (
+                    <div className="text-muted-foreground mt-0.5 flex items-center gap-1.5 font-mono text-xs">
+                      <span>Owner: {formatAddress(resolvedAddress)}</span>
+                      <ExternalLink className="h-3 w-3 opacity-50" />
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-secondary/10 rounded-lg p-3">
+              <p className="text-muted-foreground mb-2 text-xs font-medium tracking-wider uppercase">
+                Alternatives Available
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {['hq', 'dao', 'app', 'eth'].map((suffix) => (
+                  <div
+                    key={suffix}
+                    className="group border-border/50 bg-background/50 hover:border-primary/30 hover:bg-primary/5 flex cursor-pointer items-center rounded-md border px-2.5 py-1.5 text-sm transition-colors"
+                  >
+                    <span className="text-foreground group-hover:text-primary font-medium">
+                      {ensName}
+                      {suffix}
                     </span>
-                    <p className="text-muted-foreground mt-1 text-sm">
-                      Claim it now before someone else does
-                    </p>
+                    <span className="text-muted-foreground/60">.eth</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </motion.div>
+        ) : isAvailable ? (
+          <motion.div
+            key="available"
+            variants={containerVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+            className="group border-primary/30 bg-background/60 hover:border-primary/50 hover:shadow-primary/10 relative overflow-hidden rounded-xl border p-1 backdrop-blur-xl transition-all duration-300 hover:shadow-lg"
+          >
+            {/* Gradient background effect */}
+            <div className="from-primary/20 via-accent/20 to-primary/20 absolute -inset-[1px] -z-10 bg-gradient-to-r opacity-30 blur-sm transition-opacity duration-500 group-hover:opacity-60" />
+
+            <div className="flex flex-col gap-5 p-5 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-start gap-4">
+                <div className="relative">
+                  <div className="absolute -inset-1 animate-pulse rounded-full bg-green-500/20 blur-sm"></div>
+                  <div className="relative rounded-full bg-gradient-to-br from-green-400/20 to-green-500/20 p-2 text-green-600 dark:text-green-400">
+                    <Check className="h-6 w-6" />
                   </div>
+                  <motion.div
+                    initial={{ scale: 0, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    transition={{ delay: 0.2, duration: 0.5 }}
+                    className="absolute -top-1 -right-1"
+                  >
+                    <Sparkles className="h-3 w-3 fill-yellow-500 text-yellow-500" />
+                  </motion.div>
                 </div>
-                <button
-                  onClick={onProceed}
-                  disabled={isAuthenticating}
-                  className="bg-primary text-primary-foreground hover:bg-primary/90 flex cursor-pointer items-center gap-2 rounded-2xl px-6 py-3 text-sm font-semibold transition-all duration-200 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
-                >
+
+                <div>
+                  <h4 className="text-foreground text-lg font-bold tracking-tight">
+                    Available!
+                  </h4>
+                  <p className="text-muted-foreground mt-1 text-sm">
+                    <span className="text-primary font-semibold">
+                      {ensName}.eth
+                    </span>{' '}
+                    is ready for you.
+                  </p>
+                </div>
+              </div>
+
+              <Button
+                onClick={onProceed}
+                disabled={isAuthenticating}
+                size="lg"
+                className="bg-primary text-primary-foreground shadow-primary/25 hover:shadow-primary/30 group/btn relative w-full overflow-hidden px-8 font-semibold shadow-lg transition-all hover:scale-105 hover:shadow-xl sm:w-auto"
+              >
+                <span className="relative z-10 flex items-center gap-2">
                   {isAuthenticating ? (
                     <>
                       <Loader2 className="h-4 w-4 animate-spin" />
-                      Authenticating...
+                      Creating...
                     </>
                   ) : (
                     <>
-                      Proceed to setup
-                      <ArrowRight className="h-4 w-4" />
+                      Register Now
+                      <ArrowRight className="h-4 w-4 transition-transform group-hover/btn:translate-x-1" />
                     </>
                   )}
-                </button>
-              </div>
-            </div>
-          ) : null}
-        </div>
-      )}
-
-      {ensName.length > 0 && !isValidEnsName(ensName) && (
-        <div className="animate-in fade-in duration-300">
-          <div className="bg-muted/10 border-muted/20 rounded-2xl border p-4">
-            <div className="text-muted-foreground flex items-center gap-3">
-              <AlertCircle className="h-5 w-5" />
-              <span className="font-medium">Invalid name format</span>
+                </span>
+                {/* Shine effect on button */}
+                <div className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent group-hover/btn:animate-[shimmer_1.5s_infinite]" />
+              </Button>
             </div>
-            <p className="text-muted-foreground mt-2 text-sm">
-              Name must be 3-63 characters, contain only letters, numbers, and
-              hyphens
-            </p>
-          </div>
-        </div>
-      )}
+          </motion.div>
+        ) : null}
+      </AnimatePresence>
     </div>
   )
 }
diff --git a/src/style.css b/src/style.css
index e1db8a4..97759e1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -199,51 +199,6 @@
   }
 }
 
-/* Custom animations for the landing page */
-@keyframes blob {
-  0% {
-    transform: translate(0px, 0px) scale(1);
-  }
-  33% {
-    transform: translate(30px, -50px) scale(1.1);
-  }
-  66% {
-    transform: translate(-20px, 20px) scale(0.9);
-  }
-  100% {
-    transform: translate(0px, 0px) scale(1);
-  }
-}
-
-@keyframes gradient-x {
-  0%,
-  100% {
-    background-size: 200% 200%;
-    background-position: left center;
-  }
-  50% {
-    background-size: 200% 200%;
-    background-position: right center;
-  }
-}
-
-.animate-blob {
-  animation: blob 7s infinite;
-}
-
-.animate-gradient-x {
-  animation: gradient-x 5s ease infinite;
-  background-size: 200% 200%;
-}
-
-.animation-delay-2000 {
-  animation-delay: 2s;
-}
-
-.animation-delay-4000 {
-  animation-delay: 4s;
-}
-
 @layer utilities {
   /* Gradient text animation */
   .animate-gradient-x {
@@ -319,9 +274,7 @@
   .glow-accent {
     box-shadow: 0 0 20px rgba(var(--accent), 0.3);
   }
-}
 
-@layer utilities {
   /* AnimatedRocket Component Animation Utilities */
 
   /* Animation classes that can be used directly in component className */
@@ -424,6 +377,13 @@
     }
   }
 
+  /* Shimmer effect */
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
   /* GPU-accelerated transforms for better performance */
   .gpu-accelerated {
     will-change: transform, opacity;