Index: components/roulette/BetModal.jsx
===================================================================
--- components/roulette/BetModal.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/BetModal.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,89 @@
+import React from 'react'
+
+import { GiTwoCoins } from 'react-icons/gi'
+import { AiOutlineClose } from 'react-icons/ai'
+
+import { useSelector, useDispatch } from 'react-redux'
+import { setRoulette } from '../../redux/reducers/styleSlice';
+
+import axios from 'axios';
+import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
+
+const BetModal = () => {
+    const dispatch = useDispatch();
+
+    const playerState = useSelector(state => state.player);
+    const styleState = useSelector(state => state.style);
+
+    function chooseBet(e) {
+        dispatch(setRoulette({
+            ...styleState.roulette,
+            inputControls: {
+                ...styleState.roulette.inputControls,
+                bet: {
+                    ...styleState.roulette.inputControls.bet,
+                    chosenCredits: parseInt(e.target.value),
+                }
+            }
+        }));
+    }
+
+    function placeBet() {
+        axios.get(`/api/roulette?action=place_bet&session_id=${localStorage.CAESSINO_SESSION_ID}&betAmount=${styleState.roulette.inputControls.bet.chosenCredits}&whichBets=${styleState.roulette.whichBets.toString()}`).then(res => {
+            if (res.data?.success) {
+                dispatch(setPlayer({
+                    ...playerState.player,
+                    credits: res.data?.credits,
+                }));
+
+                dispatch(setRouletteGame(res.data?.game));
+
+                closeModal(false);
+            }
+        });
+    }
+
+    function closeModal(removeCoin = true) {
+        if (removeCoin) {
+            dispatch(setRoulette({
+                ...styleState.roulette,
+                displays: {
+                  ...styleState.roulette.displays,
+                  betModal: false,
+                },
+                coinPlaced: {
+                  x: 0,
+                  y: 0
+                }
+              }))
+        }
+        else {
+            dispatch(setRoulette({
+                ...styleState.roulette,
+                displays: {
+                    ...styleState.roulette.displays,
+                    betModal: false,
+                }
+            }));
+        }
+    }
+
+    return (
+        <div className="rouletteBetModal" style={{display: styleState.roulette.displays.betModal ? 'flex' : 'none'}}>
+            <p>You have chosen to bet on: <span>{styleState.roulette.whichBets.map((bet, i) => `${bet} `)}</span><br/>Please select the amount you will bet</p>
+            <div>
+                <div>
+                    <input type="range" className="primarySlider" min={0} max={playerState.player.credits} step={1} value={styleState.roulette.inputControls.bet.chosenCredits} onChange={(e) => chooseBet(e)} />
+                    <div style={{marginTop: '15px', marginBottom: '-30px'}}>
+                        <span>${styleState.roulette.inputControls.bet.chosenCredits}</span>
+                    </div>
+                </div>
+                <button style={{marginTop: '50px'}} className="primaryButton" onClick={() => placeBet()}>Place Bet <GiTwoCoins style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
+                <br/>
+                <button style={{position: 'absolute', bottom: '10%', left: '50%', transform: 'translateX(-50%)'}} className="tertiaryButton" onClick={() => closeModal()}>Cancel <AiOutlineClose style={{marginTop: '3px', marginBottom: '-3px'}} /></button>
+            </div>
+        </div>
+    )
+}
+
+export default BetModal
Index: components/roulette/BetsImage.jsx
===================================================================
--- components/roulette/BetsImage.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/BetsImage.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,310 @@
+import React from 'react'
+
+import { useDispatch, useSelector } from 'react-redux';
+import { setRoulette } from '../../redux/reducers/styleSlice';
+
+const BetsImage = () => {
+    const dispatch = useDispatch();
+
+    const playerState = useSelector(state => state.player);
+    const styleState = useSelector(state => state.style);
+
+    function selectWhichBet(e) {
+        const imgRect = document.getElementById('rouletteBetsImg').getBoundingClientRect();
+    
+        const coinOffset = 16;
+    
+        const xOffset = e.clientX - imgRect.x + coinOffset;
+        const yOffset = e.clientY - imgRect.y + coinOffset;
+    
+        const MULTIPLIER = 4;
+    
+        const singleX = imgRect.width / ( 14 * MULTIPLIER );
+        const singleY = imgRect.height / ( 4 * MULTIPLIER );
+    
+        let clicked = getClickedArray(xOffset, singleX, yOffset, singleY);
+
+        if (clicked.length > 0 && playerState.rouletteGame.status.substr(1, 1) === '1') {
+          const playerIdx = playerState.rouletteGame.players.map(e=>e.session_id).indexOf(localStorage.CAESSINO_SESSION_ID);
+          if (playerIdx !== -1 && playerState.rouletteGame.players[playerIdx].status.substr(1, 1) === '1') {
+            openModal(clicked, e);
+          }
+        }
+    }
+
+    function openModal(clicked, e) {
+      dispatch(setRoulette({
+        ...styleState.roulette,
+        whichBets: clicked,
+        displays: {
+          ...styleState.roulette.displays,
+          betModal: true,
+        },
+        coinPlaced: {
+          x: e.clientX + 16,
+          y: e.clientY + 16
+        }
+      }))
+    }
+
+    return (
+        <>
+            <img id="rouletteBetsImg" src="/images/roulette-bets.png" alt="Roulette bets" onClick={(e) => selectWhichBet(e)} style={{zIndex: 10}}/>
+        </>
+    )
+}
+
+
+function getClickedArray(xOffset, singleX, yOffset, singleY) {
+    let clicked = [];
+  
+    if (xOffset < 4 * singleX) {
+      if (yOffset < 3 * 4 * singleY) {
+        clicked = ['0']
+      }
+    }
+    else if (xOffset < 7 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['3']
+      else if (yOffset < 5 * singleY)     clicked = ['3', '2']
+      else if (yOffset < 7 * singleY)     clicked = ['2']
+      else if (yOffset < 8 * singleY)     clicked = ['2', '1']
+      else if (yOffset < 11 * singleY)    clicked = ['1']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['1-18']
+    }
+    else if (xOffset < 9 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['3', '6']
+      else if (yOffset < 5 * singleY)     clicked = ['3', '2', '6', '5']
+      else if (yOffset < 7 * singleY)     clicked = ['2', '5']
+      else if (yOffset < 8 * singleY)     clicked = ['2', '1', '5', '4']
+      else if (yOffset < 11 * singleY)    clicked = ['1', '4']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['1-18']
+    }
+    else if (xOffset < 11 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['6']
+      else if (yOffset < 5 * singleY)     clicked = ['6', '5']
+      else if (yOffset < 7 * singleY)     clicked = ['5']
+      else if (yOffset < 8 * singleY)     clicked = ['5', '4']
+      else if (yOffset < 11 * singleY)    clicked = ['4']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['1-18']
+    }
+    else if (xOffset < 13 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['6', '9']
+      else if (yOffset < 5 * singleY)     clicked = ['6', '5', '9', '8']
+      else if (yOffset < 7 * singleY)     clicked = ['5', '8']
+      else if (yOffset < 8 * singleY)     clicked = ['5', '4', '8', '7']
+      else if (yOffset < 11 * singleY)    clicked = ['4', '7']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    ;
+    }
+    else if (xOffset < 15 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['9']
+      else if (yOffset < 5 * singleY)     clicked = ['9', '8']
+      else if (yOffset < 7 * singleY)     clicked = ['8']
+      else if (yOffset < 8 * singleY)     clicked = ['8', '7']
+      else if (yOffset < 11 * singleY)    clicked = ['7']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['Even']
+    }
+    else if (xOffset < 17 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['9', '12']
+      else if (yOffset < 5 * singleY)     clicked = ['9', '8', '12', '11']
+      else if (yOffset < 7 * singleY)     clicked = ['8', '11']
+      else if (yOffset < 8 * singleY)     clicked = ['8', '7', '11', '10']
+      else if (yOffset < 11 * singleY)    clicked = ['7', '10']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['Even']
+    }
+    else if (xOffset < 19 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['12']
+      else if (yOffset < 5 * singleY)     clicked = ['12', '11']
+      else if (yOffset < 7 * singleY)     clicked = ['11']
+      else if (yOffset < 8 * singleY)     clicked = ['11', '10']
+      else if (yOffset < 11 * singleY)    clicked = ['10']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['1-12']
+      else if (yOffset < 16 * singleY)    clicked = ['Even']
+    }
+    else if (xOffset < 21 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['12', '15']
+      else if (yOffset < 5 * singleY)     clicked = ['12', '11', '15', '14']
+      else if (yOffset < 7 * singleY)     clicked = ['11', '14']
+      else if (yOffset < 8 * singleY)     clicked = ['11', '10', '14', '13']
+      else if (yOffset < 11 * singleY)    clicked = ['10', '13']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    ;
+      else if (yOffset < 16 * singleY)    ;
+    }
+    else if (xOffset < 23 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['15']
+      else if (yOffset < 5 * singleY)     clicked = ['15', '14']
+      else if (yOffset < 7 * singleY)     clicked = ['14']
+      else if (yOffset < 8 * singleY)     clicked = ['14', '13']
+      else if (yOffset < 11 * singleY)    clicked = ['13']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Red']
+    }
+    else if (xOffset < 25 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['15', '18']
+      else if (yOffset < 5 * singleY)     clicked = ['15', '14', '18', '17']
+      else if (yOffset < 7 * singleY)     clicked = ['14', '17']
+      else if (yOffset < 8 * singleY)     clicked = ['14', '13', '17', '16']
+      else if (yOffset < 11 * singleY)    clicked = ['13', '16']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Red']
+    }
+    else if (xOffset < 27 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['18']
+      else if (yOffset < 5 * singleY)     clicked = ['18', '17']
+      else if (yOffset < 7 * singleY)     clicked = ['17']
+      else if (yOffset < 8 * singleY)     clicked = ['17', '16']
+      else if (yOffset < 11 * singleY)    clicked = ['16']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Red']
+    }
+    else if (xOffset < 29 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['18', '21']
+      else if (yOffset < 5 * singleY)     clicked = ['18', '17', '21', '20']
+      else if (yOffset < 7 * singleY)     clicked = ['17', '20']
+      else if (yOffset < 8 * singleY)     clicked = ['17', '16', '20', '19']
+      else if (yOffset < 11 * singleY)    clicked = ['16', '19']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    ;
+    }
+    else if (xOffset < 31 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['21']
+      else if (yOffset < 5 * singleY)     clicked = ['21', '20']
+      else if (yOffset < 7 * singleY)     clicked = ['20']
+      else if (yOffset < 8 * singleY)     clicked = ['20', '19']
+      else if (yOffset < 11 * singleY)    clicked = ['19']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Black']
+    }
+    else if (xOffset < 33 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['21', '24']
+      else if (yOffset < 5 * singleY)     clicked = ['21', '20', '24', '23']
+      else if (yOffset < 7 * singleY)     clicked = ['20', '23']
+      else if (yOffset < 8 * singleY)     clicked = ['20', '19', '23', '22']
+      else if (yOffset < 11 * singleY)    clicked = ['19', '22']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Black']
+    }
+    else if (xOffset < 35 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['24']
+      else if (yOffset < 5 * singleY)     clicked = ['24', '23']
+      else if (yOffset < 7 * singleY)     clicked = ['23']
+      else if (yOffset < 8 * singleY)     clicked = ['23', '22']
+      else if (yOffset < 11 * singleY)    clicked = ['22']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['13-24']
+      else if (yOffset < 16 * singleY)    clicked = ['Black']
+    }
+    else if (xOffset < 37 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['24', '27']
+      else if (yOffset < 5 * singleY)     clicked = ['24', '23', '27', '26']
+      else if (yOffset < 7 * singleY)     clicked = ['23', '26']
+      else if (yOffset < 8 * singleY)     clicked = ['23', '22', '26', '25']
+      else if (yOffset < 11 * singleY)    clicked = ['22', '25']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    ;
+      else if (yOffset < 16 * singleY)    ;
+    }
+    else if (xOffset < 39 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['27']
+      else if (yOffset < 5 * singleY)     clicked = ['27', '26']
+      else if (yOffset < 7 * singleY)     clicked = ['26']
+      else if (yOffset < 8 * singleY)     clicked = ['26', '25']
+      else if (yOffset < 11 * singleY)    clicked = ['25']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['Odd']
+    }
+    else if (xOffset < 41 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['27', '30']
+      else if (yOffset < 5 * singleY)     clicked = ['27', '26', '30', '29']
+      else if (yOffset < 7 * singleY)     clicked = ['26', '29']
+      else if (yOffset < 8 * singleY)     clicked = ['26', '25', '29', '28']
+      else if (yOffset < 11 * singleY)    clicked = ['25', '28']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['Odd']
+    }
+    else if (xOffset < 43 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['30']
+      else if (yOffset < 5 * singleY)     clicked = ['30', '29']
+      else if (yOffset < 7 * singleY)     clicked = ['29']
+      else if (yOffset < 8 * singleY)     clicked = ['29', '28']
+      else if (yOffset < 11 * singleY)    clicked = ['28']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['Odd']
+    }
+    else if (xOffset < 45 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['30', '33']
+      else if (yOffset < 5 * singleY)     clicked = ['30', '29', '33', '32']
+      else if (yOffset < 7 * singleY)     clicked = ['29', '32']
+      else if (yOffset < 8 * singleY)     clicked = ['29', '28', '32', '31']
+      else if (yOffset < 11 * singleY)    clicked = ['28', '31']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    ;
+    }
+    else if (xOffset < 47 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['33']
+      else if (yOffset < 5 * singleY)     clicked = ['33', '32']
+      else if (yOffset < 7 * singleY)     clicked = ['32']
+      else if (yOffset < 8 * singleY)     clicked = ['32', '31']
+      else if (yOffset < 11 * singleY)    clicked = ['31']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['19-36']
+    }
+    else if (xOffset < 49 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['33', '36']
+      else if (yOffset < 5 * singleY)     clicked = ['33', '32', '36', '35']
+      else if (yOffset < 7 * singleY)     clicked = ['32', '35']
+      else if (yOffset < 8 * singleY)     clicked = ['32', '31', '35', '34']
+      else if (yOffset < 11 * singleY)    clicked = ['31', '34']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['19-36']
+    }
+    else if (xOffset < 52 * singleX) {
+      if (yOffset < 3 * singleY)          clicked = ['36']
+      else if (yOffset < 5 * singleY)     clicked = ['36', '35']
+      else if (yOffset < 7 * singleY)     clicked = ['35']
+      else if (yOffset < 8 * singleY)     clicked = ['35', '34']
+      else if (yOffset < 11 * singleY)    clicked = ['34']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    clicked = ['25-36']
+      else if (yOffset < 16 * singleY)    clicked = ['19-36']
+    }
+    else {
+      if (yOffset < 3 * singleY)          clicked = ['Remainder0']
+      else if (yOffset < 5 * singleY)     ;
+      else if (yOffset < 7 * singleY)     clicked = ['Remainder2']
+      else if (yOffset < 8 * singleY)     ;
+      else if (yOffset < 11 * singleY)    clicked = ['Remainder1']
+      else if (yOffset < 12 * singleY)    ;
+      else if (yOffset < 14 * singleY)    ;
+      else if (yOffset < 16 * singleY)    ;
+    }
+  
+    return clicked;
+  }
+
+export default BetsImage
Index: components/roulette/CoinOnTable.jsx
===================================================================
--- components/roulette/CoinOnTable.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/CoinOnTable.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux';
+
+const CoinOnTable = () => {
+    const styleState = useSelector(state => state.style);
+
+    return (
+        <>
+            {styleState.roulette.coinPlaced.x !== 0 && <img id="coinOnTable" src="/gold-coin.cur" alt="Gold coin" style={{zIndex: 20, position: 'absolute', left: `${styleState.roulette.coinPlaced.x}px`, top: `${styleState.roulette.coinPlaced.y}px`, transform: 'translate(-50%, -50%)'}}/>}
+        </>
+    )
+}
+
+export default CoinOnTable
Index: components/roulette/PlayersDisplay.jsx
===================================================================
--- components/roulette/PlayersDisplay.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/PlayersDisplay.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,28 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux'
+
+const PlayersDisplay = () => {
+    const playerState = useSelector(state => state.player);
+
+    return (
+        <div className="roulettePlayersContainer">
+            <div>
+                <p>Online:</p>
+                <hr/>
+                {playerState.rouletteGame?.players.map((player, i) => (
+                    player.status.substr(1, 1) === '1' ? <p key={player + i}>{player.name}</p> : <span key={player + i}></span>
+                ))}
+            </div>
+            <div>
+                <p>Betted:</p>
+                <hr/>
+                {playerState.rouletteGame?.players.map((player, i) => (
+                    player.status.substr(1, 1) === '2' ? <p key={player + i}>{player.name} <span style={{color: '#ead24d'}}>[{player.whichBets.toString()}]</span> ${player.betAmount}</p> : <span key={player + i}></span>
+                ))}
+            </div>
+        </div>
+  )
+}
+
+export default PlayersDisplay
Index: components/roulette/Roulette.jsx
===================================================================
--- components/roulette/Roulette.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/Roulette.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,31 @@
+import React from 'react'
+
+import Head from 'next/head'
+
+import RouletteHeader from './RouletteHeader'
+import Loading from '../Loading'
+import Alert from '../Alert'
+import Notification from '../Notification'
+import Sections from './Sections'
+
+const Roulette = () => {
+  return (
+    <div className="app rouletteMainContainer">
+      <Head>
+        <title>Caessino - Roulette</title>
+      </Head>
+
+      <RouletteHeader/>
+
+      <Sections/>
+
+      <Loading/>
+
+      <Alert/>
+
+      <Notification/>
+    </div>
+  )
+}
+
+export default Roulette
Index: components/roulette/RouletteHeader.jsx
===================================================================
--- components/roulette/RouletteHeader.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/RouletteHeader.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,102 @@
+import React from 'react'
+
+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 { setRouletteGame, setPlayer } from '../../redux/reducers/playerSlice'
+import { setRoulette, setStyle } from '../../redux/reducers/styleSlice'
+
+import axios from 'axios';
+
+const RouletteHeader = () => {
+    const dispatch = useDispatch();
+
+    const router = useRouter();
+
+    const playerState = useSelector(state => state.player);
+    const styleState = useSelector(state => state.style);
+
+    useEffect(() => {
+        // display loading screen
+        dispatch(setStyle({
+            ...styleState.style,
+            displayLoadingScreen: true,
+        }));
+
+        axios.get(`/api/roulette?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(setRouletteGame(res.data?.game));
+
+                dispatch(setRoulette({
+                    ...styleState.roulette,
+                    inputControls: {
+                        ...styleState.roulette.inputControls,
+                        bet: {
+                            ...styleState.roulette.inputControls.bet,
+                            chosenCredits: parseInt(res.data?.credits/2),
+                        }
+                    }
+                }));
+
+                dispatch(setStyle({
+                    ...styleState.style,
+                    displayLoadingScreen: false,
+                }))
+
+
+                if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 3) {
+                }
+
+                if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 2) {
+                }
+
+                if (parseInt(res.data?.game.status.toString().substr(1, 1)) == 1) {
+                }
+            }
+            else {
+                dispatch(setStyle({
+                    ...styleState.style,
+                    notification: {
+                        show: true,
+                        text: 'Please login in order to play roulette.',
+                        status: 'error',
+                    },
+                    displayLoadingScreen: false,
+                }))
+
+                router.push('/');
+            }
+        });
+    }, []);
+
+    return (
+        <header className="header">
+            <Link href="/" passHref>
+                <h2>
+                    <AiOutlineArrowLeft />
+                </h2>
+            </Link>
+            <nav>
+                <ul>
+                    <li>Hi, {playerState?.player?.displayName}</li>
+                    <li>Balance: ${playerState?.player?.credits}</li>
+                </ul>
+            </nav>
+        </header>
+    )
+}
+
+export default RouletteHeader
Index: components/roulette/Sections.jsx
===================================================================
--- components/roulette/Sections.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/Sections.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import BetModal from './BetModal';
+import BetsImage from './BetsImage';
+import CoinOnTable from './CoinOnTable';
+import PlayersDisplay from './PlayersDisplay';
+import Timer from './Timer';
+
+const Sections = () => {
+
+  return (
+    <>
+        <p className="rouletteInfoText">Please click on the number(s) you wish to bet on and select the amount you&apos;ll bet.<br/>Then, wait for the timer to go down to 0, and the wheel will spin. Best of luck 🍀</p>
+
+        <BetsImage/>
+
+        <CoinOnTable/>
+
+        <img id="rouletteWheelImg" src="/images/roulette-wheel.png" alt="Roulette wheel"/>
+
+        <PlayersDisplay/>
+
+        <Timer/>
+
+        <BetModal/>
+    </>
+  )
+}
+
+export default Sections
Index: components/roulette/Timer.jsx
===================================================================
--- components/roulette/Timer.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
+++ components/roulette/Timer.jsx	(revision 9bd09b003e0450668a5ceb182fb4d9dfb5a2d704)
@@ -0,0 +1,44 @@
+import React from 'react'
+
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux'
+import { setRouletteGame } from '../../redux/reducers/playerSlice';
+
+import axios from 'axios';
+
+const Timer = () => {
+    const dispatch = useDispatch();
+
+    const playerState = useSelector(state => state.player);
+
+    useEffect(() => {
+        let interval = setInterval(() => {
+            dispatch(setRouletteGame({
+                ...playerState.rouletteGame,
+                timeToStart: playerState.rouletteGame.timeToStart - 1,
+            }))
+
+            if (playerState.rouletteGame.timeToStart == 0) {
+                
+            }
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, [dispatch, playerState.rouletteGame.timeToStart, playerState.rouletteGame]);
+
+    function updateTimer() {
+        const timer = playerState.rouletteGame.timeToStart;
+
+        const timeString = (timer < 0 || timer > 90) ? '00:00' : '0' + parseInt(timer/60) + ':' + (timer%60 < 10 ? '0' : '') + (timer%60);
+
+        return timeString;
+    }
+
+    return (
+        <div className="rouletteTimer">
+            <span>{updateTimer()}</span>
+        </div>
+    )
+}
+
+export default Timer
