diff --git a/src/admin/gym/index.php b/src/admin/gym/index.php
index 0572d0ac4396c8dee4bc0d559949b0fbe5dbc082..0e87707fadda795abde62d43c56adfa643130173 100644
--- a/src/admin/gym/index.php
+++ b/src/admin/gym/index.php
@@ -120,9 +120,8 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <script src="/public/javascript/gym/application.js"></script>
     <script src="/public/javascript/gym/trainer.js"></script>
     <script>
-        // getGymTrainers(<?php echo $gym_id ?>);
         getGymApplication(<?php echo $gym_id ?>);
-        // getTrainersByGymId(<?php echo $gym_id ?>);
+        getTrainersByGymId(<?php echo $gym_id ?>);
     </script>
 </body>
 
diff --git a/src/admin/gym/trainer/index.php b/src/admin/gym/trainer/index.php
index 36e31c2b4352d1de658651d58882c6dd6fab3519..d150282b007c6a0321d412ccb3fcdd0be0f3efe4 100644
--- a/src/admin/gym/trainer/index.php
+++ b/src/admin/gym/trainer/index.php
@@ -44,8 +44,7 @@ AuthMiddleware::getInstance()->secureRoute(true);
     <script src="/public/javascript/gym/trainer_card.js"></script>
     <script src="/public/javascript/gym/trainer.js"></script>
     <script>
-        showTrainerInformation(trainerData[0]);   // Temporary example
-        showTrainerSkill(trainerData[0]);
+        getTrainerInformation(gymId, username);
     </script>
 </body>
 
diff --git a/src/public/javascript/gym/trainer.js b/src/public/javascript/gym/trainer.js
index be6e5810155ff010b866a2c706a4837fd5184a54..0ff484f3bab3e02c74f664dfb3e9e020f45832fe 100644
--- a/src/public/javascript/gym/trainer.js
+++ b/src/public/javascript/gym/trainer.js
@@ -31,7 +31,7 @@ let trainer_1 = {
 function getTrainersByGymId(gymId) {
     const xhr = new XMLHttpRequest();
 
-    const apiUrl = `http://localhost:3000/api/trainer?gym_id=${gymId}`;
+    const apiUrl = `http://localhost:3000/api/trainer/${gymId}`;
 
     xhr.open("GET", apiUrl, true);
     xhr.setRequestHeader("X-API-KEY", "mbdmatkul4sks");
@@ -43,6 +43,33 @@ function getTrainersByGymId(gymId) {
             if (this.status === 200) {
                 const trainersData = JSON.parse(this.responseText);
                 console.log("Trainers data:", trainersData);
+                showGymTrainers(trainersData);
+            } else {
+                console.error("Error fetching trainers data");
+            }
+        }
+    };
+
+    xhr.send();
+}
+
+function getTrainerInformation(gymId, username) {
+    const xhr = new XMLHttpRequest();
+
+    const apiUrl = `http://localhost:3000/api/trainer/${gymId}/${username}`;
+
+    xhr.open("GET", apiUrl, true);
+    xhr.setRequestHeader("X-API-KEY", "mbdmatkul4sks");
+
+    xhr.withCredentials = true;
+
+    xhr.onreadystatechange = function () {
+        if (this.readyState === 4) {
+            if (this.status === 200) {
+                const trainersData = JSON.parse(this.responseText);
+                console.log("Trainers data:", trainersData);
+                showTrainerInformation(trainersData[0]);
+                showTrainerSkill(trainersData[0]);
             } else {
                 console.error("Error fetching trainers data");
             }
@@ -52,16 +79,16 @@ function getTrainersByGymId(gymId) {
     xhr.send();
 }
   
-function showGymTrainers(data) {
+function showGymTrainers(trainers) {
     const gymTrainerList = document.getElementById("gym-trainer-list");
     gymTrainerList.innerHTML = "";
-    if (data.length == 0) {
+    if (trainers.length == 0) {
       gymTrainerList.innerHTML = `
       <div class="space"></div>
       <div class="gym-card-text"> No Aplication found </div>
       `;
     }
-    data.forEach((trainer) => {
+    trainers.forEach((trainer) => {
       gymTrainerList.innerHTML += TrainerCard(trainer);
     });
 }
@@ -81,11 +108,11 @@ function showTrainerInformation(trainer){
         </tr>
         <tr>
             <td><strong>Trainer Name</strong></td>
-            <td>${trainer.trainer_name}</td>
+            <td>${trainer.name}</td>
         </tr>
         <tr>
             <td><strong>Trainer Description</strong></td>
-            <td>${trainer.trainer_description}</td>
+            <td>${trainer.description}</td>
         </tr>
 
     </table>
@@ -95,22 +122,21 @@ function showTrainerInformation(trainer){
 function showTrainerSkill(trainer){
     const gymTrainer = document.getElementById("application-trainer-2");
 
-    let i = 1;
-    for(const skillName in trainer.skills) {
-        const skillDescription = trainer.skills[skillName];
+    let i = 0;
+    trainer.trainer_skill.forEach((trainer_skill) => {
+        i += 1;
         gymTrainer.innerHTML += `
         <h2>Trainer Skill ${i}</h2>
         <table>
             <tr>
                 <td><strong>Skill Name</strong></td>
-                <td>${skillName}</td>
+                <td>${trainer_skill.skill.skill_name}</td>
             </tr>
             <tr>
                 <td><strong>Skill Description</strong></td>
-                <td>${skillDescription}</td>
+                <td>${trainer_skill.skill.description}</td>
             </tr>
         </table>
         `;
-        i++;
-    }
+    });
 }
\ No newline at end of file
diff --git a/src/public/javascript/gym/trainer_card.js b/src/public/javascript/gym/trainer_card.js
index 993bd3e78e2005569274689cdf2c8686b422c90e..fa0bd6f4e1872edbd423d1b1de68f57a3d642a6e 100644
--- a/src/public/javascript/gym/trainer_card.js
+++ b/src/public/javascript/gym/trainer_card.js
@@ -35,7 +35,7 @@ function ApplicationCard(trainer){
 }
 
 function TrainerCard(trainer){
-    let truncated_name = truncateText(trainer.trainer_name, 16);
+    let truncated_name = truncateText(trainer.name, 16);
     let tname = "trainer name : " + truncated_name;
     let tusername = "username : " + trainer.username;
     let trainer_card = `