Fuckups fixed

src/components/layout/topbar.tsx

@@ -31,6 +31,8 @@ import {
   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 {
   onMenuClick: () => void;
@@ -39,6 +41,7 @@ interface TopbarProps {
 export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
+  const { websiteTheme } = useWebsiteTheme();
   const { user, logout } = useUser();
   const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } =
     useNotifications();
@@ -71,7 +74,7 @@ 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">
-        <CrmIcon />
+        {websiteTheme === "spidey" ? <CaptainAmericaShield /> : <CrmIcon />}
         <span className="text-[#CC0000] dark:text-[#FF1111] font-bold text-sm tracking-wide">
           CRM
         </span>

src/components/settings/theme-settings.tsx

@@ -6,7 +6,8 @@ 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 } from "lucide-react"
+import { Sun, Moon, Monitor, Sparkles, Shield } from "lucide-react"
+import { useWebsiteTheme } from "@/providers/website-theme-provider"
 
 const COLOR_THEME_KEY = "crm-color-theme"
 
@@ -29,6 +30,11 @@ const themeOptions = [
   { value: "ruby", label: "Ruby", color: "bg-red-600", ring: "ring-red-600" },
 ]
 
+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 {
   if (typeof window === "undefined") return "default"
   return localStorage.getItem(COLOR_THEME_KEY) || "default"
@@ -46,6 +52,7 @@ function applyColorTheme(theme: string) {
 
 export function ThemeSettings() {
   const { theme, setTheme } = useTheme()
+  const { websiteTheme, setWebsiteTheme } = useWebsiteTheme()
   const [colorTheme, setColorTheme] = useState("default")
   const [mounted, setMounted] = useState(false)
 
@@ -119,6 +126,36 @@ export function ThemeSettings() {
           </RadioGroup>
         </CardContent>
       </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Color Theme for Background</CardTitle>
+          <CardDescription>
+            Choose the website background theme.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <RadioGroup value={websiteTheme} onValueChange={setWebsiteTheme} className="grid grid-cols-2 gap-4">
+            {backgroundOptions.map(({ value, label, icon: Icon, color, ring, desc }) => (
+              <div key={value}>
+                <RadioGroupItem value={value} id={`bg-${value}`} className="peer sr-only" />
+                <Label
+                  htmlFor={`bg-${value}`}
+                  className={cn(
+                    "flex flex-col items-center gap-3 rounded-lg border-2 p-4 hover:bg-accent cursor-pointer transition-all",
+                    "peer-data-[state=checked]:border-primary peer-data-[state=checked]:bg-primary/5"
+                  )}
+                >
+                  <Icon className="h-6 w-6" />
+                  <div className={cn("h-8 w-8 rounded-full", color, ring, "ring-2 ring-offset-2 ring-offset-background")} />
+                  <span className="text-sm font-medium">{label}</span>
+                  <span className="text-xs text-muted-foreground">{desc}</span>
+                </Label>
+              </div>
+            ))}
+          </RadioGroup>
+        </CardContent>
+      </Card>
     </div>
   )
 }

src/components/shared/captain-america-shield.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+export function CaptainAmericaShield() {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 100 100"
+      aria-hidden="true"
+    >
+      <defs>
+        <clipPath id="shield-clip">
+          <polygon points="50,95 5,60 5,30 50,5 95,30 95,60" />
+        </clipPath>
+      </defs>
+      <g clip-path="url(#shield-clip)">
+        <circle cx="50" cy="45" r="45" fill="#c62828" />
+        <circle cx="50" cy="45" r="35" fill="#efefef" />
+        <circle cx="50" cy="45" r="25" fill="#c62828" />
+        <circle cx="50" cy="45" r="15" fill="#1565c0" />
+        <polygon points="50,32 56,47 72,48 60,58 64,75 50,64 36,75 40,58 28,48 44,47" fill="#efefef" />
+      </g>
+      <polygon
+        points="50,95 5,60 5,30 50,5 95,30 95,60"
+        fill="none"
+        stroke="#c62828"
+        stroke-width="1.5"
+      />
+    </svg>
+  )
+}