diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000..a45bccc
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,55 @@
+{
+	"version": 1.1,
+	"atDirectives": [
+		{
+			"name": "@tailwind",
+			"description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+				}
+			]
+		},
+		{
+			"name": "@apply",
+			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+				}
+			]
+		},
+		{
+			"name": "@responsive",
+			"description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+				}
+			]
+		},
+		{
+			"name": "@screen",
+			"description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+				}
+			]
+		},
+		{
+			"name": "@variants",
+			"description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+				}
+			]
+		}
+	]
+}
diff --git a/tunictracker/tracker/static/tracker/assets/refresh.js b/tunictracker/tracker/static/tracker/assets/refresh.js
index be84b29..41dd624 100644
--- a/tunictracker/tracker/static/tracker/assets/refresh.js
+++ b/tunictracker/tracker/static/tracker/assets/refresh.js
@@ -106,10 +106,10 @@ async function refresh_elements(cross_codes) {
 
 				//  Clone all the needed elements for updating.
 				let overview_checks_title = document
-					.getElementById("overview")
+					.getElementById("overview-totals")
 					.querySelector(".overview-checks");
 				let overview_entrances_title = document
-					.getElementById("overview")
+					.getElementById("overview-totals")
 					.querySelector(".overview-entrances");
 				let summary_block = document
 					.getElementById("overview")
@@ -180,7 +180,6 @@ async function refresh_elements(cross_codes) {
 					let breakdown_block_checks_list_item = breakdown_block
 						.querySelector(".breakdown-block-checks-list")
 						.firstElementChild.cloneNode(true);
-					breakdown_block_checks_list_item.classList.remove("hidden");
 					let breakdown_block_entrances_title = breakdown_block.querySelector(
 						".breakdown-block-entrances-title"
 					);
@@ -190,14 +189,12 @@ async function refresh_elements(cross_codes) {
 					let breakdown_block_entrances_list_item = breakdown_block
 						.querySelector(".breakdown-block-entrances-list")
 						.firstElementChild.cloneNode(true);
-					breakdown_block_entrances_list_item.classList.remove("hidden");
 					let new_breakdown_block_mapped_list = breakdown_block
 						.querySelector(".breakdown-block-mapped-list")
 						.cloneNode(true);
 					let breakdown_block_mapped_list_item = breakdown_block
 						.querySelector(".breakdown-block-mapped-list")
 						.firstElementChild.cloneNode(true);
-					breakdown_block_mapped_list_item.classList.remove("hidden");
 
 					cross_codes_block = document
 						.getElementById("overview")
@@ -219,12 +216,15 @@ async function refresh_elements(cross_codes) {
 					new_breakdown_block_checks_list.appendChild(
 						breakdown_block_checks_list_item.cloneNode(true)
 					);
+					breakdown_block_checks_list_item.classList.remove("hidden");
 					new_breakdown_block_entrances_list.appendChild(
 						breakdown_block_entrances_list_item.cloneNode(true)
 					);
+					breakdown_block_entrances_list_item.classList.remove("hidden");
 					new_breakdown_block_mapped_list.appendChild(
 						breakdown_block_mapped_list_item.cloneNode(true)
 					);
+					breakdown_block_mapped_list_item.classList.remove("hidden");
 
 					// Create variables for commonly used values.
 					let scene_checks_undiscovered =
@@ -324,25 +324,24 @@ async function refresh_elements(cross_codes) {
 					}
 
 					// Apply color coding to summary block
-					summary_block.classList.remove(
-						"bg-green-900",
-						"bg-yellow-900",
-						"bg-blue-900",
-						"bg-red-900"
+					summary_block.firstElementChild.classList.remove(
+						"bg-highlight-both-translucent",
+						"bg-highlight-checks-translucent",
+						"bg-highlight-entrances-translucent"
 					);
 					if (
 						scene_checks_undiscovered > 0 &&
 						scene_entrances_undiscovered > 0
 					) {
-						if (scene_entrances_undiscovered == scene_entrances_total) {
-							summary_block.classList.add("bg-red-900");
-						} else {
-							summary_block.classList.add("bg-green-900");
-						}
+						summary_block.firstElementChild.classList.add("bg-highlight-both-translucent");
 					} else if (scene_checks_undiscovered > 0) {
-						summary_block.classList.add("bg-yellow-900");
+						summary_block.firstElementChild.classList.add(
+							"bg-highlight-checks-translucent"
+						);
 					} else if (scene_entrances_undiscovered > 0) {
-						summary_block.classList.add("bg-blue-900");
+						summary_block.firstElementChild.classList.add(
+							"bg-highlight-entrances-translucent"
+						);
 					}
 
 					// Replace lists
@@ -375,7 +374,6 @@ async function refresh_elements(cross_codes) {
 						scene_entrances_undiscovered <= 0
 					) {
 						summary_block.classList.add("hidden");
-						// breakdown_block.classList.add("hidden");
 					}
 					new_summary_list.firstElementChild.appendChild(
 						summary_block.cloneNode(true)
diff --git a/tunictracker/tracker/static/tracker/images/trunic_title.png b/tunictracker/tracker/static/tracker/images/trunic_title.png
new file mode 100644
index 0000000..104f935
Binary files /dev/null and b/tunictracker/tracker/static/tracker/images/trunic_title.png differ
diff --git a/tunictracker/tracker/templates/index.html b/tunictracker/tracker/templates/index.html
index 7e835cb..4cf74ff 100644
--- a/tunictracker/tracker/templates/index.html
+++ b/tunictracker/tracker/templates/index.html
@@ -13,7 +13,7 @@
     {% tailwind_css %}
     <script src="{% static "tracker/assets/refresh.js" %}"></script>
   </head>
-  <body class="bg-[#242424]">
+  <body class="bg-[#242424] font-nerd">
     {% block content %}
     {% endblock content %}
   </body>
diff --git a/tunictracker/tracker/templates/tracker/breakdown/block.html b/tunictracker/tracker/templates/tracker/breakdown/block.html
index 2ac1fa9..c40c980 100644
--- a/tunictracker/tracker/templates/tracker/breakdown/block.html
+++ b/tunictracker/tracker/templates/tracker/breakdown/block.html
@@ -1,61 +1,63 @@
-<div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark {{ extra_classes }}">
-  <div class="flex text-lg breakdown-block-title">{{ scene_title }}</div>
-  <div class="flex flex-col md:flex-row justify-center md:space-x-4">
-    <div class="flex flex-col basis-1/2 overflow-hidden">
-      <div class="my-2 flex flex-col space-y-2">
-        <div class="text-md breakdown-block-checks-title">
-          Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
+<div class="flex flex-col space-y-2 max-w-full {{ extra_classes }}">
+  <div class="px-2">
+    <div class="flex text-xl breakdown-block-title">{{ scene_title }}</div>
+    <div class="flex flex-col md:flex-row justify-center md:space-x-4">
+      <div class="flex flex-col basis-1/2 overflow-hidden">
+        <div class="my-2 flex flex-col space-y-2">
+          <div class="text-md breakdown-block-checks-title">
+            Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
+          </div>
+          <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+        </div>
+        <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
+          <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
+          </ul>
+          {% for check_name, check in scene_data.Checks.items %}
+            {% if not check %}
+              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
+                ❌ {{ check_name }}
+              </ul>
+            {% endif %}
+          {% endfor %}
         </div>
-        <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
       </div>
-      <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-checks-list">
-        <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
-        </ul>
-        {% for check_name, check in scene_data.Checks.items %}
-          {% if not check %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
-              ❌ {{ check_name }}
-            </ul>
-          {% endif %}
-        {% endfor %}
+      <div class="flex flex-col basis-1/2 overflow-hidden">
+        <div class="my-2 flex flex-col space-y-2">
+          <div class="text-md breakdown-block-entrances-title">
+            Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
+          </div>
+          <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+        </div>
+        <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
+          <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
+          </ul>
+          {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
+            {% if entrance_destination == "" %}
+              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm">
+                ❌ {{ entrance_origin }}
+              </ul>
+            {% else %}
+              <ul class="py-0.5 min-w-max bg-bluelight-translucent rounded-md px-1 text-sm hidden">
+                ❌ {{ entrance_origin }}
+              </ul>
+            {% endif %}
+          {% endfor %}
+        </div>
       </div>
     </div>
-    <div class="flex flex-col basis-1/2 overflow-hidden">
-      <div class="my-2 flex flex-col space-y-2">
-        <div class="text-md breakdown-block-entrances-title">
-          Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
-        </div>
-        <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-      </div>
-      <div class="pb-4 flex flex-col max-h-64 space-y-2 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight breakdown-block-entrances-list">
-        <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
+    <div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
+      <div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
+        <ul class="py-0.5 bg-bluelight rounded-md px-1 text-sm hidden">
         </ul>
         {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
-          {% if entrance_destination == "" %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm">
-              ❌ {{ entrance_origin }}
-            </ul>
-          {% else %}
-            <ul class="min-w-max bg-bluelight-translucent rounded-xl px-1 text-sm hidden">
-              ❌ {{ entrance_origin }}
+          {% if entrance_destination %}
+            <ul class="py-0.5 bg-bluelight rounded-md px-1 text-sm">
+              ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
             </ul>
           {% endif %}
         {% endfor %}
       </div>
     </div>
+    {% include "tracker/codes/index.html" %}
   </div>
-  <div class="max-h-64 overflow-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
-    <div class="flex flex-col space-y-2 mx-auto min-w-max breakdown-block-mapped-list">
-      <ul class="bg-bluelight rounded-xl px-1 text-sm hidden">
-      </ul>
-      {% for entrance_origin, entrance_destination in scene_data.Entrances.items %}
-        {% if entrance_destination %}
-          <ul class="bg-bluelight rounded-xl px-1 text-sm">
-            ✔️ {{ entrance_origin }} -> {{ entrance_destination }}
-          </ul>
-        {% endif %}
-      {% endfor %}
-    </div>
-  </div>
-  <div class="pt-4">{% include "tracker/codes/index.html" %}</div>
 </div>
diff --git a/tunictracker/tracker/templates/tracker/codes/block.html b/tunictracker/tracker/templates/tracker/codes/block.html
index 87b7264..a547e6c 100644
--- a/tunictracker/tracker/templates/tracker/codes/block.html
+++ b/tunictracker/tracker/templates/tracker/codes/block.html
@@ -1,8 +1,9 @@
 {% if not is_entered %}
-    <ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-dark">
-        <div class="codes-list-item-title text-md">{{ name }}</div>
-        <div class="m-auto justify-center align-top">
-            <div class="max-w-64 codes-list-item-code text-2xl break-all">{{ code }}</div>
+    <ul class="p-2 flex flex-col rounded-xl bg-bluelight-translucent-light border-4 border-bluelight-translucent-dark">
+        <div class="pl-2 codes-list-item-title text-base">{{ name }}</div>
+        <hr class="mb-2 border-2 border-bluelight-translucent-dark rounded-xl" />
+        <div class="min-x-full">
+            <div class="codes-list-item-code text-2xl text-justify break-all mx-2 align-top">{{ code }}</div>
         </div>
     </ul>
 {% endif %}
diff --git a/tunictracker/tracker/templates/tracker/codes/index.html b/tunictracker/tracker/templates/tracker/codes/index.html
index 2d5a3af..32d9c8c 100644
--- a/tunictracker/tracker/templates/tracker/codes/index.html
+++ b/tunictracker/tracker/templates/tracker/codes/index.html
@@ -1,7 +1,8 @@
-<details class="p-2 flex flex-col space-y-2 max-w-full text-lg rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
+<details class="flex flex-col space-y-2 max-w-full text-base rounded-xl justify-start {% if current_scene.title != scene_title %}hidden{% endif %} codes-block">
     <summary>Holy Cross Codes</summary>
-    <div class="flex flex-col space-y-2 max-h-96 overflow-y-scroll">
-        <ul class="flex flex-col space-y-2 rounded-xl codes-list">
+    <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+    <div class="flex flex-col space-y-2 max-h-96 rounded-xl overflow-y-scroll">
+        <ul class="grid grid-flow-row md:grid-cols-3 xl:grid-cols-5 gap-2 rounded-xl codes-list">
             {% for name, code in default_codes.items %}
                 {% include "tracker/codes/block.html" with is_entered=False %}
             {% endfor %}
diff --git a/tunictracker/tracker/templates/tracker/index.html b/tunictracker/tracker/templates/tracker/index.html
index ed7321d..9f5299d 100644
--- a/tunictracker/tracker/templates/tracker/index.html
+++ b/tunictracker/tracker/templates/tracker/index.html
@@ -2,36 +2,55 @@
 {% load static %}
 {% block content %}
     <div class="container monospace py-4">
-        <div class="border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
+        <div class="p-2 border-4 rounded-xl text-[#eee] bg-bluelight-translucent-dark border-bluelight-dark">
             {% if debug != '' %}
-                <h1 class="mt-2 px-2 flex text-2xl">
-                    <span class="relative inline-block align-middle h-8 w-8">
-                        <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
-                             alt="A trans pride fox emoji."
-                             width=""
-                             height="" />
-                    </span>
-                    &nbsp;Tunic Transition Tracker
-                </h1>
-                <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-                <div class="p-2 flex flex-col space-y-2">
-                    {% include "tracker/status/index.html" %}
-                    <div class="p-2 flex flex-col max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark"
-                         id="overview">
-                        <div class="text-lg mb-2">Overview</div>
-                        <div class="flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0">
-                            <div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
-                            <div class="flex basis-1/2 overview-entrances">
-                                Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
-                            </div>
+                <div class="space-y-2 px-2">
+                    <div class="flex flex-col align-middle max-w-fit">
+                        <div class="flex flex-row align-middle max-w-fit h-12 space-x-2">
+                            <span class="h-8 max-w-8 my-auto align-middle">
+                                <img src="{% static 'tracker/images/neofox_flag_trans_256.png' %}"
+                                     alt="A trans pride fox emoji."
+                                     width="32"
+                                     height="32" />
+                            </span>
+                            <span class="max-h-12 max-w-64 my-auto align-middle">
+                                <img src="{% static 'tracker/images/trunic_title.png' %}"
+                                     alt="A trans pride fox emoji."
+                                     width="365"
+                                     height="64" />
+                            </span>
                         </div>
-                        <hr class="mt-2 mb-4 border-2 border-bluelight-translucent-dark rounded-xl" />
+                        <div class="mt-auto text-sm max-w-fit">(Tunic Transition Tracker)</div>
+                    </div>
+                </div>
+                <div class="space-y-1">
+                    <hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
+                    <div class="px-2 flex flex-col md:flex-row md:space-x-4 space-y-2 md:space-y-0 text-lg bg-bluelight-translucent-dark rounded-sm"
+                         id="overview-totals">
+                        <div class="flex basis-1/2 overview-checks">Checks: {{ totals.Checks.Undiscovered }}/{{ totals.Checks.Total }}</div>
+                        <div class="flex basis-1/2 overview-entrances">
+                            Entrances: {{ totals.Entrances.Undiscovered }}/{{ totals.Entrances.Total }}
+                        </div>
+                    </div>
+                    <hr class="mb-2 border-2 border-bluelight-dark rounded-xl" />
+
+                </div>
+                <div class="flex flex-col space-y-2">
+                    {% include "tracker/status/index.html" %}
+                    <div class="p-flex flex-col max-w-full" id="overview">
                         <div class="flex flex-col space-y-2">
-                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                            <div id="breakdown-current">
+                                {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
+                            </div>
+                            <hr class="my-2 border-2 border-bluelight-translucent-dark rounded-xl" />
+                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                                 <summary class="justify-start p-2 text-lg">Summary</summary>
-                                <div class="p-2 summary-list">{% include "tracker/summary/list.html" %}</div>
+                                <div class="mb-2 px-2 space-y-2 rounded-xl">
+                                    <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+                                    <div class="summary-list">{% include "tracker/summary/list.html" %}</div>
+                                </div>
                             </details>
-                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                            <details class="group flex flex-col rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                                 <summary class="justify-start p-2 text-lg">Breakdown</summary>
                                 <div class="px-2 flex flex-col space-y-2 breakdown-list">
                                     {% include "tracker/breakdown/block.html" with extra_classes="hidden" %}
@@ -46,17 +65,14 @@
                             </details>
                         </div>
                     </div>
-                    <div id="breakdown-current">
-                        {% include "tracker/breakdown/block.html" with scene_title=current_scene.title scene_data=current_scene.data %}
-                    </div>
-                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                         <summary class="justify-start">Settings</summary>
                         <div class="p-2 flex flex-col space-y-2">
                             {% include "tracker/settings/index.html" %}
                             {% include "tracker/address/index.html" %}
                         </div>
                     </details>
-                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent border-bluelight-dark">
+                    <details class="group p-2 flex max-w-full rounded-xl border-4 bg-bluelight-translucent-light border-bluelight-translucent-dark">
                         <summary class="justify-start">Tracker Debug</summary>
                         <div class="py-2 flex flex-col space-y-2" id="debug-block">
                             <ul class="p-2 rounded-xl bg-bluelight-translucent hidden">
diff --git a/tunictracker/tracker/templates/tracker/summary/block.html b/tunictracker/tracker/templates/tracker/summary/block.html
index c561fa0..6e42ba6 100644
--- a/tunictracker/tracker/templates/tracker/summary/block.html
+++ b/tunictracker/tracker/templates/tracker/summary/block.html
@@ -1,9 +1,11 @@
-<div class="p-2 flex flex-col rounded-xl border-4 border-bluelight-dark bg-opacity-50 {{ extra_classes }}">
-  <div class="summary-title">{{ scene }}:</div>
-  <div class="summary-checks">
-    Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
-  </div>
-  <div class="summary-entrances">
-    Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
+<div class="rounded-xl border-4 border-bluelight {{ is_hidden }}">
+  <div class="p-2 min-h-full flex flex-col rounded-lg {{ extra_classes }}">
+    <div class="summary-title">{{ scene }}:</div>
+    <div class="summary-checks">
+      Checks: {{ scene_data.Totals.Checks.Undiscovered }}/{{ scene_data.Totals.Checks.Total }}
+    </div>
+    <div class="summary-entrances">
+      Entrances: {{ scene_data.Totals.Entrances.Undiscovered }}/{{ scene_data.Totals.Entrances.Total }}
+    </div>
   </div>
 </div>
diff --git a/tunictracker/tracker/templates/tracker/summary/list.html b/tunictracker/tracker/templates/tracker/summary/list.html
index 7330772..735a92d 100644
--- a/tunictracker/tracker/templates/tracker/summary/list.html
+++ b/tunictracker/tracker/templates/tracker/summary/list.html
@@ -1,19 +1,15 @@
-<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
-  {% include "tracker/summary/block.html" with extra_classes="hidden" %}
+<div class="grid gap-2 md:grid-cols-3 xl:grid-cols-5 grid-flow-row max-h-96 rounded-xl overflow-y-scroll scrollbar scrollbar-thumb-bluelight-dark scrollbar-track-bluelight">
+  {% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
   {% for scene, scene_data in scenes.items %}
     {% if scene == current_scene.title %}
-      {% include "tracker/summary/block.html" with extra_classes="hidden" %}
+      {% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
     {% elif scene != "Entrances" and scene != "Checks" %}
       {% if scene_data.Totals.Checks.Undiscovered > 0 and scene_data.Totals.Entrances.Undiscovered > 0 %}
-        {% if scene_data.Totals.Entrances.Undiscovered == scene_data.Totals.Entrances.Total %}
-          {% include "tracker/summary/block.html" with extra_classes="bg-red-900" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="bg-green-900" %}
-        {% endif %}
+        {% include "tracker/summary/block.html" with extra_classes="bg-highlight-both-translucent" is_hidden="" %}
       {% elif scene_data.Totals.Checks.Undiscovered > 0 %}
-        {% include "tracker/summary/block.html" with extra_classes="bg-yellow-900" %}
+        {% include "tracker/summary/block.html" with extra_classes="bg-highlight-checks-translucent" is_hidden="" %}
       {% elif scene_data.Totals.Entrances.Undiscovered > 0 %}
-        {% include "tracker/summary/block.html" with extra_classes="bg-blue-900" %}
+        {% include "tracker/summary/block.html" with extra_classes="bg-highlight-entrances-translucent" is_hidden="" %}
       {% endif %}
     {% endif %}
   {% endfor %}
diff --git a/tunictracker/tunictracker/settings.py b/tunictracker/tunictracker/settings.py
index 9249b10..90d1551 100644
--- a/tunictracker/tunictracker/settings.py
+++ b/tunictracker/tunictracker/settings.py
@@ -23,7 +23,7 @@ BASE_DIR = Path(__file__).resolve().parent.parent
 SECRET_KEY = 'django-insecure-ae-fwu3z$wexeiac4ggt0l@x1*uq5v9-q&$y#frf85xli)bo8f'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = False
+DEBUG = True
 
 ALLOWED_HOSTS = [
     "localhost",
diff --git a/tunictracker/tunictracker/urls.py b/tunictracker/tunictracker/urls.py
index 78c6387..9a69dc1 100644
--- a/tunictracker/tunictracker/urls.py
+++ b/tunictracker/tunictracker/urls.py
@@ -16,8 +16,10 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import include, path
+from django.conf import settings
+from django.conf.urls.static import static
 
 urlpatterns = [
     path("", include("tracker.urls")),
     path('admin/', admin.site.urls),
-]
+] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
diff --git a/tunictracker/werefoxtheme/static/fonts/DejaVuSansMono.ttf b/tunictracker/werefoxtheme/static/fonts/DejaVuSansMono.ttf
new file mode 100644
index 0000000..10c879b
Binary files /dev/null and b/tunictracker/werefoxtheme/static/fonts/DejaVuSansMono.ttf differ
diff --git a/tunictracker/werefoxtheme/static_src/src/styles.css b/tunictracker/werefoxtheme/static_src/src/styles.css
index b5c61c9..391d723 100644
--- a/tunictracker/werefoxtheme/static_src/src/styles.css
+++ b/tunictracker/werefoxtheme/static_src/src/styles.css
@@ -1,3 +1,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+    font-family: "DejaVuSansMono";
+    src: url("/static/fonts/DejaVuSansMono.ttf");
+}
\ No newline at end of file
diff --git a/tunictracker/werefoxtheme/static_src/tailwind.config.js b/tunictracker/werefoxtheme/static_src/tailwind.config.js
index f082ece..254f9a5 100644
--- a/tunictracker/werefoxtheme/static_src/tailwind.config.js
+++ b/tunictracker/werefoxtheme/static_src/tailwind.config.js
@@ -57,6 +57,7 @@ module.exports = {
 				bluelight: {
 					DEFAULT: "#317eb1",
 					translucent: {
+						light: "#317eb140",
 						DEFAULT: "#317eb180",
 						dark: "#2facff40",
 					},
@@ -80,6 +81,20 @@ module.exports = {
 						translucent: "#ffecf930",
 					},
 				},
+				"highlight": {
+					checks: {
+						DEFAULT: "#A431B1",
+						translucent: "#A431B188",
+					},
+					entrances: {
+						DEFAULT: "#B16431",
+						translucent: "#B1643188",
+					},
+					both: {
+						DEFAULT: "#3EB131",
+						translucent: "#3EB13188",
+					},
+				},
 			},
 		},
 	},