diff --git a/scripts/system/html/js/record.js b/scripts/system/html/js/record.js
index 4fe8e4aeb6..e915ac418c 100644
--- a/scripts/system/html/js/record.js
+++ b/scripts/system/html/js/record.js
@@ -14,7 +14,7 @@ var isUsingToolbar = false,
     numberOfPlayers = 0,
     recordingsBeingPlayed = [],
     elRecordingsPlaying,
-    elNumberOfPlayers,
+    elPlayersUnused,
     elLoadButton,
     elRecordButton,
     EVENT_BRIDGE_TYPE = "record",
@@ -38,6 +38,10 @@ function orderRecording(a, b) {
     return a.filename > b.filename ? 1 : -1;
 }
 
+function updatePlayersUnused() {
+    elPlayersUnused.innerHTML = numberOfPlayers - recordingsBeingPlayed.length;
+}
+
 function updateRecordings() {
     var tbody,
         tr,
@@ -70,6 +74,8 @@ function updateRecordings() {
     }
 
     elRecordingsPlaying.replaceChild(tbody, elRecordingsPlaying.getElementsByTagName("tbody")[0]);
+
+    updatePlayersUnused();
 }
 
 function updateLoadButton() {
@@ -91,7 +97,7 @@ function onScriptEventReceived(data) {
             break;
         case NUMBER_OF_PLAYERS_ACTION:
             numberOfPlayers = message.value;
-            elNumberOfPlayers.innerHTML = numberOfPlayers;
+            updatePlayersUnused();
             updateLoadButton();
             break;
         }
@@ -103,7 +109,7 @@ function onBodyLoaded() {
     EventBridge.scriptEventReceived.connect(onScriptEventReceived);
 
     elRecordingsPlaying = document.getElementById("recordings-playing");
-    elNumberOfPlayers = document.getElementById("number-of-players");
+    elPlayersUnused = document.getElementById("players-unused");
 
     elLoadButton = document.getElementById("load-button");
     elLoadButton.onclick = function () {
diff --git a/scripts/system/html/record.html b/scripts/system/html/record.html
index 96e15fc1e5..0358d6af8a 100644
--- a/scripts/system/html/record.html
+++ b/scripts/system/html/record.html
@@ -29,11 +29,13 @@
                 </thead>
                 <tbody>
                 </tbody>
+                <tfoot>
+                    <tr>
+                        <td id="footer-text" colspan="2">Number of available instances: <span id="players-unused"></span></td>
+                    </tr>
+                </tfoot>
             </table>
         </div>
-        <div>
-            <p>Number of players: <span id="number-of-players">0</span></p>
-        </div>
         <div>
             <input id="load-button" type="button" value="Load" disabled />
         </div>