Index: components/FreeflowCard.jsx
===================================================================
--- components/FreeflowCard.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/FreeflowCard.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,13 @@
+import React from 'react'
+
+const FreeflowCard = ( { card } ) => {
+    const src = `/cards/${card}.png`;
+
+    return (
+      <div className="card" style={{backgroundImage: `url("${src}")`}}>
+        
+      </div>
+    )
+}
+
+export default FreeflowCard
Index: components/LoginScreen.jsx
===================================================================
--- components/LoginScreen.jsx	(revision ace78655f6db8dbc9acd8ded9cb43af6a42152ce)
+++ components/LoginScreen.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -77,6 +77,4 @@
         axios.post(`/api/postgre`, {
             action: 'login',
-            // username: 'drama',
-            // password: 'drama'
             username: styleState.style.loginScreenInfo.username,
             password: styleState.style.loginScreenInfo.password,
Index: components/Notification.jsx
===================================================================
--- components/Notification.jsx	(revision ace78655f6db8dbc9acd8ded9cb43af6a42152ce)
+++ components/Notification.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -24,4 +24,10 @@
     }
 
+    if (styleState.style.notification.show === true) {
+        setTimeout(() => {
+            close();
+        }, 3000);
+    }
+
     return (
         <div className="notification" style={{display: display, backgroundColor: bg}}>
Index: components/poker/PokerHeader.jsx
===================================================================
--- components/poker/PokerHeader.jsx	(revision ace78655f6db8dbc9acd8ded9cb43af6a42152ce)
+++ components/poker/PokerHeader.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -3,11 +3,70 @@
 import Link from 'next/link'
 
+import { useRouter } from 'next/router'
+
 import { AiOutlineArrowLeft } from 'react-icons/ai'
 
+import { useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
+import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
+import { setStyle } from '../../redux/reducers/styleSlice'
+
+import axios from 'axios';
+
 const PokerHeader = () => {
+    const dispatch = useDispatch();
+
+    const router = useRouter();
+
     const playerState = useSelector(state => state.player);
     const styleState = useSelector(state => state.style);
+
+    useEffect(() => async function() {
+        // display loading screen
+        dispatch(setStyle({
+            ...styleState.style,
+            displayLoadingScreen: true,
+        }));
+
+        let interval = setInterval(() => {
+            axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+                if (res.data?.success) {
+                    dispatch(setPokerGame(res.data?.pokerGame))
+                }
+            });
+        }, 3000);
+
+        axios.get(`/api/poker?action=get_player_info_on_enter&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+            if (res.data?.success) {
+                dispatch(setPlayer({
+                    ...playerState.player,
+                    displayName: res.data?.displayName,
+                    session_id: res.data?.session_id,
+                    credits: res.data?.credits,
+                }));
+
+                dispatch(setStyle({
+                    ...styleState.style,
+                    displayLoadingScreen: false,
+                }))
+            }
+            else {
+                dispatch(setStyle({
+                    ...styleState.style,
+                    notification: {
+                        show: true,
+                        text: 'Please login in order to play poker.',
+                        status: 'error',
+                    },
+                    displayLoadingScreen: false,
+                }))
+
+                router.push('/');
+            }
+        });
+        
+        return () => clearInterval(interval);
+    }, [playerState.pokerGame.player.table])
 
     return (
Index: components/poker/PokerSections.jsx
===================================================================
--- components/poker/PokerSections.jsx	(revision ace78655f6db8dbc9acd8ded9cb43af6a42152ce)
+++ components/poker/PokerSections.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -1,10 +1,38 @@
 import React from 'react'
 
+import Cards from './sections/Cards'
+import CardsInTheMiddle from './sections/CardsInTheMiddle'
+import Chairs from './sections/Chairs'
+import Messages from './sections/Messages'
+import PlayButtons from './sections/PlayButtons'
+import PickATable from './sections/PickATable'
+
+import { useSelector, useDispatch } from 'react-redux'
+
 const PokerSections = () => {
-  return (
-    <div>
-        
-    </div>
-  )
+  const playerState = useSelector(state => state.player);
+
+  if (playerState.pokerGame.player.table.length > 0) {
+    return (
+      <>
+          <Messages/>
+
+          <Chairs/>
+
+          <Cards/>
+
+          <CardsInTheMiddle/>
+
+          <PlayButtons/>
+      </>
+    )
+  }
+  else {
+    return (
+      <>
+        <PickATable/>
+      </>
+    )
+  }
 }
 
Index: components/poker/sections/Cards.jsx
===================================================================
--- components/poker/sections/Cards.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/Cards.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const Cards = () => {
+  return (
+    <div>
+        
+    </div>
+  )
+}
+
+export default Cards
Index: components/poker/sections/CardsInTheMiddle.jsx
===================================================================
--- components/poker/sections/CardsInTheMiddle.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/CardsInTheMiddle.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux'
+import FreeflowCard from '../../FreeflowCard';
+
+const CardsInTheMiddle = () => {
+    const playerState = useSelector(state => state.player);
+
+    return (
+      <div className='cardsInTheMiddleContainer'>
+          {playerState?.pokerGame?.table.cards?.map((card, i) => (
+            <FreeflowCard key={card + i} card={card}/>
+          ))}
+      </div>
+    )
+}
+
+export default CardsInTheMiddle
Index: components/poker/sections/Chairs.jsx
===================================================================
--- components/poker/sections/Chairs.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/Chairs.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux'
+import FreeflowCard from '../../FreeflowCard';
+
+const Chairs = () => {
+  const playerState = useSelector(state => state.player);
+
+  const positions = [
+    { x: 16, y: 35 },
+    { x: 16, y: 65 },
+    { x: 25, y: 85 },
+    { x: 40, y: 90 },
+    { x: 60, y: 90 },
+    { x: 75, y: 85 },
+    { x: 84, y: 65 },
+    { x: 84, y: 35 },
+  ]
+
+  return (
+    <div className="pokerChairsContainer">
+      {positions.map((pos, i) => {
+        let extraClass = '';
+        if (i === playerState.pokerGame.table.turnIdx) extraClass = 'onTurn';
+        if (playerState.pokerGame.table.players[i] !== undefined && playerState.pokerGame.table.players[i].isFolded) extraClass = 'folded';
+
+        return (
+          <div className={`pokerChair ${extraClass}`} style={{left: `${pos.x}vw`, top: `${pos.y}vh`}} key={'chair' + pos.x + pos.y}>
+            {playerState.pokerGame.table.players[i] !== undefined && playerState.pokerGame.table.players[i].isSatDown && (
+              <div className="pokerPlayerCardsContainer">
+                <div>
+                  { playerState.pokerGame.table.players[i].cards[0] !== undefined && <FreeflowCard card={playerState.pokerGame.table.players[i].cards[0]}/> }
+                  { playerState.pokerGame.table.players[i].cards[1] !== undefined && <FreeflowCard card={playerState.pokerGame.table.players[i].cards[1]}/> }
+                </div>
+              </div>
+            )}
+
+            <div>
+              {playerState.pokerGame.table.players[i] !== undefined && playerState.pokerGame.table.players[i].isSatDown && <p>{playerState.pokerGame.table.players[i].displayName}</p>}
+              {playerState.pokerGame.table.players[i] !== undefined && playerState.pokerGame.table.players[i].isSatDown && <p>${playerState.pokerGame.table.players[i].betAmount}</p>}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default Chairs
Index: components/poker/sections/Messages.jsx
===================================================================
--- components/poker/sections/Messages.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/Messages.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux'
+
+const Messages = () => {
+    const playerState = useSelector(state => state.player);
+    const styleState = useSelector(state => state.style);
+
+    let roundMessage = '';
+    if (playerState.pokerGame.table.round === 1) {
+        roundMessage = ' - Everyone must call $20 before cards are dealt.';
+    }
+
+    let turnMessage = '';
+    let callMessage = '';
+    if (playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx] !== undefined) {
+        turnMessage = `It\'s ${playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx].displayName}\'s turn.`;
+
+        if (playerState.pokerGame.table.lastBet > 0) {
+            callMessage = `${playerState.pokerGame.table.players[playerState.pokerGame.table.turnIdx].displayName} must at least call $${playerState.pokerGame.table.lastBet}`;
+        }
+    }
+
+    return (
+        <div className="pokerMessagesContainer">
+            { playerState.pokerGame.table.started && <p>Round {playerState.pokerGame.table.round}/5{roundMessage}</p> }
+            { !playerState.pokerGame.table.started && <p>Waiting for coordinator {playerState.pokerGame.table.creator} to start the game.</p> }
+            { playerState.pokerGame.table.started && <p>{turnMessage}</p> }
+            { playerState.pokerGame.table.started && <p>{callMessage}</p> }
+        </div>
+    )
+}
+
+export default Messages
Index: components/poker/sections/PickATable.jsx
===================================================================
--- components/poker/sections/PickATable.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/PickATable.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,65 @@
+import React from 'react'
+
+import { useRef } from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { setPoker } from '../../../redux/reducers/styleSlice';
+
+import axios from 'axios';
+import { setPokerGame } from '../../../redux/reducers/playerSlice';
+
+const PickATable = () => {
+    const ref = useRef(null);
+
+    const dispatch = useDispatch();
+
+    const playerState = useSelector(state => state.player);
+    const styleState = useSelector(state => state.style);
+    
+    function keyUp(e) {
+        if (e.key === 'Enter') {
+            createATable();
+        }
+    }
+
+    function onChangeTableName(e) {
+        dispatch(setPoker({
+            ...styleState.poker,
+            inputControls: {
+                ...styleState.poker.inputControls,
+                tableName: e.target.value,
+            }
+        }))
+    }
+
+    function createATable() {
+        axios.get(`/api/poker?action=create_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&displayName=${playerState.player.displayName}&tableName=${styleState.poker.inputControls.tableName}`);
+    }
+
+    function joinATable(e) {
+        axios.get(`/api/poker?action=join_a_table&session_id=${localStorage.CAESSINO_SESSION_ID}&tableId=${e.target?.dataset?.table}&displayName=${playerState.player.displayName}`);
+    }
+
+    return (
+        <div className="pokerPickATableContainer">
+            <div className="createATable">
+                <input ref={ref} type="text" onChange={(e) => {onChangeTableName(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.poker.inputControls.tableName} placeholder="Table name"/>
+                <button className="secondaryButton" onClick={() => createATable()}>Create a table</button>
+            </div>
+            <div>
+                <h3>Pick a table:</h3>
+                <div onClick={(e) => joinATable(e)}>
+                    {playerState.pokerGame.tables.map(table => (
+                        <div data-table={table.id} key={table.id}>
+                            <p data-table={table.id}>Table name: {table.name}</p>
+                            <p data-table={table.id}>Creator: {table.creator}</p>
+                            <p data-table={table.id}>Players: {table.players.length}/8</p>
+                            <p data-table={table.id}>Join</p>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PickATable
Index: components/poker/sections/PlayButtons.jsx
===================================================================
--- components/poker/sections/PlayButtons.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
+++ components/poker/sections/PlayButtons.jsx	(revision b13f93b3ae8e02def0043ff767c69e28939b36ff)
@@ -0,0 +1,62 @@
+import React from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import axios from 'axios';
+import { setPokerGame } from '../../../redux/reducers/playerSlice';
+
+const PlayButtons = () => {
+  const dispatch = useDispatch();
+
+  const playerState = useSelector(state => state.player);
+
+  function sitDown() {
+    axios.get(`/api/poker?action=sit_down&session_id=${localStorage.CAESSINO_SESSION_ID}&tableId=${playerState.pokerGame.player.table}`);
+  }
+
+  function startGame() {
+    axios.get(`/api/poker?action=start_game&session_id=${localStorage.CAESSINO_SESSION_ID}`);
+  }
+
+  const checkClass = playerState.pokerGame.table.lastBet === 0 ? 'secondaryButton' : 'tertiaryButton';
+  const callClass = 'secondaryButton'
+  const raiseClass = playerState.pokerGame.table.round >= 2 ? 'secondaryButton' : 'tertiaryButton';
+  const foldClass = 'secondaryButton';
+
+  function check() {
+    axios.get(`/api/poker?action=game_action&session_id=${localStorage.CAESSINO_SESSION_ID}&specificAction=check&betAmount=0`);
+  }
+
+  function call() {
+    axios.get(`/api/poker?action=game_action&session_id=${localStorage.CAESSINO_SESSION_ID}&specificAction=call&betAmount=0`);
+  }
+
+  function raise() {
+    axios.get(`/api/poker?action=game_action&session_id=${localStorage.CAESSINO_SESSION_ID}&specificAction=raise&betAmount=0`);
+  }
+
+  function fold() {
+    axios.get(`/api/poker?action=game_action&session_id=${localStorage.CAESSINO_SESSION_ID}&specificAction=fold&betAmount=0`);
+  }
+
+  if (playerState.pokerGame.table.started && playerState.pokerGame.player.isSatDown) {
+    return (
+      <div className="pokerPlayButtonsContainer">
+        <button className={checkClass} onClick={() => check()}>Check</button>
+        <button className={callClass} onClick={() => call()}>Call</button>
+        <button className={raiseClass} onClick={() => raise()}>Raise</button>
+        <button className={foldClass} onClick={() => fold()}>Fold</button>
+      </div>
+    )
+  }
+  else {
+    return (
+      <div className="pokerPlayButtonsContainer">
+        {!playerState.pokerGame.table.started && playerState.pokerGame.player.isCoordinator && playerState.pokerGame.player.isSatDown && <button className="secondaryButton" onClick={() => startGame()}>Start game</button>}
+        {!playerState.pokerGame.table.started && !playerState.pokerGame.player.isSatDown && <button className="secondaryButton" onClick={() => sitDown()}>Take a seat</button>}
+      </div>
+    )
+  }
+}
+
+export default PlayButtons
