diff --git a/static/assets/js/games.js b/static/assets/js/games.js
index 33648bd5..1e47e255 100644
--- a/static/assets/js/games.js
+++ b/static/assets/js/games.js
@@ -1,32 +1,36 @@
 window.addEventListener("load", (event) => {
   const gameContainer = document.getElementById("game-container");
   const text = document.getElementById("text");
+  let loadedImages = 0; // Initialize a counter for loaded images
+
   try {
     fetch("/assets/json/load/games.json")
       .then((response) => response.json())
       .then((games) => {
         games.sort((a, b) => a.name.localeCompare(b.name));
-        games.forEach(function (game, gameNum) {
-          text.innerText = `Loading games (${gameNum + 1}/${games.length})`;
+        const totalImages = games.length; // Get total number of images
 
+        games.forEach(function (game, gameNum) {
           let gameHtml;
           if (game.usesProxy) {
             gameHtml = `<div class="card" style="padding-top: 5px">
-            <a onclick="${game.alert ? `alert('${game.alert}'); ` : ""}hire('${game.url}');">
-              <div class="image-container">
-                <img loading="lazy" src="${game.image}" style="border-radius: 25px">
-                <p class="item-name">${game.name}</p>
-              </div>
-            </a>
-          </div>`;
+              <a onclick="${game.alert ? `alert('${game.alert}'); ` : ""}hire('${game.url}');">
+                <div class="image-container">
+                  <img loading="lazy" src="${game.image}" style="border-radius: 25px" 
+                       onload="handleImageLoad(${totalImages})"> <!-- Call function when image loads -->
+                  <p class="item-name">${game.name}</p>
+                </div>
+              </a>
+            </div>`;
           } else {
             gameHtml = `<div class="card" style="padding-top: 5px">
               <a href="${game.url}" rel="noopener noreferrer" ${game.alert ? `onclick="alert('${game.alert}');"` : ""}>
-              <div class="image-container">
-                <img loading="lazy" src="${game.image}" style="border-radius: 25px">
-                <p class="item-name">${game.name}</p>
-              </div>
-            </a>
+                <div class="image-container">
+                  <img loading="lazy" src="${game.image}" style="border-radius: 25px" 
+                       onload="handleImageLoad(${totalImages})"> <!-- Call function when image loads -->
+                  <p class="item-name">${game.name}</p>
+                </div>
+              </a>
             </div>`;
           }
           gameContainer.insertAdjacentHTML("beforeend", gameHtml);
@@ -34,6 +38,7 @@ window.addEventListener("load", (event) => {
       });
 
     text.style.display = "none";
+
     const searchbar = document.getElementById("searchbar");
     if (searchbar)
       searchbar.placeholder = `Click here or type to search through our ${games.length} games!`;
@@ -41,4 +46,10 @@ window.addEventListener("load", (event) => {
     text.innerHTML = `Error in fetching data<br>${error}`;
     console.error(error);
   }
+
+  // Function to handle image load
+  function handleImageLoad(totalImages) {
+    loadedImages++; // Increment loaded images counter
+    text.innerText = `Loading games (${loadedImages}/${totalImages})`; // Update loading text
+  }
 });