diff --git a/client/app/components/GameModeSelector.tsx b/client/app/components/GameModeSelector.tsx
new file mode 100644
index 0000000..f494c74
--- /dev/null
+++ b/client/app/components/GameModeSelector.tsx
@@ -0,0 +1,85 @@
+import { GAME_MODES, GAME_MODE_INFO, GAME_SETUP, type GameMode } from '../constants';
+
+interface GameModeSelectorProps {
+  selected: GameMode;
+  onChange: (mode: GameMode) => void;
+  disabled?: boolean;
+  compact?: boolean;
+}
+
+export function GameModeSelector({ selected, onChange, disabled, compact }: GameModeSelectorProps) {
+  const modes = disabled ? [selected] : Array.from(GAME_MODES);
+
+  if (compact) {
+    return (
+      <div className='grid grid-cols-2 gap-2'>
+        {modes.map((m) => {
+          const info = GAME_MODE_INFO[m];
+          const isActive = selected === m;
+          return (
+            <button
+              key={m}
+              type='button'
+              disabled={disabled}
+              onClick={() => onChange(m)}
+              className={`relative rounded-lg p-2.5 text-left transition-all border ${
+                isActive
+                  ? `${info.accentBg} ${info.accentBorder} ring-1 ring-offset-0 ring-current ${info.accentColor}`
+                  : 'bg-gray-800 border-gray-600 hover:border-gray-500'
+              } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+            >
+              <div className='flex items-center gap-2 mb-1'>
+                <span className='text-base'>{info.icon}</span>
+                <span className={`text-sm font-semibold ${isActive ? info.accentColor : 'text-white'}`}>
+                  {info.label}
+                </span>
+              </div>
+              <div className='text-[10px] text-gray-400'>{info.boardLabel}</div>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className='grid grid-cols-1 gap-2'>
+      {modes.map((m) => {
+        const info = GAME_MODE_INFO[m];
+        const setup = GAME_SETUP[m];
+        const isActive = selected === m;
+        const pieceCount = Object.keys(setup.tetrominos).length;
+
+        return (
+          <button
+            key={m}
+            type='button'
+            disabled={disabled}
+            onClick={() => onChange(m)}
+            className={`relative rounded-lg p-3 text-left transition-all border ${
+              isActive
+                ? `${info.accentBg} ${info.accentBorder} ring-1 ring-offset-0 ring-current ${info.accentColor}`
+                : 'bg-gray-800 border-gray-600 hover:border-gray-500 hover:bg-gray-800/80'
+            } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+          >
+            <div className='flex items-start gap-3'>
+              <span className='text-2xl mt-0.5'>{info.icon}</span>
+              <div className='flex-1 min-w-0'>
+                <div className='flex items-center justify-between mb-1'>
+                  <span className={`text-sm font-bold ${isActive ? info.accentColor : 'text-white'}`}>
+                    {info.label}
+                  </span>
+                  <div className='flex items-center gap-2 text-[10px] text-gray-500'>
+                    <span className='bg-gray-700/60 px-1.5 py-0.5 rounded'>{info.boardLabel}</span>
+                    <span className='bg-gray-700/60 px-1.5 py-0.5 rounded'>{pieceCount} pcs</span>
+                  </div>
+                </div>
+                <p className='text-xs text-gray-400 leading-relaxed'>{info.description}</p>
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/client/app/constants/index.ts b/client/app/constants/index.ts
new file mode 100644
index 0000000..65afcc0
--- /dev/null
+++ b/client/app/constants/index.ts
@@ -0,0 +1,78 @@
+import { CLASSIC_TETROMINOS, CYBER_TETROMINOS, PENTOMINOES } from './tetrominos';
+
+const STANDARD_FIRST_SPEED = 20;
+const BSP_SCORES: Record<number, number> = { 0: 0, 1: 40, 2: 100, 3: 300, 4: 1200, 5: 5000 };
+const TICK_INTERVAL_MS = 50;
+
+const GAME_MODES = ['classic', 'narrow', 'pentominoes', 'cyber'] as const;
+type GameMode = (typeof GAME_MODES)[number];
+
+interface GAME_SETUP_ENTRY {
+  tetrominos: Record<string, number[][][]>;
+  width: number;
+  height: number;
+}
+
+const GAME_SETUP: Record<GameMode, GAME_SETUP_ENTRY> = {
+  classic: { tetrominos: CLASSIC_TETROMINOS, width: 10, height: 20 },
+  narrow: { tetrominos: CLASSIC_TETROMINOS, width: 6, height: 22 },
+  pentominoes: { tetrominos: PENTOMINOES, width: 12, height: 22 },
+  cyber: { tetrominos: CYBER_TETROMINOS, width: 8, height: 18 },
+};
+
+interface GameModeInfo {
+  label: string;
+  description: string;
+  icon: string;
+  accentColor: string;
+  accentBg: string;
+  accentBorder: string;
+  boardLabel: string;
+  piecesLabel: string;
+}
+
+const GAME_MODE_INFO: Record<GameMode, GameModeInfo> = {
+  classic: {
+    label: 'Classic',
+    description: 'The original Tetris experience with standard pieces and a 10×20 board.',
+    icon: '',
+    accentColor: 'text-blue-400',
+    accentBg: 'bg-blue-500/15',
+    accentBorder: 'border-blue-500/40',
+    boardLabel: '10 × 20',
+    piecesLabel: '7 classic tetrominoes',
+  },
+  narrow: {
+    label: 'Narrow',
+    description: 'Classic pieces on a tight 6-wide board. Every move counts!',
+    icon: '',
+    accentColor: 'text-amber-400',
+    accentBg: 'bg-amber-500/15',
+    accentBorder: 'border-amber-500/40',
+    boardLabel: '6 × 22',
+    piecesLabel: '7 classic tetrominoes',
+  },
+  pentominoes: {
+    label: 'Pentominoes',
+    description: 'Five-cell pieces on a wider board. A whole new level of complexity.',
+    icon: '',
+    accentColor: 'text-purple-400',
+    accentBg: 'bg-purple-500/15',
+    accentBorder: 'border-purple-500/40',
+    boardLabel: '12 × 22',
+    piecesLabel: '18 pentomino shapes',
+  },
+  cyber: {
+    label: 'Cyber',
+    description: 'Futuristic custom shapes on a compact board. Expect the unexpected.',
+    icon: '',
+    accentColor: 'text-cyan-400',
+    accentBg: 'bg-cyan-500/15',
+    accentBorder: 'border-cyan-500/40',
+    boardLabel: '8 × 18',
+    piecesLabel: '6 cyber shapes',
+  },
+};
+
+export { BSP_SCORES, GAME_MODES, GAME_MODE_INFO, GAME_SETUP, STANDARD_FIRST_SPEED, TICK_INTERVAL_MS };
+export type { GameMode, GameModeInfo };
diff --git a/client/app/constants/tetrominos.ts b/client/app/constants/tetrominos.ts
new file mode 100644
index 0000000..3b4c5be
--- /dev/null
+++ b/client/app/constants/tetrominos.ts
@@ -0,0 +1,523 @@
+export const CYBER_TETROMINOS: Record<string, number[][][]> = {
+  A: [
+    [
+      [0, 0, 0],
+      [1, 0, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 0, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 0, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 0, 1],
+      [0, 1, 0],
+    ],
+  ],
+  B: [
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+  ],
+  C: [
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [1, 0, 0],
+    ],
+    [
+      [1, 0, 0],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  D: [
+    [
+      [0, 0, 1],
+      [1, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 0, 0],
+    ],
+    [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  E: [
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+  F: [
+    [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 0],
+      [1, 0, 0],
+    ],
+  ],
+};
+
+export const CLASSIC_TETROMINOS: Record<string, number[][][]> = {
+  I: [
+    [
+      [0, 0, 0, 0],
+      [1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [1, 1, 1, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+  O: [
+    [
+      [1, 1],
+      [1, 1],
+    ],
+  ],
+  T: [
+    [
+      [0, 1, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1],
+      [1, 1],
+      [0, 1],
+    ],
+  ],
+  S: [
+    [
+      [0, 1, 1],
+      [1, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 1, 0],
+    ],
+    [
+      [1, 0, 0],
+      [1, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  Z: [
+    [
+      [1, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [1, 1, 0],
+      [1, 0, 0],
+    ],
+  ],
+  J: [
+    [
+      [1, 0, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 1],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [1, 1],
+    ],
+  ],
+  L: [
+    [
+      [0, 0, 1],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [1, 0, 0],
+    ],
+    [
+      [1, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+};
+
+export const PENTOMINOES: Record<string, number[][][]> = {
+  A: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [1, 1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  B: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0],
+      [1, 1, 1, 1, 0],
+    ],
+    [
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 1, 1, 1, 1],
+      [0, 1, 0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  C: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [1, 1, 1, 1, 0],
+      [0, 0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 1, 0, 0, 0],
+      [0, 1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+    ],
+  ],
+  D: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [1, 1, 1, 0],
+    ],
+    [
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1],
+      [0, 1, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  E: [
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [1, 1, 1],
+    ],
+    [
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1],
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  F: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+  ],
+  G: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 1],
+      [0, 1, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 1, 1, 0],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+  ],
+  H: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+    ],
+  ],
+  I: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+    ],
+  ],
+  J: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+    ],
+  ],
+  K: [
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+  ],
+  L: [
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 1],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 1, 1],
+    ],
+  ],
+};
diff --git a/client/app/routes/game.tsx b/client/app/routes/game.tsx
index c4b01fe..a1aa388 100644
--- a/client/app/routes/game.tsx
+++ b/client/app/routes/game.tsx
@@ -1,16 +1,20 @@
 import { useEffect, useMemo, useRef, useState, type JSX } from 'react';
 import { Link } from 'react-router';
 import { io } from 'socket.io-client';
-import type { Route } from './+types/game';
 import { ProtectedRoute } from '../components/auth/ProtectedRoute';
+import { GameModeSelector } from '../components/GameModeSelector';
 import { LoadingOverlay } from '../components/LoadingOverlay';
+import { GAME_MODE_INFO, GAME_MODES, GAME_SETUP, type GameMode } from '../constants';
 import { authService } from '../services/auth';
 import type { GameState, PlayerState, Socket } from '../types/socket';
+import type { Route } from './+types/game';
 
-const WIDTH = 10;
-const HEIGHT = 20;
 const CELL = 28;
 
+// Fixed dimensions based on the widest/tallest mode so layout doesn't shift when switching modes
+const MAX_WIDTH = Math.max(...Object.values(GAME_SETUP).map((s) => s.width));
+const MAX_HEIGHT = Math.max(...Object.values(GAME_SETUP).map((s) => s.height));
+
 export function meta({}: Route.MetaArgs) {
   return [
     { title: 'Red Tetris — Play' },
@@ -21,6 +25,7 @@ export function meta({}: Route.MetaArgs) {
 function GameComponent() {
   const [room, setRoom] = useState('');
   const [playerId, setPlayerId] = useState<string | null>(null);
+  const [selectedMode, setSelectedMode] = useState<GameMode>('classic');
   const [state, setState] = useState<GameState | null>(null);
   const [hostId, setHostId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -28,6 +33,10 @@ function GameComponent() {
   const [actionLoading, setActionLoading] = useState(false);
   const socketRef = useRef<Socket | null>(null);
 
+  const setup = GAME_SETUP[selectedMode];
+  const WIDTH = setup.width;
+  const HEIGHT = setup.height;
+
   const computeSpectrumFromBoard = (board: number[][]): number[] => {
     const cols = Array.from({ length: WIDTH }, () => 0);
     for (let x = 0; x < WIDTH; x++) {
@@ -54,15 +63,16 @@ function GameComponent() {
       // connection established
     });
 
-    // server may emit either a raw state object or { state, hostId } historically.
-    s.on('state', (payload: GameState | { state: GameState; hostId?: string }) => {
+    // server sends a flat state object with mode & hostId
+    s.on('state', (payload: GameState) => {
       setActionLoading(false);
-      // normalize payload to `state` object
-      const incoming: GameState = 'state' in payload ? payload.state : payload;
-      setState(incoming);
-      // hostId may be attached at top-level of payload or inside incoming
-      const hid = 'hostId' in payload ? (payload.hostId ?? incoming?.hostId ?? null) : (incoming?.hostId ?? null);
-      setHostId(hid);
+      setState(payload);
+      setHostId(payload.hostId ?? null);
+      // sync selected mode with the room's actual mode
+      const m = payload.mode;
+      if (m && (GAME_MODES as readonly string[]).includes(m)) {
+        setSelectedMode(m as GameMode);
+      }
     });
 
     s.on('joined', async (info: { roomId?: string }) => {
@@ -211,8 +221,8 @@ function GameComponent() {
     if (!s) return;
     if (!s.connected) s.connect();
     setActionLoading(true);
-    // server uses authenticated user for creation
-    s.emit('create');
+    // server uses authenticated user for creation; include selected game mode
+    s.emit('create', { mode: selectedMode });
     setError(null);
   };
 
@@ -366,34 +376,11 @@ function GameComponent() {
   }, [state, playerId]);
 
   // Next-piece shapes (rotation 0) for preview; pad to 4x4 for consistent rendering
-  const PIECE_SHAPES: Record<string, number[][]> = {
-    I: [[1, 1, 1, 1]],
-    O: [
-      [1, 1],
-      [1, 1],
-    ],
-    T: [
-      [0, 1, 0],
-      [1, 1, 1],
-    ],
-    S: [
-      [0, 1, 1],
-      [1, 1, 0],
-    ],
-    Z: [
-      [1, 1, 0],
-      [0, 1, 1],
-    ],
-    J: [
-      [1, 0, 0],
-      [1, 1, 1],
-    ],
-    L: [
-      [0, 0, 1],
-      [1, 1, 1],
-    ],
-  };
-  const PIECE_COLORS: Record<string, string> = {
+  // derive shapes/colors from selected mode's tetrominos when possible
+  const tetrominos = setup.tetrominos;
+  const pieceKeys = Object.keys(tetrominos);
+
+  const baseClassicColors: Record<string, string> = {
     I: '#0d9488',
     O: '#ca8a04',
     T: '#9333ea',
@@ -403,15 +390,20 @@ function GameComponent() {
     L: '#c2410c',
   };
 
+  const palette = ['#60a5fa', '#f97316', '#e11d48', '#7c3aed', '#059669', '#d946ef', '#facc15', '#06b6d4'];
+
+  const PIECE_SHAPES: Record<string, number[][]> = {};
+  const PIECE_COLORS: Record<string, string> = {};
+  pieceKeys.forEach((k, idx) => {
+    const mats = tetrominos[k];
+    PIECE_SHAPES[k] = mats?.length ? mats[0] : [[1]];
+    PIECE_COLORS[k] = baseClassicColors[k] ?? palette[idx % palette.length];
+  });
+
   const PIECE_ID_COLORS: string[] = [
-    '#000000', // index 0 unused
-    PIECE_COLORS.I,
-    PIECE_COLORS.O,
-    PIECE_COLORS.T,
-    PIECE_COLORS.S,
-    PIECE_COLORS.Z,
-    PIECE_COLORS.J,
-    PIECE_COLORS.L,
+    '#000000',
+    // numeric mapping fallback: map first few pieceKeys to indexes 1..n
+    ...pieceKeys.slice(0, 15).map((k) => PIECE_COLORS[k] ?? palette[0]),
   ];
 
   const renderOpponentBoard = (board: number[][] | null, isAlive: boolean, cell = 4) => {
@@ -500,7 +492,7 @@ function GameComponent() {
       className='min-h-screen bg-slate-900 p-6'
       style={{ pointerEvents: 'auto' }}
     >
-      <div className='container mx-auto max-w-7xl'>
+      <div className='container mx-auto max-w-[1600px]'>
         <header className='flex items-center justify-center mb-8 relative'>
           <Link
             to='/'
@@ -515,7 +507,7 @@ function GameComponent() {
         </header>
 
         {/* Room Controls */}
-        <div className='bg-gray-900 rounded-xl p-4 border border-gray-600 mb-6 max-w-lg mx-auto lg:hidden'>
+        <div className='bg-gray-900 rounded-xl p-4 border border-gray-600 mb-6 max-w-xl mx-auto xl:hidden'>
           <h2 className='text-lg font-semibold text-white mb-3 text-center'>Room Settings</h2>
 
           <div className='space-y-3'>
@@ -530,6 +522,16 @@ function GameComponent() {
               />
             </div>
 
+            <div>
+              <label className='block text-xs font-medium text-gray-400 mb-1'>Game Mode</label>
+              <GameModeSelector
+                selected={selectedMode}
+                onChange={setSelectedMode}
+                disabled={!!playerId}
+                compact
+              />
+            </div>
+
             <div className='flex flex-wrap justify-center gap-2'>
               <button
                 onClick={create}
@@ -605,9 +607,9 @@ function GameComponent() {
         </div>
 
         {/* Main Game Layout */}
-        <div className='flex gap-6 justify-center items-start min-h-[600px]'>
+        <div className='flex flex-wrap xl:flex-nowrap gap-6 justify-center items-start min-h-[600px]'>
           {/* Left Side: Room Controls (Desktop) */}
-          <div className='hidden lg:block w-64 space-y-4'>
+          <div className='hidden xl:block w-80 shrink-0 space-y-4'>
             <div className='bg-gray-900 rounded-xl p-4 border border-gray-600'>
               <h2 className='text-lg font-semibold text-white mb-4 text-center'>Room Settings</h2>
 
@@ -623,6 +625,15 @@ function GameComponent() {
                   />
                 </div>
 
+                <div>
+                  <label className='block text-sm font-medium text-gray-400 mb-2'>Game Mode</label>
+                  <GameModeSelector
+                    selected={selectedMode}
+                    onChange={setSelectedMode}
+                    disabled={!!playerId}
+                  />
+                </div>
+
                 <div className='space-y-2'>
                   {!playerId && (
                     <button
@@ -702,7 +713,7 @@ function GameComponent() {
           </div>
 
           {/* Center: Game Area */}
-          <div className='flex items-start gap-6'>
+          <div className='flex flex-wrap sm:flex-nowrap items-start gap-4 sm:gap-6 justify-center'>
             {/* Hold Piece */}
             <div className='bg-gray-900 rounded-xl p-4 border border-gray-600'>
               <h3 className='text-sm font-semibold text-white mb-3 text-center'>Hold</h3>
@@ -717,9 +728,19 @@ function GameComponent() {
             {/* Main Game Board */}
             <div className='bg-gray-900 rounded-xl p-6 border border-gray-600'>
               <h3 className='text-xl font-semibold text-white mb-4 text-center'>Your Board</h3>
+              <div className='flex items-center justify-center gap-2 mb-3'>
+                <span className='text-base'>{GAME_MODE_INFO[selectedMode].icon}</span>
+                <span className={`text-sm font-medium ${GAME_MODE_INFO[selectedMode].accentColor}`}>
+                  {GAME_MODE_INFO[selectedMode].label}
+                </span>
+                <span className='text-[10px] text-gray-500'>({GAME_MODE_INFO[selectedMode].boardLabel})</span>
+              </div>
 
               <div className='flex flex-col items-center'>
-                <div className='bg-gray-900 rounded-lg p-3 border border-gray-600'>
+                <div
+                  className='bg-gray-900 rounded-lg p-3 border border-gray-600 flex items-center justify-center'
+                  style={{ width: MAX_WIDTH * CELL + 24, height: MAX_HEIGHT * CELL + 24 }}
+                >
                   <div
                     style={{
                       width: WIDTH * CELL,
@@ -761,7 +782,7 @@ function GameComponent() {
 
           {/* Right Side: Opponents */}
           {opponents.length > 0 && (
-            <div className='w-80 space-y-4'>
+            <div className='w-full sm:w-72 xl:w-80 shrink-0 space-y-4'>
               <div className='bg-gray-900 rounded-xl p-4 border border-gray-600'>
                 <h3 className='text-lg font-semibold text-white mb-4 text-center'>Opponents</h3>
                 <div className='space-y-3'>
diff --git a/client/app/types/socket.ts b/client/app/types/socket.ts
index 7ef095c..8aa8346 100644
--- a/client/app/types/socket.ts
+++ b/client/app/types/socket.ts
@@ -35,10 +35,11 @@ export interface GameState {
   players: Record<string, PlayerState>;
   winnerId?: string | null;
   hostId?: string | null;
+  mode?: string | null;
 }
 
 export interface ClientToServerEvents {
-  create: () => Promise<void> | void;
+  create: (payload: { mode: string }) => Promise<void> | void;
   join: (payload: { roomId: string }) => Promise<void> | void;
   start: (payload: { roomId: string }) => void;
   restart: (payload: { roomId: string }) => void;
@@ -47,7 +48,7 @@ export interface ClientToServerEvents {
 
 export interface ServerToClientEvents {
   created: (payload: { roomId: string }) => void;
-  state: (payload: GameState | { state: GameState; hostId?: string }) => void;
+  state: (payload: GameState) => void;
   game_over: (payload: { message: string }) => void;
   join_failed: (payload: { code: string; message: string }) => void;
   start_failed: (payload: { code: string; message: string }) => void;
diff --git a/server/constants/index.ts b/server/constants/index.ts
new file mode 100644
index 0000000..de4d1a7
--- /dev/null
+++ b/server/constants/index.ts
@@ -0,0 +1,24 @@
+import { CLASSIC_TETROMINOS, CYBER_TETROMINOS, PENTOMINOES } from './tetrominos';
+
+const STANDARD_FIRST_SPEED = 20;
+const BSP_SCORES: Record<number, number> = { 0: 0, 1: 40, 2: 100, 3: 300, 4: 1200, 5: 5000 };
+const TICK_INTERVAL_MS = 50;
+
+const GAME_MODES = ['classic', 'narrow', 'pentominoes', 'cyber'] as const;
+type GameMode = (typeof GAME_MODES)[number];
+
+interface GAME_SETUP_ENTRY {
+  tetrominos: Record<string, number[][][]>;
+  width: number;
+  height: number;
+}
+
+const GAME_SETUP: Record<GameMode, GAME_SETUP_ENTRY> = {
+  classic: { tetrominos: CLASSIC_TETROMINOS, width: 10, height: 20 },
+  narrow: { tetrominos: CLASSIC_TETROMINOS, width: 6, height: 22 },
+  pentominoes: { tetrominos: PENTOMINOES, width: 12, height: 22 },
+  cyber: { tetrominos: CYBER_TETROMINOS, width: 8, height: 18 },
+};
+
+export { BSP_SCORES, GAME_MODES, GAME_SETUP, STANDARD_FIRST_SPEED, TICK_INTERVAL_MS };
+export type { GameMode };
diff --git a/server/constants/tetrominos.ts b/server/constants/tetrominos.ts
new file mode 100644
index 0000000..3b4c5be
--- /dev/null
+++ b/server/constants/tetrominos.ts
@@ -0,0 +1,523 @@
+export const CYBER_TETROMINOS: Record<string, number[][][]> = {
+  A: [
+    [
+      [0, 0, 0],
+      [1, 0, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 0, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 0, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 0, 1],
+      [0, 1, 0],
+    ],
+  ],
+  B: [
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [1, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+  ],
+  C: [
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [1, 0, 0],
+    ],
+    [
+      [1, 0, 0],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  D: [
+    [
+      [0, 0, 1],
+      [1, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 0, 0],
+    ],
+    [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  E: [
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+  F: [
+    [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 0],
+      [1, 0, 0],
+    ],
+  ],
+};
+
+export const CLASSIC_TETROMINOS: Record<string, number[][][]> = {
+  I: [
+    [
+      [0, 0, 0, 0],
+      [1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [1, 1, 1, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+  O: [
+    [
+      [1, 1],
+      [1, 1],
+    ],
+  ],
+  T: [
+    [
+      [0, 1, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 1],
+      [1, 1],
+      [0, 1],
+    ],
+  ],
+  S: [
+    [
+      [0, 1, 1],
+      [1, 1, 0],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [1, 1, 0],
+    ],
+    [
+      [1, 0, 0],
+      [1, 1, 0],
+      [0, 1, 0],
+    ],
+  ],
+  Z: [
+    [
+      [1, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 1, 1],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [1, 1, 0],
+      [1, 0, 0],
+    ],
+  ],
+  J: [
+    [
+      [1, 0, 0],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 1],
+      [0, 1, 0],
+      [0, 1, 0],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 0, 1],
+    ],
+    [
+      [0, 1],
+      [0, 1],
+      [1, 1],
+    ],
+  ],
+  L: [
+    [
+      [0, 0, 1],
+      [1, 1, 1],
+    ],
+    [
+      [0, 1, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 0],
+      [1, 1, 1],
+      [1, 0, 0],
+    ],
+    [
+      [1, 1],
+      [0, 1],
+      [0, 1],
+    ],
+  ],
+};
+
+export const PENTOMINOES: Record<string, number[][][]> = {
+  A: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [1, 1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  B: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 1, 0],
+      [1, 1, 1, 1, 0],
+    ],
+    [
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 1, 1, 1, 1],
+      [0, 1, 0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  C: [
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [1, 1, 1, 1, 0],
+      [0, 0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+      [0, 1, 1],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 1, 0, 0, 0],
+      [0, 1, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+    ],
+  ],
+  D: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [1, 1, 1, 0],
+    ],
+    [
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1],
+      [0, 1, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  E: [
+    [
+      [0, 0, 1],
+      [0, 0, 1],
+      [1, 1, 1],
+    ],
+    [
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0, 0],
+      [0, 0, 0, 0, 0],
+      [0, 0, 1, 1, 1],
+      [0, 0, 1, 0, 0],
+      [0, 0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [1, 1, 1],
+      [0, 0, 1],
+      [0, 0, 1],
+    ],
+  ],
+  F: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 1, 1],
+      [0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+  ],
+  G: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 1],
+      [0, 1, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 1, 1, 0],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 0, 1],
+    ],
+  ],
+  H: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+    ],
+  ],
+  I: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+    ],
+  ],
+  J: [
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+    ],
+  ],
+  K: [
+    [
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 1, 1, 1],
+      [0, 0, 0, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 0, 1, 0],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 0],
+    ],
+  ],
+  L: [
+    [
+      [0, 0, 0, 0],
+      [0, 1, 0, 1],
+      [0, 1, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 1, 1],
+      [0, 0, 1, 0],
+      [0, 0, 1, 1],
+    ],
+    [
+      [0, 0, 0, 0],
+      [0, 0, 0, 0],
+      [0, 1, 1, 1],
+      [0, 1, 0, 1],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 1],
+      [0, 0, 1],
+      [0, 1, 1],
+    ],
+  ],
+};
diff --git a/server/core/GameManager.ts b/server/core/GameManager.ts
index 94576ee..d1353d4 100644
--- a/server/core/GameManager.ts
+++ b/server/core/GameManager.ts
@@ -1,13 +1,14 @@
 import { randomUUID } from 'crypto';
+import { GameMode } from '../constants';
 import { Game } from '../game/Game';
 import { Player } from './Player';
 
 export class GameManager {
   games = new Map<string, Game>();
 
-  createNewGame(host: Player): Game {
+  createNewGame(host: Player, mode: GameMode = 'classic'): Game {
     const roomId = this.generateRoomCode();
-    const game = new Game(roomId, host);
+    const game = new Game(roomId, host, mode);
     this.games.set(roomId, game);
     return game;
   }
diff --git a/server/game/Game.ts b/server/game/Game.ts
index 1f4aa65..2a4252e 100644
--- a/server/game/Game.ts
+++ b/server/game/Game.ts
@@ -1,3 +1,4 @@
+import { GameMode } from '../constants';
 import { Player } from '../core/Player';
 import { GameEngine } from './GameEngine';
 import { GameState, Intent } from './types';
@@ -8,12 +9,14 @@ export class Game {
   state: GameState;
   engine: GameEngine;
   hostId: string;
+  mode: GameMode;
 
-  constructor(id: string, host: Player) {
+  constructor(id: string, host: Player, mode: GameMode = 'classic') {
     this.id = id;
     this.hostId = host.id;
     this.players.set(host.id, host);
-    this.engine = new GameEngine(id);
+    this.mode = mode;
+    this.engine = new GameEngine(id, mode);
     this.state = this.engine.createInitialState([host.id]);
     // ensure player name is present in state
     if (this.state.playerStates[host.id]) {
diff --git a/server/game/GameEngine.ts b/server/game/GameEngine.ts
index c56c15d..971eb37 100644
--- a/server/game/GameEngine.ts
+++ b/server/game/GameEngine.ts
@@ -1,5 +1,5 @@
+import { BSP_SCORES, GAME_SETUP, GameMode, STANDARD_FIRST_SPEED } from '../constants';
 import { logger } from '../utils/logger';
-import { BSP_SCORES, PLAYGROUND_HEIGHT, PLAYGROUND_WIDTH, STANDARD_FIRST_SPEED, TETROMINOS } from './contstants';
 import { PieceGenerator } from './PieceGenerator';
 import { GameState, Intent, Piece, PlayerState } from './types';
 
@@ -22,12 +22,12 @@ export class GameEngine {
   private width: number;
   private height: number;
 
-  constructor(seed = 'default') {
+  constructor(seed = 'default', mode: GameMode = 'classic') {
     this.seed = seed;
     const h = hashStringToSeed(seed);
-    this.width = PLAYGROUND_WIDTH;
-    this.height = PLAYGROUND_HEIGHT;
-    this.pieceGenerator = new PieceGenerator(h, TETROMINOS);
+    this.width = GAME_SETUP[mode].width;
+    this.height = GAME_SETUP[mode].height;
+    this.pieceGenerator = new PieceGenerator(h, GAME_SETUP[mode].tetrominos);
   }
 
   private cloneState<T>(obj: T): T {
diff --git a/server/game/contstants.ts b/server/game/contstants.ts
deleted file mode 100644
index ff7d90a..0000000
--- a/server/game/contstants.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-const TETROMINOS: Record<string, number[][][]> = {
-  I: [
-    [
-      [0, 0, 0, 0],
-      [1, 1, 1, 1],
-    ],
-    [
-      [0, 0, 1],
-      [0, 0, 1],
-      [0, 0, 1],
-      [0, 0, 1],
-    ],
-    [
-      [0, 0, 0, 0],
-      [0, 0, 0, 0],
-      [1, 1, 1, 1],
-    ],
-    [
-      [0, 1],
-      [0, 1],
-      [0, 1],
-      [0, 1],
-    ],
-  ],
-  O: [
-    [
-      [1, 1],
-      [1, 1],
-    ],
-  ],
-  T: [
-    [
-      [0, 1, 0],
-      [1, 1, 1],
-    ],
-    [
-      [0, 1, 0],
-      [0, 1, 1],
-      [0, 1, 0],
-    ],
-    [
-      [0, 0, 0],
-      [1, 1, 1],
-      [0, 1, 0],
-    ],
-    [
-      [0, 1],
-      [1, 1],
-      [0, 1],
-    ],
-  ],
-  S: [
-    [
-      [0, 1, 1],
-      [1, 1, 0],
-    ],
-    [
-      [0, 1, 0],
-      [0, 1, 1],
-      [0, 0, 1],
-    ],
-    [
-      [0, 0, 0],
-      [0, 1, 1],
-      [1, 1, 0],
-    ],
-    [
-      [1, 0, 0],
-      [1, 1, 0],
-      [0, 1, 0],
-    ],
-  ],
-  Z: [
-    [
-      [1, 1, 0],
-      [0, 1, 1],
-    ],
-    [
-      [0, 0, 1],
-      [0, 1, 1],
-      [0, 1, 0],
-    ],
-    [
-      [0, 0, 0],
-      [1, 1, 0],
-      [0, 1, 1],
-    ],
-    [
-      [0, 1, 0],
-      [1, 1, 0],
-      [1, 0, 0],
-    ],
-  ],
-  J: [
-    [
-      [1, 0, 0],
-      [1, 1, 1],
-    ],
-    [
-      [0, 1, 1],
-      [0, 1, 0],
-      [0, 1, 0],
-    ],
-    [
-      [0, 0, 0],
-      [1, 1, 1],
-      [0, 0, 1],
-    ],
-    [
-      [0, 1],
-      [0, 1],
-      [1, 1],
-    ],
-  ],
-  L: [
-    [
-      [0, 0, 1],
-      [1, 1, 1],
-    ],
-    [
-      [0, 1, 0],
-      [0, 1, 0],
-      [0, 1, 1],
-    ],
-    [
-      [0, 0, 0],
-      [1, 1, 1],
-      [1, 0, 0],
-    ],
-    [
-      [1, 1],
-      [0, 1],
-      [0, 1],
-    ],
-  ],
-};
-
-const PLAYGROUND_WIDTH = 10;
-const PLAYGROUND_HEIGHT = 20;
-
-const STANDARD_FIRST_SPEED = 20;
-const BSP_SCORES: Record<number, number> = { 0: 0, 1: 40, 2: 100, 3: 300, 4: 1200 };
-const TICK_INTERVAL_MS = 50;
-
-export { BSP_SCORES, PLAYGROUND_HEIGHT, PLAYGROUND_WIDTH, STANDARD_FIRST_SPEED, TETROMINOS, TICK_INTERVAL_MS };
diff --git a/server/net/socketHandlers.ts b/server/net/socketHandlers.ts
index 6157b3a..c90b820 100644
--- a/server/net/socketHandlers.ts
+++ b/server/net/socketHandlers.ts
@@ -1,8 +1,9 @@
 import { Server, Socket } from 'socket.io';
+import type { GameMode } from '../constants';
+import { TICK_INTERVAL_MS } from '../constants';
 import { GameManager } from '../core/GameManager';
 import GameService from '../core/GameService';
 import { Player } from '../core/Player';
-import { TICK_INTERVAL_MS } from '../game/contstants';
 import { Game } from '../game/Game';
 import { GameEngine } from '../game/GameEngine';
 import type { Intent, PlayerState } from '../game/types';
@@ -55,11 +56,12 @@ export function registerSocketHandlers(
             players: playersObj,
             winnerId,
             hostId: game.hostId,
+            mode: game.mode,
           });
         }
       }
 
-      socket.on('create', async () => {
+      socket.on('create', async (payload: { mode: GameMode } = { mode: 'classic' }) => {
         const user = socket.data.user;
         if (!user) {
           socket.emit('create_failed', { code: 'NOT_AUTHENTICATED', message: 'Authentication required' });
@@ -69,7 +71,7 @@ export function registerSocketHandlers(
 
         const playerId = String(user.userId);
         const player = new Player(playerId, user.username, socket.id);
-        const game = manager.createNewGame(player);
+        const game = manager.createNewGame(player, payload.mode);
 
         logger.info(`Game created: room=${game.id} host=${player.id}`);
 
@@ -284,7 +286,7 @@ export function registerSocketHandlers(
         }
         // reset engine and state while preserving players and host
         logger.info(`server: restarting game ${roomId} by host ${playerId}`);
-        game.engine = new GameEngine(game.id);
+        game.engine = new GameEngine(game.id, game.mode);
         const playerIds = game.getPlayers().map((p) => p.id);
         game.state = game.engine.createInitialState(playerIds);
         game.state.status = 'waiting';
diff --git a/server/tests/gameEngine.test.ts b/server/tests/gameEngine.test.ts
index 081eca7..0cdbbab 100644
--- a/server/tests/gameEngine.test.ts
+++ b/server/tests/gameEngine.test.ts
@@ -1,13 +1,15 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 import { expect } from 'chai';
+import { BSP_SCORES, GAME_SETUP } from '../constants';
 import { GameEngine } from '../game/GameEngine';
-import { BSP_SCORES, PLAYGROUND_HEIGHT, PLAYGROUND_WIDTH } from '../game/contstants';
 import { Piece } from '../game/types';
 
 describe('GameEngine additional coverage', () => {
   it('collides does not treat negative y as collision when inside x bounds', () => {
     const e = new GameEngine('c1');
-    const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+    const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+    );
     const piece = { type: 'O', x: 4, y: -2, rotation: 0 } as Piece;
     const coll = e.collides(board, piece);
     expect(coll).to.equal(false);
@@ -18,7 +20,9 @@ describe('GameEngine additional coverage', () => {
     const orig = e.collides;
     try {
       e.collides = () => false;
-      const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+      const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+        Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+      );
       const piece = { type: 'O', x: 0, y: 0, rotation: 0 } as Piece;
       const out = e.renderBoardWithGhost(board, piece);
 
@@ -41,22 +45,22 @@ describe('GameEngine additional coverage', () => {
 
   it('clearLines returns correct cleared count and keeps board width', () => {
     const e = new GameEngine('c2');
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    const board = Array.from({ length: PLAYGROUND_HEIGHT - 1 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    const board = Array.from({ length: GAME_SETUP.classic.height - 1 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     board.push(full.slice());
     const res = e.clearLines(board);
     expect(res.cleared).to.equal(1);
-    expect(res.board.length).to.equal(PLAYGROUND_HEIGHT);
+    expect(res.board.length).to.equal(GAME_SETUP.classic.height);
   });
 
   it('computeLinesClearedReward gives drop bonus when isHard true', () => {
     const e = new GameEngine('c3');
     const s = e.createInitialState(['p1', 'p2']);
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    s.playerStates.p1.board = Array.from({ length: PLAYGROUND_HEIGHT - 2 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    s.playerStates.p1.board = Array.from({ length: GAME_SETUP.classic.height - 2 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     s.playerStates.p1.board.push(full.slice());
     s.playerStates.p1.board.push(full.slice());
@@ -77,7 +81,9 @@ describe('GameEngine (cleaned focused tests)', () => {
 
   it('renderBoardWithPiece places cells for active piece', () => {
     const e = new GameEngine('seed');
-    const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+    const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+    );
     const piece = { type: 'O', x: 4, y: 0, rotation: 0 } as Piece;
     const out = e.renderBoardWithPiece(board, piece);
     expect(out[0][4]).to.be.greaterThan(0);
@@ -86,7 +92,9 @@ describe('GameEngine (cleaned focused tests)', () => {
 
   it('renderBoardWithGhost shows ghost and active piece color', () => {
     const e = new GameEngine('seed2');
-    const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+    const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+    );
     const piece = { type: 'O', x: 4, y: 0, rotation: 0 } as Piece;
     const out = e.renderBoardWithGhost(board, piece);
     const hasGhost = out.some((row) => row.includes(-2));
@@ -97,7 +105,9 @@ describe('GameEngine (cleaned focused tests)', () => {
 
   it('collides allows negative y (spawn partial) without treating as collision', () => {
     const e = new GameEngine('c1');
-    const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+    const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+    );
     const piece = { type: 'O', x: 4, y: -2, rotation: 0 } as Piece;
     const coll = e.collides(board, piece);
     expect(coll).to.equal(false);
@@ -160,22 +170,22 @@ describe('GameEngine (cleaned focused tests)', () => {
 
   it('clearLines returns cleared count and preserves board height', () => {
     const e = new GameEngine('c2');
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    const board = Array.from({ length: PLAYGROUND_HEIGHT - 1 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    const board = Array.from({ length: GAME_SETUP.classic.height - 1 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     board.push(full.slice());
     const res = e.clearLines(board);
     expect(res.cleared).to.equal(1);
-    expect(res.board.length).to.equal(PLAYGROUND_HEIGHT);
+    expect(res.board.length).to.equal(GAME_SETUP.classic.height);
   });
 
   it('computeLinesClearedReward gives drop bonus when isHard true and propagates to alive players', () => {
     const e = new GameEngine('c3');
     const s = e.createInitialState(['p1', 'p2']);
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    s.playerStates.p1.board = Array.from({ length: PLAYGROUND_HEIGHT - 2 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    s.playerStates.p1.board = Array.from({ length: GAME_SETUP.classic.height - 2 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     s.playerStates.p1.board.push(full.slice());
     s.playerStates.p1.board.push(full.slice());
@@ -188,7 +198,9 @@ describe('GameEngine (cleaned focused tests)', () => {
 describe('GameEngine focused extras', () => {
   it('collides does not treat negative y as collision when inside x bounds', () => {
     const e = new GameEngine('c1');
-    const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+    const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+    );
     const piece = { type: 'O', x: 4, y: -2, rotation: 0 } as Piece;
     const coll = e.collides(board, piece);
     expect(coll).to.equal(false);
@@ -199,7 +211,9 @@ describe('GameEngine focused extras', () => {
     const orig = e.collides.bind(e);
     try {
       e.collides = () => false;
-      const board = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+      const board = Array.from({ length: GAME_SETUP.classic.height }, () =>
+        Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+      );
       const piece = { type: 'O', x: 0, y: 0, rotation: 0 } as Piece;
       const out = e.renderBoardWithGhost(board, piece);
       const hasGhost = out.some((row) => row.includes(-2));
@@ -221,22 +235,22 @@ describe('GameEngine focused extras', () => {
 
   it('clearLines returns correct cleared count and keeps board width', () => {
     const e = new GameEngine('c2');
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    const board = Array.from({ length: PLAYGROUND_HEIGHT - 1 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    const board = Array.from({ length: GAME_SETUP.classic.height - 1 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     board.push(full.slice());
     const res = e.clearLines(board);
     expect(res.cleared).to.equal(1);
-    expect(res.board.length).to.equal(PLAYGROUND_HEIGHT);
+    expect(res.board.length).to.equal(GAME_SETUP.classic.height);
   });
 
   it('computeLinesClearedReward gives drop bonus when isHard true', () => {
     const e = new GameEngine('c3');
     const s = e.createInitialState(['p1', 'p2']);
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    s.playerStates.p1.board = Array.from({ length: PLAYGROUND_HEIGHT - 2 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    s.playerStates.p1.board = Array.from({ length: GAME_SETUP.classic.height - 2 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     s.playerStates.p1.board.push(full.slice());
     s.playerStates.p1.board.push(full.slice());
@@ -267,7 +281,9 @@ describe('GameEngine', () => {
 
     it('collides returns true when board cells block piece', () => {
       const e = new GameEngine('block-collide');
-      const b = Array.from({ length: PLAYGROUND_HEIGHT }, () => Array.from({ length: PLAYGROUND_WIDTH }, () => 0));
+      const b = Array.from({ length: GAME_SETUP.classic.height }, () =>
+        Array.from({ length: GAME_SETUP.classic.width }, () => 0)
+      );
       // place a block under spawn
       b[1][4] = 1;
       const c = e.collides(b, { type: 'O', x: 4, y: 0, rotation: 0 } as Piece);
@@ -278,9 +294,9 @@ describe('GameEngine', () => {
       const e = new GameEngine('garbage-target');
       const s = e.createInitialState(['a', 'b', 'c']);
       // make 'a' clear two lines
-      const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-      s.playerStates.a.board = Array.from({ length: PLAYGROUND_HEIGHT - 2 }, () =>
-        Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+      const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+      s.playerStates.a.board = Array.from({ length: GAME_SETUP.classic.height - 2 }, () =>
+        Array.from({ length: GAME_SETUP.classic.width }, () => 0)
       );
       s.playerStates.a.board.push(full.slice());
       s.playerStates.a.board.push(full.slice());
@@ -309,9 +325,9 @@ describe('GameEngine', () => {
   it('computeLinesClearedReward handles isHard dropBonus and multiple other players dead', () => {
     const e = new GameEngine('cb');
     const s = e.createInitialState(['p1', 'p2', 'p3']);
-    const full = Array.from({ length: PLAYGROUND_WIDTH }, () => 1);
-    s.playerStates.p1.board = Array.from({ length: PLAYGROUND_HEIGHT - 4 }, () =>
-      Array.from({ length: PLAYGROUND_WIDTH }, () => 0)
+    const full = Array.from({ length: GAME_SETUP.classic.width }, () => 1);
+    s.playerStates.p1.board = Array.from({ length: GAME_SETUP.classic.height - 4 }, () =>
+      Array.from({ length: GAME_SETUP.classic.width }, () => 0)
     );
     for (let i = 0; i < 4; i++) {
       s.playerStates.p1.board.push(full.slice());
diff --git a/server/tsconfig.json b/server/tsconfig.json
index ab7edbe..9389223 100644
--- a/server/tsconfig.json
+++ b/server/tsconfig.json
@@ -24,6 +24,7 @@
     "game/**/*.ts",
     "net/**/*.ts",
     "types/**/*.ts",
+    "constants/**/*.ts",
     "tests/**/*.test.ts"
   ],
   "exclude": ["node_modules", "dist", "**/*.spec.ts"]
diff --git a/server/types/socketEvents.ts b/server/types/socketEvents.ts
index 1eef950..03b8942 100644
--- a/server/types/socketEvents.ts
+++ b/server/types/socketEvents.ts
@@ -1,8 +1,9 @@
+import { GameMode } from '../constants';
 import { GameState, Intent, PlayerState } from '../game/types';
 import { JwtPayload } from '../utils/jwt';
 
 export interface ClientToServerEvents {
-  create: () => Promise<void>;
+  create: (payload: { mode: GameMode }) => Promise<void>;
   join: (payload: { roomId: string }) => Promise<void>;
   start: (payload: { roomId: string }) => void;
   restart: (payload: { roomId: string }) => void;
@@ -18,6 +19,7 @@ export interface ServerToClientEvents {
     players: Record<string, PlayerState>;
     winnerId: string | null;
     hostId: string;
+    mode: GameMode;
   }) => void;
   game_over: (payload: { message: string }) => void;
   join_failed: (payload: { code: string; message: string }) => void;