diff --git a/data_src/index.html b/data_src/index.html
index 55930d2ab26b5792c6ae8aab48f19e43b895a0c6..654eaf52520a0a7a451667fe15aa1378a89aeb51 100644
--- a/data_src/index.html
+++ b/data_src/index.html
@@ -65,6 +65,61 @@
 
     </div> <!-- main -->
 
+    <div class="col-lg-4 offset-lg-4 mt-3" id="scores">
+
+      <div class="card">
+        <h5 class="card-header">
+          Last Game / Highscores
+        </h5>
+        <div class="card-body">
+
+          <div class="row mb-1">
+            <div class="col col-lg-3 text-end">Games</div>
+            <div class="col col-lg-8 pt-1">
+              <div class="progress-stacked">
+                <div class="progress" role="progressbar" style="width: 0%" id="lastGame">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+                </div>
+                <div class="progress" role="progressbar" style="width: 100%" id="hsGames">
+                  <div class="progress-bar bg-primary"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row mb-1">
+            <div class="col col-lg-3 text-end">Ticks</div>
+            <div class="col col-lg-8 pt-1">
+              <div class="progress-stacked">
+                <div class="progress" role="progressbar" style="width: 0%" id="lastTicks">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+                </div>
+                <div class="progress" role="progressbar" style="width: 100%" id="hsTicks">
+                  <div class="progress-bar bg-primary"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col col-lg-3 text-end">Cells</div>
+            <div class="col col-lg-8 pt-1">
+              <div class="progress-stacked">
+                <div class="progress" role="progressbar" style="width: 0%" id="lastCells">
+                  <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"></div>
+                </div>
+                <div class="progress" role="progressbar" style="width: 100%" id="hsCells">
+                  <div class="progress-bar bg-primary"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+    </div> <!-- scores -->
+
     <div class="col-lg-4 offset-lg-4 mt-3 collapse" id="debug">
 
       <div class="card">
diff --git a/data_src/main.js b/data_src/main.js
index 58eaac2edfe42f5a2dec9e220f95db4932dda6ec..57a89e91be9ddbca8b80600570f8ebeffb8bed50 100644
--- a/data_src/main.js
+++ b/data_src/main.js
@@ -10,6 +10,8 @@ var settings = {
     }
 };
 
+var highscores = {};
+
 var uiEnabled = false;
 
 $(document).ready(function() {
@@ -128,7 +130,12 @@ function startSocket() {
         addMessage("⬅️ " + JSON.stringify(data));
         if (data.settings) {
             loadSettings(data.settings);
+        } else if (data.highscores) {
+            updateHighscore(data.highscores);
+        } else if (data.stats) {
+            updateStats(data.stats);
         }
+
     });
 }
 
@@ -149,6 +156,31 @@ function loadSettings(data) {
     sendAction('getHighscores');
 }
 
+function updateHighscore(hs) {
+    highscores = hs;
+    $('#hsGames').find('.progress-bar').text(hs.games);
+    $('#hsTicks').find('.progress-bar').text(hs.ticks);
+    $('#hsCells').find('.progress-bar').text(hs.cells);
+}
+
+function updateStats(lg) {
+    var lastGameWidth = 100 / (highscores.games / lg.game);
+    var lastTicksWidth = 100 / (highscores.ticks / lg.ticks);
+    var lastCellsWidth = 100 / (highscores.cells / lg.cells);
+    var hsGamesWidth = (1 - (lg.game / highscores.games)) * 100;
+    var hsTicksWidth = (1 - (lg.ticks / highscores.ticks)) * 100;
+    var hsCellsWidth = (1 - (lg.cells / highscores.cells)) * 100;
+    $('#hsGames').css('width', hsGamesWidth+'%');
+    $('#lastGame').css('width', lastGameWidth+'%');
+    $('#lastGame').find('.progress-bar').text(lg.game);
+    $('#hsTicks').css('width', hsTicksWidth+'%');
+    $('#lastTicks').css('width', lastTicksWidth+'%');
+    $('#lastTicks').find('.progress-bar').text(lg.ticks);
+    $('#hsCells').css('width', hsCellsWidth+'%');
+    $('#lastCells').css('width', lastCellsWidth+'%');
+    $('#lastCells').find('.progress-bar').text(lg.cells);
+}
+
 function mapRange(number, inMin, inMax, outMin, outMax) {
     return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
 }
diff --git a/src/gameoflife.cpp b/src/gameoflife.cpp
index f26874938b581f9b6f4e341c644408750ff94961..b15ea136d8765992b716c0afccbdc2dd7d300cf3 100644
--- a/src/gameoflife.cpp
+++ b/src/gameoflife.cpp
@@ -163,10 +163,10 @@ void gameLoop()
       finalTicks = currentTick - noEvolutionTicksLimit;
       currentMillis = millis();
       showEndScreen(finalTicks);
-      sendGameStats(gameEra, finalTicks, cellsAliveNow);
       if(updateHighscores(gameEra, finalTicks, cellsAliveNow)) {
         sendHighscores();
       }
+      sendGameStats(gameEra, finalTicks, cellsAliveNow);
       gameOver = true;
     }
   }