diff --git a/app/dashboard/admin/page.tsx b/app/dashboard/admin/page.tsx
index 85e4661..def9a4e 100644
--- a/app/dashboard/admin/page.tsx
+++ b/app/dashboard/admin/page.tsx
@@ -403,11 +403,12 @@ export default function AdminPage() {
       </div>
 
       <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
-        <TabsList>
+        <TabsList className="bg-muted/20 p-1 border border-border/40 backdrop-blur-sm h-auto">
           <TabsTrigger
             value="analytics"
             onMouseEnter={() => handleTabHover("analytics")}
             onFocus={() => handleTabFocus("analytics")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Analytics
           </TabsTrigger>
@@ -415,6 +416,7 @@ export default function AdminPage() {
             value="management"
             onMouseEnter={() => handleTabHover("management")}
             onFocus={() => handleTabFocus("management")}
+            className="data-[state=active]:bg-background/80 data-[state=active]:backdrop-blur-sm data-[state=active]:text-foreground data-[state=active]:shadow-sm px-6 py-2 transition-all"
           >
             Management
           </TabsTrigger>
diff --git a/app/dashboard/admin/vendors/page.tsx b/app/dashboard/admin/vendors/page.tsx
index cfc2c09..48bff9e 100644
--- a/app/dashboard/admin/vendors/page.tsx
+++ b/app/dashboard/admin/vendors/page.tsx
@@ -61,7 +61,7 @@ export default function AdminVendorsPage() {
       setUpdating(true);
       await fetchClient(`/admin/vendors/${editingVendor._id}/store-id`, {
         method: 'PUT',
-        body: JSON.stringify({ storeId: newStoreId })
+        body: { storeId: newStoreId }
       });
 
       toast({
diff --git a/components/admin/InviteVendorCard.tsx b/components/admin/InviteVendorCard.tsx
index b7295b6..0732f58 100644
--- a/components/admin/InviteVendorCard.tsx
+++ b/components/admin/InviteVendorCard.tsx
@@ -1,47 +1,104 @@
-"use client";
 import { useState } from "react";
 import { fetchClient } from "@/lib/api-client";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Copy, Check, Ticket, Loader2, RefreshCw } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
 
 export default function InviteVendorCard() {
   const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState<string | null>(null);
   const [code, setCode] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
 
   async function handleInvite() {
     setLoading(true);
-    setMessage(null);
     setCode(null);
+    setCopied(false);
     try {
       const res = await fetchClient<{ code: string }>("/admin/invitations", { method: "POST" });
-      setMessage("Invitation created");
       setCode(res.code);
+      toast({
+        title: "Invitation Created",
+        description: "New vendor invitation code generated successfully.",
+      });
     } catch (e: any) {
-      setMessage(e?.message || "Failed to send invitation");
+      toast({
+        title: "Error",
+        description: e?.message || "Failed to generate invitation",
+        variant: "destructive",
+      });
     } finally {
       setLoading(false);
     }
   }
 
+  const copyToClipboard = () => {
+    if (!code) return;
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    toast({
+      title: "Copied",
+      description: "Invitation code copied to clipboard",
+    });
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
-    <div className="rounded-lg border border-border/60 bg-background p-4 h-full min-h-[200px]">
-      <h2 className="font-medium">Invite Vendor</h2>
-      <p className="text-sm text-muted-foreground mt-1">Generate a new invitation code</p>
-      <div className="mt-4 space-y-3">
-        <button
-          onClick={handleInvite}
-          className="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm text-primary-foreground disabled:opacity-60"
-          disabled={loading}
-        >
-          {loading ? "Generating..." : "Generate Invite Code"}
-        </button>
-        {message && <p className="text-xs text-muted-foreground">{message}</p>}
-        {code && (
-          <div className="text-sm">
-            Code: <span className="font-mono px-1.5 py-0.5 rounded bg-muted">{code}</span>
+    <Card className="h-full border-border/40 bg-background/50 backdrop-blur-sm shadow-sm flex flex-col">
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-base font-medium flex items-center gap-2">
+            <Ticket className="h-4 w-4 text-primary" />
+            Invite Vendor
+          </CardTitle>
+        </div>
+        <CardDescription>Generate a one-time invitation code.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col justify-center gap-4">
+        {code ? (
+          <div className="space-y-3 animate-in fade-in zoom-in-95 duration-300">
+            <div className="p-3 rounded-md bg-muted/50 border border-border/50 text-center relative group">
+              <span className="font-mono text-xl font-bold tracking-widest text-primary">{code}</span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1 h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                onClick={copyToClipboard}
+              >
+                {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+              </Button>
+            </div>
+            <p className="text-xs text-center text-muted-foreground">
+              Share this code with the new vendor. It expires in 7 days.
+            </p>
+          </div>
+        ) : (
+          <div className="text-center py-2 text-sm text-muted-foreground/80">
+            Click generate to create a new code.
           </div>
         )}
-      </div>
-    </div>
+      </CardContent>
+      <CardFooter className="pt-0">
+        <Button
+          onClick={handleInvite}
+          disabled={loading}
+          className="w-full bg-primary/90 hover:bg-primary shadow-sm"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Generating...
+            </>
+          ) : (
+            <>
+              {code ? <RefreshCw className="mr-2 h-4 w-4" /> : <Ticket className="mr-2 h-4 w-4" />}
+              {code ? "Generate Another" : "Generate Code"}
+            </>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
   );
 }
 
diff --git a/components/dashboard/content.tsx b/components/dashboard/content.tsx
index de89b0b..f8f9c62 100644
--- a/components/dashboard/content.tsx
+++ b/components/dashboard/content.tsx
@@ -181,7 +181,7 @@ export default function Content({ username, orderStats }: ContentProps) {
                       <div className="flex-grow min-w-0">
                         <h4 className="font-semibold text-lg truncate group-hover:text-primary transition-colors">{product.name}</h4>
                         <div className="flex items-center gap-3 mt-0.5">
-                          <span className="text-sm text-muted-foreground font-medium">£{product.price.toFixed(2)}</span>
+                          <span className="text-sm text-muted-foreground font-medium">£{(Number(product.price) || 0).toFixed(2)}</span>
                           <span className="h-1 w-1 rounded-full bg-muted-foreground/30" />
                           <span className="text-xs text-muted-foreground">ID: {product.id.slice(-6)}</span>
                         </div>