diff --git a/infrastructure/web/public/javascripts/utils.js b/infrastructure/web/public/javascripts/utils.js
index ba60028..8ac9e6b 100644
--- a/infrastructure/web/public/javascripts/utils.js
+++ b/infrastructure/web/public/javascripts/utils.js
@@ -32,9 +32,9 @@ document.addEventListener('DOMContentLoaded', () => {
                     el.textContent = 'Expired';
                     // why am I doing this to myself?
                     try {
-                        const horse = document.querySelector('body');
-                        const style = getComputedStyle(horse);
-                        el.style.color = style.getPropertyValue('accent-color').trim() + "!important";
+                        const trojan = document.querySelector('body');
+                        const horse = getComputedStyle(trojan);
+                        el.style.color = horse.getPropertyValue('accent-color').trim() + "!important";
                     } catch (_) {
                         el.style.color = '#b00!important';
                     }
diff --git a/infrastructure/web/public/stylesheets/custom.css b/infrastructure/web/public/stylesheets/custom.css
index d048e62..53ec4df 100644
--- a/infrastructure/web/public/stylesheets/custom.css
+++ b/infrastructure/web/public/stylesheets/custom.css
@@ -58,6 +58,7 @@ body {
     padding: 20px;
     display: flex;
     flex-direction: column;
+    accent-color: var(--color-accent-purple-alt);
     background: linear-gradient( 135deg, var(--overlay-white-08), var(--overlay-white-02)), var(--color-bg-dark);
     color: var(--color-text-primary);
     border: 1px solid var(--overlay-white-12);