diff --git a/components/auth/protected-route.tsx b/components/auth/protected-route.tsx
index 1225cd0..6fae5d2 100644
--- a/components/auth/protected-route.tsx
+++ b/components/auth/protected-route.tsx
@@ -15,32 +15,27 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   const [isChecking, setIsChecking] = useState(true);
 
   useEffect(() => {
-    // If still loading auth state, wait
-    if (isLoading) {
-      return;
-    }
+    if (isLoading) return;
 
-    // Check if user is authenticated
     const isAuthenticated = !!(token || user);
-    
+
     if (isAuthenticated) {
       setIsChecking(false);
     } else {
-      // Only redirect if we're not already on the auth page
-      if (!pathname.includes('/auth/login')) {
-        console.log('Not authenticated - redirecting to auth');
-        // Use replace: false to allow back button to work properly
+      // Redirect logic for unauthenticated users
+      if (!pathname.includes("/auth/login")) {
+        console.log("Not authenticated - redirecting to login");
         router.push("/auth/login");
       }
       setIsChecking(false);
     }
   }, [user, isLoading, token, router, pathname]);
 
-  // Show loading while checking authentication
+  // Show loading spinner while checking auth
   if (isLoading || isChecking) {
     return (
       <div className="min-h-screen flex items-center justify-center">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#2F80ED]"></div>
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#2F80ED]" />
       </div>
     );
   }
@@ -50,6 +45,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     return <>{children}</>;
   }
 
-  // Return null if not authenticated (will redirect)
+  // Return null if not authenticated (redirect happens)
   return null;
-}
\ No newline at end of file
+}
diff --git a/components/context/AuthContext.tsx b/components/context/AuthContext.tsx
index 3a556ec..26e61aa 100644
--- a/components/context/AuthContext.tsx
+++ b/components/context/AuthContext.tsx
@@ -288,7 +288,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
     setToken(null);
     setUser(null);
     setIsLoading(false);
-    router.push("/auth/login");
+    router.push("/");
   };
 
   const register = async (
diff --git a/components/landingpage/landing/Footer.tsx b/components/landingpage/landing/Footer.tsx
index 4ea4cc9..bc19d92 100644
--- a/components/landingpage/landing/Footer.tsx
+++ b/components/landingpage/landing/Footer.tsx
@@ -1,89 +1,83 @@
-import { HugeiconsIcon } from "@hugeicons/react";
+import { HugeiconsIcon } from '@hugeicons/react';
 import {
   DiscordFreeIcons,
   NewTwitterIcon,
   TelegramFreeIcons,
-} from "@hugeicons/core-free-icons";
+} from '@hugeicons/core-free-icons';
 
-import Link from "next/link";
-import { Button } from "@/components/ui/buttons";
+import Link from 'next/link';
+import { Button } from '@/components/ui/buttons';
 
 export const Footer = () => {
-
-
   const footerLinks = [
     {
-      title: "Product",
+      title: 'Product',
       links: [
-        { name: "Features", href: "#features" },
-        { name: "How It Works", href: "#how-it-works" },
-        { name: "Privacy Policy", href: "#privacy" },
-        { name: "FAQs", href: "#faq" },
-        { name: "Contacts", href: "/contact" },
+        { name: 'Features', href: '#features' },
+        { name: 'How It Works', href: '#how-it-works' },
+        { name: 'Privacy Policy', href: '#privacy' },
+        { name: 'FAQs', href: '#faq' },
+        { name: 'Contacts', href: '/contact' },
       ],
     },
     {
-      title: "Company",
+      title: 'Company',
       links: [
-        { name: "About", href: "/about" },
-        { name: "Blog", href: "/blog" },
-        { name: "Careers", href: "#" },
+        { name: 'About', href: '/about' },
+        { name: 'Blog', href: '/blog' },
+        { name: 'Careers', href: '#' },
       ],
     },
     {
-      title: "Legal",
+      title: 'Legal',
       links: [
-        { name: "Privacy", href: "#privacy" },
-        { name: " Terms of Service", href: "#terms" },
-        { name: "Security", href: "#" },
+        { name: 'Privacy', href: '#privacy' },
+        { name: ' Terms of Service', href: '#terms' },
+        { name: 'Security', href: '#' },
       ],
     },
-  ]
-
+  ];
 
   const socials = [
     {
-      name: "X",
+      name: 'X',
       icon: <HugeiconsIcon icon={NewTwitterIcon} />,
-      link: "https://www.x.com",
+      link: 'https://www.x.com',
     },
     {
-      name: "Discord",
+      name: 'Discord',
       icon: <HugeiconsIcon icon={DiscordFreeIcons} />,
-      link: "https://www.discord.com",
+      link: 'https://www.discord.com',
     },
     {
-      name: "Telegram",
+      name: 'Telegram',
       icon: <HugeiconsIcon icon={TelegramFreeIcons} />,
-      link: "https://www.telegram.com",
+      link: 'https://www.telegram.com',
     },
   ];
 
-
-
   return (
-    <footer className="border-t border-border/50 bg-muted/30">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="grid md:grid-cols-4 gap-8 mb-8">
-          <div className="space-y-4">
-            <Link href="#hero">
-            <Button  className="text-2xl font-bold velo-logo-gradient">
-              VELO</Button>
-              </Link>
-            <p className="text-sm text-muted-foreground">
+    <footer className='border-t border-border/50 bg-muted/30'>
+      <div className='max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12'>
+        <div className='grid md:grid-cols-4 gap-8 mb-8'>
+          <div className='space-y-4'>
+            <Button className='text-2xl font-bold velo-logo-gradient'>
+              <Link href='#hero'>VELO.</Link>
+            </Button>
+            <p className='text-sm text-muted-foreground'>
               Fast, secure, and borderless payments for Nigerian businesses.
             </p>
           </div>
 
           {footerLinks.map((section) => (
             <div key={section.title}>
-              <h4 className="font-semibold mb-4">{section.title}</h4>
-              <ul className="space-y-2 text-sm text-muted-foreground">
+              <h4 className='font-semibold mb-4'>{section.title}</h4>
+              <ul className='space-y-2 text-sm text-muted-foreground'>
                 {section.links.map((link) => (
                   <li key={link.name}>
                     <Link
                       href={link.href}
-                      className="hover:text-foreground transition-colors"
+                      className='hover:text-foreground transition-colors'
                     >
                       {link.name}
                     </Link>
@@ -93,13 +87,18 @@ export const Footer = () => {
             </div>
           ))}
         </div>
-        <div className="pt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-sm text-muted-foreground">© 2025 VELO. All rights reserved.</p>
-          <div className="flex items-center gap-4">
-
+        <div className='pt-8 border-t border-border/50 flex flex-col md:flex-row justify-between items-center gap-4'>
+          <p className='text-sm text-muted-foreground'>
+            © 2025 VELO. All rights reserved.
+          </p>
+          <div className='flex items-center gap-4'>
             {socials.map((social, index) => (
-              <Link key={index} href={social.link} className="text-muted-foreground hover:text-foreground transition-colors">
-                <span className="sr-only">{social.name}</span>
+              <Link
+                key={index}
+                href={social.link}
+                className='text-muted-foreground hover:text-foreground transition-colors'
+              >
+                <span className='sr-only'>{social.name}</span>
                 {social.icon}
               </Link>
             ))}
@@ -107,7 +106,7 @@ export const Footer = () => {
         </div>
       </div>
     </footer>
-  )
+  );
 };
 
 export default Footer;
diff --git a/components/landingpage/landing/hero.tsx b/components/landingpage/landing/hero.tsx
index fff962a..15f455a 100644
--- a/components/landingpage/landing/hero.tsx
+++ b/components/landingpage/landing/hero.tsx
@@ -5,8 +5,17 @@ import { ArrowRight, ChevronDown, Play } from "lucide-react"
 import { Paprika } from "next/font/google"
 import Image from "next/image"
 import Link from "next/link"
-import { useState } from "react"
+import { useState , useRef, useEffect} from "react"
+
+const paprika = Paprika({
+  subsets: ["latin"],
+  weight: ["400"],
+  variable: "--font-paprika",
+});
+
 export function Hero() {
+const sectionRef = useRef<HTMLElement>(null)
+  const [isVisible, setIsVisible] = useState(false)
 
 
   const scrollToFeatures = () => {
@@ -58,11 +67,10 @@ export function Hero() {
 
             <div className="flex flex-col sm:flex-row gap-3 max-w-xl">
 
-
               <Link href="auth/signup">
                 <Button
                   size="lg"
-                  className="w-full sm:w-auto px-8 py-4 h-auto bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-xl shadow-blue-500/25 hover:shadow-2xl hover:shadow-blue-500/40 transition-all"
+                  className="w-[calc(100%-50px)] mx-2 sm:w-auto px-8 py-4 h-auto bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-xl shadow-blue-500/25 hover:shadow-2xl hover:shadow-blue-500/40 transition-all"
                 >
                   Get Started For Free
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -110,7 +118,7 @@ export function Hero() {
 
             {/* 3D perspective container */}
             <div className="relative perspective-1000">
-              <div className="transform rotate-y-12 rotate-x-2 transition-transform duration-500 hover:rotate-y-6">
+              <div className="transform  rotate-y-12 rotate-x-2 transition-transform duration-500 hover:rotate-y-6">
                 {/* Dashboard mockup */}
                 <div className="relative bg-slate-900/90 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl overflow-hidden">
                   {/* Browser chrome */}
diff --git a/components/landingpage/landing/stats-landing.tsx b/components/landingpage/landing/stats-landing.tsx
index 5b1b623..b9bfec6 100644
--- a/components/landingpage/landing/stats-landing.tsx
+++ b/components/landingpage/landing/stats-landing.tsx
@@ -9,14 +9,14 @@ export function Stats() {
     const sectionRef = useRef<HTMLDivElement>(null)
 
     const stats = [
-        { value: "100k+", label: "Active Users", icon: Users, target: 100, suffix: "k+", key: "users" as const },
+        { value: "50+", label: "Active Users", icon: Users, target: 50, suffix: "+", key: "users" as const },
         {
-            value: "₦2.5B+",
+            value: "₦200+",
             label: "Processed",
             icon: TrendingUp,
-            target: 2.5,
+            target: 200,
             prefix: "₦",
-            suffix: "B+",
+            suffix: "k+",
             key: "processed" as const,
         },
         { value: "99.9%", label: "Uptime", icon: Shield, target: 99.9, suffix: "%", key: "uptime" as const },
diff --git a/components/profile/bank-accounts.tsx b/components/profile/bank-accounts.tsx
index 2df61cb..3cae8e2 100644
--- a/components/profile/bank-accounts.tsx
+++ b/components/profile/bank-accounts.tsx
@@ -1,120 +1,272 @@
-"use client"
+'use client';
 
-import { useEffect, useState } from "react"
-import { motion, AnimatePresence } from "framer-motion"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  CreditCard,
+  Plus,
+  Building2,
+  Hash,
+  User,
+  Loader2,
+  Copy,
+  Check,
+} from 'lucide-react';
+import { toast } from 'sonner';
 
-import { CreditCard, Plus, Building2, Hash, User, Loader2 } from "lucide-react"
-import { useAuth } from "../context/AuthContext"
-import { UserProfile } from "@/types/authContext"
-import { toast } from "sonner"
-import { Card, CardContent, CardHeader, CardTitle } from "../ui/cards"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Card, CardContent, CardHeader, CardTitle } from '../ui/cards';
+import { Button } from '../ui/buttons';
+import { UserProfile } from '@/types/authContext';
+import { useAuth } from '../context/AuthContext';
 
-import { Button } from "../ui/buttons"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"
+export const DEMO_DATA: UserProfile = {
+  id: 'demo-user-123',
+  email: 'demo@example.com',
+  firstName: 'John',
+  lastName: 'Doe',
+  phoneNumber: '1234567890',
+  isEmailVerified: true,
+  kyc: null,
+  kycStatus: 'pending',
+  createdAt: new Date().toISOString(),
+  username: 'johndoe',
+  displayPicture: null,
+  bankDetails: {
+    bankName: 'Access Bank',
+    accountNumber: '1234567890',
+    accountName: 'John Doe',
+  },
+};
+
+const USE_DEMO_DATA = true;
 
 interface ProfileProps {
-  user: UserProfile | null
+  user: UserProfile | null;
 }
 
-
 export function BankAccounts({ user }: ProfileProps) {
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const { isLoading } = useAuth()
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [copiedAccountNumber, setCopiedAccountNumber] = useState(false);
+  const { updateProfile } = useAuth();
 
-  const [formData, setFormData] = useState<UserProfile | null>(null)
+  const [formData, setFormData] = useState<UserProfile | null>(
+    USE_DEMO_DATA ? DEMO_DATA : null
+  );
 
   useEffect(() => {
-    if (user) {
-      setFormData(user)
+    if (!USE_DEMO_DATA && user) {
+      setFormData(user);
     }
-  }, [user])
+  }, [user]);
 
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopiedAccountNumber(true);
+      toast.success('Copied to clipboard');
+      setTimeout(() => setCopiedAccountNumber(false), 2000);
+    } catch (err) {
+      toast.error('Failed to copy');
+    }
+  };
 
   const handleAddAccount = async () => {
-    if (!formData?.bankDetails?.accountName || !formData.bankDetails.accountNumber || !formData.bankDetails.bankName) {
-      toast.error('Please fill in all fields.')
-      return
+    const bankDetails = formData?.bankDetails;
+    if (!bankDetails?.bankName || !bankDetails?.accountNumber) {
+      toast.error('Please fill in all required fields.');
+      return;
     }
+    setIsLoading(true);
 
     try {
-      // const onSuccess = await addBankAccount(formData)
-      const onSuccess = false;
-      if (onSuccess) {
-        setIsDialogOpen(false)
-        toast.success('Bank account added', {
-          description: "Your bank account has been added successfully."
-        })
-        setFormData(user)
+      // Call Paystack verification endpoint
+      const res = await fetch('/api/verify-account', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          accountNumber: bankDetails.accountNumber,
+          bankCode: bankDetails.bankName,
+        }),
+      });
+
+      const data = await res.json();
+
+      if (!res.ok) throw new Error(data.error || 'Verification failed');
+
+      const verifiedName = data.account_name;
+      if (!verifiedName) throw new Error('No account name returned.');
+
+      setFormData((prev): UserProfile | null => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          bankDetails: {
+            bankName: prev.bankDetails?.bankName ?? '',
+            accountNumber: prev.bankDetails?.accountNumber ?? '',
+            accountName: verifiedName,
+          },
+        };
+      });
+      const userFullName = `${formData?.firstName || ''} ${
+        formData?.lastName || ''
+      }`.trim();
+
+      // Normalize names for comparison
+      const normalize = (name: string) =>
+        name.toLowerCase().replace(/\s+/g, ' ').trim();
+
+      const cleanUserName = normalize(userFullName);
+      const cleanBankName = normalize(verifiedName);
+
+      if (
+        !cleanBankName.includes(cleanUserName) &&
+        !cleanUserName.includes(cleanBankName)
+      ) {
+        toast.error('⚠️ Account name does not match your profile name.');
+        setIsLoading(false);
+        return;
       }
-    } catch (error: string | any) {
-      toast.error('Failed to add bank account', {
-        description: `Please try again. Error: ${error.message || error}`
-      })
+
+      const updatedProfile = {
+        ...formData,
+        bankDetails: {
+          bankName: bankDetails.bankName,
+          accountNumber: bankDetails.accountNumber,
+          accountName: verifiedName,
+        },
+      };
+
+      const savedUser = await updateProfile(updatedProfile);
+
+      if (savedUser) {
+        toast.success('✅ Bank account verified and added successfully.');
+        setFormData(savedUser);
+        setIsDialogOpen(false);
+      } else {
+        throw new Error('Failed to save bank account.');
+      }
+    } catch (error: any) {
+      toast.error(`❌ ${error.message || 'Verification failed'}`);
+    } finally {
+      setIsLoading(false);
     }
-  }
+  };
 
   return (
-    <Card className="transition-smooth hover:shadow-md">
-      <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 pb-6">
-        <div className="flex items-center gap-2">
-          <CreditCard className="w-5 h-5 text-primary" />
-          <CardTitle className="text-lg sm:text-xl">Bank Accounts</CardTitle>
+    <Card className='transition-smooth hover:shadow-md'>
+      <CardHeader className='flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-4 sm:space-y-0 pb-6'>
+        <div className='flex items-center gap-2'>
+          <CreditCard className='w-5 h-5 text-primary' />
+          <CardTitle className='text-lg sm:text-xl'>Bank Accounts</CardTitle>
         </div>
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
           <DialogTrigger asChild>
-            <Button variant="outline" size="sm" className="gap-2 bg-transparent w-full sm:w-auto">
-              <Plus className="w-4 h-4" />
+            <Button
+              variant='outline'
+              size='sm'
+              className='gap-2 bg-transparent w-full sm:w-auto'
+            >
+              <Plus className='w-4 h-4' />
               Add Bank
             </Button>
           </DialogTrigger>
-          <DialogContent className="w-[95vw] max-w-md mx-auto bg-white">
+          <DialogContent className='w-[95vw] max-w-md mx-auto bg-sidebar backdrop-blur-lg border border-border/50 shadow-lg'>
             <DialogHeader>
               <DialogTitle>Add Bank Account</DialogTitle>
             </DialogHeader>
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="bankName">Bank Name</Label>
-                <div className="relative">
-                  <Building2 className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <div className='space-y-4'>
+              <div className='space-y-2'>
+                <Label htmlFor='bankName'>Bank Name</Label>
+                <div className='relative'>
+                  <Building2 className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="bankName"
+                    id='bankName'
                     value={formData?.bankDetails?.bankName}
-                    onChange={(e) => setFormData((prev) => ({ ...(prev ?? {}), bankName: e.target.value } as UserProfile))}
-                    className="pl-10"
-                    placeholder="Wells Fargo"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              bankName: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='Wells Fargo'
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label htmlFor="accountNumber">Account Number</Label>
-                <div className="relative">
-                  <Hash className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <div className='space-y-2'>
+                <Label htmlFor='accountNumber'>Account Number</Label>
+                <div className='relative'>
+                  <Hash className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="accountNumber"
+                    id='accountNumber'
                     value={formData?.bankDetails?.accountNumber}
-                    onChange={(e) => setFormData({ ...formData, accountNumber: e.target.value } as UserProfile)}
-                    className="pl-10"
-                    placeholder="1234567890"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              accountNumber: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='1234567890'
                   />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label htmlFor="accountName">Account Name</Label>
-                <div className="relative">
-                  <User className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              {/* <div className='space-y-2'>
+                <Label htmlFor='accountName'>Account Name</Label>
+                <div className='relative'>
+                  <User className='absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground' />
                   <Input
-                    id="accountName"
+                    id='accountName'
                     value={formData?.bankDetails?.accountName}
-                    onChange={(e) => setFormData({ ...formData, accountName: e.target.value } as UserProfile)}
-                    className="pl-10"
-                    placeholder="John Doe"
+                    onChange={(e) =>
+                      setFormData(
+                        (prev) =>
+                          ({
+                            ...(prev ?? {}),
+                            bankDetails: {
+                              ...(prev?.bankDetails ?? {}),
+                              accountName: e.target.value,
+                            },
+                          } as UserProfile)
+                      )
+                    }
+                    className='pl-10'
+                    placeholder='John Doe'
                   />
                 </div>
-              </div>
-              <Button onClick={handleAddAccount} disabled={isLoading} className="w-full gap-2">
-                {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Plus className="w-4 h-4" />}
+              </div> */}
+              <Button
+                onClick={handleAddAccount}
+                disabled={isLoading}
+                className='w-full gap-2'
+              >
+                {isLoading ? (
+                  <Loader2 className='w-4 h-4 animate-spin' />
+                ) : (
+                  <Plus className='w-4 h-4' />
+                )}
                 Add Account
               </Button>
             </div>
@@ -128,66 +280,82 @@ export function BankAccounts({ user }: ProfileProps) {
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: -20 }}
-              className="text-center py-12"
+              className='text-center py-12'
             >
-              <CreditCard className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
-              <h3 className="text-lg font-medium text-muted-foreground mb-2">No bank accounts linked</h3>
-              <p className="text-sm text-muted-foreground">Add a bank account to get started</p>
+              <CreditCard className='w-12 h-12 text-muted-foreground mx-auto mb-4' />
+              <h3 className='text-lg font-medium text-muted-foreground mb-2'>
+                No bank accounts linked
+              </h3>
+              <p className='text-sm text-muted-foreground'>
+                Add a bank account to get started
+              </p>
             </motion.div>
           ) : (
-            <div className="space-y-4">
+            <div className='space-y-4'>
               <motion.div
                 key={user?.id}
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ delay: 0.1 }}
-                className="p-4 border rounded-lg bg-card hover:bg-accent/5 transition-smooth"
+                className='p-4 border rounded-lg bg-card hover:bg-accent/5 transition-smooth'
               >
-                <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
-                  <div className="space-y-2 flex-1">
-                    <div className="flex items-center gap-3 flex-wrap">
-                      <Building2 className="w-5 h-5 text-primary" />
-                      <span className="font-medium">{formData.bankDetails.bankName}</span>
-                      {/* {account.isVerified ? (
-                          <Badge variant="secondary" className="bg-success/10 text-success border-success/20">
-                            <CheckCircle className="w-3 h-3 mr-1" />
-                            Verified
-                          </Badge>
-                        ) : (
-                          <Badge variant="secondary" className="bg-warning/10 text-warning border-warning/20">
-                            <Clock className="w-3 h-3 mr-1" />
-                            Pending
-                          </Badge>
-                        )} */}
+                <div className='space-y-4'>
+                  {/* Bank Name Section */}
+                  <div className='flex items-center gap-3'>
+                    <div className='flex items-center justify-center w-10 h-10 rounded-full bg-primary/10'>
+                      <Building2 className='w-5 h-5 text-primary' />
                     </div>
-                    <div className="text-sm text-muted-foreground space-y-1">
-                      <div className="flex items-center gap-2">
-                        <Hash className="w-3 h-3" />
-                        <span>
-                          ****{formData?.bankDetails?.accountNumber
-                            ? formData.bankDetails.accountNumber.slice(-4)
-                            : "----"}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <User className="w-3 h-3" />
-                        <span>{formData.bankDetails.accountName}</span>
+                    <div>
+                      <p className='text-xs text-muted-foreground'>Bank Name</p>
+                      <p className='font-semibold text-foreground'>
+                        {formData.bankDetails.bankName}
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Account Number Section with Copy */}
+                  <div className='flex items-center justify-between gap-4 p-3 rounded-lg bg-muted/50 border border-border/80'>
+                    <div className='flex items-center gap-3 flex-1 min-w-0'>
+                      <Hash className='w-4 h-4 text-muted-foreground flex-shrink-0' />
+                      <div className='flex-1 min-w-0'>
+                        <p className='text-xs text-muted-foreground mb-0.5'>
+                          Account Number
+                        </p>
+                        <p className='font-mono text-sm font-medium text-foreground truncate'>
+                          {formData.bankDetails.accountNumber}
+                        </p>
                       </div>
                     </div>
+                    <Button
+                      variant='ghost'
+                      size='sm'
+                      onClick={() =>
+                        copyToClipboard(
+                          formData?.bankDetails?.accountNumber ?? ''
+                        )
+                      }
+                      className='flex-shrink-0 h-8 w-8 p-0'
+                    >
+                      {copiedAccountNumber ? (
+                        <Check className='w-4 h-4 text-success' />
+                      ) : (
+                        <Copy className='w-4 h-4' />
+                      )}
+                    </Button>
+                  </div>
+
+                  {/* Account Name Section */}
+                  <div className='flex items-center gap-3'>
+                    <User className='w-4 h-4 text-muted-foreground' />
+                    <div>
+                      <p className='text-xs text-muted-foreground'>
+                        Account Name
+                      </p>
+                      <p className='text-sm text-foreground'>
+                        {formData.bankDetails.accountName}
+                      </p>
+                    </div>
                   </div>
-                  {/* {!account.isVerified && (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => handleVerifyAccount(account.id)}
-                        disabled={isLoading}
-                        className="gap-2 w-full sm:w-auto"
-                      >
-                        {isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Shield className="w-4 h-4" />}
-                        <span className="hidden sm:inline">Verify Bank</span>
-                        <span className="sm:hidden">Verify</span>
-                      </Button>
-                    )} */}
                 </div>
               </motion.div>
             </div>
@@ -195,5 +363,5 @@ export function BankAccounts({ user }: ProfileProps) {
         </AnimatePresence>
       </CardContent>
     </Card>
-  )
+  );
 }
diff --git a/components/profile/profile-form.tsx b/components/profile/profile-form.tsx
index 136f51d..de2bfa4 100644
--- a/components/profile/profile-form.tsx
+++ b/components/profile/profile-form.tsx
@@ -56,7 +56,6 @@ export function ProfileForm() {
         const toastId = toast.loading('Updating profile...');
 
         try {
-            console.log("📤 Sending update with data:", formData);
             const updatedUser = await updateProfile(formData);
             
             if (updatedUser) {
diff --git a/components/providers/starknet-provider.tsx b/components/providers/starknet-provider.tsx
index 486c6f4..f8bc21d 100644
--- a/components/providers/starknet-provider.tsx
+++ b/components/providers/starknet-provider.tsx
@@ -1,35 +1,36 @@
-"use client";
-import React from "react";
-import { sepolia } from "@starknet-react/chains";
+'use client';
+import React from 'react';
+import { sepolia, mainnet } from '@starknet-react/chains';
 import {
   StarknetConfig,
   jsonRpcProvider,
   argent,
   braavos,
   voyager,
-} from "@starknet-react/core";
+} from '@starknet-react/core';
 
 export function StarknetProvider({ children }: { children: React.ReactNode }) {
   // Manual connector setup - more reliable for detection
-  const connectors = [
-    argent(),
-    braavos(),
-  ];
+  const connectors = [argent(), braavos()];
 
   const rpc = (chain: any) => {
     if (chain.id === sepolia.id) {
-      return { 
-        nodeUrl: process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL || "https://starknet-sepolia.public.blastapi.io" 
+      return {
+        nodeUrl:
+          process.env.NEXT_PUBLIC_SEPOLIA_RPC_URL ||
+          'https://starknet-sepolia.public.blastapi.io',
       };
     }
-    return { 
-      nodeUrl: process.env.NEXT_PUBLIC_MAINNET_RPC_URL || "https://starknet-mainnet.public.blastapi.io" 
+    return {
+      nodeUrl:
+        process.env.NEXT_PUBLIC_MAINNET_RPC_URL ||
+        'https://starknet-mainnet.public.blastapi.io',
     };
   };
 
   return (
     <StarknetConfig
-      chains={[sepolia]}
+      chains={[sepolia, mainnet]}
       connectors={connectors}
       explorer={voyager}
       autoConnect={true}
@@ -38,4 +39,4 @@ export function StarknetProvider({ children }: { children: React.ReactNode }) {
       {children}
     </StarknetConfig>
   );
-}
\ No newline at end of file
+}