diff --git a/app.py b/app.py
index 1933f12..5eddec6 100644
--- a/app.py
+++ b/app.py
@@ -113,5 +113,74 @@ def monster_info(monster_name):
     )
 
 
+# Update the breeding route
+@app.route("/breeding")
+def breeding():
+    # Get all monsters for dropdown
+    cursor = g.db.cursor()
+    cursor.execute("SELECT DISTINCT name FROM monsters")
+    monsters = [row[0] for row in cursor.fetchall()]
+
+    # Pass the monsters to the breeding template
+    return render_template("breeding.html", monsters=monsters)
+
+
+# Add this route for fetching breeding combinations
+@app.route("/get_breeding_combinations")
+def get_breeding_combinations():
+    selected_monster = request.args.get("monster")
+    if not selected_monster:
+        return jsonify({"error": "Invalid input"})
+
+    base_combinations = get_base_combinations(selected_monster)
+    mate_combinations = get_mate_combinations(selected_monster)
+
+    return jsonify(
+        {"base_combinations": base_combinations, "mate_combinations": mate_combinations}
+    )
+
+
+# Function to get base breeding combinations
+def get_base_combinations(selected_monster):
+    cursor = g.db.cursor()
+
+    # Fetch breed IDs based on the selected monster as a base
+    cursor.execute(
+        """
+        SELECT breeds.target
+        FROM breeds
+        JOIN breed_requirements ON breeds.id = breed_requirements.breed_id
+        WHERE breed_requirements.requirement_type = 'base'
+        AND breed_requirements.requirement_value = ?
+    """,
+        (selected_monster,),
+    )
+
+    base_combinations = cursor.fetchall()
+
+    return [row[0] for row in base_combinations]
+
+
+# Function to get mate breeding combinations
+def get_mate_combinations(selected_monster):
+    cursor = g.db.cursor()
+
+    # Fetch breed IDs based on the selected monster as a mate
+    cursor.execute(
+        """
+        SELECT breeds.target
+        FROM breeds
+        JOIN breed_requirements ON breeds.id = breed_requirements.breed_id
+        WHERE breed_requirements.requirement_type = 'mate'
+        AND breed_requirements.requirement_value = ?
+    """,
+        (selected_monster,),
+    )
+
+    mate_combinations = cursor.fetchall()
+
+    return [row[0] for row in mate_combinations]
+
+
 if __name__ == "__main__":
     app.run(debug=True)
diff --git a/static/js/index.js b/static/js/index.js
index 2fc7ed7..21f6642 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,13 +1,12 @@
-// static/js/app.js
-
 document.addEventListener("DOMContentLoaded", function () {
     const familyDropdown = document.getElementById("familyDropdown");
     const monsterDropdown = document.getElementById("monsterDropdown");
-    const iframe = document.getElementById("monsterIframe");
+    const monsterIframe = document.getElementById("monsterIframe");
+    const breedingIframe = document.getElementById("breedingIframe");
 
-    // Initialize dropdowns and iframe
+    // Initialize dropdowns and iframes
     updateMonstersDropdown();
-    updateIframe();
+    updateIframes();
 
     // Fetch families data from the server
     fetch("/get_families")
@@ -15,17 +14,17 @@ document.addEventListener("DOMContentLoaded", function () {
         .then(data => {
             populateDropdown(familyDropdown, data);
             updateMonstersDropdown();
-            updateIframe();
+            updateIframes();
         })
         .catch(error => console.error("Error fetching families:", error));
 
     familyDropdown.addEventListener("change", function () {
         updateMonstersDropdown();
-        updateIframe();
+        updateIframes();
     });
 
     monsterDropdown.addEventListener("change", function () {
-        updateIframe();
+        updateIframes();
     });
 
     function populateDropdown(dropdown, data) {
@@ -51,17 +50,24 @@ document.addEventListener("DOMContentLoaded", function () {
             .catch(error => console.error("Error fetching monsters:", error));
     }
 
-    function updateIframe() {
+    function updateIframes() {
         const selectedFamily = familyDropdown.value;
         const selectedMonster = monsterDropdown.value;
 
-        // Update iframe src based on selected family and monster
-        const iframeSrc = selectedMonster
+        // Update monsterIframe src based on selected family and monster
+        const monsterIframeSrc = selectedMonster
             ? `/monster/${selectedMonster}`
             : selectedFamily
             ? `/monster/${selectedFamily}`
             : "about:blank";
 
-        iframe.src = iframeSrc;
+        monsterIframe.src = monsterIframeSrc;
+
+        // Update breedingIframe src based on the selected monster
+        const breedingIframeSrc = selectedMonster
+            ? `/get_breeding_combinations?monster=${selectedMonster}`
+            : "about:blank";
+
+        breedingIframe.src = breedingIframeSrc;
     }
 });
diff --git a/static/style/output.css b/static/style/output.css
index aebde0f..5020404 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -544,6 +544,10 @@ video {
   position: static;
 }
 
+.col-span-1 {
+  grid-column: span 1 / span 1;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -564,14 +568,18 @@ video {
   margin-top: 1rem;
 }
 
-.mt-8 {
-  margin-top: 2rem;
+.flex {
+  display: flex;
 }
 
 .grid {
   display: grid;
 }
 
+.h-auto {
+  height: auto;
+}
+
 .w-auto {
   width: auto;
 }
@@ -592,19 +600,10 @@ video {
   border-radius: 0.375rem;
 }
 
-.border {
-  border-width: 1px;
-}
-
 .border-2 {
   border-width: 2px;
 }
 
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
 .border-teal-500 {
   --tw-border-opacity: 1;
   border-color: rgb(20 184 166 / var(--tw-border-opacity));
@@ -628,10 +627,6 @@ video {
   padding: 1rem;
 }
 
-.p-8 {
-  padding: 2rem;
-}
-
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
diff --git a/templates/breeding.html b/templates/breeding.html
new file mode 100644
index 0000000..d118a4e
--- /dev/null
+++ b/templates/breeding.html
@@ -0,0 +1,40 @@
+<!-- breeding.html -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Breeding Combinations</title>
+    <link rel="stylesheet" href="../static/style/output.css" />
+  </head>
+  <body class="bg-slate-700">
+    <h1 class="font-bold text-blue-500">Breeding Combinations</h1>
+
+    <div id="breedingCombinations">
+      {% if selected_monster %}
+      <h2 class="font-bold text-blue-500 mt-4">
+        Breeding Combinations for {{ selected_monster.name }}
+      </h2>
+      <div class="grid grid-cols-2 gap-1">
+        <div class="col-span-1">
+          <h3 class="font-bold text-blue-500">Base Combinations</h3>
+          <ul>
+            {% for combination in selected_monster.base_combinations %}
+            <li>{{ combination.target }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+        <div class="col-span-1">
+          <h3 class="font-bold text-blue-500">Mate Combinations</h3>
+          <ul>
+            {% for combination in selected_monster.mate_combinations %}
+            <li>{{ combination.target }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+  </body>
+</html>
diff --git a/templates/index.html b/templates/index.html
index ef8a7ab..9ce5494 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,32 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>DWM APP</title>
-    <link rel="stylesheet" href="../static/style/output.css">
+    <link rel="stylesheet" href="../static/style/output.css" />
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
-</head>
-<body class="p-4 m-4 font-mono text-white bg-slate-700">
-    <h1 class="text-2xl font-black text-white">Welcome to the Dragon Warrior Monsters 2 App</h1>
+  </head>
+  <body class="p-4 m-4 font-mono text-white bg-slate-700">
+    <h1 class="text-2xl font-black text-white">
+      Welcome to the Dragon Warrior Monsters 2 App
+    </h1>
 
     <div>
-        <label for="familyDropdown">Select Family:</label>
-        <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
-            <option value="" >All Families</option>
-        </select>
+      <label for="familyDropdown">Select Family:</label>
+      <select id="familyDropdown" class="p-2 rounded-md bg-slate-800">
+        <option value="">All Families</option>
+      </select>
 
-        <label for="monsterDropdown">Select Monster:</label>
-        <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
-            <option value="">All Monsters</option>
-        </select>
+      <label for="monsterDropdown">Select Monster:</label>
+      <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
+        <option value="">All Monsters</option>
+      </select>
+      <div id="modules" class="flex">
+        <iframe
+          id="monsterIframe"
+          src=""
+          class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md"
+          onload="resizeIframe(this)"
+        ></iframe>
 
-        <iframe id="monsterIframe" src="" class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md" onload="resizeIframe(this)"></iframe>
+        <iframe
+          id="breedingIframe"
+          class="w-auto mt-4 ml-4 h-auto border-2 border-teal-500 rounded-md"
+          onload="resizeIframe(this)"
+        ></iframe>
+      </div>
     </div>
     <script>
-        function resizeIframe(iframe) {
-            iframe.style.height = iframe.contentWindow.document.body.scrollHeight+ 16 +'px';
-        }
+      function resizeIframe(iframe) {
+        iframe.style.height =
+          iframe.contentWindow.document.body.scrollHeight + 4 + "px";
+      }
     </script>
-</body>
+  </body>
 </html>