diff --git a/.specify/memory/constitution.md b/.specify/memory/constitution.md
new file mode 100644
index 00000000..f8b3571c
--- /dev/null
+++ b/.specify/memory/constitution.md
@@ -0,0 +1,74 @@
+# Scribble Game Engineering Constitution
+
+This constitution defines the long-term engineering principles and standards for the multiplayer Scribble drawing game. These principles constrain both backend and frontend development and MUST be followed for every feature implementation.
+
+## 1. Code Quality & Maintainability
+- **TypeScript First**: All code written for the backend and frontend MUST be fully typed. The use of `any` is strictly prohibited. If a type is truly dynamic, `unknown` MUST be used alongside appropriate type guards or assertions.
+- **ES Modules**: Standard relative and absolute ES module imports MUST be used across both environments. File extensions MUST be omitted or handled via `.js` standards where required.
+- **Immutability**: Developers SHOULD prefer immutable data structures. Pure functions MUST be used for calculations, state transformations, and game rule evaluations to avoid side effects.
+- **React Patterns**: The frontend MUST use functional components and strict React hooks (`useState`, `useEffect`, etc.).
+- **Code Style Consistency**: Code style MUST remain consistent with the existing patterns in the project. Linting and formatting rules SHOULD be run before committing changes.
+
+## 2. Simplicity & Modular Design
+- **Single Responsibility Principle**: Each module, function, and component MUST have a single, clear responsibility.
+- **Backend Architecture & Structure**:
+  - `src/api` MUST only handle routing, payload validation, and HTTP responses.
+  - `src/services` MUST contain the core business logic (e.g., room lifecycle, gameplay rules).
+  - `src/models` MUST define the data structures and TypeScript interfaces.
+  - **Memory Management**: The backend MUST keep the memory footprint for active game rooms minimal and explicitly remove inactive rooms to avoid stateful bloat.
+- **Frontend Architecture & Styling**:
+  - Components SHOULD be presentational and visually clean.
+  - Complex state management and logic MUST be encapsulated in custom hooks or state stores under `src/state` (following the established patterns in `roomStore.ts` using Zustand or Context API).
+  - **Styling Rules**: Classes MUST reside in `app.css` or CSS modules. Components MUST be kept structurally clean.
+- **No Over-Engineering**: Features MUST be implemented using the simplest viable logic. Premature optimizations or adding unnecessary abstraction layers SHOULD be avoided.
+
+## 3. Performance & Responsiveness
+- **Polling Efficiency**: Because WebSockets are not permitted, client-server sync MUST use HTTP polling.
+  - The polling frequency MUST be balanced (e.g., ~2 seconds for lobby/gameplay history).
+  - Backend endpoints serving polling requests MUST keep responses small and fast, avoiding heavy computations.
+- **Frontend Render Optimization**: Components MUST use appropriate React hooks (`useMemo`, `useCallback`) to prevent unnecessary re-renders during active canvas updates or polling cycles.
+- **Network Payload Minimization**: API responses SHOULD only return fields that are necessary for the current UI state.
+
+## 4. Security & Server-Side Validation
+- **Zero Trust Client**: The backend MUST NEVER trust input from the client. All gameplay state, validation of turns, drawer checks, and scoring calculations MUST be performed and stored on the server.
+- **Request Validation**: All request payloads (body, parameters, query string) and responses MUST be validated on the backend using `Zod` schemas before any business logic executes.
+- **Input Sanitization & Trimming**: Player names and guess inputs MUST be trimmed of leading/trailing whitespace. Whitespace-only or empty strings MUST be rejected with clear error messages.
+- **Multi-room Isolation**: All room data MUST be strictly isolated. A client in Room A MUST NEVER be able to query or affect the state of Room B.
+
+## 5. Error Handling & Recovery
+- **Fail Fast and Gracefully**: Code SHOULD detect invalid state or conditions early.
+- **Backend Recovery**:
+  - Express routes MUST catch exceptions and forward them to a centralized error handler.
+  - In-memory data store operations MUST fail gracefully without crashing the Node.js process.
+- **Frontend Resilience**:
+  - The frontend UI MUST NEVER crash due to API errors or unexpected server payloads.
+  - Polling mechanisms MUST handle transient network failures gracefully, using exponential backoff or simple retries, and showing a fallback/reconnecting indicator to the user.
+  - Errors from user actions (e.g. entering an invalid room code) MUST be displayed clearly as inline/toast UI messages.
+
+## 6. Testing Expectations
+- **Manual Verification**: Features MUST be verified manually using at least two independent browser sessions (tabs or windows) to simulate multiplayer flows.
+- **State Transition Testing**: Transitions (e.g., Lobby -> Game -> Result -> Restart) MUST be tested for clean state teardown and setup.
+- **Edge Cases**: Empty strings, special characters, case-insensitive guesses, and simultaneous request polling MUST be actively verified.
+
+## 7. Documentation Standards
+- **Self-Documenting Code**: Variable, function, and component names MUST be highly descriptive.
+- **Inline Documentation**: Complex business logic, state transitions, or math/rendering logic on the canvas MUST be documented with clear inline comments.
+- **API Spec Preservation**: Any changes or additions to REST endpoints MUST be documented in the corresponding specification file.
+
+## 8. Accessibility & User Experience
+- **Semantic HTML**: Frontend pages MUST use proper HTML5 semantic elements (`<main>`, `<section>`, `<nav>`, `<header>`).
+- **Interactive States**: Buttons, links, inputs, and drawing tools MUST have clear hover, focus, and active visual states.
+- **Error/Loading States**: Loading indicators MUST be displayed during api requests, and clear validation feedback MUST be rendered for user mistakes.
+
+## 9. AI Collaboration Rules
+- **Code Review**: All code generated by AI assistants MUST be reviewed line-by-line for readability, security, and conformity to this constitution before commitment.
+- **Step-by-step Refactoring**: Large-scale refactoring SHOULD be broken into smaller, reviewable commits rather than single large edits.
+- **Constraint Enforcement**: AI assistants MUST be explicitly instructed on constraints (e.g., no WebSockets, no database) prior to generation.
+
+## 10. Boundaries & Out-of-Scope Technologies
+The following technologies and practices are strictly out-of-scope. No code referring to or implementing these MUST be added:
+- **No WebSockets**: Do not use Socket.io or native HTML5 WebSockets. Sync MUST be done via HTTP polling.
+- **No Databases**: Do not use databases or persistent storage (SQL, MongoDB, Redis, SQLite). All data stores MUST be in-memory only.
+- **No Authentication**: Do not use accounts, logins, JWT, OAuth, or sessions.
+- **No Deployment/Infrastructure**: Do not configure CI/CD pipelines, Docker, or Kubernetes.
+- **No State/Routing Libraries**: Do not introduce new state management or routing libraries beyond what is already present in the starter (React Router v6).
diff --git a/backend/src/api/rooms.ts b/backend/src/api/rooms.ts
index 8a6c6c97..84248e1a 100644
--- a/backend/src/api/rooms.ts
+++ b/backend/src/api/rooms.ts
@@ -1,12 +1,26 @@
 import { Router } from "express";
 import {
   createRoomSchema,
+  drawingUpdateSchema,
   HttpError,
   joinRoomSchema,
+  participantActionSchema,
   roomCodeParamsSchema,
-  roomViewerQuerySchema
+  roomViewerQuerySchema,
+  submitGuessSchema,
+  startGameSchema
 } from "./schemas.js";
-import { createRoom, getRoom, joinRoom, toRoomSnapshot } from "../services/roomStore.js";
+import {
+  clearDrawing,
+  createRoom,
+  getRoom,
+  joinRoom,
+  restartGame,
+  startGame,
+  submitGuess,
+  toRoomSnapshot,
+  updateDrawing
+} from "../services/roomStore.js";
 
 export function createRoomsRouter() {
   const router = Router();
@@ -32,7 +46,7 @@ export function createRoomsRouter() {
       const result = joinRoom(code.toUpperCase(), playerName);
 
       if (!result) {
-        throw new HttpError(404, "Unable to join room");
+        throw new HttpError(404, "Room not found");
       }
 
       response.json({
@@ -44,6 +58,76 @@ export function createRoomsRouter() {
     }
   });
 
+  router.post("/:code/start", (request, response, next) => {
+    try {
+      const { code } = roomCodeParamsSchema.parse(request.params);
+      const { participantId } = startGameSchema.parse(request.body);
+      const room = startGame(code.toUpperCase(), participantId);
+
+      response.json({
+        room: toRoomSnapshot(room, participantId)
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  router.post("/:code/guess", (request, response, next) => {
+    try {
+      const { code } = roomCodeParamsSchema.parse(request.params);
+      const { participantId, text } = submitGuessSchema.parse(request.body);
+      const room = submitGuess(code.toUpperCase(), participantId, text);
+
+      response.json({
+        room: toRoomSnapshot(room, participantId)
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  router.post("/:code/draw", (request, response, next) => {
+    try {
+      const { code } = roomCodeParamsSchema.parse(request.params);
+      const { participantId, strokes } = drawingUpdateSchema.parse(request.body);
+      const room = updateDrawing(code.toUpperCase(), participantId, strokes);
+
+      response.json({
+        room: toRoomSnapshot(room, participantId)
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  router.post("/:code/clear", (request, response, next) => {
+    try {
+      const { code } = roomCodeParamsSchema.parse(request.params);
+      const { participantId } = participantActionSchema.parse(request.body);
+      const room = clearDrawing(code.toUpperCase(), participantId);
+
+      response.json({
+        room: toRoomSnapshot(room, participantId)
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
+  router.post("/:code/restart", (request, response, next) => {
+    try {
+      const { code } = roomCodeParamsSchema.parse(request.params);
+      const { participantId } = participantActionSchema.parse(request.body);
+      const room = restartGame(code.toUpperCase(), participantId);
+
+      response.json({
+        room: toRoomSnapshot(room, participantId)
+      });
+    } catch (error) {
+      next(error);
+    }
+  });
+
   router.get("/:code", (request, response, next) => {
     try {
       const { code } = roomCodeParamsSchema.parse(request.params);
@@ -51,7 +135,7 @@ export function createRoomsRouter() {
       const room = getRoom(code.toUpperCase());
 
       if (!room) {
-        throw new HttpError(404, "Unable to load room");
+        throw new HttpError(404, "Room not found");
       }
 
       response.json({
diff --git a/backend/src/api/schemas.test.ts b/backend/src/api/schemas.test.ts
index 641efea3..e4ac9814 100644
--- a/backend/src/api/schemas.test.ts
+++ b/backend/src/api/schemas.test.ts
@@ -1,5 +1,10 @@
 import { describe, expect, it } from "vitest";
-import { createRoomSchema, roomCodeParamsSchema } from "./schemas.js";
+import {
+  createRoomSchema,
+  drawingUpdateSchema,
+  roomCodeParamsSchema,
+  submitGuessSchema
+} from "./schemas.js";
 
 describe("schemas", () => {
   it("createRoomSchema accepts a valid body with playerName", () => {
@@ -11,4 +16,20 @@ describe("schemas", () => {
   it("roomCodeParamsSchema rejects missing code", () => {
     expect(() => roomCodeParamsSchema.parse({})).toThrow();
   });
+
+  it("submitGuessSchema accepts participantId and text", () => {
+    const result = submitGuessSchema.parse({ participantId: "p1", text: "pizza" });
+    expect(result.participantId).toBe("p1");
+    expect(result.text).toBe("pizza");
+  });
+
+  it("drawingUpdateSchema accepts strokes payload", () => {
+    const result = drawingUpdateSchema.parse({
+      participantId: "p1",
+      strokes: [{ points: [{ x: 10, y: 20 }, { x: 12, y: 22 }] }]
+    });
+
+    expect(result.strokes).toHaveLength(1);
+    expect(result.strokes[0].points).toHaveLength(2);
+  });
 });
diff --git a/backend/src/api/schemas.ts b/backend/src/api/schemas.ts
index bfebba08..c4187acc 100644
--- a/backend/src/api/schemas.ts
+++ b/backend/src/api/schemas.ts
@@ -1,21 +1,48 @@
 import { z } from "zod";
 
 export const createRoomSchema = z.object({
-  playerName: z.string().optional()
+  playerName: z.string().trim().min(1, "Player name cannot be empty")
 });
 
 export const joinRoomSchema = z.object({
-  playerName: z.string().optional()
+  playerName: z.string().trim().min(1, "Player name cannot be empty")
 });
 
 export const roomCodeParamsSchema = z.object({
-  code: z.string()
+  code: z.string().trim().min(1, "Room code cannot be empty")
 });
 
 export const roomViewerQuerySchema = z.object({
   participantId: z.string().optional()
 });
 
+export const startGameSchema = z.object({
+  participantId: z.string().min(1, "Participant ID is required")
+});
+
+export const submitGuessSchema = z.object({
+  participantId: z.string().min(1, "Participant ID is required"),
+  text: z.string()
+});
+
+export const drawingUpdateSchema = z.object({
+  participantId: z.string().min(1, "Participant ID is required"),
+  strokes: z.array(
+    z.object({
+      points: z.array(
+        z.object({
+          x: z.number(),
+          y: z.number()
+        })
+      )
+    })
+  )
+});
+
+export const participantActionSchema = z.object({
+  participantId: z.string().min(1, "Participant ID is required")
+});
+
 export class HttpError extends Error {
   statusCode: number;
 
diff --git a/backend/src/models/game.ts b/backend/src/models/game.ts
index 88ce9466..cff4b1ab 100644
--- a/backend/src/models/game.ts
+++ b/backend/src/models/game.ts
@@ -1,5 +1,5 @@
 export type ParticipantRole = "drawer" | "guesser";
-export type RoomStatus = "lobby";
+export type RoomStatus = "lobby" | "active" | "results";
 
 export interface Participant {
   id: string;
@@ -7,20 +7,52 @@ export interface Participant {
   joinedAt: string;
 }
 
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface DrawingStroke {
+  points: Point[];
+}
+
+export interface Guess {
+  participantId: string;
+  participantName: string;
+  text: string;
+  correct: boolean;
+  timestamp: string;
+}
+
 export interface Room {
   code: string;
   status: RoomStatus;
+  hostId: string;
   participants: Participant[];
   createdAt: string;
   updatedAt: string;
+  wordIndex: number;
+  drawerId?: string;
+  secretWord?: string;
+  guesses: Guess[];
+  scores: Record<string, number>;
+  drawing: DrawingStroke[];
+  correctGuessers: string[];
 }
 
 export interface RoomSnapshot {
   code: string;
   status: RoomStatus;
+  hostId: string;
   participants: Participant[];
   availableWords: string[];
   roles: ParticipantRole[];
+  drawerId?: string;
+  secretWord?: string;
+  guesses: Guess[];
+  scores: Record<string, number>;
+  drawing: DrawingStroke[];
+  correctGuessers: string[];
 }
 
 export interface RoomSessionResponse {
diff --git a/backend/src/services/roomStore.test.ts b/backend/src/services/roomStore.test.ts
index b70ef77b..c4487659 100644
--- a/backend/src/services/roomStore.test.ts
+++ b/backend/src/services/roomStore.test.ts
@@ -1,5 +1,15 @@
 import { describe, expect, it } from "vitest";
-import { createRoom, joinRoom } from "./roomStore.js";
+import {
+  clearDrawing,
+  createRoom,
+  getDeterministicWord,
+  joinRoom,
+  restartGame,
+  startGame,
+  submitGuess,
+  toRoomSnapshot,
+  updateDrawing
+} from "./roomStore.js";
 
 describe("roomStore", () => {
   it("createRoom returns a room with a 4-character uppercase code", () => {
@@ -16,4 +26,208 @@ describe("roomStore", () => {
 
     expect(result).toBeNull();
   });
+
+  it("trims player name on createRoom and joinRoom", () => {
+    const createResult = createRoom("   Alice   ");
+    expect(createResult.room.participants[0].name).toBe("Alice");
+
+    const joinResult = joinRoom(createResult.room.code, "  Bob  ");
+    expect(joinResult!.room.participants[1].name).toBe("Bob");
+  });
+
+  it("selects secret word deterministically from the room code", () => {
+    const word1 = getDeterministicWord("ABCD");
+    const word2 = getDeterministicWord("ABCD");
+    expect(word1).toBe(word2);
+
+    const word3 = getDeterministicWord("WXYZ");
+    // Ensure it picks valid starter words
+    expect(["rocket", "pizza", "castle", "guitar", "sunflower"]).toContain(word1);
+    expect(["rocket", "pizza", "castle", "guitar", "sunflower"]).toContain(word3);
+  });
+
+  it("startGame sets status to active, assigns host as drawer, and sets a secret word", () => {
+    const createResult = createRoom("Alice");
+    const hostId = createResult.participantId;
+    const code = createResult.room.code;
+
+    // Join second player so we can start
+    joinRoom(code, "Bob");
+
+    const updatedRoom = startGame(code, hostId);
+    expect(updatedRoom.status).toBe("active");
+    expect(updatedRoom.drawerId).toBe(hostId);
+    expect(updatedRoom.secretWord).toBeDefined();
+    expect(updatedRoom.scores[hostId]).toBe(0);
+  });
+
+  it("toRoomSnapshot includes secretWord for the drawer but not for guessers", () => {
+    const createResult = createRoom("Alice");
+    const hostId = createResult.participantId;
+    const code = createResult.room.code;
+
+    const joinResult = joinRoom(code, "Bob");
+    const guestId = joinResult!.participantId;
+
+    const updatedRoom = startGame(code, hostId);
+
+    const hostSnapshot = toRoomSnapshot(updatedRoom, hostId);
+    const guestSnapshot = toRoomSnapshot(updatedRoom, guestId);
+
+    expect(hostSnapshot.drawerId).toBe(hostId);
+    expect(hostSnapshot.secretWord).toBe(updatedRoom.secretWord);
+
+    expect(guestSnapshot.drawerId).toBe(hostId);
+    expect(guestSnapshot.secretWord).toBeUndefined();
+  });
+
+  it("rejects empty or whitespace-only guesses", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const joinResult = joinRoom(code, "Bob")!;
+    startGame(code, hostId);
+
+    expect(() => submitGuess(code, joinResult.participantId, "   ")).toThrow("Guess cannot be empty");
+  });
+
+  it("matches correct guesses case-insensitively and only scores once", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const joinResult = joinRoom(code, "Bob")!;
+    const startedRoom = startGame(code, hostId);
+
+    const firstGuessRoom = submitGuess(code, joinResult.participantId, startedRoom.secretWord!.toUpperCase());
+    expect(firstGuessRoom.scores[joinResult.participantId]).toBe(100);
+    expect(firstGuessRoom.guesses.at(-1)?.correct).toBe(true);
+
+    const secondGuessRoom = submitGuess(code, joinResult.participantId, startedRoom.secretWord!.toLowerCase());
+    expect(secondGuessRoom.scores[joinResult.participantId]).toBe(100);
+    expect(secondGuessRoom.guesses.at(-1)?.correct).toBe(true);
+    expect(secondGuessRoom.correctGuessers).toContain(joinResult.participantId);
+  });
+
+  it("rejects drawer guess attempts", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    joinRoom(code, "Bob");
+    startGame(code, hostId);
+
+    expect(() => submitGuess(code, hostId, "pizza")).toThrow("Drawer cannot submit guesses");
+  });
+
+  it("allows drawer to update and clear drawing while blocking guessers", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const joinResult = joinRoom(code, "Bob")!;
+    startGame(code, hostId);
+
+    const updatedRoom = updateDrawing(code, hostId, [{ points: [{ x: 1, y: 2 }, { x: 3, y: 4 }] }]);
+    expect(updatedRoom.drawing).toHaveLength(1);
+
+    expect(() =>
+      updateDrawing(code, joinResult.participantId, [{ points: [{ x: 5, y: 6 }] }])
+    ).toThrow("Only the drawer can update drawing");
+
+    const clearedRoom = clearDrawing(code, hostId);
+    expect(clearedRoom.drawing).toEqual([]);
+  });
+
+  it("transitions to results when all guessers submit at least one guess", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const guestOne = joinRoom(code, "Bob")!;
+    const guestTwo = joinRoom(code, "Carol")!;
+    const startedRoom = startGame(code, hostId);
+
+    const afterFirstCorrect = submitGuess(code, guestOne.participantId, startedRoom.secretWord!);
+    expect(afterFirstCorrect.status).toBe("active");
+
+    const afterSecondGuess = submitGuess(code, guestTwo.participantId, "wrongword");
+    expect(afterSecondGuess.status).toBe("results");
+  });
+
+  it("reveals secret word to all viewers during results", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const guest = joinRoom(code, "Bob")!;
+    const startedRoom = startGame(code, hostId);
+    const resultsRoom = submitGuess(code, guest.participantId, startedRoom.secretWord!);
+
+    const drawerSnapshot = toRoomSnapshot(resultsRoom, hostId);
+    const guestSnapshot = toRoomSnapshot(resultsRoom, guest.participantId);
+
+    expect(resultsRoom.status).toBe("results");
+    expect(drawerSnapshot.secretWord).toBe(startedRoom.secretWord);
+    expect(guestSnapshot.secretWord).toBe(startedRoom.secretWord);
+  });
+
+  it("restartGame resets round state and preserves participants", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const guest = joinRoom(code, "Bob")!;
+    const startedRoom = startGame(code, hostId);
+    const resultsRoom = submitGuess(code, guest.participantId, startedRoom.secretWord!);
+
+    const restartedRoom = restartGame(code, hostId);
+
+    expect(resultsRoom.status).toBe("results");
+    expect(restartedRoom.status).toBe("lobby");
+    expect(restartedRoom.participants.map((participant) => participant.id)).toEqual(
+      resultsRoom.participants.map((participant) => participant.id)
+    );
+    expect(restartedRoom.drawing).toEqual([]);
+    expect(restartedRoom.guesses).toEqual([]);
+    expect(restartedRoom.correctGuessers).toEqual([]);
+    expect(restartedRoom.secretWord).toBeUndefined();
+    expect(restartedRoom.drawerId).toBeUndefined();
+    expect(restartedRoom.scores[hostId]).toBe(0);
+    expect(restartedRoom.scores[guest.participantId]).toBe(0);
+  });
+
+  it("picks the next word after restart", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const guest = joinRoom(code, "Bob")!;
+
+    const firstRound = startGame(code, hostId);
+    const firstWord = firstRound.secretWord;
+
+    submitGuess(code, guest.participantId, "wrongword");
+    restartGame(code, hostId);
+
+    const secondRound = startGame(code, hostId);
+    expect(secondRound.secretWord).toBeDefined();
+    expect(secondRound.secretWord).not.toBe(firstWord);
+  });
+
+  it("rejects restart when caller is not host", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    const guest = joinRoom(code, "Bob")!;
+    const startedRoom = startGame(code, hostId);
+    submitGuess(code, guest.participantId, startedRoom.secretWord!);
+
+    expect(() => restartGame(code, guest.participantId)).toThrow("Only the host can restart the game");
+  });
+
+  it("rejects restart outside results state", () => {
+    const createResult = createRoom("Alice");
+    const code = createResult.room.code;
+    const hostId = createResult.participantId;
+    joinRoom(code, "Bob");
+
+    expect(() => restartGame(code, hostId)).toThrow("Game can only be restarted from results");
+
+    startGame(code, hostId);
+    expect(() => restartGame(code, hostId)).toThrow("Game can only be restarted from results");
+  });
 });
diff --git a/backend/src/services/roomStore.ts b/backend/src/services/roomStore.ts
index e53987a4..bac8c275 100644
--- a/backend/src/services/roomStore.ts
+++ b/backend/src/services/roomStore.ts
@@ -1,6 +1,7 @@
 import { randomUUID } from "node:crypto";
-import type { Participant, Room, RoomSnapshot } from "../models/game.js";
+import type { DrawingStroke, Participant, Room, RoomSnapshot } from "../models/game.js";
 import { STARTER_ROLES, STARTER_WORDS } from "../seed/starterData.js";
+import { HttpError } from "../api/schemas.js";
 
 const rooms = new Map<string, Room>();
 
@@ -50,15 +51,29 @@ export function listWords() {
 }
 
 export function createRoom(playerName?: string) {
-  const participant = createParticipant(playerName);
+  const trimmedName = (playerName || "").trim();
+  if (!trimmedName) {
+    throw new HttpError(400, "Player name cannot be empty");
+  }
+  const participant = createParticipant(trimmedName);
   const room: Room = {
     code: generateUniqueCode(),
     status: "lobby",
+    hostId: participant.id,
     participants: [participant],
     createdAt: now(),
-    updatedAt: now()
+    updatedAt: now(),
+    wordIndex: 0,
+    guesses: [],
+    scores: {
+      [participant.id]: 0
+    },
+    drawing: [],
+    correctGuessers: []
   };
 
+  room.wordIndex = room.code.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) % STARTER_WORDS.length;
+
   rooms.set(room.code, room);
 
   return {
@@ -68,14 +83,19 @@ export function createRoom(playerName?: string) {
 }
 
 export function joinRoom(code: string, playerName?: string) {
+  const trimmedName = (playerName || "").trim();
+  if (!trimmedName) {
+    throw new HttpError(400, "Player name cannot be empty");
+  }
   const room = rooms.get(code);
 
   if (!room) {
     return null;
   }
 
-  const participant = createParticipant(playerName);
+  const participant = createParticipant(trimmedName);
   room.participants.push(participant);
+  room.scores[participant.id] = 0;
   room.updatedAt = now();
   rooms.set(room.code, room);
 
@@ -96,14 +116,193 @@ export function saveRoom(room: Room) {
   return getRoom(room.code);
 }
 
-export function toRoomSnapshot(room: Room, viewerParticipantId?: string): RoomSnapshot {
-  void viewerParticipantId;
+export function getDeterministicWord(code: string): string {
+  const sum = code.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  return STARTER_WORDS[sum % STARTER_WORDS.length];
+}
 
-  return {
+export function startGame(code: string, hostParticipantId: string) {
+  const room = rooms.get(code);
+  if (!room) {
+    throw new HttpError(404, "Room not found");
+  }
+
+  if (room.status !== "lobby") {
+    throw new HttpError(400, "Game has already started");
+  }
+
+  if (room.hostId !== hostParticipantId) {
+    throw new HttpError(403, "Only the host can start the game");
+  }
+
+  if (room.participants.length < 2) {
+    throw new HttpError(400, "Need at least 2 players to start");
+  }
+
+  room.status = "active";
+  room.drawerId = room.participants[0].id;
+  room.secretWord = STARTER_WORDS[room.wordIndex % STARTER_WORDS.length];
+  room.guesses = [];
+  room.drawing = [];
+  room.correctGuessers = [];
+  for (const participant of room.participants) {
+    room.scores[participant.id] = 0;
+  }
+  room.updatedAt = now();
+  rooms.set(room.code, room);
+
+  return cloneRoom(room);
+}
+
+function getRoomOrThrow(code: string) {
+  const room = rooms.get(code);
+  if (!room) {
+    throw new HttpError(404, "Room not found");
+  }
+
+  return room;
+}
+
+function ensureParticipantInRoom(room: Room, participantId: string) {
+  const participant = room.participants.find((entry) => entry.id === participantId);
+  if (!participant) {
+    throw new HttpError(404, "Participant not found in room");
+  }
+
+  return participant;
+}
+
+function ensureActiveRoom(room: Room) {
+  if (room.status !== "active") {
+    throw new HttpError(400, "Game is not active");
+  }
+}
+
+export function submitGuess(code: string, participantId: string, text: string) {
+  const room = getRoomOrThrow(code);
+  ensureActiveRoom(room);
+  ensureParticipantInRoom(room, participantId);
+
+  if (participantId === room.drawerId) {
+    throw new HttpError(403, "Drawer cannot submit guesses");
+  }
+
+  const normalizedText = text.trim();
+  if (!normalizedText) {
+    throw new HttpError(400, "Guess cannot be empty");
+  }
+
+  const participant = room.participants.find((entry) => entry.id === participantId)!;
+  const normalizedSecretWord = (room.secretWord ?? "").trim().toLowerCase();
+  const isCorrect = normalizedSecretWord.length > 0 && normalizedText.toLowerCase() === normalizedSecretWord;
+
+  if (isCorrect && !room.correctGuessers.includes(participantId)) {
+    room.correctGuessers.push(participantId);
+    room.scores[participantId] = (room.scores[participantId] ?? 0) + 100;
+  }
+
+  room.guesses.push({
+    participantId,
+    participantName: participant.name,
+    text: normalizedText,
+    correct: isCorrect,
+    timestamp: now()
+  });
+
+  const allNonDrawersGuessedAtLeastOnce = room.participants
+    .filter((participant) => participant.id !== room.drawerId)
+    .every((participant) => room.guesses.some((guess) => guess.participantId === participant.id));
+
+  if (allNonDrawersGuessedAtLeastOnce) {
+    room.status = "results";
+  }
+
+  room.updatedAt = now();
+  rooms.set(room.code, room);
+  return cloneRoom(room);
+}
+
+export function restartGame(code: string, hostParticipantId: string) {
+  const room = getRoomOrThrow(code);
+  ensureParticipantInRoom(room, hostParticipantId);
+
+  if (room.hostId !== hostParticipantId) {
+    throw new HttpError(403, "Only the host can restart the game");
+  }
+
+  if (room.status !== "results") {
+    throw new HttpError(400, "Game can only be restarted from results");
+  }
+
+  room.status = "lobby";
+  room.wordIndex = (room.wordIndex + 1) % STARTER_WORDS.length;
+  room.drawerId = undefined;
+  room.secretWord = undefined;
+  room.guesses = [];
+  room.drawing = [];
+  room.correctGuessers = [];
+  for (const participant of room.participants) {
+    room.scores[participant.id] = 0;
+  }
+
+  room.updatedAt = now();
+  rooms.set(room.code, room);
+  return cloneRoom(room);
+}
+
+export function updateDrawing(code: string, participantId: string, strokes: DrawingStroke[]) {
+  const room = getRoomOrThrow(code);
+  ensureActiveRoom(room);
+  ensureParticipantInRoom(room, participantId);
+
+  if (participantId !== room.drawerId) {
+    throw new HttpError(403, "Only the drawer can update drawing");
+  }
+
+  room.drawing = structuredClone(strokes);
+  room.updatedAt = now();
+  rooms.set(room.code, room);
+  return cloneRoom(room);
+}
+
+export function clearDrawing(code: string, participantId: string) {
+  const room = getRoomOrThrow(code);
+  ensureActiveRoom(room);
+  ensureParticipantInRoom(room, participantId);
+
+  if (participantId !== room.drawerId) {
+    throw new HttpError(403, "Only the drawer can clear drawing");
+  }
+
+  room.drawing = [];
+  room.updatedAt = now();
+  rooms.set(room.code, room);
+  return cloneRoom(room);
+}
+
+export function toRoomSnapshot(room: Room, viewerParticipantId?: string): RoomSnapshot {
+  const snapshot: RoomSnapshot = {
     code: room.code,
     status: room.status,
+    hostId: room.hostId,
     participants: room.participants.map((participant) => ({ ...participant })),
     availableWords: listWords(),
-    roles: [...STARTER_ROLES]
+    roles: [...STARTER_ROLES],
+    guesses: room.guesses.map((guess) => ({ ...guess })),
+    scores: { ...room.scores },
+    drawing: room.drawing.map((stroke) => ({
+      points: stroke.points.map((point) => ({ ...point }))
+    })),
+    correctGuessers: [...room.correctGuessers]
   };
+
+  if (room.drawerId) {
+    snapshot.drawerId = room.drawerId;
+  }
+
+  if (room.secretWord && (room.status === "results" || (room.drawerId && viewerParticipantId === room.drawerId))) {
+    snapshot.secretWord = room.secretWord;
+  }
+
+  return snapshot;
 }
diff --git a/discovery.md b/discovery.md
new file mode 100644
index 00000000..1e7bfca1
--- /dev/null
+++ b/discovery.md
@@ -0,0 +1,66 @@
+# Scribble Game Discovery Notes
+
+This document contains the discovery notes and code analysis for the multiplayer Scribble drawing game scaffold.
+
+---
+
+## 1. Incomplete Behaviors (Starter Gaps)
+
+During the inspection of the codebase, we identified the following major functional gaps:
+
+1. **Lobby Polling & Automatic Synchronization**
+   - *Current Behavior*: When a player creates a room or joins, they are directed to the Lobby. However, the player list is static. There is only a manual "Refresh Room" button that makes a one-off call to `fetchRoom()`.
+   - *Missing Behavior*: Automated polling (every ~2 seconds) on the client is missing. When other players join, the lobby doesn't update unless manually refreshed.
+   - *Relevant Files*: [LobbyPage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/LobbyPage.tsx), [roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/state/roomStore.ts).
+
+2. **Host Designation & Start Authorization**
+   - *Current Behavior*: The first player creating the room is not explicitly tracked as the host. The "Start Game" button in the Lobby simply redirects the client to the `/game` route locally. Any player (including non-creators/guests) can click it, and it can be clicked even if there is only 1 player in the lobby.
+   - *Missing Behavior*: Storing `hostId` on the server, enforcing a minimum of 2 players to start, disabling or hiding the button for non-hosts, and restricting the `/rooms/:code/start` action via backend authorization.
+   - *Relevant Files*: [game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts), [roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts), [rooms.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/rooms.ts).
+
+3. **Game State Lifecycle & Drawer Assignment**
+   - *Current Behavior*: The room has a status of `"lobby"`. There is no state transition to `"active"`, `"game"`, or `"results"`.
+   - *Missing Behavior*: Choosing a drawer (e.g. the first player or host), picking a secret word deterministically from the starter data (`rocket`, `pizza`, `castle`, `guitar`, `sunflower`), and hiding the secret word from guessers while displaying it only to the drawer.
+   - *Relevant Files*: [GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx), [game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts), [roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts).
+
+4. **Canvas Drawing & Real-time Canvas Rendering**
+   - *Current Behavior*: The canvas on the game page is a static HTML5 `<canvas>` placeholder. It is not interactive, and no drawing data is captured.
+   - *Missing Behavior*: Mouse/touch event listeners to draw lines on the drawer's screen, an endpoint/state to store current drawing paths, and client polling to periodically fetch and render drawing paths on the guessers' canvases.
+   - *Relevant Files*: [GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx).
+
+5. **Guess Submission, Scoring, and Guess History**
+   - *Current Behavior*: The guess input is present but functional only as a local text box. Guess submission is not wired up.
+   - *Missing Behavior*: A `POST /rooms/:code/guess` route, input trimming and case-insensitive check against the secret word, adding guesses to a synced history array, allocating `+100` points to correct guessers, and transitioning the room status to a result state once guessed correctly or finished.
+   - *Relevant Files*: [GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx), [rooms.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/rooms.ts).
+
+---
+
+## 2. Key Engineering Assumptions
+
+1. **State Persistence & Lifetime**
+   - *Assumption*: All room state lives purely in-memory inside the Node.js Express process (a global `rooms` Map). Restarting the backend server resets all room sessions. No database or persistent store is needed.
+
+2. **HTTP Polling Cadence**
+   - *Assumption*: A polling interval of `2000ms` (2 seconds) is sufficient for checking lobby participants, guess history, canvas path updates, and state transitions (e.g. from lobby to game). This interval balances user-experience responsiveness and backend request load.
+
+3. **Multi-Tab Isolation**
+   - *Assumption*: The player session is tracked on the client side using unique participant IDs returned during the create/join APIs. Storing this `participantId` in `sessionStorage` allows players to refresh the tab without losing their player session.
+
+4. **Synchronous Node Concurrency**
+   - *Assumption*: Because Node.js handles requests on a single-threaded event loop, state modifications to the in-memory room map are safe from race conditions, simplifying concurrent join requests.
+
+---
+
+## 3. Relevant Codebase Files Map
+
+### Backend
+- **[models/game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts)**: Declares core types like `Room`, `RoomSnapshot`, and `Participant`.
+- **[services/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts)**: Handles memory read/writes for room maps.
+- **[api/rooms.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/rooms.ts)**: Configures API endpoints for rooms.
+- **[api/schemas.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/schemas.ts)**: Validates input bodies/parameters using Zod schemas.
+
+### Frontend
+- **[services/api.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/services/api.ts)**: Handles HTTP requests to the backend.
+- **[state/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/state/roomStore.ts)**: External React store to hold room status.
+- **[pages/LobbyPage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/LobbyPage.tsx)**: UI showing the lobby and participants.
+- **[pages/GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx)**: UI containing canvas, history, and scoring.
diff --git a/frontend/src/components/GuessForm.tsx b/frontend/src/components/GuessForm.tsx
index 0a1ec474..e97dde1e 100644
--- a/frontend/src/components/GuessForm.tsx
+++ b/frontend/src/components/GuessForm.tsx
@@ -1,14 +1,31 @@
 import { useState } from "react";
+import { useRoomState, useRoomStore } from "../state/roomStore";
 
-interface GuessFormProps {
-  disabled?: boolean;
-}
-
-export function GuessForm({ disabled = false }: GuessFormProps) {
+export function GuessForm() {
+  const roomStore = useRoomStore();
+  const { room, participantId, isLoading } = useRoomState();
   const [guessText, setGuessText] = useState("");
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  const isDrawer = !!room && room.drawerId === participantId;
+  const guessedCorrectly = !!participantId && !!room?.correctGuessers.includes(participantId);
+  const disabled = isLoading || isDrawer || guessedCorrectly;
 
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
+
+    if (disabled) {
+      return;
+    }
+
+    try {
+      setSubmitError(null);
+      await roomStore.submitGuess(guessText);
+      setGuessText("");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unable to submit guess";
+      setSubmitError(message);
+    }
   }
 
   return (
@@ -22,6 +39,9 @@ export function GuessForm({ disabled = false }: GuessFormProps) {
           disabled={disabled}
         />
       </label>
+      {submitError ? <p className="form__error">{submitError}</p> : null}
+      {isDrawer ? <p className="status-line">Drawers cannot submit guesses.</p> : null}
+      {guessedCorrectly ? <p className="status-line">Correct! You already scored this round.</p> : null}
       <div className="button-row button-row--compact">
         <button className="button button--primary" type="submit" disabled={disabled}>
           Submit Guess
diff --git a/frontend/src/components/ResultPanel.tsx b/frontend/src/components/ResultPanel.tsx
index 447be42e..6b2683e9 100644
--- a/frontend/src/components/ResultPanel.tsx
+++ b/frontend/src/components/ResultPanel.tsx
@@ -1,11 +1,38 @@
 import { Card } from "./Card";
+import { useRoomState } from "../state/roomStore";
+
+interface ResultPanelProps {
+  showGuesses?: boolean;
+}
+
+export function ResultPanel({ showGuesses = true }: ResultPanelProps) {
+  const { room } = useRoomState();
+
+  if (!showGuesses) {
+    return (
+      <Card title="Guess History">
+        <p className="placeholder-note">Guess history is revealed after the round ends.</p>
+      </Card>
+    );
+  }
 
-export function ResultPanel() {
   return (
-    <Card title="Activity">
-      <div className="placeholder-block" style={{ backgroundColor: '#f9fafb' }}>
-        <p style={{ fontSize: '0.875rem', color: '#6b7280' }}>Game activity and guesses will appear here.</p>
-      </div>
+    <Card title="Guess History">
+      {!room || room.guesses.length === 0 ? (
+        <p className="placeholder-note">No guesses submitted yet.</p>
+      ) : (
+        <ul className="guess-history-list">
+          {room.guesses.map((guess, index) => (
+            <li
+              className={`guess-history-list__item ${guess.correct ? "guess-history-list__item--correct" : "guess-history-list__item--incorrect"}`}
+              key={`${guess.participantId}-${guess.timestamp}-${index}`}
+            >
+              <span>{guess.participantName}: {guess.text}</span>
+              <strong>{guess.correct ? "Correct" : "Nope"}</strong>
+            </li>
+          ))}
+        </ul>
+      )}
     </Card>
   );
 }
diff --git a/frontend/src/components/Scoreboard.tsx b/frontend/src/components/Scoreboard.tsx
index 647c734f..50043773 100644
--- a/frontend/src/components/Scoreboard.tsx
+++ b/frontend/src/components/Scoreboard.tsx
@@ -1,14 +1,42 @@
 import { Card } from "./Card";
+import { useRoomState } from "../state/roomStore";
+
+interface ScoreboardProps {
+  sortByScore?: boolean;
+}
+
+export function Scoreboard({ sortByScore = false }: ScoreboardProps) {
+  const { room, participantId } = useRoomState();
+
+  const rankedParticipants =
+    room && sortByScore
+      ? [...room.participants].sort((a, b) => {
+          const scoreDelta = (room.scores[b.id] ?? 0) - (room.scores[a.id] ?? 0);
+          if (scoreDelta !== 0) {
+            return scoreDelta;
+          }
+
+          return a.name.localeCompare(b.name);
+        })
+      : room?.participants ?? [];
 
-export function Scoreboard() {
   return (
     <Card title="Scoreboard">
-      <div className="placeholder-block" style={{ backgroundColor: '#f9fafb' }}>
-        <div className="placeholder-row">
-          <span>Waiting for players...</span>
-          <strong>0</strong>
-        </div>
-      </div>
+      {!room ? (
+        <p className="placeholder-note">Waiting for room data...</p>
+      ) : (
+        <ul className="scoreboard-list">
+          {rankedParticipants.map((participant) => (
+            <li
+              className={`scoreboard-list__item ${participant.id === participantId ? "scoreboard-list__item--self" : ""}`}
+              key={participant.id}
+            >
+              <span>{participant.name}</span>
+              <strong>{room.scores[participant.id] ?? 0}</strong>
+            </li>
+          ))}
+        </ul>
+      )}
     </Card>
   );
 }
diff --git a/frontend/src/pages/GamePage.tsx b/frontend/src/pages/GamePage.tsx
index a768183e..39c1aba5 100644
--- a/frontend/src/pages/GamePage.tsx
+++ b/frontend/src/pages/GamePage.tsx
@@ -1,50 +1,239 @@
-import { useEffect } from "react";
+import { useCallback, useEffect, useRef, type PointerEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import { Card } from "../components/Card";
 import { GuessForm } from "../components/GuessForm";
 import { ResultPanel } from "../components/ResultPanel";
 import { RoomCodeBadge } from "../components/RoomCodeBadge";
 import { Scoreboard } from "../components/Scoreboard";
-import { useRoomState } from "../state/roomStore";
+import { useRoomState, useRoomStore } from "../state/roomStore";
+import type { DrawingStroke, Point } from "../services/api";
 
 export function GamePage() {
   const navigate = useNavigate();
   const { room, participantId } = useRoomState();
+  const roomStore = useRoomStore();
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const isDrawingRef = useRef(false);
+  const activeStrokeRef = useRef<Point[]>([]);
+
+  const drawScene = useCallback(
+    (strokes: DrawingStroke[], activePoints: Point[] = []) => {
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        return;
+      }
+
+      const context = canvas.getContext("2d");
+      if (!context) {
+        return;
+      }
+
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.fillStyle = "#ffffff";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+
+      const renderStroke = (points: Point[]) => {
+        if (points.length === 0) {
+          return;
+        }
+
+        context.strokeStyle = "#111827";
+        context.lineWidth = 4;
+        context.lineCap = "round";
+        context.lineJoin = "round";
+        context.beginPath();
+        context.moveTo(points[0].x, points[0].y);
+        for (let index = 1; index < points.length; index += 1) {
+          context.lineTo(points[index].x, points[index].y);
+        }
+
+        context.stroke();
+      };
+
+      for (const stroke of strokes) {
+        renderStroke(stroke.points);
+      }
+
+      if (activePoints.length > 0) {
+        renderStroke(activePoints);
+      }
+    },
+    []
+  );
+
+  const toCanvasPoint = useCallback((event: PointerEvent<HTMLCanvasElement>): Point => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return { x: 0, y: 0 };
+    }
+
+    const rect = canvas.getBoundingClientRect();
+    return {
+      x: ((event.clientX - rect.left) / rect.width) * canvas.width,
+      y: ((event.clientY - rect.top) / rect.height) * canvas.height
+    };
+  }, []);
 
   useEffect(() => {
     if (!room) {
       navigate("/", { replace: true });
+      return;
+    }
+
+    if (room.status === "lobby") {
+      navigate("/lobby", { replace: true });
+      return;
     }
-  }, [navigate, room]);
+
+    const intervalId = setInterval(async () => {
+      try {
+        await roomStore.fetchRoom(true);
+      } catch (caughtError) {
+        console.error("Polling fetchRoom failed in GamePage:", caughtError);
+      }
+    }, 2000);
+
+    return () => clearInterval(intervalId);
+  }, [navigate, room, roomStore]);
 
   if (!room) {
     return null;
   }
 
-  const viewer = room.participants.find((participant) => participant.id === participantId) ?? null;
+  const activeRoom = room;
+
+  const viewer = activeRoom.participants.find((participant) => participant.id === participantId) ?? null;
+  const isDrawer = activeRoom.drawerId === participantId;
+  const isHost = activeRoom.hostId === participantId;
+  const inResults = activeRoom.status === "results";
+  const canViewGuessHistory = inResults;
+  const drawerName = activeRoom.participants.find((p) => p.id === activeRoom.drawerId)?.name ?? "Someone";
+
+  useEffect(() => {
+    drawScene(activeRoom.drawing);
+  }, [activeRoom.drawing, drawScene]);
+
+  async function handleClearCanvas() {
+    if (!isDrawer) {
+      return;
+    }
+
+    try {
+      await roomStore.clearDrawing();
+    } catch (error) {
+      console.error("Clear drawing failed:", error);
+    }
+  }
+
+  async function handleRestartGame() {
+    if (!isHost || !inResults) {
+      return;
+    }
+
+    try {
+      await roomStore.restartGame();
+      navigate("/lobby", { replace: true });
+    } catch (error) {
+      console.error("Restart game failed:", error);
+    }
+  }
+
+  function handlePointerDown(event: PointerEvent<HTMLCanvasElement>) {
+    if (!isDrawer) {
+      return;
+    }
+
+    isDrawingRef.current = true;
+    activeStrokeRef.current = [toCanvasPoint(event)];
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drawScene(activeRoom.drawing, activeStrokeRef.current);
+  }
+
+  function handlePointerMove(event: PointerEvent<HTMLCanvasElement>) {
+    if (!isDrawer || !isDrawingRef.current) {
+      return;
+    }
+
+    activeStrokeRef.current = [...activeStrokeRef.current, toCanvasPoint(event)];
+    drawScene(activeRoom.drawing, activeStrokeRef.current);
+  }
+
+  async function finishStroke() {
+    if (!isDrawer || !isDrawingRef.current) {
+      return;
+    }
+
+    isDrawingRef.current = false;
+    const completedPoints = [...activeStrokeRef.current];
+    activeStrokeRef.current = [];
+
+    if (completedPoints.length < 2) {
+      drawScene(activeRoom.drawing);
+      return;
+    }
+
+    const nextDrawing = [...activeRoom.drawing, { points: completedPoints }];
+    drawScene(nextDrawing);
+
+    try {
+      await roomStore.updateDrawing(nextDrawing);
+    } catch (error) {
+      console.error("Update drawing failed:", error);
+      drawScene(activeRoom.drawing);
+    }
+  }
 
   return (
     <section className="panel game-page">
       <div className="game-page__header">
         <div className="game-page__header-left">
-          <span className="section-kicker">Round 1</span>
-          <h1 className="game-page__title">Guess the Word!</h1>
+          <span className="section-kicker">{inResults ? "Round Complete" : "Round 1"}</span>
+          <h1 className="game-page__title">{inResults ? "Results" : "Guess the Word!"}</h1>
         </div>
-        <RoomCodeBadge code={room.code} />
+        <RoomCodeBadge code={activeRoom.code} />
       </div>
 
       <div className="game-page__layout">
         <aside className="game-page__sidebar game-page__sidebar--left">
-          <Scoreboard />
-          <ResultPanel />
+          <Scoreboard sortByScore={inResults} />
+          <ResultPanel showGuesses={canViewGuessHistory} />
         </aside>
 
         <div className="game-page__main">
-          <Card title="Canvas">
-            <div className="canvas-placeholder" style={{ minHeight: '500px', backgroundColor: '#ffffff', border: '1px solid #e5e7eb' }}>
-              Waiting for drawer...
-            </div>
-          </Card>
+          {inResults ? (
+            <Card title="Round Summary">
+              <p className="results-word-label">Correct Word</p>
+              <p className="results-word-value">{activeRoom.secretWord ?? "(Unavailable)"}</p>
+              <p className="canvas-caption">Final scores and complete guess history are shown on the left.</p>
+            </Card>
+          ) : (
+            <Card title={isDrawer ? `Canvas - Draw "${activeRoom.secretWord || ""}"` : "Canvas"}>
+              <div className="canvas-stage">
+                <canvas
+                  className={`game-canvas ${isDrawer ? "game-canvas--interactive" : ""}`}
+                  ref={canvasRef}
+                  width={1100}
+                  height={520}
+                  onPointerDown={handlePointerDown}
+                  onPointerMove={handlePointerMove}
+                  onPointerUp={finishStroke}
+                  onPointerLeave={finishStroke}
+                />
+              </div>
+              <p className="canvas-caption">
+                {isDrawer
+                  ? `You are drawing: ${activeRoom.secretWord ?? ""}`
+                  : `${drawerName} is drawing. Submit your guesses on the right.`}
+              </p>
+              {isDrawer ? (
+                <div className="button-row button-row--compact">
+                  <button className="button button--secondary" type="button" onClick={handleClearCanvas}>
+                    Clear Canvas
+                  </button>
+                </div>
+              ) : null}
+            </Card>
+          )}
         </div>
 
         <aside className="game-page__sidebar game-page__sidebar--right">
@@ -54,16 +243,34 @@ export function GamePage() {
                 <dt>Name</dt>
                 <dd>{viewer?.name ?? "Unknown player"}</dd>
               </div>
+              <div>
+                <dt>Role</dt>
+                <dd><strong>{isDrawer ? "Drawer" : "Guesser"}</strong></dd>
+              </div>
               <div>
                 <dt>Status</dt>
-                <dd>Playing</dd>
+                <dd>{inResults ? "Results" : "Playing"}</dd>
               </div>
             </dl>
           </Card>
 
-          <Card title="Your Guess">
-            <GuessForm />
-          </Card>
+          {inResults ? (
+            <Card title="Next Round">
+              {isHost ? (
+                <div className="button-row button-row--compact">
+                  <button className="button button--primary" type="button" onClick={handleRestartGame}>
+                    Restart Game
+                  </button>
+                </div>
+              ) : (
+                <p className="status-line">Waiting for host to restart...</p>
+              )}
+            </Card>
+          ) : (
+            <Card title="Your Guess">
+              <GuessForm />
+            </Card>
+          )}
         </aside>
       </div>
 
diff --git a/frontend/src/pages/JoinRoomPage.tsx b/frontend/src/pages/JoinRoomPage.tsx
index db4f5304..7d433810 100644
--- a/frontend/src/pages/JoinRoomPage.tsx
+++ b/frontend/src/pages/JoinRoomPage.tsx
@@ -13,9 +13,22 @@ export function JoinRoomPage() {
   async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
     event.preventDefault();
 
+    const trimmedName = playerName.trim();
+    const trimmedCode = roomCode.trim();
+
+    if (!trimmedName) {
+      setError("Player name cannot be empty");
+      return;
+    }
+
+    if (!trimmedCode) {
+      setError("Room code cannot be empty");
+      return;
+    }
+
     try {
       setError(null);
-      await roomStore.joinRoom(roomCode.toUpperCase(), playerName);
+      await roomStore.joinRoom(trimmedCode.toUpperCase(), trimmedName);
       navigate("/lobby");
     } catch (caughtError) {
       setError(caughtError instanceof Error ? caughtError.message : "Unable to join room");
diff --git a/frontend/src/pages/LobbyPage.tsx b/frontend/src/pages/LobbyPage.tsx
index 1c99bd28..18923dd4 100644
--- a/frontend/src/pages/LobbyPage.tsx
+++ b/frontend/src/pages/LobbyPage.tsx
@@ -8,14 +8,33 @@ import { useRoomState, useRoomStore } from "../state/roomStore";
 export function LobbyPage() {
   const navigate = useNavigate();
   const roomStore = useRoomStore();
-  const { room, error, isLoading } = useRoomState();
+  const { room, error, isLoading, participantId } = useRoomState();
   const [refreshError, setRefreshError] = useState<string | null>(null);
 
   useEffect(() => {
     if (!room) {
       navigate("/", { replace: true });
+      return;
     }
-  }, [navigate, room]);
+
+    if (room.status === "active") {
+      navigate("/game");
+      return;
+    }
+
+    const intervalId = setInterval(async () => {
+      try {
+        const updatedRoom = await roomStore.fetchRoom(true);
+        if (updatedRoom && updatedRoom.status === "active") {
+          navigate("/game");
+        }
+      } catch (caughtError) {
+        console.error("Polling fetchRoom failed:", caughtError);
+      }
+    }, 2000);
+
+    return () => clearInterval(intervalId);
+  }, [navigate, room, roomStore]);
 
   async function handleRefresh() {
     try {
@@ -26,10 +45,23 @@ export function LobbyPage() {
     }
   }
 
+  async function handleStartGame() {
+    try {
+      setRefreshError(null);
+      await roomStore.startGame();
+      navigate("/game");
+    } catch (caughtError) {
+      setRefreshError(caughtError instanceof Error ? caughtError.message : "Unable to start game");
+    }
+  }
+
   if (!room) {
     return null;
   }
 
+  const isHost = room.hostId === participantId;
+  const canStart = room.participants.length >= 2;
+
   return (
     <section className="panel placeholder-page">
       <div className="lobby-header">
@@ -49,7 +81,9 @@ export function LobbyPage() {
             <ul className="player-list">
               {room.participants.map((participant) => (
                 <li key={participant.id}>
-                  <span>{participant.name}</span>
+                  <span>
+                    {participant.name} {participant.id === room.hostId ? " (Host)" : ""}
+                  </span>
                   <span className="player-list__meta">joined</span>
                 </li>
               ))}
@@ -61,7 +95,13 @@ export function LobbyPage() {
           <p className="status-line" style={{ backgroundColor: isLoading ? '#fef3c7' : '#e0e7ff', color: isLoading ? '#b45309' : '#3730a3' }}>
             {isLoading ? "Refreshing players..." : "Ready to play"}
           </p>
-          <p style={{ marginTop: '8px' }}>{error ?? refreshError ?? "Waiting for the host to start the game."}</p>
+          <p style={{ marginTop: '8px' }}>
+            {error ?? refreshError ?? (
+              isHost
+                ? (canStart ? "You are the host. You can now start the game." : "Need at least 2 players to start.")
+                : "Waiting for the host to start the game."
+            )}
+          </p>
         </Card>
       </div>
 
@@ -69,9 +109,11 @@ export function LobbyPage() {
         <button className="button button--secondary" disabled={isLoading} onClick={handleRefresh}>
           {isLoading ? "Refreshing..." : "Refresh Room"}
         </button>
-        <button className="button button--primary" onClick={() => navigate("/game")}>
-          Start Game
-        </button>
+        {isHost && (
+          <button className="button button--primary" disabled={isLoading || !canStart} onClick={handleStartGame}>
+            Start Game
+          </button>
+        )}
       </div>
     </section>
   );
diff --git a/frontend/src/services/api.test.ts b/frontend/src/services/api.test.ts
index 67601f5d..8ed75d54 100644
--- a/frontend/src/services/api.test.ts
+++ b/frontend/src/services/api.test.ts
@@ -45,4 +45,76 @@ describe("api service", () => {
       expect.anything()
     );
   });
+
+  it("submitGuess sends POST to /rooms/:code/guess", async () => {
+    const mockResponse = {
+      ok: true,
+      json: () => Promise.resolve({ room: { code: "ABCD", status: "active", participants: [] } }),
+    };
+    vi.mocked(fetch).mockResolvedValue(mockResponse as unknown as Response);
+
+    await api.submitGuess("ABCD", "p1", "pizza");
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/rooms/ABCD/guess"),
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({ participantId: "p1", text: "pizza" }),
+      })
+    );
+  });
+
+  it("updateDrawing sends POST to /rooms/:code/draw", async () => {
+    const mockResponse = {
+      ok: true,
+      json: () => Promise.resolve({ room: { code: "ABCD", status: "active", participants: [] } }),
+    };
+    vi.mocked(fetch).mockResolvedValue(mockResponse as unknown as Response);
+
+    await api.updateDrawing("ABCD", "p1", [{ points: [{ x: 1, y: 2 }] }]);
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/rooms/ABCD/draw"),
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({ participantId: "p1", strokes: [{ points: [{ x: 1, y: 2 }] }] }),
+      })
+    );
+  });
+
+  it("clearDrawing sends POST to /rooms/:code/clear", async () => {
+    const mockResponse = {
+      ok: true,
+      json: () => Promise.resolve({ room: { code: "ABCD", status: "active", participants: [] } }),
+    };
+    vi.mocked(fetch).mockResolvedValue(mockResponse as unknown as Response);
+
+    await api.clearDrawing("ABCD", "p1");
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/rooms/ABCD/clear"),
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({ participantId: "p1" }),
+      })
+    );
+  });
+
+  it("restartGame sends POST to /rooms/:code/restart", async () => {
+    const mockResponse = {
+      ok: true,
+      json: () => Promise.resolve({ room: { code: "ABCD", status: "lobby", participants: [] } }),
+    };
+    vi.mocked(fetch).mockResolvedValue(mockResponse as unknown as Response);
+
+    await api.restartGame("ABCD", "p1");
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/rooms/ABCD/restart"),
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({ participantId: "p1" }),
+      })
+    );
+  });
 });
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 6899a6d8..224b1500 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -6,12 +6,36 @@ export interface Participant {
   joinedAt: string;
 }
 
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface DrawingStroke {
+  points: Point[];
+}
+
+export interface Guess {
+  participantId: string;
+  participantName: string;
+  text: string;
+  correct: boolean;
+  timestamp: string;
+}
+
 export interface RoomSnapshot {
   code: string;
-  status: "lobby";
+  status: "lobby" | "active" | "results";
   participants: Participant[];
   availableWords: string[];
   roles: ParticipantRole[];
+  hostId: string;
+  drawerId?: string;
+  secretWord?: string;
+  guesses: Guess[];
+  scores: Record<string, number>;
+  drawing: DrawingStroke[];
+  correctGuessers: string[];
 }
 
 export interface RoomSessionResponse {
@@ -19,7 +43,7 @@ export interface RoomSessionResponse {
   room: RoomSnapshot;
 }
 
-const API_BASE_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3001/bug";
+const API_BASE_URL = import.meta.env.VITE_API_URL ?? "http://localhost:3001";
 
 async function request<T>(path: string, init?: RequestInit) {
   const response = await fetch(`${API_BASE_URL}${path}`, {
@@ -54,8 +78,38 @@ export const api = {
       body: JSON.stringify({ playerName })
     });
   },
+  startGame(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/start`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
+  },
   fetchRoom(code: string, participantId?: string) {
     const query = participantId ? `?participantId=${encodeURIComponent(participantId)}` : "";
     return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}${query}`);
+  },
+  submitGuess(code: string, participantId: string, text: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/guess`, {
+      method: "POST",
+      body: JSON.stringify({ participantId, text })
+    });
+  },
+  updateDrawing(code: string, participantId: string, strokes: DrawingStroke[]) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/draw`, {
+      method: "POST",
+      body: JSON.stringify({ participantId, strokes })
+    });
+  },
+  clearDrawing(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/clear`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
+  },
+  restartGame(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/restart`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
   }
 };
diff --git a/frontend/src/state/roomStore.ts b/frontend/src/state/roomStore.ts
index aefd3739..f9c744b0 100644
--- a/frontend/src/state/roomStore.ts
+++ b/frontend/src/state/roomStore.ts
@@ -7,7 +7,7 @@ import {
   useSyncExternalStore,
   type PropsWithChildren
 } from "react";
-import { api, type RoomSessionResponse, type RoomSnapshot } from "../services/api";
+import { api, type DrawingStroke, type RoomSessionResponse, type RoomSnapshot } from "../services/api";
 
 export interface RoomState {
   room: RoomSnapshot | null;
@@ -89,12 +89,82 @@ class RoomStore {
     return response;
   }
 
-  async fetchRoom() {
+  async startGame() {
+    if (!this.state.room || !this.state.participantId) {
+      return null;
+    }
+
+    const response = await this.withLoading(() =>
+      api.startGame(this.state.room!.code, this.state.participantId!)
+    );
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+
+  async fetchRoom(silent = false) {
     if (!this.state.room) {
       return null;
     }
 
-    const response = await api.fetchRoom(this.state.room.code, this.state.participantId ?? undefined);
+    const fetchOperation = () =>
+      api.fetchRoom(this.state.room!.code, this.state.participantId ?? undefined);
+
+    const response = silent
+      ? await fetchOperation()
+      : await this.withLoading(fetchOperation);
+
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+
+  async submitGuess(text: string) {
+    if (!this.state.room || !this.state.participantId) {
+      return null;
+    }
+
+    const response = await this.withLoading(() =>
+      api.submitGuess(this.state.room!.code, this.state.participantId!, text)
+    );
+
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+
+  async updateDrawing(strokes: DrawingStroke[]) {
+    if (!this.state.room || !this.state.participantId) {
+      return null;
+    }
+
+    const response = await this.withLoading(() =>
+      api.updateDrawing(this.state.room!.code, this.state.participantId!, strokes)
+    );
+
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+
+  async clearDrawing() {
+    if (!this.state.room || !this.state.participantId) {
+      return null;
+    }
+
+    const response = await this.withLoading(() =>
+      api.clearDrawing(this.state.room!.code, this.state.participantId!)
+    );
+
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+
+  async restartGame() {
+    if (!this.state.room || !this.state.participantId) {
+      return null;
+    }
+
+    const response = await this.withLoading(() =>
+      api.restartGame(this.state.room!.code, this.state.participantId!)
+    );
+
     this.setRoomSnapshot(response.room);
     return response.room;
   }
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index c929a6dd..b73e182a 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -504,6 +504,89 @@ input {
   gap: 24px;
 }
 
+.canvas-stage {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.game-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  touch-action: none;
+  background: #ffffff;
+}
+
+.game-canvas--interactive {
+  cursor: crosshair;
+}
+
+.canvas-caption {
+  margin: 0;
+  color: var(--ink-soft);
+}
+
+.results-word-label {
+  margin: 0;
+  color: var(--ink-soft);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+}
+
+.results-word-value {
+  margin: 0;
+  color: var(--ink);
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.scoreboard-list,
+.guess-history-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 10px;
+}
+
+.scoreboard-list__item,
+.guess-history-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 14px;
+  background: var(--surface-strong);
+}
+
+.scoreboard-list__item--self {
+  border-color: #93c5fd;
+  background: #eff6ff;
+}
+
+.scoreboard-list__item strong {
+  min-width: 2ch;
+  text-align: right;
+}
+
+.guess-history-list__item--correct {
+  border-color: #86efac;
+  background: #f0fdf4;
+}
+
+.guess-history-list__item--incorrect {
+  border-color: #d1d5db;
+  background: #f9fafb;
+}
+
 @media (max-width: 1024px) {
   .game-page__layout {
     grid-template-columns: 1fr;
diff --git a/reflection.md b/reflection.md
new file mode 100644
index 00000000..7e339dac
--- /dev/null
+++ b/reflection.md
@@ -0,0 +1,59 @@
+# Reflection Report
+
+## What did the starter app already have?
+
+The starter application provided the basic foundation for the Scribble game. It included:
+
+- App shell with routing between all screens.
+- Branded Scribble landing page and starter UI.
+- Ability to create a room with a unique room code.
+- Ability to join an existing room using a valid room code.
+- Lobby displaying the room code and participant list.
+- Backend APIs for creating rooms, joining rooms, and retrieving room information.
+- In-memory room storage.
+- A manual lobby refresh mechanism.
+
+The application supported only the happy path for room creation and joining. Core gameplay functionality was not implemented.
+
+---
+
+## What did I add?
+
+I implemented all four required scenarios to transform the starter project into a functional multiplayer Scribble game.
+
+### Scenario 1 – Room Creation & Lobby
+- Validated room creation and joining.
+- Rejected invalid or empty room codes.
+- Added automatic lobby polling.
+- Restricted game start to the host.
+- Enforced a minimum player count before starting.
+
+### Scenario 2 – Game Start & Drawer Flow
+- Validated and trimmed player names.
+- Rejected empty or whitespace-only names.
+- Started the game from the lobby.
+- Assigned the first drawer.
+- Selected a secret word from the starter word list.
+- Ensured only the drawer could view the secret word.
+
+### Scenario 3 – Gameplay Interaction
+- Added drawing and canvas clearing functionality.
+- Implemented guess submission.
+- Trimmed and validated guesses.
+- Compared guesses case-insensitively.
+- Synchronized guess history.
+- Implemented scoring (100 points for correct guesses, 0 for incorrect guesses).
+
+### Scenario 4 – Result & Restart
+- Displayed the correct word at the end of the round.
+- Displayed final scores.
+- Displayed complete guess history.
+- Allowed only the host to restart the game.
+- Preserved players while returning everyone to the lobby.
+- Cleared all round-specific game state to prepare for a new game.
+
+---
+
+## Summary
+
+The starter application provided only the room creation and lobby foundation. My implementation completed the core gameplay by adding game start, drawer selection, secret word handling, gameplay interactions, scoring, results, and game restart, satisfying all four required scenarios.
\ No newline at end of file
diff --git a/specs/001-room-creation-joining/plan.md b/specs/001-room-creation-joining/plan.md
new file mode 100644
index 00000000..bdbf4708
--- /dev/null
+++ b/specs/001-room-creation-joining/plan.md
@@ -0,0 +1,152 @@
+# Technical Implementation Plan - Room Creation & Joining (Slice 1)
+
+## Overview
+This document outlines the design and plan for implementing Room Creation, Joining, Lobby Polling, and Game Initiation constraints.
+
+---
+
+## Proposed Changes
+
+### 1. Model Updates (Shared)
+We will extend the `Participant` and `Room` structures to track room hosts.
+
+#### [MODIFY] [backend/src/models/game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts)
+- Add `hostId: string` to the `Room` interface.
+- Add `hostId: string` to the `RoomSnapshot` interface.
+- Extend `RoomStatus` to support `"active"`:
+  ```typescript
+  export type RoomStatus = "lobby" | "active";
+  ```
+
+#### [MODIFY] [frontend/src/services/api.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/services/api.ts)
+- Align `RoomSnapshot` and status definitions with the backend:
+  ```typescript
+  export interface RoomSnapshot {
+    code: string;
+    status: "lobby" | "active";
+    participants: Participant[];
+    availableWords: string[];
+    roles: ParticipantRole[];
+    hostId: string; // Tracks host participant ID
+  }
+  ```
+
+---
+
+### 2. Backend Logic & Services
+
+#### [MODIFY] [backend/src/services/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts)
+- **`createRoom(playerName)`**:
+  - Parse and trim `playerName`. If empty, throw a validation error.
+  - Generate a new participant.
+  - Create the `Room` object, setting `hostId: participant.id`.
+- **`joinRoom(code, playerName)`**:
+  - Trim `playerName`. If empty, throw a validation error.
+  - Verify that the room code exists. If not, return `null` (routes will throw `404`).
+- **`startGame(code, hostParticipantId)`**:
+  - Fetch room by code. If missing, throw `404`.
+  - Validate that `hostParticipantId === room.hostId`. If not, throw a forbidden error.
+  - Validate that `room.participants.length >= 2`. If not, throw a validation error.
+  - Validate that `room.status === "lobby"`.
+  - Update `room.status = "active"` and save.
+- **`toRoomSnapshot(room, viewerParticipantId)`**:
+  - Return `hostId: room.hostId` in the snapshot.
+
+---
+
+### 3. API Routing & Zod Validation
+
+#### [MODIFY] [backend/src/api/schemas.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/schemas.ts)
+- Modify `createRoomSchema` and `joinRoomSchema` to enforce trimmed, non-empty player names:
+  ```typescript
+  export const createRoomSchema = z.object({
+    playerName: z.string().trim().min(1, "Player name cannot be empty")
+  });
+  ```
+- Define `startGameSchema` to validate host request payload:
+  ```typescript
+  export const startGameSchema = z.object({
+    participantId: z.string().min(1, "Participant ID is required")
+  });
+  ```
+
+#### [MODIFY] [backend/src/api/rooms.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/api/rooms.ts)
+- Update `POST /` and `POST /:code/join` to use the updated validation schemas.
+- Implement **`POST /rooms/:code/start`**:
+  - Parse room code from parameters and `participantId` from the request body using `startGameSchema`.
+  - Call `startGame(code, participantId)` from `roomStore`.
+  - Return the updated room snapshot.
+
+---
+
+### 4. Frontend API & Store Integrations
+
+#### [MODIFY] [frontend/src/services/api.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/services/api.ts)
+- Add `startGame(code, participantId)` endpoint helper:
+  ```typescript
+  startGame(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/start`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
+  }
+  ```
+
+#### [MODIFY] [frontend/src/state/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/state/roomStore.ts)
+- Add `startGame()` method to trigger the API request and update the stored room session snapshot:
+  ```typescript
+  async startGame() {
+    if (!this.state.room || !this.state.participantId) return;
+    const response = await this.withLoading(() =>
+      api.startGame(this.state.room!.code, this.state.participantId!)
+    );
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+  ```
+
+---
+
+### 5. Lobby Page Polling & UI Restrictions
+
+#### [MODIFY] [frontend/src/pages/LobbyPage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/LobbyPage.tsx)
+- **Polling Setup**:
+  - Implement a `useEffect` hook that sets up an interval fetching the room state (`roomStore.fetchRoom()`) every `2000ms`.
+  - Clear the interval on component unmount to prevent leaks.
+- **Auto-Navigate on Start**:
+  - Inside the polling check, if `room.status === "active"`, automatically call `navigate("/game")`.
+- **UI Authorizations**:
+  - Check if current player is the host (`participantId === room.hostId`).
+  - If the player is **the host**:
+    - Display the "Start Game" button.
+    - Enable it only when `room.participants.length >= 2`.
+    - If disabled, show a warning text: *"Need at least 2 players to start."*
+  - If the player is **not the host**:
+    - Hide or disable the "Start Game" button.
+    - Display status text: *"Waiting for host to start the game..."*
+
+---
+
+## Verification Plan
+
+### Automated Tests
+- Run `npm test` inside both backend and frontend directories to check for lint errors and ensure that existing specs run successfully.
+- Write a test suite for schema validations ensuring empty names are blocked.
+
+### Manual Verification Flow (2 Browser Tabs)
+1. **Host Setup**:
+   - Open Browser Tab A at `http://localhost:5173`.
+   - Click "Create Room" with name "HostPlayer".
+   - Land on Lobby and note the generated 4-char Room Code.
+   - Verify only the "Start Game" button is visible to you, but is disabled because only 1 player is present.
+2. **Guesser Joins**:
+   - Open Browser Tab B (Incognito/Independent session) at `http://localhost:5173`.
+   - Click "Join Room", enter the Room Code from Tab A and name "GuestPlayer".
+   - Submit and verify GuestPlayer enters the Lobby.
+   - Verify that Tab B does NOT show an enabled "Start Game" button (it shows "Waiting for host").
+3. **Synchronized Update**:
+   - Within 2 seconds, verify Tab A automatically updates the participant list showing "GuestPlayer" without manual refreshing.
+4. **Game Start**:
+   - Verify the "Start Game" button on Tab A is now enabled.
+   - Click "Start Game" in Tab A.
+   - Verify that both Tab A and Tab B automatically navigate to the `/game` route within 2 seconds.
diff --git a/specs/001-room-creation-joining/spec.md b/specs/001-room-creation-joining/spec.md
new file mode 100644
index 00000000..43f98493
--- /dev/null
+++ b/specs/001-room-creation-joining/spec.md
@@ -0,0 +1,122 @@
+# Feature Specification: Room Creation & Joining (Slice 1)
+
+## Overview
+Implement the room creation and joining flow for the multiplayer Scribble Game. This slice covers the initial setup of a game room, host designation, lobby synchronization via HTTP polling, and authorization checks for starting a game.
+
+---
+
+## User Story
+```text
+As a player,
+I want to create a new room or join an existing room using a unique room code,
+so that I can play a drawing game with my friends in an isolated game session.
+```
+
+---
+
+## Core Terminology & Data Model Updates
+- **Host**: The player who creates the room. Only the Host can start the game.
+- **Room Code**: A unique, uppercase 4-character alphanumeric string generated deterministically by the server.
+- **Lobby State**: The initial room state before game play starts, where players assemble.
+- **Active Session**: An isolated memory instance representing a single game room.
+
+### State Schema Extensions (Proposed)
+To support host-tracking and lifecycle checks:
+- **`Room` (Backend)**: Add `hostId: string` containing the `participantId` of the room creator.
+- **`RoomSnapshot` (Shared API)**: Add `hostId: string` to inform the frontend who is authorized to start.
+
+---
+
+## Functional Requirements
+
+### 1. Room Creation
+- A player MUST be able to create a new game room by submitting their player name.
+- The server MUST generate a unique room code.
+- The creator of the room MUST automatically be designated as the **Host** (`hostId` set to their participant ID).
+- The room status MUST be set to `"lobby"` initially.
+- The player names MUST be validated (trimmed, non-empty, rejection of whitespace-only).
+
+### 2. Joining a Room
+- A player MUST be able to join an existing room by submitting a valid room code and their player name.
+- The server MUST uppercase the room code parameter to ensure case-insensitive matching.
+- The frontend MUST validate that the room code and player name are not empty (or whitespace-only) before making the join API request, showing a clear error message (e.g., "Room code cannot be empty") to avoid invalid API requests.
+- Invalid room codes (malformed or not found) MUST be rejected with a `404` or `400` status and a clear JSON error message: `"Room not found."`
+- Duplicate player joins within the same session MUST be prevented or handled cleanly (e.g. by appending a suffix or rejecting duplicate names, depending on clarification).
+
+### 3. Lobby Synchronization (HTTP Polling)
+- All players in the room MUST view the lobby showing the player list.
+- The client MUST sync room state by polling the server approximately every 2 seconds (`2000ms`).
+- In-memory room isolation MUST be guaranteed. Room data operations (joining, leaving) in Room A MUST NEVER affect Room B.
+
+### 4. Game Initiation
+- Only the player matching the `hostId` MUST have authorization to start the game.
+- The game MUST NOT start unless there are at least two players (`participants.length >= 2`) present in the lobby.
+- Non-host start actions MUST be rejected with a `403 Forbidden` status.
+
+---
+
+## Acceptance Criteria
+
+### AC1 - Create Room
+- **Given** a player wants to host a game,
+- **When** they submit a valid player name (whitespace trimmed, non-empty) to create a room,
+- **Then** the server generates a unique room code,
+- **And** registers the creator as the host (`hostId` matching their participant ID),
+- **And** returns a `201 Created` status with the new room session,
+- **And** the player successfully enters the Lobby screen.
+
+### AC2 - Join Existing Room
+- **Given** an existing room code,
+- **When** a player enters the code and a valid player name,
+- **Then** they successfully join the room,
+- **And** they are registered as a participant,
+- **And** they appear in the lobby player list for all connected clients.
+
+### AC3 - Invalid Room Code
+- **Given** an invalid, empty, or non-existent room code,
+- **When** a player attempts to join,
+- **Then** the system rejects the request,
+- **And** returns a structured error message (e.g., `404 Not Found` or `400 Bad Request`),
+- **And** the frontend displays a clear, user-friendly error message to the player.
+
+### AC4 - Room Isolation
+- **Given** multiple active game rooms (e.g., Room `ABCD` and Room `WXYZ`),
+- **When** players join or leave Room `ABCD`,
+- **Then** the player list and status of Room `WXYZ` remain completely unchanged and unaffected.
+
+### AC5 - Lobby Refresh
+- **Given** multiple players in a lobby,
+- **When** a new player joins or an existing player disconnects/leaves,
+- **Then** the lobby player list updates automatically across all clients within approximately 2 seconds without requiring manual refresh.
+
+### AC6 - Start Game
+- **Given** at least two players are present in the lobby,
+- **When** the host clicks "Start Game",
+- **Then** the backend changes the room status to `"active"` (or `"game"`),
+- **And** the game starts successfully for all participants.
+
+### AC7 - Prevent Invalid Start
+- **Given** only one player (the host) is present in the lobby,
+- **When** the host attempts to start the game,
+- **Then** the action is rejected on both frontend and backend, showing an appropriate warning message.
+
+### AC8 - Host Authorization
+- **Given** a player who is not the host (participant ID does not match `hostId`),
+- **When** they attempt to trigger the start game action (either via UI manipulation or direct API call),
+- **Then** the action is denied on the backend (returning a `403 Forbidden` error) and the UI restricts the action.
+
+---
+
+## Edge Cases & Handling Strategy
+
+| Edge Case | Handling Strategy |
+|-----------|-------------------|
+| **Empty or whitespace player name** | Reject on client and server with a `400 Bad Request` validation error: `"Player name cannot be empty."` |
+| **Malformed/missing room code** | Reject on backend using `Zod` query/param validation; respond with `400 Bad Request` or `404 Not Found`. |
+| **Non-existent room code** | Reject on backend with `404 Not Found` and a message: `"Room not found."` |
+| **Duplicate names in same room** | Append a differentiator (e.g., `"Alice (2)"`) or reject with `400 Bad Request` to ensure unique identity in UI. |
+| **Simultaneous player joins** | Since the backend uses an in-memory `Map` and push array synchronously on a single Node thread, simultaneous requests will resolve sequentially without concurrency conflicts. |
+| **Transient polling network error**| The client MUST handle failed polling requests gracefully: keep trying after the next interval, and display a subtle "Reconnecting..." status indicator if consecutive errors occur. |
+| **Lobby page refresh** | The client state SHOULD recover by storing the `participantId` and `roomCode` in browser storage (e.g. `sessionStorage`) so refreshing the page doesn't throw the player out of the room. |
+| **Host disconnects/leaves** | If the host leaves or disconnects: either migrate the host role to the next oldest active participant in the list, or terminate the lobby. *Proposed implementation: Migrate host to the next participant in the list to keep game playable.* |
+| **Double start triggers** | If a host triggers start game multiple times rapidly, the backend MUST check the room status and ignore subsequent start requests if the game is already in progress. |
diff --git a/specs/001-room-creation-joining/tasks.md b/specs/001-room-creation-joining/tasks.md
new file mode 100644
index 00000000..39c92769
--- /dev/null
+++ b/specs/001-room-creation-joining/tasks.md
@@ -0,0 +1,74 @@
+# Implementation Tasks - Room Creation & Joining (Slice 1)
+
+This task list tracks the step-by-step implementation and verification steps for Slice 1.
+
+---
+
+## Task Checklist
+
+### Phase 1: Shared Models & Backend
+- [ ] **Task 1.1: Extend Data Models**
+  - Update `Participant` and `Room` structures in `backend/src/models/game.ts` to include `hostId: string`.
+  - Add `"active"` to `RoomStatus` type.
+- [ ] **Task 1.2: Update Validation Schemas**
+  - Modify `createRoomSchema` and `joinRoomSchema` in `backend/src/api/schemas.ts` to trim player names and reject empty strings.
+  - Add `startGameSchema` in `backend/src/api/schemas.ts` validating the requesting player's `participantId`.
+- [ ] **Task 1.3: Update Room Store Logic**
+  - Update `createRoom()` in `backend/src/services/roomStore.ts` to record `hostId` matching the creator's ID.
+  - Implement validation inside `joinRoom()` and `createRoom()` to verify name trimming.
+  - Ensure `joinRoom()` throws or returns a descriptive error (e.g. "Room not found") when the room does not exist.
+  - Implement `startGame(code, hostParticipantId)` to validate room status, minimum players (>=2), host authorization, and transition status to `"active"`.
+- [ ] **Task 1.4: Implement Start Route**
+  - Create route handler `POST /rooms/:code/start` in `backend/src/api/rooms.ts`.
+  - Wire it to `startGame()` service method and handle exceptions.
+
+---
+
+### Phase 2: Frontend API & Store
+- [ ] **Task 2.1: Align Frontend Models & API Client**
+  - Add `hostId` to `RoomSnapshot` interface in `frontend/src/services/api.ts`.
+  - Add `startGame(code, participantId)` fetch request helper in `frontend/src/services/api.ts`.
+- [ ] **Task 2.2: Implement Store Actions**
+  - Add `startGame()` method in `frontend/src/state/roomStore.ts` store class.
+  - Bind it to set state and handle loading indicators.
+- [ ] **Task 2.3: Frontend Validation on Join**
+  - Update `frontend/src/pages/JoinRoomPage.tsx` to validate that the room code is not empty or whitespace-only before submitting the form. If empty, show a local validation error: `"Room code cannot be empty"`.
+
+---
+
+### Phase 3: Frontend Lobby UI & Polling
+- [ ] **Task 3.1: Lobby Polling Mechanism**
+  - Update `frontend/src/pages/LobbyPage.tsx` with a `useEffect` setting up `setInterval` to call `roomStore.fetchRoom()` every 2000ms.
+  - Ensure the interval is cleared on component unmount.
+- [ ] **Task 3.2: Host Navigation Trigger**
+  - Detect when fetched `room.status === "active"` and automatically redirect all participants to `/game` using `navigate`.
+- [ ] **Task 3.3: Host UI Rules**
+  - Hide or disable the "Start Game" action for guest players, replacing it with a message: *"Waiting for host to start the game..."*
+  - Disable the "Start Game" button for hosts when `participants.length < 2`, displaying: *"Need at least 2 players to start."*
+
+---
+
+### Phase 4: Verification & Cleanup
+- [ ] **Task 4.1: Manual Multi-tab Verification**
+  - Verify room creation, lobby updates within 2 seconds, guest start button omission, and dual-client auto-navigation to `/game`.
+- [ ] **Task 4.2: Build & Lint Validation**
+  - Run `npm run build` in both frontend and backend directories.
+  - Run `npm test` to verify Vitest tests execute successfully.
+
+---
+
+## Dependencies & Path
+```mermaid
+graph TD
+  T1.1[Task 1.1: Models] --> T1.3[Task 1.3: Store Logic]
+  T1.2[Task 1.2: Schemas] --> T1.4[Task 1.4: Start Route]
+  T1.3[Task 1.3: Store Logic] --> T1.4[Task 1.4: Start Route]
+  T1.4[Task 1.4: Start Route] --> T2.1[Task 2.1: API Client]
+  T2.1[Task 2.1: API Client] --> T2.2[Task 2.2: Store Action]
+  T2.2[Task 2.2: Store Action] --> T3.1[Task 3.1: Lobby Polling]
+  T3.1[Task 3.1: Lobby Polling] --> T3.2[Task 3.2: Host Redirect]
+  T3.1[Task 3.1: Lobby Polling] --> T3.3[Task 3.3: UI Constraints]
+  T3.2[Task 3.2: Host Redirect] --> T4.1[Task 4.1: Verification]
+  T3.3[Task 3.3: UI Constraints] --> T4.1[Task 4.1: Verification]
+  T4.1[Task 4.1: Verification] --> T4.2[Task 4.2: Build Check]
+```
diff --git a/specs/002-game-start-drawer/plan.md b/specs/002-game-start-drawer/plan.md
new file mode 100644
index 00000000..2ef75107
--- /dev/null
+++ b/specs/002-game-start-drawer/plan.md
@@ -0,0 +1,88 @@
+# Technical Implementation Plan - Game Start & Drawer Flow (Slice 2)
+
+## Overview
+This document describes the technical plan for Slice 2: managing player name trimming and validation on room creation/join, assigning the drawer on game start, choosing the secret word deterministically, and securing word visibility based on roles.
+
+---
+
+## Proposed Changes
+
+### 1. Model Updates (Shared)
+
+#### [MODIFY] [backend/src/models/game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts)
+- Add optional fields to `Room` and `RoomSnapshot` interfaces:
+  - `drawerId?: string` (tracks the participant ID of the drawer).
+  - `secretWord?: string` (holds the secret word).
+
+#### [MODIFY] [frontend/src/services/api.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/services/api.ts)
+- Align the `RoomSnapshot` interface:
+  ```typescript
+  export interface RoomSnapshot {
+    code: string;
+    status: "lobby" | "active";
+    participants: Participant[];
+    availableWords: string[];
+    roles: ParticipantRole[];
+    hostId: string;
+    drawerId?: string;
+    secretWord?: string; // Present only if this player is the drawer
+  }
+  ```
+
+---
+
+### 2. Backend Logic & Services
+
+#### [MODIFY] [backend/src/services/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts)
+- **`createRoom(playerName)` & `joinRoom(code, playerName)`**:
+  - Double check that `playerName.trim()` is performed before storing participant names (this guarantees they are clean in memory).
+- **Deterministic Word Selection**:
+  - Implement a helper function to select a word deterministically from `STARTER_WORDS` using the room code (e.g. summing ASCII char codes modulo the array length):
+    ```typescript
+    export function getDeterministicWord(code: string): string {
+      const sum = code.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+      return STARTER_WORDS[sum % STARTER_WORDS.length];
+    }
+    ```
+- **`startGame(code, hostParticipantId)`**:
+  - Assign the drawer: `room.drawerId = room.participants[0].id` (first player in the list).
+  - Select the word: `room.secretWord = getDeterministicWord(code)`.
+- **`toRoomSnapshot(room, viewerParticipantId)`**:
+  - Include `drawerId: room.drawerId`.
+  - Populate `secretWord: room.secretWord` if and only if `viewerParticipantId === room.drawerId`. Otherwise, omit it from the returned snapshot.
+
+---
+
+### 3. Frontend Pages & Store
+
+#### [MODIFY] [frontend/src/pages/GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx)
+- Identify current user role:
+  - `const isDrawer = room.drawerId === participantId;`
+- Retrieve the drawer's name:
+  - `const drawerName = room.participants.find(p => p.id === room.drawerId)?.name || "Someone";`
+- Update UI headers and details:
+  - Show role status under Player Info: `"Drawer"` vs `"Guesser"`.
+  - Add a banner or notice displaying the secret word if `isDrawer` is true (e.g. *"Your secret word: **ROCKET**"*).
+  - If the player is a guesser, display *"**[drawerName]** is drawing. Guess the word!"*
+
+---
+
+## Verification Plan
+
+### Automated Tests
+- Run `npm test` inside the backend directory to check validations and schema constraints.
+- Write tests in `backend/src/services/roomStore.test.ts` to verify:
+  - Trimmed names are saved.
+  - Non-drawers do not receive `secretWord` in the snapshot.
+  - The drawer does receive the `secretWord`.
+  - Deterministic word selection behaves as expected for a given room code.
+
+### Manual Verification Flow (2 Browser Tabs)
+1. **Lobby Start**:
+   - Host Tab A (`Alice`) and Guest Tab B (`Bob`) assemble in the lobby.
+2. **Start Game**:
+   - Host clicks "Start Game".
+   - Both tabs are redirected to `/game`.
+3. **Role Check**:
+   - Tab A shows: role is `Drawer`, secret word is visible (e.g. `guitar`).
+   - Tab B shows: role is `Guesser`, secret word is NOT visible (hidden/undefined in snapshot). Shows status message: *"Alice is drawing. Guess the word!"*.
diff --git a/specs/002-game-start-drawer/spec.md b/specs/002-game-start-drawer/spec.md
new file mode 100644
index 00000000..fa35b3d1
--- /dev/null
+++ b/specs/002-game-start-drawer/spec.md
@@ -0,0 +1,103 @@
+# Feature Specification: Game Start & Drawer Flow (Slice 2)
+
+## Overview
+This specification covers starting the game, assigning a drawer, selecting a secret word, and controlling word visibility.
+
+---
+
+## User Story
+```text
+As a player,
+I want the game to start correctly,
+so that one player becomes the drawer and only they can see the secret word.
+```
+
+---
+
+## Core Terminology & Data Model Updates
+- **Drawer**: The participant chosen to draw in the current round.
+- **Guesser**: Any participant who is not the drawer.
+- **Secret Word**: A word selected from the starter list that the drawer must draw and guessers must guess.
+- **Room Status**: Transitions from `"lobby"` to `"active"` when the game starts.
+
+### State Schema Extensions
+- **`Room` (Backend)**:
+  - Add `drawerId: string | null` (stores participant ID of the drawer).
+  - Add `secretWord: string | null` (stores the secret word for the round).
+- **`RoomSnapshot` (Shared API)**:
+  - Add `drawerId: string | null`.
+  - Add `secretWord: string | null` (only populated if the requesting viewer is the drawer).
+
+---
+
+## Functional Requirements
+
+### 1. Name Validation & Trimming
+- Player names MUST be trimmed of leading and trailing whitespace before validation.
+- Empty or whitespace-only names MUST be rejected with a `400 Bad Request` and message: `"Player name cannot be empty"`.
+
+### 2. Game Start Restrictions
+- Only the host (creator of the room) can start the game.
+- The game can only start if there are at least 2 players present.
+
+### 3. Drawer Assignment
+- When the game starts, the drawer MUST be assigned.
+- The default drawer for the first round is the first player in the room's participant list (which is the room host).
+- All players in the room must be able to identify who the current drawer is.
+
+### 4. Deterministic Word Selection
+- The secret word MUST be selected deterministically from the starter word list: `["rocket", "pizza", "castle", "guitar", "sunflower"]`.
+- To make it deterministic for testing and gameplay, selection will be based on the room code (e.g. index = sum of ASCII values of room code characters modulo list length).
+
+### 5. Secret Word Visibility
+- The backend MUST only return the `secretWord` in the `RoomSnapshot` if the requester's `participantId` matches the room's `drawerId`.
+- Non-drawers (guessers) must not see the secret word in the snapshot (it must be omitted or `undefined`).
+
+---
+
+## Acceptance Criteria
+
+### AC1 - Join Trim Validation
+- **Given** a player enters a name with leading/trailing spaces,
+- **When** they submit to create or join a room,
+- **Then** the name is trimmed before being saved.
+
+### AC2 - Reject Empty Name
+- **Given** a player enters an empty or whitespace-only name,
+- **When** they attempt to create/join a room,
+- **Then** the system rejects the request with status `400` and error message `"Player name cannot be empty"`.
+
+### AC3 - Host-only Start & Min Players
+- **Given** a room in lobby state,
+- **When** a player attempts to start the game,
+- **Then** it succeeds only if the player is the host AND there are >= 2 players.
+
+### AC4 - Drawer Assignment
+- **Given** the host starts the game,
+- **When** the transition to `"active"` occurs,
+- **Then** the first player in the participant list is assigned as the drawer (`drawerId === participants[0].id`).
+- **And** all participants receive a snapshot indicating who the drawer is.
+
+### AC5 - Deterministic Word Selection
+- **Given** a room starts,
+- **When** the secret word is chosen,
+- **Then** the word is selected deterministically based on the room code, ensuring repeatable test behavior.
+
+### AC6 - Secret Word Omission (Guesser Privacy)
+- **Given** the game has started,
+- **When** the drawer fetches the room state,
+- **Then** they see the `secretWord`.
+- **When** a guesser fetches the room state,
+- **Then** they do not see the `secretWord`.
+
+---
+
+## Edge Cases & Handling Strategy
+
+| Edge Case | Handling Strategy |
+|-----------|-------------------|
+| **Empty/whitespace player name** | Rejected with `400` and message `"Player name cannot be empty"`. |
+| **Duplicate player names** | Allowed but each gets a unique `participantId` to ensure unique tracking. |
+| **Non-host starts game** | Rejected with `403 Forbidden`. |
+| **Secret word list is empty** | Return a fallback default word (e.g., `"rocket"`) or raise an error. |
+| **Drawer disconnects/leaves** | Out of scope for this slice, but typically would trigger drawer rotation or end of round. |
diff --git a/specs/002-game-start-drawer/tasks.md b/specs/002-game-start-drawer/tasks.md
new file mode 100644
index 00000000..dbfd54a2
--- /dev/null
+++ b/specs/002-game-start-drawer/tasks.md
@@ -0,0 +1,51 @@
+# Implementation Tasks - Game Start & Drawer Flow (Slice 2)
+
+This task list tracks the step-by-step implementation and verification steps for Slice 2.
+
+---
+
+## Task Checklist
+
+### Phase 1: Shared Models & Backend Updates
+- [x] **Task 1.1: Extend Room & Snapshot Interfaces**
+  - Update `Room` and `RoomSnapshot` interfaces in `backend/src/models/game.ts` to include optional fields: `drawerId?: string` and `secretWord?: string`.
+  - Align `RoomSnapshot` in `frontend/src/services/api.ts` to include `drawerId?: string` and `secretWord?: string`.
+- [x] **Task 1.2: Enforce Backend Name Trimming**
+  - Verify and ensure both `createRoom()` and `joinRoom()` in `backend/src/services/roomStore.ts` trim player names before saving them in the participant lists.
+
+---
+
+### Phase 2: Game Start Logic & Privacy Guards
+- [x] **Task 2.1: Implement Deterministic Word Selection**
+  - Add helper function `getDeterministicWord(code: string)` in `backend/src/services/roomStore.ts` using the room code (ASCII summation modulo length) to pick a word from `STARTER_WORDS`.
+- [x] **Task 2.2: Assign Drawer & Word on Game Start**
+  - Update `startGame(code, hostParticipantId)` in `backend/src/services/roomStore.ts` to:
+    - Set `room.drawerId` to the participant ID of the first player (`participants[0].id`).
+    - Set `room.secretWord` to the deterministically selected word.
+- [x] **Task 2.3: Implement Privacy Guard in Snapshot**
+  - Update `toRoomSnapshot(room, viewerParticipantId)` in `backend/src/services/roomStore.ts` to include `secretWord` if and only if `viewerParticipantId === room.drawerId`.
+
+---
+
+### Phase 3: Frontend Layout & UI Integration
+- [x] **Task 3.1: Add Role and Word Info on Game Screen**
+  - Modify `frontend/src/pages/GamePage.tsx` to:
+    - Determine if current player is the drawer: `const isDrawer = room.drawerId === participantId`.
+    - Display player's role (`Drawer` or `Guesser`) under Player Info card.
+    - If drawer, show the secret word clearly in the canvas or header area.
+    - If guesser, hide the secret word and show a status message indicating who is drawing (e.g. `"Alice is drawing. Guess the word!"`).
+
+---
+
+### Phase 4: Verification & Automated Tests
+- [x] **Task 4.1: Write Backend Unit Tests**
+  - Create/add test cases in `backend/src/services/roomStore.test.ts` to verify:
+    - Player name trimming on create and join.
+    - `startGame` sets status to `"active"`, drawer to first player, and a secret word.
+    - `toRoomSnapshot` includes secret word for the drawer, and omits it for other participants.
+- [x] **Task 4.2: Manual E2E Validation**
+  - Run the frontend and backend.
+  - Launch 2 browser tabs. Connect both to a room.
+  - Start the game from the host tab and verify the drawer tab sees the secret word, while the guesser tab does not.
+- [x] **Task 4.3: Final Build Check**
+  - Run `npm run build` in both frontend and backend directories.
diff --git a/specs/002-game-start-drawer/walkthrough.md b/specs/002-game-start-drawer/walkthrough.md
new file mode 100644
index 00000000..ca09da55
--- /dev/null
+++ b/specs/002-game-start-drawer/walkthrough.md
@@ -0,0 +1,37 @@
+# Implementation Walkthrough - Game Start & Drawer Flow (Slice 2)
+
+This walkthrough documents the technical details of the changes implemented for Slice 2, how they conform to the specification, and how to verify them.
+
+---
+
+## Changes Implemented
+
+### 1. Model Extensions
+- **[models/game.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/models/game.ts)**:
+  - Extended `Room` and `RoomSnapshot` to support `drawerId?: string` and `secretWord?: string`.
+- **[services/api.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/services/api.ts)**:
+  - Aligned frontend type definition `RoomSnapshot` to match.
+
+### 2. Backend Logic (RoomStore Service)
+- **[services/roomStore.ts](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/backend/src/services/roomStore.ts)**:
+  - Ensured player names are trimmed in both `createRoom()` and `joinRoom()`.
+  - Added deterministic word selection `getDeterministicWord(code)` based on the room code (ASCII summation modulo word length).
+  - Updated `startGame()` to:
+    - Set the `drawerId` to the first participant's ID.
+    - Set `secretWord` to the selected word.
+  - Implemented a privacy guard in `toRoomSnapshot()` so that only the drawer can view the `secretWord` in the snapshot returned to the client.
+
+### 3. Frontend Integration
+- **[pages/GamePage.tsx](file:///Users/shivangijain/Projects/AI/SDD/scribble-assignment/frontend/src/pages/GamePage.tsx)**:
+  - Added role detection (`const isDrawer = room.drawerId === participantId`).
+  - Added a 2-second background polling loop using `setInterval` to periodically refresh the game room snapshot.
+  - Custom-tailored the Canvas card depending on role:
+    - **Drawer**: Shows their secret word clearly (e.g. `guitar`) and prompts them to draw.
+    - **Guesser**: Displays the name of the current drawer (e.g. `"Alice is drawing..."`) and keeps the secret word hidden.
+  - Updated Player Info Card to display the player's role (Drawer/Guesser).
+
+---
+
+## Automated Verification Results
+- Ran all unit tests in the backend package.
+- 6 unit test scenarios pass successfully in `roomStore.test.ts` (verifying trimming, deterministic selection, drawer assignment, and snapshot privacy guards).
diff --git a/specs/003-gameplay-interaction/plan.md b/specs/003-gameplay-interaction/plan.md
new file mode 100644
index 00000000..84b25d79
--- /dev/null
+++ b/specs/003-gameplay-interaction/plan.md
@@ -0,0 +1,198 @@
+# Technical Implementation Plan - Gameplay Interaction (Slice 3)
+
+## Overview
+This document describes the technical plan for Slice 3: interactive canvas drawing, guess submission, synchronized guess history, and deterministic scoring.
+
+---
+
+## Proposed Changes
+
+### 1. Model Updates (Shared)
+
+#### [MODIFY] `backend/src/models/game.ts`
+- Add new types:
+  ```typescript
+  export interface Point { x: number; y: number; }
+  export interface DrawingStroke { points: Point[]; }
+  export interface Guess {
+    participantId: string;
+    participantName: string;
+    text: string;
+    correct: boolean;
+    timestamp: string;
+  }
+  ```
+- Add to `Room`:
+  - `guesses: Guess[]`
+  - `scores: Record<string, number>`
+  - `drawing: DrawingStroke[]`
+  - `correctGuessers: string[]`
+- Add to `RoomSnapshot`:
+  - `guesses: Guess[]`
+  - `scores: Record<string, number>`
+  - `drawing: DrawingStroke[]`
+
+#### [MODIFY] `frontend/src/services/api.ts`
+- Align `RoomSnapshot` with backend additions.
+- Add types: `Point`, `DrawingStroke`, `Guess`.
+
+---
+
+### 2. Validation Schemas
+
+#### [MODIFY] `backend/src/api/schemas.ts`
+- Add `submitGuessSchema`:
+  ```typescript
+  export const submitGuessSchema = z.object({
+    participantId: z.string().min(1),
+    text: z.string().trim().min(1, "Guess cannot be empty")
+  });
+  ```
+- Add `drawingUpdateSchema`:
+  ```typescript
+  export const drawingUpdateSchema = z.object({
+    participantId: z.string().min(1),
+    strokes: z.array(z.object({
+      points: z.array(z.object({ x: z.number(), y: z.number() }))
+    }))
+  });
+  ```
+
+---
+
+### 3. Backend Logic & Services
+
+#### [MODIFY] `backend/src/services/roomStore.ts`
+- **`createRoom(playerName)`**: Initialize `guesses: []`, `scores: {}`, `drawing: []`, `correctGuessers: []`.
+- **`submitGuess(code, participantId, text)`**:
+  - Validate room exists (404 if not).
+  - Validate game is active (400 if not).
+  - Validate participant is not the drawer (403 if they are).
+  - Trim text. If empty reject (400).
+  - Compare `text.toLowerCase() === room.secretWord.toLowerCase()`.
+  - Create `Guess` entry with `correct` boolean and `timestamp`.
+  - If correct and participant not already in `correctGuessers`, add 100 to their score and push to `correctGuessers`.
+  - Append guess to `guesses` array.
+  - Save and return updated room.
+- **`updateDrawing(code, participantId, strokes)`**:
+  - Validate room exists and game is active.
+  - Validate participant is the drawer (403 if not).
+  - Replace `room.drawing` with provided strokes.
+  - Save and return updated room.
+- **`clearDrawing(code, participantId)`**:
+  - Validate room exists and game is active.
+  - Validate participant is the drawer (403 if not).
+  - Set `room.drawing = []`.
+  - Save and return updated room.
+- **`toRoomSnapshot(room, viewerParticipantId)`**: Include `guesses`, `scores`, `drawing` in snapshot.
+
+#### [MODIFY] `backend/src/api/rooms.ts`
+- Add route `POST /rooms/:code/guess`:
+  - Parse code from params, body with `submitGuessSchema`.
+  - Call `submitGuess(code, participantId, text)`.
+  - Return updated room snapshot.
+- Add route `POST /rooms/:code/draw`:
+  - Parse code from params, body with `drawingUpdateSchema`.
+  - Call `updateDrawing(code, participantId, strokes)`.
+  - Return updated room snapshot.
+- Add route `POST /rooms/:code/clear`:
+  - Parse code from params, body with `{ participantId }`.
+  - Call `clearDrawing(code, participantId)`.
+  - Return updated room snapshot.
+
+---
+
+### 4. Frontend API & Store Integrations
+
+#### [MODIFY] `frontend/src/services/api.ts`
+- Add `submitGuess(code, participantId, text)`:
+  ```typescript
+  submitGuess(code: string, participantId: string, text: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/guess`, {
+      method: "POST",
+      body: JSON.stringify({ participantId, text })
+    });
+  }
+  ```
+- Add `updateDrawing(code, participantId, strokes)`:
+  ```typescript
+  updateDrawing(code: string, participantId: string, strokes: DrawingStroke[]) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/draw`, {
+      method: "POST",
+      body: JSON.stringify({ participantId, strokes })
+    });
+  }
+  ```
+- Add `clearDrawing(code, participantId)`:
+  ```typescript
+  clearDrawing(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/clear`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
+  }
+  ```
+
+#### [MODIFY] `frontend/src/state/roomStore.ts`
+- Add `submitGuess(text: string)` method that calls API and updates snapshot.
+- Add `updateDrawing(strokes: DrawingStroke[])` method that calls API and updates snapshot.
+- Add `clearDrawing()` method that calls API and updates snapshot.
+
+---
+
+### 5. Frontend UI Components
+
+#### [MODIFY] `frontend/src/pages/GamePage.tsx`
+- **Drawing Canvas**:
+  - When `isDrawer`, render an interactive `<canvas>` element.
+  - Track mouse events (mousedown, mousemove, mouseup) to build strokes.
+  - Debounce or batch stroke submission to avoid excessive API calls (submit on mouseup).
+  - Provide a "Clear Canvas" button that calls `clearDrawing()`.
+  - Render the canvas drawing on a 2D context.
+- **Viewing Canvas**:
+  - When `!isDrawer`, render a read-only canvas that renders strokes from `room.drawing`.
+  - Poll for drawing updates via the existing 2s polling loop.
+
+#### [MODIFY] `frontend/src/components/GuessForm.tsx`
+- Accept `roomStore` and `room` as props (or use store directly).
+- On submit: call `roomStore.submitGuess(guessText)`.
+- Clear the input on successful submission.
+- Disable the input when `isDrawer === true`.
+- Disable the input when `guessCorrect === true` (already guessed correctly).
+
+#### [MODIFY] `frontend/src/components/Scoreboard.tsx`
+- Accept `participants` and `scores` as props (or read from room snapshot).
+- Render a list of participants with their scores from `room.scores`.
+- Show "0" for participants not yet in the scores map.
+
+#### [MODIFY] `frontend/src/components/ResultPanel.tsx`
+- Rename or repurpose to show guess history / activity.
+- Accept `guesses` as prop.
+- Render each guess as a list item showing: participant name, guess text, correct/incorrect indicator.
+- Style correct guesses green, incorrect grey.
+
+---
+
+## Verification Plan
+
+### Automated Tests
+- Run `npm test` in both backend and frontend.
+- Write tests in `backend/src/services/roomStore.test.ts` for:
+  - Guess submission: empty rejection, case-insensitive match, drawer rejection.
+  - Scoring: correct guess awards 100, duplicate awards 0.
+  - Drawing: drawer can update/clear, non-drawer rejected.
+  - Snapshot includes scores, guesses, drawing.
+
+### Manual Verification Flow (2 Browser Tabs)
+1. **Setup**: Host Tab A and Guest Tab B in lobby. Host starts game.
+2. **Drawing**:
+   - Tab A (drawer) can draw on canvas and see strokes appear.
+   - Tab B (guesser) sees the same strokes within ~2 seconds.
+   - Drawer clicks "Clear Canvas" → both tabs show blank canvas.
+3. **Guessing**:
+   - Tab B types a guess and submits → guess appears in history.
+   - Tab B submits the correct word in different case → marked correct, gets 100 points.
+   - Tab B submits the same correct word again → recorded but no extra points.
+   - Tab A (drawer) cannot submit guesses.
+4. **Scoreboard**:
+   - Both tabs show updated scores after correct guesses.
diff --git a/specs/003-gameplay-interaction/spec.md b/specs/003-gameplay-interaction/spec.md
new file mode 100644
index 00000000..2f9a1f3e
--- /dev/null
+++ b/specs/003-gameplay-interaction/spec.md
@@ -0,0 +1,159 @@
+# Feature Specification: Gameplay Interaction (Slice 3)
+
+## Overview
+This specification covers interactive drawing on the canvas, guess submission with validation, synchronized guess history, and deterministic scoring during an active round.
+
+---
+
+## User Story
+```text
+As a player,
+I want to draw on the canvas (if I'm the drawer) or submit guesses (if I'm a guesser),
+so that gameplay is interactive and scores are updated correctly.
+```
+
+---
+
+## Core Terminology & Data Model Updates
+- **Drawing Paths**: An ordered array of strokes. Each stroke is an array of points (x, y coordinates).
+- **Guess**: A guess entry containing the guesser's participant ID, their guess text, whether it was correct, and a timestamp.
+- **Score**: A non-negative integer per participant, starting at 0.
+- **Round State**: The collection of drawing paths, guesses, and scores that make up the current active round.
+
+### State Schema Extensions
+
+#### `Guess` (New type)
+```typescript
+interface Guess {
+  participantId: string;
+  participantName: string;
+  text: string;
+  correct: boolean;
+  timestamp: string;
+}
+```
+
+#### `Point` (New type)
+```typescript
+interface Point {
+  x: number;
+  y: number;
+}
+```
+
+#### `DrawingStroke` (New type)
+```typescript
+interface DrawingStroke {
+  points: Point[];
+}
+```
+
+#### `Room` (Backend) — Additions
+- `guesses: Guess[]`
+- `scores: Record<string, number>` (participantId → score)
+- `drawing: DrawingStroke[]`
+
+#### `RoomSnapshot` (Shared API) — Additions
+- `guesses: Guess[]`
+- `scores: Record<string, number>`
+- `drawing: DrawingStroke[]`
+- `correctGuessers: string[]` (participant IDs of those who guessed correctly, for preventing duplicate scoring)
+
+---
+
+## Functional Requirements
+
+### 1. Canvas Drawing
+- Only the drawer can submit drawing strokes.
+- The drawer draws by moving their mouse/finger on the canvas.
+- Each mouse-down → mouse-move → mouse-up sequence forms a single stroke.
+- Strokes are sent to the backend and visible to all players via polling.
+- Non-drawers receive the drawing data but cannot interact with the canvas.
+
+### 2. Clear Canvas
+- Only the drawer can clear the canvas.
+- Clearing replaces the drawing with an empty array.
+- All players see the cleared canvas on the next poll.
+
+### 3. Guess Submission
+- Only non-drawer participants (guessers) can submit guesses.
+- Guesses must be trimmed (leading/trailing whitespace removed) before validation.
+- Empty or whitespace-only guesses must be rejected with a 400 error and message: `"Guess cannot be empty"`.
+- Guess comparison against the secret word must be case-insensitive (e.g. `"PIZZA"` matches `"pizza"`).
+- Correct guesses score exactly 100 points.
+- Incorrect guesses score 0 points.
+- Duplicate correct guesses by the same player are accepted but do not award additional points.
+- The drawer attempting to guess must be rejected with a 403 error: `"Drawer cannot submit guesses"`.
+
+### 4. Guess History Synchronization
+- All guesses (correct and incorrect) are appended to a shared `guesses` array on the server.
+- The full guess history is included in every `RoomSnapshot` response.
+- Clients poll the room state every ~2 seconds and update the guess history display.
+
+### 5. Scoring
+- All players start with `score = 0`.
+- Only the first correct guess by each player awards 100 points.
+- Subsequent correct guesses by the same player are recorded as guesses but award 0 points.
+- Scores are included in every `RoomSnapshot`.
+
+---
+
+## Acceptance Criteria
+
+### AC1 - Canvas Drawing
+- **Given** a game is active with a designated drawer,
+- **When** the drawer draws on the canvas,
+- **Then** the strokes are persisted on the backend,
+- **And** visible to all players when they poll for the room snapshot.
+
+### AC2 - Clear Canvas
+- **Given** an active game with drawing on the canvas,
+- **When** the drawer clicks "Clear Canvas",
+- **Then** the drawing is replaced with an empty array,
+- **And** all players see a blank canvas on the next poll.
+
+### AC3 - Reject Empty Guess
+- **Given** a guesser submits an empty or whitespace-only guess,
+- **When** the guess request reaches the backend,
+- **Then** the server rejects with status `400` and message `"Guess cannot be empty"`.
+
+### AC4 - Case-Insensitive Correct Guess
+- **Given** the secret word is `"pizza"`,
+- **When** a guesser submits `"PIZZA"`, `"Pizza"`, or `"pizza"`,
+- **Then** the guess is marked as correct and the guesser scores 100 points.
+
+### AC5 - Guess History Synchronization
+- **Given** multiple guessers submit guesses,
+- **When** any player polls the room state,
+- **Then** they see the full ordered list of all guesses with correctness status.
+
+### AC6 - Drawer Cannot Guess
+- **Given** a user whose `participantId` matches `drawerId`,
+- **When** they attempt to submit a guess,
+- **Then** the server rejects with status `403` and message `"Drawer cannot submit guesses"`.
+
+### AC7 - Scores Start at Zero
+- **Given** a game has started,
+- **When** a player fetches the room snapshot,
+- **Then** all participants have a score of 0 in the scoreboard.
+
+### AC8 - Duplicate Correct Guess Does Not Double Score
+- **Given** a guesser has already guessed the secret word correctly,
+- **When** they submit another correct guess,
+- **Then** the guess is recorded but no additional points are awarded (score stays at previous value).
+
+---
+
+## Edge Cases & Handling Strategy
+
+| Edge Case | Handling Strategy |
+|-----------|-------------------|
+| **Empty/whitespace guess** | Rejected with `400` and message `"Guess cannot be empty"`. |
+| **Guess with leading/trailing spaces** | Trimmed before validation and storage. The trimmed value is stored. |
+| **Different letter casing** | Compared case-insensitively using `.toLowerCase()`. |
+| **Duplicate correct guess (same player)** | Guess recorded in history but score unchanged (idempotent scoring). |
+| **Drawer submits guess** | Rejected with `403` and message `"Drawer cannot submit guesses"`. |
+| **Polling request fails** | Fail silently and retry on next interval; show a non-blocking indicator if consecutive failures occur. |
+| **Concurrent guess submissions** | Single-threaded Node.js processes requests sequentially; no race condition on score updates. |
+| **Guess after round ends** | Future concern — out of scope for this slice. The endpoint will still accept guesses since there's no round state machine yet. |
+| **Missing drawing data** | Default to empty array `[]` if no drawing strokes exist. |
diff --git a/specs/003-gameplay-interaction/tasks.md b/specs/003-gameplay-interaction/tasks.md
new file mode 100644
index 00000000..6b73d93c
--- /dev/null
+++ b/specs/003-gameplay-interaction/tasks.md
@@ -0,0 +1,112 @@
+# Implementation Tasks - Gameplay Interaction (Slice 3)
+
+This task list tracks the step-by-step implementation and verification steps for Slice 3.
+
+---
+
+## Task Checklist
+
+### Phase 1: Shared Models & Backend
+- [ ] **Task 1.1: Extend Data Models**
+  - Add `Point`, `DrawingStroke`, `Guess` types to `backend/src/models/game.ts`.
+  - Add `guesses`, `scores`, `drawing`, `correctGuessers` to `Room`.
+  - Add `guesses`, `scores`, `drawing` to `RoomSnapshot`.
+  - Align `RoomSnapshot` in `frontend/src/services/api.ts`.
+
+- [ ] **Task 1.2: Add Validation Schemas**
+  - Add `submitGuessSchema` in `backend/src/api/schemas.ts` (participantId, text trimmed min 1).
+  - Add `drawingUpdateSchema` in `backend/src/api/schemas.ts` (participantId, strokes array).
+
+- [ ] **Task 1.3: Implement Room Store Methods**
+  - Initialize `guesses`, `scores`, `drawing`, `correctGuessers` in `createRoom()`.
+  - Implement `submitGuess(code, participantId, text)` with validation and scoring.
+  - Implement `updateDrawing(code, participantId, strokes)`.
+  - Implement `clearDrawing(code, participantId)`.
+  - Update `toRoomSnapshot()` to include new fields.
+
+- [ ] **Task 1.4: Add API Routes**
+  - Add `POST /rooms/:code/guess` route handler.
+  - Add `POST /rooms/:code/draw` route handler.
+  - Add `POST /rooms/:code/clear` route handler.
+  - All return updated room snapshot.
+
+---
+
+### Phase 2: Frontend API & Store
+- [ ] **Task 2.1: Add API Client Methods**
+  - Add `submitGuess()` to `frontend/src/services/api.ts`.
+  - Add `updateDrawing()` to `frontend/src/services/api.ts`.
+  - Add `clearDrawing()` to `frontend/src/services/api.ts`.
+
+- [ ] **Task 2.2: Add Store Actions**
+  - Add `submitGuess()` method in `frontend/src/state/roomStore.ts`.
+  - Add `updateDrawing()` method.
+  - Add `clearDrawing()` method.
+
+---
+
+### Phase 3: Frontend UI Components
+- [ ] **Task 3.1: Implement Interactive Canvas (Drawer)**
+  - Replace drawer canvas placeholder with interactive `<canvas>` in `GamePage.tsx`.
+  - Implement mouse event handlers (mousedown, mousemove, mouseup) for drawing.
+  - Submit completed strokes to backend on mouseup.
+  - Add "Clear Canvas" button that calls `clearDrawing()`.
+
+- [ ] **Task 3.2: Implement Read-Only Canvas (Guesser)**
+  - Render drawing strokes from `room.drawing` on a read-only `<canvas>`.
+  - Re-render on each poll update via existing 2s polling loop.
+
+- [ ] **Task 3.3: Wire Up GuessForm**
+  - Modify `GuessForm.tsx` to call `roomStore.submitGuess()` on submit.
+  - Disable input if player is drawer or has already guessed correctly.
+  - Clear input after successful submission.
+
+- [ ] **Task 3.4: Implement Live Scoreboard**
+  - Update `Scoreboard.tsx` to display `room.scores` for each participant.
+  - Show "0" for participants without a score entry.
+
+- [ ] **Task 3.5: Implement Guess History Panel**
+  - Update `ResultPanel.tsx` (or rename to `GuessHistory.tsx`) to display `room.guesses`.
+  - Show participant name, guess text, and correct/incorrect indicator.
+
+---
+
+### Phase 4: Verification & Cleanup
+- [ ] **Task 4.1: Write Backend Unit Tests**
+  - Test empty guess rejection.
+  - Test case-insensitive correct match.
+  - Test drawer guess rejection.
+  - Test scoring: correct = 100, duplicate = 0.
+  - Test drawing: drawer can update/clear, non-drawer rejected.
+
+- [ ] **Task 4.2: Manual Multi-tab Verification**
+  - Verify drawer can draw and guesser sees strokes within 2s.
+  - Verify clear canvas works for both tabs.
+  - Verify guess submission, validation, history, and scoring.
+
+- [ ] **Task 4.3: Build Validation**
+  - Run `npm test` in both directories.
+
+---
+
+## Dependencies & Path
+```mermaid
+graph TD
+  T1.1[Models] --> T1.3[Store Methods]
+  T1.2[Schemas] --> T1.4[API Routes]
+  T1.3 --> T1.4
+  T1.4 --> T2.1[API Client]
+  T2.1 --> T2.2[Store Actions]
+  T2.2 --> T3.1[Interactive Canvas]
+  T2.2 --> T3.3[GuessForm]
+  T1.1 --> T3.2[Read-Only Canvas]
+  T1.1 --> T3.4[Scoreboard]
+  T1.1 --> T3.5[Guess History]
+  T3.1 --> T4.2[Verification]
+  T3.2 --> T4.2
+  T3.3 --> T4.2
+  T3.4 --> T4.2
+  T3.5 --> T4.2
+  T4.1[Tests] --> T4.3[Build]
+  T4.2 --> T4.3
+```
diff --git a/specs/004-result-restart-validation/plan.md b/specs/004-result-restart-validation/plan.md
new file mode 100644
index 00000000..5c07e27a
--- /dev/null
+++ b/specs/004-result-restart-validation/plan.md
@@ -0,0 +1,171 @@
+# Technical Implementation Plan — Result, Restart & Final Validation (Slice 4)
+
+## Overview
+This document describes the technical plan for Slice 4: auto-transitioning to a results state when all guessers guess correctly, revealing the secret word to all players, displaying final results, and implementing a host-only restart that resets round state while preserving the player list.
+
+---
+
+## Proposed Changes
+
+### 1. Model Updates (Shared)
+
+#### [MODIFY] `backend/src/models/game.ts`
+- Extend `RoomStatus` to include `"results"`:
+  ```typescript
+  export type RoomStatus = "lobby" | "active" | "results";
+  ```
+
+#### [MODIFY] `frontend/src/services/api.ts`
+- Update `RoomSnapshot.status` type to include `"results"`:
+  ```typescript
+  status: "lobby" | "active" | "results";
+  ```
+
+---
+
+### 2. Backend Logic & Services
+
+#### [MODIFY] `backend/src/services/roomStore.ts`
+
+- **`submitGuess(code, participantId, text)`** — Auto-transition to results:
+  - After a correct guess is recorded and the guesser is added to `correctGuessers`, check if ALL non-drawer participants are now in `correctGuessers`.
+  - If so, set `room.status = "results"`.
+  ```typescript
+  const allNonDrawersGuessedCorrectly = room.participants
+    .filter((p) => p.id !== room.drawerId)
+    .every((p) => room.correctGuessers.includes(p.id));
+
+  if (allNonDrawersGuessedCorrectly) {
+    room.status = "results";
+  }
+  ```
+
+- **`restartGame(code, hostParticipantId)`** — New function:
+  - Validate room exists (`404` if not).
+  - Validate caller is host (`403` if not).
+  - Validate status is `"results"` (`400` if not).
+  - Reset round state:
+    - `status = "lobby"`
+    - `drawerId = undefined`
+    - `secretWord = undefined`
+    - `guesses = []`
+    - `drawing = []`
+    - `correctGuessers = []`
+    - Reset all participant scores to `0`.
+  - Participants array is NOT modified.
+  - Save and return cloned room.
+
+- **`toRoomSnapshot(room, viewerParticipantId)`** — Reveal word in results:
+  - Include `secretWord` in snapshot when `status === "results"`, regardless of viewer role:
+  ```typescript
+  if (room.drawerId && (viewerParticipantId === room.drawerId || room.status === "results")) {
+    snapshot.secretWord = room.secretWord;
+  }
+  ```
+
+#### [MODIFY] `backend/src/api/rooms.ts`
+- Add import for `restartGame`.
+- Add route `POST /rooms/:code/restart`:
+  - Parse code from params and `participantId` from body via `participantActionSchema`.
+  - Call `restartGame(code, participantId)`.
+  - Return updated room snapshot.
+
+---
+
+### 3. Frontend API & Store Integrations
+
+#### [MODIFY] `frontend/src/services/api.ts`
+- Add `restartGame(code, participantId)`:
+  ```typescript
+  restartGame(code: string, participantId: string) {
+    return request<{ room: RoomSnapshot }>(`/rooms/${encodeURIComponent(code)}/restart`, {
+      method: "POST",
+      body: JSON.stringify({ participantId })
+    });
+  }
+  ```
+
+#### [MODIFY] `frontend/src/state/roomStore.ts`
+- Add `restartGame()` method:
+  ```typescript
+  async restartGame() {
+    if (!this.state.room || !this.state.participantId) return null;
+    const response = await this.withLoading(() =>
+      api.restartGame(this.state.room!.code, this.state.participantId!)
+    );
+    this.setRoomSnapshot(response.room);
+    return response.room;
+  }
+  ```
+
+---
+
+### 4. Frontend UI — Results View
+
+#### [MODIFY] `frontend/src/pages/GamePage.tsx`
+- When `room.status === "results"`, render a **Results View** instead of the game canvas:
+  - Display the correct word prominently.
+  - Show the existing `Scoreboard` component (already reading from `room.scores`).
+  - Show the existing `ResultPanel` component (already reading from `room.guesses`).
+  - If the viewer is the host: show a **"Restart Game"** button that calls `roomStore.restartGame()` and navigates to `/lobby`.
+  - If the viewer is not the host: show a **"Waiting for host to restart..."** message.
+- When `room.status === "lobby"` (detected via polling), navigate to `/lobby`.
+
+---
+
+### 5. Existing Components (No Changes Needed)
+
+#### `frontend/src/components/Scoreboard.tsx`
+- Already reads `room.scores` and `room.participants` — renders final scores automatically.
+
+#### `frontend/src/components/ResultPanel.tsx`
+- Already reads `room.guesses` — renders full guess history automatically.
+
+#### `frontend/src/pages/LobbyPage.tsx`
+- Already polls `room.status === "active"` to navigate to `/game`.
+- After restart, the lobby will display the preserved participant list and the host can start a new game when ready.
+
+---
+
+## Verification Plan
+
+### Automated Tests
+
+Write new tests in `backend/src/services/roomStore.test.ts`:
+
+- **Auto-transition to results**: Create a room, start game, have all guessers guess correctly — verify `status === "results"`.
+- **Results reveal word**: In results state, verify `toRoomSnapshot` includes `secretWord` for all viewers.
+- **Restart clears state**: Restart a room and verify `status === "lobby"`, `drawing === []`, `guesses === []`, `scores === {all: 0}`, `secretWord === undefined`, `drawerId === undefined`.
+- **Restart preserves participants**: Verify participant list is identical before and after restart.
+- **Non-host restart rejection**: Verify a non-host gets `403` when calling `restartGame()`.
+- **Restart from non-results state**: Verify restarting from `"lobby"` or `"active"` throws `400`.
+
+### Manual Verification Flow (2 Browser Tabs)
+
+1. **Setup**: Host Tab A and Guest Tab B in lobby. Host starts game.
+2. **Round Completion**:
+   - Tab B (guesser) submits the correct word.
+   - Both tabs transition to the results view.
+   - Both tabs see the correct word, final scores, and guess history.
+3. **Restart**:
+   - Tab A (host) clicks "Restart Game".
+   - Both tabs navigate back to the lobby.
+   - Participant list shows both players.
+   - Scores are cleared.
+4. **Non-host restart attempt**:
+   - In results state, verify there is no restart button for the non-host.
+5. **New game after restart**:
+   - Host can start a new game from the lobby with the same players.
+
+---
+
+## File Change Summary
+
+| File | Change Type | Description |
+|------|-------------|-------------|
+| `backend/src/models/game.ts` | Modify | Add `"results"` to `RoomStatus` |
+| `backend/src/services/roomStore.ts` | Modify | Auto-transition in `submitGuess`, add `restartGame`, update `toRoomSnapshot` |
+| `backend/src/api/rooms.ts` | Modify | Add `POST /:code/restart` route |
+| `frontend/src/services/api.ts` | Modify | Add `"results"` to status type, add `restartGame` API method |
+| `frontend/src/state/roomStore.ts` | Modify | Add `restartGame()` store action |
+| `frontend/src/pages/GamePage.tsx` | Modify | Add results view with restart button and lobby navigation |
diff --git a/specs/004-result-restart-validation/spec.md b/specs/004-result-restart-validation/spec.md
new file mode 100644
index 00000000..887932e6
--- /dev/null
+++ b/specs/004-result-restart-validation/spec.md
@@ -0,0 +1,126 @@
+# Feature Specification: Result, Restart & Final Validation (Slice 4)
+
+## Overview
+This specification covers displaying round results (correct word, final scores, guess history), host-only restart authorization, and the transition back to the lobby while preserving the player list and clearing all round-specific state.
+
+---
+
+## User Story
+```text
+As a player,
+I want to view the round results and restart the game,
+so that we can begin a new game without losing the players in the room.
+```
+
+---
+
+## Core Terminology & Data Model Updates
+- **Results State**: A new room status (`"results"`) entered after all guessers have correctly guessed the secret word, where the word is revealed to all players.
+- **Restart**: A host-only action that resets the room from `"results"` back to `"lobby"`, clearing round state but preserving participants.
+
+### State Schema Extensions
+
+#### `RoomStatus` — Extended
+```typescript
+// Before
+type RoomStatus = "lobby" | "active";
+
+// After
+type RoomStatus = "lobby" | "active" | "results";
+```
+
+#### State Transitions
+```
+  ┌──────────┐    start game     ┌──────────┐   all guessers    ┌───────────┐
+  │  "lobby"  │ ───────────────> │ "active"  │ ─── correct ───> │ "results" │
+  │           │                  │           │                   │           │
+  └──────────┘                   └──────────┘                   └───────────┘
+       ▲                                                              │
+       │                                                              │
+       │                    host clicks restart                        │
+       └──────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Functional Requirements
+
+### 1. Round End (Transition to Results)
+- When all non-drawer participants have submitted a correct guess, the room status MUST automatically transition to `"results"`.
+- Once in `"results"` state, the secret word MUST be visible to ALL participants (not just the drawer).
+- The drawing, guesses, and scores MUST remain accessible for viewing during the results phase.
+
+### 2. Results Display
+- The correct word MUST be displayed to all players.
+- The final scores for all players MUST be displayed.
+- The complete guess history (ordered list of all submitted guesses) MUST be displayed.
+
+### 3. Restart Authorization
+- Only the host (participant whose ID matches `hostId`) can restart the game.
+- Non-host restart attempts MUST be rejected with a `403 Forbidden` error.
+- The game MUST only be restartable from the `"results"` state. Restarting from `"lobby"` or `"active"` states MUST be rejected.
+
+### 4. Restart Behavior
+- Restart MUST return all players to the lobby (`status = "lobby"`).
+- The existing participant list MUST be preserved.
+- The following round-specific state MUST be cleared:
+  - Drawing strokes (`drawing = []`)
+  - Guess history (`guesses = []`)
+  - Scores (`scores` reset to `0` for all participants)
+  - Secret word (`secretWord = undefined`)
+  - Current drawer (`drawerId = undefined`)
+  - Correct guessers list (`correctGuessers = []`)
+
+### 5. Lobby Re-entry After Restart
+- After a restart, all players polling the room state MUST see `status = "lobby"`.
+- The polling logic in the frontend lobby page MUST detect `status = "active"` transitions (for regular game starts) and the game page MUST detect `status = "lobby"` transitions (for restart) to automatically navigate clients to the correct page.
+
+---
+
+## Acceptance Criteria
+
+### AC1 — Auto-Transition to Results
+- **Given** a game in `"active"` state,
+- **When** all guessers have guessed the secret word correctly,
+- **Then** the room status transitions to `"results"`.
+
+### AC2 — Word Revealed to All
+- **Given** the room is in `"results"` state,
+- **When** any player polls the room snapshot,
+- **Then** the `secretWord` field is populated for all viewers (not just the drawer).
+
+### AC3 — Results Display
+- **Given** a room is in `"results"` state,
+- **When** a player views the results screen,
+- **Then** they see the correct word, final scores (sorted), and the complete guess history.
+
+### AC4 — Host-Only Restart
+- **Given** a room in `"results"` state,
+- **When** the host clicks "Restart Game",
+- **Then** the room transitions back to `"lobby"` with participants preserved and round state cleared.
+- **When** a non-host attempts to restart,
+- **Then** the backend rejects with `403 Forbidden`.
+
+### AC5 — Players Return to Lobby
+- **Given** a restart has occurred,
+- **When** any player polls the room state,
+- **Then** `status` is `"lobby"`, all original participants are present, and all round-specific data is cleared.
+
+### AC6 — Player List Preserved
+- **Given** a room with 3 participants restarts,
+- **When** the lobby is re-entered,
+- **Then** all 3 participants remain in the lobby with no changes to the participant list.
+
+---
+
+## Edge Cases & Handling Strategy
+
+| Edge Case | Handling Strategy |
+|-----------|-------------------|
+| **Non-host attempts to restart** | Backend rejects with `403 Forbidden`. Frontend hides the restart button for non-hosts entirely. |
+| **Host disconnects before restarting** | The room remains in `"results"` state. No host migration is implemented — the game is stuck until host reconnects. Future slice can add host migration. |
+| **Restart requested multiple times** | After the first restart, status is `"lobby"`. A subsequent restart request (while in `"lobby"`) is rejected with a 400 error. |
+| **Player disconnects during restart** | The restart operation is atomic on the server. Disconnected players will see the lobby state when they rejoin (via the room code). |
+| **Restart with only one player remaining** | Allowed. The game requires >= 2 players to *start*, but restart only resets state and preserves whatever participants remain. The host will see the "Need at least 2 players" message in the lobby if someone left. |
+| **All guessers already guessed before last guess** | The guess that causes `correctGuessers` to cover all non-drawers triggers the transition. The last correct guess is recorded before the status change. |
+| **Polling during results phase** | Works identically to existing polling — the 2s interval continues, serving the room snapshot with `status: "results"` and the secret word included. |
diff --git a/specs/004-result-restart-validation/tasks.md b/specs/004-result-restart-validation/tasks.md
new file mode 100644
index 00000000..b9afc9db
--- /dev/null
+++ b/specs/004-result-restart-validation/tasks.md
@@ -0,0 +1,115 @@
+# Implementation Tasks — Result, Restart & Final Validation (Slice 4)
+
+This task list tracks the step-by-step implementation and verification steps for Slice 4.
+
+---
+
+## Task Checklist
+
+### Phase 1: Shared Models & Backend
+- [ ] **Task 1.1: Extend RoomStatus**
+  - Add `"results"` to the `RoomStatus` type in `backend/src/models/game.ts`:
+    ```typescript
+    export type RoomStatus = "lobby" | "active" | "results";
+    ```
+
+- [ ] **Task 1.2: Auto-Transition to Results on All Correct**
+  - Modify `submitGuess()` in `backend/src/services/roomStore.ts`.
+  - After a correct guess, check if all non-drawer participants are in `correctGuessers`.
+  - If so, set `room.status = "results"`.
+
+- [ ] **Task 1.3: Implement Restart Game Logic**
+  - Add `restartGame(code, hostParticipantId)` in `backend/src/services/roomStore.ts`:
+    - Validate room exists (`404`).
+    - Validate caller is host (`403`).
+    - Validate status is `"results"` (`400`).
+    - Reset: `status = "lobby"`, clear `drawing`, `guesses`, `scores`, `secretWord`, `drawerId`, `correctGuessers`.
+    - Preserve `participants` array.
+    - Save and return cloned room.
+
+- [ ] **Task 1.4: Reveal Secret Word in Results**
+  - Modify `toRoomSnapshot()` in `backend/src/services/roomStore.ts`.
+  - Include `secretWord` for all viewers when `status === "results"`.
+
+- [ ] **Task 1.5: Add Restart API Route**
+  - Add `POST /rooms/:code/restart` in `backend/src/api/rooms.ts`.
+  - Parse `{ participantId }` from body (reuse `participantActionSchema`).
+  - Call `restartGame()` and return updated snapshot.
+
+---
+
+### Phase 2: Frontend API & Store
+- [ ] **Task 2.1: Update Frontend Types**
+  - Update `RoomSnapshot.status` in `frontend/src/services/api.ts`:
+    ```typescript
+    status: "lobby" | "active" | "results";
+    ```
+
+- [ ] **Task 2.2: Add Restart API Client Method**
+  - Add `restartGame(code, participantId)` to `frontend/src/services/api.ts`.
+
+- [ ] **Task 2.3: Add Restart Store Action**
+  - Add `restartGame()` method in `frontend/src/state/roomStore.ts`.
+  - Validate `room` and `participantId` are set.
+  - Call `api.restartGame()`, update snapshot, return room.
+
+---
+
+### Phase 3: Frontend UI — Results View
+- [ ] **Task 3.1: Add Results View to GamePage**
+  - In `frontend/src/pages/GamePage.tsx`, when `room.status === "results"`:
+    - Render a results section with:
+      - Correct word displayed prominently.
+      - `Scoreboard` component (already shows final scores).
+      - `ResultPanel` component (already shows guess history).
+      - Guess history only shows to non-drawer after results. Drawer can see all the time.
+    - If viewer is host: show **"Restart Game"** button calling `roomStore.restartGame()` then navigating to `/lobby`.
+    - If viewer is not host: show **"Waiting for host to restart..."** message.
+
+- [ ] **Task 3.2: Handle Lobby Navigation on Restart**
+  - In the polling `useEffect` of `GamePage.tsx`, add a check: if `room.status === "lobby"`, navigate to `/lobby`.
+
+---
+
+### Phase 4: Verification & Cleanup
+- [ ] **Task 4.1: Write Backend Unit Tests**
+  - Add tests in `backend/src/services/roomStore.test.ts` for:
+    - All guessers correct triggers `"results"` status.
+    - Results snapshot reveals secret word to all viewers.
+    - `restartGame` clears round state and preserves participants.
+    - Non-host gets `403` on restart.
+    - Restart from non-results state throws `400`.
+
+- [ ] **Task 4.2: Run All Tests**
+  - Run `npm test` in both `backend/` and `frontend/` directories.
+
+- [ ] **Task 4.3: Manual Multi-tab Verification**
+  - Verify results view shows correct word, scores, and guess history for both host and guest.
+  - Verify host can restart and both players return to lobby with preserved participant list.
+  - Verify non-host cannot see restart button.
+  - Verify host can start a new game from lobby after restart.
+
+- [ ] **Task 4.4: Build Validation**
+  - Run `npm run build` in both frontend and backend directories (if build scripts exist).
+
+---
+
+## Dependencies & Path
+```mermaid
+graph TD
+  T1.1[Models] --> T1.2[Auto-Transition]
+  T1.1 --> T1.4[Snapshot Reveal]
+  T1.2 --> T1.5[Restart Route]
+  T1.3[Restart Logic] --> T1.5
+  T1.4 --> T1.5
+  T1.5 --> T2.2[API Client]
+  T2.1[Frontend Types] --> T2.2
+  T2.2 --> T2.3[Store Action]
+  T2.3 --> T3.1[Results View]
+  T2.3 --> T3.2[Lobby Nav]
+  T3.1 --> T4.2[Run Tests]
+  T3.2 --> T4.2
+  T4.1[Unit Tests] --> T4.2
+  T4.2 --> T4.3[Manual Verify]
+  T4.3 --> T4.4[Build Check]
+```