diff --git a/frontend/src/components/chess/CapturedPieces.tsx b/frontend/src/components/chess/CapturedPieces.tsx
new file mode 100644
index 0000000..0a17611
--- /dev/null
+++ b/frontend/src/components/chess/CapturedPieces.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import Piece from "./board/Piece";
+
+interface Props {
+  capturedPieces: string[];
+  advantage: number;
+  capturedColor: "w" | "b";
+}
+
+export default function CapturedPieces({
+  capturedPieces,
+  advantage,
+  capturedColor,
+}: Props) {
+  if (capturedPieces.length === 0 && advantage <= 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 mt-1 min-h-[1.25rem]">
+      {/* Removed the negative spacing and added flex-wrap so they flow nicely */}
+      <div className="flex flex-wrap gap-0.5">
+        {capturedPieces.map((p, i) => {
+          const pieceType = capturedColor === "w" ? p.toUpperCase() : p;
+          return (
+            // Bumped size from w-3.5 to w-4 so they are easier to read
+            <div key={i} className="w-4 h-4 pointer-events-none">
+              <Piece type={pieceType} />
+            </div>
+          );
+        })}
+      </div>
+
+      {advantage > 0 && (
+        <span className="text-xs font-mono font-bold text-muted-foreground ml-1">
+          +{advantage}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/ChessBoard.tsx b/frontend/src/components/chess/ChessBoard.tsx
index 5e9ffa7..9301e4d 100644
--- a/frontend/src/components/chess/ChessBoard.tsx
+++ b/frontend/src/components/chess/ChessBoard.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect } from "react";
 import { Chess } from "chess.js";
-import type { ValidationResult, GameStatus } from "@/store/chess/useChessStore";
+import type { ValidationResult, GameStatus } from "@/types/chess.type";
 import { cn } from "@/lib/utils";
 
 import TurnIndicator from "./board/TurnIndicator";
@@ -14,177 +14,259 @@ type Square = string;
 type Color = "w" | "b";
 
 interface Props {
-    position: string;
-    activeColor: Color;
-    status: GameStatus;
-    onMove: (from: Square, to: Square, promotion?: string) => void;
-    validationResult: ValidationResult | null;
-    orientation?: Color;
-    disabled?: boolean;
+  position: string;
+  activeColor: Color;
+  status: GameStatus;
+  onMove: (from: Square, to: Square, promotion?: string) => void;
+  validationResult: ValidationResult | null;
+  orientation?: Color;
+  disabled?: boolean;
 }
 
 const FILES = ["a", "b", "c", "d", "e", "f", "g", "h"] as const;
 const RANKS = [8, 7, 6, 5, 4, 3, 2, 1] as const;
 
 function parseFen(fen: string): Record<Square, string> {
-    const pieces: Record<Square, string> = {};
-    const rows = fen.split(" ")[0].split("/");
-    rows.forEach((row, rankIdx) => {
-        let fileIdx = 0;
-        for (const char of row) {
-            if (/\d/.test(char)) {
-                fileIdx += parseInt(char, 10);
-            } else {
-                pieces[`${FILES[fileIdx]}${8 - rankIdx}`] = char;
-                fileIdx++;
-            }
-        }
-    });
-    return pieces;
+  const pieces: Record<Square, string> = {};
+  const rows = fen.split(" ")[0].split("/");
+  rows.forEach((row, rankIdx) => {
+    let fileIdx = 0;
+    for (const char of row) {
+      if (/\d/.test(char)) {
+        fileIdx += parseInt(char, 10);
+      } else {
+        pieces[`${FILES[fileIdx]}${8 - rankIdx}`] = char;
+        fileIdx++;
+      }
+    }
+  });
+  return pieces;
 }
 
 export default function ChessBoard({
-    position,
-    activeColor,
-    status,
-    onMove,
-    validationResult,
-    orientation = "w",
-    disabled = false,
+  position,
+  activeColor,
+  status,
+  onMove,
+  validationResult,
+  orientation = "w",
+  disabled = false,
 }: Props) {
-    const [selected, setSelected] = useState<Square | null>(null);
-    const [legalSquares, setLegalSquares] = useState<Set<Square>>(new Set());
-    const [promotionPending, setPromotionPending] = useState<{ from: Square; to: Square } | null>(null);
-    const [isFlashing, setIsFlashing] = useState(false);
-
-    const pieceMap = parseFen(position);
-    const files = orientation === "w" ? FILES : [...FILES].reverse();
-    const ranks = orientation === "w" ? RANKS : [...RANKS].reverse();
-
-    useEffect(() => {
-        if (validationResult && !validationResult.valid) {
-            setIsFlashing(true);
-            const t = setTimeout(() => setIsFlashing(false), 400);
-            return () => clearTimeout(t);
-        }
-    }, [validationResult]);
+  const [selected, setSelected] = useState<Square | null>(null);
+  const [legalSquares, setLegalSquares] = useState<Set<Square>>(new Set());
+  const [promotionPending, setPromotionPending] = useState<{
+    from: Square;
+    to: Square;
+  } | null>(null);
+  const [isFlashing, setIsFlashing] = useState(false);
+
+  const pieceMap = parseFen(position);
+  const files = orientation === "w" ? FILES : [...FILES].reverse();
+  const ranks = orientation === "w" ? RANKS : [...RANKS].reverse();
+
+  useEffect(() => {
+    if (validationResult && !validationResult.valid) {
+      setIsFlashing(true);
+      const t = setTimeout(() => setIsFlashing(false), 400);
+      return () => clearTimeout(t);
+    }
+  }, [validationResult]);
+
+  useEffect(() => {
+    setSelected(null);
+    setLegalSquares(new Set());
+  }, [activeColor]);
+
+  const getLegalSquares = useCallback(
+    (square: Square, fen: string): Set<Square> => {
+      try {
+        const engine = new Chess(fen);
+        const moves = engine.moves({ square: square as any, verbose: true });
+        return new Set(moves.map((m: any) => m.to));
+      } catch {
+        return new Set();
+      }
+    },
+    [],
+  );
+
+  // --- DRAG AND DROP HANDLERS ---
+
+  const handleDragStart = useCallback(
+    (e: React.DragEvent, square: Square) => {
+      if (disabled || promotionPending) {
+        e.preventDefault();
+        return;
+      }
+
+      // Save the starting square in the drag event
+      e.dataTransfer.setData("text/plain", square);
+      e.dataTransfer.effectAllowed = "move";
+
+      // Instantly select the piece and show legal moves while dragging!
+      if (pieceMap[square]) {
+        setSelected(square);
+        setLegalSquares(getLegalSquares(square, position));
+      }
+    },
+    [disabled, promotionPending, pieceMap, position, getLegalSquares],
+  );
 
-    useEffect(() => {
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    // We MUST prevent default here to tell the browser "yes, you can drop here"
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, targetSquare: Square) => {
+      e.preventDefault();
+      const sourceSquare = e.dataTransfer.getData("text/plain") as Square;
+
+      // If they dropped it somewhere weird or on the exact same square, cancel
+      if (!sourceSquare || sourceSquare === targetSquare) {
         setSelected(null);
         setLegalSquares(new Set());
-    }, [activeColor]);
-
-    const getLegalSquares = useCallback((square: Square, fen: string): Set<Square> => {
-        try {
-            const engine = new Chess(fen);
-            const moves = engine.moves({ square: square as any, verbose: true });
-            return new Set(moves.map((m: any) => m.to));
-        } catch {
-            return new Set();
+        return;
+      }
+
+      // If they dropped it on a legal square, execute the move!
+      if (legalSquares.has(targetSquare)) {
+        const piece = pieceMap[sourceSquare];
+        const isPromotion =
+          (piece === "P" && targetSquare[1] === "8") ||
+          (piece === "p" && targetSquare[1] === "1");
+
+        if (isPromotion) {
+          setPromotionPending({ from: sourceSquare, to: targetSquare });
+          setSelected(null);
+          setLegalSquares(new Set());
+          return;
         }
-    }, []);
-
-    const handleSquareClick = useCallback(
-        (square: Square) => {
-            if (disabled || promotionPending) return;
-
-            if (selected && legalSquares.has(square)) {
-                const piece = pieceMap[selected];
-                const isPromotion =
-                    (piece === "P" && square[1] === "8") ||
-                    (piece === "p" && square[1] === "1");
-
-                if (isPromotion) {
-                    setPromotionPending({ from: selected, to: square });
-                    setSelected(null);
-                    setLegalSquares(new Set());
-                    return;
-                }
-
-                onMove(selected, square);
-                setSelected(null);
-                setLegalSquares(new Set());
-                return;
-            }
-
-            if (selected === square) {
-                setSelected(null);
-                setLegalSquares(new Set());
-                return;
-            }
-
-            if (pieceMap[square]) {
-                setSelected(square);
-                setLegalSquares(getLegalSquares(square, position));
-                return;
-            }
-
-            setSelected(null);
-            setLegalSquares(new Set());
-        },
-        [disabled, selected, legalSquares, pieceMap, promotionPending, position, onMove, getLegalSquares]
-    );
-
-    const handlePromotion = useCallback(
-        (piece: string) => {
-            if (!promotionPending) return;
-            onMove(promotionPending.from, promotionPending.to, piece);
-            setPromotionPending(null);
-        },
-        [promotionPending, onMove]
-    );
-
-    return (
-        <div className="relative select-none flex flex-col items-center gap-2">
-
-            <TurnIndicator activeColor={activeColor} status={status} />
-
-            <FileLabelRow files={files} />
-
-            <div className="flex items-stretch">
-                <RankLabelCol ranks={ranks} side="left" />
-
-                <div
-                    role="grid"
-                    aria-label="Chess board"
-                    className={cn(
-                        "grid grid-cols-8 shadow-xl transition-all duration-150 rounded-sm overflow-hidden",
-                        isFlashing
-                            ? "ring-2 ring-destructive ring-offset-2 ring-offset-background"
-                            : "ring-1 ring-border"
-                    )}
-                >
-                    {ranks.map((rank) =>
-                        files.map((file) => {
-                            const square = `${file}${rank}`;
-                            const piece = pieceMap[square];
-                            const isLight = (FILES.indexOf(file) + rank) % 2 === 0;
-
-                            return (
-                                <BoardSquare
-                                    key={square}
-                                    square={square}
-                                    piece={piece}
-                                    isLight={isLight}
-                                    isSelected={selected === square}
-                                    isLegal={legalSquares.has(square)}
-                                    isCapture={legalSquares.has(square) && !!piece}
-                                    disabled={disabled}
-                                    onClick={() => handleSquareClick(square)}
-                                />
-                            );
-                        })
-                    )}
-                </div>
-
-                <RankLabelCol ranks={ranks} side="right" />
-            </div>
-
-            <FileLabelRow files={files} />
-
-            {promotionPending && (
-                <PromotionPicker onSelect={handlePromotion} />
-            )}
+
+        onMove(sourceSquare, targetSquare);
+      }
+
+      // Reset the board selection after the drop
+      setSelected(null);
+      setLegalSquares(new Set());
+    },
+    [legalSquares, pieceMap, onMove],
+  );
+
+  // --- CLICK HANDLER (Kept as a fallback for accessibility!) ---
+  const handleSquareClick = useCallback(
+    (square: Square) => {
+      if (disabled || promotionPending) return;
+
+      if (selected && legalSquares.has(square)) {
+        const piece = pieceMap[selected];
+        const isPromotion =
+          (piece === "P" && square[1] === "8") ||
+          (piece === "p" && square[1] === "1");
+
+        if (isPromotion) {
+          setPromotionPending({ from: selected, to: square });
+          setSelected(null);
+          setLegalSquares(new Set());
+          return;
+        }
+
+        onMove(selected, square);
+        setSelected(null);
+        setLegalSquares(new Set());
+        return;
+      }
+
+      if (selected === square) {
+        setSelected(null);
+        setLegalSquares(new Set());
+        return;
+      }
+
+      if (pieceMap[square]) {
+        setSelected(square);
+        setLegalSquares(getLegalSquares(square, position));
+        return;
+      }
+
+      setSelected(null);
+      setLegalSquares(new Set());
+    },
+    [
+      disabled,
+      selected,
+      legalSquares,
+      pieceMap,
+      promotionPending,
+      position,
+      onMove,
+      getLegalSquares,
+    ],
+  );
+
+  const handlePromotion = useCallback(
+    (piece: string) => {
+      if (!promotionPending) return;
+      onMove(promotionPending.from, promotionPending.to, piece);
+      setPromotionPending(null);
+    },
+    [promotionPending, onMove],
+  );
+
+  return (
+    <div className="relative select-none flex flex-col items-center gap-2">
+      <TurnIndicator activeColor={activeColor} status={status} />
+      <FileLabelRow files={files} />
+
+      <div className="flex items-stretch">
+        <RankLabelCol ranks={ranks} side="left" />
+
+        <div
+          role="grid"
+          aria-label="Chess board"
+          className={cn(
+            "grid grid-cols-8 shadow-xl transition-all duration-150 rounded-sm overflow-hidden",
+            isFlashing
+              ? "ring-2 ring-destructive ring-offset-2 ring-offset-background"
+              : "ring-1 ring-border",
+          )}
+        >
+          {ranks.map((rank) =>
+            files.map((file) => {
+              const square = `${file}${rank}`;
+              const piece = pieceMap[square];
+              const isLight = (FILES.indexOf(file) + rank) % 2 === 0;
+
+              return (
+                <BoardSquare
+                  key={square}
+                  square={square}
+                  piece={piece}
+                  isLight={isLight}
+                  isSelected={selected === square}
+                  isLegal={legalSquares.has(square)}
+                  isCapture={legalSquares.has(square) && !!piece}
+                  disabled={disabled}
+                  onClick={() => handleSquareClick(square)}
+                  // Wire up our new Drag functions!
+                  onDragStart={(e) => handleDragStart(e, square)}
+                  onDragOver={handleDragOver}
+                  onDrop={(e) => handleDrop(e, square)}
+                />
+              );
+            }),
+          )}
         </div>
-    );
-}
\ No newline at end of file
+
+        <RankLabelCol ranks={ranks} side="right" />
+      </div>
+
+      <FileLabelRow files={files} />
+
+      {promotionPending && (
+        <PromotionPicker color={activeColor} onSelect={handlePromotion} />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/GameAlerts.tsx b/frontend/src/components/chess/GameAlerts.tsx
index c98141a..287e82b 100644
--- a/frontend/src/components/chess/GameAlerts.tsx
+++ b/frontend/src/components/chess/GameAlerts.tsx
@@ -1,101 +1,84 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import type { GameStatus, Color } from "@/store/chess/useChessStore";
 
 // Types
 
 interface Props {
-    status: GameStatus;
-    activeColor: Color;
+  status: GameStatus;
+  activeColor: Color;
 }
 
 interface AlertConfig {
-    variant: "default" | "destructive";
-    title: string;
-    description: string;
-    transient: boolean; // auto-dismiss after 3 s if true
+  variant: "default" | "destructive";
+  title: string;
+  description: string;
 }
 
 // Alert Map
 
-function resolveAlert(status: GameStatus, activeColor: Color): AlertConfig | null {
-    const side = activeColor === "w" ? "White" : "Black";
+function resolveAlert(status: GameStatus, activeColor: Color): AlertConfig {
+  const side = activeColor === "w" ? "White" : "Black";
 
-    switch (status) {
-        case "check":
-            return {
-                variant: "destructive",
-                title: "Check",
-                description: `${side} is in check.`,
-                transient: true,
-            };
-        case "checkmate":
-            return {
-                variant: "destructive",
-                title: "Checkmate",
-                description: `${side} has been checkmated. Game over.`,
-                transient: false,
-            };
-        case "stalemate":
-            return {
-                variant: "default",
-                title: "Stalemate",
-                description: "No legal moves — the game is a draw.",
-                transient: false,
-            };
-        case "draw":
-            return {
-                variant: "default",
-                title: "Draw",
-                description: "The game has ended in a draw.",
-                transient: false,
-            };
-        case "resigned":
-            return {
-                variant: "default",
-                title: "Resigned",
-                description: `${side} has resigned. Game over.`,
-                transient: false,
-            };
-        default:
-            return null;
-    }
+  switch (status) {
+    case "check":
+      return {
+        variant: "destructive",
+        title: "⚠️ Check",
+        description: `${side} is in check!`,
+      };
+    case "checkmate":
+      return {
+        variant: "destructive",
+        title: "Checkmate",
+        description: `${side} has been checkmated. Game over.`,
+      };
+    case "stalemate":
+      return {
+        variant: "default",
+        title: "Stalemate",
+        description: "No legal moves — the game is a draw.",
+      };
+    case "draw":
+      return {
+        variant: "default",
+        title: "Draw",
+        description: "The game has ended in a draw.",
+      };
+    case "resigned":
+      return {
+        variant: "default",
+        title: "Resigned",
+        description: `${side} has resigned. Game over.`,
+      };
+    case "playing":
+    default:
+      return {
+        variant: "default",
+        title: "Game in Progress",
+        description: `${side} to move.`,
+      };
+  }
 }
 
 // Component
 
 export default function GameAlerts({ status, activeColor }: Props) {
-    const [dismissed, setDismissed] = useState(false);
-    const [prevStatus, setPrevStatus] = useState(status);
+  const config = resolveAlert(status, activeColor);
 
-    // Reset on every status change
-    useEffect(() => {
-        if (status !== prevStatus) {
-            setDismissed(false);
-            setPrevStatus(status);
-        }
-    }, [status, prevStatus]);
-
-    const config = resolveAlert(status, activeColor);
-
-    // Auto-dismiss transient alerts (check)
-    useEffect(() => {
-        if (!config?.transient) return;
-        const t = setTimeout(() => setDismissed(true), 3000);
-        return () => clearTimeout(t);
-    }, [config]);
-
-    if (!config || dismissed) return null;
-
-    return (
-        <Alert
-            variant={config.variant}
-            className="w-full max-w-md font-roboto animate-in fade-in slide-in-from-top-2 duration-200"
-        >
-            <AlertTitle className="font-outfit text-sm">{config.title}</AlertTitle>
-            <AlertDescription className="text-xs">{config.description}</AlertDescription>
-        </Alert>
-    );
-}
\ No newline at end of file
+  return (
+    <Alert
+      variant={config.variant}
+      // Removed the slide-in animation since it's always visible now
+      className="w-full bg-card shadow-sm transition-colors duration-300"
+    >
+      <AlertTitle className="font-outfit text-sm font-bold tracking-wide">
+        {config.title}
+      </AlertTitle>
+      <AlertDescription className="text-xs text-muted-foreground">
+        {config.description}
+      </AlertDescription>
+    </Alert>
+  );
+}
diff --git a/frontend/src/components/chess/GameClock.tsx b/frontend/src/components/chess/GameClock.tsx
index 33cb9f4..3ed77a3 100644
--- a/frontend/src/components/chess/GameClock.tsx
+++ b/frontend/src/components/chess/GameClock.tsx
@@ -6,86 +6,91 @@ import { cn } from "@/lib/utils";
 // Types
 
 interface Props {
-    timeLeft: number;       // seconds remaining
-    isActive: boolean;
-    onTick?: () => void;    // parent owns state; called each second
-    onExpire?: () => void;
+  timeLeft: number; // seconds remaining
+  isActive: boolean;
+  onTick?: () => void; // parent owns state; called each second
+  onExpire?: () => void;
 }
 
 // Helpers
 
 function formatTime(seconds: number): string {
-    const s = Math.max(0, Math.floor(seconds));
-    const m = Math.floor(s / 60);
-    const ss = s % 60;
-    return `${String(m).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
+  const s = Math.max(0, Math.floor(seconds));
+  const m = Math.floor(s / 60);
+  const ss = s % 60;
+  return `${String(m).padStart(2, "0")}:${String(ss).padStart(2, "0")}`;
 }
 
 // Component
 
-export default function GameClock({ timeLeft, isActive, onTick, onExpire }: Props) {
-    const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+export default function GameClock({
+  timeLeft,
+  isActive,
+  onTick,
+  onExpire,
+}: Props) {
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
-    useEffect(() => {
-        if (!isActive) {
-            if (intervalRef.current) clearInterval(intervalRef.current);
-            return;
-        }
+  useEffect(() => {
+    if (!isActive) {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      return;
+    }
 
-        intervalRef.current = setInterval(() => {
-            if (timeLeft <= 1) {
-                clearInterval(intervalRef.current!);
-                onTick?.();
-                onExpire?.();
-            } else {
-                onTick?.();
-            }
-        }, 1000);
+    intervalRef.current = setInterval(() => {
+      if (timeLeft <= 1) {
+        clearInterval(intervalRef.current!);
+        onTick?.();
+        onExpire?.();
+      } else {
+        onTick?.();
+      }
+    }, 1000);
 
-        return () => {
-            if (intervalRef.current) clearInterval(intervalRef.current);
-        };
-    }, [isActive, timeLeft, onTick, onExpire]);
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [isActive, timeLeft, onTick, onExpire]);
 
-    const isCritical = timeLeft <= 10;
-    const isLow = timeLeft <= 30 && !isCritical;
+  const isCritical = timeLeft <= 10;
+  const isLow = timeLeft <= 30 && !isCritical;
 
-    return (
-        <div
-            aria-label={`Clock: ${formatTime(timeLeft)}`}
-            aria-live={isCritical ? "assertive" : "off"}
-            className={cn(
-                "flex items-center justify-between px-3 py-2 rounded-lg border transition-all duration-200",
-                isActive
-                    ? "border-border bg-card"
-                    : "border-border/50 bg-card/50",
-                isCritical && "border-destructive/60 bg-destructive/5 animate-pulse"
-            )}
-        >
-            {/* Active indicator */}
-            <span
-                className={cn(
-                    "w-1.5 h-1.5 rounded-full transition-colors",
-                    isActive ? "bg-primary animate-[ping_1s_ease-in-out_infinite]" : "bg-muted"
-                )}
-                aria-hidden="true"
-            />
+  return (
+    <div
+      aria-label={`Clock: ${formatTime(timeLeft)}`}
+      aria-live={isCritical ? "assertive" : "off"}
+      className={cn(
+        "flex items-center justify-between px-3 py-2 rounded-lg border transition-all duration-200",
+        isActive ? "border-border bg-card" : "border-border/50 bg-card/50",
+        isCritical && "border-destructive/60 bg-destructive/5 animate-pulse",
+      )}
+    >
+      {/* Active indicator */}
+      <span
+        className={cn(
+          "w-1.5 h-1.5 rounded-full transition-colors",
+          isActive
+            ? "bg-primary animate-[ping_1s_ease-in-out_infinite]"
+            : "bg-muted",
+        )}
+        aria-hidden="true"
+      />
 
-            {/* Time display */}
-            <span
-                className={cn(
-                    "font-mono text-xl font-medium tabular-nums tracking-tight transition-colors",
-                    !isActive && "text-muted-foreground",
-                    isActive && !isLow && !isCritical && "text-foreground",
-                    isLow && "text-yellow-500 dark:text-yellow-400",
-                    isCritical && "text-destructive"
-                )}
-            >
-                {formatTime(timeLeft)}
-            </span>
+      {/* Time display */}
+      <span
+        className={cn(
+          "font-mono text-xl font-medium tabular-nums tracking-tight transition-colors",
+          !isActive && "text-muted-foreground",
+          isActive && !isLow && !isCritical && "text-foreground",
+          isLow && "text-yellow-500 dark:text-yellow-400",
+          isCritical && "text-destructive",
+        )}
+      >
+        {formatTime(timeLeft)}
+      </span>
 
-            {/* Center Time */}
-            <span className="w-1.5" aria-hidden="true" />
-        </div>
-    );
-}
\ No newline at end of file
+      {/* Center Time */}
+      <span className="w-1.5" aria-hidden="true" />
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/MoveHistory.tsx b/frontend/src/components/chess/MoveHistory.tsx
index 364e557..4888a08 100644
--- a/frontend/src/components/chess/MoveHistory.tsx
+++ b/frontend/src/components/chess/MoveHistory.tsx
@@ -8,100 +8,100 @@ import type { MoveEntry } from "@/store/chess/useChessStore";
 // Types
 
 interface Props {
-    moves: MoveEntry[];
+  moves: MoveEntry[];
 }
 
 interface MovePair {
-    moveNumber: number;
-    white: string | null;
-    black: string | null;
+  moveNumber: number;
+  white: string | null;
+  black: string | null;
 }
 
 // Helpers
 
 function pairMoves(moves: MoveEntry[]): MovePair[] {
-    const pairs: MovePair[] = [];
-    for (let i = 0; i < moves.length; i += 2) {
-        pairs.push({
-            moveNumber: moves[i].moveNumber,
-            white: moves[i]?.san ?? null,
-            black: moves[i + 1]?.san ?? null,
-        });
-    }
-    return pairs;
+  const pairs: MovePair[] = [];
+  for (let i = 0; i < moves.length; i += 2) {
+    pairs.push({
+      moveNumber: moves[i].moveNumber,
+      white: moves[i]?.san ?? null,
+      black: moves[i + 1]?.san ?? null,
+    });
+  }
+  return pairs;
 }
 
 // Component
 
 export default function MoveHistory({ moves }: Props) {
-    const bottomRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() => {
-        bottomRef.current?.scrollIntoView({ behavior: "smooth" });
-    }, [moves]);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [moves]);
 
-    const pairs = pairMoves(moves);
+  const pairs = pairMoves(moves);
 
-    return (
-        <Card className="flex flex-col flex-1 min-h-0">
-            <CardHeader className="py-2 px-3 border-b border-border">
-                <div className="flex items-center justify-between">
-                    <CardTitle className="font-outfit text-xs uppercase tracking-widest text-muted-foreground">
-                        Moves
-                    </CardTitle>
-                    <span className="font-mono text-xs text-muted-foreground/60">
-                        {moves.length > 0 ? `${moves.length} ply` : "—"}
-                    </span>
-                </div>
-            </CardHeader>
-            <CardContent className="p-0 flex-1 min-h-0">
-                <ScrollArea className="h-48">
-                    {pairs.length === 0 ? (
-                        <p className="font-roboto text-xs text-muted-foreground text-center py-6">
-                            No moves yet.
-                        </p>
-                    ) : (
-                        <table className="w-full" role="log" aria-live="polite">
-                            <thead>
-                                <tr className="border-b border-border/50">
-                                    <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-right px-2 py-1.5 w-8">
-                                        #
-                                    </th>
-                                    <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-left px-2 py-1.5">
-                                        White
-                                    </th>
-                                    <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-left px-2 py-1.5">
-                                        Black
-                                    </th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {pairs.map((pair, idx) => (
-                                    <tr
-                                        key={pair.moveNumber}
-                                        className={
-                                            idx === pairs.length - 1
-                                                ? "bg-muted/40"
-                                                : "hover:bg-muted/20 transition-colors"
-                                        }
-                                    >
-                                        <td className="font-mono text-[11px] text-muted-foreground text-right px-2 py-1">
-                                            {pair.moveNumber}.
-                                        </td>
-                                        <td className="font-mono text-[12px] text-foreground px-2 py-1">
-                                            {pair.white ?? ""}
-                                        </td>
-                                        <td className="font-mono text-[12px] text-foreground px-2 py-1">
-                                            {pair.black ?? ""}
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    )}
-                    <div ref={bottomRef} />
-                </ScrollArea>
-            </CardContent>
-        </Card>
-    );
-}
\ No newline at end of file
+  return (
+    <Card className="flex flex-col flex-1 min-h-0">
+      <CardHeader className="py-2 px-3 border-b border-border">
+        <div className="flex items-center justify-between">
+          <CardTitle className="font-outfit text-xs uppercase tracking-widest text-muted-foreground">
+            Moves
+          </CardTitle>
+          <span className="font-mono text-xs text-muted-foreground/60">
+            {moves.length > 0 ? `${moves.length} ply` : "—"}
+          </span>
+        </div>
+      </CardHeader>
+      <CardContent className="p-0 flex-1 min-h-0">
+        <ScrollArea className="h-full w-full">
+          {pairs.length === 0 ? (
+            <p className="font-roboto text-xs text-muted-foreground text-center py-6">
+              No moves yet.
+            </p>
+          ) : (
+            <table className="w-full" role="log" aria-live="polite">
+              <thead className="sticky top-0 bg-card z-10 shadow-[0_1px_0_0_hsl(var(--border)/0.5)]">
+                <tr className="border-b border-border/50">
+                  <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-right px-2 py-1.5 w-8">
+                    #
+                  </th>
+                  <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-left px-2 py-1.5">
+                    White
+                  </th>
+                  <th className="font-mono text-[9px] text-muted-foreground/60 uppercase tracking-wider text-left px-2 py-1.5">
+                    Black
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {pairs.map((pair, idx) => (
+                  <tr
+                    key={pair.moveNumber}
+                    className={
+                      idx === pairs.length - 1
+                        ? "bg-muted/40"
+                        : "hover:bg-muted/20 transition-colors"
+                    }
+                  >
+                    <td className="font-mono text-[11px] text-muted-foreground text-right px-2 py-1">
+                      {pair.moveNumber}.
+                    </td>
+                    <td className="font-mono text-[12px] text-foreground px-2 py-1">
+                      {pair.white ?? ""}
+                    </td>
+                    <td className="font-mono text-[12px] text-foreground px-2 py-1">
+                      {pair.black ?? ""}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+          <div ref={bottomRef} />
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/chess/MoveValidationToast.tsx b/frontend/src/components/chess/MoveValidationToast.tsx
index 09974c1..bf818fa 100644
--- a/frontend/src/components/chess/MoveValidationToast.tsx
+++ b/frontend/src/components/chess/MoveValidationToast.tsx
@@ -5,29 +5,28 @@ import { toast } from "sonner";
 import type { ValidationResult } from "@/store/chess/useChessStore";
 
 interface Props {
-    result: ValidationResult | null;
+  result: ValidationResult | null;
 }
 
 export default function MoveValidationToast({ result }: Props) {
-    const lastResultRef = useRef<ValidationResult | null>(null);
+  const lastResultRef = useRef<ValidationResult | null>(null);
 
-    useEffect(() => {
-        if (!result) return;
-        // Deduplicate — only fire when result reference changes
-        if (result === lastResultRef.current) return;
-        lastResultRef.current = result;
+  useEffect(() => {
+    if (!result) return;
+    // Deduplicate — only fire when result reference changes
+    if (result === lastResultRef.current) return;
+    lastResultRef.current = result;
 
-        if (!result.valid) {
-            toast.error(result.reason ?? "Illegal move", {
-                duration: 2500,
-                position: "bottom-center",
-                classNames: {
-                    toast: "font-roboto text-xs",
-                },
-            });
-        }
-    }, [result]);
+    if (!result.valid) {
+      toast.error(result.reason ?? "Illegal move", {
+        duration: 2500,
+        position: "bottom-center",
+        classNames: {
+          toast: "font-roboto text-xs",
+        },
+      });
+    }
+  }, [result]);
 
-
-    return null;
-}
\ No newline at end of file
+  return null;
+}
diff --git a/frontend/src/components/chess/board/BoardLabels.tsx b/frontend/src/components/chess/board/BoardLabels.tsx
index 0464154..12f9f9b 100644
--- a/frontend/src/components/chess/board/BoardLabels.tsx
+++ b/frontend/src/components/chess/board/BoardLabels.tsx
@@ -1,38 +1,46 @@
 "use client";
 
 interface Props {
-    files: readonly string[];
-    ranks: readonly number[];
+  files: readonly string[];
+  ranks: readonly number[];
 }
 
 export function FileLabelRow({ files }: Pick<Props, "files">) {
-    return (
-        <div className="flex pl-5">
-            {files.map((f) => (
-                <span
-                    key={f}
-                    className="w-14 lg:w-16 xl:w-18 text-center font-mono text-[10px] text-muted-foreground uppercase tracking-widest"
-                    aria-hidden="true"
-                >
-                    {f}
-                </span>
-            ))}
-        </div>
-    );
+  return (
+    <div className="flex pl-5">
+      {files.map((f) => (
+        <span
+          key={f}
+          className="w-14 lg:w-16 xl:w-18 text-center font-mono text-[10px] text-muted-foreground uppercase tracking-widest"
+          aria-hidden="true"
+        >
+          {f}
+        </span>
+      ))}
+    </div>
+  );
 }
 
-export function RankLabelCol({ ranks, side }: { ranks: readonly number[]; side: "left" | "right" }) {
-    return (
-        <div className={`flex flex-col justify-around w-5 ${side === "left" ? "mr-0.5" : "ml-0.5"}`}>
-            {ranks.map((r) => (
-                <span
-                    key={r}
-                    className="h-14 lg:h-16 xl:h-18 flex items-center justify-center font-mono text-[10px] text-muted-foreground"
-                    aria-hidden="true"
-                >
-                    {r}
-                </span>
-            ))}
-        </div>
-    );
-}
\ No newline at end of file
+export function RankLabelCol({
+  ranks,
+  side,
+}: {
+  ranks: readonly number[];
+  side: "left" | "right";
+}) {
+  return (
+    <div
+      className={`flex flex-col justify-around w-5 ${side === "left" ? "mr-0.5" : "ml-0.5"}`}
+    >
+      {ranks.map((r) => (
+        <span
+          key={r}
+          className="h-14 lg:h-16 xl:h-18 flex items-center justify-center font-mono text-[10px] text-muted-foreground"
+          aria-hidden="true"
+        >
+          {r}
+        </span>
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/board/BoardSquare.tsx b/frontend/src/components/chess/board/BoardSquare.tsx
index f3059e3..e28eacc 100644
--- a/frontend/src/components/chess/board/BoardSquare.tsx
+++ b/frontend/src/components/chess/board/BoardSquare.tsx
@@ -1,80 +1,93 @@
-// Single square on the board which renders the piece glyph
-// Highlight legal moves - to be improved
-// capture and selection highlight
-
-
-
 "use client";
 
 import { cn } from "@/lib/utils";
-
-// Glyphs are temporary placeholders
-const T = "\uFE0E";
-export const PIECE_GLYPHS: Record<string, string> = {
-    K: `♔${T}`, Q: `♕${T}`, R: `♖${T}`, B: `♗${T}`, N: `♘${T}`, P: `♙${T}`,
-    k: `♚${T}`, q: `♛${T}`, r: `♜${T}`, b: `♝${T}`, n: `♞${T}`, p: `♟${T}`,
-};
+import Piece from "./Piece";
+import { motion } from "framer-motion";
 
 interface Props {
-    square: string;
-    piece: string | undefined;
-    isLight: boolean;
-    isSelected: boolean;
-    isLegal: boolean;
-    isCapture: boolean;
-    disabled: boolean;
-    onClick: () => void;
+  square: string;
+  piece: string | undefined;
+  isLight: boolean;
+  isSelected: boolean;
+  isLegal: boolean;
+  isCapture: boolean;
+  disabled: boolean;
+  onClick: () => void;
+  // New Drag Events
+  onDragStart: (e: React.DragEvent) => void;
+  onDragOver: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
 }
 
 export default function BoardSquare({
-    square,
-    piece,
-    isLight,
-    isSelected,
-    isLegal,
-    isCapture,
-    disabled,
-    onClick,
+  square,
+  piece,
+  isLight,
+  isSelected,
+  isLegal,
+  isCapture,
+  disabled,
+  onClick,
+  onDragStart,
+  onDragOver,
+  onDrop,
 }: Props) {
-    const isWhitePiece = piece === piece?.toUpperCase();
+  return (
+    <button
+      role="gridcell"
+      aria-label={`${square}${piece ? ` ${piece}` : ""}`}
+      aria-selected={isSelected}
+      disabled={disabled}
+      onClick={onClick}
+      // Add the drop listeners to the square itself
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      className={cn(
+        "w-14 h-14 lg:w-16 lg:h-16 xl:w-18 xl:h-18 relative flex items-center justify-center transition-all duration-150",
+        isLight
+          ? "bg-[#eaeff4] dark:bg-[#b0b8c2]"
+          : "bg-[#6f8295] dark:bg-[#4b5969]",
+        isSelected && "ring-inset ring-4 ring-primary bg-primary/20",
+        !disabled && !isSelected && "hover:opacity-90",
+        disabled ? "cursor-default" : "cursor-pointer",
+      )}
+    >
+      {isLegal && !isCapture && (
+        <span
+          className="absolute w-4 h-4 rounded-full bg-primary/40 pointer-events-none z-10"
+          aria-hidden="true"
+        />
+      )}
+
+      {isCapture && (
+        <span
+          className="absolute inset-0 ring-inset ring-4 ring-destructive/60 pointer-events-none z-10"
+          aria-hidden="true"
+        />
+      )}
 
-    return (
-        <button
-            role="gridcell"
-            aria-label={`${square}${piece ? ` ${PIECE_GLYPHS[piece] ?? piece}` : ""}`}
-            aria-selected={isSelected}
-            disabled={disabled}
-            onClick={onClick}
-            className={cn(
-                "w-14 h-14 lg:w-16 lg:h-16 xl:w-18 xl:h-18 relative flex items-center justify-center transition-[filter,box-shadow] duration-75",
-                isLight ? "bg-[#aaaaaa]" : "bg-[#1a1a1a]",
-                isSelected && "brightness-150 shadow-[inset_0_0_0_3px_rgba(255,255,255,0.4)]",
-                !disabled && !isSelected && "hover:brightness-125",
-                disabled ? "cursor-default" : "cursor-pointer"
-            )}
+      {/* FIX: Separate Framer Motion animations from Native HTML5 Dragging */}
+      {piece && (
+        <motion.div
+          initial={{ scale: 0.5, opacity: 0 }}
+          animate={{ scale: 1, opacity: 1 }}
+          whileHover={!disabled ? { scale: 1.1 } : {}}
+          whileTap={!disabled ? { scale: 1.2 } : {}}
+          className={cn(
+            "w-[70%] h-[70%] z-20",
+            disabled ? "cursor-default" : "cursor-grab active:cursor-grabbing",
+          )}
         >
-            {isLegal && !isCapture && (
-                <span className="absolute w-[33%] h-[33%] rounded-full bg-white/30 pointer-events-none z-10" aria-hidden="true" />
-            )}
-            {isCapture && (
-                <span className="absolute inset-0 ring-inset ring-4 ring-white/40 pointer-events-none z-10" aria-hidden="true" />
-            )}
-            {piece && (
-                <span
-                    style={{
-                        filter: isWhitePiece
-                            ? "drop-shadow(1px 0 0 #000) drop-shadow(-1px 0 0 #000) drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000)"
-                            : "drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)",
-                    }}
-                    className={cn(
-                        "text-[2.35rem] lg:text-[2.6rem] xl:text-[2.8rem] leading-none pointer-events-none",
-                        isWhitePiece ? "text-white" : "text-black"
-                    )}
-                    aria-hidden="true"
-                >
-                    {PIECE_GLYPHS[piece] ?? piece}
-                </span>
-            )}
-        </button>
-    );
-}
\ No newline at end of file
+          {/* Native HTML5 Drag wrapper */}
+          <div
+            draggable={!disabled}
+            onDragStart={onDragStart}
+            className="w-full h-full"
+          >
+            <Piece type={piece} />
+          </div>
+        </motion.div>
+      )}
+    </button>
+  );
+}
diff --git a/frontend/src/components/chess/board/Piece.tsx b/frontend/src/components/chess/board/Piece.tsx
new file mode 100644
index 0000000..21e2a6c
--- /dev/null
+++ b/frontend/src/components/chess/board/Piece.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import {
+  FaChessKing,
+  FaChessQueen,
+  FaChessRook,
+  FaChessBishop,
+  FaChessKnight,
+  FaChessPawn,
+} from "react-icons/fa6";
+
+interface PieceProps {
+  type: string;
+  className?: string;
+}
+
+export default function Piece({ type, className }: PieceProps) {
+  const isWhite = type === type.toUpperCase();
+  const normalizedType = type.toLowerCase();
+
+  const Icon = {
+    k: FaChessKing,
+    q: FaChessQueen,
+    r: FaChessRook,
+    b: FaChessBishop,
+    n: FaChessKnight,
+    p: FaChessPawn,
+  }[normalizedType];
+
+  if (!Icon) return null;
+
+  return (
+    <Icon
+      className={cn(
+        "w-full h-full transition-transform duration-200",
+        // White pieces: Pure white with a solid, opaque black stroke
+        isWhite
+          ? "text-white drop-shadow-[-1px_-1px_0_#000] drop-shadow-[1px_-1px_0_#000] drop-shadow-[-1px_1px_0_#000] drop-shadow-[1px_1px_0_#000]"
+          : // Black pieces: Pure black with a solid, opaque light-gray stroke
+            "text-black drop-shadow-[-1px_-1px_0_rgba(255,255,255,0.7)] drop-shadow-[1px_-1px_0_rgba(255,255,255,0.7)] drop-shadow-[-1px_1px_0_rgba(255,255,255,0.7)] drop-shadow-[1px_1px_0_rgba(255,255,255,0.7)]",
+        className,
+      )}
+    />
+  );
+}
diff --git a/frontend/src/components/chess/board/PromotionPicker.tsx b/frontend/src/components/chess/board/PromotionPicker.tsx
index fd3234e..0642469 100644
--- a/frontend/src/components/chess/board/PromotionPicker.tsx
+++ b/frontend/src/components/chess/board/PromotionPicker.tsx
@@ -1,35 +1,41 @@
-// Pick a promotion piece
-
 "use client";
 
-import { PIECE_GLYPHS } from "./BoardSquare";
+import Piece from "./Piece";
 
 interface Props {
-    onSelect: (piece: string) => void;
+  color?: "w" | "b";
+  onSelect: (piece: string) => void;
 }
 
-export default function PromotionPicker({ onSelect }: Props) {
-    return (
-        <div
-            role="dialog"
-            aria-label="Choose promotion piece"
-            className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/90 backdrop-blur-sm z-10 rounded-sm"
-        >
-            <p className="font-roboto text-xs text-muted-foreground uppercase tracking-widest">
-                Promote to
-            </p>
-            <div className="flex gap-2">
-                {["q", "r", "b", "n"].map((p) => (
-                    <button
-                        key={p}
-                        onClick={() => onSelect(p)}
-                        aria-label={`Promote to ${p}`}
-                        className="w-14 h-14 flex items-center justify-center rounded-md border border-border bg-card text-[2rem] hover:bg-accent hover:border-primary/50 transition-colors cursor-pointer"
-                    >
-                        {PIECE_GLYPHS[p]}
-                    </button>
-                ))}
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+export default function PromotionPicker({ color = "w", onSelect }: Props) {
+  return (
+    <div
+      role="dialog"
+      aria-label="Choose promotion piece"
+      // FIX: Bumped z-10 up to z-50 so it covers all pieces!
+      className="absolute inset-0 flex flex-col items-center justify-center gap-4 bg-background/90 backdrop-blur-md z-50 rounded-sm"
+    >
+      <p className="font-roboto text-xs text-muted-foreground uppercase tracking-widest font-bold">
+        Promote to
+      </p>
+      <div className="flex gap-2">
+        {["q", "r", "b", "n"].map((p) => {
+          const pieceType = color === "w" ? p.toUpperCase() : p;
+
+          return (
+            <button
+              key={p}
+              onClick={() => onSelect(p)}
+              aria-label={`Promote to ${p}`}
+              className="w-14 h-14 flex items-center justify-center rounded-md border border-border bg-card hover:bg-accent hover:border-primary/50 shadow-xl transition-all hover:scale-105 cursor-pointer"
+            >
+              <div className="w-10 h-10 pointer-events-none">
+                <Piece type={pieceType} />
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/board/TurnIndicator.tsx b/frontend/src/components/chess/board/TurnIndicator.tsx
index b19a4ee..12f3cfd 100644
--- a/frontend/src/components/chess/board/TurnIndicator.tsx
+++ b/frontend/src/components/chess/board/TurnIndicator.tsx
@@ -6,27 +6,27 @@ import { cn } from "@/lib/utils";
 import type { Color, GameStatus } from "@/store/chess/useChessStore";
 
 interface Props {
-    activeColor: Color;
-    status: GameStatus;
+  activeColor: Color;
+  status: GameStatus;
 }
 
 export default function TurnIndicator({ activeColor, status }: Props) {
-    const isGameActive = status === "playing" || status === "check";
+  const isGameActive = status === "playing" || status === "check";
 
-    if (!isGameActive) return <div className="h-8" aria-hidden="true" />;
+  if (!isGameActive) return <div className="h-8" aria-hidden="true" />;
 
-    return (
-        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-border bg-card">
-            <span
-                className={cn(
-                    "w-3 h-3 rounded-full border border-border transition-colors duration-300",
-                    activeColor === "w" ? "bg-white" : "bg-zinc-900"
-                )}
-                aria-hidden="true"
-            />
-            <span className="font-roboto text-xs text-muted-foreground">
-                {activeColor === "w" ? "White" : "Black"} to move
-            </span>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 rounded-full border border-border bg-card">
+      <span
+        className={cn(
+          "w-3 h-3 rounded-full border border-border transition-colors duration-300",
+          activeColor === "w" ? "bg-white" : "bg-zinc-900",
+        )}
+        aria-hidden="true"
+      />
+      <span className="font-roboto text-xs text-muted-foreground">
+        {activeColor === "w" ? "White" : "Black"} to move
+      </span>
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/screens/GameScreen.tsx b/frontend/src/components/chess/screens/GameScreen.tsx
index 948914d..fd75468 100644
--- a/frontend/src/components/chess/screens/GameScreen.tsx
+++ b/frontend/src/components/chess/screens/GameScreen.tsx
@@ -9,124 +9,215 @@ import GameAlerts from "@/components/chess/GameAlerts";
 import DrawOfferModal from "@/components/chess/DrawOfferModal";
 import { Button } from "@/components/ui/button";
 
+// FOR Captured Pieces
+import { getMaterialAdvantage } from "@/lib/chess/chess-utils";
+import CapturedPieces from "@/components/chess/CapturedPieces";
+
+// UI Components
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+
 export default function GameScreen() {
-    const {
-        position,
-        activeColor,
-        status,
-        moveHistory,
-        lastValidation,
-        playerColor,
-        clocks,
-        makeMove,
-        tickClock,
-        endGame,
-        reset,
-    } = useChessStore();
+  const {
+    position,
+    activeColor,
+    status,
+    moveHistory,
+    lastValidation,
+    playerColor,
+    clocks,
+    makeMove,
+    tickClock,
+    endGame,
+    reset,
+  } = useChessStore();
 
-    const [showDrawModal, setShowDrawModal] = useState(false);
-    const orientation = playerColor ?? "w";
-    const opponentColor = orientation === "w" ? "b" : "w";
+  // Add this line right here!
+  const material = getMaterialAdvantage(position);
 
-    const isGameOver = status === "checkmate" || status === "stalemate" || status === "draw" || status === "resigned";
-    const isBoardDisabled = isGameOver;
+  const [showDrawModal, setShowDrawModal] = useState(false);
+  const orientation = playerColor ?? "w";
+  const opponentColor = orientation === "w" ? "b" : "w";
 
-    // TODO: remove const isBoardDisabled = isGameOver; and replace the commented code below for player pieces constraints
+  const isGameOver =
+    status === "checkmate" ||
+    status === "stalemate" ||
+    status === "draw" ||
+    status === "resigned";
+  const isBoardDisabled = isGameOver;
 
-    //const isBoardDisabled = playerColor !== null
-    //? activeColor !== orientation || status !== "playing"
-    //: status !== "playing";
+  // TODO: uncomment when player constraints are needed
+  // const isBoardDisabled = playerColor !== null
+  //     ? activeColor !== orientation || status !== "playing"
+  //     : status !== "playing";
 
-    return (
-        <div className="flex flex-col lg:flex-row items-start justify-center gap-4 p-4 lg:p-8 min-h-[calc(100vh-4rem)]">
+  return (
+    // Main Container: Center everything, use a column on mobile, row on large screens
+    <div className="flex flex-col xl:flex-row items-center xl:items-start justify-center gap-6 p-4 lg:p-8 min-h-[calc(100vh-4rem)] w-full max-w-6xl mx-auto">
+      {/* LEFT COLUMN: Players & Board */}
+      <div className="flex flex-col gap-3 w-full max-w-fit">
+        {/* OPPONENT TOP BAR */}
+        <div className="flex items-center justify-between w-full bg-card border border-border rounded-lg p-3 shadow-sm">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-10 w-10 border-2 border-muted shadow-sm">
+              <AvatarImage src="" alt="Opponent" />
+              <AvatarFallback className="bg-secondary text-secondary-foreground font-outfit font-bold">
+                OP
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2">
+                <p className="font-outfit text-sm font-bold tracking-wide text-foreground">
+                  Opponent
+                </p>
+                <Badge
+                  variant="secondary"
+                  className="text-[10px] px-1.5 py-0 h-4 font-mono font-semibold"
+                >
+                  1200 ELO
+                </Badge>
+              </div>
+              {/* Captured pieces placeholder */}
 
-            {/* Opponent panel */}
-            <div className="flex flex-col gap-2 w-full lg:w-52">
-                <div className="flex items-center gap-3 p-3 rounded-lg border border-border bg-card">
-                    <span className="text-2xl leading-none" aria-hidden="true">♟&#xFE0E;</span>
-                    <div>
-                        <p className="font-outfit text-sm font-medium leading-tight">Opponent</p>
-                        <p className="font-roboto text-xs text-muted-foreground">ELO —</p>
-                    </div>
-                </div>
-               {/* TODO: [F503 - Show opponent's time] Replace local tickClock with socket.on("chess:clockSync") */}
-                <GameClock
-                    timeLeft={clocks[opponentColor]}
-                    isActive={activeColor === opponentColor && !isGameOver}
-                    onTick={() => tickClock(opponentColor)}
-                    onExpire={() => endGame("checkmate")}
+              <div className="h-4 mt-0.5 flex items-center text-muted-foreground text-xs">
+                {/* We will inject captured pieces here next */}
+                <CapturedPieces
+                  capturedPieces={material[opponentColor].captured}
+                  advantage={material[opponentColor].advantage}
+                  capturedColor={opponentColor === "w" ? "b" : "w"}
                 />
+              </div>
             </div>
+          </div>
+          {/* Clock inside the bar */}
+          <div className="scale-90 origin-right">
+            <GameClock
+              timeLeft={clocks[opponentColor]}
+              // Added the moveHistory check here!
+              isActive={
+                activeColor === opponentColor &&
+                !isGameOver &&
+                moveHistory.length > 0
+              }
+              onTick={() => tickClock(opponentColor)}
+              onExpire={() => endGame("checkmate")}
+            />
+          </div>
+        </div>
 
-            {/* Board + alerts */}
-            <div className="flex flex-col items-center gap-3">
-                <GameAlerts status={status} activeColor={activeColor} />
-                <ChessBoard
-                    position={position}
-                    activeColor={activeColor}
-                    status={status}
-                    onMove={makeMove}
-                    validationResult={lastValidation}
-                    orientation={orientation}
-                    disabled={isBoardDisabled}
-                />
-                {/* TODO: [F503 - Implement resign/draw] Wire Resign to emit("chess:resign") and Offer Draw to emit("chess:offerDraw") via socket */}
-                <div className="flex gap-2">
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        className="font-roboto text-xs"
-                        onClick={() => setShowDrawModal(true)}
-                        disabled={isGameOver}
-                    >
-                        Offer Draw
-                    </Button>
-                    <Button
-                        variant="destructive"
-                        size="sm"
-                        className="font-roboto text-xs"
-                        onClick={() => endGame("resigned")}
-                        disabled={isGameOver}
-                    >
-                        Resign
-                    </Button>
-                    {isGameOver && (
-                        <Button
-                            variant="secondary"
-                            size="sm"
-                            className="font-roboto text-xs"
-                            onClick={reset}
-                        >
-                            Back to Lobby
-                        </Button>
-                    )}
-                </div>
-            </div>
+        {/* THE BOARD */}
+        <div className="relative flex flex-col items-center">
+          <ChessBoard
+            position={position}
+            activeColor={activeColor}
+            status={status}
+            onMove={makeMove}
+            validationResult={lastValidation}
+            orientation={orientation}
+            disabled={isBoardDisabled}
+          />
+        </div>
 
-            {/* Player panel */}
-            <div className="flex flex-col gap-2 w-full lg:w-52">
-                <div className="flex items-center gap-3 p-3 rounded-lg border border-border bg-card">
-                    <span className="text-2xl leading-none" aria-hidden="true">♙&#xFE0E;</span>
-                    <div>
-                        <p className="font-outfit text-sm font-medium leading-tight">You</p>
-                        <p className="font-roboto text-xs text-muted-foreground">ELO —</p>
-                    </div>
-                </div>
-                <GameClock
-                    timeLeft={clocks[orientation]}
-                    isActive={activeColor === orientation && !isGameOver}
-                    onTick={() => tickClock(orientation)}
-                    onExpire={() => endGame("resigned")}
+        {/* PLAYER BOTTOM BAR */}
+        <div className="flex items-center justify-between w-full bg-card border border-border rounded-lg p-3 shadow-sm">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-10 w-10 border-2 border-primary shadow-sm">
+              <AvatarImage src="" alt="You" />
+              <AvatarFallback className="bg-primary/10 text-primary font-outfit font-bold">
+                ME
+              </AvatarFallback>
+            </Avatar>
+            <div className="flex flex-col">
+              <div className="flex items-center gap-2">
+                <p className="font-outfit text-sm font-bold tracking-wide text-foreground">
+                  You
+                </p>
+                <Badge
+                  variant="outline"
+                  className="text-[10px] px-1.5 py-0 h-4 border-primary/50 text-primary font-mono font-semibold"
+                >
+                  1200 ELO
+                </Badge>
+              </div>
+              {/* Captured pieces placeholder */}
+              <div className="h-4 mt-0.5 flex items-center text-muted-foreground text-xs">
+                {/* We will inject captured pieces here next */}
+                <CapturedPieces
+                  capturedPieces={material[orientation].captured}
+                  advantage={material[orientation].advantage}
+                  capturedColor={orientation === "w" ? "b" : "w"}
                 />
-                <MoveHistory moves={moveHistory} />
+              </div>
             </div>
+          </div>
+          {/* Clock inside the bar */}
+          <div className="scale-90 origin-right">
+            <GameClock
+              timeLeft={clocks[orientation]}
+              // Added the moveHistory check here!
+              isActive={
+                activeColor === orientation &&
+                !isGameOver &&
+                moveHistory.length > 0
+              }
+              onTick={() => tickClock(orientation)}
+              onExpire={() => endGame("resigned")}
+            />
+          </div>
+        </div>
+      </div>
 
-            {showDrawModal && (
-                <DrawOfferModal
-                    onAccept={() => { endGame("draw"); setShowDrawModal(false); }}
-                    onDecline={() => setShowDrawModal(false)}
-                />
-            )}
+      {/* RIGHT COLUMN: Sidebar (Move History & Actions) */}
+      <div className="flex flex-col gap-4 w-full max-w-sm xl:w-80 h-full">
+        {/* 👇 ADD GAME ALERTS HERE 👇 */}
+        <div className="w-full">
+          <GameAlerts status={status} activeColor={activeColor} />
+        </div>
+        {/* Fixed height container for move history so it doesn't stretch weirdly */}
+        <div className="h-[250px] xl:h-[450px] w-full flex">
+          <MoveHistory moves={moveHistory} />
         </div>
-    );
-}
\ No newline at end of file
+
+        {/* Game Controls */}
+        <div className="flex gap-3 w-full bg-card p-3 rounded-lg border border-border shadow-sm">
+          {!isGameOver ? (
+            <>
+              <Button
+                variant="outline"
+                className="flex-1 font-outfit font-semibold tracking-wide"
+                onClick={() => setShowDrawModal(true)}
+              >
+                Offer Draw
+              </Button>
+              <Button
+                variant="destructive"
+                className="flex-1 font-outfit font-semibold tracking-wide"
+                onClick={() => endGame("resigned")}
+              >
+                Resign
+              </Button>
+            </>
+          ) : (
+            <Button
+              variant="default"
+              className="w-full font-outfit font-bold tracking-widest uppercase"
+              onClick={reset}
+            >
+              Play Again / Lobby
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {showDrawModal && (
+        <DrawOfferModal
+          onAccept={() => {
+            endGame("draw");
+            setShowDrawModal(false);
+          }}
+          onDecline={() => setShowDrawModal(false)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/screens/IdleScreen.tsx b/frontend/src/components/chess/screens/IdleScreen.tsx
index 2091e57..3c95df9 100644
--- a/frontend/src/components/chess/screens/IdleScreen.tsx
+++ b/frontend/src/components/chess/screens/IdleScreen.tsx
@@ -4,28 +4,28 @@ import { useChessStore } from "@/store/chess/useChessStore";
 import { Button } from "@/components/ui/button";
 
 export default function IdleScreen() {
-    const setPhase = useChessStore((s) => s.setPhase);
+  const setPhase = useChessStore((s) => s.setPhase);
 
-    return (
-        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] gap-6 p-8">
-            <div className="text-center space-y-2">
-                <div className="text-6xl mb-4" aria-hidden="true">♟</div>
-                <h1 className="font-outfit text-4xl font-bold tracking-tight">Chess</h1>
-                <p className="text-muted-foreground font-roboto text-sm">
-                    Play chess with your Codev friends.
-                </p>
-            </div>
-            <div className="flex gap-3">
-
-                {/* TODO: [F503 - Create game lobby] emit("chess:getRooms") via socket before navigating */}
-                <Button onClick={() => setPhase("lobby")}>Find a Game</Button>
-
-                {/* TODO: [F503 - Create game lobby] emit("chess:createRoom", { timeControl: 600 }) via socket */}
-                <Button variant="outline" onClick={() => setPhase("lobby")}>
-                    Create Room
-                </Button>
-
-            </div>
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] gap-6 p-8">
+      <div className="text-center space-y-2">
+        <div className="text-6xl mb-4" aria-hidden="true">
+          ♟
         </div>
-    );
-}
\ No newline at end of file
+        <h1 className="font-outfit text-4xl font-bold tracking-tight">Chess</h1>
+        <p className="text-muted-foreground font-roboto text-sm">
+          Play chess with your Codev friends.
+        </p>
+      </div>
+      <div className="flex gap-3">
+        {/* TODO: [F503 - Create game lobby] emit("chess:getRooms") via socket before navigating */}
+        <Button onClick={() => setPhase("lobby")}>Find a Game</Button>
+
+        {/* TODO: [F503 - Create game lobby] emit("chess:createRoom", { timeControl: 600 }) via socket */}
+        <Button variant="outline" onClick={() => setPhase("lobby")}>
+          Create Room
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/screens/LobbyScreen.tsx b/frontend/src/components/chess/screens/LobbyScreen.tsx
index 361720c..b4f9d95 100644
--- a/frontend/src/components/chess/screens/LobbyScreen.tsx
+++ b/frontend/src/components/chess/screens/LobbyScreen.tsx
@@ -5,40 +5,56 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function LobbyScreen() {
-    const { rooms, joinRoom, setPhase } = useChessStore();
+  const { rooms, joinRoom, setPhase } = useChessStore();
 
-    // TODO: on mount emit("chess:getRooms") and listen for chess:rooms event → setRooms()
+  // TODO: on mount emit("chess:getRooms") and listen for chess:rooms event → setRooms()
 
-    const displayRooms = rooms.length > 0 ? rooms : [
-        { id: "1", name: "Room #1", players: 1, maxPlayers: 2 as const, timeControl: 600 },
-        { id: "2", name: "Room #2", players: 0, maxPlayers: 2 as const, timeControl: 300 },
-    ];
+  const displayRooms =
+    rooms.length > 0
+      ? rooms
+      : [
+          {
+            id: "1",
+            name: "Room #1",
+            players: 1,
+            maxPlayers: 2 as const,
+            timeControl: 600,
+          },
+          {
+            id: "2",
+            name: "Room #2",
+            players: 0,
+            maxPlayers: 2 as const,
+            timeControl: 300,
+          },
+        ];
 
-    return (
-        <div className="flex flex-col min-h-[calc(100vh-4rem)] p-8 gap-6 max-w-2xl mx-auto w-full">
-            <div className="flex items-center justify-between">
-                <h2 className="font-outfit text-2xl font-semibold">Lobby</h2>
-                <Button variant="outline" size="sm" onClick={() => setPhase("idle")}>
-                    ← Back
-                </Button>
-            </div>
-            <div className="grid gap-3">
-                {displayRooms.map((room) => (
-                    <Card key={room.id}>
-                        <CardHeader className="pb-2 pt-4 px-4">
-                            <CardTitle className="text-sm font-outfit">{room.name}</CardTitle>
-                        </CardHeader>
-                        <CardContent className="flex items-center justify-between pb-4 px-4">
-                            <span className="font-roboto text-xs text-muted-foreground">
-                                {room.players}/{room.maxPlayers} players · {room.timeControl / 60} min
-                            </span>
-                            <Button size="sm" onClick={() => joinRoom(room)}>
-                                Join
-                            </Button>
-                        </CardContent>
-                    </Card>
-                ))}
-            </div>
-        </div>
-    );
-}
\ No newline at end of file
+  return (
+    <div className="flex flex-col min-h-[calc(100vh-4rem)] p-8 gap-6 max-w-2xl mx-auto w-full">
+      <div className="flex items-center justify-between">
+        <h2 className="font-outfit text-2xl font-semibold">Lobby</h2>
+        <Button variant="outline" size="sm" onClick={() => setPhase("idle")}>
+          ← Back
+        </Button>
+      </div>
+      <div className="grid gap-3">
+        {displayRooms.map((room) => (
+          <Card key={room.id}>
+            <CardHeader className="pb-2 pt-4 px-4">
+              <CardTitle className="text-sm font-outfit">{room.name}</CardTitle>
+            </CardHeader>
+            <CardContent className="flex items-center justify-between pb-4 px-4">
+              <span className="font-roboto text-xs text-muted-foreground">
+                {room.players}/{room.maxPlayers} players ·{" "}
+                {room.timeControl / 60} min
+              </span>
+              <Button size="sm" onClick={() => joinRoom(room)}>
+                Join
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/chess/screens/RoomScreen.tsx b/frontend/src/components/chess/screens/RoomScreen.tsx
index 4c18ec3..3592b35 100644
--- a/frontend/src/components/chess/screens/RoomScreen.tsx
+++ b/frontend/src/components/chess/screens/RoomScreen.tsx
@@ -4,33 +4,33 @@ import { useChessStore } from "@/store/chess/useChessStore";
 import { Button } from "@/components/ui/button";
 
 export default function RoomScreen() {
-    const { currentRoom, leaveRoom, startGame } = useChessStore();
+  const { currentRoom, leaveRoom, startGame } = useChessStore();
 
-    // TODO: listen for socket event "chess:gameStart" → startGame(color, timeControl)
-    // Remove [Dev] Start as White button when socket is wired
-    return (
-        <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] gap-6 p-8">
-            <div className="text-center space-y-2">
-                <h2 className="font-outfit text-2xl font-semibold">
-                    {currentRoom?.name ?? "Room"}
-                </h2>
-                <p className="font-roboto text-sm text-muted-foreground">
-                    Waiting for an opponent…
-                </p>
-            </div>
+  // TODO: listen for socket event "chess:gameStart" → startGame(color, timeControl)
+  // Remove [Dev] Start as White button when socket is wired
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-4rem)] gap-6 p-8">
+      <div className="text-center space-y-2">
+        <h2 className="font-outfit text-2xl font-semibold">
+          {currentRoom?.name ?? "Room"}
+        </h2>
+        <p className="font-roboto text-sm text-muted-foreground">
+          Waiting for an opponent…
+        </p>
+      </div>
 
-            {/* Dev shortcut — remove before merging */}
-            <Button
-                variant="outline"
-                size="sm"
-                onClick={() => startGame("w", currentRoom?.timeControl ?? 600)}
-            >
-                [Dev] Start as White
-            </Button>
+      {/* Dev shortcut — remove before merging */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => startGame("w", currentRoom?.timeControl ?? 600)}
+      >
+        [Dev] Start as White
+      </Button>
 
-            <Button variant="ghost" size="sm" onClick={leaveRoom}>
-                Leave Room
-            </Button>
-        </div>
-    );
-}
\ No newline at end of file
+      <Button variant="ghost" size="sm" onClick={leaveRoom}>
+        Leave Room
+      </Button>
+    </div>
+  );
+}
diff --git a/frontend/src/lib/chess/chess-utils.ts b/frontend/src/lib/chess/chess-utils.ts
new file mode 100644
index 0000000..da87517
--- /dev/null
+++ b/frontend/src/lib/chess/chess-utils.ts
@@ -0,0 +1,78 @@
+// lib/chess-utils.ts
+import { Chess } from "chess.js";
+import type { GameStatus } from "@/types/chess.type";
+
+export type PieceSymbol = "p" | "n" | "b" | "r" | "q";
+
+const PIECE_VALUES: Record<PieceSymbol, number> = {
+  p: 1,
+  n: 3,
+  b: 3,
+  r: 5,
+  q: 9,
+};
+
+const STARTING_COUNTS: Record<PieceSymbol, number> = {
+  p: 8,
+  n: 2,
+  b: 2,
+  r: 2,
+  q: 1,
+};
+
+export function getMaterialAdvantage(fen: string) {
+  const board = fen.split(" ")[0];
+
+  // Count what is currently on the board
+  const counts = {
+    w: { p: 0, n: 0, b: 0, r: 0, q: 0 },
+    b: { p: 0, n: 0, b: 0, r: 0, q: 0 },
+  };
+
+  for (const char of board) {
+    if (char >= "a" && char <= "z" && char !== "k") {
+      counts.b[char as PieceSymbol]++;
+    } else if (char >= "A" && char <= "Z" && char !== "K") {
+      counts.w[char.toLowerCase() as PieceSymbol]++;
+    }
+  }
+
+  const wCaptured: PieceSymbol[] = []; // Black pieces captured by White
+  const bCaptured: PieceSymbol[] = []; // White pieces captured by Black
+  let wScore = 0;
+  let bScore = 0;
+
+  (Object.keys(STARTING_COUNTS) as PieceSymbol[]).forEach((piece) => {
+    // Calculate missing pieces
+    const blackLost = STARTING_COUNTS[piece] - counts.b[piece];
+    for (let i = 0; i < blackLost; i++) wCaptured.push(piece);
+
+    const whiteLost = STARTING_COUNTS[piece] - counts.w[piece];
+    for (let i = 0; i < whiteLost; i++) bCaptured.push(piece);
+
+    // Add to total on-board scores
+    wScore += counts.w[piece] * PIECE_VALUES[piece];
+    bScore += counts.b[piece] * PIECE_VALUES[piece];
+  });
+
+  // Sort the captured pieces so they look neat: Queens first, Pawns last
+  const sortOrder = { q: 1, r: 2, b: 3, n: 4, p: 5 };
+  wCaptured.sort((a, b) => sortOrder[a] - sortOrder[b]);
+  bCaptured.sort((a, b) => sortOrder[a] - sortOrder[b]);
+
+  return {
+    w: { captured: wCaptured, advantage: wScore - bScore },
+    b: { captured: bCaptured, advantage: bScore - wScore },
+  };
+}
+
+export const INITIAL_FEN =
+  "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
+
+export function deriveStatus(engine: Chess): GameStatus {
+  if (engine.isCheckmate()) return "checkmate";
+  if (engine.isStalemate()) return "stalemate";
+  if (engine.isDraw()) return "draw";
+  if (engine.isCheck()) return "check";
+  return "playing";
+}
diff --git a/frontend/src/store/chess/gameSlice.ts b/frontend/src/store/chess/gameSlice.ts
new file mode 100644
index 0000000..b2041e8
--- /dev/null
+++ b/frontend/src/store/chess/gameSlice.ts
@@ -0,0 +1,111 @@
+import { StateCreator } from "zustand";
+import { Chess } from "chess.js";
+import type { ChessStore, GameSlice } from "./store.types";
+import type { Color } from "@/types/chess.type";
+import { deriveStatus, INITIAL_FEN } from "@/lib/chess/chess-utils";
+
+// Engine sits outside the state, just like before
+const chessEngine = new Chess();
+
+export const createGameSlice: StateCreator<ChessStore, [], [], GameSlice> = (
+  set,
+  get,
+) => ({
+  position: INITIAL_FEN,
+  activeColor: "w" as Color,
+  status: "playing",
+  moveHistory: [],
+  lastValidation: null,
+  playerColor: null,
+  clocks: { w: 600, b: 600 },
+
+  startGame: (playerColor, timeControl) => {
+    chessEngine.reset();
+    set({
+      phase: "game", // This touches RoomSlice state, which is totally allowed!
+      playerColor,
+      position: chessEngine.fen(),
+      activeColor: "w",
+      status: "playing",
+      moveHistory: [],
+      lastValidation: null,
+      clocks: { w: timeControl, b: timeControl },
+    });
+  },
+
+  makeMove: (from, to, promotion) => {
+    const state = get();
+    if (state.status !== "playing" && state.status !== "check") return;
+
+    try {
+      const move = chessEngine.move({ from, to, promotion });
+
+      if (!move) {
+        set({ lastValidation: { valid: false, reason: "Illegal move" } });
+        return;
+      }
+      const status = deriveStatus(chessEngine);
+      const moveNumber = Math.floor(state.moveHistory.length / 2) + 1;
+
+      set({
+        position: chessEngine.fen(),
+        activeColor: chessEngine.turn() as Color,
+        status,
+        lastValidation: { valid: true },
+        moveHistory: [
+          ...state.moveHistory,
+          { san: move.san, color: move.color as Color, moveNumber },
+        ],
+      });
+    } catch {
+      set({ lastValidation: { valid: false, reason: "Illegal move" } });
+    }
+  },
+
+  setValidation: (result) => set({ lastValidation: result }),
+
+  applyServerMove: (fen, san, color, status) => {
+    chessEngine.load(fen);
+    set((state) => ({
+      position: fen,
+      status,
+      activeColor: chessEngine.turn() as Color,
+      moveHistory: [
+        ...state.moveHistory,
+        {
+          san,
+          color,
+          moveNumber: Math.floor(state.moveHistory.length / 2) + 1,
+        },
+      ],
+    }));
+  },
+
+  tickClock: (color) =>
+    set((state) => ({
+      clocks: {
+        ...state.clocks,
+        [color]: Math.max(0, state.clocks[color] - 1),
+      },
+    })),
+
+  endGame: (status) => set({ status }),
+
+  reset: () => {
+    chessEngine.reset();
+    set({
+      // Resetting Game Slice
+      position: INITIAL_FEN,
+      activeColor: "w",
+      status: "playing",
+      moveHistory: [],
+      lastValidation: null,
+      playerColor: null,
+      clocks: { w: 600, b: 600 },
+      // Resetting Room Slice
+      phase: "idle",
+      rooms: [],
+      currentRoom: null,
+    });
+  },
+});
diff --git a/frontend/src/store/chess/roomSlice.ts b/frontend/src/store/chess/roomSlice.ts
new file mode 100644
index 0000000..3b3d7f6
--- /dev/null
+++ b/frontend/src/store/chess/roomSlice.ts
@@ -0,0 +1,19 @@
+import { StateCreator } from "zustand";
+import type { ChessStore, RoomSlice } from "./store.types";
+import type { ChessPhase } from "@/types/chess.type";
+
+export const createRoomSlice: StateCreator<ChessStore, [], [], RoomSlice> = (
+  set,
+) => ({
+  phase: "idle" as ChessPhase,
+  rooms: [],
+  currentRoom: null,
+
+  setPhase: (phase) => set({ phase }),
+
+  setRooms: (rooms) => set({ rooms }),
+
+  joinRoom: (room) => set({ currentRoom: room, phase: "room" }),
+
+  leaveRoom: () => set({ currentRoom: null, phase: "lobby" }),
+});
diff --git a/frontend/src/store/chess/store.types.ts b/frontend/src/store/chess/store.types.ts
new file mode 100644
index 0000000..abf6109
--- /dev/null
+++ b/frontend/src/store/chess/store.types.ts
@@ -0,0 +1,43 @@
+import type {
+  ChessPhase,
+  Color,
+  GameStatus,
+  MoveEntry,
+  ValidationResult,
+  Room,
+} from "@/types/chess.type";
+
+export interface RoomSlice {
+  phase: ChessPhase;
+  rooms: Room[];
+  currentRoom: Room | null;
+  setPhase: (phase: ChessPhase) => void;
+  setRooms: (rooms: Room[]) => void;
+  joinRoom: (room: Room) => void;
+  leaveRoom: () => void;
+}
+
+export interface GameSlice {
+  position: string;
+  activeColor: Color;
+  status: GameStatus;
+  moveHistory: MoveEntry[];
+  lastValidation: ValidationResult | null;
+  playerColor: Color | null;
+  clocks: { w: number; b: number };
+  startGame: (playerColor: Color, timeControl: number) => void;
+  makeMove: (from: string, to: string, promotion?: string) => void;
+  setValidation: (result: ValidationResult) => void;
+  applyServerMove: (
+    fen: string,
+    san: string,
+    color: Color,
+    status: GameStatus,
+  ) => void;
+  tickClock: (color: Color) => void;
+  endGame: (status: GameStatus) => void;
+  reset: () => void;
+}
+
+// Stitching the interfaces together to make the Master Store Type
+export type ChessStore = RoomSlice & GameSlice;
diff --git a/frontend/src/store/chess/useChessStore.ts b/frontend/src/store/chess/useChessStore.ts
index a788819..817cfb1 100644
--- a/frontend/src/store/chess/useChessStore.ts
+++ b/frontend/src/store/chess/useChessStore.ts
@@ -1,186 +1,9 @@
 import { create } from "zustand";
-import { Chess } from "chess.js";
-
-// Types
-
-export type ChessPhase = "idle" | "lobby" | "room" | "game";
-export type Color = "w" | "b";
-export type GameStatus =
-    | "playing"
-    | "check"
-    | "checkmate"
-    | "stalemate"
-    | "draw"
-    | "resigned";
-
-export interface MoveEntry {
-    san: string;
-    color: Color;
-    moveNumber: number;
-}
-
-export interface ValidationResult {
-    valid: boolean;
-    reason?: string;
-}
-
-export interface Room {
-    id: string;
-    name: string;
-    players: number;
-    maxPlayers: 2;
-    timeControl: number;
-}
-
-interface ChessState {
-    phase: ChessPhase;
-    rooms: Room[];
-    currentRoom: Room | null;
-    position: string;
-    activeColor: Color;
-    status: GameStatus;
-    moveHistory: MoveEntry[];
-    lastValidation: ValidationResult | null;
-    playerColor: Color | null;
-    clocks: { w: number; b: number };
-    setPhase: (phase: ChessPhase) => void;
-    setRooms: (rooms: Room[]) => void;
-    joinRoom: (room: Room) => void;
-    leaveRoom: () => void;
-    startGame: (playerColor: Color, timeControl: number) => void;
-    makeMove: (from: string, to: string, promotion?: string) => void;
-    setValidation: (result: ValidationResult) => void;
-    applyServerMove: (fen: string, san: string, color: Color, status: GameStatus) => void;
-    tickClock: (color: Color) => void;
-    endGame: (status: GameStatus) => void;
-    reset: () => void;
-}
-
-// Constants
-
-const INITIAL_FEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1";
-
-const initialState = {
-    phase: "idle" as ChessPhase,
-    rooms: [],
-    currentRoom: null,
-    position: INITIAL_FEN,
-    activeColor: "w" as Color,
-    status: "playing" as GameStatus,
-    moveHistory: [],
-    lastValidation: null,
-    playerColor: null,
-    clocks: { w: 600, b: 600 },
-};
-
-// Chess engine (outside store)
-
-const chessEngine = new Chess();
-
-// Helpers
-
-function deriveStatus(engine: Chess): GameStatus {
-    console.log("deriveStatus:", {
-        isCheckmate: engine.isCheckmate(),
-        isStalemate: engine.isStalemate(),
-        isDraw: engine.isDraw(),
-        isCheck: engine.isCheck(),
-    });
-    if (engine.isCheckmate()) return "checkmate";
-    if (engine.isStalemate()) return "stalemate";
-    if (engine.isDraw()) return "draw";
-    if (engine.isCheck()) return "check";
-    return "playing";
-}
-
-// Store
-// TODO: [F503 - Handle real-time moves] Add socket: Socket | null and setSocket() here
-// setSocket() registers all chess:* socket events (see F503 PR10)
-export const useChessStore = create<ChessState>((set, get) => ({
-    ...initialState,
-
-    setPhase: (phase) => set({ phase }),
-
-    setRooms: (rooms) => set({ rooms }),
-
-    joinRoom: (room) => set({ currentRoom: room, phase: "room" }),
-
-    leaveRoom: () => set({ currentRoom: null, phase: "lobby" }),
-
-    startGame: (playerColor, timeControl) => {
-        chessEngine.reset();
-        set({
-            phase: "game",
-            playerColor,
-            position: chessEngine.fen(),
-            activeColor: "w",
-            status: "playing",
-            moveHistory: [],
-            lastValidation: null,
-            clocks: { w: timeControl, b: timeControl },
-        });
-    },
-
-    makeMove: (from, to, promotion) => {
-        const state = get();
-        if (state.status !== "playing" && state.status !== "check") return;
-
-        try {
-            const move = chessEngine.move({ from, to, promotion });
-
-            if (!move) {
-                set({ lastValidation: { valid: false, reason: "Illegal move" } });
-                return;
-            }
-            const status = deriveStatus(chessEngine);
-            const moveNumber = Math.floor(state.moveHistory.length / 2) + 1;
-
-            set({
-                position: chessEngine.fen(),
-                activeColor: chessEngine.turn() as Color,
-                status,
-                lastValidation: { valid: true },
-                moveHistory: [
-                    ...state.moveHistory,
-                    { san: move.san, color: move.color as Color, moveNumber },
-                ],
-            });
-        } catch {
-            set({ lastValidation: { valid: false, reason: "Illegal move" } });
-        }
-    },
-
-    setValidation: (result) => set({ lastValidation: result }),
-    // TODO: [F503 - Handle real-time moves] Called when opponent's move arrives via socket.on("chess:moveMade"
-    applyServerMove: (fen, san, color, status) => {
-        chessEngine.load(fen);
-        set((state) => ({
-            position: fen,
-            status,
-            activeColor: chessEngine.turn() as Color,
-            moveHistory: [
-                ...state.moveHistory,
-                {
-                    san,
-                    color,
-                    moveNumber: Math.floor(state.moveHistory.length / 2) + 1,
-                },
-            ],
-        }));
-    },
-
-    tickClock: (color) =>
-        set((state) => ({
-            clocks: {
-                ...state.clocks,
-                [color]: Math.max(0, state.clocks[color] - 1),
-            },
-        })),
-
-    endGame: (status) => set({ status }),
-
-    reset: () => {
-        chessEngine.reset();
-        set({ ...initialState });
-    },
-}));
\ No newline at end of file
+import type { ChessStore } from "./store.types";
+import { createRoomSlice } from "./roomSlice";
+import { createGameSlice } from "./gameSlice";
+
+export const useChessStore = create<ChessStore>()((...a) => ({
+  ...createRoomSlice(...a),
+  ...createGameSlice(...a),
+}));
diff --git a/frontend/src/types/chess.type.ts b/frontend/src/types/chess.type.ts
new file mode 100644
index 0000000..cfbb91b
--- /dev/null
+++ b/frontend/src/types/chess.type.ts
@@ -0,0 +1,57 @@
+export type ChessPhase = "idle" | "lobby" | "room" | "game";
+export type Color = "w" | "b";
+export type GameStatus =
+  | "playing"
+  | "check"
+  | "checkmate"
+  | "stalemate"
+  | "draw"
+  | "resigned";
+
+export interface MoveEntry {
+  san: string;
+  color: Color;
+  moveNumber: number;
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  reason?: string;
+}
+
+export interface Room {
+  id: string;
+  name: string;
+  players: number;
+  maxPlayers: 2;
+  timeControl: number;
+}
+
+export interface ChessState {
+  phase: ChessPhase;
+  rooms: Room[];
+  currentRoom: Room | null;
+  position: string;
+  activeColor: Color;
+  status: GameStatus;
+  moveHistory: MoveEntry[];
+  lastValidation: ValidationResult | null;
+  playerColor: Color | null;
+  clocks: { w: number; b: number };
+  setPhase: (phase: ChessPhase) => void;
+  setRooms: (rooms: Room[]) => void;
+  joinRoom: (room: Room) => void;
+  leaveRoom: () => void;
+  startGame: (playerColor: Color, timeControl: number) => void;
+  makeMove: (from: string, to: string, promotion?: string) => void;
+  setValidation: (result: ValidationResult) => void;
+  applyServerMove: (
+    fen: string,
+    san: string,
+    color: Color,
+    status: GameStatus,
+  ) => void;
+  tickClock: (color: Color) => void;
+  endGame: (status: GameStatus) => void;
+  reset: () => void;
+}