diff --git a/templates/app.html b/templates/app.html
new file mode 100644
index 0000000..22a9a10
--- /dev/null
+++ b/templates/app.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="https://happytavern.co/.pictures/dwm/favicon.ico" />
+    <link rel="stylesheet" href="../static/style/output.css" />
+    {% block head %}{% endblock %}
+  </head>
+  <body class="content-center p-4 m-4 font-mono text-white bg-slate-700">
+    {% block body %}{% endblock %}
+  </body>
+</html>
diff --git a/templates/breeds.html b/templates/breeds.html
index b2b056b..47fc48a 100644
--- a/templates/breeds.html
+++ b/templates/breeds.html
@@ -1,5 +1,3 @@
-<!-- breeding.html -->
-
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -17,11 +15,13 @@
           <h3 class="text-lg font-bold">Base</h3>
           <ul>
             {% for pair in selected_monster.base_pair %}
-            <li id="parent" class="text-center cursor-pointer hover:text-red-700 w-fit">
-              <!-- Add a class to make the monster name clickable -->
-              <span class="monster-name" data-name="{{ pair }}"
-                >{{ pair }}</span
-              >
+            <li
+              id="parent"
+              class="text-center cursor-pointer hover:text-red-700 w-fit"
+            >
+              <span class="monster-name" data-name="{{ pair }}">
+                {{ pair }}
+              </span>
             </li>
             {% endfor %}
           </ul>
@@ -31,10 +31,9 @@
           <ul>
             {% for pair in selected_monster.mate_pair %}
             <li id="parent" class="cursor-pointer hover:text-red-700 w-fit">
-              <!-- Add a class to make the monster name clickable -->
-              <span class="monster-name" data-name="{{ pair }}"
-                >{{ pair }}</span
-              >
+              <span class="monster-name" data-name="{{ pair }}">
+                {{ pair }}
+              </span>
             </li>
             {% endfor %}
           </ul>
diff --git a/templates/index.html b/templates/index.html
index 792f0e4..b0519e3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,69 +1,58 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" href="https://happytavern.co/.pictures/dwm/favicon.ico" />
-    <title>dwm-app</title>
-    <link rel="stylesheet" href="../static/style/output.css" />
-  </head>
-  <body class="content-center 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</option>
-      </select>
+{% extends 'app.html' %} {% block head %}{% endblock %} {% block body %}
+<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="monsterDropdown">Select Monster:</label>
-      <select
-        id="monsterDropdown"
-        class="p-2 rounded-md bg-slate-800"
-        onchange="updateMonsterSprite()"
-      >
-        <option value="">All</option>
-      </select>
-      <div id="modules" class="flex mt-4">
-        <iframe
-          id="monsterIframe"
-          src=""
-          class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
-          height="456"
-          width="272"
-        >
-        </iframe>
-        <div class="grid items-center justify-center grid-cols-1 ml-4">
-          <iframe
-            id="monsterSpriteIframe"
-            src=""
-            class="p-2 ml-8 border-2 border-teal-500 rounded-md"
-            height="200"
-            width="200"
-          >
-          </iframe>
-          <iframe
-            id="breedingIframe"
-            src=""
-            class="p-2 mt-4 border-2 border-teal-500 rounded-md"
-            height="200"
-            width="272"
-          >
-          </iframe>
-        </div>
-      </div>
+  <label for="monsterDropdown">Select Monster:</label>
+  <select
+    id="monsterDropdown"
+    class="p-2 rounded-md bg-slate-800"
+    onchange="updateMonsterSprite()"
+  >
+    <option value="">All Monsters</option>
+  </select>
+  <div id="modules" class="flex mt-4">
+    <iframe
+      id="monsterIframe"
+      src=""
+      class="pl-2 pr-2 ml-4 border-2 border-teal-500 rounded-md"
+      height="456"
+      width="272"
+    >
+    </iframe>
+    <div class="grid items-center justify-center grid-cols-1 ml-4">
       <iframe
-        id="footerIframe"
-        src="https://dwm.happytavern.co/footer"
-        class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
-        height="240"
-        width="800"
+        id="monsterSpriteIframe"
+        src=""
+        class="p-2 ml-8 border-2 border-teal-500 rounded-md"
+        height="200"
+        width="200"
+      >
+      </iframe>
+      <iframe
+        id="breedingIframe"
+        src=""
+        class="p-2 mt-4 border-2 border-teal-500 rounded-md"
+        height="200"
+        width="272"
       >
       </iframe>
     </div>
-    {% for file in js_files %}
-    <script src="{{ url_for('static', filename='js/' + file) }}"></script>
-    {% endfor %}
-  </body>
-</html>
+  </div>
+  <iframe
+    id="footerIframe"
+    src="https://dwm.happytavern.co/footer"
+    class="p-2 mt-4 ml-4 border-2 border-teal-500 rounded-md float-end"
+    height="240"
+    width="800"
+  >
+  </iframe>
+</div>
+{% for file in js_files %}
+<script src="{{ url_for('static', filename='js/' + file) }}"></script>
+{% endfor %} {% endblock %}
diff --git a/templates/layout.html b/templates/layout.html
deleted file mode 100644
index e69de29..0000000
