diff --git a/app/dashboard/storefront/page.tsx b/app/dashboard/storefront/page.tsx
index 3918316..35c1c38 100644
--- a/app/dashboard/storefront/page.tsx
+++ b/app/dashboard/storefront/page.tsx
@@ -159,13 +159,14 @@ export default function StorefrontPage() {
   return (
     <Layout>
       <div>
-        <div className="flex items-center justify-between border-b border-zinc-800 px-4 py-4">
+        <div className="flex items-center justify-between border-b border-zinc-800 h-14 px-4">
           <h1 className="text-xl font-medium">Storefront Settings</h1>
-          <div className="flex gap-3">
+          <div className="flex gap-2">
             <Button
               variant="outline"
               onClick={() => setBroadcastOpen(true)}
               className="gap-2"
+              size="sm"
             >
               <Send className="h-4 w-4" />
               Broadcast
@@ -174,6 +175,7 @@ export default function StorefrontPage() {
               onClick={saveStorefront} 
               disabled={saving}
               className="gap-2"
+              size="sm"
             >
               <Save className="h-4 w-4" />
               {saving ? "Saving..." : "Save Changes"}
@@ -181,58 +183,58 @@ export default function StorefrontPage() {
           </div>
         </div>
 
-        <div className="p-4">
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="p-3">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
             {/* Security Settings */}
-            <div className="space-y-4">
-              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-                <div className="flex items-center gap-3 mb-4">
-                  <Shield className="h-5 w-5 text-purple-400" />
-                  <h2 className="text-lg font-medium text-zinc-100">
+            <div className="space-y-3">
+              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+                <div className="flex items-center gap-2 mb-3">
+                  <Shield className="h-4 w-4 text-purple-400" />
+                  <h2 className="text-base font-medium text-zinc-100">
                     Security
                   </h2>
                 </div>
-                <div className="space-y-4">
+                <div className="space-y-3">
                   <div>
-                    <label className="text-sm font-medium mb-2 block text-zinc-400">PGP Public Key</label>
+                    <label className="text-xs font-medium mb-1 block text-zinc-400">PGP Public Key</label>
                     <Textarea
                       value={storefront.pgpKey}
                       onChange={(e) => setStorefront(prev => ({ ...prev, pgpKey: e.target.value }))}
                       placeholder="Enter your PGP public key"
-                      className="font-mono text-sm h-32 bg-[#1C1C1C] border-zinc-800"
+                      className="font-mono text-sm h-24 bg-[#1C1C1C] border-zinc-800 resize-none"
                     />
                   </div>
                   <div>
-                    <label className="text-sm font-medium mb-2 block text-zinc-400">Telegram Bot Token</label>
+                    <label className="text-xs font-medium mb-1 block text-zinc-400">Telegram Bot Token</label>
                     <Input
                       type="password"
                       value={storefront.telegramToken}
                       onChange={(e) => setStorefront(prev => ({ ...prev, telegramToken: e.target.value }))}
                       placeholder="Enter your Telegram bot token"
-                      className="bg-[#1C1C1C] border-zinc-800"
+                      className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm"
                     />
                   </div>
                 </div>
               </div>
 
               {/* Shipping Settings */}
-              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-                <div className="flex items-center gap-3 mb-4">
-                  <Globe className="h-5 w-5 text-blue-400" />
-                  <h2 className="text-lg font-medium text-zinc-100">
+              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+                <div className="flex items-center gap-2 mb-3">
+                  <Globe className="h-4 w-4 text-blue-400" />
+                  <h2 className="text-base font-medium text-zinc-100">
                     Shipping
                   </h2>
                 </div>
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-2 gap-3">
                   <div>
-                    <label className="text-sm font-medium mb-2 block text-zinc-400">Ships From</label>
+                    <label className="text-xs font-medium mb-1 block text-zinc-400">Ships From</label>
                     <Select
                       value={storefront.shipsFrom}
                       onValueChange={(value) =>
                         setStorefront((prev) => ({ ...prev, shipsFrom: value as any }))
                       }
                     >
-                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800">
+                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -245,14 +247,14 @@ export default function StorefrontPage() {
                     </Select>
                   </div>
                   <div>
-                    <label className="text-sm font-medium mb-2 block text-zinc-400">Ships To</label>
+                    <label className="text-xs font-medium mb-1 block text-zinc-400">Ships To</label>
                     <Select
                       value={storefront.shipsTo}
                       onValueChange={(value) =>
                         setStorefront((prev) => ({ ...prev, shipsTo: value as any }))
                       }
                     >
-                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800">
+                      <SelectTrigger className="bg-[#1C1C1C] border-zinc-800 h-8 text-sm">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -269,11 +271,11 @@ export default function StorefrontPage() {
             </div>
 
             {/* Messaging and Payments */}
-            <div className="space-y-4">
-              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-                <div className="flex items-center gap-3 mb-4">
-                  <MessageSquare className="h-5 w-5 text-emerald-400" />
-                  <h2 className="text-lg font-medium text-zinc-100">
+            <div className="space-y-3">
+              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+                <div className="flex items-center gap-2 mb-3">
+                  <MessageSquare className="h-4 w-4 text-emerald-400" />
+                  <h2 className="text-base font-medium text-zinc-100">
                     Welcome Message
                   </h2>
                 </div>
@@ -281,26 +283,26 @@ export default function StorefrontPage() {
                   value={storefront.welcomeMessage}
                   onChange={(e) => setStorefront(prev => ({ ...prev, welcomeMessage: e.target.value }))}
                   placeholder="Enter the welcome message for new customers"
-                  className="h-32 bg-[#1C1C1C] border-zinc-800"
+                  className="h-24 bg-[#1C1C1C] border-zinc-800 text-sm resize-none"
                 />
               </div>
 
-              <div className="bg-[#0F0F12] rounded-lg p-4 border border-zinc-800">
-                <div className="flex items-center gap-3 mb-4">
-                  <Wallet className="h-5 w-5 text-yellow-400" />
-                  <h2 className="text-lg font-medium text-zinc-100">
+              <div className="bg-[#0F0F12] rounded-lg p-3 border border-zinc-800">
+                <div className="flex items-center gap-2 mb-3">
+                  <Wallet className="h-4 w-4 text-yellow-400" />
+                  <h2 className="text-base font-medium text-zinc-100">
                     Payment Methods
                   </h2>
                 </div>
-                <div className="space-y-4">
+                <div className="space-y-2">
                   {WALLET_OPTIONS.map((wallet) => (
-                    <div key={wallet.id} className="space-y-2">
+                    <div key={wallet.id} className="space-y-1.5">
                       <div className="flex items-center justify-between">
-                        <label className="text-sm font-medium flex items-center gap-2 text-zinc-400">
+                        <label className="text-xs font-medium flex items-center gap-2 text-zinc-400">
                           <span>{wallet.emoji}</span>
                           {wallet.name}
                           {wallet.comingSoon && (
-                            <span className="text-xs bg-purple-900/50 text-purple-400 px-2 py-0.5 rounded">
+                            <span className="text-[10px] bg-purple-900/50 text-purple-400 px-1.5 py-0.5 rounded">
                               Coming Soon
                             </span>
                           )}
@@ -345,7 +347,7 @@ export default function StorefrontPage() {
                             }))
                           }
                           placeholder={wallet.placeholder}
-                          className="font-mono text-sm bg-[#1C1C1C] border-zinc-800"
+                          className="font-mono text-sm h-8 bg-[#1C1C1C] border-zinc-800"
                         />
                       )}
                     </div>
diff --git a/app/page.tsx b/app/page.tsx
index d825335..e7e6e5a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,7 @@
 import { getPlatformStatsServer } from "@/lib/server-api";
 import { HomeNavbar } from "@/components/home-navbar";
 import { Suspense } from "react";
-import { Shield, LineChart, Zap, ArrowRight } from "lucide-react";
+import { Shield, LineChart, Zap, ArrowRight, CheckCircle2, Sparkles } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { AnimatedStatsSection } from "@/components/animated-stats-section";
@@ -36,142 +36,145 @@ export default async function Home() {
 
     return (
       <div className="flex flex-col min-h-screen bg-black text-white">
+        <div className="absolute inset-0 bg-gradient-to-br from-[#D53F8C]/10 via-transparent to-transparent pointer-events-none" />
         <HomeNavbar />
 
         {/* Hero Section */}  
-        <section className="flex-1 py-20 md:py-32 px-6 md:px-10 flex flex-col items-center text-center space-y-10 bg-black">
-          <div className="space-y-4 max-w-3xl">
-            <h1 className="text-4xl md:text-6xl font-bold tracking-tighter">
-              Streamlined E-commerce <span className="text-[#D53F8C]">Management</span>
-            </h1>
-            <p className="text-xl md:text-2xl text-gray-400 max-w-2xl mx-auto">
-              Ember provides everything you need to manage your e-commerce business efficiently in one place, with secure cryptocurrency payments.
-            </p>
-          </div>
-          
-          <div className="flex flex-col sm:flex-row gap-4 mt-8">
-            <Link href="/dashboard">
-              <Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">
-                Go to Dashboard
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-            <Link href="/auth/register">
-              <Button size="lg" variant="outline" className="border-gray-800 text-white hover:bg-gray-900">
-                Create Account
-              </Button>
-            </Link>
-          </div>
-        </section>
-
-        {/* Statistics Section */}
-        <section className="py-16 px-6 md:px-10 bg-black">
-          <div className="max-w-6xl mx-auto">
-            <h2 className="text-3xl md:text-4xl font-bold text-center mb-10 text-white">Platform Statistics</h2>
-            <AnimatedStatsSection stats={stats as any} />
-          </div>
-        </section>
-
-        {/* Features Section */}
-        <section id="features" className="py-20 px-6 md:px-10 bg-black">
-          <div className="max-w-6xl mx-auto space-y-10">
-            <div className="text-center space-y-4">
-              <h2 className="text-3xl md:text-4xl font-bold text-white">Powerful Features</h2>
-              <p className="text-gray-400 max-w-2xl mx-auto">
-                Everything you need to manage orders, track metrics, and grow your business.
+        <section className="relative overflow-hidden">
+          <div className="relative flex flex-col items-center px-4 py-20 md:py-32 mx-auto max-w-7xl">
+            <div className="flex flex-col items-center text-center space-y-6 max-w-3xl">
+              <div className="inline-flex items-center px-4 py-2 rounded-full bg-[#D53F8C]/10 border border-[#D53F8C]/20 mb-4">
+                <Sparkles className="h-4 w-4 text-[#D53F8C] mr-2" />
+                <span className="text-sm font-medium text-[#D53F8C]">Secure Crypto Payments</span>
+              </div>
+              <h1 className="text-4xl md:text-6xl font-bold tracking-tight">
+                The Future of <span className="text-[#D53F8C]">E-commerce</span> Management
+              </h1>
+              <p className="text-lg md:text-xl text-zinc-400 max-w-2xl">
+                Streamline your online business with our all-in-one platform. Secure payments, order tracking, and analytics in one place.
               </p>
+              <div className="flex flex-col sm:flex-row gap-4 mt-4">
+                <Link href="/dashboard">
+                  <Button size="lg" className="gap-2 bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
+                    Get Started
+                    <ArrowRight className="h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link href="/auth/register">
+                  <Button size="lg" variant="outline" className="border-zinc-800 text-white hover:bg-zinc-900 h-12 px-8">
+                    Create Account
+                  </Button>
+                </Link>
+              </div>
             </div>
+          </div>
+        </section>
+
+        {/* Features Grid */}
+        <section className="relative py-20 px-4">
+          <div className="max-w-7xl mx-auto space-y-20">
             <div className="grid md:grid-cols-3 gap-6">
-              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
-                <div className="mb-4">
-                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
-                    <Shield className="h-6 w-6 text-[#D53F8C]" />
+              {[
+                {
+                  icon: Shield,
+                  title: "Secure Payments",
+                  description: "Built-in cryptocurrency support with maximum privacy and security for your transactions."
+                },
+                {
+                  icon: LineChart,
+                  title: "Real-time Analytics",
+                  description: "Track your business performance with detailed insights and reporting tools."
+                },
+                {
+                  icon: Zap,
+                  title: "Lightning Fast",
+                  description: "Optimized for speed with real-time updates and instant notifications."
+                }
+              ].map((feature, i) => (
+                <div key={i} className="group relative overflow-hidden rounded-xl bg-gradient-to-b from-zinc-800/30 to-transparent p-6 border border-zinc-800">
+                  <div className="absolute inset-0 bg-gradient-to-b from-[#D53F8C]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
+                  <div className="relative">
+                    <div className="h-12 w-12 flex items-center justify-center rounded-lg bg-[#D53F8C]/10 mb-4">
+                      <feature.icon className="h-6 w-6 text-[#D53F8C]" />
+                    </div>
+                    <h3 className="text-lg font-semibold text-white mb-2">{feature.title}</h3>
+                    <p className="text-sm text-zinc-400">{feature.description}</p>
                   </div>
-                  <h3 className="mt-4 text-xl font-semibold text-white">Cryptocurrency Payments</h3>
                 </div>
-                <p className="text-gray-400 text-sm">
-                  Accept payments in various cryptocurrencies with our secure, integrated payment system designed for maximum privacy and security.
-                </p>
-              </div>
-              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
-                <div className="mb-4">
-                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
-                    <LineChart className="h-6 w-6 text-[#D53F8C]" />
-                  </div>
-                  <h3 className="mt-4 text-xl font-semibold text-white">Order Tracking</h3>
-                </div>
-                <p className="text-gray-400 text-sm">
-                  Manage and track orders from receipt to delivery with our intuitive order management system.
-                </p>
-              </div>
-              <div className="p-6 rounded-md bg-[#1C1C1C] border-0">
-                <div className="mb-4">
-                  <div className="h-12 w-12 flex items-center justify-center rounded-md bg-[#232323]">
-                    <Zap className="h-6 w-6 text-[#D53F8C]" />
-                  </div>
-                  <h3 className="mt-4 text-xl font-semibold text-white">Fast Performance</h3>
-                </div>
-                <p className="text-gray-400 text-sm">
-                  Lightning-fast dashboard with real-time updates gives you the information you need when you need it.
-                </p>
-              </div>
+              ))}
+            </div>
+
+            {/* Stats Section */}
+            <div className="relative">
+              <AnimatedStatsSection stats={stats as any} />
             </div>
           </div>
         </section>
 
         {/* Benefits Section */}
-        <section id="benefits" className="py-20 px-6 md:px-10 bg-black">
-          <div className="max-w-6xl mx-auto space-y-10">
-            <div className="text-center space-y-4">
-              <h2 className="text-3xl md:text-4xl font-bold text-white">Why Choose Ember</h2>
-              <p className="text-gray-400 max-w-2xl mx-auto">
-                Our platform is designed to make e-commerce management simple and efficient.
-              </p>
-            </div>
-            <div className="grid md:grid-cols-2 gap-10">
-              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
-                <h3 className="text-xl font-semibold text-white">Centralized Management</h3>
-                <p className="text-gray-400">
-                  Manage all aspects of your e-commerce business from a single dashboard.
-                </p>
-              </div>
-              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
-                <h3 className="text-xl font-semibold text-white">Advanced Analytics</h3>
-                <p className="text-gray-400">
-                  Gain insights into your business with detailed analytics and reporting tools.
-                </p>
-              </div>
-              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
-                <h3 className="text-xl font-semibold text-white">Customer Management</h3>
-                <p className="text-gray-400">
-                  Keep track of customer information and purchase history to provide better service.
-                </p>
-              </div>
-              <div className="space-y-4 p-6 rounded-md bg-[#1C1C1C] border-0">
-                <h3 className="text-xl font-semibold text-white">Inventory Control</h3>
-                <p className="text-gray-400">
-                  Manage your inventory with precision to avoid stock-outs and overstocking.
-                </p>
-              </div>
-            </div>
-            <div className="flex justify-center mt-10">
-              <Link href="/dashboard">
-                <Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0">Start Now</Button>
-              </Link>
+        <section className="relative py-24 px-4">
+          <div className="max-w-7xl mx-auto">
+            <div className="grid md:grid-cols-2 gap-8">
+              {[
+                {
+                  title: "Centralized Dashboard",
+                  description: "Manage your entire e-commerce operation from a single, intuitive interface."
+                },
+                {
+                  title: "Customer Insights",
+                  description: "Understand your customers better with detailed purchase history and behavior analytics."
+                },
+                {
+                  title: "Inventory Management",
+                  description: "Keep track of your stock levels and get alerts when it's time to reorder."
+                },
+                {
+                  title: "Automated Reports",
+                  description: "Get detailed reports and insights delivered automatically to your inbox."
+                }
+              ].map((benefit, i) => (
+                <div key={i} className="flex items-start space-x-4 p-6 rounded-lg bg-zinc-900/50 border border-zinc-800">
+                  <div className="flex-shrink-0">
+                    <CheckCircle2 className="h-6 w-6 text-[#D53F8C]" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-medium text-white mb-2">{benefit.title}</h3>
+                    <p className="text-sm text-zinc-400">{benefit.description}</p>
+                  </div>
+                </div>
+              ))}
             </div>
           </div>
         </section>
 
+        {/* CTA Section */}
+        <section className="relative py-24 px-4">
+          <div className="relative max-w-3xl mx-auto text-center">
+            <h2 className="text-3xl md:text-4xl font-bold mb-6">Ready to Get Started?</h2>
+            <p className="text-lg text-zinc-400 mb-8">
+              Join thousands of businesses already using Ember to manage their e-commerce operations.
+            </p>
+            <Link href="/dashboard">
+              <Button size="lg" className="bg-[#D53F8C] hover:bg-[#B83280] text-white border-0 h-12 px-8">
+                Start Now
+              </Button>
+            </Link>
+          </div>
+        </section>
+
         {/* Footer */}
-        <footer className="py-10 px-6 md:px-10 border-t border-gray-800 bg-black">
-          <div className="max-w-6xl mx-auto text-center">
-            <h3 className="font-bold text-lg mb-2 text-white">Ember</h3>
-            <p className="text-sm text-gray-400">
+        <footer className="relative py-12 px-4 mt-auto">
+          <div className="max-w-7xl mx-auto flex flex-col items-center">
+            <div className="flex items-center gap-2 mb-4">
+              <h3 className="font-bold text-xl text-white">Ember</h3>
+              <div className="h-1.5 w-1.5 rounded-full bg-[#D53F8C]" />
+            </div>
+            <p className="text-sm text-zinc-400 text-center max-w-md mb-6">
               The complete e-commerce management solution for modern businesses.
             </p>
-          </div>
-          <div className="mt-10 text-center text-sm text-gray-500">
-            <p>© {new Date().getFullYear()} Ember. All rights reserved.</p>
+            <div className="text-sm text-zinc-500">
+              © {new Date().getFullYear()} Ember. All rights reserved.
+            </div>
           </div>
         </footer>
       </div>