diff --git a/tunictracker/tracker/forms.py b/tunictracker/tracker/forms.py
index d902d38..dff66d7 100644
--- a/tunictracker/tracker/forms.py
+++ b/tunictracker/tracker/forms.py
@@ -5,7 +5,7 @@ from json import loads
 class ServerAddressForm(forms.Form):
     server_address_form = forms.URLField(
         max_length=1312, initial="http://localhost:8000/", empty_value="http://localhost:8000/", label="")
-    server_address_form.widget.attrs["class"] = "w-full rounded-xl border-none shadow-inner shadow-[#242424] bg-white bg-opacity-10"
+    server_address_form.widget.attrs["class"] = "w-full rounded-xl border-none shadow-inner shadow-[#242424] bg-charcoal-translucent-light"
 
 
 class BackendFilepathForm(forms.Form):
diff --git a/tunictracker/tracker/static/tracker/assets/main.js b/tunictracker/tracker/static/tracker/assets/main.js
index cef91cc..c1bbf99 100644
--- a/tunictracker/tracker/static/tracker/assets/main.js
+++ b/tunictracker/tracker/static/tracker/assets/main.js
@@ -22,7 +22,7 @@ var all_scenes = [];
 window.onload = async () => {
 	await get_updated_server_address();
 	await parse_cross_codes();
-	// await initialize_elements();
+	await initialize_elements();
 	await refresh_elements();
 };
 
diff --git a/tunictracker/tracker/templates/tracker/about/index.html b/tunictracker/tracker/templates/tracker/about/index.html
index 089efbd..c62f034 100644
--- a/tunictracker/tracker/templates/tracker/about/index.html
+++ b/tunictracker/tracker/templates/tracker/about/index.html
@@ -1,5 +1,5 @@
 {% load static %}
-<div class="absolute inset-x-0 right-0 sm:top-2 top-4">
+<div class="absolute inset-x-0 right-0 z-10 sm:top-2 top-4">
     <details class="group py-2 absolute right-2 open:w-auto open:static w-fit open:mx-4 open:rounded-md h-auto open:bg-bluelight-background open:shadow-sm open:shadow-[#242424]">
         <summary class="block float-right p-2 mt-2 mr-6 list-none transition sm:m-0 group-open:m-0 content-none group-open:justify-end">
             <img class="p-2 w-12 h-12 group-open:hidden rounded-md bg-bluelight-background shadow-sm shadow-[#242424]" src="{% static "tracker/images/question_mark.png" %}" alt="About this tracker" width="32" height="32" />
@@ -11,25 +11,7 @@
         </div>
         <div class="flex flex-col flex-grow-0 p-2 space-y-2 max-h-[80svh] overflow-y-auto scrollbar-none">
             {% include "tracker/howto/index.html" %}
-            <details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
-                <summary class="justify-start">Settings</summary>
-                <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
-                {% include "tracker/address/index.html" %}
-                <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
-                    <input onclick="hide_empty_summaries()"
-                           type="checkbox"
-                           id="hideDone"
-                           class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" />
-                    <label for="hideDone"
-                           class="my-auto align-top justify-left min-w-fit text-md text-nowrap">
-                        Hide completed areas
-                    </label>
-                </div>
-                {% comment %} <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
-                    <input onclick="notices_ur_debug()" class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" type="checkbox" id="show-debug" />
-                    <label for="show-debug" class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
-                </div> {% endcomment %}
-            </details>
+            {% include "tracker/settings/block.html" %}
             {% include "tracker/credits/index.html" %}
             {% include "tracker/src/index.html" with tracker_fe_link="https://gitea.werefox.cafe/ada/tunic-tracker-redux/src/branch/plugin-backend" tracker_be_link="https://github.com/spaceglace/tunic-randomizer/" %}
         </div>
diff --git a/tunictracker/tracker/templates/tracker/address/index.html b/tunictracker/tracker/templates/tracker/address/index.html
index 9ae569b..814bea1 100644
--- a/tunictracker/tracker/templates/tracker/address/index.html
+++ b/tunictracker/tracker/templates/tracker/address/index.html
@@ -1,13 +1,13 @@
 <form action="{% url "set_address" %}"
       method="post"
       class="flex flex-row space-x-2">
-       <div class="w-full rounded-xl border-2 border-bluelight-dark bg-[#242424]/10"
+       <div class="w-full border-2 rounded-xl border-bluelight-dark bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light"
             hidden></div>
        {% csrf_token %}
        <label for="server-address-form"
-              class="my-auto justify-center align-top min-w-fit text-md text-nowrap">Backend</label>
+              class="justify-center my-auto align-top min-w-fit text-md text-nowrap">Backend</label>
        {% for field in server_address_form %}{{ field }}{% endfor %}
        <button type="submit"
-               class="p-2 rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
+               class="p-2 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light shadow-sm shadow-[#242424]"
                id="server-address-form">Submit</button>
 </form>
diff --git a/tunictracker/tracker/templates/tracker/breakdown/block.html b/tunictracker/tracker/templates/tracker/breakdown/block.html
index 4332fee..bd20c31 100644
--- a/tunictracker/tracker/templates/tracker/breakdown/block.html
+++ b/tunictracker/tracker/templates/tracker/breakdown/block.html
@@ -1,13 +1,13 @@
 <div class="breakdown flex flex-col space-y-2 max-w-full {{ extra_classes }}"
      data-current="{{ is_current_scene }}"
      data-scene="{{ scene_title }}">
-  <div class="p-2 px-2 space-y-2 bg-gradient-to-br from-[#8080FF40] to-[#8080FF20]">
+  <div class="p-2 px-2 space-y-2 bg-gradient-to-br from-bluelight-background-translucent to-bluelight-background-translucent-light">
     <div class="flex flex-col w-full min-w-full">
       <div class="text-xl breakdown-block-title">{{ scene_title }}</div>
       <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
     </div>
     <div class="flex flex-col justify-center md:flex-row">
-      <div class="mt-1 mr-0 md:mr-1 md:mt-0 p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10] basis-1/2 md:max-w-[50%]">
+      <div class="mt-1 mr-0 md:mr-1 md:mt-0 p-2 bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light basis-1/2 md:max-w-[50%]">
         <div class="flex flex-col flex-shrink-0 breakdown-checks">
           <div class="flex flex-col my-0 space-y-2">
             <div class="text-md breakdown-block-checks-title"
@@ -29,7 +29,7 @@
           </div>
         </div>
       </div>
-      <div class="mt-1 ml-0 md:ml-1 md:mt-0 p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10] basis-1/2 md:max-w-[50%]">
+      <div class="mt-1 ml-0 md:ml-1 md:mt-0 p-2 bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light basis-1/2 md:max-w-[50%]">
         <div class="flex flex-col flex-shrink-0 overflow-hidden breakdown-entrances">
           <div class="grid grid-flow-row space-y-2">
             <div class="text-md breakdown-block-entrances-title"
@@ -52,7 +52,7 @@
         </div>
       </div>
     </div>
-    <div class="p-2 bg-gradient-to-br from-[#EEEEEE20] to-[#EEEEEE10]">
+    <div class="p-2 bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light">
       <div class="overflow-auto scrollbar-none max-h-64">
         <div class="flex flex-col mx-auto min-w-max breakdown-block-mapped-list">
           <button type="button"
diff --git a/tunictracker/tracker/templates/tracker/codes/index.html b/tunictracker/tracker/templates/tracker/codes/index.html
index 3f2bd6f..f2b8ff0 100644
--- a/tunictracker/tracker/templates/tracker/codes/index.html
+++ b/tunictracker/tracker/templates/tracker/codes/index.html
@@ -2,8 +2,8 @@
     {% comment %} drop-shadow-[0px_0px_4px_rgba(255,255,255,1)]"> {% endcomment %}
     <summary>Holy Cross Codes</summary>
     <hr class="border-2 border-holy-cross opacity-30 rounded-xl" />
-    <div class="flex flex-col space-y-2 overflow-y-scroll max-h-96 rounded-xl scrollbar-none">
-        <div class="grid grid-flow-row gap-2 md:grid-cols-3 xl:grid-cols-5 rounded-xl"
+    <div class="flex flex-col space-y-2 overflow-y-scroll rounded-md max-h-96 bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light scrollbar-none">
+        <div class="grid grid-flow-row grid-cols-1 gap-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 rounded-xl"
              id="codes-list">
             {% include "tracker/codes/block.html" with is_entered=False name="it is a mystery" current_scene="mystery" code="" extra_classes="order-last hidden" %}
             {% for name, code in default_codes.items %}
diff --git a/tunictracker/tracker/templates/tracker/credits/index.html b/tunictracker/tracker/templates/tracker/credits/index.html
index 2ec25b1..704b516 100644
--- a/tunictracker/tracker/templates/tracker/credits/index.html
+++ b/tunictracker/tracker/templates/tracker/credits/index.html
@@ -1,11 +1,11 @@
 {% load static %}
-<details class="open:pb-4 flex-shrink-0 flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text overflow-hidden">
+<details class="open:pb-4 flex-shrink-0 flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br shadow-sm shadow-[#242424] from-bluelight-background-translucent to-bluelight-background-translucent-light text-highlight-empty-text overflow-hidden">
     <summary class="justify-start">Credits</summary>
     <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
-    <div class="rounded-md p-4 bg-gradient-to-br from-[#3333ff40] to-[#7777ff40]">
+    <div class="p-4 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light">
         <div class="rounded-md max-h-[36rem] space-y-2 min-w-full">
-            <div class="overflow-hidden flex-shrink-0 min-w-full w-full  bg-gradient-to-br min-h-[22rem] max-h-[22rem] from-[#24242480] to-[#48484840] rounded-md p-2">
-                <div class="overflow-x-auto scrollbar-none max-w-full min-h-[21rem] w-full">
+            <div class="p-2 overflow-hidden flex-shrink-0 min-w-full w-full  min-h-[22rem] max-h-[22rem] rounded-md shadow-inner shadow-charcoal bg-gradient-to-br from-charcoal-translucent-dark to-charcoal-translucent">
+                <div class="overflow-x-auto scrollbar-none max-w-full min-h-[21rem] w-full rounded-md">
                     <div class="flex flex-row justify-center flex-shrink-0 w-full mx-auto space-x-2 min-w-max">
                         <a class="rounded-md  min-h-[21rem] max-h-[21rem] min-w-[15rem]"
                            href="https://werefox.cafe"
diff --git a/tunictracker/tracker/templates/tracker/hints/block.html b/tunictracker/tracker/templates/tracker/hints/block.html
new file mode 100644
index 0000000..762932e
--- /dev/null
+++ b/tunictracker/tracker/templates/tracker/hints/block.html
@@ -0,0 +1,3 @@
+<div class="h-full min-w-full p-2 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light {{ extra_classes }}">
+    <div class="inline align-top text-md">{{ value }}</div>
+</div>
diff --git a/tunictracker/tracker/templates/tracker/hints/index.html b/tunictracker/tracker/templates/tracker/hints/index.html
deleted file mode 100644
index a01bdd6..0000000
--- a/tunictracker/tracker/templates/tracker/hints/index.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="h-full min-w-full p-2 rounded-md bg-[rgb(36,36,36)] bg-opacity-35 {{ extra_classes }}">
-    <div class="inline align-top text-md drop-shadow">{{ value }}</div>
-</div>
diff --git a/tunictracker/tracker/templates/tracker/hints/list.html b/tunictracker/tracker/templates/tracker/hints/list.html
new file mode 100644
index 0000000..a54f71b
--- /dev/null
+++ b/tunictracker/tracker/templates/tracker/hints/list.html
@@ -0,0 +1,13 @@
+<details class="rounded-lg group bg-gradient-to-br from-bluelight-background-translucent to-bluelight-background-translucent-light shadow-sm shadow-[#242424]">
+    <summary class="justify-start px-4 py-2">Hints</summary>
+    <div class="px-2 rounded-xl">
+        <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
+        <div class="flex-col py-2 space-y-1 *:text-wrap *:break-words"
+             id="hints-list">
+            {% include "tracker/hints/block.html" with value="" extra_classes="hidden" %}
+            {% for name, value in hints.items %}
+                {% include "tracker/hints/block.html" %}
+            {% endfor %}
+        </div>
+    </div>
+</details>
diff --git a/tunictracker/tracker/templates/tracker/howto/index.html b/tunictracker/tracker/templates/tracker/howto/index.html
index b59e709..88219b6 100644
--- a/tunictracker/tracker/templates/tracker/howto/index.html
+++ b/tunictracker/tracker/templates/tracker/howto/index.html
@@ -1,10 +1,10 @@
-<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
+<details class="py-2 px-4 flex flex-col space-y-2 max-w-full text-md rounded-lg bg-gradient-to-br shadow-sm shadow-[#242424] from-bluelight-background-translucent to-bluelight-background-translucent-light text-highlight-empty-text">
     <summary class="justify-start">How To Use This Tracker</summary>
     <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-    <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
+    <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-charcoal-translucent to-charcoal-translucent-light text-highlight-empty-text">
         <summary class="px-2">Setup</summary>
         <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-        <div class="p-2 rounded-md bg-gradient-to-br from-[#3333ff40] to-[#7777ff40]">
+        <div class="p-2 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light">
             <ul class="flex flex-col px-4 ml-4 space-y-1 text-sm break-words list-decimal">
                 <li>
                     Download the latest release at <a href="https://github.com/spaceglace/tunic-randomizer/releases"
@@ -19,10 +19,10 @@
             </ul>
         </div>
     </details>
-    <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text">
+    <details class="py-2 px-4 flex flex-col space-y-2 rounded-md bg-gradient-to-tl shadow-sm shadow-[#242424] from-charcoal-translucent to-charcoal-translucent-light text-highlight-empty-text">
         <summary class="px-2">Usage</summary>
         <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-        <div class="p-2 rounded-md bg-gradient-to-br from-[#3333ff40] to-[#7777ff40]">
+        <div class="p-2 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light">
             <ul class="flex flex-col px-4 space-y-2 text-sm list-disc list-inside">
                 <li>
                     You will always be shown the current, total, and remaining checks/entrances in the game left to discover, and a breakdown of the current area you're in.
@@ -59,10 +59,8 @@
                 </li>
             </ul>
             <hr class="mt-2 border-2 border-bluelight-dark rounded-xl" />
-            <div class="flex flex-col px-2 pb-2 text-sm list-none">
-                <li>
-                    * Ideally, this would eventually be something more straightforward, like simply listing the path to an area. That will hopefully be added later down the line.
-                </li>
+            <div class="flex flex-col p-2 text-sm list-none">
+                * Ideally, this would eventually be something more straightforward, like simply listing the path to an area. That will hopefully be added later down the line.
             </div>
         </div>
     </details>
diff --git a/tunictracker/tracker/templates/tracker/index.html b/tunictracker/tracker/templates/tracker/index.html
index 4f8db85..60e0c1b 100644
--- a/tunictracker/tracker/templates/tracker/index.html
+++ b/tunictracker/tracker/templates/tracker/index.html
@@ -27,7 +27,7 @@
                     {% include "tracker/status/index.html" %}
                     <div class="space-y-1">
                         <hr class="border-2 border-bluelight-dark rounded-xl" />
-                        <div class="flex flex-col px-2 space-y-2 text-lg rounded-sm md:flex-row md:space-x-4 md:space-y-0 bg-gradient-to-r from-[#8080FF40] to-[#8080FF20]"
+                        <div class="flex flex-col px-2 space-y-2 text-lg rounded-sm md:flex-row md:space-x-4 md:space-y-0 bg-gradient-to-r from-bluelight-background-translucent to-bluelight-background-translucent-light"
                              id="overview-totals">
                             <div class="flex basis-1/2">
                                 <div class="flex-col min-w-full">
@@ -67,27 +67,9 @@
                                 {% endfor %}
                             </div>
                         </div>
-                        <details class="flex flex-col rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
-                            <summary class="justify-start px-4 py-2">Summary</summary>
-                            <div class="px-2 rounded-xl">
-                                <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-                                <div class="py-2" id="summary-list">{% include "tracker/summary/list.html" %}</div>
-                            </div>
-                        </details>
+                        {% include "tracker/summary/list.html" %}
                         {% include "tracker/codes/index.html" %}
-                        <details class="rounded-lg group bg-gradient-to-br from-bluelight-background-light to-bluelight-background shadow-sm shadow-[#242424]">
-                            <summary class="justify-start px-4 py-2">Hints</summary>
-                            <div class="px-2 rounded-xl">
-                                <hr class="border-2 border-bluelight-translucent-dark rounded-xl" />
-                                <div class="flex-col py-2 space-y-1 *:text-wrap *:break-words"
-                                     id="hints-list">
-                                    {% include "tracker/hints/index.html" with value="" extra_classes="hidden" %}
-                                    {% for name, value in hints.items %}
-                                        {% include "tracker/hints/index.html" %}
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </details>
+                        {% include "tracker/hints/list.html" %}
                     </div>
                 {% else %}
                     <div id="no_data"></div>
diff --git a/tunictracker/tracker/templates/tracker/settings/block.html b/tunictracker/tracker/templates/tracker/settings/block.html
new file mode 100644
index 0000000..0741aeb
--- /dev/null
+++ b/tunictracker/tracker/templates/tracker/settings/block.html
@@ -0,0 +1,19 @@
+<details class="flex flex-col max-w-full px-4 py-2 space-y-2 rounded-lg text-md bg-gradient-to-br shadow-sm shadow-[#242424] from-bluelight-background-translucent to-bluelight-background-translucent-light text-highlight-empty-text">
+     <summary class="justify-start">Settings</summary>
+     <hr class="justify-start w-full border-2 border-bluelight-translucent-dark rounded-xl" />
+     <div class="p-2 rounded-md bg-gradient-to-br from-charcoal-translucent bg-charcoal-translucent-light">
+          {% include "tracker/address/index.html" %}
+          <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
+               <input onclick="hide_empty_summaries()"
+                      type="checkbox"
+                      id="hideDone"
+                      class="p-2 my-auto rounded-md bg-gradient-to-br from-charcoal-translucent-dark to-charcoal-translucent shadow-sm shadow-[#242424]" />
+               <label for="hideDone"
+                      class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Hide completed areas</label>
+          </div>
+          {% comment %} <div class="flex flex-row justify-center p-2 m-auto space-x-2 align-middle">
+         <input onclick="notices_ur_debug()" class="p-2 my-auto rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]" type="checkbox" id="show-debug" />
+         <label for="show-debug" class="my-auto align-top justify-left min-w-fit text-md text-nowrap">Sh-OwO Debug</label>
+          </div> {% endcomment %}
+     </div>
+</details>
diff --git a/tunictracker/tracker/templates/tracker/settings/index.html b/tunictracker/tracker/templates/tracker/settings/index.html
index 66769c9..c1e56fc 100644
--- a/tunictracker/tracker/templates/tracker/settings/index.html
+++ b/tunictracker/tracker/templates/tracker/settings/index.html
@@ -1,13 +1,13 @@
 <form action="{% url "set_settings" %}"
       method="post"
       class="flex flex-row space-x-2">
-       <div class="w-full rounded-lg border-none shadow-[inset_0_35px_60px_-15px_rgba(0,0,0,0.3)] bg-white bg-opacity-10"
-            hidden></div>
-       {% csrf_token %}
-       <label for="backend-filepath-form"
-              class="my-auto justify-center align-top min-w-fit text-md text-nowrap">AppData Path</label>
-       {% for field in backend_filepath_form %}{{ field }}{% endfor %}
-       <button type="submit"
-               class="p-2 rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
-               id="backend-filepath-form">Submit</button>
+    <div class="w-full rounded-lg border-none shadow-[inset_0_35px_60px_-15px_rgba(0,0,0,0.3)] bg-charcoal-translucent-light"
+         hidden></div>
+    {% csrf_token %}
+    <label for="backend-filepath-form"
+           class="justify-center my-auto align-top min-w-fit text-md text-nowrap">AppData Path</label>
+    {% for field in backend_filepath_form %}{{ field }}{% endfor %}
+    <button type="submit"
+            class="p-2 rounded-md bg-white bg-opacity-10 shadow-sm shadow-[#242424]"
+            id="backend-filepath-form">Submit</button>
 </form>
diff --git a/tunictracker/tracker/templates/tracker/src/index.html b/tunictracker/tracker/templates/tracker/src/index.html
index e001aff..458725f 100644
--- a/tunictracker/tracker/templates/tracker/src/index.html
+++ b/tunictracker/tracker/templates/tracker/src/index.html
@@ -1,4 +1,4 @@
-<div class="flex flex-col md:flex-row min-w-max space-y-2 md:space-y-0 space-x-0 md:space-x-2 *:flex *:min-w-max *:justify-center basis-1 *:md:basis-1/2 *:p-1 *:rounded-md *:bg-gradient-to-tl *:shadow-sm *:shadow-[#242424] *:from-highlight-empty-light *:to-highlight-empty-dark *:text-highlight-empty-text">
+<div class="flex flex-col md:flex-row min-w-max space-y-2 md:space-y-0 space-x-0 md:space-x-2 *:flex *:min-w-max *:justify-center basis-1 *:md:basis-1/2 *:p-1 *:rounded-md *:bg-gradient-to-tl *:shadow-sm *:shadow-[#242424] *:from-bluelight-background-translucent *:to-bluelight-background-translucent-light *:text-highlight-empty-text">
     <a href={{ tracker_fe_link }} target="_blank">Front-end Source Code</a>
     <a href={{ tracker_be_link }} target="_blank">Back-end Source Code</a>
 </div>
diff --git a/tunictracker/tracker/templates/tracker/status/index.html b/tunictracker/tracker/templates/tracker/status/index.html
index 7aa2c97..dc703f4 100644
--- a/tunictracker/tracker/templates/tracker/status/index.html
+++ b/tunictracker/tracker/templates/tracker/status/index.html
@@ -1,4 +1,4 @@
-<div class="p-2 flex flex-col rounded-xl border-4 border-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
+<div class="mb-2 p-2 flex flex-col rounded-xl border-4 border-red-700 bg-opacity-50 bg-red-900 color=[#eee] {% if is_hidden %}hidden{% endif %}" id="status-block">
     <div class="text-xl">Oh no!</div>
     <div class="text-lg">It looks like the backend can't be accessed...</div>
     <div class="text-lg">Are you sure there is one running at {{ server_address }}?</div>
diff --git a/tunictracker/tracker/templates/tracker/summary/list.html b/tunictracker/tracker/templates/tracker/summary/list.html
index 4d2233f..dfcf174 100644
--- a/tunictracker/tracker/templates/tracker/summary/list.html
+++ b/tunictracker/tracker/templates/tracker/summary/list.html
@@ -1,38 +1,47 @@
-<div class="grid grid-flow-row gap-2 p-1 overflow-y-scroll md:grid-cols-3 xl:grid-cols-5 max-h-96 rounded-xl scrollbar-none">
-  {% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
-  {% for scene, scene_data in scenes.items %}
-    {% if scene != "Posterity" and scene != "Resurrection" and scene != "Loading" %}
-      {% if scene_data.checks.collected == scene_data.checks.total and scene_data.entrances.found == scene_data.entrances.total %}
-        {% if scene == current_scene.title %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text" is_hidden="hidden" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text" is_hidden="" %}
-        {% endif %}
-      {% elif scene_data.checks.collected <= 0 and scene_data.entrances.found <= 0 and scene_data.entrances.total > 0 %}
-        {% if scene == current_scene.title %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text" is_hidden="hidden" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text" is_hidden="" %}
-        {% endif %}
-      {% elif scene_data.checks.collected >= scene_data.checks.total %}
-        {% if scene == current_scene.title %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text" is_hidden="hidden" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text" is_hidden="" %}
-        {% endif %}
-      {% elif scene_data.entrances.found >= scene_data.entrances.total %}
-        {% if scene == current_scene.title %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text" is_hidden="hidden" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text" is_hidden="" %}
-        {% endif %}
-      {% else %}
-        {% if scene == current_scene.title %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-both-light to-highlight-both-dark text-highlight-both-text" is_hidden="hidden" %}
-        {% else %}
-          {% include "tracker/summary/block.html" with extra_classes="from-highlight-both-light to-highlight-both-dark text-highlight-both-text" is_hidden="" %}
-        {% endif %}
-      {% endif %}
-    {% endif %}
-  {% endfor %}
-</div>
+<details class="flex flex-col rounded-lg group bg-gradient-to-br from-bluelight-background-translucent to-bluelight-background-translucent-light shadow-sm shadow-[#242424]">
+  <summary class="justify-start px-4 py-2">Summary</summary>
+  <hr class="mx-2 border-2 border-bluelight-translucent-dark rounded-xl" />
+  <div class="p-2 rounded-xl">
+    <div class="p-2 rounded-md bg-gradient-to-br from-charcoal-translucent to-charcoal-translucent-light"
+         id="summary-list">
+      <div class="grid grid-flow-row gap-2 p-1 overflow-y-scroll md:grid-cols-3 xl:grid-cols-5 max-h-96 rounded-xl scrollbar-none">
+        {% include "tracker/summary/block.html" with extra_classes="" is_hidden="hidden" %}
+        {% for scene, scene_data in scenes.items %}
+          {% if scene != "Posterity" and scene != "Resurrection" and scene != "Loading" %}
+            {% if scene_data.checks.collected == scene_data.checks.total and scene_data.entrances.found == scene_data.entrances.total %}
+              {% if scene == current_scene.title %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text" is_hidden="hidden" %}
+              {% else %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-empty-light to-highlight-empty-dark text-highlight-empty-text" is_hidden="" %}
+              {% endif %}
+            {% elif scene_data.checks.collected <= 0 and scene_data.entrances.found <= 0 and scene_data.entrances.total > 0 %}
+              {% if scene == current_scene.title %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text" is_hidden="hidden" %}
+              {% else %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-undiscovered-light to-highlight-undiscovered-dark text-highlight-undiscovered-text" is_hidden="" %}
+              {% endif %}
+            {% elif scene_data.checks.collected >= scene_data.checks.total %}
+              {% if scene == current_scene.title %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text" is_hidden="hidden" %}
+              {% else %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-checks-light to-highlight-checks-dark text-highlight-checks-text" is_hidden="" %}
+              {% endif %}
+            {% elif scene_data.entrances.found >= scene_data.entrances.total %}
+              {% if scene == current_scene.title %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text" is_hidden="hidden" %}
+              {% else %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-entrances-light to-highlight-entrances-dark text-highlight-entrances-text" is_hidden="" %}
+              {% endif %}
+            {% else %}
+              {% if scene == current_scene.title %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-both-light to-highlight-both-dark text-highlight-both-text" is_hidden="hidden" %}
+              {% else %}
+                {% include "tracker/summary/block.html" with extra_classes="from-highlight-both-light to-highlight-both-dark text-highlight-both-text" is_hidden="" %}
+              {% endif %}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</details>
diff --git a/tunictracker/werefoxtheme/static_src/tailwind.config.js b/tunictracker/werefoxtheme/static_src/tailwind.config.js
index 818c587..b5dfe86 100644
--- a/tunictracker/werefoxtheme/static_src/tailwind.config.js
+++ b/tunictracker/werefoxtheme/static_src/tailwind.config.js
@@ -80,36 +80,41 @@ module.exports = {
 			},
 			colors: {
 				bluelight: {
-					light: "#378ec880",
-					DEFAULT: "#317eb1",
-					dark: "#006bb380",
+					light: "hsla(204, 56.86%, 50%, 0.5)",
+					DEFAULT: "hsla(203.91, 56.64%, 44.31%, 1)",
+					dark: "hsla(204.13, 100%, 35.1%, 0.5)",
 					translucent: {
-						light: "#317eb140",
-						DEFAULT: "#317eb180",
-						dark: "#2facff40",
+						light: "hsla(203.91, 56.64%, 44.31%, 0.25)",
+						DEFAULT: "hsla(203.91, 56.64%, 44.31%, 0.5)",
+						dark: "hsla(203.94, 100%, 59.22%, 0.25)",
 					},
 					background: {
-						light: "#317eb1",
-						DEFAULT: "#26638c",
-						dark: "#1b4764",
+						light: "hsla(203.91, 56.64%, 44.31%, 1)",
+						DEFAULT: "hsla(204.12, 57.3%, 34.9%, 1)",
+						dark: "hsla(203.84, 57.48%, 24.9%, 1)",
+						translucent: {
+							light: "hsla(204, 75%, 75%, 0.2)",
+							DEFAULT: "hsla(204, 50%, 50%, 0.4)",
+							dark: "hsla(204, 50%, 50%, 0.2)",
+						},
 					},
-					link: "hsl(203.91, 56.64%, 75%)",
+					link: "hsla(203.91, 56.64%, 75%, 1)",
 				},
 				redlight: {
-					light: "#hsla(7, 56.86%, 50%, 50%)",
-					DEFAULT: "hsla(7, 56.64%, 44.31%, 100%)",
-					dark: "hsla(7, 100%, 35.1%, 50%)",
+					light: "#hsla(7, 56.86%, 50%, 0.5)",
+					DEFAULT: "hsla(7, 56.64%, 44.31%, 1)",
+					dark: "hsla(7, 100%, 35.1%, 0.5)",
 					translucent: {
-						light: "hsla(7, 72.32%, 69.41%, 25%)",
-						DEFAULT: "hsla(7, 72.32%, 69.41%, 50%)",
-						dark: "hsla(7, 81.57%, 100%, 25%)",
+						light: "hsla(7, 72.32%, 69.41%, 0.25)",
+						DEFAULT: "hsla(7, 72.32%, 69.41%, 0.5)",
+						dark: "hsla(7, 81.57%, 100%, 0.25)",
 					},
 					background: {
-						light: "hsla(7, 56.64%, 44.31%, 100%)",
-						DEFAULT: "hsla(7, 57.3%, 34.9%, 100%)",
-						dark: "hsla(7, 57.48%, 24.9%, 100%)",
+						light: "hsla(7, 56.64%, 44.31%, 1)",
+						DEFAULT: "hsla(7, 57.3%, 34.9%, 1)",
+						dark: "hsla(7, 57.48%, 24.9%, 1)",
 					},
-					link: "hsla(7, 56.64%, 75%, 100%)",
+					link: "hsla(7, 56.64%, 75%, 1)",
 				},
 				"trans-pride": {
 					cyan: {
@@ -158,6 +163,14 @@ module.exports = {
 				"holy-cross": {
 					DEFAULT: "fffae0",
 				},
+				charcoal: {
+					DEFAULT: "hsla(0, 0%, 14%, 1)",
+					translucent: {
+						light: "hsla(0, 0%, 14.12%, 0.125)",
+						DEFAULT: "hsla(0, 0%, 14.12%, 0.25)",
+						dark: "hsla(0, 0%, 14.12%, 0.5)",
+					},
+				},
 			},
 			keyframes: {
 				shake: {