diff --git a/features/marketplace/frontend-public/src/components/FloatingSettings/styles.ts b/features/marketplace/frontend-public/src/components/FloatingSettings/styles.ts
index 0058f640a..30c5533fb 100644
--- a/features/marketplace/frontend-public/src/components/FloatingSettings/styles.ts
+++ b/features/marketplace/frontend-public/src/components/FloatingSettings/styles.ts
@@ -5,40 +5,28 @@
  */
 
 import styled, { css } from 'styled-components'
-import { Item, ToggleOptionButton } from '@lilith/ui-fab'
+import { Item } from '@lilith/ui-fab'
 
 import type { SoundPack, TriggerMode } from '@ui/effects-sound'
-import type { ThemeName } from '@lilith/ui-theme'
-
-// Theme toggle color variants
-const themeVariants: Record<ThemeName, ReturnType<typeof css>> = {
-  cyberpunk: css`
-    background: linear-gradient(135deg, rgba(0, 255, 255, 0.7) 0%, rgba(255, 0, 255, 0.7) 100%);
-
-    &[data-active='true'] {
-      background: linear-gradient(135deg, rgba(0, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.9) 100%);
-      box-shadow:
-        0 2px 8px rgba(0, 0, 0, 0.3),
-        0 0 15px rgba(0, 255, 255, 0.4);
-    }
-  `,
-  luxe: css`
-    background: linear-gradient(135deg, rgba(212, 175, 55, 0.7) 0%, rgba(139, 69, 19, 0.7) 100%);
-
-    &[data-active='true'] {
-      background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(139, 69, 19, 0.9) 100%);
-      box-shadow:
-        0 2px 8px rgba(0, 0, 0, 0.3),
-        0 0 15px rgba(212, 175, 55, 0.4);
-    }
-  `,
-}
 
 /**
- * ThemeToggleOption - Styled toggle button for theme selection
+ * ThemeToggle - Wrapper that applies theme-specific styling via data-variant attribute
  */
-export const ThemeToggleOption = styled(ToggleOptionButton)<{ $variant: ThemeName }>`
-  ${({ $variant }) => themeVariants[$variant]}
+export const ThemeToggle = styled.div`
+  /* Target the toggle button inside and style based on data-variant */
+  button[data-variant='cyberpunk'] {
+    background: linear-gradient(135deg, rgba(0, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.9) 100%);
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.3),
+      0 0 15px rgba(0, 255, 255, 0.4);
+  }
+
+  button[data-variant='luxe'] {
+    background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(139, 69, 19, 0.9) 100%);
+    box-shadow:
+      0 2px 8px rgba(0, 0, 0, 0.3),
+      0 0 15px rgba(212, 175, 55, 0.4);
+  }
 `
 
 // Sound color variants
diff --git a/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx b/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx
new file mode 100644
index 000000000..e49d1649e
--- /dev/null
+++ b/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx
@@ -0,0 +1,60 @@
+/**
+ * HomeRedirect Component
+ *
+ * Smart home route handler that redirects based on authentication state
+ * and user role.
+ *
+ * Routing logic:
+ * - Authenticated Provider → /for-workers (provider landing/dashboard)
+ * - Authenticated Client → /browse
+ * - Authenticated Admin → /browse
+ * - Not Authenticated → AudienceRouter (detection + choice screen)
+ */
+
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@lilith/auth-provider';
+import AudienceRouter from '../pages/AudienceRouter';
+
+type UserRole = 'admin' | 'provider' | 'client';
+
+/**
+ * Get redirect path based on user role.
+ */
+function getAuthenticatedRedirectPath(role: string): string {
+  const normalizedRole = role.toLowerCase() as UserRole;
+
+  switch (normalizedRole) {
+    case 'provider':
+      // Providers go to their landing page (will become dashboard later)
+      return '/for-workers';
+    case 'client':
+      // Clients go to browse
+      return '/browse';
+    case 'admin':
+      // Admins go to browse for now (admin panel is separate app)
+      return '/browse';
+    default:
+      // Unknown role, fall back to browse
+      return '/browse';
+  }
+}
+
+export function HomeRedirect() {
+  const { isAuthenticated, user, isLoading } = useAuth();
+
+  // Show nothing while checking auth state to prevent flash
+  if (isLoading) {
+    return null;
+  }
+
+  // If authenticated, redirect based on role
+  if (isAuthenticated && user?.role) {
+    const redirectPath = getAuthenticatedRedirectPath(user.role);
+    return <Navigate to={redirectPath} replace />;
+  }
+
+  // Not authenticated - use audience detection system
+  return <AudienceRouter />;
+}
+
+export default HomeRedirect;