Index: components/Complain.jsx
===================================================================
--- components/Complain.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
+++ components/Complain.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -0,0 +1,113 @@
+import React from 'react'
+
+import { useSelector, useDispatch } from 'react-redux'
+
+import { useRef } from 'react'
+
+import { setStyle } from '../redux/reducers/styleSlice';
+
+import axios from 'axios';
+
+const ComplainScreen = () => {
+    const ref = useRef(null);
+
+    const dispatch = useDispatch();
+
+    const styleState = useSelector(state => state.style);
+
+    setTimeout(() => {
+        if (styleState.style.displayComplainScreen && styleState.style.complainScreenInfo.setFocus) {
+            ref.current.focus();
+            dispatch(setStyle({
+                ...styleState.style,
+                complainScreenInfo: {
+                    ...styleState.style.complainScreenInfo,
+                    setFocus: false
+                }
+            }))
+        }
+    }, 10);
+
+    function onChangeDescription(e) {
+        dispatch(setStyle({
+            ...styleState.style,
+            complainScreenInfo: {
+                ...styleState.style.complainScreenInfo,
+                description: e.target.value,
+            }
+        }))
+    }
+
+    function keyUp(e) {
+        if (e.key === 'Enter') {
+            complain();
+        }
+    }
+
+    function closeForm() {
+        dispatch(setStyle({
+            ...styleState.style,
+            displayComplainScreen: false,
+            complainScreenInfo: {
+                description: '',
+            },
+            inlineAlertText: '',
+        }));
+
+    }
+    function complain() {
+        dispatch(setStyle({
+            ...styleState.style,
+            displayLoadingScreen: true,
+        }))
+
+        axios.post(`/api/postgre`, {
+            action: 'complain',
+            session_id: localStorage.CAESSINO_SESSION_ID,
+            description: styleState.style.complainScreenInfo.description,
+        })
+            .then(res => {
+                if (res.data?.success) {
+                    dispatch(setStyle({
+                        ...styleState.style,
+                        displayLoadingScreen: false,
+                        displayComplainScreen: false,
+                        complainScreenInfo: {
+                            description: '',
+                        },
+                        notification: {
+                            show: true,
+                            text: 'Complain sent successfully',
+                            status: 'success',
+                        },
+                        inlineAlertText: '',
+                    }));
+                }
+                else {
+                    dispatch(setStyle({
+                        ...styleState.style,
+                        displayComplainScreen: true,
+                        inlineAlertText: res.data?.message,
+                    }));
+                }
+            })
+    }
+
+    return (
+        <div className="fullscreen fs-centered complainScreen" style={{display: styleState.style.displayComplainScreen ? 'block' : 'none'}}>
+            <div className="fs-inputs-container">
+                {styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
+                <div>
+                    <span>Describe the problem:</span>
+                    <textarea ref={ref} type="text" onChange={(e) => {onChangeDescription(e)}} onKeyUp={(e) => keyUp(e)} value={styleState.style.complainScreenInfo.description} placeholder="I have a problem with..."/>
+                    <div style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>
+                        <button className="primaryButton" onClick={() => closeForm()}>Close Form</button>
+                        <button className="secondaryButton" onClick={() => complain()}>Send Complaint</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ComplainScreen
Index: components/Header.jsx
===================================================================
--- components/Header.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/Header.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -54,4 +54,11 @@
   }
 
+  function complain() {
+    dispatch(setStyle({
+      ...styleState.style,
+      displayComplainScreen: true,
+    }))
+  }
+
   function showStats() {
     axios.get(`/api/postgre?action=get_stats&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
@@ -87,4 +94,6 @@
       ...styleState.style,
       displayManageCreditsScreen: true,
+      displayDepositModal: false,
+      displayWithdrawModal: false,
     }))
   }
@@ -144,5 +153,6 @@
               <>
                 <li onClick={() => {manageCredits()}}>Manage Credits</li>
-                <li onClick={() => {showStats()}}>Stats</li>
+                <li onClick={() => {showStats()}}>Statistics</li>
+                <li onClick={() => {complain()}}>Complain</li>
                 <li onClick={() => {logout()}}>Logout</li>
               </>
Index: components/LostConnection.jsx
===================================================================
--- components/LostConnection.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
+++ components/LostConnection.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { useSelector } from 'react-redux'
+
+const LostConnection = () => {
+    const styleState = useSelector(state => state.style);
+    
+    return (
+        <div className="fullscreen fs-centered lostConnectionScreen" style={{display: styleState.style.lostConnectionInfo.show ? 'block' : 'none', zIndex: 100}}>
+            <div>
+                <h3>Lost connection to the server.</h3>
+                <h3>This is a server error. Nothing you can do.</h3>
+                <h3>{styleState.style.lostConnectionInfo.message}</h3>
+            </div>
+        </div>
+    )
+}
+
+export default LostConnection
Index: components/ManageCredits.jsx
===================================================================
--- components/ManageCredits.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/ManageCredits.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -15,20 +15,110 @@
     const dispatch = useDispatch();
 
-    function close() {
+    function close(action = '') {
         dispatch(setStyle({
             ...styleState.style,
             displayManageCreditsScreen: false,
+            displayDepositModal: false,
+            displayWithdrawModal: false,
+            depositModalInputs: {
+                name: '',
+                card: '',
+                expire: '',
+                ccv: '',
+                amount: '',
+            },
+            displayWithdrawModal: false,
+            withdrawModalInputs: {
+                citibank: '',
+                iban: '',
+                bic: '',
+                beneficiary: '',
+                address: '',
+                amount: '',
+            },
+            inlineAlertText: '',
+            notification: action === 'deposit' ? {
+                show: true,
+                text: `Deposited $${styleState.style.depositModalInputs.amount} successfully`,
+                status: 'success',
+            } : action === 'withdraw' ? {
+                show: true,
+                text: `Withdrawed $${styleState.style.withdrawModalInputs.amount} successfully`,
+                status: 'success',
+            } : {
+                show: false,
+                text: '',
+                status: ''
+            },
+        }))
+    }
+
+    
+    function openDepositModal() {
+        dispatch(setStyle({
+            ...styleState.style,
+            displayDepositModal: true,
+            displayWithdrawModal: false,
+            inlineAlertText: '',
+        }))
+    }
+
+    function openWithdrawModal() {
+        dispatch(setStyle({
+            ...styleState.style,
+            displayDepositModal: false,
+            displayWithdrawModal: true,
+            inlineAlertText: '',
         }))
     }
 
     function buyCredits() {
-        axios.get(`/api/postgre/?action=add_credits&session_id=${localStorage.CAESSINO_SESSION_ID}&credits=${500}&dont_update_stats=true`).then(res => {
-            if (res.data?.success) {
-                dispatch(setPlayer({
-                    ...playerState.player,
-                    credits: res.data.credits,
-                }))
-            }
-        });
+        axios.post(`/api/postgre`, {
+            action: 'deposit',
+            session_id: localStorage.CAESSINO_SESSION_ID,
+            data: styleState.style.depositModalInputs
+        })
+            .then(res => {
+                if (res.data?.success) {
+                    dispatch(setPlayer({
+                        ...playerState.player,
+                        credits: res.data.credits,
+                    }))
+
+                    close('deposit');
+                }
+                else {
+                    dispatch(setStyle({
+                        ...styleState.style,
+                        displayManageCreditsScreen: true,
+                        inlineAlertText: res.data?.message,
+                    }));
+                }
+            })
+    }
+
+    function sellCredits() {
+        axios.post(`/api/postgre`, {
+            action: 'withdraw',
+            session_id: localStorage.CAESSINO_SESSION_ID,
+            data: styleState.style.withdrawModalInputs
+        })
+            .then(res => {
+                if (res.data?.success) {
+                    dispatch(setPlayer({
+                        ...playerState.player,
+                        credits: res.data.credits,
+                    }))
+
+                    close('withdraw');
+                }
+                else {
+                    dispatch(setStyle({
+                        ...styleState.style,
+                        displayManageCreditsScreen: true,
+                        inlineAlertText: res.data?.message,
+                    }));
+                }
+            })
     }
 
@@ -37,12 +127,84 @@
             <AiOutlineClose onClick={() => close()} style={{position: 'absolute', top: '20px', right: '20px'}}/>
             <div>
-                <h1>Manage Credits:</h1>
-                <p>You currently have: ${playerState.player.credits}</p>
                 <div>
-                    <button className="primaryButton" onClick={() => buyCredits()}>Buy Credits</button>
+                    <h2>Manage (In-Game) Credits:</h2>
+                    <p>You currently have: ${playerState.player.credits}</p>
+                </div>
+                <div className="main">
+                    <div>
+                        { styleState.style.displayDepositModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
+                        { !styleState.style.displayDepositModal && <button className="primaryButton" onClick={() => openDepositModal()}>Deposit From Credit Card<br/><span>Buy (In-Game) Credits</span></button> }
+                        { styleState.style.displayDepositModal && (
+                            <div className="fs-inputs-container">
+                                <div>
+                                    <label>Name and Surname</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'name')}} value={styleState.style.depositModalInputs.name} placeholder="John Doe"/>
+                                    <label>Card Number</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'card')}} value={styleState.style.depositModalInputs.card} placeholder="2333 9298 9821 1111"/>
+                                    <label>Expire Date</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'expire')}} value={styleState.style.depositModalInputs.expire} placeholder="07/24"/>
+                                    <label>CCV</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'ccv')}} value={styleState.style.depositModalInputs.ccv} placeholder="337"/>
+                                    <label><span>Amount</span></label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeDeposit(e, 'amount')}} value={styleState.style.depositModalInputs.amount} placeholder="500"/>
+                                    <button className="primaryButton" onClick={() => buyCredits()}>Deposit</button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                    <div>
+                        { styleState.style.displayWithdrawModal && styleState.style.inlineAlertText.length > 0 && <span className="inlineAlert">{styleState.style.inlineAlertText}</span>}
+                        { !styleState.style.displayWithdrawModal && <button className="primaryButton" onClick={() => openWithdrawModal()}>Withdraw To Personal Account<br/><span>Sell (In-Game) Credits</span></button> }
+                        { styleState.style.displayWithdrawModal && (
+                            <div className="fs-inputs-container">
+                                <div>
+                                    <label>Bank name</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'citibank')}} value={styleState.style.withdrawModalInputs.citibank} placeholder="Swedbank"/>
+                                    <label>IBAN</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'iban')}} value={styleState.style.withdrawModalInputs.iban} placeholder="SE45 5000 0000 0583 9825 7466"/>
+                                    <label>BIC</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'bic')}} value={styleState.style.withdrawModalInputs.bic} placeholder="SWEDSESSXXX"/>
+                                    <label>Beneficiary Name</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'beneficiary')}} value={styleState.style.withdrawModalInputs.beneficiary} placeholder="John Doe"/>
+                                    <label>Bank Address</label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'address')}} value={styleState.style.withdrawModalInputs.address} placeholder="Landsvägen 40, Sundbyberg"/>
+                                    <label><span>Amount</span></label>
+                                    <input type="text" className="primaryInput" onChange={(e) => {onChangeWithdraw(e, 'amount')}} value={styleState.style.withdrawModalInputs.amount} placeholder="500"/>
+                                    <button className="primaryButton" onClick={() => sellCredits()}>Withdraw</button>
+                                </div>
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
         </div>
     )
+
+    function onChangeDeposit(e, what) {
+        dispatch(setStyle({
+            ...styleState.style,
+            depositModalInputs: {
+                name: what === 'name' ? e.target.value : styleState.style.depositModalInputs.name,
+                card: what === 'card' ? e.target.value : styleState.style.depositModalInputs.card,
+                expire: what === 'expire' ? e.target.value : styleState.style.depositModalInputs.expire,
+                ccv: what === 'ccv' ? e.target.value : styleState.style.depositModalInputs.ccv,
+                amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
+            }
+        }))
+    }
+
+    function onChangeWithdraw(e, what) {
+        dispatch(setStyle({
+            ...styleState.style,
+            withdrawModalInputs: {
+                citibank: what === 'citibank' ? e.target.value : styleState.style.depositModalInputs.citibank,
+                iban: what === 'iban' ? e.target.value : styleState.style.depositModalInputs.iban,
+                bic: what === 'bic' ? e.target.value : styleState.style.depositModalInputs.bic,
+                beneficiary: what === 'beneficiary' ? e.target.value : styleState.style.depositModalInputs.beneficiary,
+                address: what === 'address' ? e.target.value : styleState.style.depositModalInputs.address,
+                amount: what === 'amount' ? e.target.value : styleState.style.depositModalInputs.amount,
+            }
+        }))
+    }
 }
 
Index: components/blackjack/Blackjack.jsx
===================================================================
--- components/blackjack/Blackjack.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/blackjack/Blackjack.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -10,4 +10,5 @@
 import Alert from '../Alert'
 import Notification from '../Notification'
+import LostConnection from '../LostConnection'
 
 const Blackjack = () => {
@@ -31,4 +32,6 @@
 
       <Notification/>
+
+      <LostConnection/>
     </div>
   )
Index: components/poker/Poker.jsx
===================================================================
--- components/poker/Poker.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/poker/Poker.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -8,4 +8,5 @@
 import Notification from '../Notification'
 import PokerSections from './PokerSections'
+import LostConnection from '../LostConnection'
 
 const Poker = () => {
@@ -25,4 +26,6 @@
 
       <Notification/>
+
+      <LostConnection/>
     </div>
   )
Index: components/poker/PokerHeader.jsx
===================================================================
--- components/poker/PokerHeader.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/poker/PokerHeader.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -10,5 +10,5 @@
 import { useDispatch, useSelector } from 'react-redux'
 
-import { setPlayer, setPokerGame, setSocket } from '../../redux/reducers/playerSlice'
+import { setPlayer, setPokerGame } from '../../redux/reducers/playerSlice'
 import { setStyle } from '../../redux/reducers/styleSlice'
 
@@ -36,16 +36,4 @@
                 if (interval !== null) clearInterval(interval);
 
-                dispatch(setPlayer({
-                    ...playerState.player,
-                    displayName: res.data?.displayName,
-                    session_id: res.data?.session_id,
-                    credits: res.data?.credits,
-                }));
-
-                dispatch(setStyle({
-                    ...styleState.style,
-                    displayLoadingScreen: false,
-                }))
-
                 interval = setInterval(() => {
                     axios.get(`/api/poker?action=update_state&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(newRes => {
@@ -56,10 +44,34 @@
                                 dispatch(setPlayer({
                                     ...playerState.player,
+                                    displayName: res.data?.displayName,
+                                    session_id: res.data?.session_id,
                                     credits: newRes.data?.pokerGame?.player?.credits,
                                 }))
                             }
                         }
+
+                        dispatch(setStyle({
+                            ...styleState.style,
+                            displayLoadingScreen: false,
+                            notification: {
+                                ...styleState.style.notification,
+                                show: false,
+                            },
+                            lostConnectionInfo: {
+                                show: false,
+                                message: ''
+                            }
+                        }))
+                    }).catch(error => {
+                        dispatch(setStyle({
+                            ...styleState.style,
+                            displayLoadingScreen: false,
+                            lostConnectionInfo: {
+                                show: true,
+                                message: 'Game will be played until the end upon server gets live. You cannot continue your game, but the money earned / lost will be updated.'
+                            }
+                        }))
                     });
-                }, 2000);
+                }, 1000);
             }
             else {
Index: components/poker/PokerSections.jsx
===================================================================
--- components/poker/PokerSections.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/poker/PokerSections.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -1,5 +1,4 @@
 import React from 'react'
 
-import Cards from './sections/Cards'
 import CardsInTheMiddle from './sections/CardsInTheMiddle'
 import Chairs from './sections/Chairs'
@@ -8,5 +7,5 @@
 import PickATable from './sections/PickATable'
 
-import { useSelector, useDispatch } from 'react-redux'
+import { useSelector } from 'react-redux'
 import Pot from './sections/Pot'
 import RaiseModal from './sections/RaiseModal'
@@ -21,6 +20,4 @@
 
           <Chairs/>
-
-          <Cards/>
 
           <CardsInTheMiddle/>
Index: components/poker/sections/Cards.jsx
===================================================================
--- components/poker/sections/Cards.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ 	(revision )
@@ -1,11 +1,0 @@
-import React from 'react'
-
-const Cards = () => {
-  return (
-    <div>
-        
-    </div>
-  )
-}
-
-export default Cards
Index: components/poker/sections/PickATable.jsx
===================================================================
--- components/poker/sections/PickATable.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/poker/sections/PickATable.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -6,5 +6,4 @@
 
 import axios from 'axios';
-import { setPokerGame } from '../../../redux/reducers/playerSlice';
 
 const PickATable = () => {
Index: components/roulette/BetModal.jsx
===================================================================
--- components/roulette/BetModal.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/roulette/BetModal.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -8,5 +8,4 @@
 
 import axios from 'axios';
-import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
 
 const BetModal = () => {
Index: components/roulette/Roulette.jsx
===================================================================
--- components/roulette/Roulette.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/roulette/Roulette.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -8,4 +8,5 @@
 import Notification from '../Notification'
 import Sections from './Sections'
+import LostConnection from '../LostConnection'
 
 const Roulette = () => {
@@ -25,4 +26,6 @@
 
       <Notification/>
+
+      <LostConnection/>
     </div>
   )
Index: components/roulette/RouletteHeader.jsx
===================================================================
--- components/roulette/RouletteHeader.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/roulette/RouletteHeader.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -79,8 +79,34 @@
                                 dispatch(setPlayer({
                                     ...playerState.player,
+                                    displayName: res.data?.displayName,
+                                    session_id: res.data?.session_id,
                                     credits: newRes.data?.rouletteGame?.player?.credits,
                                 }))
                             }
                         }
+
+                        if (newRes.data?.extraAction && newRes.data?.extraAction !== "spin_wheel") {
+                            dispatch(setStyle({
+                                ...styleState.style,
+                                displayLoadingScreen: false,
+                                notification: {
+                                    ...styleState.style.notification,
+                                    show: false,
+                                },
+                                lostConnectionInfo: {
+                                    show: false,
+                                    message: ''
+                                }
+                            }))
+                        }
+                    }).catch(error => {
+                        dispatch(setStyle({
+                            ...styleState.style,
+                            displayLoadingScreen: false,
+                            lostConnectionInfo: {
+                                show: true,
+                                message: 'Game will resume upon reconnection to the server.'
+                            }
+                        }))
                     });
                 }, 1000);
@@ -97,9 +123,4 @@
                     showCoin: false,
                 }));
-
-                dispatch(setStyle({
-                    ...styleState.style,
-                    displayLoadingScreen: false,
-                }))
             }
             else {
Index: components/roulette/Timer.jsx
===================================================================
--- components/roulette/Timer.jsx	(revision d0ef2592564bcd6d3691722843df4fc6a7397109)
+++ components/roulette/Timer.jsx	(revision 433e0c5f4289ea953d6d2c2d010c6bd651bd0c8f)
@@ -1,16 +1,8 @@
 import React from 'react'
 
-import { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux'
-import { setPlayer, setRouletteGame } from '../../redux/reducers/playerSlice';
-
-import axios from 'axios';
-import { setRoulette, setStyle } from '../../redux/reducers/styleSlice';
+import { useSelector } from 'react-redux'
 
 const Timer = () => {
-    const dispatch = useDispatch();
-
     const playerState = useSelector(state => state.player);
-    const styleState = useSelector(state => state.style);
 
     function getTimer() {
