diff --git a/app.py b/app.py
index d6cc9b5..ec34d1f 100644
--- a/app.py
+++ b/app.py
@@ -1,5 +1,5 @@
 from flask import Flask, render_template, g, abort, request, jsonify
-import sqlite3
+import sqlite3, os
 
 app = Flask(__name__)
 
@@ -20,10 +20,15 @@ def teardown_request(exception):
     if hasattr(g, "db"):
         g.db.close()
 
+def get_js_files():
+    js_folder = os.path.join(app.static_folder, 'js')
+    js_files = [f for f in os.listdir(js_folder) if f.endswith('.js')]
+    return js_files
 
-@app.route("/")
+@app.route('/')
 def show_index():
-    return render_template("index.html")
+    js_files = get_js_files()
+    return render_template('index.html', js_files=js_files)
 
 
 @app.route("/get_families")
@@ -170,6 +175,7 @@ def monster_info_json(monster_name):
     )
 
 
+
 # Update the breeding route
 @app.route("/breeding")
 def breeding():
diff --git a/static/js/breeding.js b/static/js/breeding.js
index 2fa173c..ac09167 100644
--- a/static/js/breeding.js
+++ b/static/js/breeding.js
@@ -41,33 +41,6 @@ function updateMonstersDropdown(familyDropdown) {
     }
 }
 
-function updateIframes(familyDropdown, monsterDropdown) {
-    // Check if both familyDropdown and monsterDropdown exist
-    if (familyDropdown && monsterDropdown) {
-        const selectedFamily = familyDropdown.value;
-        const selectedMonster = monsterDropdown.value;
-
-        // Update monsterIframe src based on selected family and monster
-        const monsterIframeSrc = selectedMonster
-            ? `/monster/${selectedMonster}`
-            : selectedFamily
-            ? `/monster/${selectedFamily}`
-            : "about:blank";
-
-        // Assuming you have these iframe elements defined somewhere
-        const monsterIframe = document.getElementById("monsterIframe");
-        const breedingIframe = document.getElementById("breedingIframe");
-
-        monsterIframe.src = monsterIframeSrc;
-
-        // Update breedingIframe src based on the selected monster
-        const breedingIframeSrc = selectedMonster
-            ? `/get_breeding_combinations?monster=${selectedMonster}`
-            : "about:blank";
-
-        breedingIframe.src = breedingIframeSrc;
-    }
-}
 
 function populateDropdown(dropdown, data) {
     // Check if dropdown exists
diff --git a/static/js/updateIFrames.js b/static/js/updateIFrames.js
new file mode 100644
index 0000000..6416b8a
--- /dev/null
+++ b/static/js/updateIFrames.js
@@ -0,0 +1,25 @@
+function updateIframes(familyDropdown, monsterDropdown) {
+    const selectedFamily = familyDropdown.value;
+    const selectedMonster = monsterDropdown.value;
+
+    const monsterIframeSrc = selectedMonster
+        ? `/monster/${selectedMonster}`
+        : selectedFamily
+            ? `/monster/${selectedFamily}`
+            : "about:blank";
+
+    const breedingIframeSrc = selectedMonster
+        ? `/get_breeding_combinations?monster=${selectedMonster}`
+        : "about:blank";
+
+    updateIframeSrc("monsterIframe", monsterIframeSrc);
+    updateIframeSrc("breedingIframe", breedingIframeSrc);
+}
+
+function updateIframeSrc(iframeId, src) {
+    const iframe = document.getElementById(iframeId);
+    iframe.src = src;
+}
+
+// Usage example:
+updateIframes(familyDropdown, monsterDropdown);
diff --git a/templates/index.html b/templates/index.html
index 034407b..41e8c8e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -53,8 +53,8 @@
               width="800">
             </iframe>
     </div>
-    <script src="{{ url_for('static', filename='js/index.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/sprite.js') }}"></script>
+    {% for file in js_files %}
+    <script src="{{ url_for('static', filename='js/' + file) }}"></script>
+{% endfor %}
   </body>
 </html>