diff --git a/static/js/indexListener.js b/static/js/indexListener.js
index 533609d..ea49a02 100644
--- a/static/js/indexListener.js
+++ b/static/js/indexListener.js
@@ -22,5 +22,7 @@ document.addEventListener("DOMContentLoaded", function () {
         updateIframes();
         updateMonsterStats();
         updateMonsterName();
+        updateMonsterFamily();
+        updateMonsterLocation();
     });
 });
diff --git a/static/js/updateMonsterFamily.js b/static/js/updateMonsterFamily.js
new file mode 100644
index 0000000..40fda5c
--- /dev/null
+++ b/static/js/updateMonsterFamily.js
@@ -0,0 +1,16 @@
+function updateMonsterFamily() {
+    // Get the selected monster from the dropdown
+    var selectedMonster = document.getElementById("monsterDropdown").value;
+
+    // Make an API request to get the stats for the selected monster
+    fetch(`/api/monster/stats?monster=${selectedMonster}`)
+      .then(response => response.json())
+      .then(data => {
+        // Update the HTML content with the monster family
+        var familyContainer = document.getElementById("monsterFamilyContainer");
+        familyContainer.innerHTML = `<h2>${data.Family}</h2>`;
+      })
+      .catch(error => {
+        console.error("Error fetching monster family:", error);
+      });
+  }
\ No newline at end of file
diff --git a/static/js/updateMonsterLocation.js b/static/js/updateMonsterLocation.js
new file mode 100644
index 0000000..3d06dd4
--- /dev/null
+++ b/static/js/updateMonsterLocation.js
@@ -0,0 +1,23 @@
+function updateMonsterLocation() {
+  // Get the selected monster from the dropdown
+  var selectedMonster = document.getElementById("monsterDropdown").value;
+
+  // Make an API request to get the stats for the selected monster
+  fetch(`/api/monster/stats?monster=${selectedMonster}`)
+    .then(response => response.json())
+    .then(data => {
+      // Check if location is not null before updating HTML content
+      if (data.Location !== null) {
+        // Update the HTML content with the monster location
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = `<h2>${data.Location}</h2>`;
+      } else {
+        // Handle the case when location is null (optional)
+        var locationContainer = document.getElementById("monsterLocationContainer");
+        locationContainer.innerHTML = "";  // Clear the content or provide a default message
+      }
+    })
+    .catch(error => {
+      console.error("Error fetching monster location:", error);
+    });
+}
diff --git a/templates/app.html b/templates/app.html
index 3445c8f..bcc9ee8 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -33,19 +33,19 @@
     <!-- Monster name will be displayed here -->
   </div>
 
+  <div id="monsterFamilyContainer">
+    <!-- Monster Family will be displayed here-->
+  </div>
+  
   <div id="monsterStatsContainer">
     <!-- Monster stats will be displayed here -->
   </div>
   
   <div id="monsterLocationContainer">
-    <!-- Monster Location will be displayed here
-    TODO Add location to stats api -->
+    <!-- Monster Location will be displayed here-->
   </div>
 
-  <div id="monsterFamilyContainer">
-    <!-- Monster Family will be displayed here
-    TODO Add family to stats api -->
-  </div>
+
 
 
   <div class="grid items-center justify-center grid-cols-1 ml-4">