diff --git a/Scripts/modules/clicktest.js b/Scripts/modules/clicktest.js
new file mode 100644
index 0000000..856fa63
--- /dev/null
+++ b/Scripts/modules/clicktest.js
@@ -0,0 +1,82 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const gameTemplate = document.getElementById('test').content;
+  const gameContainer = document.querySelector('.click-test-content');
+
+  // Static mapping of game names and universe IDs
+  const gamesData = [
+    { universeId: '4922186765', name: 'Game Name 1' },
+    { universeId: 'anotherUniverseId', name: 'Another Game' },
+    { universeId: 'anotherUniverseId2', name: 'Yet Another Game' }
+  ];
+
+  const fetchAndDisplayGame = (game) => {
+    const apiUrl = `https://games.roproxy.com/v1/games?universeIds=${game.universeId}`;
+    
+    fetch(apiUrl)
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`Network response was not ok: ${response.statusText}`);
+        }
+        return response.json();
+      })
+      .then(data => {
+        if (!data.data || !Array.isArray(data.data)) {
+          throw new Error('Invalid data format received from API');
+        }
+
+        data.data.forEach(gameData => {
+          const gameClone = document.importNode(gameTemplate, true);
+
+          // Fetch game icon (image)
+          const imgUrl = `https://thumbnails.roproxy.com/v1/games/icons?universeIds=${game.universeId}&returnPolicy=PlaceHolder&size=256x256&format=Png&isCircular=false`;
+
+          fetch(imgUrl)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error(`Network response was not ok: ${response.statusText}`);
+              }
+              return response.json();
+            })
+            .then(data => {
+              if (data && data.data && data.data[0] && data.data[0].imageUrl) {
+                const imageUrl = data.data[0].imageUrl;
+                gameClone.querySelector('.icon').src = imageUrl;
+              } else {
+                console.error('Invalid image data received from API');
+              }
+
+              // Add click event listener to the game element
+              gameClone.addEventListener('click', () => {
+                const customPageUrl = `../games/game.html?gameName=${encodeURIComponent(game.name)}`;
+                window.location.href = customPageUrl;
+              });
+
+              // Append the clone to the container
+              gameContainer.appendChild(gameClone);
+            })
+            .catch(error => {
+              console.error('Error fetching the thumbnail:', error);
+            });
+
+          // Set other game details
+          gameClone.querySelector('.game-title').textContent = gameData.name || 'No title available';
+          gameClone.querySelector('.game-desc').textContent = gameData.description || 'No description available';
+
+          // Use static text for other details if needed
+          gameClone.querySelector('.active').textContent = `Active: ${gameData.playing || 'N/A'}`;
+          gameClone.querySelector('.owner').textContent = `Owner: ${gameData.creator && gameData.creator.name ? gameData.creator.name : 'N/A'}`;
+          gameClone.querySelector('.likes').textContent = `Likes: ${gameData.likes || 'N/A'}`;
+        });
+      })
+      .catch(error => {
+        console.error('Error fetching the game data:', error);
+        const errorMessage = document.createElement('p');
+        errorMessage.textContent = 'Error fetching the game data. Please try again later.';
+        gameContainer.appendChild(errorMessage);
+      });
+  };
+
+  gamesData.forEach(game => {
+    fetchAndDisplayGame(game);
+  });
+});
\ No newline at end of file
diff --git a/Scripts/modules/test.js b/Scripts/modules/test.js
index 0e1e647..5bc5eec 100644
--- a/Scripts/modules/test.js
+++ b/Scripts/modules/test.js
@@ -8,6 +8,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Function to fetch and display game data for a single universe ID
   const fetchAndDisplayGame = (universeId) => {
     const apiUrl = `https://games.roproxy.com/v1/games?universeIds=${universeId}`;
+    
     console.log('Fetching data from API URL:', apiUrl);
 
     fetch(apiUrl)
@@ -27,14 +28,41 @@ document.addEventListener('DOMContentLoaded', () => {
         data.data.forEach(game => {
           const gameClone = document.importNode(gameTemplate, true);
 
+          // Fetch game icon (image)
+          const imgUrl = `https://thumbnails.roproxy.com/v1/games/icons?universeIds=${universeId}&returnPolicy=PlaceHolder&size=256x256&format=Png&isCircular=false`;
+
+          fetch(imgUrl)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error(`Network response was not ok: ${response.statusText}`);
+              }
+              return response.json(); // Parse JSON only if response is OK
+            })
+            .then(data => {
+              console.log('thumb API response data:', data);
+
+              if (data && data.data && data.data[0] && data.data[0].imageUrl) {
+                const imageUrl = data.data[0].imageUrl;
+                // Set the image source here, after fetching the image data
+                gameClone.querySelector('.icon').src = imageUrl;
+              } else {
+                console.error('Invalid image data received from API');
+              }
+
+              // After setting the image, append the clone to the container
+              gameContainer.appendChild(gameClone);
+            })
+            .catch(error => {
+              console.error('Error fetching the thumbnail:', error);
+            });
+
+          // Set other game details here
           gameClone.querySelector('.game-title').textContent = game.name || 'No title available';
-          gameClone.querySelector('.icon').src = `https://thumbnails.roblox.com/v1/games/icons?universeIds=${universeId}&returnPolicy=PlaceHolder&size=256x256&format=Png&isCircular=false`;
           gameClone.querySelector('.game-desc').textContent = game.description || 'No description available';
           gameClone.querySelector('.active').textContent = `active: ${game.playing || 'N/A'}`;
           gameClone.querySelector('.owner').textContent = `owner: ${game.creator && game.creator.name ? game.creator.name : 'N/A'}`;
           gameClone.querySelector('.likes').textContent = `likes: ${game.likes || 'N/A'}`;
 
-          gameContainer.appendChild(gameClone);
         });
       })
       .catch(error => {
diff --git a/games.html b/games.html
index 90e359c..564c610 100644
--- a/games.html
+++ b/games.html
@@ -231,7 +231,7 @@ <h1>likes: ?</h1>
     
       <div class ="game-info"> 
       <p class="game-title"></p>
-       <img class="icon" src="Img/icon-para.png"></img>
+       <img class="icon" src=""></img>
       <p class="game-desc"> </p>
       <div class ="stats-game">
         <br>
@@ -270,8 +270,33 @@ <h1 class="likes"></h1>
   </div>
 </section>
 
+<section class="click-test">
+      <div class ="games"> <a name="unviere"></a> <h1 class="sec-header">auto load</h1>
+  <p class="sec-desc"> click to other page test</p>
+  <div class="game-list">
+   
+    
+ 
+  <div class="games-container">
+  <div class = "game-inf-scrolling">
+    
+    <div class="click-test-content">
+      
+          </div>
+       
+       <!---->
+
+         </div>
+  </div>
+   </div>
+  </div>
+ 
+  </div>
+</section>
+
 <script defer type="module" src ="Scripts/modules/test.js"></script>
   
+  <script defer type="module" src ="Scripts/modules/clicktest.js"></script>
          
 
 
diff --git a/games/game.html b/games/game.html
index 949eb49..f9715f8 100644
--- a/games/game.html
+++ b/games/game.html
@@ -1,22 +1,84 @@
 <!DOCTYPE html>
-<html>
-
+<html lang="en">
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title></title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Game Details</title>
 </head>
-
 <body>
-<div class="game-details">
-  <h1 class="game-title"></h1>
-  <img class="game-icon" alt="Game Icon">
-  <p class="game-description"></p>
-  <p class="active-players"></p>
-  <p class="game-likes"></p>
-</div>
+  <h1 id="gameTitle">Game Title</h1>
+  <img id="gameIcon" src="" alt="Game Icon">
+  <p id="gameDesc">Game Description</p>
+  <p id="gameActive">Active Players</p>
+  <p id="gameOwner">Owner</p>
+  <p id="gameLikes">Likes</p>
 
- <script src = "../../games/scripts/data.js"></script>
-</body>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const gameName = urlParams.get('gameName');
+
+      if (gameName) {
+        // Static mapping of game names to universe IDs and other details
+        const gameDetails = {
+          'Game Name 1': { universeId: '4922186765' },
+          'Another Game': { universeId: 'anotherUniverseId' },
+          'Yet Another Game': { universeId: 'anotherUniverseId2' }
+        };
 
+        const game = gameDetails[gameName];
+
+        if (game) {
+          const apiUrl = `https://games.roproxy.com/v1/games?universeIds=${game.universeId}`;
+
+          fetch(apiUrl)
+            .then(response => {
+              if (!response.ok) {
+                throw new Error(`Network response was not ok: ${response.statusText}`);
+              }
+              return response.json();
+            })
+            .then(data => {
+              if (data.data && Array.isArray(data.data) && data.data.length > 0) {
+                const gameData = data.data[0];
+                document.getElementById('gameTitle').textContent = gameName || 'No title available';
+                document.getElementById('gameDesc').textContent = 'Description not needed'; // Static text
+                document.getElementById('gameActive').textContent = `Active: ${gameData.playing || 'N/A'}`;
+                document.getElementById('gameOwner').textContent = `Owner: ${gameData.creator && gameData.creator.name ? gameData.creator.name : 'N/A'}`;
+                document.getElementById('gameLikes').textContent = `Likes: ${gameData.likes || 'N/A'}`;
+
+                // Fetch and display game icon
+                const imgUrl = `https://thumbnails.roproxy.com/v1/games/icons?universeIds=${game.universeId}&returnPolicy=PlaceHolder&size=256x256&format=Png&isCircular=false`;
+                fetch(imgUrl)
+                  .then(response => {
+                    if (!response.ok) {
+                      throw new Error(`Network response was not ok: ${response.statusText}`);
+                    }
+                    return response.json();
+                  })
+                  .then(data => {
+                    if (data && data.data && data.data[0] && data.data[0].imageUrl) {
+                      const imageUrl = data.data[0].imageUrl;
+                      document.getElementById('gameIcon').src = imageUrl;
+                    } else {
+                      console.error('Invalid image data received from API');
+                    }
+                  })
+                  .catch(error => {
+                    console.error('Error fetching the thumbnail:', error);
+                  });
+              }
+            })
+            .catch(error => {
+              console.error('Error fetching the game data:', error);
+            });
+        } else {
+          console.error('Game details not found for name:', gameName);
+        }
+      } else {
+        console.error('Game name not found in URL parameters.');
+      }
+    });
+  </script>
+</body>
 </html>
\ No newline at end of file