Index: components/Header.jsx
===================================================================
--- components/Header.jsx	(revision 87614a539b5a6d95f9aee8012bfdef4edeeb2fb5)
+++ components/Header.jsx	(revision 87614a539b5a6d95f9aee8012bfdef4edeeb2fb5)
@@ -0,0 +1,150 @@
+import React from 'react'
+
+import Link from 'next/link'
+
+import { useRouter } from 'next/router'
+
+import { useState, useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+
+import { setPlayer } from '../redux/reducers/playerSlice'
+import { setStyle } from '../redux/reducers/styleSlice'
+
+import axios from 'axios';
+
+const Header = () => {
+  const dispatch = useDispatch();
+
+  const playerState = useSelector(state => state.player);
+  const styleState = useSelector(state => state.style);
+
+  function register() {
+    dispatch(setStyle({
+      ...styleState.style,
+      displayRegisterScreen: true,
+    }))
+  }
+
+  function login() {
+    dispatch(setStyle({
+      ...styleState.style,
+      displayLoginScreen: true,
+    }))
+  }
+
+  function logout() {
+    axios.get(`/api/postgre?action=logout&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+      if (res.data?.success) {
+        localStorage.removeItem('CAESSINO_SESSION_ID');
+        dispatch(setPlayer({
+          displayName: '',
+          username: '',
+          session_id: '',
+          room_id: '',
+          credits: 0,
+        }))
+      }
+    })
+  }
+
+  function showStats() {
+    axios.get(`/api/postgre?action=get_stats&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+      if (res.data?.success) {
+        dispatch(setStyle({
+            ...styleState.style,
+            displayStatsScreen: true,
+            statsScreenInfo: {
+                money: {
+                    ...styleState.style.statsScreenInfo.money,
+                    earned: res.data.stats.money_earned,
+                },
+                blackjack: {
+                    ...styleState.style.statsScreenInfo.blackjack,
+                    wins: res.data.stats.blackjack_won_games,
+                },
+                roulette: {
+                    ...styleState.style.statsScreenInfo.roulette,
+                    wins: res.data.stats.roulette_won_games,
+                },
+                poker: {
+                    ...styleState.style.statsScreenInfo.poker,
+                    wins: res.data.stats.poker_won_games,
+                }                            
+            }
+        }))
+      }
+    })
+  }
+
+  function manageCredits() {
+    dispatch(setStyle({
+      ...styleState.style,
+      displayManageCreditsScreen: true,
+    }))
+  }
+
+  useEffect(() => {
+    if (playerState.player.displayName === '') {
+      dispatch(setStyle({
+        ...styleState.style,
+        displayLoadingScreen: true
+      }));
+
+      let success = false;
+
+      if (localStorage?.CAESSINO_SESSION_ID && localStorage.CAESSINO_SESSION_ID.length > 0) {
+        axios.get(`/api/postgre?action=check_if_logged_in&session_id=${localStorage.CAESSINO_SESSION_ID}`).then(res => {
+          if (res.data?.success) {
+            success = true;
+
+            dispatch(setPlayer({
+              ...playerState.player,
+              displayName: res.data?.displayName,
+              sesssion_id: res.data?.session_id,
+              credits: res.data?.credits,
+            }));
+          }
+        });
+      }
+
+      if (!success) {
+        dispatch(setPlayer({
+          ...playerState.player,
+          displayName: 'Guest',
+        }))
+        dispatch(setStyle({
+          ...styleState.style,
+          displayLoadingScreen: false,
+        }))
+      }
+    }
+  }, [dispatch, playerState.player, styleState.style]);
+
+  return (
+    <header className="header">
+      <Link href="/" passHref>
+        <div className="logo">
+          
+        </div>
+      </Link>
+      <nav>
+          <ul>
+            {playerState.player.displayName === '' || playerState.player.displayName === 'Guest' ? (
+              <>
+                <li onClick={() => {register()}}>Register</li>
+                <li onClick={() => {login()}}>Login</li>
+              </>
+            ) : (
+              <>
+                <li onClick={() => {manageCredits()}}>Manage Credits</li>
+                <li onClick={() => {showStats()}}>Stats</li>
+                <li onClick={() => {logout()}}>Logout</li>
+              </>
+            )}
+          </ul>
+      </nav>
+  </header>
+  )
+}
+
+export default Header
