update README

Update Docker Pulls badge color in README

packages/common/src/types/game/socket.ts

@@ -35,7 +35,6 @@ export interface ServerToClientEvents {
   "game:reset": (_message: string) => void
   "game:updateQuestion": (_data: { current: number; total: number }) => void
   "game:playerAnswer": (_count: number) => void
-  "game:break": (_active: boolean) => void
 
   // Player events
   "player:successReconnect": (_data: {
@@ -67,7 +66,6 @@ export interface ServerToClientEvents {
   "manager:quizzLoaded": (_quizz: QuizzWithId) => void
   "manager:quizzSaved": (_quizz: QuizzWithId) => void
   "manager:quizzDeleted": (_id: string) => void
-  "manager:break": (_active: boolean) => void
 }
 
 export interface ClientToServerEvents {
@@ -80,7 +78,6 @@ export interface ClientToServerEvents {
   "manager:abortQuiz": (_message: MessageGameId) => void
   "manager:pauseCooldown": (_message: MessageGameId) => void
   "manager:resumeCooldown": (_message: MessageGameId) => void
-  "manager:setBreak": (_message: { gameId?: string; active: boolean }) => void
   "manager:endGame": (_message: MessageGameId) => void
   "manager:skipQuestionIntro": (_message: MessageGameId) => void
   "manager:nextQuestion": (_message: MessageGameId) => void

packages/socket/src/index.ts

@@ -234,10 +234,6 @@ io.on("connection", (socket) => {
     withGame(gameId, socket, (game) => game.resumeCooldown(socket))
   )
 
-  socket.on("manager:setBreak", ({ gameId, active }) =>
-    withGame(gameId, socket, (game) => game.setBreak(socket, active))
-  )
-
   socket.on("manager:endGame", ({ gameId }) =>
     withGame(gameId, socket, (game) => game.endGame(socket, registry))
   )

packages/socket/src/services/config.ts

@@ -37,22 +37,6 @@ class Config {
     if (!isMediaExists) {
       fs.mkdirSync(getPath("media"))
     }
-
-    const isThemeExists = fs.existsSync(getPath("theme.json"))
-
-    if (!isThemeExists) {
-      fs.writeFileSync(
-        getPath("theme.json"),
-        JSON.stringify(
-          {
-            brandName: "Rahoot",
-            backgroundUrl: null,
-          },
-          null,
-          2
-        )
-      )
-    }
   }
 
   static init() {
@@ -167,17 +151,6 @@ class Config {
     return {}
   }
 
-  static theme() {
-    this.ensureBaseFolders()
-    try {
-      const raw = fs.readFileSync(getPath("theme.json"), "utf-8")
-      return JSON.parse(raw)
-    } catch (error) {
-      console.error("Failed to read theme config:", error)
-      return { brandName: "Rahoot", backgroundUrl: null }
-    }
-  }
-
   static quizz() {
     this.ensureBaseFolders()
 
@@ -258,17 +231,6 @@ class Config {
 
     return getPath(fileName ? `media/${fileName}` : "media")
   }
-
-  static saveTheme(theme: { brandName?: string; backgroundUrl?: string | null }) {
-    this.ensureBaseFolders()
-    const next = {
-      brandName: theme.brandName || "Rahoot",
-      backgroundUrl: theme.backgroundUrl ?? null,
-    }
-
-    fs.writeFileSync(getPath("theme.json"), JSON.stringify(next, null, 2))
-    return next
-  }
 }
 
 export default Config

packages/socket/src/services/game.ts

@@ -46,7 +46,6 @@ class Game {
     timer: NodeJS.Timeout | null
     resolve: (() => void) | null
   }
-  breakActive: boolean
 
   constructor(io: Server, socket: Socket, quizz: Quizz) {
     if (!io) {
@@ -85,7 +84,6 @@ class Game {
       timer: null,
       resolve: null,
     }
-    this.breakActive = false
 
     const roomInvite = createInviteCode()
     this.inviteCode = roomInvite
@@ -139,7 +137,6 @@ class Game {
       timer: null,
       resolve: null,
     }
-    game.breakActive = snapshot.breakActive || false
 
     if (game.cooldown.active && game.cooldown.remaining > 0 && !game.cooldown.paused) {
       game.startCooldown(game.cooldown.remaining)
@@ -196,7 +193,6 @@ class Game {
         paused: this.cooldown.paused,
         remaining: this.cooldown.remaining,
       },
-      breakActive: this.breakActive,
     }
   }
 
@@ -314,10 +310,6 @@ class Game {
       players: this.players,
     })
     socket.emit("game:totalPlayers", this.players.length)
-    if (this.breakActive) {
-      socket.emit("manager:break", true)
-      socket.emit("game:break", true)
-    }
 
     registry.reactivateGame(this.gameId)
     console.log(`Manager reconnected to game ${this.inviteCode}`)
@@ -369,9 +361,6 @@ class Game {
       },
     })
     socket.emit("game:totalPlayers", this.players.length)
-    if (this.breakActive) {
-      socket.emit("game:break", true)
-    }
     console.log(
       `Player ${player.username} reconnected to game ${this.inviteCode}`
     )
@@ -464,27 +453,6 @@ class Game {
     this.persist()
   }
 
-  setBreak(socket: Socket, active: boolean) {
-    if (this.manager.id !== socket.id) {
-      return
-    }
-
-    this.breakActive = active
-
-    if (this.cooldown.active) {
-      if (active) {
-        this.cooldown.paused = true
-      } else {
-        this.cooldown.paused = false
-      }
-      this.io.to(this.gameId).emit("game:cooldownPause", this.cooldown.paused)
-    }
-
-    this.io.to(this.gameId).emit("game:break", active)
-    this.io.to(this.manager.id).emit("manager:break", active)
-    this.persist()
-  }
-
   skipQuestionIntro(socket: Socket) {
     if (this.manager.id !== socket.id) {
       return

packages/web/src/app/(auth)/layout.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import BrandHeading from "@rahoot/web/components/BrandHeading"
+import logo from "@rahoot/web/assets/logo.svg"
 import Loader from "@rahoot/web/components/Loader"
 import { useSocket } from "@rahoot/web/contexts/socketProvider"
+import Image from "next/image"
 import { PropsWithChildren, useEffect } from "react"
 
 const AuthLayout = ({ children }: PropsWithChildren) => {
@@ -13,34 +14,34 @@ const AuthLayout = ({ children }: PropsWithChildren) => {
     }
   }, [connect, isConnected])
 
-  const Shell = ({ children: inner }: PropsWithChildren) => (
-    <section className="relative flex min-h-screen flex-col items-center justify-center px-4 text-center">
-      <div className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full" />
-        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45" />
-      </div>
-
-      <div className="z-10 flex w-full flex-col items-center gap-8 px-4">
-        <BrandHeading size="md" />
-        <div className="flex w-full justify-center">{inner}</div>
-      </div>
-    </section>
-  )
-
   if (!isConnected) {
     return (
-      <Shell>
+      <section className="relative flex min-h-screen flex-col items-center justify-center">
-        <div className="flex flex-col items-center gap-3">
+        <div className="pointer-events-none absolute h-full w-full overflow-hidden">
+          <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+          <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+        </div>
+
+        <Image src={logo} className="mb-6 h-32" alt="logo" />
         <Loader className="h-23" />
-          <h2 className="text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
+        <h2 className="mt-2 text-center text-2xl font-bold text-white drop-shadow-lg md:text-3xl">
           Loading...
         </h2>
-        </div>
+      </section>
-      </Shell>
     )
   }
 
-  return <Shell>{children}</Shell>
+  return (
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
+      <div className="pointer-events-none absolute h-full w-full overflow-hidden">
+        <div className="bg-primary/15 absolute -top-[15vmin] -left-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full"></div>
+        <div className="bg-primary/15 absolute -right-[15vmin] -bottom-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45"></div>
+      </div>
+
+      <Image src={logo} className="mb-6 h-32" alt="logo" />
+      {children}
+    </section>
+  )
 }
 
 export default AuthLayout

packages/web/src/app/(auth)/manager/page.tsx

@@ -5,16 +5,14 @@ import { STATUS } from "@rahoot/common/types/game/status"
 import ManagerPassword from "@rahoot/web/components/game/create/ManagerPassword"
 import QuizEditor from "@rahoot/web/components/game/create/QuizEditor"
 import MediaLibrary from "@rahoot/web/components/game/create/MediaLibrary"
-import ThemeEditor from "@rahoot/web/components/game/create/ThemeEditor"
 import SelectQuizz from "@rahoot/web/components/game/create/SelectQuizz"
-import Button from "@rahoot/web/components/Button"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { useManagerStore } from "@rahoot/web/stores/manager"
 import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 
 const Manager = () => {
-  const { gameId, setGameId, setStatus } = useManagerStore()
+  const { setGameId, setStatus } = useManagerStore()
   const router = useRouter()
   const { socket } = useSocket()
 
@@ -22,8 +20,6 @@ const Manager = () => {
   const [quizzList, setQuizzList] = useState<QuizzWithId[]>([])
   const [showEditor, setShowEditor] = useState(false)
   const [showMedia, setShowMedia] = useState(false)
-  const [showTheme, setShowTheme] = useState(false)
-  const [resumeGameId, setResumeGameId] = useState<string | null>(null)
 
   useEvent("manager:quizzList", (quizzList) => {
     setIsAuth(true)
@@ -33,44 +29,15 @@ const Manager = () => {
   useEvent("manager:gameCreated", ({ gameId, inviteCode }) => {
     setGameId(gameId)
     setStatus(STATUS.SHOW_ROOM, { text: "Waiting for the players", inviteCode })
-    setResumeGameId(gameId)
     router.push(`/game/manager/${gameId}`)
   })
 
-  useEvent(
-    "manager:successReconnect",
-    ({ gameId, status, players, currentQuestion }) => {
-      setGameId(gameId)
-      setStatus(status.name, status.data)
-      setResumeGameId(gameId)
-      router.push(`/game/manager/${gameId}`)
-    },
-  )
-
   const handleAuth = (password: string) => {
     socket?.emit("manager:auth", password)
   }
   const handleCreate = (quizzId: string) => {
     socket?.emit("game:create", quizzId)
   }
-  const handleBreakToggle = (active: boolean) => {
-    if (!gameId) return
-    socket?.emit("manager:setBreak", { gameId, active })
-  }
-
-  const handleResume = () => {
-    if (!resumeGameId) return
-    socket?.emit("manager:reconnect", { gameId: resumeGameId })
-  }
-
-  useEffect(() => {
-    try {
-      const stored = localStorage.getItem("last_manager_game_id")
-      if (stored) {
-        setResumeGameId(stored)
-      }
-    } catch {}
-  }, [])
 
   if (!isAuth) {
     return <ManagerPassword onSubmit={handleAuth} />
@@ -82,42 +49,32 @@ const Manager = () => {
         quizzList={quizzList}
         onBack={() => setShowEditor(false)}
         onListUpdate={setQuizzList}
-        onBreakToggle={handleBreakToggle}
-        gameId={gameId}
       />
     )
   }
 
   if (showMedia) {
     return (
-      <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+      <div className="flex w-full flex-col gap-4">
-        <div className="flex items-center gap-2">
+        <div className="flex gap-2">
-          <Button onClick={() => setShowMedia(false)} className="bg-gray-700">
+          <button
+            onClick={() => setShowMedia(false)}
+            className="rounded-md bg-gray-700 px-3 py-2 text-white"
+          >
             Back
-          </Button>
+          </button>
-          <div className="flex flex-col leading-tight">
-            <h2 className="text-lg font-semibold text-gray-900">Media library</h2>
-            <p className="text-xs text-gray-500">Upload, view, and delete unused media.</p>
-          </div>
         </div>
         <MediaLibrary />
       </div>
     )
   }
 
-  if (showTheme) {
-    return <ThemeEditor onBack={() => setShowTheme(false)} />
-  }
-
   return (
     <SelectQuizz
       quizzList={quizzList}
       onSelect={handleCreate}
       onManage={() => setShowEditor(true)}
       onMedia={() => setShowMedia(true)}
-      onTheme={() => setShowTheme(true)}
-      resumeGameId={resumeGameId}
-      onResume={handleResume}
     />
   )
 }

packages/web/src/app/api/theme/route.ts

@@ -1,30 +0,0 @@
-import { getTheme, saveTheme } from "@rahoot/web/server/theme"
-import { NextResponse } from "next/server"
-
-export const runtime = "nodejs"
-export const dynamic = "force-dynamic"
-
-export async function GET() {
-  try {
-    const theme = getTheme()
-    return NextResponse.json({ theme })
-  } catch (error) {
-    console.error("Failed to load theme", error)
-    return NextResponse.json({ error: "Failed to load theme" }, { status: 500 })
-  }
-}
-
-export async function POST(request: Request) {
-  try {
-    const body = await request.json()
-    const theme = saveTheme({
-      brandName: body.brandName,
-      backgroundUrl: body.backgroundUrl,
-    })
-    return NextResponse.json({ theme })
-  } catch (error) {
-    console.error("Failed to save theme", error)
-    const message = error instanceof Error ? error.message : "Failed to save theme"
-    return NextResponse.json({ error: message }, { status: 400 })
-  }
-}

packages/web/src/app/game/manager/[gameId]/page.tsx

@@ -26,7 +26,6 @@ const ManagerGame = () => {
     useManagerStore()
   const { setQuestionStates } = useQuestionStore()
   const [cooldownPaused, setCooldownPaused] = useState(false)
-  const [breakActive, setBreakActive] = useState(false)
   const { players } = useManagerStore()
 
   useEvent("game:status", ({ name, data }) => {
@@ -74,9 +73,6 @@ const ManagerGame = () => {
     setCooldownPaused(isPaused)
   })
 
-  useEvent("game:break", (active) => setBreakActive(active))
-  useEvent("manager:break", (active) => setBreakActive(active))
-
   const handleSkip = () => {
     if (!gameId) {
       return
@@ -119,11 +115,6 @@ const ManagerGame = () => {
     }
   }
 
-  const handleBreakToggle = () => {
-    if (!gameId) return
-    socket?.emit("manager:setBreak", { gameId, active: !breakActive })
-  }
-
   const handleEndGame = () => {
     if (!gameId) return
     socket?.emit("manager:endGame", { gameId })
@@ -182,8 +173,6 @@ const ManagerGame = () => {
       showPause={
         status?.name === STATUS.SHOW_QUESTION || status?.name === STATUS.SELECT_ANSWER
       }
-      onBreakToggle={handleBreakToggle}
-      breakActive={breakActive}
       onEnd={handleEndGame}
       players={players}
       manager

packages/web/src/app/layout.tsx

@@ -1,32 +1,24 @@
 import Toaster from "@rahoot/web/components/Toaster"
-import BrandingHelmet from "@rahoot/web/components/BrandingHelmet"
-import ThemeHydrator from "@rahoot/web/components/ThemeHydrator"
 import { SocketProvider } from "@rahoot/web/contexts/socketProvider"
 import type { Metadata } from "next"
 import { Montserrat } from "next/font/google"
 import { PropsWithChildren } from "react"
 import "./globals.css"
-import { getTheme } from "@rahoot/web/server/theme"
 
 const montserrat = Montserrat({
   variable: "--font-montserrat",
   subsets: ["latin"],
 })
 
-export async function generateMetadata(): Promise<Metadata> {
+export const metadata: Metadata = {
-  const theme = getTheme()
+  title: "Rahoot !",
-  return {
-    title: theme.brandName || "Rahoot",
   icons: "/icon.svg",
 }
-}
 
 const RootLayout = ({ children }: PropsWithChildren) => (
   <html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
     <body className={`${montserrat.variable} bg-secondary antialiased`}>
       <SocketProvider>
-        <BrandingHelmet />
-        <ThemeHydrator />
         <main className="text-base-[8px] flex flex-col">{children}</main>
         <Toaster />
       </SocketProvider>

packages/web/src/components/BrandHeading.tsx

@@ -1,33 +0,0 @@
-"use client"
-
-import { useThemeStore } from "@rahoot/web/stores/theme"
-import clsx from "clsx"
-
-type Props = {
-  className?: string
-  size?: "md" | "lg"
-}
-
-const BrandHeading = ({ className, size = "lg" }: Props) => {
-  const { brandName } = useThemeStore()
-  const label = brandName || "Rahoot!"
-
-  const sizeClass =
-    size === "lg"
-      ? "text-4xl md:text-5xl lg:text-6xl"
-      : "text-2xl md:text-3xl"
-
-  return (
-    <div
-      className={clsx(
-        "text-center font-black tracking-tight text-[#f7931e] drop-shadow-lg leading-tight",
-        sizeClass,
-        className,
-      )}
-    >
-      {label}
-    </div>
-  )
-}
-
-export default BrandHeading

packages/web/src/components/BrandingHelmet.tsx

@@ -1,18 +0,0 @@
-"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

packages/web/src/components/Form.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react"
 
 const Form = ({ children }: PropsWithChildren) => (
-  <div className="z-10 mx-auto flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+  <div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
     {children}
   </div>
 )

packages/web/src/components/ThemeHydrator.tsx

@@ -1,32 +0,0 @@
-"use client"
-
-import { useEffect } from "react"
-import { useThemeStore } from "@rahoot/web/stores/theme"
-
-const ThemeHydrator = () => {
-  const { setBackground, setBrandName } = useThemeStore()
-
-  useEffect(() => {
-    const load = async () => {
-      try {
-        const res = await fetch("/api/theme", { cache: "no-store" })
-        const data = await res.json()
-        if (res.ok && data.theme) {
-          if (typeof data.theme.backgroundUrl === "string") {
-            setBackground(data.theme.backgroundUrl || null)
-          }
-          if (typeof data.theme.brandName === "string") {
-            setBrandName(data.theme.brandName)
-          }
-        }
-      } catch (error) {
-        console.error("Failed to hydrate theme", error)
-      }
-    }
-    load()
-  }, [setBackground, setBrandName])
-
-  return null
-}
-
-export default ThemeHydrator

packages/web/src/components/game/GameWrapper.tsx

@@ -7,9 +7,9 @@ import Loader from "@rahoot/web/components/Loader"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useQuestionStore } from "@rahoot/web/stores/question"
-import { useThemeStore } from "@rahoot/web/stores/theme"
 import { MANAGER_SKIP_BTN } from "@rahoot/web/utils/constants"
 import clsx from "clsx"
+import Image from "next/image"
 import { PropsWithChildren, useEffect, useState } from "react"
 
 type Props = PropsWithChildren & {
@@ -21,8 +21,6 @@ type Props = PropsWithChildren & {
   onEnd?: () => void
   players?: { id: string; username: string; connected: boolean }[]
   manager?: boolean
-  onBreakToggle?: () => void
-  breakActive?: boolean
 }
 
 const GameWrapper = ({
@@ -35,15 +33,11 @@ const GameWrapper = ({
   onEnd,
   players,
   manager,
-  onBreakToggle,
-  breakActive,
 }: Props) => {
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
-  const { backgroundUrl, setBackground, setBrandName } = useThemeStore()
   const [isDisabled, setIsDisabled] = useState(false)
-  const [onBreak, setOnBreak] = useState(false)
   const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
   useEvent("game:updateQuestion", ({ current, total }) => {
@@ -57,50 +51,19 @@ const GameWrapper = ({
     setIsDisabled(false)
   }, [statusName])
 
-  useEvent("game:break", (active) => setOnBreak(active))
-  useEvent("manager:break", (active) => setOnBreak(active))
-
-  useEffect(() => {
-    const loadTheme = async () => {
-      try {
-        const res = await fetch("/api/theme", { cache: "no-store" })
-        const data = await res.json()
-        if (res.ok && data.theme) {
-          if (typeof data.theme.backgroundUrl === "string") {
-            setBackground(data.theme.backgroundUrl || null)
-          }
-          if (typeof data.theme.brandName === "string") {
-            setBrandName(data.theme.brandName)
-          }
-        }
-      } catch (error) {
-        console.error("Failed to load theme", error)
-      }
-    }
-
-    loadTheme()
-  }, [setBackground, setBrandName])
-
   const handleNext = () => {
     setIsDisabled(true)
     onNext?.()
   }
 
-  const resolvedBackground = backgroundUrl || background.src
-
   return (
     <section className="relative flex min-h-screen w-full flex-col justify-between">
-      <div
+      <div className="fixed top-0 left-0 -z-10 h-full w-full bg-orange-600 opacity-70">
-        className="fixed top-0 left-0 -z-10 h-full w-full bg-orange-600 opacity-70"
+        <Image
-        style={{
+          className="pointer-events-none h-full w-full object-cover opacity-60"
-          backgroundImage: `url(${resolvedBackground})`,
+          src={background}
-          backgroundSize: "cover",
+          alt="background"
-          backgroundPosition: "center",
+        />
-          backgroundRepeat: "no-repeat",
-          opacity: 0.7,
-        }}
-      >
-        <div className="h-full w-full bg-black/10" />
       </div>
 
       {!isConnected && !statusName ? (
@@ -139,17 +102,6 @@ const GameWrapper = ({
               </Button>
             )}
 
-            {manager && onBreakToggle && (
-              <Button
-                className={clsx("self-end bg-white px-4 text-black!", {
-                  "pointer-events-none": isDisabled,
-                })}
-                onClick={onBreakToggle}
-              >
-                {breakActive ? "Resume game" : "Break"}
-              </Button>
-            )}
-
             {manager && onEnd && (
               <Button className="self-end bg-red-600 px-4" onClick={onEnd}>
                 End game
@@ -190,15 +142,6 @@ const GameWrapper = ({
               </div>
             </div>
           )}
-
-          {onBreak && (
-            <div className="pointer-events-none fixed inset-0 z-40 flex items-center justify-center bg-black/60">
-              <div className="rounded-md bg-white/90 px-6 py-4 text-center shadow-lg">
-                <p className="text-lg font-semibold text-gray-800">Game paused for a break</p>
-                <p className="text-sm text-gray-600">We&apos;ll resume from the same spot.</p>
-              </div>
-            </div>
-          )}
         </>
       )}
     </section>

packages/web/src/components/game/create/ManagerPassword.tsx

@@ -27,7 +27,6 @@ const ManagerPassword = ({ onSubmit }: Props) => {
   })
 
   return (
-    <div className="w-full max-w-xl">
     <Form>
       <Input
         type="password"
@@ -37,7 +36,6 @@ const ManagerPassword = ({ onSubmit }: Props) => {
       />
       <Button onClick={handleSubmit}>Submit</Button>
     </Form>
-    </div>
   )
 }
 

packages/web/src/components/game/create/QuizEditor.tsx

@@ -12,8 +12,6 @@ type Props = {
   quizzList: QuizzWithId[]
   onBack: () => void
   onListUpdate: (_quizz: QuizzWithId[]) => void
-  onBreakToggle?: (_active: boolean) => void
-  gameId?: string | null
 }
 
 type EditableQuestion = QuizzWithId["questions"][number]
@@ -57,13 +55,7 @@ const formatBytes = (bytes: number) => {
   return `${value.toFixed(value >= 10 || value % 1 === 0 ? 0 : 1)} ${units[i]}`
 }
 
-const QuizEditor = ({
+const QuizEditor = ({ quizzList, onBack, onListUpdate }: Props) => {
-  quizzList,
-  onBack,
-  onListUpdate,
-  onBreakToggle,
-  gameId,
-}: Props) => {
   const { socket } = useSocket()
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const [draft, setDraft] = useState<QuizzWithId | null>(null)
@@ -468,7 +460,7 @@ const QuizEditor = ({
   }, [quizzList, selectedId])
 
   return (
-    <div className="mx-auto flex w-full max-w-[1280px] flex-col gap-7 rounded-md bg-white p-6 shadow-sm md:p-8">
+    <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
             <Button onClick={onBack} className="bg-gray-700">
@@ -482,16 +474,6 @@ const QuizEditor = ({
                 Delete quiz
               </Button>
             )}
-          {onBreakToggle && gameId && (
-            <>
-              <Button className="bg-amber-500" onClick={() => onBreakToggle(true)}>
-                Break
-              </Button>
-              <Button className="bg-green-600" onClick={() => onBreakToggle(false)}>
-                Resume
-              </Button>
-            </>
-          )}
           </div>
 
         <Button onClick={handleSave} disabled={saving || loading}>

packages/web/src/components/game/create/SelectQuizz.tsx

@@ -9,20 +9,9 @@ type Props = {
   onSelect: (_id: string) => void
   onManage?: () => void
   onMedia?: () => void
-  onTheme?: () => void
-  resumeGameId?: string | null
-  onResume?: () => void
 }
 
-const SelectQuizz = ({
+const SelectQuizz = ({ quizzList, onSelect, onManage, onMedia }: Props) => {
-  quizzList,
-  onSelect,
-  onManage,
-  onMedia,
-  onTheme,
-  resumeGameId,
-  onResume,
-}: Props) => {
   const [selected, setSelected] = useState<string | null>(null)
 
   const handleSelect = (id: string) => () => {
@@ -48,14 +37,6 @@ const SelectQuizz = ({
       <div className="flex items-center justify-between">
         <h1 className="text-2xl font-bold">Select a quizz</h1>
         <div className="flex items-center gap-2">
-          {resumeGameId && onResume && (
-            <button
-              className="rounded-md bg-amber-500 px-3 py-1 text-sm font-semibold text-white shadow"
-              onClick={onResume}
-            >
-              Resume game
-            </button>
-          )}
           {onMedia && (
             <button
               className="text-sm font-semibold text-gray-700 underline"
@@ -64,14 +45,6 @@ const SelectQuizz = ({
               Media
             </button>
           )}
-          {onTheme && (
-            <button
-              className="text-sm font-semibold text-amber-700 underline"
-              onClick={onTheme}
-            >
-              Theme
-            </button>
-          )}
           {onManage && (
             <button
               className="text-sm font-semibold text-primary underline"

packages/web/src/components/game/create/ThemeEditor.tsx

@@ -1,291 +0,0 @@
-"use client"
-
-import background from "@rahoot/web/assets/background.webp"
-import Button from "@rahoot/web/components/Button"
-import { useThemeStore } from "@rahoot/web/stores/theme"
-import clsx from "clsx"
-import Image from "next/image"
-import { useEffect, useMemo, useState } from "react"
-
-type MediaItem = {
-  fileName: string
-  url: string
-  size: number
-  mime: string
-  type: string
-}
-
-type Props = {
-  onBack: () => void
-}
-
-const ThemeEditor = ({ onBack }: Props) => {
-  const { backgroundUrl, brandName, setBackground, setBrandName, reset } = useThemeStore()
-  const [customUrl, setCustomUrl] = useState("")
-  const [items, setItems] = useState<MediaItem[]>([])
-  const [loading, setLoading] = useState(false)
-  const [uploading, setUploading] = useState(false)
-  const [uploadError, setUploadError] = useState<string | null>(null)
-  const [savingTheme, setSavingTheme] = useState(false)
-  const [saveError, setSaveError] = useState<string | null>(null)
-  const [initializing, setInitializing] = useState(true)
-
-  const previewUrl = useMemo(
-    () => backgroundUrl || customUrl || background.src,
-    [backgroundUrl, customUrl],
-  )
-
-  const load = async () => {
-    setLoading(true)
-    try {
-      const [mediaRes, themeRes] = await Promise.all([
-        fetch("/api/media", { cache: "no-store" }),
-        fetch("/api/theme", { cache: "no-store" }),
-      ])
-
-      const mediaData = await mediaRes.json()
-      const themeData = await themeRes.json()
-
-      if (!mediaRes.ok) throw new Error(mediaData.error || "Failed to load media")
-      if (!themeRes.ok) throw new Error(themeData.error || "Failed to load theme")
-
-      const onlyImages = (mediaData.media || []).filter(
-        (item: MediaItem) => item.mime?.startsWith("image/"),
-      )
-      setItems(onlyImages)
-
-      if (themeData.theme) {
-        if (typeof themeData.theme.backgroundUrl === "string") {
-          setBackground(themeData.theme.backgroundUrl || null)
-          setCustomUrl(themeData.theme.backgroundUrl || "")
-        }
-        if (typeof themeData.theme.brandName === "string") {
-          setBrandName(themeData.theme.brandName)
-        }
-      }
-    } catch (error) {
-      console.error(error)
-    } finally {
-      setLoading(false)
-      setInitializing(false)
-    }
-  }
-
-  useEffect(() => {
-    load()
-  }, [])
-
-  const persistTheme = async (next: { backgroundUrl?: string | null; brandName?: string }) => {
-    setSavingTheme(true)
-    setSaveError(null)
-    try {
-      const res = await fetch("/api/theme", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(next),
-      })
-      const data = await res.json()
-      if (!res.ok) throw new Error(data.error || "Failed to save theme")
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Failed to save theme"
-      setSaveError(message)
-    } finally {
-      setSavingTheme(false)
-    }
-  }
-
-  const handleSet = (url: string) => {
-    if (!url) return
-    setBackground(url)
-    persistTheme({ backgroundUrl: url })
-  }
-
-  const handleApplyCustom = () => {
-    if (!customUrl.trim()) return
-    handleSet(customUrl.trim())
-  }
-
-  const handleUpload = async (file?: File | null) => {
-    if (!file) return
-    setUploading(true)
-    setUploadError(null)
-    try {
-      const form = new FormData()
-      form.append("file", file)
-      const res = await fetch("/api/media", {
-        method: "POST",
-        body: form,
-      })
-      const data = await res.json()
-      if (!res.ok) {
-        throw new Error(data.error || "Upload failed")
-      }
-      if (data.media?.url) {
-        handleSet(data.media.url)
-        setCustomUrl(data.media.url)
-      }
-      load()
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Upload failed"
-      setUploadError(message)
-    } finally {
-      setUploading(false)
-    }
-  }
-
-  const handleReset = () => {
-    reset()
-    setCustomUrl("")
-    persistTheme({ backgroundUrl: null, brandName: "Rahoot" })
-  }
-
-  return (
-    <div className="flex w-full max-w-6xl flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Button onClick={onBack} className="bg-gray-700">
-            Back
-          </Button>
-          <div className="flex flex-col leading-tight">
-            <h2 className="text-lg font-semibold text-gray-900">Theme editor</h2>
-            <p className="text-xs text-gray-500">
-              Set the game background from uploads or a custom URL.
-            </p>
-          </div>
-        </div>
-      </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)
-                persistTheme({ brandName: 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">
-            <Image
-              src={previewUrl}
-              alt="Background preview"
-              fill
-              className="object-cover"
-              sizes="100vw"
-              unoptimized
-            />
-            <div className="absolute inset-0 bg-black/20" />
-            <div className="absolute inset-0 flex items-center justify-center text-white">
-              <span className="rounded bg-black/50 px-3 py-1 text-sm font-semibold">
-                Current background
-              </span>
-            </div>
-          </div>
-          <div className="flex gap-2">
-            <Button className="bg-gray-700" onClick={handleReset}>
-              Reset to default
-            </Button>
-            <Button className="bg-primary" onClick={handleApplyCustom}>
-              Apply custom URL
-            </Button>
-          </div>
-          <input
-            value={customUrl}
-            onChange={(e) => setCustomUrl(e.target.value)}
-            placeholder="https://example.com/background.webp or /media/your-file"
-            className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
-          />
-          <p className="text-sm text-gray-600">
-            Paste any reachable image URL (including your uploaded media path). Changes apply immediately to the game background.
-          </p>
-        </div>
-
-        <div className="space-y-3 rounded-md border border-gray-200 bg-white p-4 shadow-sm">
-        <div className="flex items-center justify-between">
-          <div>
-            <h3 className="text-lg font-semibold text-gray-800">Images from media library</h3>
-            <p className="text-sm text-gray-500">Pick any uploaded image as the background.</p>
-          </div>
-          <Button className="bg-gray-700" onClick={load} disabled={loading}>
-            {loading ? "Refreshing..." : "Refresh"}
-          </Button>
-        </div>
-
-        <div className="rounded-md border border-dashed border-gray-300 p-3">
-          <label className="flex items-center gap-3 text-sm font-semibold text-gray-800">
-            <input
-              type="file"
-              accept="image/*"
-              className="text-sm"
-              onChange={(e) => handleUpload(e.target.files?.[0])}
-              disabled={uploading}
-            />
-            {uploading ? "Uploading..." : "Upload image"}
-          </label>
-          <p className="mt-1 text-xs text-gray-500">
-            Upload a background image (webp/png/jpg). It will be available immediately and selected as the current background.
-          </p>
-          {uploadError && (
-            <p className="mt-1 text-xs font-semibold text-red-600">{uploadError}</p>
-          )}
-          {saveError && (
-            <p className="mt-1 text-xs font-semibold text-red-600">{saveError}</p>
-          )}
-          {(savingTheme || initializing) && !uploading && (
-            <p className="mt-1 text-xs text-gray-500">
-              {initializing ? "Loading theme…" : "Saving theme…"}
-            </p>
-          )}
-        </div>
-
-          <div className="grid gap-3 sm:grid-cols-2">
-            {items.map((item) => (
-              <button
-                key={item.fileName}
-                className={clsx(
-                  "relative h-32 overflow-hidden rounded-md border border-gray-200 bg-gray-50 text-left shadow-sm transition hover:border-primary",
-                  backgroundUrl === item.url && "ring-2 ring-primary",
-                )}
-                onClick={() => handleSet(item.url)}
-              >
-                <Image
-                  src={item.url}
-                  alt={item.fileName}
-                  fill
-                  className="object-cover"
-                  sizes="200px"
-                  unoptimized
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/0" />
-                <div className="absolute bottom-2 left-2 right-2 text-xs font-semibold text-white drop-shadow">
-                  {item.fileName}
-                </div>
-              </button>
-            ))}
-            {!loading && items.length === 0 && (
-              <div className="rounded-md border border-dashed border-gray-300 p-4 text-sm text-gray-500">
-                No images uploaded yet. Upload an image in the Media page, then pick it here.
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ThemeEditor

packages/web/src/components/game/join/BrandShell.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import { PropsWithChildren } from "react"
-
-const BrandShell = ({ children }: PropsWithChildren) => (
-  <div className="flex w-full max-w-xl flex-col items-center justify-center gap-4">
-    {children}
-  </div>
-)
-
-export default BrandShell

packages/web/src/components/game/join/Room.tsx

@@ -3,7 +3,6 @@ import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
-import BrandShell from "@rahoot/web/components/game/join/BrandShell"
 import { KeyboardEvent, useState } from "react"
 
 const Room = () => {
@@ -26,7 +25,6 @@ const Room = () => {
   })
 
   return (
-    <BrandShell>
     <Form>
       <Input
         onChange={(e) => setInvitation(e.target.value)}
@@ -35,7 +33,6 @@ const Room = () => {
       />
       <Button onClick={handleJoin}>Submit</Button>
     </Form>
-    </BrandShell>
   )
 }
 

packages/web/src/components/game/join/Username.tsx

@@ -4,7 +4,6 @@ import { STATUS } from "@rahoot/common/types/game/status"
 import Button from "@rahoot/web/components/Button"
 import Form from "@rahoot/web/components/Form"
 import Input from "@rahoot/web/components/Input"
-import BrandShell from "@rahoot/web/components/game/join/BrandShell"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 
@@ -43,7 +42,6 @@ const Username = () => {
   })
 
   return (
-    <BrandShell>
     <Form>
       <Input
         onChange={(e) => setUsername(e.target.value)}
@@ -52,7 +50,6 @@ const Username = () => {
       />
       <Button onClick={handleLogin}>Submit</Button>
     </Form>
-    </BrandShell>
   )
 }
 

packages/web/src/server/theme.ts

@@ -1,29 +0,0 @@
-import Config from "@rahoot/socket/services/config"
-
-export type ThemeSettings = {
-  brandName: string
-  backgroundUrl: string | null
-}
-
-export const getTheme = (): ThemeSettings => {
-  const theme = Config.theme()
-  return {
-    brandName: theme.brandName || "Rahoot",
-    backgroundUrl:
-      typeof theme.backgroundUrl === "string" && theme.backgroundUrl.length > 0
-        ? theme.backgroundUrl
-        : null,
-  }
-}
-
-export const saveTheme = (payload: Partial<ThemeSettings>): ThemeSettings => {
-  const current = getTheme()
-  const merged = {
-    brandName: payload.brandName ?? current.brandName,
-    backgroundUrl:
-      payload.backgroundUrl === undefined
-        ? current.backgroundUrl
-        : payload.backgroundUrl,
-  }
-  return Config.saveTheme(merged)
-}

packages/web/src/stores/manager.tsx

@@ -25,16 +25,7 @@ const initialState = {
 export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
   ...initialState,
 
-  setGameId: (gameId) => {
+  setGameId: (gameId) => set({ gameId }),
-    try {
-      if (gameId) {
-        localStorage.setItem("last_manager_game_id", gameId)
-      } else {
-        localStorage.removeItem("last_manager_game_id")
-      }
-    } catch {}
-    set({ gameId })
-  },
 
   setStatus: (name, data) => set({ status: createStatus(name, data) }),
   resetStatus: () => set({ status: null }),
@@ -44,10 +35,5 @@ export const useManagerStore = create<ManagerStore<StatusDataMap>>((set) => ({
       players: typeof players === "function" ? players(state.players) : players,
     })),
 
-  reset: () => {
+  reset: () => set(initialState),
-    try {
-      localStorage.removeItem("last_manager_game_id")
-    } catch {}
-    set(initialState)
-  },
 }))

packages/web/src/stores/theme.tsx

@@ -1,23 +0,0 @@
-import { create } from "zustand"
-import { persist } from "zustand/middleware"
-
-type ThemeState = {
-  backgroundUrl: string | null
-  brandName: string
-  setBackground: (_url: string | null) => void
-  setBrandName: (_name: string) => void
-  reset: () => void
-}
-
-export const useThemeStore = create<ThemeState>()(
-  persist(
-    (set) => ({
-      backgroundUrl: null,
-      brandName: "Rahoot",
-      setBackground: (backgroundUrl) => set({ backgroundUrl }),
-      setBrandName: (brandName) => set({ brandName }),
-      reset: () => set({ backgroundUrl: null, brandName: "Rahoot" }),
-    }),
-    { name: "theme-preferences" },
-  ),
-)