From 59d90ed807974fe28988ce1fbd7b2431eeded964 Mon Sep 17 00:00:00 2001
From: root <root@Talat.Talat>
Date: Sat, 14 Feb 2026 16:02:43 +0500
Subject: [PATCH] fixed UI and MFA

---
 src/app/admin/layout.tsx                      |   4 +-
 .../juno-engine/email-templates/page.tsx      | 505 +++++++++-------
 src/app/dashboard/layout.tsx                  |  14 +-
 src/app/dashboard/orders/page.tsx             | 223 ++++---
 src/app/dashboard/settings/security/page.tsx  |   6 +-
 src/app/dashboard/stores/page.tsx             |  10 +-
 src/app/favicon.ico                           | Bin 25931 -> 0 bytes
 src/app/globals.css                           |  10 +-
 src/app/icon.svg                              |   4 +
 src/app/layout.tsx                            |   4 -
 src/app/signup/page.tsx                       |  35 +-
 src/components/AddStoreModal.tsx              | 543 ++++++++++--------
 src/components/DeleteStoreModal.tsx           |  67 ++-
 src/components/MobileAdminSidebar.tsx         |  72 +++
 src/components/MobileSidebar.tsx              |  51 +-
 src/components/MobileSupplierSidebar.tsx      |   4 +-
 src/components/NotificationBell.tsx           | 278 +++++----
 src/components/OrderDetailsModal.tsx          | 379 ++++++------
 src/components/StoreSwitcher.tsx              |  97 ++--
 src/components/SupplierSidebar.tsx            |   2 +-
 src/components/ThemeToggle.tsx                |  36 +-
 src/components/UserAccountMenu.tsx            |  57 +-
 22 files changed, 1309 insertions(+), 1092 deletions(-)
 delete mode 100644 src/app/favicon.ico
 create mode 100644 src/app/icon.svg
 create mode 100644 src/components/MobileAdminSidebar.tsx

diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index c2eb893..0fda551 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,5 +1,5 @@
 import { AdminSidebar } from "@/components/AdminSidebar"
-import { MobileSidebar } from "@/components/MobileSidebar"
+import { MobileAdminSidebar } from "@/components/MobileAdminSidebar"
 import UserAccountMenu from "@/components/UserAccountMenu"
 import NotificationBell from "@/components/NotificationBell"
 import PageTransition from "@/components/PageTransition"
@@ -41,7 +41,7 @@ export default async function AdminLayout({
                 <header className="h-16 px-4 md:px-8 border-b border-white/10 bg-slate-900/50 backdrop-blur-xl flex items-center justify-between flex-shrink-0 z-50">
                     <div className="flex items-center gap-2 md:gap-4 flex-1 min-w-0">
                         {/* Reuse vendor mobile sidebar trigger for consistency */}
-                        <MobileSidebar />
+                        <MobileAdminSidebar />
                         <div className="flex flex-col">
                             <h2 className="text-xs md:text-sm font-semibold text-slate-300 uppercase tracking-wider">
                                 Admin Portal
diff --git a/src/app/dashboard/juno-engine/email-templates/page.tsx b/src/app/dashboard/juno-engine/email-templates/page.tsx
index 678615a..8519d80 100644
--- a/src/app/dashboard/juno-engine/email-templates/page.tsx
+++ b/src/app/dashboard/juno-engine/email-templates/page.tsx
@@ -1,6 +1,8 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
+import { useState, useEffect, useMemo } from "react"
+import { createPortal } from "react-dom"
+import { motion, AnimatePresence } from "framer-motion"
 import { FileText, Search, Plus, Loader2, Edit, Trash2 } from "lucide-react"
 import { renderTemplate } from "@/lib/templates/simpleRenderer"
 import { useTheme } from "@/components/ThemeProvider"
@@ -52,9 +54,14 @@ export default function EmailTemplatesPage() {
 
     const [editing, setEditing] = useState<Template | null>(null)
     const [saving, setSaving] = useState(false)
+    const [mounted, setMounted] = useState(false)
     const { theme } = useTheme()
     const isLight = theme === "light"
 
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
     const loadTemplates = async () => {
         try {
             setLoading(true)
@@ -186,8 +193,10 @@ export default function EmailTemplatesPage() {
 
     return (
         <div className="h-full flex flex-col space-y-4 md:space-y-6 mt-4 md:mt-6">
-            <div className="bg-white/5 backdrop-blur-xl rounded-xl md:rounded-2xl border border-white/10 overflow-hidden flex flex-col flex-1 min-h-0">
-                <div className="p-4 md:p-6 border-b border-white/10 flex flex-col sm:flex-row gap-3 md:gap-4 justify-between bg-white/5 flex-shrink-0">
+            <div className={`backdrop-blur-xl rounded-xl md:rounded-2xl border overflow-hidden flex flex-col flex-1 min-h-0 ${isLight ? "bg-white border-slate-200 shadow-sm" : "bg-white/5 border-white/10"
+                }`}>
+                <div className={`p-4 md:p-6 border-b flex flex-col sm:flex-row gap-3 md:gap-4 justify-between flex-shrink-0 ${isLight ? "border-slate-100 bg-slate-50/50" : "border-white/10 bg-white/5"
+                    }`}>
                     <div className="relative flex-1 min-w-0">
                         <Search className="absolute left-3 md:left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
                         <input
@@ -195,7 +204,10 @@ export default function EmailTemplatesPage() {
                             placeholder="Search templates by name, intent, or mood..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
-                            className="w-full h-10 md:h-11 pl-10 md:pl-11 pr-4 bg-white/5 border border-white/10 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500/50 text-white placeholder:text-slate-500 text-sm font-medium transition-all"
+                            className={`w-full h-10 md:h-11 pl-10 md:pl-11 pr-4 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500/30 transition-all text-sm font-medium ${isLight
+                                    ? "bg-white border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                    : "bg-white/5 border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500/50"
+                                }`}
                         />
                     </div>
                     <button
@@ -232,26 +244,31 @@ export default function EmailTemplatesPage() {
                                         key={template.id}
                                         type="button"
                                         onClick={() => startEditTemplate(template)}
-                                        className="bg-white/5 backdrop-blur-xl p-4 md:p-6 rounded-xl md:rounded-2xl border border-white/10 hover:bg-white/[0.07] hover:border-indigo-500/30 transition-all group text-left"
+                                        className={`backdrop-blur-xl p-4 md:p-6 rounded-xl md:rounded-2xl border transition-all group text-left ${isLight
+                                                ? "bg-white border-slate-200 hover:bg-slate-50 hover:border-indigo-300 shadow-sm"
+                                                : "bg-white/5 border-white/10 hover:bg-white/[0.07] hover:border-indigo-500/30"
+                                            }`}
                                     >
                                         <div className="flex items-start justify-between mb-4">
                                             <div className="flex-1 min-w-0">
-                                                <h3 className="font-bold text-base md:text-lg text-white truncate group-hover:text-indigo-400 transition-colors">
+                                                <h3 className={`font-bold text-base md:text-lg truncate group-hover:text-indigo-500 transition-colors ${isLight ? "text-slate-900" : "text-white"
+                                                    }`}>
                                                     {template.name}
                                                 </h3>
-                                                <p className="text-xs text-slate-400 mt-1 truncate">
+                                                <p className={`text-xs mt-1 truncate ${isLight ? "text-slate-500" : "text-slate-400"}`}>
                                                     Intent: {template.intent} • Mood:{" "}
                                                     {template.mood}
                                                 </p>
                                             </div>
                                         </div>
 
-                                        <p className="text-xs text-slate-300 line-clamp-3">
+                                        <p className={`text-xs line-clamp-3 ${isLight ? "text-slate-600" : "text-slate-300"}`}>
                                             {template.description ||
                                                 template.body.split("\n").slice(0, 3).join(" ")}
                                         </p>
 
-                                        <div className="flex items-center justify-between pt-4 border-t border-white/10 mt-4">
+                                        <div className={`flex items-center justify-between pt-4 border-t mt-4 ${isLight ? "border-slate-100" : "border-white/10"
+                                            }`}>
                                             <span className="text-[10px] text-slate-500 font-medium">
                                                 Updated{" "}
                                                 {new Date(
@@ -283,230 +300,272 @@ export default function EmailTemplatesPage() {
                 </div>
             </div>
 
-            {editing && (
-                <div
-                    className={`fixed inset-0 z-40 flex items-start justify-center px-4 pt-20 md:pt-24 ${
-                        isLight ? "bg-slate-900/10" : "bg-slate-950/60"
-                    }`}
-                >
-                    <div
-                        className={`flex w-full max-h-[90vh] max-w-3xl flex-col rounded-2xl border shadow-2xl ${
-                            isLight
-                                ? "bg-white text-slate-900 border-slate-200"
-                                : "bg-slate-950 text-slate-50 border-white/10"
-                        }`}
-                    >
-                        <div
-                            className={`flex items-center justify-between px-5 py-4 border-b ${
-                                isLight ? "border-slate-200" : "border-white/10"
-                            }`}
-                        >
-                            <div>
-                                <h2 className="text-lg font-bold">
-                                    {editing.id ? "Edit template" : "New template"}
-                                </h2>
-                                <p
-                                    className={`mt-0.5 text-xs ${
-                                        isLight ? "text-slate-500" : "text-slate-400"
-                                    }`}
-                                >
-                                    Use {"{{variable}}"} placeholders to personalize replies.
-                                </p>
-                            </div>
-                            <button
-                                type="button"
-                                onClick={() => setEditing(null)}
-                                className={`text-sm ${
-                                    isLight
-                                        ? "text-slate-500 hover:text-slate-900"
-                                        : "text-slate-400 hover:text-white"
+            <AnimatePresence>
+                {editing && mounted && createPortal(
+                    <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none p-4">
+                        {/* Backdrop */}
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            onClick={() => !saving && setEditing(null)}
+                            className={`absolute inset-0 pointer-events-auto backdrop-blur-sm ${isLight ? "bg-black/40" : "bg-black/60"
                                 }`}
+                        />
+
+                        {/* Modal */}
+                        <motion.div
+                            initial={{ scale: 0.95, opacity: 0, y: 20 }}
+                            animate={{ scale: 1, opacity: 1, y: 0 }}
+                            exit={{ scale: 0.95, opacity: 0, y: 20 }}
+                            className={`relative flex w-full max-h-[90vh] max-w-3xl flex-col rounded-2xl border shadow-2xl pointer-events-auto ${isLight
+                                ? "bg-white text-slate-900 border-slate-200"
+                                : "bg-slate-900 text-slate-50 border-white/10"
+                                }`}
+                        >
+                            <div
+                                className={`flex items-center justify-between px-6 py-5 border-b ${isLight ? "border-slate-100" : "border-white/10"
+                                    }`}
                             >
-                                Close
-                            </button>
-                        </div>
-
-                        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4">
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div className="space-y-3">
-                                    <div>
-                                        <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                            Name
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={editing.name}
-                                            onChange={(e) =>
-                                                setEditing((prev) =>
-                                                    prev
-                                                        ? { ...prev, name: e.target.value }
-                                                        : prev,
-                                                )
-                                            }
-                                            className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-                                        />
-                                    </div>
-
-                                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                                        <div>
-                                            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                                Intent
-                                            </label>
-                                            <select
-                                                value={editing.intent}
-                                                onChange={(e) =>
-                                                    setEditing((prev) =>
-                                                        prev
-                                                            ? {
-                                                                  ...prev,
-                                                                  intent: e.target.value,
-                                                              }
-                                                            : prev,
-                                                    )
-                                                }
-                                                className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-                                            >
-                                                {INTENT_OPTIONS.map((opt) => (
-                                                    <option key={opt.value} value={opt.value}>
-                                                        {opt.label}
-                                                    </option>
-                                                ))}
-                                            </select>
-                                        </div>
-                                        <div>
-                                            <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                                Mood
-                                            </label>
-                                            <select
-                                                value={editing.mood}
-                                                onChange={(e) =>
-                                                    setEditing((prev) =>
-                                                        prev
-                                                            ? {
-                                                                  ...prev,
-                                                                  mood: e.target.value,
-                                                              }
-                                                            : prev,
-                                                    )
-                                                }
-                                                className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-                                            >
-                                                {MOOD_OPTIONS.map((opt) => (
-                                                    <option key={opt.value} value={opt.value}>
-                                                        {opt.label}
-                                                    </option>
-                                                ))}
-                                            </select>
-                                        </div>
-                                    </div>
-
-                                    <div>
-                                        <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                            Description (optional)
-                                        </label>
-                                        <input
-                                            type="text"
-                                            value={editing.description || ""}
-                                            onChange={(e) =>
-                                                setEditing((prev) =>
-                                                    prev
-                                                        ? {
-                                                              ...prev,
-                                                              description: e.target.value,
-                                                          }
-                                                        : prev,
-                                                )
-                                            }
-                                            className="w-full h-9 px-3 rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-sm text-slate-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-                                            placeholder="Short summary for your team"
-                                        />
-                                    </div>
-                                </div>
-
-                                <div className="space-y-2 text-xs text-slate-600 dark:text-slate-400">
-                                    <p className="font-semibold text-slate-800 dark:text-slate-200">
-                                        Available variables
+                                <div>
+                                    <h2 className="text-xl font-bold">
+                                        {editing.id ? "Edit template" : "New template"}
+                                    </h2>
+                                    <p
+                                        className={`mt-1 text-sm ${isLight ? "text-slate-500" : "text-slate-400"
+                                            }`}
+                                    >
+                                        Use {"{{variable}}"} placeholders to personalize replies.
                                     </p>
-                                    <ul className="space-y-1">
-                                        <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
-                                                {"{{customer_name}}"}
-                                            </code>{" "}
-                                            – Customer’s name
-                                        </li>
-                                        <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
-                                                {"{{customer_email}}"}
-                                            </code>{" "}
-                                            – Customer’s email
-                                        </li>
-                                        <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
-                                                {"{{store_name}}"}
-                                            </code>{" "}
-                                            – Store name
-                                        </li>
-                                        <li>
-                                            <code className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-900/80 rounded border border-slate-200 dark:border-white/10 text-[11px]">
-                                                {"{{ticket_summary}}"}
-                                            </code>{" "}
-                                            – Short summary of the customer’s email
-                                        </li>
-                                    </ul>
                                 </div>
-                            </div>
-
-                            <div>
-                                <label className="block text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                    Template body
-                                </label>
-                                <textarea
-                                    value={editing.body}
-                                    onChange={(e) =>
-                                        setEditing((prev) =>
-                                            prev ? { ...prev, body: e.target.value } : prev,
-                                        )
-                                    }
-                                    rows={8}
-                                    className="w-full rounded-lg bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-white/10 text-xs text-slate-900 dark:text-slate-100 font-mono p-3 focus:outline-none focus:ring-2 focus:ring-indigo-500/40"
-                                />
-                            </div>
-
-                            <div>
-                                <p className="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">
-                                    Preview with example data
-                                </p>
-                                <div className="rounded-lg border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/80 p-4 text-xs text-slate-900 dark:text-slate-100 whitespace-pre-wrap">
-                                    {currentPreview || "Preview will appear here."}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="px-5 py-3 border-t border-slate-200 dark:border-white/10 flex items-center justify-between">
-                            <p className="text-[11px] text-slate-500 dark:text-slate-500">
-                                Templates use simple {"{{variable}}"} placeholders only.
-                            </p>
-                            <div className="flex items-center gap-2">
                                 <button
                                     type="button"
                                     onClick={() => setEditing(null)}
-                                    className="h-8 px-3 rounded-lg border border-slate-200 dark:border-white/10 text-xs text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-white/10"
+                                    className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors ${isLight
+                                        ? "bg-slate-100 hover:bg-slate-200 text-slate-600"
+                                        : "bg-white/10 hover:bg-white/15 text-slate-300"
+                                        }`}
                                 >
-                                    Cancel
-                                </button>
-                                <button
-                                    type="button"
-                                    disabled={saving}
-                                    onClick={() => void handleSave()}
-                                    className="h-8 px-3 rounded-lg bg-indigo-500 text-xs font-semibold text-white hover:bg-indigo-600 border border-indigo-400/30 disabled:opacity-60 disabled:cursor-not-allowed"
-                                >
-                                    {saving ? "Saving..." : "Save template"}
+                                    <Plus className="w-5 h-5 rotate-45" />
                                 </button>
                             </div>
-                        </div>
-                    </div>
-                </div>
-            )}
+
+                            <div className="flex-1 overflow-y-auto px-6 py-6 space-y-6">
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div className="space-y-4">
+                                        <div>
+                                            <label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
+                                                }`}>
+                                                Template Name
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={editing.name}
+                                                onChange={(e) =>
+                                                    setEditing((prev) =>
+                                                        prev
+                                                            ? { ...prev, name: e.target.value }
+                                                            : prev,
+                                                    )
+                                                }
+                                                placeholder="e.g. Shipping Update"
+                                                className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                    ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                    : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                    }`}
+                                            />
+                                        </div>
+
+                                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                                            <div>
+                                                <label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
+                                                    }`}>
+                                                    Intent
+                                                </label>
+                                                <select
+                                                    value={editing.intent}
+                                                    onChange={(e) =>
+                                                        setEditing((prev) =>
+                                                            prev
+                                                                ? {
+                                                                    ...prev,
+                                                                    intent: e.target.value,
+                                                                }
+                                                                : prev,
+                                                        )
+                                                    }
+                                                    className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                        ? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
+                                                        : "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
+                                                        }`}
+                                                >
+                                                    {INTENT_OPTIONS.map((opt) => (
+                                                        <option key={opt.value} value={opt.value}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            </div>
+                                            <div>
+                                                <label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
+                                                    }`}>
+                                                    Mood
+                                                </label>
+                                                <select
+                                                    value={editing.mood}
+                                                    onChange={(e) =>
+                                                        setEditing((prev) =>
+                                                            prev
+                                                                ? {
+                                                                    ...prev,
+                                                                    mood: e.target.value,
+                                                                }
+                                                                : prev,
+                                                        )
+                                                    }
+                                                    className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                        ? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
+                                                        : "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
+                                                        }`}
+                                                >
+                                                    {MOOD_OPTIONS.map((opt) => (
+                                                        <option key={opt.value} value={opt.value}>
+                                                            {opt.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            </div>
+                                        </div>
+
+                                        <div>
+                                            <label className={`block text-xs font-bold uppercase tracking-wider mb-2 ${isLight ? "text-slate-500" : "text-slate-400"
+                                                }`}>
+                                                Description (optional)
+                                            </label>
+                                            <input
+                                                type="text"
+                                                value={editing.description || ""}
+                                                onChange={(e) =>
+                                                    setEditing((prev) =>
+                                                        prev
+                                                            ? {
+                                                                ...prev,
+                                                                description: e.target.value,
+                                                            }
+                                                            : prev,
+                                                    )
+                                                }
+                                                placeholder="Short summary for your team"
+                                                className={`w-full h-11 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                    ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                    : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                    }`}
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div className={`p-4 rounded-2xl border ${isLight ? "bg-indigo-50/50 border-indigo-100" : "bg-indigo-500/5 border-indigo-500/10"
+                                        }`}>
+                                        <p className={`text-xs font-bold uppercase tracking-wider mb-3 ${isLight ? "text-indigo-600" : "text-indigo-400"
+                                            }`}>
+                                            Available variables
+                                        </p>
+                                        <div className="grid grid-cols-1 gap-2">
+                                            {[
+                                                { key: "{{customer_name}}", label: "Customer's name" },
+                                                { key: "{{customer_email}}", label: "Customer's email" },
+                                                { key: "{{store_name}}", label: "Store name" },
+                                                { key: "{{ticket_summary}}", label: "Email summary" }
+                                            ].map((v) => (
+                                                <div key={v.key} className="flex items-center justify-between text-[11px]">
+                                                    <code className={`px-2 py-0.5 rounded font-mono font-bold ${isLight ? "bg-white border border-indigo-200 text-indigo-700" : "bg-white/10 text-indigo-300"
+                                                        }`}>
+                                                        {v.key}
+                                                    </code>
+                                                    <span className={isLight ? "text-slate-500" : "text-slate-400"}>{v.label}</span>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="space-y-4">
+                                    <div className="flex items-center justify-between">
+                                        <label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
+                                            }`}>
+                                            Template body
+                                        </label>
+                                        <span className={`text-[10px] ${isLight ? "text-slate-400" : "text-slate-500"}`}>
+                                            Markdown & HTML supported
+                                        </span>
+                                    </div>
+                                    <textarea
+                                        value={editing.body}
+                                        onChange={(e) =>
+                                            setEditing((prev) =>
+                                                prev ? { ...prev, body: e.target.value } : prev,
+                                            )
+                                        }
+                                        rows={8}
+                                        className={`w-full rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 p-4 font-mono text-xs leading-relaxed ${isLight
+                                            ? "bg-slate-50 border border-slate-200 text-slate-900 focus:border-indigo-500"
+                                            : "bg-white/5 border border-white/10 text-white focus:border-indigo-500"
+                                            }`}
+                                    />
+                                </div>
+
+                                <div className="space-y-4">
+                                    <label className={`block text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
+                                        }`}>
+                                        Preview with example data
+                                    </label>
+                                    <div className={`rounded-xl border p-5 text-sm leading-relaxed whitespace-pre-wrap ${isLight
+                                        ? "bg-slate-50 border-slate-200 text-slate-800"
+                                        : "bg-slate-950 border-white/5 text-slate-300 shadow-inner"
+                                        }`}>
+                                        {currentPreview || "Preview will appear here..."}
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div className={`px-6 py-4 border-t flex items-center justify-between ${isLight ? "border-slate-100 bg-slate-50/50" : "border-white/10 bg-white/[0.02]"
+                                }`}>
+                                <p className={`text-[11px] font-medium ${isLight ? "text-slate-500" : "text-slate-500"}`}>
+                                    Autosaved to your draft templates.
+                                </p>
+                                <div className="flex items-center gap-3">
+                                    <button
+                                        type="button"
+                                        onClick={() => setEditing(null)}
+                                        className={`h-10 px-6 rounded-xl font-bold transition-all border ${isLight
+                                            ? "bg-white text-slate-700 hover:bg-slate-50 border-slate-200"
+                                            : "bg-white/10 text-slate-300 hover:bg-white/20 border-white/10"
+                                            }`}
+                                    >
+                                        Cancel
+                                    </button>
+                                    <button
+                                        type="button"
+                                        disabled={saving}
+                                        onClick={() => void handleSave()}
+                                        className="h-10 px-6 bg-indigo-500 text-sm font-bold text-white hover:bg-indigo-600 border border-indigo-400/20 shadow-lg shadow-indigo-500/20 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 rounded-xl"
+                                    >
+                                        {saving ? (
+                                            <>
+                                                <Loader2 className="w-4 h-4 animate-spin" />
+                                                Saving...
+                                            </>
+                                        ) : (
+                                            "Save template"
+                                        )}
+                                    </button>
+                                </div>
+                            </div>
+                        </motion.div>
+                    </div>,
+                    document.body
+                )}
+            </AnimatePresence>
         </div>
     )
 }
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 1fa2286..d91f8d9 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -42,21 +42,23 @@ export default async function DashboardLayout({
             <div className="hidden h-full md:flex md:w-72 md:flex-col md:fixed md:inset-y-0 z-[80] bg-slate-900/70 border-r border-white/10 backdrop-blur-xl">
                 <Sidebar />
             </div>
-            
+
             {/* Main Content Area */}
             <main className="md:pl-72 flex flex-col flex-1 h-full min-w-0">
                 {/* Fixed Header */}
                 <header className="h-16 px-4 md:px-8 border-b border-white/10 bg-slate-900/50 backdrop-blur-xl flex items-center justify-between flex-shrink-0 z-50">
-                    <div className="flex items-center gap-2 md:gap-4 flex-1 min-w-0">
+                    <div className="flex items-center gap-1.5 md:gap-4 flex-1 min-w-0">
                         <MobileSidebar />
-                        <h2 className="hidden sm:block text-xs md:text-sm font-semibold text-slate-400 uppercase tracking-wider">Vendor Portal</h2>
-                        <div className="flex-1 min-w-0">
+                        <h2 className="hidden lg:block text-xs md:text-sm font-semibold text-slate-400 uppercase tracking-wider shrink-0">Vendor Portal</h2>
+                        <div className="flex-1 min-w-0 max-w-[200px] md:max-w-none">
                             <StoreSwitcher />
                         </div>
                     </div>
-                    <div className="flex items-center gap-2 md:gap-4 shrink-0">
+                    <div className="flex items-center gap-1.5 md:gap-4 shrink-0">
                         <ThemeToggle />
-                        <NotificationBell />
+                        <div className="hidden xs:block">
+                            <NotificationBell />
+                        </div>
                         <div className="hidden sm:flex flex-col text-right">
                             <span className="text-xs font-bold text-white truncate max-w-[120px]">
                                 {session.user?.name || "Vendor User"}
diff --git a/src/app/dashboard/orders/page.tsx b/src/app/dashboard/orders/page.tsx
index 0be9dc0..6ec525a 100644
--- a/src/app/dashboard/orders/page.tsx
+++ b/src/app/dashboard/orders/page.tsx
@@ -81,7 +81,7 @@ export default function OrdersPage() {
                 setLoading(false)
             }
         }
-        
+
         // Fetch store info and orders
         fetchStoreInfo()
         fetchOrders()
@@ -147,12 +147,12 @@ export default function OrdersPage() {
             o.financial_status,
             o.fulfillment_status || "unfulfilled"
         ])
-        
+
         const csvContent = [
             csvHeaders.join(","),
             ...csvRows.map(row => row.join(","))
         ].join("\n")
-        
+
         const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" })
         const link = document.createElement("a")
         const url = URL.createObjectURL(blob)
@@ -168,7 +168,7 @@ export default function OrdersPage() {
     const filteredOrders = orders.filter(o => {
         const matchesSearch = o.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
             (o.customer && `${o.customer.first_name} ${o.customer.last_name}`.toLowerCase().includes(searchTerm.toLowerCase()))
-        const matchesStatus = statusFilter === "all" || 
+        const matchesStatus = statusFilter === "all" ||
             (statusFilter === "fulfilled" && o.fulfillment_status === "fulfilled") ||
             (statusFilter === "unfulfilled" && (!o.fulfillment_status || o.fulfillment_status !== "fulfilled")) ||
             (statusFilter === "paid" && o.financial_status === "paid") ||
@@ -195,7 +195,7 @@ export default function OrdersPage() {
                     <button className="h-10 md:h-11 px-3 md:px-6 bg-white/10 border border-white/10 rounded-xl font-bold text-white hover:bg-white/15 backdrop-blur-sm transition-all flex items-center gap-2 text-sm">
                         <Calendar className="w-4 h-4" /> <span className="hidden sm:inline">This Month</span>
                     </button>
-                    <button 
+                    <button
                         onClick={handleExport}
                         className="h-10 md:h-11 px-4 md:px-6 bg-indigo-500 text-white rounded-xl font-bold flex items-center gap-2 hover:bg-indigo-600 border border-indigo-400/20 transition-all text-sm"
                     >
@@ -235,120 +235,119 @@ export default function OrdersPage() {
 
             {/* Orders Grid */}
             <div className="flex-1 overflow-y-auto overflow-x-hidden min-h-0">
-                    {loading ? (
-                        <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-3">
-                            <Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
-                            <p className="font-medium animate-pulse">Fetching latest orders...</p>
+                {loading ? (
+                    <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-3">
+                        <Loader2 className="w-8 h-8 animate-spin text-indigo-400" />
+                        <p className="font-medium animate-pulse">Fetching latest orders...</p>
+                    </div>
+                ) : error ? (
+                    <div className="h-full flex flex-col items-center justify-center text-red-400 gap-4 p-8 text-center">
+                        <div className="w-12 h-12 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center">
+                            <AlertCircle className="w-6 h-6" />
                         </div>
-                    ) : error ? (
-                        <div className="h-full flex flex-col items-center justify-center text-red-400 gap-4 p-8 text-center">
-                            <div className="w-12 h-12 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-center justify-center">
-                                <AlertCircle className="w-6 h-6" />
-                            </div>
-                            <p className="font-bold">{error}</p>
-                        </div>
-                    ) : filteredOrders.length === 0 ? (
-                        <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-3">
-                            <ShoppingCart className="w-10 h-10 opacity-20" />
-                            <p className="font-medium">No orders found.</p>
-                        </div>
-                    ) : (
-                        <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6 h-full content-start">
-                            {filteredOrders.map((order) => (
-                                <div
-                                    key={order.id}
-                                    className="bg-white/5 rounded-xl border border-white/10 p-5 hover:bg-white/10 hover:border-indigo-500/30 transition-all cursor-pointer group relative"
-                                    onClick={() => handleViewDetails(order)}
-                                >
-                                    {/* Order Header */}
-                                    <div className="flex items-start justify-between mb-4">
-                                        <div className="flex items-center gap-3 flex-1 min-w-0">
-                                            <div className="w-10 h-10 rounded-lg bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center text-indigo-400 group-hover:bg-indigo-500/30 transition-all shrink-0">
-                                                <ShoppingBag className="w-5 h-5" />
-                                            </div>
-                                            <div className="flex-1 min-w-0">
-                                                <h3 className="font-black text-base text-white truncate">{order.name}</h3>
-                                                <p className="text-xs text-slate-400 mt-0.5">
-                                                    {new Date(order.created_at).toLocaleDateString()} • {new Date(order.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
-                                                </p>
-                                            </div>
+                        <p className="font-bold">{error}</p>
+                    </div>
+                ) : filteredOrders.length === 0 ? (
+                    <div className="h-full flex flex-col items-center justify-center text-slate-400 gap-3">
+                        <ShoppingCart className="w-10 h-10 opacity-20" />
+                        <p className="font-medium">No orders found.</p>
+                    </div>
+                ) : (
+                    <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 md:gap-6 h-full content-start">
+                        {filteredOrders.map((order) => (
+                            <div
+                                key={order.id}
+                                className="bg-white/5 rounded-xl border border-white/10 p-5 hover:bg-white/10 hover:border-indigo-500/30 transition-all cursor-pointer group relative"
+                                onClick={() => handleViewDetails(order)}
+                            >
+                                {/* Order Header */}
+                                <div className="flex items-start justify-between mb-4">
+                                    <div className="flex items-center gap-3 flex-1 min-w-0">
+                                        <div className="w-10 h-10 rounded-lg bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center text-indigo-400 group-hover:bg-indigo-500/30 transition-all shrink-0">
+                                            <ShoppingBag className="w-5 h-5" />
                                         </div>
-                                        <div className="relative shrink-0" onClick={(e) => e.stopPropagation()} ref={(el) => { menuRefs.current[order.id] = el }}>
-                                            <button 
-                                                onClick={() => handleMenuToggle(order.id)}
-                                                className="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-indigo-400 transition-all"
-                                            >
-                                                <MoreHorizontal className="w-4 h-4" />
-                                            </button>
-                                            {openMenuId === order.id && (
-                                                <div className="absolute right-0 top-full mt-1 bg-white/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-xl overflow-hidden z-[200] min-w-[180px] whitespace-nowrap">
-                                                    <button
-                                                        onClick={() => handleViewDetails(order)}
-                                                        className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
-                                                    >
-                                                        <Eye className="w-4 h-4" />
-                                                        Details
-                                                    </button>
-                                                    <button
-                                                        onClick={() => handleViewInShopify(order.id)}
-                                                        className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
-                                                    >
-                                                        <ExternalLink className="w-4 h-4" />
-                                                        Show on Shopify
-                                                    </button>
-                                                    <button
-                                                        onClick={() => handleCopyOrderId(order.id)}
-                                                        className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
-                                                    >
-                                                        <Copy className="w-4 h-4" />
-                                                        Copy Order ID
-                                                    </button>
-                                                </div>
-                                            )}
+                                        <div className="flex-1 min-w-0">
+                                            <h3 className="font-black text-base text-white truncate">{order.name}</h3>
+                                            <p className="text-xs text-slate-400 mt-0.5">
+                                                {new Date(order.created_at).toLocaleDateString()} • {new Date(order.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
+                                            </p>
                                         </div>
                                     </div>
-
-                                    {/* Customer Info */}
-                                    {order.customer && (
-                                        <div className="flex items-center gap-2 mb-4">
-                                            <div className="w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0">
-                                                <User className="w-3.5 h-3.5 text-slate-400" />
+                                    <div className="relative shrink-0" onClick={(e) => e.stopPropagation()} ref={(el) => { menuRefs.current[order.id] = el }}>
+                                        <button
+                                            onClick={() => handleMenuToggle(order.id)}
+                                            className="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-indigo-400 transition-all"
+                                        >
+                                            <MoreHorizontal className="w-4 h-4" />
+                                        </button>
+                                        {openMenuId === order.id && (
+                                            <div className="absolute right-0 top-full mt-1 bg-slate-800/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-xl overflow-hidden z-[200] min-w-[180px] whitespace-nowrap">
+                                                <button
+                                                    onClick={() => handleViewDetails(order)}
+                                                    className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-200 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
+                                                >
+                                                    <Eye className="w-4 h-4" />
+                                                    Details
+                                                </button>
+                                                <button
+                                                    onClick={() => handleViewInShopify(order.id)}
+                                                    className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-200 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
+                                                >
+                                                    <ExternalLink className="w-4 h-4" />
+                                                    Show on Shopify
+                                                </button>
+                                                <button
+                                                    onClick={() => handleCopyOrderId(order.id)}
+                                                    className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-200 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
+                                                >
+                                                    <Copy className="w-4 h-4" />
+                                                    Copy Order ID
+                                                </button>
                                             </div>
-                                            <div className="flex-1 min-w-0">
-                                                <p className="text-sm font-bold text-white truncate">
-                                                    {order.customer.first_name} {order.customer.last_name}
-                                                </p>
-                                                <p className="text-xs text-slate-400 truncate">{order.email}</p>
-                                            </div>
-                                        </div>
-                                    )}
-
-                                    {/* Order Details */}
-                                    <div className="space-y-3">
-                                        <div className="flex items-center justify-between">
-                                            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total</span>
-                                            <span className="text-lg font-black text-white">{order.total_price} {order.currency}</span>
-                                        </div>
-                                        
-                                        <div className="flex items-center gap-2 flex-wrap">
-                                            <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${
-                                                order.financial_status === "paid" 
-                                                    ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30" 
-                                                    : "bg-red-500/20 text-red-400 border border-red-500/30"
-                                            }`}>
-                                                {order.financial_status === "paid" && <CheckCircle2 className="w-3 h-3" />}
-                                                Payment: {order.financial_status}
-                                            </span>
-                                            <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${getStatusStyles(order.fulfillment_status)}`}>
-                                                {order.fulfillment_status === "fulfilled" ? <CheckCircle2 className="w-3 h-3" /> : <Clock className="w-3 h-3" />}
-                                                {order.fulfillment_status || "Unfulfilled"}
-                                            </span>
-                                        </div>
+                                        )}
                                     </div>
                                 </div>
-                            ))}
-                        </div>
-                    )}
+
+                                {/* Customer Info */}
+                                {order.customer && (
+                                    <div className="flex items-center gap-2 mb-4">
+                                        <div className="w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0">
+                                            <User className="w-3.5 h-3.5 text-slate-400" />
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <p className="text-sm font-bold text-white truncate">
+                                                {order.customer.first_name} {order.customer.last_name}
+                                            </p>
+                                            <p className="text-xs text-slate-400 truncate">{order.email}</p>
+                                        </div>
+                                    </div>
+                                )}
+
+                                {/* Order Details */}
+                                <div className="space-y-3">
+                                    <div className="flex items-center justify-between">
+                                        <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total</span>
+                                        <span className="text-lg font-black text-white">{order.total_price} {order.currency}</span>
+                                    </div>
+
+                                    <div className="flex items-center gap-2 flex-wrap">
+                                        <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${order.financial_status === "paid"
+                                                ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+                                                : "bg-red-500/20 text-red-400 border border-red-500/30"
+                                            }`}>
+                                            {order.financial_status === "paid" && <CheckCircle2 className="w-3 h-3" />}
+                                            Payment: {order.financial_status}
+                                        </span>
+                                        <span className={`px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${getStatusStyles(order.fulfillment_status)}`}>
+                                            {order.fulfillment_status === "fulfilled" ? <CheckCircle2 className="w-3 h-3" /> : <Clock className="w-3 h-3" />}
+                                            {order.fulfillment_status || "Unfulfilled"}
+                                        </span>
+                                    </div>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
             </div>
         </div>
     )
diff --git a/src/app/dashboard/settings/security/page.tsx b/src/app/dashboard/settings/security/page.tsx
index 617d11e..0cb6066 100644
--- a/src/app/dashboard/settings/security/page.tsx
+++ b/src/app/dashboard/settings/security/page.tsx
@@ -218,7 +218,7 @@ export default function SecuritySettingsPage() {
 
             {/* MFA Section */}
             <div className="bg-white/5 rounded-xl p-6 border border-white/10">
-                <div className="flex items-start justify-between mb-4">
+                <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4">
                     <div className="flex-1">
                         <div className="flex items-center gap-3 mb-2">
                             <Shield className="w-5 h-5 text-indigo-400" />
@@ -232,7 +232,7 @@ export default function SecuritySettingsPage() {
                         <button
                             onClick={handleDisableMFA}
                             disabled={mfaLoading}
-                            className="px-4 py-2 rounded-lg font-bold text-sm transition-colors flex items-center gap-2 bg-red-500/20 text-red-400 border border-red-500/30 hover:bg-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="w-full sm:w-auto px-4 py-2 rounded-lg font-bold text-sm transition-colors flex items-center justify-center gap-2 bg-red-500/20 text-red-400 border border-red-500/30 hover:bg-red-500/30 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             {mfaLoading ? (
                                 <>
@@ -247,7 +247,7 @@ export default function SecuritySettingsPage() {
                         <button
                             onClick={handleSetupMFA}
                             disabled={setupLoading || showSetup}
-                            className="px-4 py-2 rounded-lg font-bold text-sm transition-colors flex items-center gap-2 bg-indigo-500 text-white hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                            className="w-full sm:w-auto px-4 py-2 rounded-lg font-bold text-sm transition-colors flex items-center justify-center gap-2 bg-indigo-500 text-white hover:bg-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed"
                         >
                             {setupLoading ? (
                                 <>
diff --git a/src/app/dashboard/stores/page.tsx b/src/app/dashboard/stores/page.tsx
index 332f3f1..1aca9b6 100644
--- a/src/app/dashboard/stores/page.tsx
+++ b/src/app/dashboard/stores/page.tsx
@@ -20,6 +20,12 @@ export default function StoresPage() {
     const [error, setError] = useState("")
     const [switching, setSwitching] = useState<string | null>(null)
     const [isAddModalOpen, setIsAddModalOpen] = useState(false)
+    /*
+     * Alignment Fix Details:
+     * - Use React `createPortal` to render the modal backdrop and content at the end of `document.body`.
+     * - This ensures `fixed inset-0` is always relative to the viewport, bypassing any parent `transform` styles (like in `PageTransition`) that create new containing blocks.
+     * - Verify that the `fixed inset-0` flex container correctly centers its child vertically and horizontally.
+     */
     const [deleteModal, setDeleteModal] = useState<{ isOpen: boolean; storeId: string | null; storeName: string; isActive: boolean }>({
         isOpen: false,
         storeId: null,
@@ -103,10 +109,10 @@ export default function StoresPage() {
 
             // Refresh stores list
             await fetchStores()
-            
+
             // Notify StoreSwitcher to refresh
             window.dispatchEvent(new CustomEvent("storeUpdated"))
-            
+
             // If deleted store was active, reload page to refresh dashboard data
             if (deleteModal.isActive) {
                 window.location.reload()
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 25931
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
LrJugUA?W`A8`#=m

diff --git a/src/app/globals.css b/src/app/globals.css
index 2d810c9..a3ae34a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -179,13 +179,19 @@ html {
   will-change: auto;
 }
 
-/* Smooth transitions for all interactive elements */
-* {
+/* Smooth transitions for interactive elements */
+a, button, input, select, textarea, [role="button"], [tabindex] {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
 
+/* Fix select dropdown option readability across themes */
+select option {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
 /* Optimize performance for animations */
 button, a, input, select, textarea {
   will-change: transform;
diff --git a/src/app/icon.svg b/src/app/icon.svg
new file mode 100644
index 0000000..80da7cd
--- /dev/null
+++ b/src/app/icon.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="#4F46E5"/>
+  <path d="M16 6L10 18H14L12 26L22 14H18L20 6H16Z" fill="white"/>
+</svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9c432d7..fbc6768 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,10 +15,6 @@ const geistMono = Geist_Mono({
 export const metadata: Metadata = {
   title: "JUNOHUB",
   description: "JUNOHUB - Your dropshipping and e-commerce management platform",
-  icons: {
-    icon: "/icon.svg",
-    apple: "/icon.svg",
-  },
 };
 
 export const viewport = {
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 4d4565e..ac8131c 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -205,25 +205,26 @@ export default function SignupPage() {
                             Log in here
                         </Link>
                     </p>
+
+                    <div className="mt-8 pt-6 border-t border-white/10 flex flex-col items-center gap-1 text-[9px] text-slate-500 font-semibold uppercase tracking-widest">
+                        <div className="flex items-center gap-4">
+                            <Link
+                                href="/privacy-policy"
+                                className="hover:text-indigo-300 underline-offset-4 hover:underline normal-case"
+                            >
+                                Privacy Policy
+                            </Link>
+                            <span className="text-slate-600">•</span>
+                            <Link
+                                href="/terms-of-service"
+                                className="hover:text-indigo-300 underline-offset-4 hover:underline normal-case"
+                            >
+                                Terms of Service
+                            </Link>
+                        </div>
+                    </div>
                 </div>
             </motion.div>
-            <div className="mt-6 flex flex-col items-center gap-1 text-[9px] text-slate-500 font-semibold uppercase tracking-widest">
-                <div className="flex items-center gap-4">
-                    <Link
-                        href="/privacy-policy"
-                        className="hover:text-indigo-300 underline-offset-4 hover:underline normal-case"
-                    >
-                        Privacy Policy
-                    </Link>
-                    <span className="text-slate-600">•</span>
-                    <Link
-                        href="/terms-of-service"
-                        className="hover:text-indigo-300 underline-offset-4 hover:underline normal-case"
-                    >
-                        Terms of Service
-                    </Link>
-                </div>
-            </div>
         </div>
     )
 }
diff --git a/src/components/AddStoreModal.tsx b/src/components/AddStoreModal.tsx
index 176cc02..65ea0d2 100644
--- a/src/components/AddStoreModal.tsx
+++ b/src/components/AddStoreModal.tsx
@@ -1,6 +1,7 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
+import { createPortal } from "react-dom"
 import { motion, AnimatePresence } from "framer-motion"
 import {
     X,
@@ -11,6 +12,7 @@ import {
     Cloud,
     CheckCircle2
 } from "lucide-react"
+import { useTheme } from "@/components/ThemeProvider"
 
 interface AddStoreModalProps {
     isOpen: boolean
@@ -23,6 +25,13 @@ export default function AddStoreModal({ isOpen, onClose, onSuccess }: AddStoreMo
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState("")
     const [success, setSuccess] = useState(false)
+    const [mounted, setMounted] = useState(false)
+    const { theme } = useTheme()
+    const isLight = theme === "light"
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
 
     const [formData, setFormData] = useState({
         businessName: "",
@@ -133,271 +142,315 @@ export default function AddStoreModal({ isOpen, onClose, onSuccess }: AddStoreMo
         }
     }
 
-    return (
+    if (!mounted) return null
+
+    return createPortal(
         <AnimatePresence>
             {isOpen && (
-                <>
+                <div className="fixed inset-0 z-[100] flex items-center justify-center pointer-events-none">
                     {/* Backdrop */}
                     <motion.div
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
                         onClick={handleClose}
-                        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50"
+                        className="absolute inset-0 bg-black/60 backdrop-blur-sm pointer-events-auto"
                     />
 
                     {/* Modal */}
-                    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
-                        <motion.div
-                            initial={{ scale: 0.95, opacity: 0 }}
-                            animate={{ scale: 1, opacity: 1 }}
-                            exit={{ scale: 0.95, opacity: 0 }}
-                            className="bg-slate-900/95 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden pointer-events-auto flex flex-col"
-                        >
-                            {/* Header */}
-                            <div className="flex items-center justify-between p-6 border-b border-white/10">
-                                <div>
-                                    <h2 className="text-2xl font-bold text-white">Add New Store</h2>
-                                    <p className="text-sm text-slate-400 mt-1">Connect a Shopify store to your account</p>
-                                </div>
-                                <button
-                                    onClick={handleClose}
-                                    disabled={loading || success}
-                                    className="w-10 h-10 rounded-xl bg-white/10 hover:bg-white/15 flex items-center justify-center transition-colors disabled:opacity-50 text-slate-300"
-                                >
-                                    <X className="w-5 h-5" />
-                                </button>
+                    <motion.div
+                        initial={{ scale: 0.95, opacity: 0, y: 20 }}
+                        animate={{ scale: 1, opacity: 1, y: 0 }}
+                        exit={{ scale: 0.95, opacity: 0, y: 20 }}
+                        className={`relative rounded-2xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden pointer-events-auto flex flex-col mx-4 ${isLight
+                                ? "bg-white border border-slate-200"
+                                : "bg-slate-900 border border-white/10"
+                            }`}
+                    >
+                        {/* Header */}
+                        <div className={`flex items-center justify-between p-6 border-b ${isLight ? "border-slate-100" : "border-white/10"
+                            }`}>
+                            <div>
+                                <h2 className={`text-2xl font-bold ${isLight ? "text-slate-900" : "text-white"}`}>Add New Store</h2>
+                                <p className={`text-sm mt-1 ${isLight ? "text-slate-500" : "text-slate-400"}`}>Connect a Shopify store to your account</p>
                             </div>
+                            <button
+                                onClick={handleClose}
+                                disabled={loading || success}
+                                className={`w-10 h-10 rounded-xl flex items-center justify-center transition-colors disabled:opacity-50 ${isLight
+                                        ? "bg-slate-100 hover:bg-slate-200 text-slate-600"
+                                        : "bg-white/10 hover:bg-white/15 text-slate-300"
+                                    }`}
+                            >
+                                <X className="w-5 h-5" />
+                            </button>
+                        </div>
 
-                            {/* Progress Bar */}
-                            <div className="px-6 pt-6">
-                                <div className="flex justify-between text-[10px] font-bold text-slate-500 mb-2 uppercase tracking-wider">
-                                    <span className={step >= 1 ? "text-indigo-400" : ""}>Store Details</span>
-                                    <span className={step >= 2 ? "text-indigo-400" : ""}>API Credentials</span>
-                                    <span className={step >= 3 ? "text-indigo-400" : ""}>Complete</span>
-                                </div>
-                                <div className="h-1.5 bg-white/10 rounded-full overflow-hidden">
-                                    <motion.div
-                                        initial={{ width: "0%" }}
-                                        animate={{ width: `${(step / 3) * 100}%` }}
-                                        className="h-full bg-indigo-500 transition-all duration-500"
-                                    />
-                                </div>
+                        {/* Progress Bar */}
+                        <div className="px-6 pt-6">
+                            <div className="flex justify-between text-[10px] font-bold text-slate-500 mb-2 uppercase tracking-wider">
+                                <span className={step >= 1 ? "text-indigo-500" : ""}>Store Details</span>
+                                <span className={step >= 2 ? "text-indigo-500" : ""}>API Credentials</span>
+                                <span className={step >= 3 ? "text-indigo-500" : ""}>Complete</span>
                             </div>
+                            <div className={`h-1.5 rounded-full overflow-hidden ${isLight ? "bg-slate-100" : "bg-white/10"
+                                }`}>
+                                <motion.div
+                                    initial={{ width: "0%" }}
+                                    animate={{ width: `${(step / 3) * 100}%` }}
+                                    className="h-full bg-indigo-500 transition-all duration-500"
+                                />
+                            </div>
+                        </div>
 
-                            {/* Content */}
-                            <div className="flex-1 overflow-y-auto p-6">
-                                <AnimatePresence mode="wait">
-                                    {success ? (
-                                        <motion.div
-                                            key="success"
-                                            initial={{ scale: 0.9, opacity: 0 }}
-                                            animate={{ scale: 1, opacity: 1 }}
-                                            className="flex flex-col items-center justify-center py-12 text-center"
-                                        >
-                                            <div className="w-16 h-16 rounded-full bg-emerald-500/20 border border-emerald-400/30 flex items-center justify-center mb-4">
-                                                <CheckCircle2 className="w-8 h-8 text-emerald-400" />
-                                            </div>
-                                            <h3 className="text-xl font-bold text-white mb-2">Store Added Successfully!</h3>
-                                            <p className="text-slate-400">Your store has been connected and is ready to use.</p>
-                                        </motion.div>
-                                    ) : step === 1 ? (
-                                        <motion.div
-                                            key="step1"
-                                            initial={{ x: 20, opacity: 0 }}
-                                            animate={{ x: 0, opacity: 1 }}
-                                            exit={{ x: -20, opacity: 0 }}
-                                            className="space-y-6"
-                                        >
-                                            <div className="flex items-center gap-4">
-                                                <div className="w-12 h-12 rounded-xl bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center">
-                                                    <Globe className="w-6 h-6 text-indigo-400" />
-                                                </div>
-                                                <div>
-                                                    <h3 className="text-lg font-bold text-white">Store Information</h3>
-                                                    <p className="text-sm text-slate-400">Enter your store details</p>
-                                                </div>
-                                            </div>
-
-                                            <div className="space-y-4">
-                                                <div>
-                                                    <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                        Business Name <span className="text-red-400">*</span>
-                                                    </label>
-                                                    <input
-                                                        name="businessName"
-                                                        value={formData.businessName}
-                                                        onChange={handleInputChange}
-                                                        placeholder="e.g. My Store"
-                                                        className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                    />
-                                                </div>
-                                                <div className="grid grid-cols-2 gap-4">
-                                                    <div>
-                                                        <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                            Shopify Store Name <span className="text-red-400">*</span>
-                                                        </label>
-                                                        <input
-                                                            name="storeName"
-                                                            value={formData.storeName}
-                                                            onChange={handleInputChange}
-                                                            placeholder="my-store"
-                                                            className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                        />
-                                                    </div>
-                                                    <div>
-                                                        <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                            Domain <span className="text-red-400">*</span>
-                                                        </label>
-                                                        <input
-                                                            name="domain"
-                                                            value={formData.domain}
-                                                            onChange={handleInputChange}
-                                                            placeholder="my-store.myshopify.com"
-                                                            className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                        />
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </motion.div>
-                                    ) : step === 2 ? (
-                                        <motion.div
-                                            key="step2"
-                                            initial={{ x: 20, opacity: 0 }}
-                                            animate={{ x: 0, opacity: 1 }}
-                                            exit={{ x: -20, opacity: 0 }}
-                                            className="space-y-6"
-                                        >
-                                            <div className="flex items-center gap-4">
-                                                <div className="w-12 h-12 rounded-xl bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center">
-                                                    <Key className="w-6 h-6 text-indigo-400" />
-                                                </div>
-                                                <div>
-                                                    <h3 className="text-lg font-bold text-white">API Credentials</h3>
-                                                    <p className="text-sm text-slate-400">Provide your Shopify Admin API credentials</p>
-                                                </div>
-                                            </div>
-
-                                            <div className="space-y-4">
-                                                <div>
-                                                    <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                        Admin API Key <span className="text-red-400">*</span>
-                                                    </label>
-                                                    <input
-                                                        name="apiKey"
-                                                        type="password"
-                                                        value={formData.apiKey}
-                                                        onChange={handleInputChange}
-                                                        placeholder="Enter API Key"
-                                                        className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                    />
-                                                </div>
-                                                <div>
-                                                    <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                        Admin API Secret <span className="text-red-400">*</span>
-                                                    </label>
-                                                    <input
-                                                        name="apiSecret"
-                                                        type="password"
-                                                        value={formData.apiSecret}
-                                                        onChange={handleInputChange}
-                                                        placeholder="Enter API Secret"
-                                                        className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                    />
-                                                </div>
-                                                <div>
-                                                    <label className="block text-sm font-bold text-slate-300 mb-2">
-                                                        Access Token <span className="text-red-400">*</span>
-                                                    </label>
-                                                    <input
-                                                        name="accessToken"
-                                                        type="password"
-                                                        value={formData.accessToken}
-                                                        onChange={handleInputChange}
-                                                        placeholder="shpat_..."
-                                                        className="w-full h-12 px-4 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-slate-500 focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 transition-all"
-                                                    />
-                                                </div>
-                                            </div>
-                                        </motion.div>
-                                    ) : (
-                                        <motion.div
-                                            key="step3"
-                                            initial={{ x: 20, opacity: 0 }}
-                                            animate={{ x: 0, opacity: 1 }}
-                                            exit={{ x: -20, opacity: 0 }}
-                                            className="flex flex-col items-center justify-center py-8 text-center"
-                                        >
-                                            <div className="w-16 h-16 rounded-full bg-indigo-500/20 border border-indigo-400/20 flex items-center justify-center mb-4 relative">
-                                                <Cloud className={`w-8 h-8 ${loading ? "text-indigo-400 animate-pulse" : "text-indigo-400"}`} />
-                                                {loading && (
-                                                    <motion.div
-                                                        animate={{ rotate: 360 }}
-                                                        transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
-                                                        className="absolute inset-0 border-2 border-indigo-500 border-t-transparent rounded-full"
-                                                    />
-                                                )}
-                                            </div>
-                                            <h3 className="text-lg font-bold text-white mb-2">Connecting Store</h3>
-                                            <p className="text-sm text-slate-400 max-w-sm">
-                                                We&apos;re connecting your store and setting up the integration...
-                                            </p>
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-
-                                {error && (
+                        {/* Content */}
+                        <div className="flex-1 overflow-y-auto p-6">
+                            <AnimatePresence mode="wait">
+                                {success ? (
                                     <motion.div
-                                        initial={{ opacity: 0, y: -10 }}
-                                        animate={{ opacity: 1, y: 0 }}
-                                        className="mt-4 p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex items-start gap-3"
+                                        key="success"
+                                        initial={{ scale: 0.9, opacity: 0 }}
+                                        animate={{ scale: 1, opacity: 1 }}
+                                        className="flex flex-col items-center justify-center py-12 text-center"
                                     >
-                                        <AlertCircle className="w-5 h-5 text-red-400 shrink-0 mt-0.5" />
-                                        <p className="text-sm text-red-400">{error}</p>
+                                        <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-4 ${isLight
+                                                ? "bg-emerald-100 border border-emerald-200"
+                                                : "bg-emerald-500/20 border border-emerald-400/30"
+                                            }`}>
+                                            <CheckCircle2 className={`w-8 h-8 ${isLight ? "text-emerald-600" : "text-emerald-400"}`} />
+                                        </div>
+                                        <h3 className={`text-xl font-bold mb-2 ${isLight ? "text-slate-900" : "text-white"}`}>Store Added Successfully!</h3>
+                                        <p className={`${isLight ? "text-slate-600" : "text-slate-400"}`}>Your store has been connected and is ready to use.</p>
+                                    </motion.div>
+                                ) : step === 1 ? (
+                                    <motion.div
+                                        key="step1"
+                                        initial={{ x: 20, opacity: 0 }}
+                                        animate={{ x: 0, opacity: 1 }}
+                                        exit={{ x: -20, opacity: 0 }}
+                                        className="space-y-6"
+                                    >
+                                        <div className="flex items-center gap-4">
+                                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isLight
+                                                    ? "bg-indigo-50 border border-indigo-100"
+                                                    : "bg-indigo-500/20 border border-indigo-400/20"
+                                                }`}>
+                                                <Globe className="w-6 h-6 text-indigo-500" />
+                                            </div>
+                                            <div>
+                                                <h3 className={`text-lg font-bold ${isLight ? "text-slate-900" : "text-white"}`}>Store Information</h3>
+                                                <p className={`text-sm ${isLight ? "text-slate-500" : "text-slate-400"}`}>Enter your store details</p>
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-4">
+                                            <div>
+                                                <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                    Business Name <span className="text-red-500">*</span>
+                                                </label>
+                                                <input
+                                                    name="businessName"
+                                                    value={formData.businessName}
+                                                    onChange={handleInputChange}
+                                                    placeholder="e.g. My Store"
+                                                    className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                            ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                            : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                        }`}
+                                                />
+                                            </div>
+                                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                                <div>
+                                                    <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                        Shopify Store Name <span className="text-red-500">*</span>
+                                                    </label>
+                                                    <input
+                                                        name="storeName"
+                                                        value={formData.storeName}
+                                                        onChange={handleInputChange}
+                                                        placeholder="my-store"
+                                                        className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                                ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                                : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                            }`}
+                                                    />
+                                                </div>
+                                                <div>
+                                                    <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                        Domain <span className="text-red-500">*</span>
+                                                    </label>
+                                                    <input
+                                                        name="domain"
+                                                        value={formData.domain}
+                                                        onChange={handleInputChange}
+                                                        placeholder="my-store.myshopify.com"
+                                                        className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                                ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                                : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                            }`}
+                                                    />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </motion.div>
+                                ) : step === 2 ? (
+                                    <motion.div
+                                        key="step2"
+                                        initial={{ x: 20, opacity: 0 }}
+                                        animate={{ x: 0, opacity: 1 }}
+                                        exit={{ x: -20, opacity: 0 }}
+                                        className="space-y-6"
+                                    >
+                                        <div className="flex items-center gap-4">
+                                            <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isLight
+                                                    ? "bg-indigo-50 border border-indigo-100"
+                                                    : "bg-indigo-500/20 border border-indigo-400/20"
+                                                }`}>
+                                                <Key className="w-6 h-6 text-indigo-500" />
+                                            </div>
+                                            <div>
+                                                <h3 className={`text-lg font-bold ${isLight ? "text-slate-900" : "text-white"}`}>API Credentials</h3>
+                                                <p className={`text-sm ${isLight ? "text-slate-500" : "text-slate-400"}`}>Provide your Shopify Admin API credentials</p>
+                                            </div>
+                                        </div>
+
+                                        <div className="space-y-4">
+                                            <div>
+                                                <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                    Admin API Key <span className="text-red-500">*</span>
+                                                </label>
+                                                <input
+                                                    name="apiKey"
+                                                    type="password"
+                                                    value={formData.apiKey}
+                                                    onChange={handleInputChange}
+                                                    placeholder="Enter API Key"
+                                                    className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                            ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                            : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                        }`}
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                    Admin API Secret <span className="text-red-500">*</span>
+                                                </label>
+                                                <input
+                                                    name="apiSecret"
+                                                    type="password"
+                                                    value={formData.apiSecret}
+                                                    onChange={handleInputChange}
+                                                    placeholder="Enter API Secret"
+                                                    className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                            ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                            : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                        }`}
+                                                />
+                                            </div>
+                                            <div>
+                                                <label className={`block text-sm font-bold mb-2 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                                    Access Token <span className="text-red-500">*</span>
+                                                </label>
+                                                <input
+                                                    name="accessToken"
+                                                    type="password"
+                                                    value={formData.accessToken}
+                                                    onChange={handleInputChange}
+                                                    placeholder="shpat_..."
+                                                    className={`w-full h-12 px-4 rounded-xl transition-all focus:outline-none focus:ring-2 focus:ring-indigo-500/30 ${isLight
+                                                            ? "bg-slate-50 border border-slate-200 text-slate-900 placeholder:text-slate-400 focus:border-indigo-500"
+                                                            : "bg-white/5 border border-white/10 text-white placeholder:text-slate-500 focus:border-indigo-500"
+                                                        }`}
+                                                />
+                                            </div>
+                                        </div>
+                                    </motion.div>
+                                ) : (
+                                    <motion.div
+                                        key="step3"
+                                        initial={{ x: 20, opacity: 0 }}
+                                        animate={{ x: 0, opacity: 1 }}
+                                        exit={{ x: -20, opacity: 0 }}
+                                        className="flex flex-col items-center justify-center py-8 text-center"
+                                    >
+                                        <div className={`w-16 h-16 rounded-full flex items-center justify-center mb-4 relative ${isLight ? "bg-indigo-50 border border-indigo-100" : "bg-indigo-500/20 border border-indigo-400/20"
+                                            }`}>
+                                            <Cloud className={`w-8 h-8 ${loading ? "text-indigo-500 animate-pulse" : "text-indigo-500"}`} />
+                                            {loading && (
+                                                <motion.div
+                                                    animate={{ rotate: 360 }}
+                                                    transition={{ repeat: Infinity, duration: 2, ease: "linear" }}
+                                                    className="absolute inset-0 border-2 border-indigo-500 border-t-transparent rounded-full"
+                                                />
+                                            )}
+                                        </div>
+                                        <h3 className={`text-lg font-bold mb-2 ${isLight ? "text-slate-900" : "text-white"}`}>Connecting Store</h3>
+                                        <p className={`text-sm max-w-sm ${isLight ? "text-slate-500" : "text-slate-400"}`}>
+                                            We&apos;re connecting your store and setting up the integration...
+                                        </p>
                                     </motion.div>
                                 )}
-                            </div>
+                            </AnimatePresence>
 
-                            {/* Footer */}
-                            {!success && (
-                                <div className="p-6 border-t border-white/10 flex items-center justify-between gap-4">
-                                    <button
-                                        onClick={prevStep}
-                                        disabled={step === 1 || loading}
-                                        className="h-11 px-6 bg-white/10 text-slate-300 rounded-xl font-bold hover:bg-white/15 border border-white/10 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-                                    >
-                                        Back
-                                    </button>
-                                    {step < 3 ? (
-                                        <button
-                                            onClick={nextStep}
-                                            disabled={loading}
-                                            className="h-11 px-6 bg-indigo-500 text-white rounded-xl font-bold hover:bg-indigo-600 border border-indigo-400/20 transition-all disabled:opacity-50 flex items-center gap-2 ml-auto"
-                                        >
-                                            Continue
-                                        </button>
-                                    ) : (
-                                        <button
-                                            onClick={handleSubmit}
-                                            disabled={loading}
-                                            className="h-11 px-6 bg-indigo-500 text-white rounded-xl font-bold hover:bg-indigo-600 border border-indigo-400/20 transition-all disabled:opacity-50 flex items-center gap-2 ml-auto"
-                                        >
-                                            {loading ? (
-                                                <>
-                                                    <Loader2 className="w-4 h-4 animate-spin" />
-                                                    Connecting...
-                                                </>
-                                            ) : (
-                                                "Connect Store"
-                                            )}
-                                        </button>
-                                    )}
-                                </div>
+                            {error && (
+                                <motion.div
+                                    initial={{ opacity: 0, y: -10 }}
+                                    animate={{ opacity: 1, y: 0 }}
+                                    className={`mt-4 p-4 rounded-xl flex items-start gap-3 ${isLight
+                                            ? "bg-red-50 border border-red-100"
+                                            : "bg-red-500/10 border border-red-500/20"
+                                        }`}
+                                >
+                                    <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+                                    <p className={`text-sm ${isLight ? "text-red-700" : "text-red-400"}`}>{error}</p>
+                                </motion.div>
                             )}
-                        </motion.div>
-                    </div>
-                </>
+                        </div>
+
+                        {/* Footer */}
+                        {!success && (
+                            <div className={`p-6 border-t flex items-center justify-between gap-4 ${isLight ? "border-slate-100" : "border-white/10"
+                                }`}>
+                                <button
+                                    onClick={prevStep}
+                                    disabled={step === 1 || loading}
+                                    className={`h-11 px-6 rounded-xl font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed border ${isLight
+                                            ? "bg-white text-slate-700 hover:bg-slate-50 border-slate-200"
+                                            : "bg-white/10 text-slate-300 hover:bg-white/15 border-white/10"
+                                        }`}
+                                >
+                                    Back
+                                </button>
+                                {step < 3 ? (
+                                    <button
+                                        onClick={nextStep}
+                                        disabled={loading}
+                                        className="h-11 px-6 bg-indigo-500 text-white rounded-xl font-bold hover:bg-indigo-600 border border-indigo-400/20 transition-all disabled:opacity-50 flex items-center gap-2 ml-auto"
+                                    >
+                                        Continue
+                                    </button>
+                                ) : (
+                                    <button
+                                        onClick={handleSubmit}
+                                        disabled={loading}
+                                        className="h-11 px-6 bg-indigo-500 text-white rounded-xl font-bold hover:bg-indigo-600 border border-indigo-400/20 transition-all disabled:opacity-50 flex items-center gap-2 ml-auto"
+                                    >
+                                        {loading ? (
+                                            <>
+                                                <Loader2 className="w-4 h-4 animate-spin" />
+                                                Connecting...
+                                            </>
+                                        ) : (
+                                            "Connect Store"
+                                        )}
+                                    </button>
+                                )}
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
             )}
-        </AnimatePresence>
+        </AnimatePresence>,
+        document.body
     )
 }
diff --git a/src/components/DeleteStoreModal.tsx b/src/components/DeleteStoreModal.tsx
index 8e387c1..893cc01 100644
--- a/src/components/DeleteStoreModal.tsx
+++ b/src/components/DeleteStoreModal.tsx
@@ -3,6 +3,7 @@
 import { useState } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { X, AlertTriangle, Loader2, Trash2 } from "lucide-react"
+import { useTheme } from "@/components/ThemeProvider"
 
 interface DeleteStoreModalProps {
     isOpen: boolean
@@ -21,6 +22,8 @@ export default function DeleteStoreModal({
 }: DeleteStoreModalProps) {
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState("")
+    const { theme } = useTheme()
+    const isLight = theme === "light"
 
     const handleDelete = async () => {
         setLoading(true)
@@ -55,26 +58,33 @@ export default function DeleteStoreModal({
                             initial={{ scale: 0.95, opacity: 0 }}
                             animate={{ scale: 1, opacity: 1 }}
                             exit={{ scale: 0.95, opacity: 0 }}
-                            className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden pointer-events-auto"
+                            className={`rounded-2xl shadow-2xl w-full max-w-md overflow-hidden pointer-events-auto ${isLight
+                                    ? "bg-white"
+                                    : "bg-slate-900/95 backdrop-blur-xl border border-white/10"
+                                }`}
                         >
                             {/* Header */}
-                            <div className="p-6 border-b border-slate-100">
+                            <div className={`p-6 border-b ${isLight ? "border-slate-100" : "border-white/10"}`}>
                                 <div className="flex items-center justify-between">
                                     <div className="flex items-center gap-3">
-                                        <div className="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">
-                                            <AlertTriangle className="w-6 h-6 text-red-600" />
+                                        <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${isLight ? "bg-red-100" : "bg-red-500/20 border border-red-500/30"
+                                            }`}>
+                                            <AlertTriangle className={`w-6 h-6 ${isLight ? "text-red-600" : "text-red-400"}`} />
                                         </div>
                                         <div>
-                                            <h2 className="text-xl font-bold text-slate-900">Delete Store</h2>
-                                            <p className="text-sm text-slate-500 mt-0.5">This action cannot be undone</p>
+                                            <h2 className={`text-xl font-bold ${isLight ? "text-slate-900" : "text-white"}`}>Delete Store</h2>
+                                            <p className={`text-sm mt-0.5 ${isLight ? "text-slate-500" : "text-slate-400"}`}>This action cannot be undone</p>
                                         </div>
                                     </div>
                                     <button
                                         onClick={onClose}
                                         disabled={loading}
-                                        className="w-8 h-8 rounded-lg bg-slate-100 hover:bg-slate-200 flex items-center justify-center transition-colors disabled:opacity-50"
+                                        className={`w-8 h-8 rounded-lg flex items-center justify-center transition-colors disabled:opacity-50 ${isLight
+                                                ? "bg-slate-100 hover:bg-slate-200 text-slate-600"
+                                                : "bg-white/10 hover:bg-white/15 text-slate-400"
+                                            }`}
                                     >
-                                        <X className="w-4 h-4 text-slate-600" />
+                                        <X className="w-4 h-4" />
                                     </button>
                                 </div>
                             </div>
@@ -82,27 +92,33 @@ export default function DeleteStoreModal({
                             {/* Content */}
                             <div className="p-6">
                                 <div className="mb-6">
-                                    <p className="text-slate-700 mb-4">
-                                        Are you sure you want to delete <span className="font-bold text-slate-900">{storeName}</span>?
+                                    <p className={`mb-4 ${isLight ? "text-slate-700" : "text-slate-300"}`}>
+                                        Are you sure you want to delete <span className={`font-bold ${isLight ? "text-slate-900" : "text-white"}`}>{storeName}</span>?
                                     </p>
                                     {isActive && (
-                                        <div className="p-4 rounded-xl bg-amber-50 border border-amber-200 mb-4">
+                                        <div className={`p-4 rounded-xl border mb-4 ${isLight
+                                                ? "bg-amber-50 border-amber-200"
+                                                : "bg-amber-500/10 border-amber-500/20"
+                                            }`}>
                                             <div className="flex items-start gap-3">
-                                                <AlertTriangle className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
+                                                <AlertTriangle className={`w-5 h-5 shrink-0 mt-0.5 ${isLight ? "text-amber-600" : "text-amber-400"}`} />
                                                 <div>
-                                                    <p className="text-sm font-bold text-amber-900 mb-1">Active Store</p>
-                                                    <p className="text-sm text-amber-700">
+                                                    <p className={`text-sm font-bold mb-1 ${isLight ? "text-amber-900" : "text-amber-300"}`}>Active Store</p>
+                                                    <p className={`text-sm ${isLight ? "text-amber-700" : "text-amber-400/80"}`}>
                                                         This is your active store. We&apos;ll automatically switch to another store after deletion.
                                                     </p>
                                                 </div>
                                             </div>
                                         </div>
                                     )}
-                                    <div className="p-4 rounded-xl bg-slate-50 border border-slate-200">
-                                        <p className="text-sm text-slate-600">
+                                    <div className={`p-4 rounded-xl border ${isLight
+                                            ? "bg-slate-50 border-slate-200"
+                                            : "bg-white/5 border-white/10"
+                                        }`}>
+                                        <p className={`text-sm ${isLight ? "text-slate-600" : "text-slate-400"}`}>
                                             This will permanently delete:
                                         </p>
-                                        <ul className="mt-2 space-y-1 text-sm text-slate-600 ml-4 list-disc">
+                                        <ul className={`mt-2 space-y-1 text-sm ml-4 list-disc ${isLight ? "text-slate-600" : "text-slate-400"}`}>
                                             <li>Store configuration and credentials</li>
                                             <li>All cached products, orders, and customers</li>
                                             <li>Sync metadata and webhook connections</li>
@@ -114,20 +130,27 @@ export default function DeleteStoreModal({
                                     <motion.div
                                         initial={{ opacity: 0, y: -10 }}
                                         animate={{ opacity: 1, y: 0 }}
-                                        className="mb-4 p-4 rounded-xl bg-red-50 border border-red-200 flex items-start gap-3"
+                                        className={`mb-4 p-4 rounded-xl border flex items-start gap-3 ${isLight
+                                                ? "bg-red-50 border-red-200"
+                                                : "bg-red-500/10 border-red-500/20"
+                                            }`}
                                     >
-                                        <AlertTriangle className="w-5 h-5 text-red-600 shrink-0 mt-0.5" />
-                                        <p className="text-sm text-red-700">{error}</p>
+                                        <AlertTriangle className={`w-5 h-5 shrink-0 mt-0.5 ${isLight ? "text-red-600" : "text-red-400"}`} />
+                                        <p className={`text-sm ${isLight ? "text-red-700" : "text-red-400"}`}>{error}</p>
                                     </motion.div>
                                 )}
                             </div>
 
                             {/* Footer */}
-                            <div className="p-6 border-t border-slate-100 flex items-center justify-end gap-3">
+                            <div className={`p-6 border-t flex items-center justify-end gap-3 ${isLight ? "border-slate-100" : "border-white/10"
+                                }`}>
                                 <button
                                     onClick={onClose}
                                     disabled={loading}
-                                    className="h-11 px-6 bg-slate-100 text-slate-700 rounded-xl font-bold hover:bg-slate-200 transition-all disabled:opacity-50"
+                                    className={`h-11 px-6 rounded-xl font-bold transition-all disabled:opacity-50 ${isLight
+                                            ? "bg-slate-100 text-slate-700 hover:bg-slate-200"
+                                            : "bg-white/10 text-slate-300 hover:bg-white/15"
+                                        }`}
                                 >
                                     Cancel
                                 </button>
diff --git a/src/components/MobileAdminSidebar.tsx b/src/components/MobileAdminSidebar.tsx
new file mode 100644
index 0000000..603b73d
--- /dev/null
+++ b/src/components/MobileAdminSidebar.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Menu, X } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+import { AdminSidebar } from "@/components/AdminSidebar"
+
+export function MobileAdminSidebar() {
+    const [isOpen, setIsOpen] = useState(false)
+
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden"
+        } else {
+            document.body.style.overflow = ""
+        }
+        return () => {
+            document.body.style.overflow = ""
+        }
+    }, [isOpen])
+
+    return (
+        <>
+            <button
+                onClick={() => setIsOpen(true)}
+                className="md:hidden p-2 hover:bg-white/10 rounded-lg transition-colors"
+                aria-label="Open admin menu"
+            >
+                <Menu className="w-5 h-5 text-white" />
+            </button>
+
+            <AnimatePresence>
+                {isOpen && (
+                    <>
+                        {/* Backdrop */}
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            exit={{ opacity: 0 }}
+                            transition={{ duration: 0.2 }}
+                            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[90] md:hidden"
+                            onClick={() => setIsOpen(false)}
+                        />
+
+                        {/* Sidebar Panel */}
+                        <motion.div
+                            initial={{ x: -288 }}
+                            animate={{ x: 0 }}
+                            exit={{ x: -288 }}
+                            transition={{ type: "spring", damping: 25, stiffness: 300 }}
+                            className="fixed inset-y-0 left-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[100] md:hidden flex flex-col"
+                        >
+                            <div className="flex items-center justify-between p-4 border-b border-white/10">
+                                <span className="text-sm font-bold text-white tracking-wide">Admin Panel</span>
+                                <button
+                                    onClick={() => setIsOpen(false)}
+                                    className="p-1.5 hover:bg-white/10 rounded-lg transition-colors"
+                                    aria-label="Close admin menu"
+                                >
+                                    <X className="w-4 h-4 text-slate-400" />
+                                </button>
+                            </div>
+                            <div className="flex-1 overflow-y-auto">
+                                <AdminSidebar />
+                            </div>
+                        </motion.div>
+                    </>
+                )}
+            </AnimatePresence>
+        </>
+    )
+}
diff --git a/src/components/MobileSidebar.tsx b/src/components/MobileSidebar.tsx
index 275df5b..e48ec2a 100644
--- a/src/components/MobileSidebar.tsx
+++ b/src/components/MobileSidebar.tsx
@@ -1,6 +1,7 @@
 "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"
@@ -8,8 +9,13 @@ import { Sidebar } from "./Sidebar"
 
 export function MobileSidebar() {
     const [isOpen, setIsOpen] = useState(false)
+    const [mounted, setMounted] = useState(false)
     const pathname = usePathname()
 
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
     // Close sidebar when route changes
     useEffect(() => {
         setIsOpen(false)
@@ -40,14 +46,14 @@ export function MobileSidebar() {
 
             {/* Mobile Sidebar Overlay */}
             <AnimatePresence>
-                {isOpen && (
+                {isOpen && mounted && createPortal(
                     <>
                         <motion.div
                             initial={{ opacity: 0 }}
                             animate={{ opacity: 1 }}
                             exit={{ opacity: 0 }}
                             transition={{ duration: 0.2 }}
-                            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[90] md:hidden"
+                            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[999] md:hidden pointer-events-auto"
                             onClick={() => setIsOpen(false)}
                         />
                         <motion.div
@@ -55,30 +61,31 @@ export function MobileSidebar() {
                             animate={{ x: 0 }}
                             exit={{ x: -288 }}
                             transition={{ type: "spring", damping: 25, stiffness: 200 }}
-                            className="fixed inset-y-0 left-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[100] md:hidden flex flex-col"
+                            className="fixed inset-y-0 left-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[1000] md:hidden flex flex-col pointer-events-auto"
                         >
-                        {/* Header with close button */}
-                        <div className="flex items-center justify-between p-4 border-b border-white/10">
-                            <div className="flex items-center gap-2">
-                                <div className="w-8 h-8 rounded-lg bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
-                                    <Zap className="w-5 h-5 text-white" />
+                            {/* Header with close button */}
+                            <div className="flex items-center justify-between p-4 border-b border-white/10">
+                                <div className="flex items-center gap-2">
+                                    <div className="w-8 h-8 rounded-lg bg-indigo-500/40 border border-white/20 flex items-center justify-center backdrop-blur-sm">
+                                        <Zap className="w-5 h-5 text-white" />
+                                    </div>
+                                    <h1 className="text-xl font-bold tracking-tight text-white">JUNOHUB</h1>
                                 </div>
-                                <h1 className="text-xl font-bold tracking-tight text-white">JUNOHUB</h1>
+                                <button
+                                    onClick={() => setIsOpen(false)}
+                                    className="p-2 rounded-lg bg-white/10 border border-white/10 text-white hover:bg-white/15 transition-all"
+                                    aria-label="Close menu"
+                                >
+                                    <X className="w-5 h-5" />
+                                </button>
+                            </div>
+                            {/* Sidebar Content */}
+                            <div className="flex-1 overflow-y-auto">
+                                <Sidebar />
                             </div>
-                            <button
-                                onClick={() => setIsOpen(false)}
-                                className="p-2 rounded-lg bg-white/10 border border-white/10 text-white hover:bg-white/15 transition-all"
-                                aria-label="Close menu"
-                            >
-                                <X className="w-5 h-5" />
-                            </button>
-                        </div>
-                        {/* Sidebar Content */}
-                        <div className="flex-1 overflow-y-auto">
-                            <Sidebar />
-                        </div>
                         </motion.div>
-                    </>
+                    </>,
+                    document.body
                 )}
             </AnimatePresence>
         </>
diff --git a/src/components/MobileSupplierSidebar.tsx b/src/components/MobileSupplierSidebar.tsx
index 98ccd89..5910586 100644
--- a/src/components/MobileSupplierSidebar.tsx
+++ b/src/components/MobileSupplierSidebar.tsx
@@ -50,9 +50,9 @@ export function MobileSupplierSidebar() {
                             className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[90] md:hidden"
                         />
                         <motion.div
-                            initial={{ x: -300 }}
+                            initial={{ x: -288 }}
                             animate={{ x: 0 }}
-                            exit={{ x: -300 }}
+                            exit={{ x: -288 }}
                             transition={{ type: "spring", damping: 25, stiffness: 200 }}
                             className="fixed left-0 top-0 bottom-0 w-72 bg-slate-900/95 backdrop-blur-xl border-r border-white/10 z-[100] md:hidden overflow-y-auto"
                         >
diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 3ddac90..bcbb873 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -3,6 +3,7 @@
 import { useEffect, useState, useRef } from "react"
 import { Bell, Loader2, CheckCircle2, Clock, XCircle, Mail, Package, ShoppingCart, X } from "lucide-react"
 import { formatDistanceToNow } from "date-fns"
+import { motion, AnimatePresence } from "framer-motion"
 import { useTheme } from "@/components/ThemeProvider"
 
 interface Notification {
@@ -27,12 +28,12 @@ export default function NotificationBell() {
 
     useEffect(() => {
         fetchNotifications()
-        
+
         // Poll for new notifications every 5 seconds
         const interval = setInterval(() => {
             fetchNotifications()
         }, 5000)
-        
+
         return () => clearInterval(interval)
     }, [])
 
@@ -125,14 +126,12 @@ export default function NotificationBell() {
         <div className="relative" ref={dropdownRef}>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className={`relative p-2 rounded-lg transition-colors ${
-                    isLight ? "hover:bg-slate-100" : "hover:bg-white/10"
-                }`}
+                className={`relative p-2 rounded-lg transition-colors ${isLight ? "hover:bg-slate-100" : "hover:bg-white/10"
+                    }`}
             >
                 <Bell
-                    className={`w-5 h-5 ${
-                        isLight ? "text-slate-600" : "text-slate-400"
-                    }`}
+                    className={`w-5 h-5 ${isLight ? "text-slate-600" : "text-slate-400"
+                        }`}
                 />
                 {unreadCount > 0 && (
                     <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] font-bold text-white">
@@ -141,178 +140,167 @@ export default function NotificationBell() {
                 )}
             </button>
 
-            {isOpen && (
-                <div
-                    className={`absolute right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 sm:w-96 max-w-[calc(100vw-2rem)] flex-col rounded-xl border shadow-xl ${
-                        isLight
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: -4 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: -4 }}
+                        transition={{ duration: 0.15, ease: "easeOut" }}
+                        className={`absolute right-0 top-full z-50 mt-2 flex max-h-[600px] w-80 sm:w-96 max-w-[calc(100vw-2rem)] flex-col rounded-xl border shadow-xl ${isLight
                             ? "bg-white border-slate-200"
                             : "bg-slate-800 border-white/10"
-                    }`}
-                >
-                    <div
-                        className={`flex items-center justify-between border-b p-4 ${
-                            isLight ? "border-slate-200" : "border-white/10"
-                        }`}
-                    >
-                        <h3
-                            className={`font-bold ${
-                                isLight ? "text-slate-900" : "text-white"
                             }`}
+                    >
+                        <div
+                            className={`flex items-center justify-between border-b p-4 ${isLight ? "border-slate-200" : "border-white/10"
+                                }`}
                         >
-                            Notifications
-                        </h3>
-                        {unreadCount > 0 && (
-                            <button
-                                onClick={markAllAsRead}
-                                className={`text-xs font-medium ${
-                                    isLight
+                            <h3
+                                className={`font-bold ${isLight ? "text-slate-900" : "text-white"
+                                    }`}
+                            >
+                                Notifications
+                            </h3>
+                            {unreadCount > 0 && (
+                                <button
+                                    onClick={markAllAsRead}
+                                    className={`text-xs font-medium ${isLight
                                         ? "text-indigo-600 hover:text-indigo-500"
                                         : "text-indigo-400 hover:text-indigo-300"
-                                }`}
-                            >
-                                Mark all as read
-                            </button>
-                        )}
-                    </div>
+                                        }`}
+                                >
+                                    Mark all as read
+                                </button>
+                            )}
+                        </div>
 
-                    <div className="overflow-y-auto flex-1">
-                        {loading ? (
-                            <div className="flex items-center justify-center py-8">
-                                <Loader2
-                                    className={`h-6 w-6 animate-spin ${
-                                        isLight
+                        <div className="overflow-y-auto flex-1">
+                            {loading ? (
+                                <div className="flex items-center justify-center py-8">
+                                    <Loader2
+                                        className={`h-6 w-6 animate-spin ${isLight
                                             ? "text-indigo-600"
                                             : "text-indigo-400"
-                                    }`}
-                                />
-                            </div>
-                        ) : notifications.length === 0 ? (
-                            <div className="p-8 text-center">
-                                <Bell
-                                    className={`mx-auto mb-3 h-12 w-12 opacity-50 ${
-                                        isLight
+                                            }`}
+                                    />
+                                </div>
+                            ) : notifications.length === 0 ? (
+                                <div className="p-8 text-center">
+                                    <Bell
+                                        className={`mx-auto mb-3 h-12 w-12 opacity-50 ${isLight
                                             ? "text-slate-400"
                                             : "text-slate-400"
-                                    }`}
-                                />
-                                <p
-                                    className={`text-sm ${
-                                        isLight
+                                            }`}
+                                    />
+                                    <p
+                                        className={`text-sm ${isLight
                                             ? "text-slate-500"
                                             : "text-slate-400"
-                                    }`}
-                                >
-                                    No notifications yet
-                                </p>
-                            </div>
-                        ) : (
-                            <div
-                                className={`divide-y ${
-                                    isLight
+                                            }`}
+                                    >
+                                        No notifications yet
+                                    </p>
+                                </div>
+                            ) : (
+                                <div
+                                    className={`divide-y ${isLight
                                         ? "divide-slate-100"
                                         : "divide-white/10"
-                                }`}
-                            >
-                                {notifications.map((notification) => (
-                                    <div
-                                        key={notification.id}
-                                        className={`p-4 transition-colors ${
-                                            isLight
+                                        }`}
+                                >
+                                    {notifications.map((notification) => (
+                                        <div
+                                            key={notification.id}
+                                            className={`p-4 transition-colors ${isLight
                                                 ? "hover:bg-slate-50"
                                                 : "hover:bg-white/5"
-                                        } ${
-                                            !notification.read
-                                                ? isLight
-                                                    ? "bg-indigo-50"
-                                                    : "bg-indigo-500/10"
-                                                : ""
-                                        }`}
-                                    >
-                                        <div className="flex items-start gap-3">
-                                            <div className="mt-0.5 flex-shrink-0">
-                                                {getNotificationIcon(notification.type)}
-                                            </div>
-                                            <div className="flex-1 min-w-0">
-                                                <div className="flex items-start justify-between gap-2">
-                                                    <div className="flex-1 min-w-0">
-                                                        <h4
-                                                            className={`mb-1 text-sm font-semibold ${
-                                                                isLight
+                                                } ${!notification.read
+                                                    ? isLight
+                                                        ? "bg-indigo-50"
+                                                        : "bg-indigo-500/10"
+                                                    : ""
+                                                }`}
+                                        >
+                                            <div className="flex items-start gap-3">
+                                                <div className="mt-0.5 flex-shrink-0">
+                                                    {getNotificationIcon(notification.type)}
+                                                </div>
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-start justify-between gap-2">
+                                                        <div className="flex-1 min-w-0">
+                                                            <h4
+                                                                className={`mb-1 text-sm font-semibold ${isLight
                                                                     ? "text-slate-900"
                                                                     : "text-white"
-                                                            }`}
-                                                        >
-                                                            {notification.title}
-                                                        </h4>
-                                                        <p
-                                                            className={`mb-2 text-xs ${
-                                                                isLight
+                                                                    }`}
+                                                            >
+                                                                {notification.title}
+                                                            </h4>
+                                                            <p
+                                                                className={`mb-2 text-xs ${isLight
                                                                     ? "text-slate-600"
                                                                     : "text-slate-300"
-                                                            }`}
-                                                        >
-                                                            {notification.message}
-                                                        </p>
-                                                        <p
-                                                            className={`text-[10px] ${
-                                                                isLight
+                                                                    }`}
+                                                            >
+                                                                {notification.message}
+                                                            </p>
+                                                            <p
+                                                                className={`text-[10px] ${isLight
                                                                     ? "text-slate-400"
                                                                     : "text-slate-500"
-                                                            }`}
-                                                        >
-                                                            {formatDistanceToNow(new Date(notification.createdAt), {
-                                                                addSuffix: true
-                                                            })}
-                                                        </p>
-                                                    </div>
-                                                    <div className="flex items-center gap-1 flex-shrink-0">
-                                                        {!notification.read && (
-                                                            <button
-                                                                onClick={() => markAsRead(notification.id)}
-                                                                className={`rounded p-1 transition-colors ${
-                                                                    isLight
+                                                                    }`}
+                                                            >
+                                                                {formatDistanceToNow(new Date(notification.createdAt), {
+                                                                    addSuffix: true
+                                                                })}
+                                                            </p>
+                                                        </div>
+                                                        <div className="flex items-center gap-1 flex-shrink-0">
+                                                            {!notification.read && (
+                                                                <button
+                                                                    onClick={() => markAsRead(notification.id)}
+                                                                    className={`rounded p-1 transition-colors ${isLight
                                                                         ? "hover:bg-slate-100"
                                                                         : "hover:bg-white/10"
-                                                                }`}
-                                                                title="Mark as read"
-                                                            >
-                                                                <CheckCircle2
-                                                                    className={`h-3 w-3 ${
-                                                                        isLight
+                                                                        }`}
+                                                                    title="Mark as read"
+                                                                >
+                                                                    <CheckCircle2
+                                                                        className={`h-3 w-3 ${isLight
                                                                             ? "text-slate-400"
                                                                             : "text-slate-400"
-                                                                    }`}
-                                                                />
-                                                            </button>
-                                                        )}
-                                                        <button
-                                                            onClick={() => deleteNotification(notification.id)}
-                                                            className={`rounded p-1 transition-colors ${
-                                                                isLight
+                                                                            }`}
+                                                                    />
+                                                                </button>
+                                                            )}
+                                                            <button
+                                                                onClick={() => deleteNotification(notification.id)}
+                                                                className={`rounded p-1 transition-colors ${isLight
                                                                     ? "hover:bg-slate-100"
                                                                     : "hover:bg-white/10"
-                                                            }`}
-                                                            title="Delete"
-                                                        >
-                                                            <X
-                                                                className={`h-3 w-3 ${
-                                                                    isLight
+                                                                    }`}
+                                                                title="Delete"
+                                                            >
+                                                                <X
+                                                                    className={`h-3 w-3 ${isLight
                                                                         ? "text-slate-400"
                                                                         : "text-slate-400"
-                                                                }`}
-                                                            />
-                                                        </button>
+                                                                        }`}
+                                                                />
+                                                            </button>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            )}
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </div>
     )
 }
diff --git a/src/components/OrderDetailsModal.tsx b/src/components/OrderDetailsModal.tsx
index b2e0d81..fd2aeaf 100644
--- a/src/components/OrderDetailsModal.tsx
+++ b/src/components/OrderDetailsModal.tsx
@@ -108,17 +108,8 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
     if (!isOpen) return null
 
     return (
-        <div 
-            className="fixed inset-0 z-[9999] bg-black/70 backdrop-blur-md"
-            style={{ 
-                position: 'fixed', 
-                top: 0, 
-                left: 0, 
-                right: 0, 
-                bottom: 0,
-                overflowY: 'auto',
-                overflowX: 'hidden'
-            }}
+        <div
+            className="fixed inset-0 z-[9999] bg-black/70 backdrop-blur-md overflow-y-auto overflow-x-hidden"
             onClick={(e) => {
                 if (e.target === e.currentTarget) {
                     onClose()
@@ -126,12 +117,8 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
             }}
         >
             <div className="min-h-screen flex items-center justify-center p-4 py-8">
-                <div 
-                    className="bg-slate-900 rounded-2xl border border-white/10 w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl mx-auto" 
-                    style={{ 
-                        maxWidth: 'min(90vw, 80rem)',
-                        width: '100%'
-                    }}
+                <div
+                    className="bg-slate-900 rounded-2xl border border-white/10 w-full max-w-5xl max-h-[90vh] overflow-hidden flex flex-col shadow-2xl mx-auto"
                 >
                     {/* Header */}
                     <div className="flex items-center justify-between p-4 md:p-6 border-b border-white/10 flex-shrink-0 bg-slate-900/95 backdrop-blur-sm">
@@ -154,201 +141,199 @@ export default function OrderDetailsModal({ isOpen, onClose, orderId, orderName
 
                     {/* Content */}
                     <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 md:p-6 min-h-0 bg-slate-900 max-w-full" style={{ maxHeight: 'calc(90vh - 140px)' }}>
-                    {loading ? (
-                        <div className="flex items-center justify-center h-64">
-                            <div className="text-slate-400">Loading order details...</div>
-                        </div>
-                    ) : error ? (
-                        <div className="flex items-center justify-center h-64">
-                            <div className="text-red-400">{error}</div>
-                        </div>
-                    ) : order ? (
-                        <div className="space-y-6 max-w-full overflow-hidden">
-                            {/* Order Summary - Top Section */}
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                    <div className="flex items-center gap-2 text-slate-400 mb-3">
-                                        <Calendar className="w-4 h-4" />
-                                        <span className="text-xs font-bold uppercase tracking-wider">Order Date</span>
-                                    </div>
-                                    <p className="text-white font-bold text-lg">{new Date(order.created_at).toLocaleString()}</p>
-                                </div>
-                                <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                    <div className="flex items-center gap-2 text-slate-400 mb-3">
-                                        <DollarSign className="w-4 h-4" />
-                                        <span className="text-xs font-bold uppercase tracking-wider">Total Amount</span>
-                                    </div>
-                                    <p className="text-white font-bold text-2xl">{order.total_price} {order.currency}</p>
-                                </div>
+                        {loading ? (
+                            <div className="flex items-center justify-center h-64">
+                                <div className="text-slate-400">Loading order details...</div>
                             </div>
-
-                            {/* Status Cards */}
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                    <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Payment Status</span>
-                                    <div>
-                                        <span className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${
-                                            order.financial_status === "paid" 
-                                                ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30" 
-                                                : "bg-red-500/20 text-red-400 border border-red-500/30"
-                                        }`}>
-                                            {order.financial_status === "paid" && <CheckCircle2 className="w-3 h-3" />}
-                                            {order.financial_status}
-                                        </span>
-                                    </div>
-                                </div>
-                                <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                    <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Fulfillment Status</span>
-                                    <div>
-                                        <span className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${
-                                            order.fulfillment_status === "fulfilled"
-                                                ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
-                                                : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
-                                        }`}>
-                                            {order.fulfillment_status === "fulfilled" ? <CheckCircle2 className="w-3 h-3" /> : <Clock className="w-3 h-3" />}
-                                            {order.fulfillment_status || "Unfulfilled"}
-                                        </span>
-                                    </div>
-                                </div>
+                        ) : error ? (
+                            <div className="flex items-center justify-center h-64">
+                                <div className="text-red-400">{error}</div>
                             </div>
-
-                            {/* Main Content Grid */}
-                            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 min-w-0 max-w-full">
-                                {/* Left Column - Customer & Shipping */}
-                                <div className="lg:col-span-1 space-y-6 min-w-0 max-w-full">
-                                    {/* Customer Info */}
-                                    {order.customer && (
-                                        <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                            <div className="flex items-center gap-2 text-slate-400 mb-4">
-                                                <User className="w-4 h-4" />
-                                                <span className="text-xs font-bold uppercase tracking-wider">Customer</span>
-                                            </div>
-                                            <div className="space-y-3">
-                                                <p className="text-white font-bold text-base">
-                                                    {order.customer.first_name} {order.customer.last_name}
-                                                </p>
-                                                <div className="flex items-center gap-2 text-slate-300 text-sm min-w-0">
-                                                    <Mail className="w-3.5 h-3.5 text-slate-500 flex-shrink-0" />
-                                                    <span className="break-all min-w-0">{order.customer.email}</span>
-                                                </div>
-                                                {order.customer.phone && (
-                                                    <div className="flex items-center gap-2 text-slate-300 text-sm">
-                                                        <Phone className="w-3.5 h-3.5 text-slate-500" />
-                                                        <span>{order.customer.phone}</span>
-                                                    </div>
-                                                )}
-                                            </div>
+                        ) : order ? (
+                            <div className="space-y-6 max-w-full overflow-hidden">
+                                {/* Order Summary - Top Section */}
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                        <div className="flex items-center gap-2 text-slate-400 mb-3">
+                                            <Calendar className="w-4 h-4" />
+                                            <span className="text-xs font-bold uppercase tracking-wider">Order Date</span>
                                         </div>
-                                    )}
+                                        <p className="text-white font-bold text-lg">{new Date(order.created_at).toLocaleString()}</p>
+                                    </div>
+                                    <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                        <div className="flex items-center gap-2 text-slate-400 mb-3">
+                                            <DollarSign className="w-4 h-4" />
+                                            <span className="text-xs font-bold uppercase tracking-wider">Total Amount</span>
+                                        </div>
+                                        <p className="text-white font-bold text-2xl">{order.total_price} {order.currency}</p>
+                                    </div>
+                                </div>
 
-                                    {/* Shipping Address */}
-                                    {order.shipping_address && (
-                                        <div className="bg-white/5 rounded-xl p-5 border border-white/10">
-                                            <div className="flex items-center gap-2 text-slate-400 mb-4">
-                                                <MapPin className="w-4 h-4" />
-                                                <span className="text-xs font-bold uppercase tracking-wider">Shipping Address</span>
-                                            </div>
-                                            <div className="text-slate-300 text-sm space-y-1.5 break-words">
-                                                <p className="font-medium text-white break-words">
-                                                    {order.shipping_address.first_name} {order.shipping_address.last_name}
-                                                </p>
-                                                <p className="break-words">{order.shipping_address.address1}</p>
-                                                {order.shipping_address.address2 && <p className="break-words">{order.shipping_address.address2}</p>}
-                                                <p className="break-words">
-                                                    {order.shipping_address.city}, {order.shipping_address.province} {order.shipping_address.zip}
-                                                </p>
-                                                <p className="break-words">{order.shipping_address.country}</p>
-                                                {order.shipping_address.phone && (
-                                                    <p className="mt-2 flex items-center gap-2 pt-2 border-t border-white/5">
-                                                        <Phone className="w-3.5 h-3.5 text-slate-500" />
-                                                        {order.shipping_address.phone}
+                                {/* Status Cards */}
+                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                    <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                        <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Payment Status</span>
+                                        <div>
+                                            <span className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${order.financial_status === "paid"
+                                                    ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+                                                    : "bg-red-500/20 text-red-400 border border-red-500/30"
+                                                }`}>
+                                                {order.financial_status === "paid" && <CheckCircle2 className="w-3 h-3" />}
+                                                {order.financial_status}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                        <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Fulfillment Status</span>
+                                        <div>
+                                            <span className={`px-3 py-1.5 rounded-full text-xs font-black uppercase tracking-wider inline-flex items-center gap-1.5 ${order.fulfillment_status === "fulfilled"
+                                                    ? "bg-emerald-500/20 text-emerald-400 border border-emerald-500/30"
+                                                    : "bg-blue-500/20 text-blue-400 border border-blue-500/30"
+                                                }`}>
+                                                {order.fulfillment_status === "fulfilled" ? <CheckCircle2 className="w-3 h-3" /> : <Clock className="w-3 h-3" />}
+                                                {order.fulfillment_status || "Unfulfilled"}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {/* Main Content Grid */}
+                                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 min-w-0 max-w-full">
+                                    {/* Left Column - Customer & Shipping */}
+                                    <div className="lg:col-span-1 space-y-6 min-w-0 max-w-full">
+                                        {/* Customer Info */}
+                                        {order.customer && (
+                                            <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                                <div className="flex items-center gap-2 text-slate-400 mb-4">
+                                                    <User className="w-4 h-4" />
+                                                    <span className="text-xs font-bold uppercase tracking-wider">Customer</span>
+                                                </div>
+                                                <div className="space-y-3">
+                                                    <p className="text-white font-bold text-base">
+                                                        {order.customer.first_name} {order.customer.last_name}
                                                     </p>
-                                                )}
-                                            </div>
-                                        </div>
-                                    )}
-                                </div>
-
-                                {/* Right Column - Order Items */}
-                                <div className="lg:col-span-2 min-w-0 max-w-full overflow-hidden">
-                                    <div className="bg-white/5 rounded-xl p-5 border border-white/10 min-w-0 max-w-full overflow-hidden">
-                                        <div className="flex items-center gap-2 text-slate-400 mb-5">
-                                            <Package className="w-4 h-4" />
-                                            <span className="text-xs font-bold uppercase tracking-wider">Order Items</span>
-                                        </div>
-                                        <div className="space-y-4 overflow-x-auto">
-                                            {order.line_items.map((item) => (
-                                                <div key={item.id} className="bg-white/5 rounded-lg p-4 border border-white/5 min-w-0">
-                                                    <div className="flex items-start justify-between gap-4 min-w-0">
-                                                        <div className="flex-1 min-w-0 overflow-hidden">
-                                                            <p className="text-white font-bold text-base mb-1 break-words">{item.title}</p>
-                                                            {item.variant_title && (
-                                                                <p className="text-sm text-slate-400 mb-2 break-words">{item.variant_title}</p>
-                                                            )}
-                                                            <div className="flex items-center gap-4 flex-wrap">
-                                                                <span className="text-sm text-slate-400">
-                                                                    <span className="font-medium text-slate-300">Qty:</span> {item.quantity}
-                                                                </span>
-                                                                {item.sku && (
-                                                                    <span className="text-xs text-slate-500 break-all">
-                                                                        <span className="font-medium">SKU:</span> {item.sku}
-                                                                    </span>
-                                                                )}
-                                                            </div>
-                                                        </div>
-                                                        <div className="text-right flex-shrink-0">
-                                                            <p className="text-white font-bold text-lg whitespace-nowrap">
-                                                                {(parseFloat(item.price) * item.quantity).toFixed(2)} {order.currency}
-                                                            </p>
-                                                            <p className="text-xs text-slate-400 mt-1 whitespace-nowrap">
-                                                                {parseFloat(item.price).toFixed(2)} {order.currency} each
-                                                            </p>
-                                                        </div>
+                                                    <div className="flex items-center gap-2 text-slate-300 text-sm min-w-0">
+                                                        <Mail className="w-3.5 h-3.5 text-slate-500 flex-shrink-0" />
+                                                        <span className="break-all min-w-0">{order.customer.email}</span>
                                                     </div>
+                                                    {order.customer.phone && (
+                                                        <div className="flex items-center gap-2 text-slate-300 text-sm">
+                                                            <Phone className="w-3.5 h-3.5 text-slate-500" />
+                                                            <span>{order.customer.phone}</span>
+                                                        </div>
+                                                    )}
                                                 </div>
-                                            ))}
-                                        </div>
-                                        
-                                        {/* Order Summary */}
-                                        {(order.subtotal_price || order.total_tax || (order.total_discounts && parseFloat(order.total_discounts) > 0)) && (
-                                            <div className="mt-6 pt-6 border-t border-white/10 space-y-3">
-                                                {order.subtotal_price && (
-                                                    <div className="flex justify-between text-sm">
-                                                        <span className="text-slate-400">Subtotal</span>
-                                                        <span className="text-white font-medium">{order.subtotal_price} {order.currency}</span>
-                                                    </div>
-                                                )}
-                                                {order.total_tax && (
-                                                    <div className="flex justify-between text-sm">
-                                                        <span className="text-slate-400">Tax</span>
-                                                        <span className="text-white font-medium">{order.total_tax} {order.currency}</span>
-                                                    </div>
-                                                )}
-                                                {order.total_discounts && parseFloat(order.total_discounts) > 0 && (
-                                                    <div className="flex justify-between text-sm">
-                                                        <span className="text-slate-400">Discount</span>
-                                                        <span className="text-emerald-400 font-medium">-{order.total_discounts} {order.currency}</span>
-                                                    </div>
-                                                )}
-                                                <div className="flex justify-between text-lg font-bold pt-3 border-t border-white/10">
-                                                    <span className="text-white">Total</span>
-                                                    <span className="text-white">{order.total_price} {order.currency}</span>
+                                            </div>
+                                        )}
+
+                                        {/* Shipping Address */}
+                                        {order.shipping_address && (
+                                            <div className="bg-white/5 rounded-xl p-5 border border-white/10">
+                                                <div className="flex items-center gap-2 text-slate-400 mb-4">
+                                                    <MapPin className="w-4 h-4" />
+                                                    <span className="text-xs font-bold uppercase tracking-wider">Shipping Address</span>
+                                                </div>
+                                                <div className="text-slate-300 text-sm space-y-1.5 break-words">
+                                                    <p className="font-medium text-white break-words">
+                                                        {order.shipping_address.first_name} {order.shipping_address.last_name}
+                                                    </p>
+                                                    <p className="break-words">{order.shipping_address.address1}</p>
+                                                    {order.shipping_address.address2 && <p className="break-words">{order.shipping_address.address2}</p>}
+                                                    <p className="break-words">
+                                                        {order.shipping_address.city}, {order.shipping_address.province} {order.shipping_address.zip}
+                                                    </p>
+                                                    <p className="break-words">{order.shipping_address.country}</p>
+                                                    {order.shipping_address.phone && (
+                                                        <p className="mt-2 flex items-center gap-2 pt-2 border-t border-white/5">
+                                                            <Phone className="w-3.5 h-3.5 text-slate-500" />
+                                                            {order.shipping_address.phone}
+                                                        </p>
+                                                    )}
                                                 </div>
                                             </div>
                                         )}
                                     </div>
 
-                                    {/* Order Notes */}
-                                    {order.note && (
-                                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 mt-6">
-                                            <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Order Notes</span>
-                                            <p className="text-slate-300 text-sm leading-relaxed">{order.note}</p>
+                                    {/* Right Column - Order Items */}
+                                    <div className="lg:col-span-2 min-w-0 max-w-full overflow-hidden">
+                                        <div className="bg-white/5 rounded-xl p-5 border border-white/10 min-w-0 max-w-full overflow-hidden">
+                                            <div className="flex items-center gap-2 text-slate-400 mb-5">
+                                                <Package className="w-4 h-4" />
+                                                <span className="text-xs font-bold uppercase tracking-wider">Order Items</span>
+                                            </div>
+                                            <div className="space-y-4 overflow-x-auto">
+                                                {order.line_items.map((item) => (
+                                                    <div key={item.id} className="bg-white/5 rounded-lg p-4 border border-white/5 min-w-0">
+                                                        <div className="flex items-start justify-between gap-4 min-w-0">
+                                                            <div className="flex-1 min-w-0 overflow-hidden">
+                                                                <p className="text-white font-bold text-base mb-1 break-words">{item.title}</p>
+                                                                {item.variant_title && (
+                                                                    <p className="text-sm text-slate-400 mb-2 break-words">{item.variant_title}</p>
+                                                                )}
+                                                                <div className="flex items-center gap-4 flex-wrap">
+                                                                    <span className="text-sm text-slate-400">
+                                                                        <span className="font-medium text-slate-300">Qty:</span> {item.quantity}
+                                                                    </span>
+                                                                    {item.sku && (
+                                                                        <span className="text-xs text-slate-500 break-all">
+                                                                            <span className="font-medium">SKU:</span> {item.sku}
+                                                                        </span>
+                                                                    )}
+                                                                </div>
+                                                            </div>
+                                                            <div className="text-right flex-shrink-0">
+                                                                <p className="text-white font-bold text-lg whitespace-nowrap">
+                                                                    {(parseFloat(item.price) * item.quantity).toFixed(2)} {order.currency}
+                                                                </p>
+                                                                <p className="text-xs text-slate-400 mt-1 whitespace-nowrap">
+                                                                    {parseFloat(item.price).toFixed(2)} {order.currency} each
+                                                                </p>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                ))}
+                                            </div>
+
+                                            {/* Order Summary */}
+                                            {(order.subtotal_price || order.total_tax || (order.total_discounts && parseFloat(order.total_discounts) > 0)) && (
+                                                <div className="mt-6 pt-6 border-t border-white/10 space-y-3">
+                                                    {order.subtotal_price && (
+                                                        <div className="flex justify-between text-sm">
+                                                            <span className="text-slate-400">Subtotal</span>
+                                                            <span className="text-white font-medium">{order.subtotal_price} {order.currency}</span>
+                                                        </div>
+                                                    )}
+                                                    {order.total_tax && (
+                                                        <div className="flex justify-between text-sm">
+                                                            <span className="text-slate-400">Tax</span>
+                                                            <span className="text-white font-medium">{order.total_tax} {order.currency}</span>
+                                                        </div>
+                                                    )}
+                                                    {order.total_discounts && parseFloat(order.total_discounts) > 0 && (
+                                                        <div className="flex justify-between text-sm">
+                                                            <span className="text-slate-400">Discount</span>
+                                                            <span className="text-emerald-400 font-medium">-{order.total_discounts} {order.currency}</span>
+                                                        </div>
+                                                    )}
+                                                    <div className="flex justify-between text-lg font-bold pt-3 border-t border-white/10">
+                                                        <span className="text-white">Total</span>
+                                                        <span className="text-white">{order.total_price} {order.currency}</span>
+                                                    </div>
+                                                </div>
+                                            )}
                                         </div>
-                                    )}
+
+                                        {/* Order Notes */}
+                                        {order.note && (
+                                            <div className="bg-white/5 rounded-xl p-5 border border-white/10 mt-6">
+                                                <span className="text-xs font-bold uppercase text-slate-400 tracking-wider block mb-3">Order Notes</span>
+                                                <p className="text-slate-300 text-sm leading-relaxed">{order.note}</p>
+                                            </div>
+                                        )}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                    ) : null}
+                        ) : null}
                     </div>
 
                     {/* Footer */}
diff --git a/src/components/StoreSwitcher.tsx b/src/components/StoreSwitcher.tsx
index 0ab0976..0fb83e2 100644
--- a/src/components/StoreSwitcher.tsx
+++ b/src/components/StoreSwitcher.tsx
@@ -24,14 +24,14 @@ export default function StoreSwitcher() {
 
     useEffect(() => {
         fetchStores()
-        
+
         // Listen for store updates (when stores are added/deleted)
         const handleStoreUpdate = () => {
             fetchStores()
         }
-        
+
         window.addEventListener("storeUpdated", handleStoreUpdate)
-        
+
         return () => {
             window.removeEventListener("storeUpdated", handleStoreUpdate)
         }
@@ -95,37 +95,32 @@ export default function StoreSwitcher() {
         <div className="relative" ref={dropdownRef}>
             <button
                 onClick={() => setIsOpen(!isOpen)}
-                className={`flex max-w-full items-center gap-1.5 rounded-xl border px-2 py-2 text-left backdrop-blur-sm transition-all duration-200 ease-out md:gap-2 md:px-4 ${
-                    isLight
+                className={`flex max-w-full items-center gap-1.5 rounded-xl border px-2 py-2 text-left backdrop-blur-sm transition-all duration-200 ease-out md:gap-2 md:px-4 ${isLight
                         ? "bg-white border-slate-200 hover:bg-slate-50"
                         : "bg-white/10 border-white/10 hover:bg-white/15"
-                }`}
+                    }`}
             >
                 <Store
-                    className={`h-3.5 w-3.5 shrink-0 md:h-4 md:w-4 ${
-                        isLight ? "text-slate-600" : "text-slate-300"
-                    }`}
+                    className={`h-3.5 w-3.5 shrink-0 md:h-4 md:w-4 ${isLight ? "text-slate-600" : "text-slate-300"
+                        }`}
                 />
                 <div className="flex min-w-0 flex-1 flex-col items-start">
                     <span
-                        className={`hidden text-xs font-medium md:block ${
-                            isLight ? "text-slate-500" : "text-slate-400"
-                        }`}
+                        className={`hidden text-xs font-medium md:block ${isLight ? "text-slate-500" : "text-slate-400"
+                            }`}
                     >
                         Store
                     </span>
                     <span
-                        className={`truncate text-xs font-bold md:text-sm md:max-w-none max-w-[100px] ${
-                            isLight ? "text-slate-900" : "text-white"
-                        }`}
+                        className={`truncate text-xs font-bold md:text-sm md:max-w-none max-w-[80px] xs:max-w-[120px] ${isLight ? "text-slate-900" : "text-white"
+                            }`}
                     >
                         {activeStore?.businessName || "Select Store"}
                     </span>
                 </div>
                 <ChevronDown
-                    className={`h-3.5 w-3.5 shrink-0 transition-transform duration-200 ease-out md:h-4 md:w-4 ${
-                        isLight ? "text-slate-500" : "text-slate-400"
-                    } ${isOpen ? "rotate-180" : ""}`}
+                    className={`h-3.5 w-3.5 shrink-0 transition-transform duration-200 ease-out md:h-4 md:w-4 ${isLight ? "text-slate-500" : "text-slate-400"
+                        } ${isOpen ? "rotate-180" : ""}`}
                 />
             </button>
 
@@ -145,21 +140,18 @@ export default function StoreSwitcher() {
                             animate={{ opacity: 1, y: 0, scale: 1 }}
                             exit={{ opacity: 0, y: -8, scale: 0.95 }}
                             transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-                            className={`absolute left-0 z-[110] mt-2 max-w-[320px] overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-xl md:left-auto md:right-0 w-[calc(100vw-2rem)] md:w-72 ${
-                                isLight
+                            className={`absolute left-0 z-[110] mt-2 max-w-[320px] overflow-hidden rounded-2xl border shadow-2xl backdrop-blur-xl md:left-auto md:right-0 w-[calc(100vw-2rem)] md:w-72 ${isLight
                                     ? "bg-white border-slate-200"
                                     : "bg-slate-900/90 border-white/10"
-                            }`}
+                                }`}
                         >
                             <div
-                                className={`p-3 border-b ${
-                                    isLight ? "bg-slate-50 border-slate-200" : "bg-white/5 border-white/10"
-                                }`}
+                                className={`p-3 border-b ${isLight ? "bg-slate-50 border-slate-200" : "bg-white/5 border-white/10"
+                                    }`}
                             >
                                 <p
-                                    className={`text-xs font-bold uppercase tracking-wider ${
-                                        isLight ? "text-slate-500" : "text-slate-400"
-                                    }`}
+                                    className={`text-xs font-bold uppercase tracking-wider ${isLight ? "text-slate-500" : "text-slate-400"
+                                        }`}
                                 >
                                     Your Stores
                                 </p>
@@ -175,58 +167,52 @@ export default function StoreSwitcher() {
                                             setIsOpen(false)
                                         }}
                                         disabled={loading}
-                                        className={`flex w-full items-center justify-between px-4 py-3 transition-all ${
-                                            isLight
+                                        className={`flex w-full items-center justify-between px-4 py-3 transition-all ${isLight
                                                 ? "hover:bg-slate-50"
                                                 : "hover:bg-white/10"
-                                        } ${
-                                            store.isActive
+                                            } ${store.isActive
                                                 ? isLight
                                                     ? "bg-indigo-50"
                                                     : "bg-indigo-500/20"
                                                 : ""
-                                        }`}
+                                            }`}
                                     >
                                         <div className="flex items-center gap-3">
                                             <div
-                                                className={`flex h-8 w-8 items-center justify-center rounded-lg ${
-                                                    store.isActive
+                                                className={`flex h-8 w-8 items-center justify-center rounded-lg ${store.isActive
                                                         ? isLight
                                                             ? "bg-indigo-100 border border-indigo-300"
                                                             : "bg-indigo-500/50 border border-indigo-400/30"
                                                         : isLight
-                                                        ? "bg-slate-100"
-                                                        : "bg-white/10"
-                                                }`}
+                                                            ? "bg-slate-100"
+                                                            : "bg-white/10"
+                                                    }`}
                                             >
                                                 <Store
-                                                    className={`h-4 w-4 ${
-                                                        store.isActive
+                                                    className={`h-4 w-4 ${store.isActive
                                                             ? isLight
                                                                 ? "text-indigo-600"
                                                                 : "text-indigo-300"
                                                             : isLight
-                                                            ? "text-slate-500"
-                                                            : "text-slate-400"
-                                                    }`}
+                                                                ? "text-slate-500"
+                                                                : "text-slate-400"
+                                                        }`}
                                                 />
                                             </div>
                                             <div className="flex flex-col items-start">
                                                 <span
-                                                    className={`text-sm font-bold ${
-                                                        isLight
+                                                    className={`text-sm font-bold ${isLight
                                                             ? "text-slate-900"
                                                             : "text-white"
-                                                    }`}
+                                                        }`}
                                                 >
                                                     {store.businessName}
                                                 </span>
                                                 <span
-                                                    className={`text-xs ${
-                                                        isLight
+                                                    className={`text-xs ${isLight
                                                             ? "text-slate-500"
                                                             : "text-slate-400"
-                                                    }`}
+                                                        }`}
                                                 >
                                                     {store.shopifyDomain}
                                                 </span>
@@ -234,31 +220,28 @@ export default function StoreSwitcher() {
                                         </div>
                                         {store.isActive && (
                                             <Check
-                                                className={`h-4 w-4 ${
-                                                    isLight
+                                                className={`h-4 w-4 ${isLight
                                                         ? "text-indigo-600"
                                                         : "text-indigo-400"
-                                                }`}
+                                                    }`}
                                             />
                                         )}
                                     </button>
                                 ))}
                             </div>
                             <div
-                                className={`p-3 border-t ${
-                                    isLight ? "bg-slate-50 border-slate-200" : "bg-white/5 border-white/10"
-                                }`}
+                                className={`p-3 border-t ${isLight ? "bg-slate-50 border-slate-200" : "bg-white/5 border-white/10"
+                                    }`}
                             >
                                 <button
                                     onClick={() => {
                                         setIsOpen(false)
                                         router.push("/dashboard/stores")
                                     }}
-                                    className={`flex h-9 w-full items-center justify-center gap-2 rounded-lg text-sm font-bold transition-all border ${
-                                        isLight
+                                    className={`flex h-9 w-full items-center justify-center gap-2 rounded-lg text-sm font-bold transition-all border ${isLight
                                             ? "bg-indigo-600 text-white border-indigo-500 hover:bg-indigo-500"
                                             : "bg-white/10 text-white border-white/10 hover:bg-white/15"
-                                    }`}
+                                        }`}
                                 >
                                     <Settings className="h-4 w-4" />
                                     Manage Stores
diff --git a/src/components/SupplierSidebar.tsx b/src/components/SupplierSidebar.tsx
index 7b8240b..c468d7f 100644
--- a/src/components/SupplierSidebar.tsx
+++ b/src/components/SupplierSidebar.tsx
@@ -58,7 +58,7 @@ export function SupplierSidebar() {
                 </div>
                 <h1 className="text-xl font-bold tracking-tight">JUNOHUB</h1>
             </div>
-            <div className="flex-1 px-3 space-y-1">
+            <div className="flex-1 px-3 space-y-1 overflow-y-auto">
                 {supplierRoutes.map((route) => (
                     <Link
                         key={route.href}
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index 9511f97..0900fa6 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -13,37 +13,49 @@ export default function ThemeToggle() {
             <button
                 type="button"
                 onClick={toggleTheme}
-                className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-slate-900/40 px-2.5 py-1 text-[11px] font-medium text-slate-200 hover:bg-white/10"
+                className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium ${isLight
+                    ? "border-slate-300 bg-white/80 text-slate-700 hover:bg-slate-100"
+                    : "border-white/15 bg-slate-900/40 text-slate-200 hover:bg-white/10"
+                    }`}
                 aria-label="Toggle theme"
             >
                 {isLight ? (
-                    <Sun className="h-3.5 w-3.5 text-amber-300" />
+                    <Sun className="h-3.5 w-3.5 text-amber-500" />
                 ) : (
                     <Moon className="h-3.5 w-3.5 text-sky-300" />
                 )}
-                <span>{isLight ? "Light mode" : "Default mode"}</span>
+                <span className="hidden xs:inline">{isLight ? "Light" : "Default"}</span>
             </button>
 
-            <div className="hidden md:flex rounded-full border border-white/10 bg-slate-900/50 text-[11px] font-semibold text-slate-300 overflow-hidden">
+            <div className={`hidden md:flex rounded-full border text-[11px] font-semibold overflow-hidden ${isLight
+                ? "border-slate-300 bg-slate-100 text-slate-600"
+                : "border-white/10 bg-slate-900/50 text-slate-300"
+                }`}>
                 <button
                     type="button"
                     onClick={() => setTheme("default")}
-                    className={`px-2.5 py-1 ${
-                        theme === "default"
-                            ? "bg-white text-slate-900"
+                    className={`px-2.5 py-1 ${theme === "default"
+                        ? isLight
+                            ? "bg-slate-700 text-white"
+                            : "bg-white text-slate-900"
+                        : isLight
+                            ? "bg-transparent hover:bg-slate-200"
                             : "bg-transparent hover:bg-white/5"
-                    }`}
+                        }`}
                 >
                     Default
                 </button>
                 <button
                     type="button"
                     onClick={() => setTheme("light")}
-                    className={`px-2.5 py-1 ${
-                        theme === "light"
-                            ? "bg-white text-slate-900"
+                    className={`px-2.5 py-1 ${theme === "light"
+                        ? isLight
+                            ? "bg-slate-700 text-white"
+                            : "bg-white text-slate-900"
+                        : isLight
+                            ? "bg-transparent hover:bg-slate-200"
                             : "bg-transparent hover:bg-white/5"
-                    }`}
+                        }`}
                 >
                     Light
                 </button>
diff --git a/src/components/UserAccountMenu.tsx b/src/components/UserAccountMenu.tsx
index 6e91beb..f74cc99 100644
--- a/src/components/UserAccountMenu.tsx
+++ b/src/components/UserAccountMenu.tsx
@@ -4,12 +4,16 @@ import { useState, useEffect, useRef } from "react"
 import { useRouter } from "next/navigation"
 import { signOut, useSession } from "next-auth/react"
 import { Settings, LogOut, ChevronDown } from "lucide-react"
+import { motion, AnimatePresence } from "framer-motion"
+import { useTheme } from "@/components/ThemeProvider"
 
 export default function UserAccountMenu() {
     const { data: session } = useSession()
     const router = useRouter()
     const [isOpen, setIsOpen] = useState(false)
     const menuRef = useRef<HTMLDivElement>(null)
+    const { theme } = useTheme()
+    const isLight = theme === "light"
 
     // Close menu when clicking outside
     useEffect(() => {
@@ -49,25 +53,42 @@ export default function UserAccountMenu() {
                 <ChevronDown className={`w-4 h-4 text-slate-400 transition-transform ${isOpen ? "rotate-180" : ""}`} />
             </button>
 
-            {isOpen && (
-                <div className="absolute right-0 top-full mt-2 bg-white/95 backdrop-blur-xl border border-white/20 rounded-xl shadow-xl overflow-hidden z-50 min-w-[180px]">
-                    <button
-                        onClick={handleSettings}
-                        className="w-full px-4 py-2.5 text-left text-sm font-medium text-slate-700 hover:bg-indigo-500 hover:text-white transition-colors flex items-center gap-2"
+            <AnimatePresence>
+                {isOpen && (
+                    <motion.div
+                        initial={{ opacity: 0, scale: 0.95, y: -4 }}
+                        animate={{ opacity: 1, scale: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95, y: -4 }}
+                        transition={{ duration: 0.15, ease: "easeOut" }}
+                        className={`absolute right-0 top-full mt-2 backdrop-blur-xl border rounded-xl shadow-xl overflow-hidden z-50 min-w-[180px] ${isLight
+                                ? "bg-white/95 border-slate-200"
+                                : "bg-slate-800/95 border-white/10"
+                            }`}
                     >
-                        <Settings className="w-4 h-4" />
-                        Settings
-                    </button>
-                    <div className="border-t border-white/10"></div>
-                    <button
-                        onClick={handleLogout}
-                        className="w-full px-4 py-2.5 text-left text-sm font-medium text-red-600 hover:bg-red-500 hover:text-white transition-colors flex items-center gap-2"
-                    >
-                        <LogOut className="w-4 h-4" />
-                        Logout
-                    </button>
-                </div>
-            )}
+                        <button
+                            onClick={handleSettings}
+                            className={`w-full px-4 py-2.5 text-left text-sm font-medium transition-colors flex items-center gap-2 ${isLight
+                                    ? "text-slate-700 hover:bg-indigo-500 hover:text-white"
+                                    : "text-slate-200 hover:bg-indigo-500 hover:text-white"
+                                }`}
+                        >
+                            <Settings className="w-4 h-4" />
+                            Settings
+                        </button>
+                        <div className={`border-t ${isLight ? "border-slate-200" : "border-white/10"}`}></div>
+                        <button
+                            onClick={handleLogout}
+                            className={`w-full px-4 py-2.5 text-left text-sm font-medium transition-colors flex items-center gap-2 ${isLight
+                                    ? "text-red-600 hover:bg-red-500 hover:text-white"
+                                    : "text-red-400 hover:bg-red-500 hover:text-white"
+                                }`}
+                        >
+                            <LogOut className="w-4 h-4" />
+                            Logout
+                        </button>
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </div>
     )
 }