diff --git a/apps/backend/package.json b/apps/backend/package.json
index db81889..0ec2b4b 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -5,7 +5,9 @@
 	"scripts": {
 		"dev": "wrangler dev",
 		"deploy": "wrangler deploy --minify",
-		"cf-typegen": "wrangler types --env-interface CloudflareBindings"
+		"cf-typegen": "wrangler types --env-interface CloudflareBindings",
+		"db:generate": "drizzle-kit generate",
+		"db:push": "drizzle-kit push"
 	},
 	"dependencies": {
 		"drizzle-orm": "^0.44.5",
diff --git a/apps/backend/src/db/schema.ts b/apps/backend/src/db/schema.ts
index 7810949..b23cfb1 100644
--- a/apps/backend/src/db/schema.ts
+++ b/apps/backend/src/db/schema.ts
@@ -18,6 +18,7 @@ export const sessions = pgTable("Session", {
 export const rooms = pgTable("Room", {
 	id: text("id").primaryKey(),
 	name: text("name").notNull(),
+	gameTitle: text("gameType").notNull(),
 	createdAt: timestamp("createdAt", { withTimezone: true }).defaultNow(),
 	users: text("users").array().notNull(),
 	hostId: text("hostId")
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index 39af179..6e077a4 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -17,8 +17,11 @@ import {
 	type Rule,
 } from "./magic";
 
+import { Memory } from "./memory";
+
 type Bindings = {
 	MAGIC: DurableObjectNamespace;
+	MEMORY: DurableObjectNamespace;
 	DATABASE_URL: string;
 	ENV: string;
 };
@@ -30,6 +33,8 @@ type Variables = {
 	user: User;
 };
 
+type GameTitles = "magic-square" | "memory-optimization";
+
 // TODO: 環境変数にする
 const secret = "hoge";
 
@@ -151,9 +156,14 @@ const apiApp = new Hono<{
 		const db = c.get("db");
 		const user = c.get("user");
 
-		const { name } = await c.req.json<{ name: string }>();
-		if (!name) {
-			throw new HTTPException(400, { message: "Room name is required" });
+		const { name, gameTitle } = await c.req.json<{
+			name: string;
+			gameTitle: GameTitles;
+		}>();
+		if (!name || !gameTitle) {
+			throw new HTTPException(400, {
+				message: "Room name and game title are required",
+			});
 		}
 
 		const roomSecret = Math.floor(100000 + Math.random() * 900000).toString();
@@ -164,6 +174,7 @@ const apiApp = new Hono<{
 			.values({
 				id: roomId,
 				name,
+				gameTitle: gameTitle,
 				hostId: user.id,
 				users: [user.id],
 			})
@@ -300,18 +311,34 @@ const apiApp = new Hono<{
 			throw new HTTPException(403, { message: "Unauthorized" });
 		}
 
-		const id = c.env.MAGIC.idFromName(roomId);
-		const stub = c.env.MAGIC.get(id);
+		switch (room.gameTitle) {
+			case "magic-square": {
+				const id = c.env.MAGIC.idFromName(roomId);
+				const stub = c.env.MAGIC.get(id);
 
-		const url = new URL(c.req.url);
-		url.searchParams.set("playerId", user.id);
+				const url = new URL(c.req.url);
+				url.searchParams.set("playerId", user.id);
 
-		const request = new Request(url.toString(), c.req.raw);
-		return stub.fetch(request);
+				const request = new Request(url.toString(), c.req.raw);
+				return stub.fetch(request);
+			}
+			case "memory-optimization": {
+				const id = c.env.MEMORY.idFromName(roomId);
+				const stub = c.env.MEMORY.get(id);
+
+				const url = new URL(c.req.url);
+				url.searchParams.set("playerId", user.id);
+
+				const request = new Request(url.toString(), c.req.raw);
+				return stub.fetch(request);
+			}
+			default:
+				throw new HTTPException(400, { message: "Invalid game title" });
+		}
 	});
 
 export type AppType = typeof apiApp;
 export default apiApp;
 
 export type { GameState, MoveAction, MessageType, Rule, Operation };
-export { Magic };
+export { Magic, Memory };
diff --git a/apps/backend/src/memory.ts b/apps/backend/src/memory.ts
new file mode 100644
index 0000000..228c6bd
--- /dev/null
+++ b/apps/backend/src/memory.ts
@@ -0,0 +1,557 @@
+import type { Env } from "hono/types";
+import { type Mission, missions } from "./mission";
+import { RoomMatch, type RoomState } from "./room";
+
+// --- Game-specific Types ---
+
+let timeout: ReturnType<typeof setTimeout>;
+
+export type Operation = "add" | "sub";
+
+export type MoveAction = {
+	x: number;
+	y: number;
+	operation: Operation;
+	num: number;
+	numIndex: number;
+};
+
+export type Rule =
+	| { rule: "negativeDisabled"; state: boolean }
+	| { rule: "boardSize"; state: number }
+	| { rule: "timeLimit"; state: number };
+
+// GameState extends RoomState to include game-specific properties
+export type GameState = RoomState & {
+	round: number;
+	turn: number;
+	board: (number | null)[][];
+	winners: string[] | null;
+	winnersAry: { [playerId: string]: (true | false)[][] };
+	gameId: string;
+	hands: { [playerId: string]: number[] };
+	missions: { [playerId: string]: { id: string; mission: Mission } };
+	timeLimitUnix: number;
+};
+
+// Combined message types for both room and game actions
+export type MessageType =
+	| { type: "makeMove"; payload: MoveAction }
+	| { type: "setReady"; payload?: undefined }
+	| { type: "cancelReady"; payload?: undefined }
+	| { type: "changeRule"; payload: Rule }
+	| { type: "pass"; payload?: undefined }
+	| { type: "backToLobby"; payload?: undefined }
+	| { type: "removePlayer"; payload?: undefined };
+
+const DEFAULT_BOARD_SIZE = 3;
+const DEFAULT_TIME_LIMIT_MS = 10000;
+
+export class Memory extends RoomMatch<GameState> {
+	constructor(ctx: DurableObjectState, env: Env) {
+		super(ctx, env);
+		this.state = undefined; // Initialize state, will be loaded in super's constructor
+	}
+
+	async wsMessageListener(
+		ws: WebSocket,
+		message: MessageEvent,
+		playerId: string,
+	) {
+		try {
+			const { type, payload } = JSON.parse(
+				message.data as string,
+			) as MessageType;
+			switch (type) {
+				// Game actions
+				case "makeMove":
+					await this.makeMove(
+						playerId,
+						payload.x,
+						payload.y,
+						payload.num,
+						payload.operation,
+						payload.numIndex,
+					);
+					break;
+				case "pass":
+					await this.pass();
+					break;
+				// Room actions (from base class)
+				case "setReady":
+					await this.setReady(playerId);
+					break;
+				case "cancelReady":
+					await this.cancelReady(playerId);
+					break;
+				case "changeRule":
+					await this.changeRule(payload);
+					break;
+				case "removePlayer":
+					await this.removePlayer(playerId);
+					break;
+				case "backToLobby":
+					await this.backToLobby(playerId);
+					break;
+				default:
+					throw new Error(`Unhandled message type: ${type}`);
+			}
+		} catch {
+			ws.send(JSON.stringify({ error: "Invalid message" }));
+		}
+	}
+
+	// called once when the Durable Object is first created
+	async initialize() {
+		this.state = {
+			// RoomState properties
+			status: "preparing",
+			players: [],
+			playerStatus: {},
+			names: {},
+			rules: {
+				negativeDisabled: false,
+				boardSize: DEFAULT_BOARD_SIZE,
+				timeLimit: DEFAULT_TIME_LIMIT_MS / 1000,
+			},
+			// GameState specific properties
+			round: 0,
+			turn: 0,
+			board: [],
+			winners: null,
+			winnersAry: {},
+			gameId: this.ctx.id.toString(),
+			hands: {},
+			missions: {},
+			timeLimitUnix: Date.now() + DEFAULT_TIME_LIMIT_MS,
+		};
+		await this.ctx.storage.put("gameState", this.state);
+		this.broadcast({ type: "state", payload: this.state });
+	}
+
+	async changeRule(payload: Rule) {
+		if (!this.state || this.state.status !== "preparing") return;
+
+		if (payload.rule === "negativeDisabled") {
+			this.state.rules.negativeDisabled = payload.state;
+		} else if (payload.rule === "boardSize") {
+			this.state.rules.boardSize = payload.state;
+			this.state.board = Array(payload.state)
+				.fill(null)
+				.map(() => Array(payload.state).fill(null));
+		} else if (payload.rule === "timeLimit") {
+			this.state.rules.timeLimit = payload.state;
+		}
+		await this.ctx.storage.put("gameState", this.state);
+		this.broadcast({ type: "state", payload: this.state });
+	}
+
+	override async startGame(): Promise<void> {
+		if (!this.state || this.state.status !== "preparing") return;
+		// The original implementation called a method to clear parts of the state.
+		// We will replicate that behavior by resetting the game-specific state here.
+		const size = this.state.rules.boardSize;
+		this.state.board = Array(size)
+			.fill(null)
+			.map(() => Array(size).fill(null));
+		this.state.round = 0;
+		this.state.turn = 0;
+		this.state.winners = null;
+		this.state.winnersAry = {};
+		this.state.hands = {};
+		this.state.missions = {};
+
+		for (const playerId of this.state.players) {
+			if (this.state.playerStatus[playerId] !== "ready") {
+				console.error("one of the players not ready:", playerId);
+				return;
+			}
+			this.state.playerStatus[playerId] = "playing";
+
+			if (this.state.hands[playerId]) {
+				console.error("player already has a hand:", playerId);
+				return;
+			}
+			this.state.hands[playerId] = this.drawInitialHand();
+
+			if (this.state.missions[playerId]) {
+				console.error("player already has a mission:", playerId);
+				return;
+			}
+			this.state.missions[playerId] = this.getRandomMission();
+		}
+		this.state.status = "playing";
+		this.state.timeLimitUnix = Date.now() + this.state.rules.timeLimit * 1000;
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			this.pass();
+		}, this.state.rules.timeLimit * 1000);
+
+		await this.ctx.storage.put("gameState", this.state);
+		this.broadcast({ type: "state", payload: this.state });
+	}
+
+	// --- Game-specific Methods ---
+
+	drawInitialHand() {
+		if (!this.state) return [];
+		const hand = new Array(3); // TODO: 変更可能にする
+		for (let i = 0; i < hand.length; i++) {
+			hand[i] = this.drawCard();
+		}
+		return hand;
+	}
+
+	// TODO: 調整可能にする
+	drawCard() {
+		const rand = Math.random();
+		if (rand < 0.4) {
+			return 1;
+		} else if (rand < 0.6) {
+			return 2;
+		} else if (rand < 0.8) {
+			return 3;
+		} else {
+			return 4;
+		}
+	}
+
+	// TODO: ミッションの重複を避ける
+	getRandomMission() {
+		const missionKeys = Object.keys(missions);
+		const randomKey =
+			missionKeys[Math.floor(Math.random() * missionKeys.length)];
+		return { id: randomKey, mission: missions[randomKey] };
+	}
+
+	advanceTurnAndRound() {
+		if (!this.state) return;
+
+		const players = this.state.players;
+		const playerStatuses = this.state.playerStatus;
+		const currentTurn = this.state.turn;
+
+		const activePlayerIds = players.filter(
+			(p) => playerStatuses[p] === "playing",
+		);
+		if (activePlayerIds.length === 0) {
+			this.state.status = "paused";
+			return; // No one to advance turn to.
+		}
+
+		const currentPlayerId = players[currentTurn];
+
+		// Find the index of the current player in the list of *active* players.
+		// If the current player is not active (e.g., a watcher), this will be -1.
+		const currentPlayerActiveIndex = activePlayerIds.indexOf(currentPlayerId);
+
+		let nextPlayerId: string | null = null;
+
+		if (currentPlayerActiveIndex === -1) {
+			// The turn was on an inactive player. Find the first active player after the current one.
+			let nextTurn = currentTurn;
+			for (let i = 0; i < players.length; i++) {
+				nextTurn = (nextTurn + 1) % players.length;
+				if (playerStatuses[players[nextTurn]] === "playing") {
+					nextPlayerId = players[nextTurn];
+					break;
+				}
+			}
+			if (!nextPlayerId) {
+				// Should be unreachable due to activePlayerIds.length check
+				this.state.status = "paused";
+				return;
+			}
+		} else {
+			// The current player is active. Find the next one in the active list.
+			const nextPlayerActiveIndex =
+				(currentPlayerActiveIndex + 1) % activePlayerIds.length;
+			nextPlayerId = activePlayerIds[nextPlayerActiveIndex];
+
+			// If we wrapped around the active players list, increment the round.
+			if (nextPlayerActiveIndex === 0) {
+				this.state.round += 1;
+			}
+		}
+
+		if (nextPlayerId) {
+			this.state.turn = players.indexOf(nextPlayerId);
+		}
+	}
+
+	async makeMove(
+		player: string,
+		x: number,
+		y: number,
+		num: number,
+		operation: Operation,
+		numIndex: number,
+	) {
+		if (!this.state || this.state.winners) return;
+
+		if (!this.isValidMove(player, x, y, num)) {
+			console.error("Invalid move attempted:", player, x, y, num);
+			return;
+		}
+
+		console.log("Making move:", player, x, y, num);
+
+		this.state.board[y][x] = this.computeCellResult(x, y, num, operation);
+
+		this.advanceTurnAndRound();
+
+		const prevHand = this.state.hands[player];
+
+		this.state.hands[player] = prevHand.toSpliced(numIndex, 1, this.drawCard());
+
+		for (const id of this.state.players) {
+			if (this.state.missions[id]) {
+				const winary = this.isVictory(this.state.missions[id].mission);
+				if (winary.some((row) => row.includes(true))) {
+					if (!this.state) throw new Error("Game state is not initialized");
+					this.state.winnersAry[id] = winary;
+					if (!this.state.winners) {
+						this.state.winners = [id];
+					} else if (!this.state.winners.includes(id)) {
+						this.state.winners.push(id);
+					}
+					console.log("winary", winary);
+					console.log("this.state.winnersAry", this.state.winnersAry);
+				}
+			}
+		}
+
+		if (this.state.winners) {
+			this.state.status = "preparing";
+			Object.keys(this.state.playerStatus).forEach((playerId) => {
+				if (!this.state) throw new Error("Game state is not initialized");
+				this.state.playerStatus[playerId] = "finished";
+			});
+		}
+		this.state.timeLimitUnix = Date.now() + this.state.rules.timeLimit * 1000;
+		clearTimeout(timeout);
+		if (!this.state.winners)
+			timeout = setTimeout(() => {
+				this.pass();
+			}, this.state.rules.timeLimit * 1000);
+		await this.ctx.storage.put("gameState", this.state);
+		this.broadcast({ type: "state", payload: this.state });
+	}
+
+	async pass() {
+		if (!this.state) return;
+		this.advanceTurnAndRound();
+		this.state.timeLimitUnix = Date.now() + this.state.rules.timeLimit * 1000;
+		clearTimeout(timeout);
+		timeout = setTimeout(() => {
+			this.pass();
+		}, this.state.rules.timeLimit * 1000);
+		await this.ctx.storage.put("gameState", this.state);
+		this.broadcast({ type: "state", payload: this.state });
+	}
+
+	isValidMove(player: string, x: number, y: number, num: number) {
+		if (!this.state) throw new Error("Game state is not initialized");
+
+		// TODO: 調整可能にする
+		if (!Number.isInteger(num) || num < 1 || num > 4) {
+			console.error("Invalid number:", num);
+			return false;
+		}
+
+		const currentPlayer = this.state.players[this.state.turn];
+		if (currentPlayer !== player) {
+			console.error("Not your turn:", player);
+			return false;
+		}
+
+		const currentHand = this.state.hands[currentPlayer];
+		if (!currentHand || currentHand.length === 0) {
+			console.error("Invalid hand:", currentPlayer);
+			return false;
+		}
+		if (!currentHand.includes(num)) {
+			console.error("Card not in hand:", num);
+			return false;
+		}
+
+		if (this.state.board[y][x] === undefined) {
+			console.error("Invalid board position:", x, y);
+			return false;
+		}
+
+		return true;
+	}
+
+	computeCellResult(
+		x: number,
+		y: number,
+		num: number,
+		operation: Operation,
+	): number {
+		if (!this.state) throw new Error("Game state is not initialized");
+
+		const prev = this.state.board[y][x] ?? 0;
+
+		switch (operation) {
+			case "add":
+				return prev + num;
+			case "sub":
+				return num > prev && this.state.rules.negativeDisabled
+					? num - prev
+					: prev - num;
+			default:
+				return operation satisfies never;
+		}
+	}
+
+	isVictory(mission: Mission) {
+		if (!this.state) throw new Error("Game state is not initialized");
+		const matrix = Array.from({ length: this.state.rules.boardSize }, () =>
+			Array(this.state?.rules.boardSize).fill(false),
+		);
+		if (mission.target === "column" || mission.target === "allDirection") {
+			for (let i = 0; i < this.state.rules.boardSize; i++) {
+				const columnary = this.state.board[i].filter((value) => value !== null);
+				if (this.isWinner(columnary, mission)) {
+					matrix[i] = Array(this.state.rules.boardSize).fill(true);
+				}
+			}
+		}
+
+		if (mission.target === "row" || mission.target === "allDirection") {
+			for (let i = 0; i < this.state.rules.boardSize; i++) {
+				const nullinary = [];
+				for (let j = 0; j < this.state.rules.boardSize; j++) {
+					nullinary.push(this.state.board[j][i]);
+				}
+				const rowary = nullinary.filter((value) => value !== null);
+				if (this.isWinner(rowary, mission)) {
+					for (let j = 0; j < this.state.rules.boardSize; j++) {
+						matrix[j][i] = true;
+					}
+				}
+			}
+		}
+
+		if (mission.target === "diagonal" || mission.target === "allDirection") {
+			for (let i = 0; i < 2; i++) {
+				const nullinary = [];
+				for (let j = 0; j < this.state.rules.boardSize; j++) {
+					if (i === 0) {
+						nullinary.push(
+							this.state.board[j][this.state.rules.boardSize - j - 1],
+						);
+					} else {
+						nullinary.push(
+							this.state.board[this.state.rules.boardSize - j - 1][j],
+						);
+					}
+				}
+				const diaary = nullinary.filter((value) => value !== null);
+				if (this.isWinner(diaary, mission)) {
+					for (let j = 0; j < this.state.rules.boardSize; j++) {
+						if (i === 0) {
+							matrix[j][this.state.rules.boardSize - j - 1] = true;
+						} else {
+							matrix[this.state.rules.boardSize - j - 1][j] = true;
+						}
+					}
+				}
+			}
+		}
+
+		if (mission.target === "allCell") {
+			const nullinary = [];
+			for (let i = 0; i < this.state.rules.boardSize; i++) {
+				for (let j = 0; j < this.state.rules.boardSize; j++) {
+					nullinary.push(this.state.board[i][j]);
+				}
+			}
+			const boardary = nullinary.filter((value) => value !== null);
+			if (mission.type === "multipile") {
+				let hikaku = 0;
+				for (let j = 0; j < boardary.length; j++) {
+					if (boardary[j] % mission.number === 0) {
+						hikaku += 1;
+					}
+				}
+				if (hikaku > 3) {
+					for (let i = 0; i < nullinary.length; i++) {
+						matrix[Math.floor(i / mission.number)][i % mission.number] =
+							this.multi(nullinary[i], mission.number);
+					}
+				}
+			}
+			if (mission.type === "prime") {
+				let hikaku = 0;
+				for (let j = 0; j < boardary.length; j++) {
+					if (this.isPrime(boardary[j])) {
+						hikaku += 1;
+					}
+				}
+				if (hikaku > 3) {
+					for (let i = 0; i < nullinary.length; i++) {
+						matrix[Math.floor(i / mission.number)][i % mission.number] =
+							this.isPrime(nullinary[i]);
+					}
+				}
+			}
+		}
+		return matrix;
+	}
+
+	multi(devidedNumber: number | null, devideNumber: number) {
+		if (devidedNumber === null) {
+			return false;
+		} else {
+			return devidedNumber % devideNumber === 0;
+		}
+	}
+
+	isWinner(obary: number[], mission: Mission) {
+		if (!this.state) throw new Error("Game state is not initialized");
+		if (obary.length !== this.state.rules.boardSize) {
+			return false;
+		}
+
+		switch (mission.type) {
+			case "sum":
+				return obary.reduce((acc, val) => acc + val, 0) === mission.number;
+			case "multipile":
+				return obary.every((val) => val % mission.number === 0);
+			case "arithmetic":
+				return obary
+					.toSorted((a, b) => a - b)
+					.slice(1)
+					.every((val, i) => val - obary[i] === mission.number);
+			case "geometric":
+				return obary
+					.toSorted((a, b) => a - b)
+					.slice(1)
+					.every((val, i) => val === obary[i] * mission.number);
+			case "prime":
+				return obary.every((val) => this.isPrime(val));
+			default:
+				return false;
+		}
+	}
+
+	isPrime(number: number | null) {
+		if (number === null) {
+			return false;
+		}
+		const primeNumber = [
+			2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67,
+			71, 73, 79, 83, 89, 97,
+		];
+		for (let z = 0; z < primeNumber.length; z++) {
+			if (number === primeNumber[z]) {
+				return true;
+			} else if (number < primeNumber[z]) {
+				return false;
+			}
+		}
+		return false;
+	}
+}
diff --git a/apps/backend/wrangler.jsonc b/apps/backend/wrangler.jsonc
index 1f6ce5a..7ad3468 100644
--- a/apps/backend/wrangler.jsonc
+++ b/apps/backend/wrangler.jsonc
@@ -9,6 +9,10 @@
 			{
 				"name": "MAGIC",
 				"class_name": "Magic"
+			},
+			{
+				"name": "MEMORY",
+				"class_name": "Memory"
 			}
 		]
 	},
@@ -16,6 +20,10 @@
 		{
 			"tag": "v1",
 			"new_sqlite_classes": ["Magic"]
+		},
+		{
+			"tag": "v2",
+			"new_sqlite_classes": ["Memory"]
 		}
 	]
 }
diff --git a/apps/frontend/app/routes.ts b/apps/frontend/app/routes.ts
index 3b154c8..d02d18c 100644
--- a/apps/frontend/app/routes.ts
+++ b/apps/frontend/app/routes.ts
@@ -11,4 +11,11 @@ export default [
 		route("magic-square", "routes/magic-square/home.tsx"),
 		route("magic-square/room/:roomId", "routes/magic-square/room.$roomId.tsx"),
 	]),
+	layout("routes/memory-optimization/layout.tsx", [
+		route("memory-optimization", "routes/memory-optimization/home.tsx"),
+		route(
+			"memory-optimization/room/:roomId",
+			"routes/memory-optimization/room.$roomId.tsx",
+		),
+	]),
 ] satisfies RouteConfig;
diff --git a/apps/frontend/app/routes/home.tsx b/apps/frontend/app/routes/home.tsx
index eb605e0..f27db01 100644
--- a/apps/frontend/app/routes/home.tsx
+++ b/apps/frontend/app/routes/home.tsx
@@ -4,8 +4,8 @@ export default function Home() {
 			<div className="hero-content text-center">
 				<div className="max-w-md">
 					<h1 className="text-5xl font-bold mb-8">ゲームポータル</h1>
-					<div className="card w-96 bg-base-100 shadow-xl">
-						<div className="card-body">
+					<div className="card w-96  gap-5">
+						<div className="card-body bg-base-100 shadow-xl rounded-xl">
 							<h2 className="card-title">魔法陣</h2>
 							<p>魔法陣を模したゲームです。</p>
 							<div className="card-actions justify-end">
@@ -14,6 +14,15 @@ export default function Home() {
 								</a>
 							</div>
 						</div>
+						<div className="card-body bg-base-100 shadow-xl rounded-xl">
+							<h2 className="card-title">メモリ最適化</h2>
+							<p>メモリ最適化をテーマにしたゲームです。</p>
+							<div className="card-actions justify-end">
+								<a href="/memory-optimization" className="btn btn-primary">
+									開始する
+								</a>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/apps/frontend/app/routes/magic-square/home.tsx b/apps/frontend/app/routes/magic-square/home.tsx
index 701af42..d00c3b5 100644
--- a/apps/frontend/app/routes/magic-square/home.tsx
+++ b/apps/frontend/app/routes/magic-square/home.tsx
@@ -76,7 +76,7 @@ export default function Lobby() {
 		const roomName =
 			newRoomName || `room-${Math.floor(Math.random() * 100000)}`;
 		const res = await client.rooms.create.$post({
-			json: { name: roomName },
+			json: { name: roomName, gameTitle: "magic-square" },
 		});
 		if (res.ok) {
 			const newRoom = await res.json();
diff --git a/apps/frontend/app/routes/memory-optimization/home.tsx b/apps/frontend/app/routes/memory-optimization/home.tsx
new file mode 100644
index 0000000..1aefac9
--- /dev/null
+++ b/apps/frontend/app/routes/memory-optimization/home.tsx
@@ -0,0 +1,324 @@
+// TODO: Componentにして再利用
+
+import type { User } from "@apps/backend";
+import { useEffect, useState } from "react";
+import { useLoaderData, useNavigate } from "react-router";
+import { client } from "~/lib/client";
+import { IS_DEV } from "~/lib/env";
+
+type Room = {
+	id: string;
+	name: string;
+	users: string[];
+};
+
+export async function clientLoader() {
+	try {
+		const res = await client.users.me.$get({});
+
+		if (!res.ok) throw new Error("Failed to fetch user.", { cause: res });
+		const user = await res.json();
+		const createdAt = user.createdAt ? new Date(user.createdAt) : null;
+
+		return { ...user, createdAt };
+	} catch (e) {
+		console.error(e);
+		return null;
+	}
+}
+
+export default function Lobby() {
+	const me = useLoaderData<typeof clientLoader>();
+	const [user, setUser] = useState<User | null>(me ?? null);
+	const [rooms, setRooms] = useState<Room[]>([]);
+	const [userName, setUserName] = useState(user?.name ?? "");
+	const [newUserName, setNewUserName] = useState("");
+	const [newRoomName, setNewRoomName] = useState("");
+	const [joinRoomSecret, setJoinRoomSecret] = useState("");
+	const [joinError, setJoinError] = useState<string | null>(null);
+	const navigate = useNavigate();
+	const [step, setStep] = useState(0);
+	const [isEditingName, setIsEditingName] = useState(false);
+
+	const instructions = [
+		"盤上に数字を置いていき、自分のミッションを誰よりも早く達成することを狙うゲームです。",
+		"自分の番になったら、手札から数字を選び、次に「+」(加算)、「-」(減算)のいずれかを選びます。(パスも可)",
+		"盤上のマス目を選択すると、選んだカードの数字が加算/減算され、ターンが終了します。",
+		"制限時間を過ぎると強制的にパスになるので注意！",
+	];
+
+	useEffect(() => {
+		if (!IS_DEV) return;
+		const fetchRooms = async () => {
+			const res = await client.rooms.$get();
+			if (res.ok) {
+				const data = await res.json();
+				setRooms(data);
+			}
+		};
+		fetchRooms();
+	}, []);
+
+	useEffect(() => {
+		if (user) return;
+		const newUserName = `player-${Math.floor(Math.random() * 100000)}`;
+		const handleCreateUser = async () => {
+			const res = await client.users.create.$post({
+				json: { name: newUserName },
+			});
+			const data = await res.json();
+			const createdAt = data.createdAt ? new Date(data.createdAt) : null;
+			setUser({ ...data, createdAt });
+			setUserName(data.name);
+		};
+		handleCreateUser();
+	}, [user]);
+
+	const handleCreateRoom = async () => {
+		const roomName =
+			newRoomName || `room-${Math.floor(Math.random() * 100000)}`;
+		const res = await client.rooms.create.$post({
+			json: { name: roomName, gameTitle: "magic-square" },
+		});
+		if (res.ok) {
+			const newRoom = await res.json();
+			navigate(`/magic-square/room/${newRoom.id}`);
+		}
+	};
+
+	const handleChangeName = async () => {
+		if (!newUserName) return;
+		setUserName(newUserName);
+		try {
+			const res = await client.users.me.$patch({
+				json: { newName: newUserName },
+			});
+			if (res.ok) {
+				const data = await res.json();
+				const createdAt = data.createdAt ? new Date(data.createdAt) : null;
+				setUser({ ...data, createdAt });
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	const handleJoinRoom = async (roomId: string) => {
+		try {
+			const res = await client.rooms[":roomId"].join.$post({
+				param: { roomId },
+			});
+			if (res.ok) {
+				navigate(`/magic-square/room/${roomId}`);
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	const handleJoinWithSecret = async () => {
+		if (!joinRoomSecret) return;
+		setJoinError(null);
+		try {
+			const res = await client.rooms.join.$post({
+				json: { secret: joinRoomSecret },
+			});
+			if (res.ok) {
+				const data = await res.json();
+				navigate(`/magic-square/room/${data.id}`);
+			} else {
+				setJoinError("Failed to join room");
+			}
+		} catch (e) {
+			console.error(e);
+		}
+	};
+
+	if (!user) return null;
+
+	return (
+		<div className="p-8">
+			<h1 className="text-3xl font-bold mb-4">Lobby</h1>
+			{isEditingName ? (
+				<form
+					className="flex items-center gap-2 mb-8"
+					onSubmit={(e) => {
+						e.preventDefault();
+						handleChangeName();
+						setIsEditingName(false);
+					}}
+				>
+					<input
+						type="text"
+						placeholder="New name"
+						className="input input-bordered w-full max-w-xs"
+						value={newUserName}
+						onChange={(e) => setNewUserName(e.target.value)}
+						required
+					/>
+					<button className="btn btn-primary" type="submit">
+						Save
+					</button>
+				</form>
+			) : (
+				<div className="mb-8 flex gap-4 items-center">
+					<p className="mb-2">Welcome, {userName}!</p>
+					<button
+						className="btn btn-sm btn-outline"
+						onClick={() => setIsEditingName(true)}
+						type="button"
+					>
+						Change Name
+					</button>
+				</div>
+			)}
+
+			<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+				<div className="space-y-8">
+					<div>
+						<h2 className="text-2xl font-bold mb-4">Create a Room</h2>
+						<div className="card bg-base-100 shadow-xl">
+							<form
+								className="card-body"
+								onSubmit={(e) => {
+									e.preventDefault();
+									handleCreateRoom();
+								}}
+							>
+								<input
+									type="text"
+									placeholder="Room name (optional)"
+									className="input input-bordered w-full"
+									value={newRoomName}
+									onChange={(e) => setNewRoomName(e.target.value)}
+								/>
+								<div className="card-actions justify-end mt-4">
+									<button className="btn btn-primary" type="submit">
+										Create Room
+									</button>
+								</div>
+							</form>
+						</div>
+					</div>
+					<div>
+						<h2 className="text-2xl font-bold mb-4">Join a Room</h2>
+						<div className="card bg-base-100 shadow-xl">
+							<form
+								className="card-body"
+								onSubmit={(e) => {
+									e.preventDefault();
+									handleJoinWithSecret();
+								}}
+							>
+								{joinError && (
+									<div className="alert alert-error shadow-lg mb-4">
+										<div>
+											<span>{joinError}</span>
+										</div>
+									</div>
+								)}
+								<input
+									type="text"
+									placeholder="Enter secret code"
+									className="input input-bordered w-full"
+									value={joinRoomSecret}
+									onChange={(e) => setJoinRoomSecret(e.target.value)}
+									required
+								/>
+								<div className="card-actions justify-end mt-4">
+									<button className="btn btn-secondary" type="submit">
+										Join Room
+									</button>
+								</div>
+							</form>
+						</div>
+					</div>
+				</div>
+				<button
+					type="submit"
+					className="btn btn-primary"
+					onClick={() => {
+						setStep(0);
+						(
+							document.getElementById("my_modal_4") as HTMLDialogElement
+						).showModal();
+					}}
+				>
+					How to play
+				</button>
+				<dialog id="my_modal_4" className="modal">
+					<div className="modal-box flex h-5/6 w-4/5 max-w-5xl flex-col">
+						<form method="dialog">
+							<button
+								type="submit"
+								className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+							>
+								✕
+							</button>
+						</form>
+						<h3 className="font-bold text-lg">
+							How to play ({step + 1} / {instructions.length})
+						</h3>
+						<img
+							src="/how-to-play.jpeg"
+							className="w-7/8 object-contain m-auto h-2/3"
+							alt={`How to play - step ${step + 1}`}
+						/>
+						<div className="flex-1 overflow-y-auto py-4">
+							<p>{instructions[step]}</p>
+						</div>
+						<div className="modal-action justify-between mt-4">
+							<button
+								type="submit"
+								className="btn"
+								onClick={() => setStep(step - 1)}
+								disabled={step === 0}
+							>
+								{"< Back"}
+							</button>
+							{step < instructions.length - 1 ? (
+								<button
+									type="submit"
+									className="btn btn-primary"
+									onClick={() => setStep(step + 1)}
+								>
+									{"Next >"}
+								</button>
+							) : (
+								<form method="dialog">
+									<button type="submit" className="btn btn-secondary">
+										✕ Close
+									</button>
+								</form>
+							)}
+						</div>
+					</div>
+				</dialog>
+				{IS_DEV && (
+					<div>
+						<h2 className="text-2xl font-bold mb-4">Available Rooms (Debug)</h2>
+						<div className="space-y-4">
+							{rooms.map((room) => (
+								<div key={room.id} className="card bg-base-100 shadow-md">
+									<div className="card-body">
+										<h3 className="text-xl">{room.name}</h3>
+										<p>{room.users.length} players</p>
+										<div className="card-actions justify-end">
+											<button
+												className="btn btn-secondary"
+												type="button"
+												onClick={() => handleJoinRoom(room.id)}
+											>
+												Join without Secret
+											</button>
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/apps/frontend/app/routes/memory-optimization/layout.tsx b/apps/frontend/app/routes/memory-optimization/layout.tsx
new file mode 100644
index 0000000..8c8ca40
--- /dev/null
+++ b/apps/frontend/app/routes/memory-optimization/layout.tsx
@@ -0,0 +1,13 @@
+import { Outlet } from "react-router";
+
+export function HydrateFallback() {
+	return (
+		<div className="flex items-center justify-center min-h-screen">
+			<div className="loading loading-spinner loading-lg" />
+		</div>
+	);
+}
+
+export default function LogicPuzzleLayout() {
+	return <Outlet />;
+}
diff --git a/apps/frontend/app/routes/memory-optimization/room.$roomId.tsx b/apps/frontend/app/routes/memory-optimization/room.$roomId.tsx
new file mode 100644
index 0000000..c02499f
--- /dev/null
+++ b/apps/frontend/app/routes/memory-optimization/room.$roomId.tsx
@@ -0,0 +1,873 @@
+/** biome-ignore-all lint/a11y/noStaticElementInteractions: TODO */
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: TODO */
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: TODO */
+import type { GameState, MessageType, Operation, Rule } from "@apps/backend";
+import { useEffect, useRef, useState } from "react";
+import {
+	type ClientLoaderFunctionArgs,
+	redirect,
+	useLoaderData,
+	useNavigate,
+	useParams,
+} from "react-router";
+import { client } from "~/lib/client";
+
+export async function clientLoader({ params }: ClientLoaderFunctionArgs) {
+	const roomId = params.roomId;
+	if (!roomId) throw new Error("Room ID is required");
+
+	const [userRes, roomRes, roomSecretRes] = await Promise.all([
+		client.users.me.$get(),
+		client.rooms[":roomId"].$get({ param: { roomId } }),
+		client.rooms[":roomId"].secret.$get({
+			param: { roomId },
+		}),
+	]);
+
+	if (!userRes.ok || !roomRes.ok || !roomSecretRes.ok) {
+		return redirect("/magic-square");
+	}
+
+	const user = await userRes.json();
+	const roomData = await roomRes.json();
+	const roomSecretData = await roomSecretRes.json();
+
+	const createdAt = user.createdAt ? new Date(user.createdAt) : null;
+
+	if (!roomData.users.includes(user.id)) {
+		return redirect("/magic-square");
+	}
+
+	return {
+		user: { ...user, createdAt },
+		secret: roomSecretData.secret,
+		hostId: roomData.hostId,
+	};
+}
+
+// --- Game Components ---
+
+function GameBoard({
+	board,
+	onCellClick,
+}: {
+	board: (number | null)[][];
+	onCellClick: (x: number, y: number) => void;
+}) {
+	return (
+		<div
+			className="aspect-square bg-base-300 grid gap-2 p-2 rounded-lg shadow-inner max-w-2xs mx-auto"
+			style={{ gridTemplateColumns: `repeat(${board.length}, 1fr)` }}
+		>
+			{board.map((row, y) =>
+				row.map((cell, x) => (
+					<div
+						key={`${x}-${y}`}
+						className="aspect-square bg-base-100 rounded flex items-center justify-center text-6xl font-bold cursor-pointer hover:bg-primary hover:text-primary-content transition-colors duration-150"
+						onClick={() => onCellClick(x, y)}
+					>
+						{cell}
+					</div>
+				)),
+			)}
+		</div>
+	);
+}
+
+function FinalGameBoard({
+	board,
+	winnerary,
+}: {
+	board: (number | null)[][];
+	winnerary: (true | false)[][];
+}) {
+	return (
+		<div
+			className="aspect-square bg-base-300 grid gap-2 p-2 rounded-lg shadow-inner"
+			style={{ gridTemplateColumns: `repeat(${board.length}, 1fr)` }}
+		>
+			{board.map((row, y) =>
+				row.map((cell, x) =>
+					winnerary[y][x] === true ? (
+						<div
+							key={`${x}-${y}`}
+							className="aspect-square bg-yellow-500 rounded flex items-center justify-center text-6xl font-bold cursor-pointer transition-colors duration-150"
+						>
+							{cell}
+						</div>
+					) : (
+						<div
+							key={`${x}-${y}`}
+							className="aspect-square bg-base-100 rounded flex items-center justify-center text-6xl font-bold cursor-pointer transition-colors duration-150"
+						>
+							{cell}
+						</div>
+					),
+				),
+			)}
+		</div>
+	);
+}
+
+function Hand({
+	cards,
+	onCardClick,
+	selectedNumIndex,
+}: {
+	cards: number[];
+	onCardClick: (i: number) => void;
+	selectedNumIndex: number | null;
+}) {
+	return (
+		<div>
+			<div className="flex gap-2 justify-center p-2 bg-base-200 rounded-lg">
+				{cards.map((card, i) => (
+					<div
+						key={i}
+						className={`card w-16 h-24 ${selectedNumIndex === i ? "bg-accent" : "bg-primary"} text-primary-content shadow-lg flex items-center justify-center cursor-pointer hover:bg-accent transition-colors duration-150`}
+						onClick={() => onCardClick(i)}
+					>
+						<span className="text-4xl font-bold">{card}</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}
+
+function Operations({
+	onOperationClick,
+	selectedOperation,
+}: {
+	onOperationClick: (name: Operation) => void;
+	selectedOperation: Operation;
+}) {
+	return (
+		<div>
+			<div className="flex gap-2 justify-center p-2 bg-base-200 rounded-lg">
+				<div
+					className={`card w-12 h-12 ${selectedOperation === "add" ? "bg-accent" : "bg-primary"} text-primary-content shadow-lg flex items-center justify-center cursor-pointer hover:bg-accent transition-colors duration-150`}
+					onClick={() => onOperationClick("add")}
+				>
+					<span className="text-4xl font-bold">+</span>
+				</div>
+				<div
+					className={`card w-12 h-12 ${selectedOperation === "sub" ? "bg-accent" : "bg-primary"} text-primary-content shadow-lg flex items-center justify-center cursor-pointer hover:bg-accent transition-colors duration-150`}
+					onClick={() => onOperationClick("sub")}
+				>
+					<span className="text-4xl font-bold">-</span>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function Mission({
+	title,
+	description,
+}: {
+	title: string;
+	description: string;
+}) {
+	return (
+		<span className="card bg-secondary text-secondary-content shadow-md">
+			<div className="card-body items-center text-center p-2">
+				<h2 className="card-title text-sm">{title}</h2>
+				<p>{description}</p>
+			</div>
+		</span>
+	);
+}
+
+// --- Main Page Component ---
+
+function TurnDisplay({
+	round,
+	currentPlayerId,
+	currentPlayerName,
+	myId,
+	remainingTime,
+}: {
+	round: number;
+	currentPlayerId: string;
+	currentPlayerName: string;
+	myId: string;
+	remainingTime: number;
+}) {
+	const isMyTurn = currentPlayerId === myId;
+
+	return (
+		<div className="grid grid-cols-3 items-center text-center p-2 rounded-lg bg-base-200">
+			<div>
+				<p className="text-sm font-bold">Round</p>
+				<p className="text-2xl font-bold">{round + 1}</p>
+			</div>
+			<div
+				className={`text-lg font-bold p-2 rounded-md transition-all ${isMyTurn ? "bg-primary text-primary-content animate-pulse" : "bg-base-100"} h-12 flex items-center justify-center`}
+			>
+				{isMyTurn ? "Your Turn" : `${currentPlayerName}'s Turn`}
+			</div>
+			<div>
+				<p className="text-sm font-bold">Time</p>
+				<p className="text-2xl font-bold">
+					{remainingTime >= 500 ? "∞" : remainingTime}
+				</p>
+			</div>
+		</div>
+	);
+}
+
+export default function RoomPage() {
+	const {
+		user,
+		secret: roomSecret,
+		hostId: roomHost,
+	} = useLoaderData<typeof clientLoader>();
+
+	const { roomId } = useParams();
+	const navigate = useNavigate();
+
+	const [gameState, setGameState] = useState<GameState | null>(null);
+	const myStatus = user?.id
+		? (gameState?.playerStatus[user?.id] ?? null)
+		: null;
+	const ws = useRef<WebSocket | null>(null);
+
+	const activePlayerIds = user
+		? (gameState?.players.filter(
+				(p) => gameState?.playerStatus[p] === "playing",
+			) ?? null)
+		: null;
+	const opponentIds = user
+		? (activePlayerIds?.filter((p) => p !== user.id) ?? null)
+		: null;
+	const currentPlayerId = gameState?.players[gameState.turn] ?? null;
+
+	const [selectedNumIndex, setSelectedNumIndex] = useState<number | null>(null);
+	const [selectedOperation, setSelectedOperation] = useState<Operation>("add");
+
+	const [winnerDisplay, setWinnerDisplay] = useState(0);
+	const [remainingTime, setRemainingTime] = useState(0);
+	const [spectatedPlayerId, setSpectatedPlayerId] = useState<string | null>(
+		null,
+	);
+
+	// WebSocket connection effect
+	useEffect(() => {
+		if (!roomId || !user?.id || !user?.name) return;
+
+		const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
+
+		const host = window.location.hostname;
+		const port = window.location.port;
+		const fullHost =
+			host === "localhost" && port === "5173"
+				? "localhost:8787"
+				: port
+					? `${host}:${port}`
+					: host;
+		const prefix = host === "localhost" && port === "5173" ? "" : "/api";
+
+		const wsUrl = `${proto}//${fullHost}${prefix}/games/${roomId}/ws?playerId=${user.id}&playerName=${user.name}`;
+
+		const socket = new WebSocket(wsUrl);
+		ws.current = socket;
+
+		socket.onopen = () => {
+			console.log("[WS] Connected to server.");
+		};
+		socket.onclose = () => {
+			console.log("[WS] Disconnected from server.");
+		};
+		socket.onerror = (err) => console.error("[WS] WebSocket error:", err);
+
+		socket.onmessage = (event) => {
+			console.log("[WS] Message from server:", event.data);
+			const message = JSON.parse(event.data);
+			if (message.type === "state") {
+				setGameState(message.payload);
+				console.log(message.payload);
+			}
+			if (message.error) {
+				console.error("[WS] Server error:", message.error);
+			}
+		};
+
+		return () => socket.close();
+	}, [roomId, user.id, user.name]);
+
+	useEffect(() => {
+		if (gameState?.timeLimitUnix) {
+			const interval = setInterval(() => {
+				const remaining = gameState.timeLimitUnix - Date.now();
+				setRemainingTime(remaining > 0 ? remaining : 0);
+			}, 1000);
+			// Set initial time
+			const remaining = gameState.timeLimitUnix - Date.now();
+			setRemainingTime(remaining > 0 ? remaining : 0);
+			return () => clearInterval(interval);
+		}
+	}, [gameState?.timeLimitUnix]);
+
+	function sendWsMessage({ type, payload }: MessageType): void {
+		if (ws.current?.readyState === WebSocket.OPEN) {
+			const message = JSON.stringify({ type, payload });
+			console.log("[WS] Sending message:", message);
+			ws.current.send(message);
+		}
+	}
+	const handleCellClick = (x: number, y: number) => {
+		if (!gameState || !user || !user.id || selectedNumIndex === null) return;
+		sendWsMessage({
+			type: "makeMove",
+			payload: {
+				x,
+				y,
+				operation: selectedOperation,
+				num: gameState.hands[user.id][selectedNumIndex],
+				numIndex: selectedNumIndex,
+			},
+		});
+		setSelectedNumIndex(null);
+		setSelectedOperation("add");
+	};
+
+	const handleWinnersPlusClick = () => {
+		setWinnerDisplay(winnerDisplay + 1);
+	};
+
+	const handleWinnersMinusClick = () => {
+		setWinnerDisplay(winnerDisplay - 1);
+	};
+
+	const handleReadyClick = () => {
+		if (myStatus === "ready") {
+			sendWsMessage({ type: "cancelReady" });
+		} else {
+			sendWsMessage({ type: "setReady" });
+		}
+	};
+
+	const handleRuleChange = (rule: Rule) => {
+		sendWsMessage({
+			type: "changeRule",
+			payload: rule,
+		});
+	};
+
+	const handleBackToLobby = () => {
+		sendWsMessage({ type: "backToLobby" });
+	};
+
+	const handleLeaveRoom = async () => {
+		sendWsMessage({ type: "removePlayer" });
+		if (roomId) {
+			await client.rooms[":roomId"].leave.$post({ param: { roomId } });
+		}
+		navigate("/magic-square");
+	};
+
+	// --- Render Logic ---
+
+	if (!user || !roomId) {
+		return (
+			<div className="p-8 text-center">
+				<h1>Error: Room ID not found.</h1>
+				<p>Please ensure you are accessing a valid room.</p>
+			</div>
+		);
+	}
+
+	if (!gameState) {
+		console.log(
+			"Loading or waiting for game state...",
+			gameState,
+			currentPlayerId,
+		);
+		return (
+			<div className="flex items-center justify-center min-h-screen">
+				<div className="loading loading-spinner loading-lg" />
+			</div>
+		);
+	}
+
+	if (myStatus === "watching") {
+		if (!currentPlayerId) {
+			throw new Error("Current player ID is missing");
+		}
+
+		const playingPlayers = gameState.players.filter(
+			(p) => gameState.playerStatus[p] === "playing",
+		);
+
+		const spectatedPlayer = spectatedPlayerId
+			? {
+					id: spectatedPlayerId,
+					name: gameState.names[spectatedPlayerId],
+					hand: gameState.hands[spectatedPlayerId],
+					mission: gameState.missions[spectatedPlayerId],
+				}
+			: null;
+
+		return (
+			<div className="p-4 md:p-8 flex flex-col gap-4">
+				<h1 className="text-2xl font-bold text-center">Watching Game</h1>
+
+				{/* Player perspective switcher */}
+				<div className="flex justify-center gap-2 p-2 bg-base-200 rounded-lg">
+					<button
+						type="button"
+						className={`btn ${!spectatedPlayerId ? "btn-primary" : ""}`}
+						onClick={() => setSpectatedPlayerId(null)}
+					>
+						Overview
+					</button>
+					{playingPlayers.map((pId) => (
+						<button
+							key={pId}
+							type="button"
+							className={`btn ${spectatedPlayerId === pId ? "btn-primary" : ""}`}
+							onClick={() => setSpectatedPlayerId(pId)}
+						>
+							{gameState.names[pId]}
+						</button>
+					))}
+				</div>
+
+				{/* Opponents' Missions */}
+				<div className="flex justify-center gap-4 mb-4">
+					{spectatedPlayer
+						? // Single player perspective
+							playingPlayers
+								.filter((pId) => pId !== spectatedPlayer.id)
+								.map((opponentId) =>
+									gameState.missions[opponentId] ? (
+										<Mission
+											key={opponentId}
+											title={`${gameState.names[opponentId]}'s mission`}
+											description={
+												gameState.missions[opponentId]?.mission.description
+											}
+										/>
+									) : null,
+								)
+						: null}
+				</div>
+
+				{/* Game Board */}
+				<div className="w-full max-w-md mx-auto">
+					<TurnDisplay
+						round={gameState.round}
+						currentPlayerId={currentPlayerId}
+						currentPlayerName={gameState.names[currentPlayerId]}
+						myId={user.id} // Will never be "Your Turn"
+						remainingTime={Math.ceil(remainingTime / 1000)}
+					/>
+					<GameBoard board={gameState.board} onCellClick={() => {}} />
+				</div>
+
+				{/* Player's Info (Hand and Mission) */}
+				<div className="flex flex-col items-center gap-4 mt-4">
+					{spectatedPlayer ? (
+						<>
+							<Mission
+								title={`${spectatedPlayer.name}'s mission`}
+								description={spectatedPlayer.mission?.mission.description}
+							/>
+							<Hand
+								cards={spectatedPlayer.hand}
+								onCardClick={() => {}}
+								selectedNumIndex={null}
+							/>
+						</>
+					) : (
+						<div>
+							{
+								// Overview perspective
+								playingPlayers.map((playerId) =>
+									gameState.missions[playerId] ? (
+										<div className="flex" key={playerId}>
+											<div className="ml-0">
+												<Mission
+													key={playerId}
+													title={`${gameState.names[playerId]}'s mission`}
+													description={
+														gameState.missions[playerId]?.mission.description
+													}
+												/>
+											</div>
+											<div className="ml-auto">
+												<Hand
+													cards={gameState.hands[playerId]}
+													onCardClick={() => {}}
+													selectedNumIndex={null}
+												/>
+											</div>
+										</div>
+									) : null,
+								)
+							}
+							<div className="text-center mt-4 p-4 bg-base-200 rounded-lg">
+								<h2 className="text-xl font-bold">You are watching</h2>
+								<p>Select a player above to see their perspective.</p>
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		);
+	}
+	if (myStatus === "preparing" || myStatus === "ready") {
+		return (
+			<div className="flex h-screen w-full flex-col items-center justify-center gap-8">
+				<h1 className="text-2xl font-bold">
+					Waiting for players to be ready...
+				</h1>
+				<div className="flex flex-col items-center gap-1 rounded-lg bg-base-200 p-2 shadow-inner">
+					<span className="font-medium">Password</span>
+					<div className="rounded bg-base-300 p-1 text-4xl font-semibold">
+						{roomSecret}
+					</div>
+				</div>
+				<ul className="rounded-lg bg-base-200 p-4 shadow-inner">
+					{gameState.players.map((playerId) => (
+						<li
+							key={playerId}
+							className="flex items-center justify-between gap-4 p-2"
+						>
+							<span className="font-medium">
+								{gameState.names[playerId]}
+								{playerId === roomHost && (
+									<span className="badge badge-primary badge-sm ml-2">
+										Host
+									</span>
+								)}
+							</span>
+							<span
+								className={`rounded-full px-3 py-1 text-sm font-semibold ${
+									gameState.playerStatus[playerId] === "ready"
+										? "bg-green-500 text-white"
+										: gameState.playerStatus[playerId] === "error"
+											? "bg-red-500 text-white"
+											: "bg-gray-300 text-gray-700"
+								}`}
+							>
+								{gameState.playerStatus[playerId] === "ready"
+									? "Ready!"
+									: gameState.playerStatus[playerId] === "error"
+										? "Error"
+										: "Preparing..."}
+							</span>
+						</li>
+					))}
+				</ul>
+				<div className="form-control">
+					<label className="label cursor-pointer">
+						<span className="label-text">Board Size</span>
+						<select
+							className="select select-bordered"
+							value={gameState.rules.boardSize}
+							disabled={user.id !== roomHost}
+							onChange={(e) =>
+								handleRuleChange({
+									rule: "boardSize",
+									state: parseInt(e.target.value, 10),
+								})
+							}
+						>
+							<option value={1}>1x1</option>
+							<option value={2}>2x2</option>
+							<option value={3}>3x3</option>
+							<option value={4}>4x4</option>
+							<option value={5}>5x5</option>
+						</select>
+					</label>
+				</div>
+				<div className="form-control">
+					<label className="label cursor-pointer">
+						<span className="label-text">Disable negative numbers</span>
+						<input
+							type="checkbox"
+							className="toggle toggle-success"
+							checked={gameState.rules.negativeDisabled}
+							disabled={user.id !== roomHost}
+							onChange={(e) =>
+								handleRuleChange({
+									rule: "negativeDisabled",
+									state: e.target.checked,
+								})
+							}
+						/>
+					</label>
+				</div>
+				<div className="form-control">
+					<label className="label cursor-pointer">
+						<span className="label-text">Time Limit</span>
+						<select
+							className="select select-bordered"
+							value={gameState.rules.timeLimit}
+							disabled={user.id !== roomHost}
+							onChange={(e) =>
+								handleRuleChange({
+									rule: "timeLimit",
+									state: parseInt(e.target.value),
+								})
+							}
+						>
+							<option value={5}>5s</option>
+							<option value={10}>10s</option>
+							<option value={20}>20s</option>
+							<option value={30}>30s</option>
+							<option value={60}>1m</option>
+							<option value={90}>1m30s</option>
+							<option value={300}>5m</option>
+							<option value={8999999999999999}>∞</option>
+						</select>
+					</label>
+				</div>
+				<div
+					onClick={handleReadyClick}
+					className={`card w-32 h-20 cursor-pointer items-center justify-center transition-colors duration-150 ${myStatus === "ready" ? "bg-green-500 text-white font-bold" : "bg-base-300 text-grey-700 shadow-lg"}`}
+				>
+					{myStatus === "ready" ? "READY!!" : "ready?"}
+				</div>
+				<div onClick={handleLeaveRoom} className="btn btn-error">
+					Leave Room
+				</div>
+			</div>
+		);
+	}
+
+	if (myStatus === "finished") {
+		if (!gameState.winners || gameState.winners.length === 0) {
+			throw new Error("Winners data is missing");
+		}
+		if (winnerDisplay === 0) {
+			return (
+				<div>
+					<div className="flex justify-center gap-4 mb-12 text-red-500">
+						<h1 className="text-3xl font-bold">GAME SET</h1>
+					</div>
+					{gameState.winners && (
+						<div className="flex justify-center gap-4 mb-12">
+							{gameState.winners.map((winnersId) => (
+								<h1 key={winnersId} className="text-3xl font-bold">
+									{gameState.names[winnersId]}
+								</h1>
+							))}
+							<h1 className="text-3xl font-bold">WIN!!</h1>
+						</div>
+					)}
+					<div className="w-full max-w-md mx-auto">
+						<FinalGameBoard
+							board={gameState.board}
+							winnerary={Array.from({ length: gameState.rules.boardSize }, () =>
+								Array(gameState?.rules.boardSize).fill(false),
+							)}
+						/>
+					</div>
+					<div className="card-actions justify-center mt-4">
+						<button
+							className="btn btn-primary"
+							type="button"
+							onClick={handleWinnersPlusClick}
+						>
+							Next
+						</button>
+					</div>
+				</div>
+			);
+		}
+		if (winnerDisplay === gameState.winners.length) {
+			return (
+				<div>
+					<div className="flex justify-center gap-4 mb-4">
+						<h1 className="text-3xl font-bold">
+							Result {winnerDisplay}/{gameState.winners.length}
+						</h1>
+					</div>
+					<div className="flex justify-center gap-4 mb-4">
+						<Mission
+							key={gameState.winners[winnerDisplay - 1]}
+							title={`${gameState?.names[gameState.winners[winnerDisplay - 1]]}'s mission`}
+							description={
+								gameState.missions[gameState.winners[winnerDisplay - 1]].mission
+									.description
+							}
+						/>
+					</div>
+					<div className="w-full max-w-md mx-auto">
+						<FinalGameBoard
+							board={gameState.board}
+							winnerary={
+								gameState.winnersAry[gameState.winners[winnerDisplay - 1]]
+							}
+						/>
+					</div>
+					<div className="card-actions mt-4  justify-center">
+						<button
+							className="btn btn-primary"
+							type="button"
+							onClick={handleWinnersMinusClick}
+						>
+							Back
+						</button>
+						<button
+							className="btn btn-primary"
+							onClick={handleBackToLobby}
+							type="button"
+						>
+							to Lobby
+						</button>
+					</div>
+				</div>
+			);
+		}
+		return (
+			<div>
+				<div className="flex justify-center gap-4 mb-4">
+					<h1 className="text-3xl font-bold">
+						Result {winnerDisplay}/{gameState.winners.length}
+					</h1>
+				</div>
+				<div className="flex justify-center gap-4 mb-4">
+					<Mission
+						key={gameState.winners[winnerDisplay - 1]}
+						title={`${gameState.names[gameState.winners[winnerDisplay - 1]]}'s mission`}
+						description={
+							gameState.missions[gameState.winners[winnerDisplay - 1]].mission
+								.description
+						}
+					/>
+				</div>
+				<div className="w-full max-w-md mx-auto">
+					<FinalGameBoard
+						board={gameState.board}
+						winnerary={
+							gameState.winnersAry[gameState.winners[winnerDisplay - 1]]
+						}
+					/>
+				</div>
+				<div className="card-actions justify-center mt-4">
+					<button
+						className="btn btn-primary"
+						type="button"
+						onClick={handleWinnersMinusClick}
+					>
+						Back
+					</button>
+					<button
+						className="btn btn-primary"
+						type="button"
+						onClick={handleWinnersPlusClick}
+					>
+						Next
+					</button>
+				</div>
+			</div>
+		);
+	}
+
+	if (myStatus === "playing") {
+		if (!currentPlayerId) {
+			throw new Error("Current player ID is missing");
+		}
+		return (
+			<div className="p-4 md:p-8 flex flex-col gap-4">
+				<div className="font-semibold">Password:{roomSecret}</div>
+				{/* Opponent's Info */}
+				{opponentIds && (
+					<div className="flex justify-center gap-4 mb-4">
+						{opponentIds.map((opponentId) => (
+							<Mission
+								key={opponentId}
+								title={`${gameState?.names[opponentId]}'s mission`}
+								description={
+									gameState?.missions[opponentId]?.mission.description
+								}
+							/>
+						))}
+					</div>
+				)}
+				{/* Game Board */}
+				<div className="w-full max-w-md mx-auto">
+					<TurnDisplay
+						round={gameState.round}
+						currentPlayerId={currentPlayerId}
+						currentPlayerName={gameState.names[currentPlayerId]}
+						myId={user.id}
+						remainingTime={Math.ceil(remainingTime / 1000)}
+					/>
+					<GameBoard board={gameState.board} onCellClick={handleCellClick} />
+				</div>
+				{/* Player's Info */}
+				<div className="flex flex-col items-center gap-4 mt-4">
+					{gameState.missions[user.id] && (
+						<Mission
+							title={"your mission"}
+							description={gameState?.missions[user.id]?.mission.description}
+						/>
+					)}
+					<div className="flex flex-row items-end gap-4">
+						{gameState.hands[user.id] && (
+							<Hand
+								cards={gameState.hands[user.id]}
+								onCardClick={setSelectedNumIndex}
+								selectedNumIndex={selectedNumIndex}
+							/>
+						)}
+						<div className="flex flex-col items-center gap-2"></div>
+						<Operations
+							onOperationClick={setSelectedOperation}
+							selectedOperation={selectedOperation}
+						/>
+						<button
+							type="button"
+							disabled={currentPlayerId !== user.id}
+							className="btn btn-primary hover:btn-accent"
+							onClick={() => {
+								sendWsMessage({ type: "pass" });
+							}}
+						>
+							PASS
+						</button>
+					</div>
+				</div>
+				{gameState.status === "paused" && (
+					<div className="p-4 text-center bg-base-200 rounded-lg shadow">
+						<h2 className="text-xl font-bold">Connection lost</h2>
+						<p>
+							Someone else has lost connection. Please wait while we try to
+							reconnect…
+						</p>
+					</div>
+				)}
+			</div>
+		);
+	}
+
+	if (myStatus === "error") {
+		return (
+			<div className="p-8 text-center">
+				<h1 className="text-3xl font-bold text-red-500">Error</h1>
+				<p className="mt-4">
+					An error occurred in the game. Please try again later.
+				</p>
+				<a href="/magic-square" className="btn btn-primary mt-4">
+					Go back
+				</a>
+			</div>
+		);
+	}
+
+	if (myStatus === null && !(user.id in gameState.players)) {
+		console.log("leaved");
+		return (
+			<div className="flex items-center justify-center min-h-screen">
+				<div className="loading loading-spinner loading-lg" />
+			</div>
+		);
+	}
+
+	throw new Error(`Unknown player status: ${myStatus}`);
+}
diff --git a/package.json b/package.json
index 1b67119..b4f0b75 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
 		"dev": "bun run --filter='@apps/{frontend,backend}' dev",
 		"dev:frontend": "cd ./apps/frontend && bun run dev",
 		"dev:backend": "cd ./apps/backend && bun run dev",
-		"db": "cd ./apps/backend && bun run db",
+		"db:push": "cd ./apps/backend && bun run db:push",
 		"fix": "bunx --bun biome check --write .",
 		"fix:format": "bunx --bun biome format --write .",
 		"fix:lint": "bunx --bun biome lint --write .",