diff --git a/api/Lobby.cs b/api/Lobby.cs
index 7663844..a16d151 100644
--- a/api/Lobby.cs
+++ b/api/Lobby.cs
@@ -1,14 +1,17 @@
+using Microsoft.Net.Http.Headers;
+
 public class Lobby
 {
     public static int MaxPlayers = 8;
     public static int MaxRounds = 8;
-    public static int CardsDealtPerPlayer = 10;
+    public static int CardsDealtPerPlayer = 8;
     public string Id { get; private set;}
     public List<Player> Players { get; private set;} = new List<Player>();
     public List<string> QuestionDeck { get; private set;}
     public List<string> AnswerDeck { get; private set;}
     public List<string> PlayedCards { get; private set;} = new List<string>();
-    public int RoundNumber {get; set;} = 01;
+    public Dictionary<string,string> LobbyHistory {get;set;} = new();
+    public int RoundNumber {get; set;} = 1;
     public int JudgeIndex { get; set;}
     public string CurrentQuestionCard => QuestionDeck[RoundNumber];
     public Lobby(string id)
@@ -16,7 +19,7 @@ public Lobby(string id)
         Id = id;
         QuestionDeck = ShuffleCards(GetQuestionCards());
         AnswerDeck = ShuffleCards(GetAnswerCards());
-        JudgeIndex = new Random().Next(0, Players.Count);
+        JudgeIndex = 0;
 
      }
     List<string> GetQuestionCards() => new DirectoryInfo(Path.Combine(Environment.CurrentDirectory, "Cards-PNG")).GetFiles("*Black*", new EnumerationOptions() {RecurseSubdirectories = true}).Select(e => e.Name.Replace(".png","")).ToList();
@@ -32,10 +35,13 @@ public bool PlayCardForPlayer(string playerId, string cardUrl)
         if (Players.IndexOf(player) == JudgeIndex) return false;
         // Validity: Check if the player has the card in their hand
         if (!player.Cards.Contains(cardUrl)) return false;
+
         // Remove the card from the player's hand
         player.Cards.Remove(cardUrl);
+        
         // Add the card to the played cards
         PlayedCards.Add(cardUrl);
+        
         // set the lastplayed card for the player
         player.LastPlayedCard = cardUrl;
         return true;
@@ -58,7 +64,12 @@ public string JudgeVoteOnCard(string cardUrl)
         {
             player.LastPlayedCard = null;
         }
-        JudgeIndex = new Random().Next(0, Players.Count);
+        JudgeIndex ++;
+        if (JudgeIndex >= Players.Count) {
+            // if the judge index is greater than the number of players, reset it to 0
+            JudgeIndex = 0;
+        }
+        LobbyHistory.Add(CurrentQuestionCard, cardUrl);
         return Winner.Name + " won the round! with Card <a href='/Card/" + cardUrl + " '>this card </a>, they now have " + Winner.Score + " points!";
     }
 }
diff --git a/api/Program.cs b/api/Program.cs
index 35fd86d..fb0ace3 100644
--- a/api/Program.cs
+++ b/api/Program.cs
@@ -4,7 +4,7 @@
 var builder = WebApplication.CreateBuilder(args);
 var players = new List<Player>();
 var lobbies = new List<Lobby>();
-var names = new List<string>() { "Janus (Windows 3.1 and MSDOS 5)", "Anaheim (Microsoft Edge)", "Astro (MS DOS 6)", "Bandit (Schedule Plus)", "Sparta (Windows for Workgroups 3.1)", "Snowball (Windows for Workgroups 3.11)", "Chicago (Windows 95)", "Memphis (Windows 98)", "Millennium (Windows ME)", "Razzle (Windows NT 3.1)", "Daytona (Windows NT 3.5)", "Tukwila (Windows NT 4)", "Cairo", "[] (Windows 2000)", "Whistler (Windows XP)", "Longhorn (Windows Vista)", "Vienna (Windows 7)", "Midori (Application Shim for Singularity, used in SQLPAL)", "Blue (Windows 8.1)", "Threshold (Windows 10)", "Redstone (Windows 10 Creators Update)", "Sun Valley (Windows 11)", "Hudson Valley (Windows 12?)", "Pegasus (Windows CE 1.0)", "Rapier (Windows Pocket PC 2000)", "Maldives (Windows Phone 7)", "Red Dog (Azure)", "Singularity (MSR Managed OS)", "Denali (SQL Server 2012)", "Thunder (Visual Basic 1.0)", "Bullet (MS Mail 3.0)", "Opus (Word for Windows v1.0)", "Wren (Outlook)", "Utopia (Bob UI)", "Marvel (MSN)", "Argo (Zune Player)", "KittyHawk (Visual Studio Lightswitch)", "DirectX Box (Xbox)", "Natal (Kinect)", "Natick (Underwater DC Pod)", "Roslyn (.net compiler platform)", "Aspen (Visual Studio 6.0)", "Rainier (Visual Studio.NET 2002)", "Whidbey (Visual Studio 2005)" };
+var names = new List<string>() {"Janus (Windows 3.1 and MSDOS 5)", "Anaheim (Microsoft Edge)", "Astro (MS DOS 6)", "Bandit (Schedule Plus)", "Sparta (Windows for Workgroups 3.1)", "Snowball (Windows for Workgroups 3.11)", "Chicago (Windows 95)", "Memphis (Windows 98)", "Millennium (Windows ME)", "Razzle (Windows NT 3.1)", "Daytona (Windows NT 3.5)", "Tukwila (Windows NT 4)", "Cairo", "[] (Windows 2000)", "Whistler (Windows XP)", "Longhorn (Windows Vista)", "Vienna (Windows 7)", "Midori (Application Shim for Singularity, used in SQLPAL)", "Blue (Windows 8.1)", "Threshold (Windows 10)", "Redstone (Windows 10 Creators Update)", "Sun Valley (Windows 11)", "Hudson Valley (Windows 12?)", "Pegasus (Windows CE 1.0)", "Rapier (Windows Pocket PC 2000)", "Maldives (Windows Phone 7)", "Red Dog (Azure)", "Singularity (MSR Managed OS)", "Denali (SQL Server 2012)", "Thunder (Visual Basic 1.0)", "Bullet (MS Mail 3.0)", "Opus (Word for Windows v1.0)", "Wren (Outlook)", "Utopia (Bob UI)", "Marvel (MSN)", "Argo (Zune Player)", "KittyHawk (Visual Studio Lightswitch)", "DirectX Box (Xbox)", "Natal (Kinect)", "Natick (Underwater DC Pod)", "Roslyn (.net compiler platform)", "Aspen (Visual Studio 6.0)", "Rainier (Visual Studio.NET 2002)", "Whidbey (Visual Studio 2005)" };
 var app = builder.Build();
 
 // Non-authenticated endpoints first
@@ -18,6 +18,18 @@
     return Results.File(filePath, "text/html");
 });
 
+// GET => Serve the root 
+app.MapGet("/Restart", () =>
+{
+    Console.WriteLine(".Restart Request Received");
+
+    // Clear all lobbies and players
+    lobbies.Clear();
+    players.Clear();
+
+    return Results.Ok("Game Engine Restarted!");
+});
+
 // GET => Serve the root 
 app.MapGet("/Card/{CardId}", (string CardId) =>
 {
@@ -183,7 +195,13 @@
 
 app.Run();
 
-string GetRandomName() => names[new Random().Next(0, names.Count)];
+string GetRandomName() {
+
+    // Fetch the list of used lobby names 
+    List<string> usedlobbynames = lobbies.Select(f => f.Id).ToList();
+    // Return a random name from the list of names that are not in use
+    return names.Except(usedlobbynames).OrderBy(x => Guid.NewGuid()).FirstOrDefault();
+};
 
 bool SetAuth(HttpContext context, string Claim = null, string Value = null)
 {
diff --git a/api/bin/Debug/net7.0/api.dll b/api/bin/Debug/net7.0/api.dll
index 0881f50..19b41a8 100644
Binary files a/api/bin/Debug/net7.0/api.dll and b/api/bin/Debug/net7.0/api.dll differ
diff --git a/api/bin/Debug/net7.0/api.pdb b/api/bin/Debug/net7.0/api.pdb
index e18af6e..0b30528 100644
Binary files a/api/bin/Debug/net7.0/api.pdb and b/api/bin/Debug/net7.0/api.pdb differ
diff --git a/api/bin/Debug/net7.0/html/index.html b/api/bin/Debug/net7.0/html/index.html
index 977561f..86228c1 100644
--- a/api/bin/Debug/net7.0/html/index.html
+++ b/api/bin/Debug/net7.0/html/index.html
@@ -1,396 +1,367 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bedlam</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
-        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <style>
-        /* Add custom CSS styles here */
-        .image-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 8px;
-        }
-        .grid-image {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    </style>
-</head>
-<body>
-    <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
-        <a class="navbar-brand" href="#" onClick="ReloadOnCrash()">&nbsp Bedlam Online</a>
-        <div id="navbarNav">
-            <div id="navbarText">
-                <span class="navbar-text">Player:&nbsp </span><span data-bind="text: userName"
-                    class="navbar-text"></span> &nbsp
-            </div>
-            <div id="navbarText">
-                <span class="navbar-text">In Lobby:&nbsp </span><span data-bind="text: myLobbyData.id"
-                    class="navbar-text"></span> &nbsp
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Bedlam</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+        <style>
+            /* Add custom CSS styles here */
+            .image-grid {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 8px;
+            }
+            .grid-image {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
+            <a class="navbar-brand" href="#" onClick="ReloadOnCrash()">&nbsp Bedlam Online</a>
+            <div id="navbarNav">
+                <div id="navbarText">
+                    <span class="navbar-text">Player:&nbsp </span><span data-bind="text: userName"
+                        class="navbar-text"></span> &nbsp
+                </div>
+                <div id="navbarText">
+                    <span class="navbar-text">In Lobby:&nbsp </span><span data-bind="text: myLobbyData.id"
+                        class="navbar-text"></span> &nbsp
+                </div>
             </div>
-        </div>
-    </nav>
-    <div class="container-fluid">
-        <ul class="nav nav-tabs">
-            <li class="nav-item active">
-                <a class="nav-link" href="#lobbies-tab" data-bs-toggle="tab">Lobbies</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="#gameplay-tab" data-bs-toggle="tab">Play Bedlam!</a>
-            </li>
-        </ul>
-        <div class="tab-content">
-            <!-- Lobbies Tab -->
-            <div class="tab-pane fade active" id="lobbies-tab">
-                <div class="row" id="lobbies">
-                    <div class="col-md-3">
-                        <div data-bind="foreach: lobbies">
-                            <div class="card">
-                                <div class="card-header bg-primary text-light">
-                                    <h5><span data-bind="text: id"></span></h5>
-                                </div>
-                                <div class="card-body">
-                                    <ul data-bind="foreach: players">
-                                        <li>
-                                            <span data-bind="text: name"></span> : 
-                                            <span data-bind="text: score"></span> &nbsp
-                                            <span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
-                                        </li>
-                                    </ul>
-                                    <button class="btn btn-primary" data-bind="click: $root.joinLobby">Join Lobby</button>
-                                </div>
-                                <div class="card-footer">
-                                    <strong>Players</strong>
-                                    <span data-bind="text: players().length"></span> Of 8
+        </nav>
+        <div class="container-fluid">
+            <ul class="nav nav-tabs">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#lobbies-tab" data-bs-toggle="tab">Lobbies</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#gameplay-tab" data-bs-toggle="tab">Play Bedlam!</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#diags-tab" data-bs-toggle="tab">Game Diags</a>
+                </li>
+            </ul>
+            <div class="tab-content">
+                <!-- Lobbies Tab -->
+                <div class="tab-pane fade active" id="lobbies-tab">
+                    <div class="row" id="lobbies">
+                        <div class="col-md-3">
+                            <div data-bind="foreach: lobbies">
+                                <div class="card">
+                                    <div class="card-header bg-primary text-light">
+                                        <h5><span data-bind="text: id"></span></h5>
+                                    </div>
+                                    <div class="card-body">
+                                        <ul data-bind="foreach: players">
+                                            <li>
+                                                <span data-bind="text: name"></span> : 
+                                                <span data-bind="text: score"></span> &nbsp
+                                                <span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
+                                            </li>
+                                        </ul>
+                                        <button class="btn btn-primary" data-bind="click: $root.joinLobby">Join Lobby</button>
+                                    </div>
+                                    <div class="card-footer">
+                                        <strong>Players</strong>
+                                        <span data-bind="text: players().length"></span> Of 8
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <!-- Gameplay Tab -->
-            <div class="tab-pane fade" id="gameplay-tab">
-                <div class="row" id="gameplay">
-                    <div class="card mb-3">
-                        <div class="card-header bg-primary text-light">
-                            <h5>Scoreboard for lobby: <span data-bind="text: myLobbyData().id"></span></h5>
-                        </div>
-                        <div class="card-body">
-                            <ul data-bind="foreach: myLobbyData().players">
-                                <li>
-                                    <span data-bind="text: name"></span>:<span data-bind="text: score"></span><span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="card-footer">
-                            <strong>Players</strong>&nbsp (<span data-bind="text: myLobbyData().players().length"></span> Of 8) 
-                            <!-- <button class="btn btn-success" data-bind="visible: myLobbyData().players().length > 3 && (! $root.questionCard() || $root.questionCard() == ''), click: $root.getCards">Start Game</button> -->
+                <!-- Gameplay Tab -->
+                <div class="tab-pane fade" id="gameplay-tab">
+                    <div class="row" id="gameplay">
+                        <div class="card mb-3">
+                            <div class="card-header bg-primary text-light">
+                                <h5>Scoreboard for lobby: <span data-bind="text: myLobbyData().id"></span></h5>
+                            </div>
+                            <div class="card-body">
+                                <ul data-bind="foreach: myLobbyData().players">
+                                    <li>
+                                        <span data-bind="text: name"></span>:<span data-bind="text: score"></span><span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="card-footer">
+                                <strong>Players</strong>&nbsp (<span data-bind="text: myLobbyData().players().length"></span> Of 8) 
+                                <!-- <button class="btn btn-success" data-bind="visible: myLobbyData().players().length > 3 && (! $root.questionCard() || $root.questionCard() == ''), click: $root.getCards">Start Game</button> -->
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row" id="gameplay" data-bind="visible: (!$root.iHavePlayedThisRound() && !$root.amITheJudge())">
-                    <h3>Playing card for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind="attr: {src: '/Card/' + $root.questionCard()}" />
-                    </div>
-                    <!-- ko foreach: answerCards -->
+                    <div class="row" id="gameplay" data-bind="visible: (!$root.iHavePlayedThisRound() && !$root.amITheJudge())">
+                        <h3>Playing card for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.playCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind="attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                </div>
-                <div class="row" id="judging" data-bind="visible: $root.amITheJudge">
-                    <h3>Judging round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
+                        <!-- ko foreach: answerCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.playCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
                     </div>
-                    <!-- ko foreach: playedCards -->
+                    <div class="row" id="judging" data-bind="visible: $root.amITheJudge">
+                        <h3>Judging round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                    <div id="status"></div>
-                </div>
-                <div class="row" id="viewing" data-bind="visible: ($root.iHavePlayedThisRound() && !$root.amITheJudge())">
-                    <h3>Viewing Played Cards for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
+                        <!-- ko foreach: playedCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
+                        <div id="status"></div>
                     </div>
-                    <!-- ko foreach: playedCards -->
+                    <div class="row" id="viewing" data-bind="visible: ($root.iHavePlayedThisRound() && !$root.amITheJudge())">
+                        <h3>Viewing Played Cards for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                    <div id="status"></div>
+                        <!-- ko foreach: playedCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
+                        <div id="status"></div>
+                    </div>
+                </div>
+                <!-- Diags Tab -->
+                <div class="tab-pane fade active" id="diags-tab">
+                    <div class="row" id="diags">
+                        <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script>
-
-        var lvm = new GameViewModel(false);
-
-        // A little hiccup to slow anyone down trying to cheat the game (this is for FTA After all) 
-        // by viewing and editing the local storage directly, and trying to cheat the auto-reload feature
-        const staticKeyPlane = "asdfdsa546jkh2g6hj2g6jh3g6hj5g64jh6gj546gh35g654jhg6hj5hivhguikhw7vtnhw84yitvrhcigo7yerchktjq34ght9asdhguvsahgu$^%$^sdfvlkjshfgiuaertgjhuvswoasdlk789jl345o8sdvASFSDFGFDHSDFHS54sdhdgfw544645hsdfdafhfgjkyjhbggflkawtgl][p;ls[dpsoifujhkl;hjgfmnoiubjhdfmkqlr;twpegrhoibufdjfhvsmk,le;   rpqtweogihbhdvjkiolp;bgnhjutlykrjwehwdaud9ofvdgpbhuohjlfafwe326rd";
-
-        // XOR with a key 
-        function xorWithKey(str, key) {
-            var res = '';
-            for (var i = 0; i < str.length; i++) {
-                res += String.fromCharCode(key[i % key.length].charCodeAt(0) ^ str.charCodeAt(i));
-            }
-            return res;
-        }
-
-        // Design a function to store the viewmodel state to HTML5 local storage
-        function SaveViewModelLocal() {
-
-            // Save the viewmodel state to local storage
-            localStorage.setItem("lvm", btoa(ko.toJSON(lvm)));
-
-        }
-
-        function ReloadOnCrash() {
-            // Load the viewmodel state from local storage
-            if (localStorage.getItem("lvm") != null) {
-
-                setTimeout(function () {
-
-                    console.log("Reloading State");
-                    var lvmObj = JSON.parse(atob(localStorage.getItem("lvm")));
-
-                    lvm.userName(lvmObj.userName);
-                    lvm.token(lvmObj.token);
-
-                    // Map the props of my lobby data
-                    lvm.myLobbyData = ko.observable(new Lobby(
-                        lvmObj.myLobbyData.id, 
-                        lvmObj.myLobbyData.Players, 
-                        lvmObj.myLobbyData.playedCards, 
-                        lvmObj.myLobbyData.roundNumber,
-                        lvmObj.myLobbyData.judgeIndex
-                    ));
-
-                    lvm.questionCard(lvmObj.questionCard);
-                    lvm.answerCards([]);
-
-                    lvmObj.answerCards.forEach(function (card) {
-                        lvm.answerCards.push(card);
-                    });
-                    lvm.lobbies([]);
-
-                    lvmObj.lobbies.forEach(function (lobby) {
-                        lvm.lobbies.push(Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex));
-                    });
-                    console.log("Loading Complete:", lvmObj);
-                }, 2000);
-
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            var lvm = new GameViewModel(false);
+            // Design a function to store the viewmodel state to HTML5 local storage
+            function SaveViewModelLocal() {
+                // Save the viewmodel state to local storage
+                localStorage.setItem("lvm", btoa(ko.toJSON(lvm)));
             }
-        }
-
-        // Declare a lobby with constructor to hold the lobby information
-        function Lobby(id, players, playedCards, roundNumber, judgeIndex) {
-            return {
-                id: ko.observable(id),
-                players: ko.observableArray(players),
-                playedCards: ko.observableArray(playedCards),
-                roundNumber: ko.observable(roundNumber),
-                judgeIndex: ko.observable(judgeIndex)
-            };
-        }
-
-        function GameViewModel(cycle) {
-
-            var self = this;
-
-            self.cycling = cycle;
-
-            // All Players stuff
-            self.lobbies = ko.observableArray([]);
-
-            // My stuff 
-            self.userName = ko.observable("");
-            self.token = ko.observable("");
-
-            // This rounds Stuff
-            self.myLobbyData = ko.observable(Lobby(null, [], [], 0, 0));
-            self.questionCard = ko.observable("");
-            self.answerCards = ko.observableArray([]);
-            self.playedCards = ko.observableArray([]);
-
-            self.iHavePlayedThisRound = ko.computed(function () {
-                // If the LastPlayedCard is not null for my player object (match by player.name to my username) then I have played this round
-                return self.myLobbyData().players().some(player => player.name === self.userName() && player.lastPlayedCard != '');
-            });
-
-            self.amITheJudge = ko.computed(function () {
-                // If the JudgeIndex is the same as my player index then I am the judge
-                return self.myLobbyData().players().findIndex(player => player.name === self.userName()) == self.myLobbyData().judgeIndex();
-            });
-
-            // Methods 
-
-            // GET /Lobbies => Returns a list RESTRICTED LIST OF DATA for ALL lobbies (THE Lobby names and memberships) via a dto to mask keys etc.
-            self.loadLobbies = function () {
-                fetch("/Lobbies", { method: 'GET' }, { headers: { 'Content-Type': 'application/json' } })
-                    .then(response => response.json())
-                    .then(data => {
-                        self.lobbies([]);
-                        data.forEach(function (lobby) {
-                            var newLobby = Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex);
-                            self.lobbies.push(newLobby);
+            function ReloadOnCrash() {
+                // Load the viewmodel state from local storage
+                if (localStorage.getItem("lvm") != null) {
+                    setTimeout(function () {
+                        console.log("Reloading State");
+                        var lvmObj = JSON.parse(atob(localStorage.getItem("lvm")));
+                        lvm.userName(lvmObj.userName);
+                        lvm.token(lvmObj.token);
+                        // Map the props of my lobby data
+                        lvm.myLobbyData = ko.observable(new Lobby(
+                            lvmObj.myLobbyData.id, 
+                            lvmObj.myLobbyData.Players, 
+                            lvmObj.myLobbyData.playedCards, 
+                            lvmObj.myLobbyData.roundNumber,
+                            lvmObj.myLobbyData.judgeIndex
+                        ));
+                        lvm.questionCard(lvmObj.questionCard);
+                        lvm.answerCards([]);
+                        lvmObj.answerCards.forEach(function (card) {
+                            lvm.answerCards.push(card);
                         });
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-            };
-
-            // GET /MyLobby => Returns the extended content of the specific lobby dto the user is in with the specified id from the token
-            self.loadLobby = function (token) {
-                //console.log("Loading Lobby", 'Bearer ' + token)
-                fetch('/MyLobby',
-                    { method: 'GET', headers: {'Authorization': 'Bearer ' + token}})
-                    .then(response => response.json())
-                    .then(data => {
-
-                        // If the round number just changed then the judge just voted and we need to clear the played cards
-                        if (self.myLobbyData().roundNumber() != data.roundNumber) {
-                           self.myLobbyData().players([]);
-                        }
-
-                        self.myLobbyData().id(data.id);
-                        self.myLobbyData().players(data.players);
-                        self.myLobbyData().playedCards(data.playedCards);
-                        self.myLobbyData().roundNumber(data.roundNumber);
-                        self.myLobbyData().judgeIndex(data.judgeIndex);
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-            };
-
-            // GET /Login/{LobbyId} => Joins a user to the game, returns a JWT for the user to send on subsequent requests
-            self.joinLobby = function (lobby) {
-                self.userName(prompt("Please enter your name", ""));
-                fetch(`/Login/${lobby.id()}/${self.userName()}`,
-                    { method: 'GET' })
-                    .then(response => response.text())
-                    .then(data => {
-                        self.token(data.replace("\"", "").replace("\"", ""));
-                        self.loadLobby(data.replace("\"", "").replace("\"", ""));
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('Error:'+ error)
-                    });
-                SaveViewModelLocal();
-            };
-
-            // GET /Cards => Fetches the cards for this round, returns a card dto specific to the user based on the token.
-            self.getCards = function () {
-                fetch('/Cards', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data == "ERR: /Cards Not authed") {
-                            // This shouldn't happen and is indicative of someone trying to hack the game or there is an old token Being used and the game has restarted since. 
-                            lvm.cycling = false;
-                            localStorage["lvm"] = null;
-                            alert("Hmm! Error! -> You have been logged out, please refresh the page and try again");
-                        }
-                        else {
-                            console.log("Setting Q+A Cards Received");
-                            self.questionCard(data.questionCard);
-                            self.answerCards([]);
-                            data.answerCards.forEach(function (card) {
-                                self.answerCards.push(card);
-                            });
-                        }
-                    })
-                    .catch(error => {
-                            console.error('Error:', error);
-                    });
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // POST /Lobbies/Play/{CardId} => Plays a card for a player into a lobby, returns a success message or error message
-            self.playCard = function (card) {
-                console.log("Playing Card " + card);
-                fetch(`/Lobbies/Play/${card}`, { method: 'POST', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.text())
-                    .then(data => {
-                        console.log('Response' + data);
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // GET /Lobbies/Played => Get the played cards ready for judging
-            self.getPlayedCards = function () {
-                fetch('/Lobbies/Played', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.json())
-                    .then(data => {
-                        self.playedCards([]);
-                        data.forEach(function (card) {
-                            self.playedCards.push(card);
+                        lvm.lobbies([]);
+                        lvmObj.lobbies.forEach(function (lobby) {
+                            lvm.lobbies.push(Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex));
                         });
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // POST /Lobbies/Judge/{cardUrl} => Judge votes on a card, returns a success message
-            self.judgeCard = function (card) {
-
-                if(! self.amITheJudge())
-                {
-                    console.log("You are not the judge!");
-                    return;
+                        console.log("Loading Complete:", lvmObj);
+                    }, 2000);
                 }
-                else
-                {
-                    console.log("Judging Card :" + card + " as the winner!");
-                    fetch(`/Lobbies/Judge/${card}`, { method: 'POST', headers: { 'Authorization':'Bearer ' + self.token()}})
-                    .then(response => response.text())
+            }
+            // Declare a lobby with constructor to hold the lobby information
+            function Lobby(id, players, playedCards, roundNumber, judgeIndex) {
+                return {
+                    id: ko.observable(id),
+                    players: ko.observableArray(players),
+                    playedCards: ko.observableArray(playedCards),
+                    roundNumber: ko.observable(roundNumber),
+                    judgeIndex: ko.observable(judgeIndex)
+                };
+            }
+            function GameViewModel() {
+                var self = this;
+                // All Players stuff
+                self.lobbies = ko.observableArray([]);
+                // My stuff 
+                self.userName = ko.observable("");
+                self.token = ko.observable("");
+                // This rounds Stuff
+                self.myLobbyData = ko.observable(Lobby(null, [], [], 0, 0));
+                self.questionCard = ko.observable("");
+                self.answerCards = ko.observableArray([]);
+                self.playedCards = ko.observableArray([]);
+
+                self.RoundPlayedIndex = ko.computed(function(){
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName() && (player.lastPlayedCard != null && player.lastPlayedCard != ''))
+                });
+
+                self.iHavePlayedThisRound = ko.computed(function () {
+                    // If the LastPlayedCard is not null for my player object (match by player.name to my username) then I have played this round
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName() && (player.lastPlayedCard != null && player.lastPlayedCard != '')) != -1;
+                });
+
+                self.amITheJudge = ko.computed(function () {
+                    // If the JudgeIndex is the same as my player index then I am the judge
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName()) == self.myLobbyData().judgeIndex();
+                });
+
+                // Methods 
+                // GET /Lobbies => Returns a list RESTRICTED LIST OF DATA for ALL lobbies (THE Lobby names and memberships) via a dto to mask keys etc.
+                self.loadLobbies = function () {
+                    fetch("/Lobbies", { method: 'GET' }, { headers: { 'Content-Type': 'application/json' } })
+                        .then(response => response.json())
                         .then(data => {
-                            console.log(data);
+                            self.lobbies([]);
+                            data.forEach(function (lobby) {
+                                var newLobby = Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex);
+                                self.lobbies.push(newLobby);
+                            });
                         })
                         .catch(error => console.error('Error:', error));
                     SaveViewModelLocal();
-                }
-             };
-        };
-
-        ko.applyBindings(lvm);
-
-        lvm.loadLobbies();
-
-        setInterval(function () {
-            // Background refresh of the lobbies so the player numbers are up to date
-            lvm.loadLobbies();
-        },5000);
+                };
+
+                // GET /MyLobby => Returns the extended content of the specific lobby dto the user is in with the specified id from the token
+                self.loadLobby = function (token) {
+                    //console.log("Loading Lobby", 'Bearer ' + token)
+                    fetch('/MyLobby',
+                        { method: 'GET', headers: {'Authorization': 'Bearer ' + token}})
+                        .then(response => response.json())
+                        .then(data => {
 
-        setInterval(function () {
+                            // If the round number just changed then the judge just voted and we need to clear the played cards
+                            if (self.myLobbyData().roundNumber() != data.roundNumber) {
+                                self.myLobbyData().players([]);
+                            }
+
+
+                            self.myLobbyData().id(data.id);
+                            self.myLobbyData().players(data.players);
+                            self.myLobbyData().playedCards(data.playedCards);
+                            self.myLobbyData().roundNumber(data.roundNumber);
+                            self.myLobbyData().judgeIndex(data.judgeIndex);
+                            // If this is the 10th round then the game is over and WE NEED TO popup a message
+                            if (data.roundNumber >= 8) {
+                                // Who has the highest score? 
+                                var sortedPlayers = data.players.sort(function (a, b) {
+                                    return b.score - a.score;
+                                }); // Sort descending
+                                alert("Game Over! The winner is " + sortedPlayers[0].name + " with a score of " + sortedPlayers[0].score);
+                            }
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                };
+
+                // GET /Login/{LobbyId} => Joins a user to the game, returns a JWT for the user to send on subsequent requests
+                self.joinLobby = function (lobby) {
+                    self.userName(prompt("Please enter your name", ""));
+                    fetch(`/Login/${lobby.id()}/${self.userName()}`,
+                        { method: 'GET' })
+                        .then(response => response.text())
+                        .then(data => {
+                            self.token(data.replace("\"", "").replace("\"", ""));
+                            self.loadLobby(data.replace("\"", "").replace("\"", ""));
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Error:'+ error)
+                        });
+                    SaveViewModelLocal();
+                };
 
-            if (lvm.myLobbyData().id() != null) {
-                lvm.loadLobby(lvm.token());
+                // GET /Cards => Fetches the cards for this round, returns a card dto specific to the user based on the token.
+                self.getCards = function () {
+                    fetch('/Cards', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data == "ERR: /Cards Not authed") {
+                                // This shouldn't happen and is indicative of someone trying to hack the game or there is an old token Being used and the game has restarted since. 
+                                lvm.cycling = false;
+                                localStorage["lvm"] = null;
+                                alert("Hmm! Error! -> You have been logged out, please refresh the page and try again");
+                            }
+                            else {
+                                console.log("Setting Q+A Cards Received");
+                                self.questionCard(data.questionCard);
+                                self.answerCards([]);
+                                data.answerCards.forEach(function (card) {
+                                    self.answerCards.push(card);
+                                });
+                            }
+                        })
+                        .catch(error => {
+                                console.error('Error:', error);
+                        });
+                    SaveViewModelLocal();
+                    return true;
+                };
+
+                // POST /Lobbies/Play/{CardId} => Plays a card for a player into a lobby, returns a success message or error message
+                self.playCard = function (card) {
+                    console.log("Playing Card " + card);
+                    fetch(`/Lobbies/Play/${card}`, { method: 'POST', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.text())
+                        .then(data => {
+                            console.log('Response' + data);
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                    return true;
+                };
 
+                // GET /Lobbies/Played => Get the played cards ready for judging
+                self.getPlayedCards = function () {
+                    fetch('/Lobbies/Played', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.json())
+                        .then(data => {
+                            self.playedCards([]);
+                            data.forEach(function (card) {
+                                self.playedCards.push(card);
+                            });
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                    return true;
+                };
+
+                // POST /Lobbies/Judge/{cardUrl} => Judge votes on a card, returns a success message
+                self.judgeCard = function (card) {
+                    if(! self.amITheJudge())
+                    {
+                        console.log("You are not the judge!");
+                        return;
+                    }
+                    else
+                    {
+                        console.log("Judging Card :" + card + " as the winner!");
+                        fetch(`/Lobbies/Judge/${card}`, { method: 'POST', headers: { 'Authorization':'Bearer ' + self.token()}})
+                        .then(response => response.text())
+                            .then(data => {
+                                console.log(data);
+                            })
+                            .catch(error => console.error('Error:', error));
+                        SaveViewModelLocal();
+                    }
+                };
+            };
+            ko.applyBindings(lvm);
+            setInterval(function () {
+                lvm.loadLobbies();
+                if (lvm.myLobbyData().id() != null) {
+                    lvm.loadLobby(lvm.token());
                     lvm.getCards();
                     lvm.getPlayedCards();
-            }
-        }, 1000);
-
-    </script>
-</body>
-
+                }
+            }, 1000);
+        </script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/api/html/index.html b/api/html/index.html
index 3e043ad..86228c1 100644
--- a/api/html/index.html
+++ b/api/html/index.html
@@ -1,382 +1,367 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bedlam</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <style>
-        /* Add custom CSS styles here */
-        .image-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 8px;
-        }
-        .grid-image {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-    </style>
-</head>
-<body>
-    <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
-        <a class="navbar-brand" href="#" onClick="ReloadOnCrash()">&nbsp Bedlam Online</a>
-        <div id="navbarNav">
-            <div id="navbarText">
-                <span class="navbar-text">Player:&nbsp </span><span data-bind="text: userName"
-                    class="navbar-text"></span> &nbsp
-            </div>
-            <div id="navbarText">
-                <span class="navbar-text">In Lobby:&nbsp </span><span data-bind="text: myLobbyData.id"
-                    class="navbar-text"></span> &nbsp
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Bedlam</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+        <style>
+            /* Add custom CSS styles here */
+            .image-grid {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 8px;
+            }
+            .grid-image {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        </style>
+    </head>
+    <body>
+        <nav class="navbar bg-dark border-bottom border-body" data-bs-theme="dark">
+            <a class="navbar-brand" href="#" onClick="ReloadOnCrash()">&nbsp Bedlam Online</a>
+            <div id="navbarNav">
+                <div id="navbarText">
+                    <span class="navbar-text">Player:&nbsp </span><span data-bind="text: userName"
+                        class="navbar-text"></span> &nbsp
+                </div>
+                <div id="navbarText">
+                    <span class="navbar-text">In Lobby:&nbsp </span><span data-bind="text: myLobbyData.id"
+                        class="navbar-text"></span> &nbsp
+                </div>
             </div>
-        </div>
-    </nav>
-    <div class="container-fluid">
-        <ul class="nav nav-tabs">
-            <li class="nav-item active">
-                <a class="nav-link" href="#lobbies-tab" data-bs-toggle="tab">Lobbies</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="#gameplay-tab" data-bs-toggle="tab">Play Bedlam!</a>
-            </li>
-        </ul>
-        <div class="tab-content">
-            <!-- Lobbies Tab -->
-            <div class="tab-pane fade active" id="lobbies-tab">
-                <div class="row" id="lobbies">
-                    <div class="col-md-3">
-                        <div data-bind="foreach: lobbies">
-                            <div class="card">
-                                <div class="card-header bg-primary text-light">
-                                    <h5><span data-bind="text: id"></span></h5>
-                                </div>
-                                <div class="card-body">
-                                    <ul data-bind="foreach: players">
-                                        <li>
-                                            <span data-bind="text: name"></span> : 
-                                            <span data-bind="text: score"></span> &nbsp
-                                            <span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
-                                        </li>
-                                    </ul>
-                                    <button class="btn btn-primary" data-bind="click: $root.joinLobby">Join Lobby</button>
-                                </div>
-                                <div class="card-footer">
-                                    <strong>Players</strong>
-                                    <span data-bind="text: players().length"></span> Of 8
+        </nav>
+        <div class="container-fluid">
+            <ul class="nav nav-tabs">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#lobbies-tab" data-bs-toggle="tab">Lobbies</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#gameplay-tab" data-bs-toggle="tab">Play Bedlam!</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#diags-tab" data-bs-toggle="tab">Game Diags</a>
+                </li>
+            </ul>
+            <div class="tab-content">
+                <!-- Lobbies Tab -->
+                <div class="tab-pane fade active" id="lobbies-tab">
+                    <div class="row" id="lobbies">
+                        <div class="col-md-3">
+                            <div data-bind="foreach: lobbies">
+                                <div class="card">
+                                    <div class="card-header bg-primary text-light">
+                                        <h5><span data-bind="text: id"></span></h5>
+                                    </div>
+                                    <div class="card-body">
+                                        <ul data-bind="foreach: players">
+                                            <li>
+                                                <span data-bind="text: name"></span> : 
+                                                <span data-bind="text: score"></span> &nbsp
+                                                <span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
+                                            </li>
+                                        </ul>
+                                        <button class="btn btn-primary" data-bind="click: $root.joinLobby">Join Lobby</button>
+                                    </div>
+                                    <div class="card-footer">
+                                        <strong>Players</strong>
+                                        <span data-bind="text: players().length"></span> Of 8
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <!-- Gameplay Tab -->
-            <div class="tab-pane fade" id="gameplay-tab">
-                <div class="row" id="gameplay">
-                    <div class="card mb-3">
-                        <div class="card-header bg-primary text-light">
-                            <h5>Scoreboard for lobby: <span data-bind="text: myLobbyData().id"></span></h5>
-                        </div>
-                        <div class="card-body">
-                            <ul data-bind="foreach: myLobbyData().players">
-                                <li>
-                                    <span data-bind="text: name"></span>:<span data-bind="text: score"></span><span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
-                                </li>
-                            </ul>
-                        </div>
-                        <div class="card-footer">
-                            <strong>Players</strong>&nbsp (<span data-bind="text: myLobbyData().players().length"></span> Of 8) 
-                            <!-- <button class="btn btn-success" data-bind="visible: myLobbyData().players().length > 3 && (! $root.questionCard() || $root.questionCard() == ''), click: $root.getCards">Start Game</button> -->
+                <!-- Gameplay Tab -->
+                <div class="tab-pane fade" id="gameplay-tab">
+                    <div class="row" id="gameplay">
+                        <div class="card mb-3">
+                            <div class="card-header bg-primary text-light">
+                                <h5>Scoreboard for lobby: <span data-bind="text: myLobbyData().id"></span></h5>
+                            </div>
+                            <div class="card-body">
+                                <ul data-bind="foreach: myLobbyData().players">
+                                    <li>
+                                        <span data-bind="text: name"></span>:<span data-bind="text: score"></span><span class="badge bg-primary" data-bind="visible: name == $root.userName()">You</span></h5>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="card-footer">
+                                <strong>Players</strong>&nbsp (<span data-bind="text: myLobbyData().players().length"></span> Of 8) 
+                                <!-- <button class="btn btn-success" data-bind="visible: myLobbyData().players().length > 3 && (! $root.questionCard() || $root.questionCard() == ''), click: $root.getCards">Start Game</button> -->
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row" id="gameplay" data-bind="visible: (!$root.iHavePlayedThisRound() && !$root.amITheJudge())">
-                    <h3>Playing card for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind="attr: {src: '/Card/' + $root.questionCard()}" />
-                    </div>
-                    <!-- ko foreach: answerCards -->
+                    <div class="row" id="gameplay" data-bind="visible: (!$root.iHavePlayedThisRound() && !$root.amITheJudge())">
+                        <h3>Playing card for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.playCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind="attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                </div>
-                <div class="row" id="judging" data-bind="visible: $root.amITheJudge">
-                    <h3>Judging round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
+                        <!-- ko foreach: answerCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.playCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
                     </div>
-                    <!-- ko foreach: playedCards -->
+                    <div class="row" id="judging" data-bind="visible: $root.amITheJudge">
+                        <h3>Judging round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                    <div id="status"></div>
-                </div>
-                <div class="row" id="viewing" data-bind="visible: ($root.iHavePlayedThisRound() && !$root.amITheJudge())">
-                    <h3>Viewing Played Cards for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
-                    <div class="col-md-2">
-                        <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
+                        <!-- ko foreach: playedCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
+                        <div id="status"></div>
                     </div>
-                    <!-- ko foreach: playedCards -->
+                    <div class="row" id="viewing" data-bind="visible: ($root.iHavePlayedThisRound() && !$root.amITheJudge())">
+                        <h3>Viewing Played Cards for round &nbsp<span data-bind="text: myLobbyData().roundNumber()"></span></h3>
                         <div class="col-md-2">
-                            <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            <img class="img-fluid" data-bind=" attr: {src: '/Card/' + $root.questionCard()}" />
                         </div>
-                    <!-- /ko -->
-                    <div id="status"></div>
+                        <!-- ko foreach: playedCards -->
+                            <div class="col-md-2">
+                                <img class="img-fluid grid-image" data-bind="click: $root.judgeCard, attr: {src: '/Card/' + $data}" />
+                            </div>
+                        <!-- /ko -->
+                        <div id="status"></div>
+                    </div>
+                </div>
+                <!-- Diags Tab -->
+                <div class="tab-pane fade active" id="diags-tab">
+                    <div class="row" id="diags">
+                        <pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script>
-
-        var lvm = new GameViewModel(false);
-
-        // Design a function to store the viewmodel state to HTML5 local storage
-        function SaveViewModelLocal() {
-
-            // Save the viewmodel state to local storage
-            localStorage.setItem("lvm", btoa(ko.toJSON(lvm)));
-
-        }
-
-        function ReloadOnCrash() {
-
-            // Load the viewmodel state from local storage
-            if (localStorage.getItem("lvm") != null) {
-
-                setTimeout(function () {
-
-                    console.log("Reloading State");
-                    var lvmObj = JSON.parse(atob(localStorage.getItem("lvm")));
-
-                    lvm.userName(lvmObj.userName);
-                    lvm.token(lvmObj.token);
-
-                    // Map the props of my lobby data
-                    lvm.myLobbyData = ko.observable(new Lobby(
-                        lvmObj.myLobbyData.id, 
-                        lvmObj.myLobbyData.Players, 
-                        lvmObj.myLobbyData.playedCards, 
-                        lvmObj.myLobbyData.roundNumber,
-                        lvmObj.myLobbyData.judgeIndex
-                    ));
-
-                    lvm.questionCard(lvmObj.questionCard);
-                    lvm.answerCards([]);
-
-                    lvmObj.answerCards.forEach(function (card) {
-                        lvm.answerCards.push(card);
-                    });
-                    lvm.lobbies([]);
-
-                    lvmObj.lobbies.forEach(function (lobby) {
-                        lvm.lobbies.push(Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex));
-                    });
-                    console.log("Loading Complete:", lvmObj);
-                }, 2000);
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.min.js" integrity="sha512-vs7+jbztHoMto5Yd/yinM4/y2DOkPLt0fATcN+j+G4ANY2z4faIzZIOMkpBmWdcxt+596FemCh9M18NUJTZwvw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            var lvm = new GameViewModel(false);
+            // Design a function to store the viewmodel state to HTML5 local storage
+            function SaveViewModelLocal() {
+                // Save the viewmodel state to local storage
+                localStorage.setItem("lvm", btoa(ko.toJSON(lvm)));
             }
-        }
-
-        // Declare a lobby with constructor to hold the lobby information
-        function Lobby(id, players, playedCards, roundNumber, judgeIndex) {
-            return {
-                id: ko.observable(id),
-                players: ko.observableArray(players),
-                playedCards: ko.observableArray(playedCards),
-                roundNumber: ko.observable(roundNumber),
-                judgeIndex: ko.observable(judgeIndex)
-            };
-        }
-
-        function GameViewModel(cycle) {
-
-            var self = this;
-
-            self.cycling = cycle;
-
-            // All Players stuff
-            self.lobbies = ko.observableArray([]);
-
-            // My stuff 
-            self.userName = ko.observable("");
-            self.token = ko.observable("");
-
-            // This rounds Stuff
-            self.myLobbyData = ko.observable(Lobby(null, [], [], 0, 0));
-            self.questionCard = ko.observable("");
-            self.answerCards = ko.observableArray([]);
-            self.playedCards = ko.observableArray([]);
-
-            self.iHavePlayedThisRound = ko.computed(function () {
-                // If the LastPlayedCard is not null for my player object (match by player.name to my username) then I have played this round
-                return self.myLobbyData().players().some(player => player.name === self.userName() && player.lastPlayedCard != '');
-            });
-
-            self.amITheJudge = ko.computed(function () {
-                // If the JudgeIndex is the same as my player index then I am the judge
-                return self.myLobbyData().players().findIndex(player => player.name === self.userName()) == self.myLobbyData().judgeIndex();
-            });
-
-            // Methods 
-
-            // GET /Lobbies => Returns a list RESTRICTED LIST OF DATA for ALL lobbies (THE Lobby names and memberships) via a dto to mask keys etc.
-            self.loadLobbies = function () {
-                fetch("/Lobbies", { method: 'GET' }, { headers: { 'Content-Type': 'application/json' } })
-                    .then(response => response.json())
-                    .then(data => {
-                        self.lobbies([]);
-                        data.forEach(function (lobby) {
-                            var newLobby = Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex);
-                            self.lobbies.push(newLobby);
+            function ReloadOnCrash() {
+                // Load the viewmodel state from local storage
+                if (localStorage.getItem("lvm") != null) {
+                    setTimeout(function () {
+                        console.log("Reloading State");
+                        var lvmObj = JSON.parse(atob(localStorage.getItem("lvm")));
+                        lvm.userName(lvmObj.userName);
+                        lvm.token(lvmObj.token);
+                        // Map the props of my lobby data
+                        lvm.myLobbyData = ko.observable(new Lobby(
+                            lvmObj.myLobbyData.id, 
+                            lvmObj.myLobbyData.Players, 
+                            lvmObj.myLobbyData.playedCards, 
+                            lvmObj.myLobbyData.roundNumber,
+                            lvmObj.myLobbyData.judgeIndex
+                        ));
+                        lvm.questionCard(lvmObj.questionCard);
+                        lvm.answerCards([]);
+                        lvmObj.answerCards.forEach(function (card) {
+                            lvm.answerCards.push(card);
                         });
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-            };
-
-            // GET /MyLobby => Returns the extended content of the specific lobby dto the user is in with the specified id from the token
-            self.loadLobby = function (token) {
-                //console.log("Loading Lobby", 'Bearer ' + token)
-                fetch('/MyLobby',
-                    { method: 'GET', headers: {'Authorization': 'Bearer ' + token}})
-                    .then(response => response.json())
-                    .then(data => {
-
-                        // If the round number just changed then the judge just voted and we need to clear the played cards
-                        if (self.myLobbyData().roundNumber() != data.roundNumber) {
-                           self.myLobbyData().players([]);
-                        }
-
-                        self.myLobbyData().id(data.id);
-                        self.myLobbyData().players(data.players);
-                        self.myLobbyData().playedCards(data.playedCards);
-                        self.myLobbyData().roundNumber(data.roundNumber);
-                        self.myLobbyData().judgeIndex(data.judgeIndex);
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-            };
-
-            // GET /Login/{LobbyId} => Joins a user to the game, returns a JWT for the user to send on subsequent requests
-            self.joinLobby = function (lobby) {
-                self.userName(prompt("Please enter your name", ""));
-                fetch(`/Login/${lobby.id()}/${self.userName()}`,
-                    { method: 'GET' })
-                    .then(response => response.text())
-                    .then(data => {
-                        self.token(data.replace("\"", "").replace("\"", ""));
-                        self.loadLobby(data.replace("\"", "").replace("\"", ""));
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        alert('Error:'+ error)
-                    });
-                SaveViewModelLocal();
-            };
-
-            // GET /Cards => Fetches the cards for this round, returns a card dto specific to the user based on the token.
-            self.getCards = function () {
-                fetch('/Cards', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.json())
-                    .then(data => {
-                        if (data == "ERR: /Cards Not authed") {
-                            // This shouldn't happen and is indicative of someone trying to hack the game or there is an old token Being used and the game has restarted since. 
-                            lvm.cycling = false;
-                            localStorage["lvm"] = null;
-                            alert("Hmm! Error! -> You have been logged out, please refresh the page and try again");
-                        }
-                        else {
-                            console.log("Setting Q+A Cards Received");
-                            self.questionCard(data.questionCard);
-                            self.answerCards([]);
-                            data.answerCards.forEach(function (card) {
-                                self.answerCards.push(card);
-                            });
-                        }
-                    })
-                    .catch(error => {
-                            console.error('Error:', error);
-                    });
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // POST /Lobbies/Play/{CardId} => Plays a card for a player into a lobby, returns a success message or error message
-            self.playCard = function (card) {
-                console.log("Playing Card " + card);
-                fetch(`/Lobbies/Play/${card}`, { method: 'POST', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.text())
-                    .then(data => {
-                        console.log('Response' + data);
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // GET /Lobbies/Played => Get the played cards ready for judging
-            self.getPlayedCards = function () {
-                fetch('/Lobbies/Played', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
-                    .then(response => response.json())
-                    .then(data => {
-                        self.playedCards([]);
-                        data.forEach(function (card) {
-                            self.playedCards.push(card);
+                        lvm.lobbies([]);
+                        lvmObj.lobbies.forEach(function (lobby) {
+                            lvm.lobbies.push(Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex));
                         });
-                    })
-                    .catch(error => console.error('Error:', error));
-                SaveViewModelLocal();
-                return true;
-            };
-
-            // POST /Lobbies/Judge/{cardUrl} => Judge votes on a card, returns a success message
-            self.judgeCard = function (card) {
-
-                if(! self.amITheJudge())
-                {
-                    console.log("You are not the judge!");
-                    return;
+                        console.log("Loading Complete:", lvmObj);
+                    }, 2000);
                 }
-                else
-                {
-                    console.log("Judging Card :" + card + " as the winner!");
-                    fetch(`/Lobbies/Judge/${card}`, { method: 'POST', headers: { 'Authorization':'Bearer ' + self.token()}})
-                    .then(response => response.text())
+            }
+            // Declare a lobby with constructor to hold the lobby information
+            function Lobby(id, players, playedCards, roundNumber, judgeIndex) {
+                return {
+                    id: ko.observable(id),
+                    players: ko.observableArray(players),
+                    playedCards: ko.observableArray(playedCards),
+                    roundNumber: ko.observable(roundNumber),
+                    judgeIndex: ko.observable(judgeIndex)
+                };
+            }
+            function GameViewModel() {
+                var self = this;
+                // All Players stuff
+                self.lobbies = ko.observableArray([]);
+                // My stuff 
+                self.userName = ko.observable("");
+                self.token = ko.observable("");
+                // This rounds Stuff
+                self.myLobbyData = ko.observable(Lobby(null, [], [], 0, 0));
+                self.questionCard = ko.observable("");
+                self.answerCards = ko.observableArray([]);
+                self.playedCards = ko.observableArray([]);
+
+                self.RoundPlayedIndex = ko.computed(function(){
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName() && (player.lastPlayedCard != null && player.lastPlayedCard != ''))
+                });
+
+                self.iHavePlayedThisRound = ko.computed(function () {
+                    // If the LastPlayedCard is not null for my player object (match by player.name to my username) then I have played this round
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName() && (player.lastPlayedCard != null && player.lastPlayedCard != '')) != -1;
+                });
+
+                self.amITheJudge = ko.computed(function () {
+                    // If the JudgeIndex is the same as my player index then I am the judge
+                    return self.myLobbyData().players().findIndex(player => player.name === self.userName()) == self.myLobbyData().judgeIndex();
+                });
+
+                // Methods 
+                // GET /Lobbies => Returns a list RESTRICTED LIST OF DATA for ALL lobbies (THE Lobby names and memberships) via a dto to mask keys etc.
+                self.loadLobbies = function () {
+                    fetch("/Lobbies", { method: 'GET' }, { headers: { 'Content-Type': 'application/json' } })
+                        .then(response => response.json())
                         .then(data => {
-                            console.log(data);
+                            self.lobbies([]);
+                            data.forEach(function (lobby) {
+                                var newLobby = Lobby(lobby.id, lobby.players, lobby.playedCards, lobby.roundNumber, lobby.judgeIndex);
+                                self.lobbies.push(newLobby);
+                            });
                         })
                         .catch(error => console.error('Error:', error));
                     SaveViewModelLocal();
-                }
-             };
-        };
-
-        ko.applyBindings(lvm);
-
-        lvm.loadLobbies();
-
-        setInterval(function () {
-            // Background refresh of the lobbies so the player numbers are up to date
-            lvm.loadLobbies();
-        },5000);
+                };
+
+                // GET /MyLobby => Returns the extended content of the specific lobby dto the user is in with the specified id from the token
+                self.loadLobby = function (token) {
+                    //console.log("Loading Lobby", 'Bearer ' + token)
+                    fetch('/MyLobby',
+                        { method: 'GET', headers: {'Authorization': 'Bearer ' + token}})
+                        .then(response => response.json())
+                        .then(data => {
 
-        setInterval(function () {
+                            // If the round number just changed then the judge just voted and we need to clear the played cards
+                            if (self.myLobbyData().roundNumber() != data.roundNumber) {
+                                self.myLobbyData().players([]);
+                            }
+
+
+                            self.myLobbyData().id(data.id);
+                            self.myLobbyData().players(data.players);
+                            self.myLobbyData().playedCards(data.playedCards);
+                            self.myLobbyData().roundNumber(data.roundNumber);
+                            self.myLobbyData().judgeIndex(data.judgeIndex);
+                            // If this is the 10th round then the game is over and WE NEED TO popup a message
+                            if (data.roundNumber >= 8) {
+                                // Who has the highest score? 
+                                var sortedPlayers = data.players.sort(function (a, b) {
+                                    return b.score - a.score;
+                                }); // Sort descending
+                                alert("Game Over! The winner is " + sortedPlayers[0].name + " with a score of " + sortedPlayers[0].score);
+                            }
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                };
+
+                // GET /Login/{LobbyId} => Joins a user to the game, returns a JWT for the user to send on subsequent requests
+                self.joinLobby = function (lobby) {
+                    self.userName(prompt("Please enter your name", ""));
+                    fetch(`/Login/${lobby.id()}/${self.userName()}`,
+                        { method: 'GET' })
+                        .then(response => response.text())
+                        .then(data => {
+                            self.token(data.replace("\"", "").replace("\"", ""));
+                            self.loadLobby(data.replace("\"", "").replace("\"", ""));
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Error:'+ error)
+                        });
+                    SaveViewModelLocal();
+                };
 
-            if (lvm.myLobbyData().id() != null) {
-                lvm.loadLobby(lvm.token());
+                // GET /Cards => Fetches the cards for this round, returns a card dto specific to the user based on the token.
+                self.getCards = function () {
+                    fetch('/Cards', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data == "ERR: /Cards Not authed") {
+                                // This shouldn't happen and is indicative of someone trying to hack the game or there is an old token Being used and the game has restarted since. 
+                                lvm.cycling = false;
+                                localStorage["lvm"] = null;
+                                alert("Hmm! Error! -> You have been logged out, please refresh the page and try again");
+                            }
+                            else {
+                                console.log("Setting Q+A Cards Received");
+                                self.questionCard(data.questionCard);
+                                self.answerCards([]);
+                                data.answerCards.forEach(function (card) {
+                                    self.answerCards.push(card);
+                                });
+                            }
+                        })
+                        .catch(error => {
+                                console.error('Error:', error);
+                        });
+                    SaveViewModelLocal();
+                    return true;
+                };
+
+                // POST /Lobbies/Play/{CardId} => Plays a card for a player into a lobby, returns a success message or error message
+                self.playCard = function (card) {
+                    console.log("Playing Card " + card);
+                    fetch(`/Lobbies/Play/${card}`, { method: 'POST', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.text())
+                        .then(data => {
+                            console.log('Response' + data);
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                    return true;
+                };
 
+                // GET /Lobbies/Played => Get the played cards ready for judging
+                self.getPlayedCards = function () {
+                    fetch('/Lobbies/Played', { method: 'GET', headers: { 'Authorization': 'Bearer ' + self.token() } })
+                        .then(response => response.json())
+                        .then(data => {
+                            self.playedCards([]);
+                            data.forEach(function (card) {
+                                self.playedCards.push(card);
+                            });
+                        })
+                        .catch(error => console.error('Error:', error));
+                    SaveViewModelLocal();
+                    return true;
+                };
+
+                // POST /Lobbies/Judge/{cardUrl} => Judge votes on a card, returns a success message
+                self.judgeCard = function (card) {
+                    if(! self.amITheJudge())
+                    {
+                        console.log("You are not the judge!");
+                        return;
+                    }
+                    else
+                    {
+                        console.log("Judging Card :" + card + " as the winner!");
+                        fetch(`/Lobbies/Judge/${card}`, { method: 'POST', headers: { 'Authorization':'Bearer ' + self.token()}})
+                        .then(response => response.text())
+                            .then(data => {
+                                console.log(data);
+                            })
+                            .catch(error => console.error('Error:', error));
+                        SaveViewModelLocal();
+                    }
+                };
+            };
+            ko.applyBindings(lvm);
+            setInterval(function () {
+                lvm.loadLobbies();
+                if (lvm.myLobbyData().id() != null) {
+                    lvm.loadLobby(lvm.token());
                     lvm.getCards();
                     lvm.getPlayedCards();
-            }
-        }, 1000);
-
-    </script>
-</body>
-
+                }
+            }, 1000);
+        </script>
+    </body>
 </html>
\ No newline at end of file
diff --git a/api/obj/Debug/net7.0/api.dll b/api/obj/Debug/net7.0/api.dll
index 0881f50..19b41a8 100644
Binary files a/api/obj/Debug/net7.0/api.dll and b/api/obj/Debug/net7.0/api.dll differ
diff --git a/api/obj/Debug/net7.0/api.pdb b/api/obj/Debug/net7.0/api.pdb
index e18af6e..0b30528 100644
Binary files a/api/obj/Debug/net7.0/api.pdb and b/api/obj/Debug/net7.0/api.pdb differ
diff --git a/api/obj/Debug/net7.0/ref/api.dll b/api/obj/Debug/net7.0/ref/api.dll
index f642550..c40e2eb 100644
Binary files a/api/obj/Debug/net7.0/ref/api.dll and b/api/obj/Debug/net7.0/ref/api.dll differ
diff --git a/api/obj/Debug/net7.0/refint/api.dll b/api/obj/Debug/net7.0/refint/api.dll
index f642550..c40e2eb 100644
Binary files a/api/obj/Debug/net7.0/refint/api.dll and b/api/obj/Debug/net7.0/refint/api.dll differ