Fuckups fixed

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>
   )
 }