Fuckups fixed

src/app/(dashboard)/dashboard/page.tsx

@@ -26,8 +26,10 @@ import {
 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)
@@ -65,20 +67,22 @@ export default function DashboardPage() {
 
   return (
     <div className="space-y-6 relative">
-      <StarField />
+      {theme === "starforce" && <StarField />}
       <div className="relative z-[1] space-y-6">
         <div>
           <PageHeader
             title={<span style={{fontFamily:"'Audiowide',sans-serif"}}>Dashboard</span>}
             description="Overview of your sales pipeline"
           >
-            <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>
-            <CrossedLightsabers />
+            {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" />

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 || "spidey"
+    const websiteTheme = result.rows[0]?.website_theme || "starforce"
     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 || "spidey"
+    const theme = body.websiteTheme || "starforce"
 
     await query(
       `UPDATE users SET preferences = preferences || $2::jsonb WHERE id = $1`,

src/app/globals.css

@@ -406,35 +406,6 @@ main {
   z-index: 0;
 }
 
-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;
-}
-
 @keyframes drift {
   0% { background-position: 0% 0%; }
   100% { background-position: 100% 100%; }

src/app/layout.tsx

@@ -1,8 +1,11 @@
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { ThemeProvider } from "@/providers/theme-provider"
+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",
@@ -31,8 +34,10 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={`${inter.variable} min-h-screen antialiased`}>
         <ThemeProvider attribute="class" defaultTheme="dark" disableTransitionOnChange>
-          {children}
-          <Toaster />
+          <WebsiteThemeProvider>
+            {children}
+            <Toaster />
+          </WebsiteThemeProvider>
         </ThemeProvider>
       </body>
     </html>