From 214c4a18521668b537fa09c4935bb2291954129c Mon Sep 17 00:00:00 2001
From: Hannah_Bagga <hannahkbagga.28@gmail.com>
Date: Fri, 26 Jun 2026 19:22:54 +0200
Subject: [PATCH] Spiderman Theme Fixed

---
 Web_Backgrounds/starforce-theme.css           | 64 -------------------
 Web_Backgrounds/starforce-tokens.json         | 59 -----------------
 src/app/(dashboard)/dashboard/page.tsx        | 18 +-----
 src/app/api/dashboard/route.ts                | 10 +--
 src/app/api/settings/website-theme/route.ts   |  4 +-
 src/app/layout.tsx                            |  1 -
 .../dashboard/lead-status-chart.tsx           |  2 +
 .../dashboard/recent-leads-table.tsx          | 10 +--
 .../dashboard/stat-card-skeleton.tsx          | 20 ++++++
 src/components/dashboard/stat-card.tsx        | 12 +++-
 src/components/layout/app-shell.tsx           |  4 +-
 src/components/layout/topbar.tsx              | 39 ++++++++++-
 src/components/leads/lead-status-badge.tsx    | 20 +++---
 src/components/settings/theme-settings.tsx    |  3 +-
 src/lib/constants.ts                          | 10 +--
 src/providers/website-theme-provider.tsx      |  7 +-
 16 files changed, 104 insertions(+), 179 deletions(-)
 delete mode 100644 Web_Backgrounds/starforce-theme.css
 delete mode 100644 Web_Backgrounds/starforce-tokens.json

diff --git a/Web_Backgrounds/starforce-theme.css b/Web_Backgrounds/starforce-theme.css
deleted file mode 100644
index f775502..0000000
--- a/Web_Backgrounds/starforce-theme.css
+++ /dev/null
@@ -1,64 +0,0 @@
-/* ============================================================================
-   Starforce Theme — Dark cosmic with crimson accents and neon green glow
-   Captures the current starfield + drift + glow effects used live.
-   ============================================================================ */
-
-.theme-starforce {
-  --background: 0 0% 10%;
-  --foreground: 210 40% 98%;
-  --card: 0 0% 9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 11%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 0 100% 53%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 0 100% 53%;
-  --radius: 0.5rem;
-  --sidebar: 0 0% 11%;
-  --sidebar-foreground: 210 40% 98%;
-  --sidebar-primary: 145 65% 50%;
-  --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 217.2 32.6% 17.5%;
-  --sidebar-accent-foreground: 210 40% 98%;
-  --sidebar-border: 217.2 32.6% 17.5%;
-  --sidebar-ring: 0 100% 53%;
-}
-
-.theme-starforce body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-image:
-    radial-gradient(1px 1px at 10% 20%, rgba(100,100,120,0.4) 0%, transparent 100%),
-    radial-gradient(1px 1px at 20% 40%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 30% 10%, rgba(80,80,100,0.5) 0%, transparent 100%),
-    radial-gradient(1px 1px at 40% 60%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1px 1px at 50% 80%, rgba(90,90,110,0.4) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 60% 30%, rgba(80,80,100,0.5) 0%, transparent 100%),
-    radial-gradient(1px 1px at 70% 50%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1px 1px at 80% 90%, rgba(90,90,110,0.4) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 90% 15%, rgba(80,80,100,0.5) 0%, transparent 100%),
-    radial-gradient(1px 1px at 15% 70%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1px 1px at 25% 90%, rgba(90,90,110,0.4) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 35% 35%, rgba(80,80,100,0.5) 0%, transparent 100%),
-    radial-gradient(1px 1px at 45% 15%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1px 1px at 55% 75%, rgba(90,90,110,0.4) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 65% 55%, rgba(80,80,100,0.5) 0%, transparent 100%),
-    radial-gradient(1px 1px at 75% 25%, rgba(100,100,120,0.3) 0%, transparent 100%),
-    radial-gradient(1px 1px at 85% 65%, rgba(90,90,110,0.4) 0%, transparent 100%),
-    radial-gradient(1.5px 1.5px at 95% 45%, rgba(80,80,100,0.5) 0%, transparent 100%);
-  background-size: 200% 200%;
-  animation: drift 60s linear infinite;
-}
diff --git a/Web_Backgrounds/starforce-tokens.json b/Web_Backgrounds/starforce-tokens.json
deleted file mode 100644
index 0a2ae4d..0000000
--- a/Web_Backgrounds/starforce-tokens.json
+++ /dev/null
@@ -1,59 +0,0 @@
-{
-  "theme": {
-    "id": "starforce",
-    "name": "Starforce",
-    "description": "Dark cosmic theme with crimson accents, starfield background, and neon green glow effects",
-    "type": "dark",
-    "default": true
-  },
-  "colors": {
-    "background": "hsl(0, 0%, 10%)",
-    "foreground": "hsl(210, 40%, 98%)",
-    "card": "hsl(0, 0%, 9%)",
-    "cardForeground": "hsl(210, 40%, 98%)",
-    "popover": "hsl(222.2, 84%, 11%)",
-    "popoverForeground": "hsl(210, 40%, 98%)",
-    "primary": "hsl(0, 100%, 53%)",
-    "primaryForeground": "hsl(222.2, 47.4%, 11.2%)",
-    "secondary": "hsl(217.2, 32.6%, 17.5%)",
-    "secondaryForeground": "hsl(210, 40%, 98%)",
-    "muted": "hsl(217.2, 32.6%, 17.5%)",
-    "mutedForeground": "hsl(215, 20.2%, 65.1%)",
-    "accent": "hsl(217.2, 32.6%, 17.5%)",
-    "accentForeground": "hsl(210, 40%, 98%)",
-    "destructive": "hsl(0, 62.8%, 30.6%)",
-    "destructiveForeground": "hsl(210, 40%, 98%)",
-    "border": "hsl(217.2, 32.6%, 17.5%)",
-    "input": "hsl(217.2, 32.6%, 17.5%)",
-    "ring": "hsl(0, 100%, 53%)",
-    "sidebar": "hsl(0, 0%, 11%)",
-    "sidebarForeground": "hsl(210, 40%, 98%)",
-    "sidebarPrimary": "hsl(145, 65%, 50%)",
-    "sidebarPrimaryForeground": "hsl(0, 0%, 100%)",
-    "sidebarAccent": "hsl(217.2, 32.6%, 17.5%)",
-    "sidebarAccentForeground": "hsl(210, 40%, 98%)",
-    "sidebarBorder": "hsl(217.2, 32.6%, 17.5%)",
-    "sidebarRing": "hsl(0, 100%, 53%)"
-  },
-  "borderRadius": "0.5rem",
-  "typography": {
-    "fontFamily": "Inter, sans-serif",
-    "headingFont": "Inter, sans-serif"
-  },
-  "keyColors": {
-    "primary": "#FF0000",
-    "background": "#1a1a1a",
-    "card": "#171717",
-    "sidebar": "#1c1c1c",
-    "border": "#2a2a35",
-    "text": "#e8e8ef",
-    "mutedText": "#888888",
-    "glow": "#39ff14"
-  },
-  "effects": {
-    "starfield": true,
-    "starTwinkle": true,
-    "starDrift": true,
-    "textGlow": "#39ff14"
-  }
-}
diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
index 0a9198f..d061bf2 100644
--- a/src/app/(dashboard)/dashboard/page.tsx
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -24,12 +24,8 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { DashboardStats } from "@/types"
-import { CrossedLightsabers } from "@/components/dashboard/crossed-lightsabers"
-import { StarField } from "@/components/dashboard/star-field"
-import { useWebsiteTheme } from "@/providers/website-theme-provider"
 
 export default function DashboardPage() {
-  const { websiteTheme: theme } = useWebsiteTheme()
   const [period, setPeriod] = useState("6months")
   const [stats, setStats] = useState<DashboardStats | null>(null)
   const pollingRef = useRef<NodeJS.Timeout | null>(null)
@@ -67,22 +63,12 @@ export default function DashboardPage() {
 
   return (
     <div className="space-y-6 relative">
-      {theme === "starforce" && <StarField />}
       <div className="relative z-[1] space-y-6">
         <div>
           <PageHeader
-            title={<span style={{fontFamily:"'Audiowide',sans-serif"}}>Dashboard</span>}
+            title={<span style={{fontFamily:"'Bangers',cursive",letterSpacing:"0.05em"}}>Dashboard</span>}
             description="Overview of your sales pipeline"
           >
-            {theme === "starforce" && (
-              <span
-                className="pointer-events-none select-none text-5xl text-gray-600 dark:text-[#b0f0c0] tracking-wider font-bold text-glow whitespace-nowrap"
-                style={{ fontFamily: "'Cormorant Garamond', serif" }}
-              >
-                Trust the Force, Find your Path
-              </span>
-            )}
-            {theme === "starforce" && <CrossedLightsabers />}
             <Select value={period} onValueChange={setPeriod}>
               <SelectTrigger className="h-9 w-[160px]">
                 <ListFilter className="mr-2 h-4 w-4" />
@@ -119,7 +105,7 @@ export default function DashboardPage() {
         <RecentLeadsTable leads={stats?.recentLeads ?? []} />
       </div>
       {/* Daily Bugle watermark */}
-      <div className="absolute top-12 right-4 pointer-events-none select-none z-0 opacity-[0.04] dark:opacity-[0.06]">
+      <div className="absolute top-12 right-4 pointer-events-none select-none z-0 opacity-[0.09] dark:opacity-[0.15]">
         <span className="text-[96px] font-['Bangers',cursive] leading-none text-[#CC0000] dark:text-[#FF1111] tracking-wider">
           DAILY BUGLE
         </span>
diff --git a/src/app/api/dashboard/route.ts b/src/app/api/dashboard/route.ts
index f1a2112..b23ad1d 100644
--- a/src/app/api/dashboard/route.ts
+++ b/src/app/api/dashboard/route.ts
@@ -196,11 +196,11 @@ export async function GET(request: NextRequest) {
       trends,
       recentLeads: mappedLeads.slice(0, 10),
       statusDistribution: [
-        { name: "Open", value: currentCounts.open, color: "#3b82f6" },
-        { name: "Contacted", value: currentCounts.contacted, color: "#f59e0b" },
-        { name: "Pending", value: currentCounts.pending, color: "#8b5cf6" },
-        { name: "Closed", value: currentCounts.closed, color: "#10b981" },
-        { name: "Ignored", value: currentCounts.ignored, color: "#6B7280" },
+        { name: "Open", value: currentCounts.open, color: "#FFFFFF" },
+        { name: "Contacted", value: currentCounts.contacted, color: "#dc2626" },
+        { name: "Pending", value: currentCounts.pending, color: "#1e3a8a" },
+        { name: "Closed", value: currentCounts.closed, color: "#60a5fa" },
+        { name: "Ignored", value: currentCounts.ignored, color: "#000000" },
       ],
       periodLabel: periodLabels[period] ?? "Selected period",
     }
diff --git a/src/app/api/settings/website-theme/route.ts b/src/app/api/settings/website-theme/route.ts
index c3abd42..4996f7d 100644
--- a/src/app/api/settings/website-theme/route.ts
+++ b/src/app/api/settings/website-theme/route.ts
@@ -12,7 +12,7 @@ export async function GET() {
       [user.id],
     )
 
-    const websiteTheme = result.rows[0]?.website_theme || "starforce"
+    const websiteTheme = result.rows[0]?.website_theme || "spidey"
     return NextResponse.json({ websiteTheme })
   } catch (error) {
     console.error("Website theme GET error:", error)
@@ -26,7 +26,7 @@ export async function PUT(request: NextRequest) {
     if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
 
     const body = await request.json()
-    const theme = body.websiteTheme || "starforce"
+    const theme = body.websiteTheme || "spidey"
 
     await query(
       `UPDATE users SET preferences = preferences || $2::jsonb WHERE id = $1`,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f548916..77f23f2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,7 +5,6 @@ import { WebsiteThemeProvider } from "@/providers/website-theme-provider"
 import { Toaster } from "@/components/ui/sonner"
 import "./globals.css"
 import "../../Web_Backgrounds/spidey-theme.css"
-import "../../Web_Backgrounds/starforce-theme.css"
 
 const inter = Inter({
   variable: "--font-inter",
diff --git a/src/components/dashboard/lead-status-chart.tsx b/src/components/dashboard/lead-status-chart.tsx
index e3f2ca3..d40d7fa 100644
--- a/src/components/dashboard/lead-status-chart.tsx
+++ b/src/components/dashboard/lead-status-chart.tsx
@@ -98,6 +98,8 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
                     key={i}
                     d={arcPath(160, 160, oR, iR, s.start, s.end)}
                     fill={`url(#chart-grad-${i})`}
+                    stroke="#d4d4d4"
+                    strokeWidth="1"
                     opacity={hov !== null && !isH ? 0.3 : 1}
                     style={{
                       cursor: "pointer",
diff --git a/src/components/dashboard/recent-leads-table.tsx b/src/components/dashboard/recent-leads-table.tsx
index 1b7d799..716b423 100644
--- a/src/components/dashboard/recent-leads-table.tsx
+++ b/src/components/dashboard/recent-leads-table.tsx
@@ -9,11 +9,11 @@ import { Lead } from "@/types"
 import { ArrowRight } from "lucide-react"
 
 const statusStyles: Record<string, string> = {
-  open: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
-  contacted: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
-  pending: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
-  closed: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
-  ignored: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+  open: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
+  contacted: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
+  pending: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
+  closed: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
+  ignored: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
 }
 
 interface RecentLeadsTableProps {
diff --git a/src/components/dashboard/stat-card-skeleton.tsx b/src/components/dashboard/stat-card-skeleton.tsx
index f74f8d5..53a9993 100644
--- a/src/components/dashboard/stat-card-skeleton.tsx
+++ b/src/components/dashboard/stat-card-skeleton.tsx
@@ -1,6 +1,26 @@
 "use client"
 
+import { useWebsiteTheme } from "@/providers/website-theme-provider"
+
 export function StatCardSkeleton() {
+  const { websiteTheme } = useWebsiteTheme()
+
+  if (websiteTheme === "spidey") {
+    return (
+      <div className="col-span-full flex flex-col items-center justify-center py-20">
+        <p className="text-[#CC0000] dark:text-[#FF1111] text-5xl font-['Bangers',cursive] animate-pulse">
+          THWIP!
+        </p>
+        <p className="text-[#444444] dark:text-[#AAAAAA] text-sm mt-2">
+          Loading your data...
+        </p>
+        <div className="w-48 h-1 rounded-full overflow-hidden bg-[#E0E0E0] dark:bg-[#222222] mt-4">
+          <div className="w-full h-full rounded-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] animate-[loading_1.5s_ease-in-out_infinite]" />
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="col-span-full flex flex-col items-center justify-center py-20">
       <p className="text-[#444444] dark:text-[#AAAAAA] text-sm">
diff --git a/src/components/dashboard/stat-card.tsx b/src/components/dashboard/stat-card.tsx
index 4e8e4e5..c8cf006 100644
--- a/src/components/dashboard/stat-card.tsx
+++ b/src/components/dashboard/stat-card.tsx
@@ -122,7 +122,17 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
         {/* Red/Blue gradient top strip */}
         <div className={`h-1 w-full bg-gradient-to-r ${stripColor} ${stripGlow} shadow-sm`} />
 
-        <CardContent className="p-6 flex flex-col">
+        {/* Action lines on hover */}
+        <div
+          className="absolute inset-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-0"
+          style={{
+            backgroundImage: `url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23CC0000' stroke-width='0.4' opacity='0.15'%3E%3Cline x1='100' y1='100' x2='0' y2='0'/%3E%3Cline x1='100' y1='100' x2='50' y2='0'/%3E%3Cline x1='100' y1='100' x2='100' y2='0'/%3E%3Cline x1='100' y1='100' x2='150' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='0'/%3E%3Cline x1='100' y1='100' x2='200' y2='50'/%3E%3Cline x1='100' y1='100' x2='200' y2='100'/%3E%3Cline x1='100' y1='100' x2='200' y2='150'/%3E%3Cline x1='100' y1='100' x2='200' y2='200'/%3E%3Cline x1='100' y1='100' x2='150' y2='200'/%3E%3Cline x1='100' y1='100' x2='100' y2='200'/%3E%3Cline x1='100' y1='100' x2='50' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='200'/%3E%3Cline x1='100' y1='100' x2='0' y2='150'/%3E%3Cline x1='100' y1='100' x2='0' y2='100'/%3E%3Cline x1='100' y1='100' x2='0' y2='50'/%3E%3C/g%3E%3C/svg%3E")`,
+            backgroundSize: "cover",
+            backgroundPosition: "center",
+          }}
+        />
+
+        <CardContent className="p-6 flex flex-col relative z-[1]">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-sm font-medium text-muted-foreground">{title}</p>
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 8d0ffc3..5ee10fe 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -44,7 +44,7 @@ export function AppShell({ children }: AppShellProps) {
       <div className="fixed top-0 left-0 right-0 h-[3px] w-full bg-gradient-to-r from-[#CC0000] via-[#FFFFFF] to-[#0033CC] dark:from-[#FF1111] dark:via-[#FFFFFF] dark:to-[#1144FF] z-50" />
 
       {/* Corner spider webs */}
-      <div className="hidden lg:block fixed top-0 left-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+      <div className="hidden lg:block fixed top-0 left-0 pointer-events-none z-0 opacity-[0.15] dark:opacity-[0.25]">
         <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg">
           <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
           <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
@@ -61,7 +61,7 @@ export function AppShell({ children }: AppShellProps) {
           <path d="M0,180 Q180,180 180,0" stroke="#CC0000" strokeWidth="0.8" fill="none"/>
         </svg>
       </div>
-      <div className="hidden lg:block fixed top-0 right-0 pointer-events-none z-0 opacity-[0.07] dark:opacity-[0.12]">
+      <div className="hidden lg:block fixed top-0 right-0 pointer-events-none z-0 opacity-[0.15] dark:opacity-[0.25]">
         <svg width="180" height="180" viewBox="0 0 180 180" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ transform: "scaleX(-1)" }}>
           <line x1="0" y1="0" x2="180" y2="0" stroke="#CC0000" strokeWidth="0.8"/>
           <line x1="0" y1="0" x2="180" y2="60" stroke="#CC0000" strokeWidth="0.8"/>
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index a102908..f719421 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -32,8 +32,6 @@ import {
   CheckCheck,
   Trash2,
 } from "lucide-react";
-import { CrmIcon } from "./crm-icon";
-import { CaptainAmericaShield } from "@/components/shared/captain-america-shield";
 import { useWebsiteTheme } from "@/providers/website-theme-provider";
 
 interface TopbarProps {
@@ -77,7 +75,36 @@ export function Topbar({ onMenuClick }: TopbarProps) {
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-card dark:bg-[#141414] px-4 lg:px-6 relative overflow-hidden">
       {/* Logo */}
       <div className="flex items-center gap-2 mr-2 shrink-0">
-        {websiteTheme === "spidey" ? <CaptainAmericaShield /> : <CrmIcon />}
+        {websiteTheme === "spidey" && (
+          <>
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="dark:hidden shrink-0">
+              <circle cx="14" cy="14" r="14" fill="white"/>
+              <ellipse cx="14" cy="14" rx="4" ry="5" fill="#CC0000"/>
+              <ellipse cx="14" cy="14" rx="2" ry="2.5" fill="#CC0000"/>
+              <line x1="14" y1="9" x2="6" y2="5" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="9" x2="22" y2="5" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="12" x2="5" y2="11" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="12" x2="23" y2="11" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="19" x2="6" y2="23" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="19" x2="22" y2="23" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="16" x2="5" y2="17" stroke="#CC0000" strokeWidth="1.2"/>
+              <line x1="14" y1="16" x2="23" y2="17" stroke="#CC0000" strokeWidth="1.2"/>
+            </svg>
+            <svg width="28" height="28" viewBox="0 0 28 28" fill="none" className="hidden dark:block shrink-0">
+              <circle cx="14" cy="14" r="14" fill="#1A1A1A"/>
+              <ellipse cx="14" cy="14" rx="4" ry="5" fill="#FF1111"/>
+              <ellipse cx="14" cy="14" rx="2" ry="2.5" fill="#FF1111"/>
+              <line x1="14" y1="9" x2="6" y2="5" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="9" x2="22" y2="5" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="12" x2="5" y2="11" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="12" x2="23" y2="11" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="19" x2="6" y2="23" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="19" x2="22" y2="23" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="16" x2="5" y2="17" stroke="#FF1111" strokeWidth="1.2"/>
+              <line x1="14" y1="16" x2="23" y2="17" stroke="#FF1111" strokeWidth="1.2"/>
+            </svg>
+          </>
+        )}
         <span className="text-[#CC0000] dark:text-[#FF1111] font-bold text-sm tracking-wide">
           CRM
         </span>
@@ -258,6 +285,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+      {websiteTheme === "spidey" && (
+        <div className="absolute right-0 top-0 bottom-0 w-[6px] pointer-events-none opacity-80 rounded-r-[16px] overflow-hidden">
+          <div className="h-1/2 bg-[#CC0000] dark:bg-[#FF1111]" />
+          <div className="h-1/2 bg-[#0033CC] dark:bg-[#1144FF]" />
+        </div>
+      )}
       <BugReportModal open={bugModalOpen} onClose={() => setBugModalOpen(false)} />
     </header>
   );
diff --git a/src/components/leads/lead-status-badge.tsx b/src/components/leads/lead-status-badge.tsx
index 6675da5..ee423af 100644
--- a/src/components/leads/lead-status-badge.tsx
+++ b/src/components/leads/lead-status-badge.tsx
@@ -7,23 +7,23 @@ import { cn } from "@/lib/utils"
 const statusConfig: Record<LeadStatus, { label: string; class: string }> = {
   open: {
     label: "Open",
-    class: "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20",
+    class: "bg-white/40 text-gray-700 dark:text-gray-300 border-gray-300/50 dark:border-gray-600/50",
   },
   contacted: {
     label: "Contacted",
-    class: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
+    class: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
   },
   pending: {
     label: "Pending",
-    class: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/20",
+    class: "bg-blue-900/10 text-blue-900 dark:text-blue-300 border-blue-900/20",
   },
   closed: {
     label: "Closed",
-    class: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
+    class: "bg-blue-400/10 text-blue-600 dark:text-blue-300 border-blue-400/20",
   },
   ignored: {
     label: "Ignored",
-    class: "bg-zinc-500/10 text-zinc-600 dark:text-zinc-400 border-zinc-500/20",
+    class: "bg-black/10 text-black dark:text-gray-300 border-black/20 dark:border-black/40",
   },
 }
 
@@ -37,11 +37,11 @@ export function LeadStatusBadge({ status, className }: LeadStatusBadgeProps) {
   return (
     <Badge variant="outline" className={cn(config.class, className)}>
       <span className={cn("mr-1.5 h-1.5 w-1.5 rounded-full", {
-        "bg-blue-500": status === "open",
-        "bg-amber-500": status === "contacted",
-        "bg-purple-500": status === "pending",
-        "bg-emerald-500": status === "closed",
-        "bg-zinc-500": status === "ignored",
+        "bg-white border border-gray-300 dark:border-gray-500": status === "open",
+        "bg-red-500": status === "contacted",
+        "bg-blue-900": status === "pending",
+        "bg-blue-400": status === "closed",
+        "bg-black": status === "ignored",
       })} />
       {config.label}
     </Badge>
diff --git a/src/components/settings/theme-settings.tsx b/src/components/settings/theme-settings.tsx
index dedca1e..2a09fcf 100644
--- a/src/components/settings/theme-settings.tsx
+++ b/src/components/settings/theme-settings.tsx
@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Label } from "@/components/ui/label"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { cn } from "@/lib/utils"
-import { Sun, Moon, Monitor, Sparkles, Shield } from "lucide-react"
+import { Sun, Moon, Monitor, Shield } from "lucide-react"
 import { useWebsiteTheme } from "@/providers/website-theme-provider"
 
 const COLOR_THEME_KEY = "crm-color-theme"
@@ -32,7 +32,6 @@ const themeOptions = [
 
 const backgroundOptions = [
   { value: "spidey", label: "Spidey", icon: Shield, color: "bg-red-600", ring: "ring-red-600", desc: "Dark theme with red accents" },
-  { value: "starforce", label: "StarForce", icon: Sparkles, color: "bg-red-700", ring: "ring-red-700", desc: "Cosmic dark with starfield & green glow" },
 ]
 
 function getStoredColorTheme(): string {
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index d4e4485..80bc133 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,9 +1,9 @@
 export const LEAD_STATUSES = {
-  open: { label: "Open", color: "bg-blue-500" },
-  contacted: { label: "Contacted", color: "bg-amber-500" },
-  pending: { label: "Pending", color: "bg-purple-500" },
-  closed: { label: "Closed", color: "bg-emerald-500" },
-  ignored: { label: "Ignored", color: "bg-zinc-500" },
+  open: { label: "Open", color: "bg-white" },
+  contacted: { label: "Contacted", color: "bg-red-500" },
+  pending: { label: "Pending", color: "bg-blue-900" },
+  closed: { label: "Closed", color: "bg-blue-400" },
+  ignored: { label: "Ignored", color: "bg-black" },
 } as const
 
 export const LEAD_SOURCES = [
diff --git a/src/providers/website-theme-provider.tsx b/src/providers/website-theme-provider.tsx
index a86dd7f..55101e9 100644
--- a/src/providers/website-theme-provider.tsx
+++ b/src/providers/website-theme-provider.tsx
@@ -6,7 +6,6 @@ const WEBSITE_THEME_KEY = "crm-website-theme"
 
 const themeClasses: Record<string, string> = {
   spidey: "theme-spidey",
-  starforce: "theme-starforce",
 }
 
 interface WebsiteThemeContextValue {
@@ -39,7 +38,7 @@ function storeTheme(theme: string) {
 }
 
 export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
-  const [websiteTheme, setWebsiteThemeState] = useState<string>("starforce")
+  const [websiteTheme, setWebsiteThemeState] = useState<string>("spidey")
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -53,13 +52,13 @@ export function WebsiteThemeProvider({ children }: { children: ReactNode }) {
     fetch("/api/settings/website-theme")
       .then((res) => (res.ok ? res.json() : null))
       .then((data) => {
-        const theme = data?.websiteTheme || "starforce"
+        const theme = data?.websiteTheme || "spidey"
         setWebsiteThemeState(theme)
         storeTheme(theme)
         applyWebsiteTheme(theme)
       })
       .catch(() => {
-        applyWebsiteTheme("starforce")
+        applyWebsiteTheme("spidey")
       })
       .finally(() => setLoading(false))
   }, [])