diff --git a/packages/web/src/app/layout.tsx b/packages/web/src/app/layout.tsx
index e61d32c..f848ef3 100644
--- a/packages/web/src/app/layout.tsx
+++ b/packages/web/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import Toaster from "@rahoot/web/components/Toaster"
+import BrandingHelmet from "@rahoot/web/components/BrandingHelmet"
 import { SocketProvider } from "@rahoot/web/contexts/socketProvider"
 import type { Metadata } from "next"
 import { Montserrat } from "next/font/google"
@@ -19,6 +20,7 @@ const RootLayout = ({ children }: PropsWithChildren) => (
   <html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
     <body className={`${montserrat.variable} bg-secondary antialiased`}>
       <SocketProvider>
+        <BrandingHelmet />
         <main className="text-base-[8px] flex flex-col">{children}</main>
         <Toaster />
       </SocketProvider>
diff --git a/packages/web/src/components/BrandingHelmet.tsx b/packages/web/src/components/BrandingHelmet.tsx
new file mode 100644
index 0000000..0237e67
--- /dev/null
+++ b/packages/web/src/components/BrandingHelmet.tsx
@@ -0,0 +1,18 @@
+"use client"
+
+import { useThemeStore } from "@rahoot/web/stores/theme"
+import { useEffect } from "react"
+
+const BrandingHelmet = () => {
+  const { brandName } = useThemeStore()
+
+  useEffect(() => {
+    if (brandName) {
+      document.title = brandName
+    }
+  }, [brandName])
+
+  return null
+}
+
+export default BrandingHelmet
diff --git a/packages/web/src/components/game/create/ThemeEditor.tsx b/packages/web/src/components/game/create/ThemeEditor.tsx
index 3a4c44f..45f9cfc 100644
--- a/packages/web/src/components/game/create/ThemeEditor.tsx
+++ b/packages/web/src/components/game/create/ThemeEditor.tsx
@@ -20,7 +20,7 @@ type Props = {
 }
 
 const ThemeEditor = ({ onBack }: Props) => {
-  const { backgroundUrl, setBackground, reset } = useThemeStore()
+  const { backgroundUrl, brandName, setBackground, setBrandName, reset } = useThemeStore()
   const [customUrl, setCustomUrl] = useState("")
   const [items, setItems] = useState<MediaItem[]>([])
   const [loading, setLoading] = useState(false)
@@ -113,6 +113,24 @@ const ThemeEditor = ({ onBack }: Props) => {
       </div>
 
       <div className="grid gap-4 lg:grid-cols-2">
+        <div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
+          <h3 className="text-lg font-semibold text-gray-800">Branding</h3>
+          <label className="flex flex-col gap-2">
+            <span className="text-sm font-semibold text-gray-600">
+              Brand name
+            </span>
+            <input
+              value={brandName}
+              onChange={(e) => setBrandName(e.target.value)}
+              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
+              placeholder="e.g., Kwalitaria Pub Quiz"
+            />
+            <span className="text-xs text-gray-500">
+              Appears in the browser title bar and elsewhere we surface the brand.
+            </span>
+          </label>
+        </div>
+
         <div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
           <h3 className="text-lg font-semibold text-gray-800">Preview</h3>
           <div className="relative h-60 w-full overflow-hidden rounded-md border border-gray-100 bg-gray-50">
diff --git a/packages/web/src/stores/theme.tsx b/packages/web/src/stores/theme.tsx
index d8f32d0..43e0466 100644
--- a/packages/web/src/stores/theme.tsx
+++ b/packages/web/src/stores/theme.tsx
@@ -3,7 +3,9 @@ import { persist } from "zustand/middleware"
 
 type ThemeState = {
   backgroundUrl: string | null
+  brandName: string
   setBackground: (_url: string | null) => void
+  setBrandName: (_name: string) => void
   reset: () => void
 }
 
@@ -11,8 +13,10 @@ export const useThemeStore = create<ThemeState>()(
   persist(
     (set) => ({
       backgroundUrl: null,
+      brandName: "Rahoot",
       setBackground: (backgroundUrl) => set({ backgroundUrl }),
-      reset: () => set({ backgroundUrl: null }),
+      setBrandName: (brandName) => set({ brandName }),
+      reset: () => set({ backgroundUrl: null, brandName: "Rahoot" }),
     }),
     { name: "theme-preferences" },
   ),
