diff --git a/frontend/src/pages/account/BrandingSettingsPage.tsx b/frontend/src/pages/account/BrandingSettingsPage.tsx
new file mode 100644
index 00000000..b186247b
--- /dev/null
+++ b/frontend/src/pages/account/BrandingSettingsPage.tsx
@@ -0,0 +1,308 @@
+import { useEffect, useState } from 'react'
+import { Palette, Loader2, AlertCircle, Save } from 'lucide-react'
+import { PageMeta } from '@/components/common/PageMeta'
+import { apiClient } from '@/api/client'
+import { toast } from '@/lib/toast'
+import { cn } from '@/lib/utils'
+
+interface AccountBranding {
+ logo_url: string | null
+ primary_color: string | null
+ company_name: string | null
+}
+
+const DEFAULT_COLOR = '#06b6d4'
+
+export function BrandingSettingsPage() {
+ const [branding, setBranding] = useState(null)
+ const [isLoading, setIsLoading] = useState(true)
+ const [isSaving, setIsSaving] = useState(false)
+ const [error, setError] = useState(null)
+
+ // Form state
+ const [logoUrl, setLogoUrl] = useState('')
+ const [primaryColor, setPrimaryColor] = useState(DEFAULT_COLOR)
+ const [companyName, setCompanyName] = useState('')
+
+ useEffect(() => {
+ loadBranding()
+ }, [])
+
+ const loadBranding = async () => {
+ setIsLoading(true)
+ setError(null)
+ try {
+ const res = await apiClient.get('/accounts/me/branding')
+ const data = res.data
+ setBranding(data)
+ setLogoUrl(data.logo_url ?? '')
+ setPrimaryColor(data.primary_color ?? DEFAULT_COLOR)
+ setCompanyName(data.company_name ?? '')
+ } catch (err) {
+ console.error('Failed to load branding:', err)
+ setError('Failed to load branding settings')
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const handleSave = async () => {
+ setIsSaving(true)
+ try {
+ const res = await apiClient.patch('/accounts/me/branding', {
+ logo_url: logoUrl.trim() || null,
+ primary_color: primaryColor !== DEFAULT_COLOR ? primaryColor : null,
+ company_name: companyName.trim() || null,
+ })
+ setBranding(res.data)
+ toast.success('Branding settings saved')
+ } catch (err) {
+ const axiosErr = err as { response?: { data?: { detail?: string } } }
+ toast.error(axiosErr.response?.data?.detail ?? 'Failed to save branding settings')
+ console.error(err)
+ } finally {
+ setIsSaving(false)
+ }
+ }
+
+ const isDirty =
+ logoUrl !== (branding?.logo_url ?? '') ||
+ primaryColor !== (branding?.primary_color ?? DEFAULT_COLOR) ||
+ companyName !== (branding?.company_name ?? '')
+
+ if (isLoading) {
+ return (
+ <>
+ ) {
@@ -252,6 +253,14 @@ export const router = sentryCreateBrowserRouter([
),
},
+ {
+ path: 'branding',
+ element: (
+
+ {page(BrandingSettingsPage)}
+
+ ),
+ },
],
},
],
+
+
+ )
+ }
+
+ if (error) {
+ return (
+ <>
+
+
+
+ )
+ }
+
+ const previewColor = primaryColor || DEFAULT_COLOR
+
+ return (
+ <>
+
+
+
+
+
+ )
+}
+
+export default BrandingSettingsPage
diff --git a/frontend/src/router.tsx b/frontend/src/router.tsx
index 37abb902..05fd004a 100644
--- a/frontend/src/router.tsx
+++ b/frontend/src/router.tsx
@@ -76,6 +76,7 @@ const TeamCategoriesPage = lazy(() => import('@/pages/account/TeamCategoriesPage
const TargetListsPage = lazy(() => import('@/pages/account/TargetListsPage'))
const ChatRetentionSettingsPage = lazy(() => import('@/pages/account/ChatRetentionSettingsPage'))
const IntegrationsPage = lazy(() => import('@/pages/account/IntegrationsPage'))
+const BrandingSettingsPage = lazy(() => import('@/pages/account/BrandingSettingsPage'))
/** Wraps a lazy-loaded page with Suspense + ErrorBoundary */
function page(Component: React.LazyExoticComponent
+
+
+
+
+ + Branding Settings +
++ Customize your account branding — logo, accent color, and company name. +
+
+ {/* Branding Form */}
+
+
+
+
+ {/* Preview Section */}
+ Custom Branding
+ +
+ {/* Company Name */}
+
+
+ {/* Save Button */}
+
+
+ setCompanyName(e.target.value)}
+ placeholder="Your Company Name"
+ maxLength={200}
+ className={cn(
+ 'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
+ 'text-foreground placeholder:text-muted-foreground',
+ 'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+ )}
+ />
+
+
+ {/* Logo URL */}
+ + Displayed in the sidebar and exported documents. +
+
+
+ setLogoUrl(e.target.value)}
+ placeholder="https://example.com/logo.png"
+ maxLength={500}
+ className={cn(
+ 'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
+ 'text-foreground placeholder:text-muted-foreground font-mono',
+ 'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+ )}
+ />
+
+
+ {/* Primary Color */}
+ + Publicly accessible URL to your logo image (PNG, SVG, or JPEG). +
+ {logoUrl && ( +
+ 
{
+ ;(e.target as HTMLImageElement).style.display = 'none'
+ }}
+ />
+
+ )}
+
+
+
+
+ setPrimaryColor(e.target.value)}
+ className="h-9 w-14 cursor-pointer rounded-lg border border-border bg-card p-0.5"
+ title="Pick accent color"
+ />
+ {
+ const val = e.target.value
+ setPrimaryColor(val)
+ }}
+ placeholder="#06b6d4"
+ maxLength={7}
+ className={cn(
+ 'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
+ 'text-foreground placeholder:text-muted-foreground font-mono',
+ 'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
+ )}
+ />
+
+
+ + Hex color code for the primary accent color (e.g. #06b6d4). +
+
+
+ {!isDirty && !isSaving && (
+ No changes
+ )}
+
+
+
+ Preview
++ This is how your accent color will appear on interactive elements. +
+ +
+ {/* Color swatch preview */}
+
+
+
+
+
+
+ {companyName && (
+
+ Button
+
+
+ Badge
+
+ + Company: {companyName} +
+ )} +