diff --git a/static/js/indexListener.js b/static/js/indexListener.js
index 53795c0..7319f82 100644
--- a/static/js/indexListener.js
+++ b/static/js/indexListener.js
@@ -7,7 +7,7 @@ document.addEventListener("DOMContentLoaded", function () {
     //const familyGrid = document.getElementById("familyGrid")
 
     // Initialize dropdowns
-    updateMonstersDropdown();
+    updateMonstersDropdownByFamily();
     // Initialize Family Grid();
     // populateFamilyGrid();
 
@@ -21,7 +21,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Listeners for Dropdown Changes
     familyDropdown.addEventListener("change", function () {
-        updateMonstersDropdown();
+        updateMonstersDropdownByFamily();
     });
 
     monsterDropdown.addEventListener("change", function () {
@@ -35,7 +35,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
     // Listener for a click on a breeding parent
     //parent.addEventListener("click", function() {
-    //    updateMonstersDropdown();
+    //    updateMonstersDropdownBySelected();
     //    updateIFrames();  
     //});
 
diff --git a/static/js/updateMonstersDropdown.js b/static/js/updateMonstersDropdownByFamily.js
similarity index 89%
rename from static/js/updateMonstersDropdown.js
rename to static/js/updateMonstersDropdownByFamily.js
index 97b1f0e..e2b1b2b 100644
--- a/static/js/updateMonstersDropdown.js
+++ b/static/js/updateMonstersDropdownByFamily.js
@@ -1,4 +1,4 @@
-function updateMonstersDropdown() {
+function updateMonstersDropdownByFamily() {
     const selectedFamily = familyDropdown.value;
 
     // Fetch monsters data from the server based on the selected family
diff --git a/static/js/updateMonstersDropdownBySelected.js b/static/js/updateMonstersDropdownBySelected.js
new file mode 100644
index 0000000..3c1255a
--- /dev/null
+++ b/static/js/updateMonstersDropdownBySelected.js
@@ -0,0 +1,9 @@
+//function updateMonstersDropdownBySelected() {
+//    const selectedMonster = parent.value;
+//
+//    // Fetch monsters data from the server based on the selected monster
+//    fetch(`/monster/${selectedMonster}`)
+//        .then(response => response.json())
+//        .then(data => populateDropdown(monsterDropdown, data))
+//        .catch(error => console.error("Error fetching monsters:", error));
+//}