diff --git a/src/components/Board/Elements.tsx b/src/components/Board/Elements.tsx
index 1a0a472..76f7490 100644
--- a/src/components/Board/Elements.tsx
+++ b/src/components/Board/Elements.tsx
@@ -1,7 +1,11 @@
-import { forwardRef } from 'react';
+import cn from 'classnames';
+import { forwardRef, useMemo } from 'react';
 import { CustomPieces, CustomSquareRenderer } from 'react-chessboard/dist/chessboard/types';
+import { BsFillStopwatchFill } from 'react-icons/bs';
+import { FiUser } from 'react-icons/fi';
 import { Bishop, King, Knight, Pawn, Queen, Rook } from '~/assets/icons';
-
+import { getFormatedTime } from './utils';
+export type PiecesTypes = keyof CustomPieces;
 export const customPieces: CustomPieces = {
   wB: ({ squareWidth }) => <Bishop width={squareWidth - 10} color="white" />,
   wN: ({ squareWidth }) => <Knight width={squareWidth - 10} color="white" />,
@@ -17,7 +21,77 @@ export const customPieces: CustomPieces = {
   bR: ({ squareWidth }) => <Rook width={squareWidth - 10} />,
 };
 
-export const Square: CustomSquareRenderer = forwardRef(({ children, style }, ref) => {
+export const customPiecesMap = new Map(Object.entries(customPieces));
+function getPieceKey(piece: string, isWhite: boolean) {
+  return isWhite ? `w${piece.toUpperCase()}` : `b${piece.toUpperCase()}`;
+}
+const PlayerInfo = (props: { picture: string; username: string; rating: number }) => {
+  return (
+    <div className="flex items-center">
+      {props.picture ? (
+        <img src={props.picture} alt="" className="w-6 rounded-full mr-2" />
+      ) : (
+        <div className="w-6 h-6 rounded-full mr-2 bg-gray-200 flex items-center justify-center">
+          <FiUser className="h-4 w-4" />
+        </div>
+      )}
+      <p>
+        {props.username} ({props.rating})
+      </p>
+    </div>
+  );
+};
+
+type PlayerStatusProps = {
+  side: 'top' | 'bottom';
+  picture: string;
+  username: string;
+  rating: number;
+  timeLeft: number;
+  isWhite?: boolean;
+  takenPieces: {
+    [key: string]: number;
+  };
+};
+
+export const PlayerStatus = (props: PlayerStatusProps) => {
+  const takenPieces = useMemo(
+    () =>
+      props.takenPieces
+        ? Object.entries(props.takenPieces).map(([piece, count]) => {
+            const Piece = customPiecesMap.get(getPieceKey(piece, !props.isWhite));
+            if (!Piece) return null;
+            return new Array(count)
+              .fill(null)
+              .map((_, index) => (
+                <Piece key={`${piece}-${index}`} squareWidth={14} isDragging={false} />
+              ));
+          })
+        : [],
+    [props.takenPieces],
+  );
+  return (
+    <div
+      style={{ /* maxWidth: '70vh', width: '70vw', */ margin: '0 auto' }}
+      className={cn(
+        'board_container px-4 py-2 flex justify-between items-stretch border border-gray-200',
+        {
+          'rounded-t-md': props.side === 'top',
+          'rounded-b-md': props.side === 'bottom',
+        },
+      )}
+    >
+      <PlayerInfo picture={props.picture} rating={props.rating} username={props.username} />
+      <div className="flex">{takenPieces}</div>
+      <div className="flex items-center border border-gray-200 rounded-md px-2 py-1">
+        <BsFillStopwatchFill className="text-blue-100 mr-2" />
+        <p>{getFormatedTime(props.timeLeft)}</p>
+      </div>
+    </div>
+  );
+};
+
+export const CustomSquare: CustomSquareRenderer = forwardRef(({ children, style }, ref) => {
   return (
     <div
       ref={ref}
diff --git a/src/components/Board/index.tsx b/src/components/Board/index.tsx
index 7ccbd7d..0ba057a 100644
--- a/src/components/Board/index.tsx
+++ b/src/components/Board/index.tsx
@@ -1,23 +1,60 @@
-import { Chess } from 'chess.js';
-import { CSSProperties, useRef, useState } from 'react';
+import { Square } from 'chess.js';
 import { Chessboard } from 'react-chessboard';
-import { Square } from 'react-chessboard/dist/chessboard/types';
+import { START_POSITION } from '~/assets/CONSTANTS';
 
-import { Square as CustomSquare, customPieces } from './Elements';
+import { createStore } from '@udecode/zustood';
+import { Chess } from 'chess.js';
+import { CSSProperties, useEffect, useRef } from 'react';
+import { CustomSquare, PlayerStatus, customPieces } from './Elements';
+import { BoardProps, BoardState, SanitizedChessboardProps } from './interfaces';
 import { customDarkSquareStyle, customLightSquareStyle } from './styles';
+import './styles.css';
+import { Piece } from 'react-chessboard/dist/chessboard/types';
+
+const DEFAULT_BOARD_PROPS: SanitizedChessboardProps = {
+  id: 'board',
+  animationDuration: 300,
+
+  position: START_POSITION,
+  boardOrientation: 'white',
+  arePremovesAllowed: false,
+
+  customSquare: CustomSquare,
+  customPieces: customPieces,
+  customDarkSquareStyle: customDarkSquareStyle,
+  customLightSquareStyle: customLightSquareStyle,
+};
+
+export const boardStore = createStore('board')<BoardState>({
+  moveFrom: '',
+  possibleMoves: {},
+});
+
+export default function Board(props: BoardProps) {
+  const chess = useRef(new Chess(props.fen || START_POSITION)).current;
+  const board = boardStore.useTrackedStore();
+
+  useEffect(() => {
+    chess.load(props.fen || START_POSITION);
+  }, [props.fen]);
+  const isTurn = () => (props.isWhite ? chess.turn() === 'w' : chess.turn() === 'b');
 
-export default function Board(_props: {
-  width?: number;
-  disabled?: boolean;
-  onChange?: (fen: string) => void;
-}) {
-  const game = useRef(new Chess()).current;
-
-  const [moveFrom, setMoveFrom] = useState<Square | ''>('');
-  const [options, setOptions] = useState<{ [key in Square]?: CSSProperties }>({});
-  // const [, setNewFen] = useState(game.fen());
-  function getMoveOptions(square: Square) {
-    const moves = game.moves({
+  const isDisabled = () => props.disabled || !isTurn() || chess.isGameOver();
+
+  function move(from: BoardState['moveFrom'], to: Square) {
+    const move = chess.move({
+      from,
+      to,
+      promotion: 'q',
+    });
+    if (!move) return;
+    boardStore.set.moveFrom('');
+    boardStore.set.possibleMoves({});
+    props.onChange?.(chess.fen(), move, chess.isGameOver());
+  }
+
+  function setPossibleMoves(square: Square) {
+    const moves = chess.moves({
       square,
       verbose: true,
     });
@@ -29,7 +66,7 @@ export default function Board(_props: {
     moves.map((move) => {
       newSquares[move.to] = {
         background:
-          game.get(move.to) && game.get(move.to).color !== game.get(square).color
+          chess.get(move.to) && chess.get(move.to).color !== chess.get(square).color
             ? 'radial-gradient(circle, rgba(0,0,0,.1) 85%, transparent 85%)'
             : 'radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)',
         borderRadius: '50%',
@@ -39,69 +76,85 @@ export default function Board(_props: {
     newSquares[square] = {
       background: 'rgba(255, 255, 0, 0.4)',
     };
-    return newSquares;
+
+    boardStore.set.possibleMoves(newSquares);
+  }
+
+  function deselect() {
+    boardStore.set.moveFrom('');
+    boardStore.set.possibleMoves({});
+  }
+
+  function select(square: Square) {
+    boardStore.set.moveFrom(square);
+    setPossibleMoves(square);
   }
 
   function onSquareClick(square: Square) {
-    if (_props.disabled) return;
-    if (moveFrom) {
-      if (moveFrom === square) {
-        setMoveFrom('');
-        setOptions({});
-        return;
-      }
-
-      const hasOption = options[square];
-
-      if (hasOption) {
-        game.move({
-          from: moveFrom,
-          to: square,
-        });
-        setMoveFrom('');
-        setOptions({});
-        _props.onChange?.(game.fen());
-        return;
-      } else if (game.get(square)) {
-        setMoveFrom(square);
-        setOptions(getMoveOptions(square));
-      } else {
-        setMoveFrom('');
-        setOptions({});
-      }
-    }
-
-    if (game.get(square)) {
-      setMoveFrom(square);
-      setOptions(getMoveOptions(square));
-    }
+    if (isDisabled()) return;
+    const piece = chess.get(square);
+    const isMove = board.moveFrom && board.moveFrom !== square && board.possibleMoves[square];
+    const isSelect =
+      !isMove &&
+      ((piece.color === 'w' && props.isWhite) || (piece.color === 'b' && !props.isWhite));
+    const isDeselect = !isMove && !isSelect && board.moveFrom;
+
+    if (isMove) move(board.moveFrom, square);
+    else if (isDeselect) deselect();
+    else if (isSelect) select(square);
+  }
+
+  function onDragOverSquare(_square: Square) {
+    return !isDisabled();
+  }
+
+  function onDrop(_sSquare: Square, _tSquare: Square, _piece: Piece) {
+    return !isDisabled();
   }
+
+  function onDragStart(_piece: Piece, _sourceSquare: Square) {
+    return !isDisabled();
+  }
+
+  function isDraggablePiece() {
+    return !isDisabled();
+  }
+
+  const lostPieces = {};
+  const capturedPieces = {};
+
   return (
-    <div
-      className="board_container"
-      style={{
-        maxWidth: '80vh',
-      }}
-    >
-      <Chessboard
-        id={'board'}
-        animationDuration={300}
-        isDraggablePiece={(args) => {
-          if (_props.disabled) return false;
-          if (game.turn() === 'w' && args.piece.startsWith('w')) return true;
-          else if (game.turn() === 'b' && args.piece.startsWith('b')) return true;
-          return false;
-        }}
-        arePremovesAllowed={false}
-        customPieces={customPieces}
-        customSquare={CustomSquare}
-        customDarkSquareStyle={customDarkSquareStyle}
-        customLightSquareStyle={customLightSquareStyle}
-        position={game.fen()}
-        onSquareClick={onSquareClick}
-        customSquareStyles={{
-          ...options,
-        }}
+    <div>
+      <PlayerStatus
+        side="top"
+        isWhite={!props.isWhite}
+        rating={props.opponent?.rating || 0}
+        picture={props.opponent?.picture || ''}
+        timeLeft={props.opponent?.clockms || 0}
+        takenPieces={lostPieces}
+        username={props.opponent?.username || 'Opponent'}
+      />
+      <div className="board-container">
+        <Chessboard
+          {...DEFAULT_BOARD_PROPS}
+          onPieceDrop={onDrop}
+          onSquareClick={onSquareClick}
+          onPieceDragBegin={onDragStart}
+          onDragOverSquare={onDragOverSquare}
+          isDraggablePiece={isDraggablePiece}
+          customSquareStyles={board.possibleMoves}
+          position={props.fen || START_POSITION}
+          boardOrientation={props.isWhite ? 'white' : 'black'}
+        />
+      </div>
+      <PlayerStatus
+        side="bottom"
+        rating={props.player?.rating || 0}
+        picture={props.player?.picture || ''}
+        timeLeft={props.player?.clockms || 0}
+        isWhite={props.isWhite}
+        takenPieces={capturedPieces}
+        username={props.player?.username || 'You'}
       />
     </div>
   );
diff --git a/src/components/Board/interfaces.ts b/src/components/Board/interfaces.ts
new file mode 100644
index 0000000..15ad570
--- /dev/null
+++ b/src/components/Board/interfaces.ts
@@ -0,0 +1,44 @@
+import { Move, Square } from 'chess.js';
+import { CSSProperties } from 'react';
+import { ChessboardProps } from 'react-chessboard/dist/chessboard/types';
+
+export interface SanitizedChessboardProps
+  extends Partial<
+    Pick<
+      ChessboardProps,
+      | 'id'
+      | 'position'
+      | 'customSquare'
+      | 'customPieces'
+      | 'isDraggablePiece'
+      | 'boardOrientation'
+      | 'areArrowsAllowed'
+      | 'animationDuration'
+      | 'arePremovesAllowed'
+      | 'arePiecesDraggable'
+      | 'customSquareStyles'
+      | 'customDarkSquareStyle'
+      | 'customLightSquareStyle'
+    >
+  > {}
+
+export type BoardProps = {
+  fen?: string;
+  isWhite?: boolean;
+  player?: Player;
+  opponent?: Player;
+  disabled?: boolean;
+  onChange?: (fen: string, move: Move, isGameOver: boolean) => void;
+};
+
+export type Player = Partial<{
+  rating: number;
+  picture: string;
+  clockms: number;
+  username: string;
+}>;
+
+export type BoardState = {
+  possibleMoves: { [key in Square]?: CSSProperties };
+  moveFrom: Square | '';
+};
diff --git a/src/components/Board/styles.css b/src/components/Board/styles.css
new file mode 100644
index 0000000..2e62d4d
--- /dev/null
+++ b/src/components/Board/styles.css
@@ -0,0 +1,14 @@
+.board-container {
+  width: 90vw;
+  max-width: calc(80vh);
+  margin: 0 auto;
+  user-select: none;
+}
+
+@media screen and (min-width: 768px) {
+  .board-container {
+    max-width: calc(70vh);
+    width: 70vw;
+    margin: 0 auto;
+  }
+}
diff --git a/src/components/Board/utils.ts b/src/components/Board/utils.ts
new file mode 100644
index 0000000..cbe15b3
--- /dev/null
+++ b/src/components/Board/utils.ts
@@ -0,0 +1,13 @@
+export function getFormatedTime(time: number) {
+  const formated = new Date(0);
+  formated.setMilliseconds(time);
+  return formated.toISOString().substring(14, 19);
+}
+export const PiecesCount = {
+  k: 1,
+  q: 1,
+  b: 2,
+  n: 2,
+  r: 2,
+  p: 8,
+};
diff --git a/src/components/Lobby/PlayingStatus.tsx b/src/components/GameSelect/PlayingStatus.tsx
similarity index 89%
rename from src/components/Lobby/PlayingStatus.tsx
rename to src/components/GameSelect/PlayingStatus.tsx
index 5c95aa5..20bb504 100644
--- a/src/components/Lobby/PlayingStatus.tsx
+++ b/src/components/GameSelect/PlayingStatus.tsx
@@ -8,10 +8,10 @@ export const PlayingStatus: React.FC = () => {
     >
       <div className="flex items-center rounded-full border-2 text-purple-100 px-2">
         <div className="w-[5px] h-[5px] bg-purple-100 rounded-full mr-2" />
-        <div className="mr-1">Player online:</div>
+        <div className="mr-1">Players online:</div>
         <div>69420</div>
       </div>
-      <div className="flex items-center rounded-full border-2 px-3 text-green-100">
+      <div className="flex items-center rounded-full border-2 px-2 text-green-100">
         <div className="w-[5px] h-[5px] bg-green-100 rounded-full mr-2" />
         <div className="mr-1">Matches ongoing:</div>
         <div>4522</div>
diff --git a/src/components/Lobby/Option.tsx b/src/components/GameSelect/index.tsx
similarity index 51%
rename from src/components/Lobby/Option.tsx
rename to src/components/GameSelect/index.tsx
index e298d32..7c7476f 100644
--- a/src/components/Lobby/Option.tsx
+++ b/src/components/GameSelect/index.tsx
@@ -11,6 +11,8 @@ import { appActions } from '~/store';
 import { Ticket } from '~/store/lobby.store';
 import { TimeItem } from '../UI/TimeItem.ui';
 import { PlayingStatus } from './PlayingStatus';
+import Panel from '../UI/Panel.ui';
+import './styles.css';
 
 type CategoryMap = { [key in GameCategory]: (GameMode & { index: number })[] };
 const categorize = () => {
@@ -66,61 +68,63 @@ export const Option = () => {
     mutate();
   }
   return (
-    <div className={`min-w-[256px] border border-sky-600 flex flex-col flex-none`}>
-      <div className="w-full flex justify-between px-4 py-4 border-b text-bold ">
-        <p>Play</p>
-        <p>Friends</p>
-      </div>
-      <div className="flex flex-col justify-between gap-2 p-4 flex-1">
-        <div>
-          <div className="flex flex-col gap-1">
-            <p className="font-bold">Game Mode:</p>
-            <div className="flex gap-1 justify-around">
-              {CATEGORIES.map((category, index) => {
-                return (
-                  <ModeItem
-                    SVG={category}
-                    mode_number={index}
-                    key={`mode-${index}`}
-                    activated={state.selected_category === category}
-                    onActivated={() => setState({ ...state, selected_category: category })}
-                  />
-                );
-              })}
+    <Panel
+      body={
+        <div className="flex flex-col justify-between gap-2 p-4 flex-1">
+          <div>
+            <div className="flex flex-col gap-1">
+              <p className="font-bold">Game Mode:</p>
+              <div className="flex gap-1 justify-around">
+                {CATEGORIES.map((category, index) => {
+                  return (
+                    <ModeItem
+                      SVG={category}
+                      mode_number={index}
+                      key={`mode-${index}`}
+                      activated={state.selected_category === category}
+                      onActivated={() => setState({ ...state, selected_category: category })}
+                    />
+                  );
+                })}
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col gap-1 mt-8">
-            <p className="font-bold">Time:</p>
-            <div className="flex gap-2 justify-center">
-              {categories?.[state.selected_category].map((mode) => {
-                return (
-                  <TimeItem
-                    key={mode.index}
-                    mode={mode}
-                    activated={mode.index === state.selected_index}
-                    onActivated={() => setState({ ...state, selected_index: mode.index })}
-                  />
-                );
-              })}
+            <div className="flex flex-col gap-1 mt-8">
+              <p className="font-bold">Time:</p>
+              <div className="flex gap-2 justify-center">
+                {categories?.[state.selected_category].map((mode) => {
+                  return (
+                    <TimeItem
+                      key={mode.index}
+                      mode={mode}
+                      activated={mode.index === state.selected_index}
+                      onActivated={() => setState({ ...state, selected_index: mode.index })}
+                    />
+                  );
+                })}
+              </div>
             </div>
-          </div>
-          <div className="flex flex-col mt-6 gap-2">
-            <Button
-              text="Play"
-              className="w-full border font-bold"
-              bg_colorHover="bg-red-200"
-              text_colorHover={`text-white-100`}
-              height="h-12"
-              onClick={onClickPlay}
-            />
+            <div className="flex flex-col mt-6 gap-2">
+              <Button
+                text="Play"
+                className="w-full border font-bold"
+                bg_colorHover="bg-red-200"
+                text_colorHover={`text-white-100`}
+                height="h-12"
+                onClick={onClickPlay}
+              />
 
-            <Button text="Invite a Friend" className="w-full border font-bold" height="h-12" />
+              <Button text="Invite a Friend" className="w-full border font-bold" height="h-12" />
+            </div>
           </div>
         </div>
-        <div className="self-end">
-          <PlayingStatus />
+      }
+      footer={<PlayingStatus />}
+      header={
+        <div className="w-full flex justify-between text-bold ">
+          <p>Play</p>
+          <p>Friends</p>
         </div>
-      </div>
-    </div>
+      }
+    />
   );
 };
diff --git a/src/components/GameSelect/styles.css b/src/components/GameSelect/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Header.tsx b/src/components/Header/index.tsx
similarity index 98%
rename from src/components/Header.tsx
rename to src/components/Header/index.tsx
index e3aad50..41f5b45 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header/index.tsx
@@ -28,7 +28,7 @@ const Header: FC = () => {
     appActions.profile.currentTab('profile');
   };
   return (
-    <div className="md:px-4 py-2 px-2 bg-brand-800 top-0 flex items-stretch justify-between max-sm:text-sm z-50 border header">
+    <div className="md:px-4 py-2 px-2 bg-brand-800 top-0 flex items-stretch justify-between max-sm:text-sm z-50 border sticky">
       <HashLink to={'/'}>
         <div className="flex justify-center items-center">
           <Image source={Logo} />
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
new file mode 100644
index 0000000..6047c0c
--- /dev/null
+++ b/src/components/Layout/index.tsx
@@ -0,0 +1,21 @@
+import './style.css';
+export default function Layout(props: {
+  left?: React.ReactNode;
+  center?: React.ReactNode;
+  right?: React.ReactNode;
+}) {
+  return (
+    <div
+      className="flex-1 py-4 md:py-8 justify-center w-full flex overflow-auto scroll-smooth scrollbar-hide"
+      style={{
+        scrollBehavior: 'smooth',
+      }}
+    >
+      <div className="grid layout-template gap-10">
+        <div className="layout-left">{props.left}</div>
+        <div className="layout-center">{props.center}</div>
+        <div className="layout-right">{props.right}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Layout/style.css b/src/components/Layout/style.css
new file mode 100644
index 0000000..4794451
--- /dev/null
+++ b/src/components/Layout/style.css
@@ -0,0 +1,28 @@
+.layout-template {
+  display: grid;
+  grid-template-areas:
+    'center'
+    'right'
+    'left';
+}
+
+.layout-left {
+  grid-area: left;
+}
+
+.layout-center {
+  grid-area: center;
+}
+
+.layout-right {
+  grid-area: right;
+}
+
+@media screen and (min-width: 768px) {
+  .layout-template {
+    grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
+    justify-items: stretch;
+    align-items: stretch;
+    grid-template-areas: 'left center right';
+  }
+}
diff --git a/src/components/Lobby/index.tsx b/src/components/Lobby/index.tsx
index 33b6f23..991d288 100644
--- a/src/components/Lobby/index.tsx
+++ b/src/components/Lobby/index.tsx
@@ -1,11 +1,31 @@
+import { useAuth } from '~/providers/AuthProvider';
 import Board from '../Board';
-import { Option } from './Option';
+import Layout from '../Layout';
+import { Option } from '../GameSelect';
 
 export default function Lobby() {
+  const { user } = useAuth();
   return (
-    <div className="room">
-      <Board disabled={true} />
-      <Option />
-    </div>
+    <Layout
+      center={
+        <Board
+          disabled
+          isWhite={true}
+          player={{
+            clockms: 0,
+            rating: 0,
+            username: user?.nickname || 'You',
+            picture: user?.picture || '',
+          }}
+          opponent={{
+            clockms: 0,
+            rating: 0,
+            username: 'Opponent',
+            picture: '',
+          }}
+        />
+      }
+      right={<Option />}
+    />
   );
 }
diff --git a/src/components/Modal/Auth/styles.css b/src/components/Modal/Auth/styles.css
index 3ff0e1c..2df9f76 100644
--- a/src/components/Modal/Auth/styles.css
+++ b/src/components/Modal/Auth/styles.css
@@ -15,6 +15,12 @@
   width: 480px;
   animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
+
+@media (max-width: 480px) {
+  .DialogContent {
+    width: calc(100vw - 32px);
+  }
+}
 .DialogContent:focus {
   outline: none;
 }
@@ -51,4 +57,4 @@
     opacity: 1;
     transform: translate(-50%, -50%) scale(1);
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Modal/Summary/index.tsx b/src/components/Modal/Summary/index.tsx
new file mode 100644
index 0000000..900bc2e
--- /dev/null
+++ b/src/components/Modal/Summary/index.tsx
@@ -0,0 +1,42 @@
+import { Content, Overlay, Portal } from '@radix-ui/react-dialog';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '~/components/UI';
+type Props = {
+  isDraw: boolean;
+  isWinner: boolean;
+  isAborted: boolean;
+  rating: number;
+};
+export default function Summary(props: Props) {
+  const navigate = useNavigate();
+  const title = props.isAborted
+    ? 'Aborted!'
+    : props.isWinner
+    ? 'You Win'
+    : props.isDraw
+    ? 'Draw'
+    : 'You Lose';
+  return (
+    <Portal className="">
+      <Overlay className="DialogOverlay bg-gray-500 bg-opacity-75 z-50" />
+      <Content className="DialogContent z-50">
+        <div className="flex flex-col justify-stretch p-4 min-h-[250px]">
+          <div className="flex-1">
+            <p className="font-bold text-center mb-3 text-5xl text-gray-300 mx-auto">{title}</p>
+            <div className="text-center">Rating: {props.rating || 0}</div>
+          </div>
+          <div className="w-full flex justify-center gap-2">
+            <Button text="New Game" className="bg-blue-100 text-white-100 flex-1" />
+            <Button
+              text="Main Menu"
+              className="bg-gray-200 text-white-100 flex-1"
+              onClick={() => {
+                navigate('/play');
+              }}
+            />
+          </div>
+        </div>
+      </Content>
+    </Portal>
+  );
+}
diff --git a/src/components/Room/index.tsx b/src/components/Room/index.tsx
index 3223a8f..792faa1 100644
--- a/src/components/Room/index.tsx
+++ b/src/components/Room/index.tsx
@@ -1,203 +1,75 @@
-import { Square } from 'chess.js';
-import cn from 'classnames';
-import { Chessboard } from 'react-chessboard';
-import { BsFillStopwatchFill } from 'react-icons/bs';
-import { FiUser } from 'react-icons/fi';
-import { Bishop, King, Knight, Pawn, Queen, Rook } from '~/assets/icons';
 import { useAuth } from '~/providers/AuthProvider';
-import { Square as CustomSquare, customPieces } from '../Board/Elements';
-import { customDarkSquareStyle, customLightSquareStyle } from '../Board/styles';
+import Board from '../Board';
 import History from '../History';
+import Layout from '../Layout';
 import { ChatRoom } from './ChatRoom';
 import useGame, { roomState } from './useGame';
+import { Move } from 'chess.js';
+import Summary from '../Modal/Summary';
+import { Content, Dialog } from '@radix-ui/react-dialog';
 
-const pieces = {
-  wK: () => <King width={14} color="white" />,
-  wQ: () => <Queen width={14} color="white" />,
-  wB: () => <Bishop width={14} color="white" />,
-  wN: () => <Knight width={14} color="white" />,
-  wR: () => <Rook width={14} color="white" />,
-  wP: () => <Pawn width={14} color="white" />,
-  bK: () => <King width={14} />,
-  bQ: () => <Queen width={14} />,
-  bB: () => <Bishop width={14} />,
-  bN: () => <Knight width={14} />,
-  bR: () => <Rook width={14} />,
-  bP: () => <Pawn width={14} />,
-};
-
-function getPieceKey(piece: string, isWhite: boolean) {
-  return isWhite ? `w${piece.toUpperCase()}` : `b${piece.toUpperCase()}`;
-}
-const PiecesCount = {
-  k: 1,
-  q: 1,
-  b: 2,
-  n: 2,
-  r: 2,
-  p: 8,
-};
-
-function getTakenFromFen(fen: string, isWhite: boolean) {
-  const position = fen.split(' ')[0];
-  const count: { [key: string]: number } = {
-    p: 0,
-    n: 0,
-    b: 0,
-    q: 0,
-    r: 0,
-    k: 0,
-    P: 0,
-    N: 0,
-    B: 0,
-    Q: 0,
-    R: 0,
-    K: 0,
-  };
-
-  for (let piece of position) {
-    if (piece === '/') continue;
-    if (isNaN(Number(piece))) {
-      count[piece]++;
-    }
-  }
-
-  return {
-    p: PiecesCount.p - count[isWhite ? 'p' : 'P'],
-    n: PiecesCount.n - count[isWhite ? 'n' : 'N'],
-    b: PiecesCount.b - count[isWhite ? 'b' : 'B'],
-    q: PiecesCount.q - count[isWhite ? 'q' : 'Q'],
-    r: PiecesCount.r - count[isWhite ? 'r' : 'R'],
-    k: PiecesCount.k - count[isWhite ? 'k' : 'K'],
-  };
-}
-
-const PlayerInfo = (props: {
-  picture: string;
-  username: string;
-  rating: number;
-  color: 'white' | 'black';
-}) => {
-  return (
-    <div className="flex items-center">
-      {props.picture ? (
-        <img src={props.picture} alt="" className="w-6 rounded-full mr-2" />
-      ) : (
-        <div className="w-6 h-6 rounded-full mr-2 bg-gray-200 flex items-center justify-center">
-          <FiUser className="h-4 w-4" />
-        </div>
-      )}
-      <p>
-        {props.username} ({props.rating})
-      </p>
-    </div>
-  );
-};
-
-const PlayerStatus = (props: {
-  side: 'top' | 'bottom';
-  picture: string;
-  username: string;
-  rating: number;
-  timeLeft: number;
-  color: 'white' | 'black';
-}) => {
-  const remaining = new Date(0);
-  remaining.setMilliseconds(props.timeLeft);
-  const timeString = remaining.toISOString().substring(14, 19);
-  const fen = roomState.useTrackedStore().fen;
-  const takenPieces = getTakenFromFen(fen, props.color === 'white');
-  return (
-    <div
-      style={{ maxWidth: '70vh', width: '70vw', margin: '0 auto' }}
-      className={cn('px-4 py-2 flex justify-between items-stretch border border-gray-200', {
-        'rounded-t-md': props.side === 'top',
-        'rounded-b-md': props.side === 'bottom',
-      })}
-    >
-      <PlayerInfo
-        color={props.color}
-        picture={props.picture}
-        rating={props.rating}
-        username={props.username}
-      />
-      <div className="flex">
-        {Object.entries(takenPieces).map(([piece, count]) => {
-          const Piece = (pieces as any)[getPieceKey(piece, props.color !== 'white')];
-          return new Array(count).fill(null).map((_, index) => <Piece key={`${piece}-${index}`} />);
-        })}
-      </div>
-      <div className="flex items-center border border-gray-200 rounded-md px-2 py-1">
-        <BsFillStopwatchFill className="text-blue-100 mr-2" />
-        <p className="">{timeString}</p>
-      </div>
-    </div>
-  );
-};
+// const pieces = {
+//   wK: () => <King width={14} color="white" />,
+//   wQ: () => <Queen width={14} color="white" />,
+//   wB: () => <Bishop width={14} color="white" />,
+//   wN: () => <Knight width={14} color="white" />,
+//   wR: () => <Rook width={14} color="white" />,
+//   wP: () => <Pawn width={14} color="white" />,
+//   bK: () => <King width={14} />,
+//   bQ: () => <Queen width={14} />,
+//   bB: () => <Bishop width={14} />,
+//   bN: () => <Knight width={14} />,
+//   bR: () => <Rook width={14} />,
+//   bP: () => <Pawn width={14} />,
+// };
 
 const Room = () => {
   const { user } = useAuth();
   const room = roomState.useTrackedStore();
-  const { isLoading, isTurn, isGameOver, move, deselectPiece, select, pieceAtSquare } = useGame();
+  const { isLoading, move } = useGame();
 
-  if (isLoading) return <div>Loading...</div>;
+  const onChange = (_fen: string, m: Move) => {
+    move(m.from, m.to);
+  };
 
-  function onSquareClick(square: Square) {
-    if (isGameOver()) return;
-    if (!isTurn()) return;
-    const piece = pieceAtSquare(square);
-    const isMove = room.moveFrom && room.moveFrom !== square && room.possibleMoves[square];
-    const isSelect = !isMove && piece.color === room.side[0];
-    const isDeselect = !isMove && !isSelect && room.moveFrom;
+  if (isLoading) return <div>Loading...</div>;
 
-    if (isMove) move(room.moveFrom, square);
-    else if (isDeselect) deselectPiece();
-    else if (isSelect) select(square);
-  }
   return (
-    <div className="flex-1 py-8 justify-center w-full flex">
-      <div className="grid room-grid-template items-center gap-10">
-        <ChatRoom />
-        <div>
-          <PlayerStatus
-            color={room.side === 'white' ? 'black' : 'white'}
-            username={room.opponent?.username || 'Opponent'}
-            timeLeft={room.opponent?.timeLeft || 0}
-            picture={room.opponent?.picture || ''}
-            rating={room.opponent?.rating || 800}
-            side="top"
+    <>
+      <Layout
+        left={<ChatRoom />}
+        center={
+          <Board
+            isWhite={room.isWhite}
+            fen={room.fen}
+            onChange={onChange}
+            player={{
+              rating: user?.rating,
+              picture: user?.picture,
+              username: user?.nickname,
+              clockms: room.player_clockms,
+            }}
+            opponent={{
+              rating: room.opponent?.rating,
+              picture: room.opponent?.picture,
+              username: room.opponent?.username,
+              clockms: room.opponent_clockms,
+            }}
           />
-          <div style={{ maxWidth: '70vh', width: '70vw', margin: '0 auto' }}>
-            <Chessboard
-              id={'board'}
-              position={room.fen}
-              animationDuration={300}
-              arePremovesAllowed={false}
-              customPieces={customPieces}
-              customSquare={CustomSquare}
-              boardOrientation={room.side}
-              arePiecesDraggable={isTurn()}
-              onSquareClick={onSquareClick}
-              customSquareStyles={room.possibleMoves}
-              customDarkSquareStyle={customDarkSquareStyle}
-              customLightSquareStyle={customLightSquareStyle}
-              isDraggablePiece={({ piece }) => {
-                return piece.startsWith(room.side[0]) && isTurn() && !isGameOver();
-              }}
-            />
-          </div>
-          <PlayerStatus
-            side="bottom"
-            color={room.side}
-            picture={user?.picture || ''}
-            rating={user?.rating || 800}
-            timeLeft={room.timeLeft}
-            username={user?.nickname || ''}
+        }
+        right={<History />}
+      />
+      <Dialog open={room.isOpen} onOpenChange={(open) => roomState.set.isOpen(open)}>
+        <Content>
+          <Summary
+            isAborted={false}
+            isDraw={false}
+            isWinner={room.isWinner}
+            rating={user?.rating || 0}
           />
-        </div>
-        <History />
-      </div>
-    </div>
+        </Content>
+      </Dialog>
+    </>
   );
 };
 
diff --git a/src/components/Room/useGame.ts b/src/components/Room/useGame.ts
index be60c6e..36d1132 100644
--- a/src/components/Room/useGame.ts
+++ b/src/components/Room/useGame.ts
@@ -1,45 +1,49 @@
 import { useQuery } from '@tanstack/react-query';
 import { createStore } from '@udecode/zustood';
 import { Chess, Square } from 'chess.js';
-import { CSSProperties, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { trpc } from '~/helpers/trpc';
 import { GameResponse, GameStatus, Move, Moves } from '~/interfaces';
 import { useAuth } from '~/providers/AuthProvider';
 import { useSocket } from '~/providers/SocketProvider';
-import { PlayerSide } from '../../interfaces';
-type MoveResponse = { fen: string; moves: Move[]; w_clockms: number; b_clockms: number };
-export const roomState = createStore('room')<{
-  side: PlayerSide;
-  status: GameStatus;
-  moveFrom: string;
-  possibleMoves: { [key in Square]?: CSSProperties };
-  moves: Moves;
+type MoveResponse = {
   fen: string;
-  timeLeft: number;
+  moves: Move[];
+  w_clockms: number;
+  b_clockms: number;
+  winner: string;
+};
+type RoomState = {
+  fen: string;
+  moves: Moves;
+  isWinner: boolean;
+  isOpen: boolean;
+  isWhite: boolean;
+  status: GameStatus;
+  player_clockms: number;
+  opponent_clockms: number;
   opponent?: {
-    username?: string;
-    picture?: string;
     rating?: number;
-    timeLeft: number;
+    picture?: string;
+    username?: string;
   };
-  winner: string;
-}>(
+};
+export const roomState = createStore('room')<RoomState>(
   {
-    side: 'white' as PlayerSide,
-    status: 'pending' as GameStatus,
-    possibleMoves: {},
-    moves: [] as Moves,
-    moveFrom: '',
     fen: '',
-    timeLeft: 0,
+    isOpen: false,
+    player_clockms: 0,
+    moves: [] as Moves,
+    opponent_clockms: 0,
+    isWhite: true,
+    status: 'pending' as GameStatus,
+    isWinner: false,
     opponent: {
       username: '',
       picture: '',
       rating: 0,
-      timeLeft: 0,
     },
-    winner: '',
   },
   {
     devtools: {
@@ -68,60 +72,33 @@ export default function useGame() {
       return result as GameResponse;
     },
     onSuccess(data) {
-      const side = data.white.uid === user?.uid ? 'white' : 'black';
-      const opponent = side === 'white' ? data.black : data.white;
+      const isWhite = data.white.uid === user?.uid;
+      const opponent = isWhite ? data.black : data.white;
       chess.load(data.fen);
-      const newState = {
-        side,
-        status: data.status,
-        moves: data.moves,
+      const newState: Partial<RoomState> = {
+        isWhite,
         fen: data.fen,
-        timeLeft: side === 'white' ? data.w_clockms : data.b_clockms,
-        opponent: {
-          timeLeft: side === 'white' ? data.b_clockms : data.w_clockms,
-        },
+        moves: data.moves,
+        status: data.status,
+        isOpen: data.status === 'completed',
+        isWinner: isWhite && data.winner === data.white_id,
+        player_clockms: isWhite ? data.w_clockms : data.b_clockms,
+        opponent_clockms: isWhite ? data.b_clockms : data.w_clockms,
       };
 
       opponent &&
         Object.assign(newState, {
+          opponent_clockms: isWhite ? data.b_clockms : data.w_clockms,
           opponent: {
             username: opponent.nickname,
             picture: opponent.picture,
             rating: opponent.rating,
-            timeLeft: opponent.uid === data.black.uid ? data.b_clockms : data.w_clockms,
           },
         });
       roomState.set.mergeState({ ...(newState as any) });
     },
   });
 
-  useEffect(() => {
-    if (!game?.id) return;
-    socket.emit('game:join', { data: { gameId: params.gameId } });
-    socket.on('opponent:found', refetch);
-    socket.on('opponent:joined', refetch);
-    socket.on('game:start', refetch);
-    socket.on('game:update', ({ fen, b_clockms, w_clockms, moves }: MoveResponse) => {
-      roomState.set.mergeState({
-        moveFrom: '',
-        moves,
-        fen,
-        possibleMoves: {},
-        timeLeft: game.white.uid === user?.uid ? w_clockms : b_clockms,
-        opponent: {
-          ...roomState.get.opponent?.(),
-          timeLeft: game.white.uid === user?.uid ? b_clockms : w_clockms,
-        },
-      });
-      chess.load(game.fen);
-    });
-    socket.on('game:status', (status: GameStatus) => {
-      roomState.set.mergeState({
-        status,
-      });
-    });
-  }, [game?.id]);
-
   const move = useCallback(async (from: string, to: string) => {
     const move = chess.move({ from, to });
     if (!move) return;
@@ -130,20 +107,15 @@ export default function useGame() {
       result = (await trpc.mutation('game.move', {
         move: move.san,
         gameId: params.gameId,
-        clockms: roomState.get.timeLeft(),
+        clockms: roomState.get.player_clockms(),
       })) as MoveResponse;
 
       if (result) {
         roomState.set.mergeState({
           fen: result.fen,
-          moveFrom: '',
           moves: result.moves,
-          timeLeft: result.w_clockms,
-          possibleMoves: {},
-          opponent: {
-            ...roomState.get.opponent?.(),
-            timeLeft: result.b_clockms,
-          },
+          player_clockms: result.w_clockms,
+          opponent_clockms: result.b_clockms,
         });
       }
     } catch (e) {
@@ -151,84 +123,55 @@ export default function useGame() {
     }
   }, []);
 
-  const resign = useCallback(() => {
-    socket.emit('game:resign', params.gameId);
-  }, []);
-
-  const draw = useCallback(() => {
-    socket.emit('game:draw', params.gameId);
-  }, []);
-
-  const isTurn = useCallback(() => {
-    const { side, status } = roomState.store.getState();
-    return side[0] === chess.turn() && status === 'started';
-  }, []);
-
-  const possibleMoves = useCallback((square: Square) => {
-    return getMoveOptions(chess, square);
+  const onGameUpdate = useCallback(({ fen, b_clockms, w_clockms, moves, winner }: MoveResponse) => {
+    if (!game) return;
+    chess.load(game.fen);
+    const stateUpdate: Partial<RoomState> = {};
+    const isWhite = game.white.uid === user?.uid;
+    if (chess.isGameOver()) {
+      stateUpdate.status = 'completed';
+      stateUpdate.isWinner = isWhite && winner === game.white_id;
+    }
+    stateUpdate.moves = moves;
+    stateUpdate.fen = fen;
+    stateUpdate.player_clockms = isWhite ? w_clockms : b_clockms;
+    stateUpdate.opponent_clockms = isWhite ? b_clockms : w_clockms;
+    roomState.set.mergeState(stateUpdate);
   }, []);
 
-  const isGameOver = useCallback(() => {
-    return chess.isCheckmate();
+  const resign = useCallback(() => {
+    // socket.emit('game:resign', params.gameId);
   }, []);
 
-  const deselectPiece = useCallback(() => {
-    roomState.set.mergeState({
-      moveFrom: '',
-      possibleMoves: {},
-    });
+  const draw = useCallback(() => {
+    // socket.emit('game:draw', params.gameId);
   }, []);
 
-  const select = useCallback(
-    (square: Square) => {
-      roomState.set.moveFrom(square);
-      roomState.set.possibleMoves(getMoveOptions(chess, square));
-    },
-    [move, deselectPiece],
-  );
-
   const pieceAtSquare = useCallback(
     (square: Square) => {
       return chess.get(square);
     },
     [chess],
   );
+
+  useEffect(() => {
+    if (!game?.id) return;
+    socket.emit('game:join', { data: { gameId: params.gameId } });
+    socket.on('opponent:found', refetch);
+    socket.on('opponent:joined', refetch);
+    socket.on('game:start', refetch);
+    socket.on('game:update', onGameUpdate);
+    socket.on('game:status', (status: GameStatus) => {
+      roomState.set.mergeState({
+        status,
+      });
+    });
+  }, [game?.id]);
   return {
     move,
     draw,
-    select,
     resign,
-    isTurn,
     isLoading,
-    isGameOver,
-    possibleMoves,
     pieceAtSquare,
-    deselectPiece,
-  };
-}
-
-function getMoveOptions(game: Chess, square: Square) {
-  const moves = game.moves({
-    square,
-    verbose: true,
-  });
-
-  if (moves.length === 0) return {};
-
-  const newSquares: { [key in Square]?: CSSProperties } = {};
-
-  moves.map((move) => {
-    newSquares[move.to] = {
-      background:
-        game.get(move.to) && game.get(move.to).color !== game.get(square).color
-          ? 'radial-gradient(circle, rgba(0,0,0,.1) 85%, transparent 85%)'
-          : 'radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)',
-      borderRadius: '50%',
-    };
-    return move;
-  });
-  newSquares[square] = {
-    background: 'rgba(255, 255, 0, 0.4)',
   };
-  return newSquares;
 }
diff --git a/src/components/UI/Panel.ui.tsx b/src/components/UI/Panel.ui.tsx
index d3b0a3a..8d69804 100644
--- a/src/components/UI/Panel.ui.tsx
+++ b/src/components/UI/Panel.ui.tsx
@@ -8,7 +8,7 @@ export default function Panel(props: {
 }) {
   return (
     <div
-      style={{ height: '90%', ...props.containerStyles }}
+      style={{ ...props.containerStyles }}
       className={`border border-sky-600 flex flex-col rounded-md overflow-hidden`}
     >
       <div className="p-5 pb-4 border-b border-gray-200">{props.header}</div>
diff --git a/src/index.css b/src/index.css
index 276ebc6..8cf8c42 100644
--- a/src/index.css
+++ b/src/index.css
@@ -46,50 +46,3 @@
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
   }
 }
-
-.room {
-  flex: 1;
-  display: block;
-  overflow-y: auto;
-
-  padding: 1rem;
-}
-.header {
-  position: sticky;
-}
-.board_container {
-  flex: 1;
-  width: 90vw;
-  max-width: 80vh;
-  margin: 0 auto;
-}
-
-.gameroom {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-@media screen and (min-width: 768px) {
-  .room {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: stretch;
-    gap: 1rem;
-  }
-
-  .room-grid-template {
-    grid-template-columns: minmax(min-content, 348px) min-content minmax(min-content, 348px);
-  }
-  .header {
-    position: sticky;
-  }
-  .board_container {
-    flex: 1;
-    max-width: 70vw;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin: unset;
-  }
-}