diff --git a/static/js/index.js b/static/js/index.js
index 21f6642..1dd1325 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -70,4 +70,34 @@ document.addEventListener("DOMContentLoaded", function () {
 
         breedingIframe.src = breedingIframeSrc;
     }
+
+//I was trying to get rid of the scroll bars but h-auto/fit wasn't working
+// This works to resize but still leaves some scrollbar
+//to-do:fix
+
+    // Function to resize iframe
+    //function resizeIframe(iframe) {
+    //    const body = iframe.contentDocument.body;
+    //    const html = iframe.contentDocument.documentElement;
+    //
+    //    const height = Math.max(
+    //        body.scrollHeight,
+    //        body.offsetHeight,
+    //        html.clientHeight,
+    //        html.scrollHeight,
+    //        html.offsetHeight
+    //    );
+    //
+    //    iframe.style.height = height + "px";
+    //}
+    
+
+    // Add event listeners for iframe load
+    monsterIframe.addEventListener("load", function () {
+        resizeIframe(monsterIframe);
+    });
+
+    breedingIframe.addEventListener("load", function () {
+        resizeIframe(breedingIframe);
+    });
 });
diff --git a/static/style/output.css b/static/style/output.css
index 5020404..b5792f4 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -548,6 +548,14 @@ video {
   grid-column: span 1 / span 1;
 }
 
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -568,6 +576,18 @@ video {
   margin-top: 1rem;
 }
 
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-20 {
+  margin-top: 5rem;
+}
+
 .flex {
   display: flex;
 }
@@ -580,10 +600,52 @@ video {
   height: auto;
 }
 
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-96 {
+  height: 24rem;
+}
+
+.h-1\/2 {
+  height: 50%;
+}
+
+.h-3\/4 {
+  height: 75%;
+}
+
+.h-max {
+  height: -moz-max-content;
+  height: max-content;
+}
+
 .w-auto {
   width: auto;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.flex-auto {
+  flex: 1 1 auto;
+}
+
+.flex-initial {
+  flex: 0 1 auto;
+}
+
+.resize {
+  resize: both;
+}
+
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -596,6 +658,14 @@ video {
   gap: 0.25rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
 .rounded-md {
   border-radius: 0.375rem;
 }
@@ -636,6 +706,16 @@ video {
   line-height: 2rem;
 }
 
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .font-black {
   font-weight: 900;
 }
diff --git a/templates/breeding.html b/templates/breeding.html
index 94c748d..fc022e9 100644
--- a/templates/breeding.html
+++ b/templates/breeding.html
@@ -8,17 +8,15 @@
     <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>
-
+  <body class="bg-slate-700 font-mono text-white">
     <div id="breedingCombinations">
       {% if selected_monster %}
-      <h2 class="font-bold text-blue-500 mt-4">
-        Breeding Combinations for {{ selected_monster.name }}
+      <h2 class="font-bold text-xl mt-4">
+        Possible Breeding Pairs 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>
+          <h3 class="font-bold text-lg">Base</h3>
           <ul>
             {% for combination in selected_monster.base_combinations %}
             <li>{{ combination }}</li>
@@ -26,7 +24,7 @@
           </ul>
         </div>
         <div class="col-span-1">
-          <h3 class="font-bold text-blue-500">Mate Combinations</h3>
+          <h3 class="font-bold text-lg">Mates</h3>
           <ul>
             {% for combination in selected_monster.mate_combinations %}
             <li>{{ combination }}</li>
diff --git a/templates/index.html b/templates/index.html
index 9ce5494..6674026 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -26,22 +26,17 @@
         <iframe
           id="monsterIframe"
           src=""
-          class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md"
+          class="w-auto h-max 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"
+          src=""
+          class="w-auto mt-4 ml-4 p-2 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 + 4 + "px";
-      }
-    </script>
   </body>
 </html>
