diff --git a/public/banner.png b/public/banner.png
new file mode 100644
index 0000000..e791e8a
Binary files /dev/null and b/public/banner.png differ
diff --git a/public/icon.png b/public/icon.png
new file mode 100644
index 0000000..e294bf3
Binary files /dev/null and b/public/icon.png differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..e294bf3
Binary files /dev/null and b/public/logo.png differ
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1abef2d..73514ed 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,6 +17,10 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "JUNOHUB | Modern Commerce Infrastructure",
   description: "The world's most advanced encrypted ecosystem for vendors and suppliers.",
+  icons: {
+    icon: "/icon.png",
+    apple: "/logo.png",
+  },
   appleWebApp: {
     capable: true,
     statusBarStyle: "default",
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 18fe794..2af00a4 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -4,8 +4,9 @@ import { signIn } from "next-auth/react"
 import { useState } from "react"
 import { useRouter } from "next/navigation"
 import { motion } from "framer-motion"
-import { Mail, Lock, Loader2, Zap, Shield } from "lucide-react"
+import { Mail, Lock, Loader2, Shield } from "lucide-react"
 import Link from "next/link"
+import Image from "next/image"
 
 export default function LoginPage() {
     const router = useRouter()
@@ -107,8 +108,14 @@ export default function LoginPage() {
                 <div className="bg-white/5 backdrop-blur-xl rounded-2xl md:rounded-3xl p-6 md:p-8 border border-white/10">
                     <div className="text-center mb-10">
                         <div className="inline-flex items-center justify-center gap-3 mb-4">
-                            <div className="w-12 h-12 rounded-2xl bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
-                                <Zap className="w-6 h-6 text-white fill-white" />
+                            <div className="w-14 h-14 rounded-2xl bg-indigo-500/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-lg shadow-indigo-500/20">
+                                <Image
+                                    src="/logo.png"
+                                    alt="JUNOHUB Logo"
+                                    width={56}
+                                    height={56}
+                                    className="object-cover"
+                                />
                             </div>
                             <h1 className="text-2xl font-bold tracking-tight text-white">JUNOHUB</h1>
                         </div>
diff --git a/src/app/onboarding/onboarding-client.tsx b/src/app/onboarding/onboarding-client.tsx
index ac0ee6d..efb49fe 100644
--- a/src/app/onboarding/onboarding-client.tsx
+++ b/src/app/onboarding/onboarding-client.tsx
@@ -17,6 +17,7 @@ import {
     User
 } from "lucide-react"
 import { useRouter } from "next/navigation"
+import Image from "next/image"
 
 const steps = [
     { id: 1, title: "Business Info", icon: Building2 },
@@ -319,9 +320,15 @@ export default function OnboardingClient() {
     return (
         <div className="min-h-screen flex flex-col auth-glass-dark">
             <nav className="h-16 md:h-20 bg-slate-900/50 border-b border-white/10 flex items-center px-4 md:px-10 justify-between shrink-0 backdrop-blur-xl">
-                <div className="flex items-center gap-2">
-                    <div className="w-7 h-7 md:w-8 md:h-8 rounded-lg bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
-                        <Layout className="w-4 h-4 md:w-5 md:h-5 text-white" />
+                <div className="flex items-center gap-3">
+                    <div className="w-10 h-10 md:w-12 md:h-12 rounded-xl bg-indigo-500/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-sm">
+                        <Image
+                            src="/logo.png"
+                            alt="JUNOHUB Logo"
+                            width={48}
+                            height={48}
+                            className="object-cover"
+                        />
                     </div>
                     <span className="font-bold text-white tracking-tight text-lg md:text-xl">JUNOHUB</span>
                 </div>
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 2e3c1e8..80da8ed 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -2,10 +2,11 @@
 
 import { useState, Suspense } from "react"
 import { motion } from "framer-motion"
-import { Mail, Lock, Loader2, User, ShoppingBag, Truck, Zap } from "lucide-react"
+import { Mail, Lock, Loader2, User, ShoppingBag, Truck } from "lucide-react"
 import Link from "next/link"
 import { useRouter, useSearchParams } from "next/navigation"
 import { signIn } from "next-auth/react"
+import Image from "next/image"
 
 function SignupFormContent() {
     const [loading, setLoading] = useState(false)
@@ -53,8 +54,14 @@ function SignupFormContent() {
         <div className="bg-white/5 backdrop-blur-xl rounded-2xl md:rounded-3xl p-6 md:p-8 border border-white/10">
             <div className="text-center mb-8">
                 <div className="inline-flex items-center justify-center gap-3 mb-4">
-                    <div className="w-12 h-12 rounded-2xl bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
-                        <Zap className="w-6 h-6 text-white fill-white" />
+                    <div className="w-14 h-14 rounded-2xl bg-indigo-500/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-lg shadow-indigo-500/20">
+                        <Image
+                            src="/logo.png"
+                            alt="JUNOHUB Logo"
+                            width={56}
+                            height={56}
+                            className="object-cover"
+                        />
                     </div>
                     <h1 className="text-2xl font-bold tracking-tight text-white">JUNOHUB</h1>
                 </div>
diff --git a/src/components/MobileSidebar.tsx b/src/components/MobileSidebar.tsx
index edf5fb6..d360490 100644
--- a/src/components/MobileSidebar.tsx
+++ b/src/components/MobileSidebar.tsx
@@ -1,26 +1,21 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { createPortal } from "react-dom"
 import { usePathname } from "next/navigation"
 import { motion, AnimatePresence } from "framer-motion"
-import { X, Menu, Zap } from "lucide-react"
+import { X, Menu } from "lucide-react"
 import { Sidebar } from "./Sidebar"
 
 import { useTheme } from "./ThemeProvider"
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 export function MobileSidebar() {
     const { theme } = useTheme()
     const isLight = theme === "light"
     const [isOpen, setIsOpen] = useState(false)
-    const [mounted, setMounted] = useState(false)
     const pathname = usePathname()
 
-    useEffect(() => {
-        const timer = setTimeout(() => setMounted(true), 0)
-        return () => clearTimeout(timer)
-    }, [])
 
     // Close sidebar when route changes
     useEffect(() => {
@@ -57,74 +52,77 @@ export function MobileSidebar() {
             </button>
 
             {/* Mobile Sidebar Overlay */}
-            {mounted && createPortal(
-                <AnimatePresence>
-                    {isOpen && (
-                        <>
-                            <motion.div
-                                initial={{ opacity: 0 }}
-                                animate={{ opacity: 1 }}
-                                exit={{ opacity: 0 }}
-                                key="sidebar-backdrop"
-                                transition={{ duration: 0.2 }}
-                                className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[999] md:hidden pointer-events-auto"
-                                onClick={() => setIsOpen(false)}
-                            />
-                            <motion.div
-                                initial={{ x: -288 }}
-                                animate={{ x: 0 }}
-                                exit={{ x: -288 }}
-                                key="sidebar-content"
-                                transition={{ type: "spring", damping: 25, stiffness: 200 }}
-                                className={cn(
-                                    "fixed inset-y-0 left-0 w-72 backdrop-blur-xl border-r z-[1000] md:hidden flex flex-col pointer-events-auto",
-                                    isLight
-                                        ? "bg-white/95 border-slate-200"
-                                        : "bg-slate-900/95 border-white/10"
-                                )}
-                            >
-                                {/* Header with close button */}
-                                <div className={cn(
-                                    "flex items-center justify-between p-4 border-b",
-                                    isLight ? "border-slate-100" : "border-white/10"
-                                )}>
-                                    <div className="flex items-center gap-2">
-                                        <div className={cn(
-                                            "w-8 h-8 rounded-lg flex items-center justify-center backdrop-blur-sm border shadow-sm",
-                                            isLight
-                                                ? "bg-indigo-50 border-indigo-100"
-                                                : "bg-indigo-500/40 border-white/20"
-                                        )}>
-                                            <Zap className={cn("w-5 h-5", isLight ? "text-indigo-600" : "text-white")} />
-                                        </div>
-                                        <h1 className={cn(
-                                            "text-xl font-bold tracking-tight",
-                                            isLight ? "text-slate-900" : "text-white"
-                                        )}>JUNOHUB</h1>
+            <AnimatePresence>
+                {isOpen && (
+                    <>
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            key="sidebar-backdrop"
+                            transition={{ duration: 0.2 }}
+                            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[9999] md:hidden pointer-events-auto"
+                            onClick={() => setIsOpen(false)}
+                        />
+                        <motion.div
+                            initial={{ x: -288 }}
+                            animate={{ x: 0 }}
+                            exit={{ x: -288 }}
+                            key="sidebar-content"
+                            transition={{ type: "spring", damping: 25, stiffness: 200 }}
+                            className={cn(
+                                "fixed inset-y-0 left-0 w-72 backdrop-blur-xl border-r z-[10000] md:hidden flex flex-col pointer-events-auto",
+                                isLight
+                                    ? "bg-white/95 border-slate-200"
+                                    : "bg-slate-900/95 border-white/10"
+                            )}
+                        >
+                            {/* Header with close button */}
+                            <div className={cn(
+                                "flex items-center justify-between p-4 border-b",
+                                isLight ? "border-slate-100" : "border-white/10"
+                            )}>
+                                <div className="flex items-center gap-2">
+                                    <div className={cn(
+                                        "w-9 h-9 rounded-xl overflow-hidden flex items-center justify-center shadow-md border",
+                                        isLight
+                                            ? "border-slate-200"
+                                            : "border-white/10"
+                                    )}>
+                                        <Image
+                                            src="/logo.png"
+                                            alt="JUNOHUB Logo"
+                                            width={36}
+                                            height={36}
+                                            className="object-cover"
+                                        />
                                     </div>
-                                    <button
-                                        onClick={() => setIsOpen(false)}
-                                        className={cn(
-                                            "p-2 rounded-lg transition-all border shadow-sm",
-                                            isLight
-                                                ? "bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100"
-                                                : "bg-white/10 border-white/10 text-white hover:bg-white/15"
-                                        )}
-                                        aria-label="Close menu"
-                                    >
-                                        <X className="w-5 h-5" />
-                                    </button>
+                                    <h1 className={cn(
+                                        "text-xl font-bold tracking-tight",
+                                        isLight ? "text-slate-900" : "text-white"
+                                    )}>JUNOHUB</h1>
                                 </div>
-                                {/* Sidebar Content */}
-                                <div className="flex-1 overflow-y-auto">
-                                    <Sidebar showLogo={false} className="!bg-transparent !border-none" />
-                                </div>
-                            </motion.div>
-                        </>
-                    )}
-                </AnimatePresence>,
-                document.body
-            )}
+                                <button
+                                    onClick={() => setIsOpen(false)}
+                                    className={cn(
+                                        "p-2 rounded-lg transition-all border shadow-sm",
+                                        isLight
+                                            ? "bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100"
+                                            : "bg-white/10 border-white/10 text-white hover:bg-white/15"
+                                    )}
+                                    aria-label="Close menu"
+                                >
+                                    <X className="w-5 h-5" />
+                                </button>
+                            </div>
+                            {/* Sidebar Content */}
+                            <div className="flex-1 overflow-y-auto">
+                                <Sidebar showLogo={false} className="!bg-transparent !border-none" />
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
         </>
     )
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1e6e54c..0529b2d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -19,6 +19,7 @@ import {
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useTheme } from "@/components/ThemeProvider"
+import Image from "next/image"
 
 const routes = [
     {
@@ -101,10 +102,16 @@ export function Sidebar({ showLogo = true, className }: SidebarProps) {
             {showLogo && (
                 <div className="px-6 py-2 flex items-center mb-6">
                     <div className={cn(
-                        "w-8 h-8 rounded-lg border flex items-center justify-center mr-3 backdrop-blur-sm",
-                        isLight ? "bg-indigo-50 border-indigo-100" : "bg-indigo-500/40 border-white/20"
+                        "w-10 h-10 rounded-xl overflow-hidden flex items-center justify-center mr-3 shadow-md border",
+                        isLight ? "border-slate-200" : "border-white/10"
                     )}>
-                        <Zap className={cn("w-5 h-5", isLight ? "text-indigo-600 fill-indigo-600" : "text-white fill-white")} />
+                        <Image
+                            src="/logo.png"
+                            alt="JUNOHUB Logo"
+                            width={40}
+                            height={40}
+                            className="object-cover"
+                        />
                     </div>
                     <h1 className={cn("text-xl font-bold tracking-tight", isLight ? "text-slate-900" : "text-white")}>JUNOHUB</h1>
                 </div>
diff --git a/src/components/landing/LandingFooter.tsx b/src/components/landing/LandingFooter.tsx
index 8fd192a..af59f6f 100644
--- a/src/components/landing/LandingFooter.tsx
+++ b/src/components/landing/LandingFooter.tsx
@@ -2,7 +2,8 @@
 
 import Link from "next/link"
 import { motion } from "framer-motion"
-import { Twitter, Github, Linkedin, Mail, Zap } from "lucide-react"
+import { Twitter, Github, Linkedin, Mail } from "lucide-react"
+import Image from "next/image"
 
 export function LandingFooter() {
     return (
@@ -13,9 +14,15 @@ export function LandingFooter() {
             <div className="container mx-auto px-6">
                 <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                     <div className="col-span-1 md:col-span-1">
-                        <Link href="/" className="flex items-center gap-2 mb-6 group">
-                            <div className="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
-                                <Zap className="w-6 h-6 fill-white" />
+                        <Link href="/" className="flex items-center gap-3 mb-6 group">
+                            <div className="w-10 h-10 rounded-xl bg-indigo-600/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
+                                <Image
+                                    src="/logo.png"
+                                    alt="JUNOHUB Logo"
+                                    width={40}
+                                    height={40}
+                                    className="object-cover"
+                                />
                             </div>
                             <span className="text-xl font-black tracking-tighter text-white">JUNOHUB</span>
                         </Link>
diff --git a/src/components/landing/LandingNavbar.tsx b/src/components/landing/LandingNavbar.tsx
index 6dbf343..63085c0 100644
--- a/src/components/landing/LandingNavbar.tsx
+++ b/src/components/landing/LandingNavbar.tsx
@@ -3,8 +3,9 @@
 import { useState, useEffect } from "react"
 import Link from "next/link"
 import { motion, AnimatePresence } from "framer-motion"
-import { Menu, X, ArrowRight, Zap } from "lucide-react"
+import { Menu, X, ArrowRight } from "lucide-react"
 import { cn } from "@/lib/utils"
+import Image from "next/image"
 
 interface LandingNavbarProps {
     isLoggedIn: boolean
@@ -44,9 +45,15 @@ export function LandingNavbar({ isLoggedIn }: LandingNavbarProps) {
                 )}
             >
                 {/* Logo */}
-                <Link href="/" className="flex items-center gap-2 group">
-                    <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-indigo-600 to-indigo-400 flex items-center justify-center text-white shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
-                        <Zap className="w-6 h-6 fill-white" />
+                <Link href="/" className="flex items-center gap-3 group">
+                    <div className="w-10 h-10 rounded-xl bg-indigo-600/10 border border-white/10 flex items-center justify-center backdrop-blur-sm overflow-hidden shadow-lg shadow-indigo-500/20 group-hover:scale-110 transition-transform">
+                        <Image
+                            src="/logo.png"
+                            alt="JUNOHUB Logo"
+                            width={40}
+                            height={40}
+                            className="object-cover"
+                        />
                     </div>
                     <span className="text-xl font-black tracking-tighter text-white">JUNOHUB</span>
                 </Link>
diff --git a/src/hooks/useChatCrypto.ts b/src/hooks/useChatCrypto.ts
index a93299c..36b2048 100644
--- a/src/hooks/useChatCrypto.ts
+++ b/src/hooks/useChatCrypto.ts
@@ -6,27 +6,38 @@ import { ChatCrypto } from "@/lib/chat-crypto"
 export const PRIVATE_KEY_STORAGE_KEY = "juno_chat_private_key"
 export const PUBLIC_KEY_STORAGE_KEY = "juno_chat_public_key"
 
-export function useChatCrypto() {
+export function useChatCrypto(userId?: string) {
     const [privateKey, setPrivateKey] = useState<string | null>(null)
     const [hasKeys, setHasKeys] = useState(false)
     const [loading, setLoading] = useState(true)
 
+    const privateKeyKey = userId ? `${PRIVATE_KEY_STORAGE_KEY}_${userId}` : PRIVATE_KEY_STORAGE_KEY
+    const publicKeyKey = userId ? `${PUBLIC_KEY_STORAGE_KEY}_${userId}` : PUBLIC_KEY_STORAGE_KEY
+
     useEffect(() => {
-        const stored = localStorage.getItem(PRIVATE_KEY_STORAGE_KEY)
+        if (!userId) {
+            setLoading(false)
+            return
+        }
+        const stored = localStorage.getItem(privateKeyKey)
         if (stored) {
             setPrivateKey(stored)
             setHasKeys(true)
+        } else {
+            setPrivateKey(null)
+            setHasKeys(false)
         }
         setLoading(false)
-    }, [])
+    }, [userId, privateKeyKey])
 
     const setupKeys = useCallback(async () => {
+        if (!userId) throw new Error("User ID required for chat setup")
         setLoading(true)
         try {
             const keys = await ChatCrypto.generateKeyPair()
 
-            localStorage.setItem(PRIVATE_KEY_STORAGE_KEY, keys.privateKey)
-            localStorage.setItem(PUBLIC_KEY_STORAGE_KEY, keys.publicKey)
+            localStorage.setItem(privateKeyKey, keys.privateKey)
+            localStorage.setItem(publicKeyKey, keys.publicKey)
             setPrivateKey(keys.privateKey)
             setHasKeys(true)
 
@@ -45,12 +56,12 @@ export function useChatCrypto() {
         } finally {
             setLoading(false)
         }
-    }, [])
+    }, [userId, privateKeyKey, publicKeyKey])
 
     const getStoredPublicKey = useCallback((): string | null => {
-        if (typeof window === "undefined") return null
-        return localStorage.getItem(PUBLIC_KEY_STORAGE_KEY)
-    }, [])
+        if (typeof window === "undefined" || !userId) return null
+        return localStorage.getItem(publicKeyKey)
+    }, [userId, publicKeyKey])
 
     return {
         privateKey,