diff --git a/static/style/output.css b/static/style/output.css
index 374b9ac..bf4283e 100644
--- a/static/style/output.css
+++ b/static/style/output.css
@@ -544,11 +544,139 @@ video {
   position: static;
 }
 
+.m-4 {
+  margin: 1rem;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.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;
+}
+
+.gap-1 {
+  gap: 0.25rem;
+}
+
+.rounded-sm {
+  border-radius: 0.125rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border-2 {
+  border-width: 2px;
+}
+
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
+.border-teal-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(20 184 166 / var(--tw-border-opacity));
+}
+
+.bg-slate-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
+}
+
+.bg-slate-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.font-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+.text-2xl {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
 
+.font-black {
+  font-weight: 900;
+}
+
 .text-blue-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
diff --git a/templates/index.html b/templates/index.html
index 175523e..ef8a7ab 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,24 +7,26 @@
     <link rel="stylesheet" href="../static/style/output.css">
     <script src="{{ url_for('static', filename='js/index.js') }}"></script>
 </head>
-<body>
-    <h1 class="font-bold text-blue-500">Welcome to the Dragon Warrior Monsters 2 App</h1>
+<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>
-        <h2 class="font-bold text-blue-500">Filter list by monster family<br> 
-        Display monster stats in embed below</h2>
-
         <label for="familyDropdown">Select Family:</label>
-        <select id="familyDropdown">
-            <option value="">All Families</option>
+        <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">
+        <select id="monsterDropdown" class="p-2 rounded-md bg-slate-800">
             <option value="">All Monsters</option>
         </select>
 
-        <iframe id="monsterIframe" src="" width="fit" height="fit" frameborder="0"></iframe>
+        <iframe id="monsterIframe" src="" class="w-auto mt-4 ml-4 border-2 border-teal-500 rounded-md" onload="resizeIframe(this)"></iframe>
     </div>
+    <script>
+        function resizeIframe(iframe) {
+            iframe.style.height = iframe.contentWindow.document.body.scrollHeight+ 16 +'px';
+        }
+    </script>
 </body>
 </html>
diff --git a/templates/monsters.html b/templates/monsters.html
index 1dff8aa..c40ba9b 100644
--- a/templates/monsters.html
+++ b/templates/monsters.html
@@ -6,30 +6,37 @@
     <title>Monster Information</title>
     <link rel="stylesheet" href="../static/style/output.css">
 </head>
-<body>
+<body class="p-2 font-mono text-white bg-slate-700">
     <h1>Monster Information</h1>
     <div>
         <h2>{{ monster.name }}</h2>
         <p><strong>Family:</strong> {{ monster.family }}</p>
-        <p><strong>In Story:</strong> {{ monster.in_story }}</p>
-        <p><strong>Stats:</strong></p>
-        <ul>
-            <li><strong>AGL:</strong> {{ monster.agl }}</li>
-            <li><strong>INT:</strong> {{ monster.int }}</li>
-            <li><strong>Max Level:</strong> {{ monster.maxlvl }}</li>
-            <li><strong>ATK:</strong> {{ monster.atk }}</li>
-            <li><strong>MP:</strong> {{ monster.mp }}</li>
-            <li><strong>EXP:</strong> {{ monster.exp }}</li>
-            <li><strong>HP:</strong> {{ monster.hp }}</li>
-            <li><strong>DEF:</strong> {{ monster.def }}</li>
-        </ul>
+        <div class="mt-2 mb-2 stats">
+            <p><strong>Stats:</strong></p>
+            <ul>
+                <div class="grid grid-cols-2 gap-1">
+                    <li><label class="font-bold">Max Level:</label> {{ monster.maxlvl }}</li>
+                    <li><label class="font-bold">EXP:</label> {{ monster.exp }}</li>
+                    <li><label class="font-bold">HP:</label> {{ monster.hp }}</li>
+                    <li><label class="font-bold">ATK:</label> {{ monster.atk }}</li>
+                    <li><label class="font-bold">MP:</label> {{ monster.mp }}</li>
+                    <li><label class="font-bold">DEF:</label> {{ monster.def }}</li>
+                    <li><label class="font-bold">AGL:</label> {{ monster.agl }}</li>
+                    <li><label class="font-bold">INT:</label> {{ monster.int }}</li>       
+                </div>   
+            </ul>
+        </div>
+        
         <p><strong>Skills:</strong></p>
         <ul>
             {% for skill in monster.skills %}
                 <li>{{ skill }}</li>
             {% endfor %}
         </ul>
+        <div class="grid grid-cols-1 gap-1 mt-2">
+        <p><strong>In Story:</strong> {{ monster.in_story }}</p>
         <p><strong>Spawn Locations:</strong></p>
+        </div>
         <ul>
             {% for location in monster.spawn_locations %}
                 <li>{{ location.map }} - {{ location.description }}</li>
