diff --git a/app.py b/app.py
index 41af75e..c8f40ad 100644
--- a/app.py
+++ b/app.py
@@ -91,5 +91,35 @@ def monster_info(monster_name):
         'spawn_locations': spawn_locations
     })
     
+# Add a route for the breeding page
+@app.route('/breeding')
+def breeding():
+    # Pass any necessary data to the breeding template (e.g., breeding_data)
+    return render_template('breeding.html')
+
+# Add this function to handle breeding logic
+def breed_monsters(parent1, parent2):
+    # Implement your breeding logic here
+    # For now, let's assume the result is a string
+    result = f"{parent1} x {parent2} => Offspring Monster"
+    return result
+
+# Add this route for breeding
+@app.route('/breed', methods=['GET'])
+def breed():
+    # Get parent monsters from query parameters
+    parent1 = request.args.get('parent1')
+    parent2 = request.args.get('parent2')
+
+    # Validate input (you may want to add more validation)
+    if not parent1 or not parent2:
+        return jsonify({'error': 'Invalid input'})
+
+    # Call the breeding function
+    result = breed_monsters(parent1, parent2)
+
+    # Return the breeding result as JSON
+    return jsonify({'result': result})
+    
 if __name__ == '__main__':
     app.run(debug=True)
diff --git a/static/js/breeding.js b/static/js/breeding.js
new file mode 100644
index 0000000..2d3f093
--- /dev/null
+++ b/static/js/breeding.js
@@ -0,0 +1,19 @@
+// static/js/breeding.js
+
+function breed() {
+    var parent1 = document.getElementById("parent1").value;
+    var parent2 = document.getElementById("parent2").value;
+
+    // Make an AJAX request to your Flask route for breeding logic
+    // You can use fetch or another library for AJAX requests
+
+    // For demonstration purposes, we'll assume you have a Flask route named /breed
+    fetch(`/breed?parent1=${parent1}&parent2=${parent2}`)
+        .then(response => response.json())
+        .then(data => {
+            // Display the breeding result in the breedingResult div
+            var breedingResultDiv = document.getElementById("breedingResult");
+            breedingResultDiv.innerHTML = `<p>Breeding Result: ${data.result}</p>`;
+        })
+        .catch(error => console.error('Error:', error));
+}
diff --git a/static/style/output.css b/static/style/output.css
index bf4283e..aebde0f 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -548,87 +548,61 @@ video {
   margin: 1rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
-}
-
-.mt-4 {
-  margin-top: 1rem;
-}
-
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
 
-.flex {
-  display: flex;
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
 }
 
 .grid {
   display: grid;
 }
 
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
-.h-auto {
-  height: auto;
-}
-
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
 .w-auto {
   width: auto;
 }
 
-.w-full {
-  width: 100%;
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
-.gap-2 {
-  gap: 0.5rem;
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
 .gap-1 {
   gap: 0.25rem;
 }
 
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-
 .rounded-md {
   border-radius: 0.375rem;
 }
 
+.border {
+  border-width: 1px;
+}
+
 .border-2 {
   border-width: 2px;
 }
 
-.border-black {
+.border-gray-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
 }
 
 .border-teal-500 {
@@ -654,6 +628,10 @@ video {
   padding: 1rem;
 }
 
+.p-8 {
+  padding: 2rem;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -663,14 +641,14 @@ video {
   line-height: 2rem;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .font-black {
   font-weight: 900;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
diff --git a/templates/breeding.html b/templates/breeding.html
new file mode 100644
index 0000000..1318db2
--- /dev/null
+++ b/templates/breeding.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dragon Warrior Monsters 2 - Breeding</title>
+    <link rel="stylesheet" href="../static/style/output.css">
+</head>
+<body class="p-8">
+    <h1 class="font-bold text-blue-500">Breeding Guide</h1>
+
+    <div class="mt-8">
+        <h2 class="font-bold text-blue-500">Breeding Options</h2>
+
+        <div>
+            <label for="parent1">Select Parent 1:</label>
+            <select id="parent1" class="p-2 border border-gray-400">
+                <!-- Add options dynamically based on breeding data -->
+                {% for breed in breeding_data %}
+                    <option value="{{ breed.target }}">{{ breed.target }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="mt-4">
+            <label for="parent2">Select Parent 2:</label>
+            <select id="parent2" class="p-2 border border-gray-400">
+                <!-- Add options dynamically based on breeding data -->
+                {% for breed in breeding_data %}
+                    <option value="{{ breed.target }}">{{ breed.target }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <button onclick="breed()">Breed!</button>
+
+        <!-- Display breeding result -->
+        <div id="breedingResult" class="mt-4"></div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/breeding.js') }}"></script>
+</body>
+</html>