diff --git a/.air.toml b/.air.toml
index 070166a..c6d499b 100644
--- a/.air.toml
+++ b/.air.toml
@@ -7,14 +7,14 @@ tmp_dir = "tmp"
   bin = "./tmp/main"
   cmd = "go build -o ./tmp/main ."
   delay = 1000
-  exclude_dir = ["admin/static", "admin\\static", "public", "uploads", "test", "db", "res"]
+  exclude_dir = ["uploads", "test", "db", "res"]
   exclude_file = []
   exclude_regex = ["_test.go"]
   exclude_unchanged = false
   follow_symlink = false
   full_bin = ""
   include_dir = []
-  include_ext = ["go", "tpl", "tmpl", "html"]
+  include_ext = ["go", "tpl", "tmpl", "html", "css"]
   include_file = []
   kill_delay = "0s"
   log = "build-errors.log"
diff --git a/admin/static/admin.css b/admin/static/admin.css
index 877b5da..1f5a1fb 100644
--- a/admin/static/admin.css
+++ b/admin/static/admin.css
@@ -1,6 +1,71 @@
 @import url("/style/prideflag.css");
 @import url("/font/inter/inter.css");
 
+:root {
+    --bg-0: #101010;
+    --bg-1: #141414;
+    --bg-2: #181818;
+    --bg-3: #202020;
+
+    --fg-0: #b0b0b0;
+    --fg-1: #c0c0c0;
+    --fg-2: #d0d0d0;
+    --fg-3: #e0e0e0;
+
+    --col-shadow-0: #0002;
+    --col-shadow-1: #0004;
+    --col-shadow-2: #0006;
+    --col-highlight-0: #ffffff08;
+    --col-highlight-1: #fff1;
+    --col-highlight-2: #fff2;
+
+    --col-new: #b3ee5b;
+    --col-on-new: #1b2013;
+    --col-save: #6fd7ff;
+    --col-on-save: #283f48;
+    --col-delete: #ff7171;
+    --col-on-delete: #371919;
+
+    --col-warn: #ffe86a;
+    --col-on-warn: var(--bg-0);
+    --col-warn-hover: #ffec81;
+
+    --shadow-sm:
+    0 1px 2px var(--col-shadow-2),
+    inset 0 1px 1px var(--col-highlight-2);
+    --shadow-md:
+    0 2px 4px var(--col-shadow-1),
+    inset 0 2px 2px var(--col-highlight-1);
+    --shadow-lg:
+    0 4px 8px var(--col-shadow-0),
+    inset 0 4px 4px var(--col-highlight-0);
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        --bg-0: #e8e8e8;
+        --bg-1: #f0f0f0;
+        --bg-2: #f8f8f8;
+        --bg-3: #ffffff;
+
+        --fg-0: #606060;
+        --fg-1: #404040;
+        --fg-2: #303030;
+        --fg-3: #202020;
+
+        --col-shadow-0: #0002;
+        --col-shadow-1: #0004;
+        --col-shadow-2: #0008;
+        --col-highlight-0: #fff2;
+        --col-highlight-1: #fff4;
+        --col-highlight-2: #fff8;
+
+        --col-warn: #ffe86a;
+        --col-on-warn: var(--fg-3);
+        --col-warn-hover: #ffec81;
+    }
+}
+
 body {
     width: 100%;
     height: calc(100vh - 1em);
@@ -11,8 +76,12 @@ body {
     font-family: "Inter", sans-serif;
     font-size: 16px;
 
-    color: #303030;
-    background: #f0f0f0;
+    color: var(--fg-0);
+    background: var(--bg-0);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--fg-3);
 }
 
 nav {
@@ -22,40 +91,35 @@ nav {
     display: flex;
     flex-direction: row;
     justify-content: left;
-
-    background: #f8f8f8;
-    border-radius: 4px;
-    border: 1px solid #808080;
+    gap: .5em;
+    user-select: none;
 }
 nav .icon {
     height: 100%;
+    border-radius: 100%;
+    box-shadow: var(--shadow-sm);
+    overflow: hidden;
 }
-nav .title {
-    width: auto;
+nav .icon img {
+    width: 100%;
     height: 100%;
-
-    margin: 0 1em 0 0;
-
-    display: flex;
-
-    line-height: 2em;
-    text-decoration: none;
-
-    color: inherit;
 }
 .nav-item {
     width: auto;
     height: 100%;
-
-    margin: 0px;
     padding: 0 1em;
-
     display: flex;
 
+    color: var(--fg-2);
+    background: var(--bg-2);
+    border-radius: 10em;
+    box-shadow: var(--shadow-sm);
+
     line-height: 2em;
+    font-weight: 500;
 }
 .nav-item:hover {
-    background: #00000010;
+    background: var(--bg-1);
     text-decoration: none;
 }
 nav a {
@@ -77,9 +141,11 @@ a {
     text-decoration: none;
 }
 
+/*
 a:hover {
     text-decoration: underline;
 }
+*/
 
 a img.icon {
     height: .8em;
@@ -133,17 +199,14 @@ code {
 #error {
     margin: 0 0 1em 0;
     padding: 1em;
-    border-radius: 4px;
+    border-radius: 8px;
     background: #ffffff;
-    border: 1px solid #888;
 }
 #message {
     background: #a9dfff;
-    border-color: #599fdc;
 }
 #error {
     background: #ffa9b8;
-    border-color: #dc5959;
 }
 
 
@@ -152,52 +215,54 @@ a.delete:not(.button) {
     color: #d22828;
 }
 
-button, .button {
+.button, button {
     padding: .5em .8em;
     font-family: inherit;
     font-size: inherit;
-    border-radius: 4px;
-    border: 1px solid #a0a0a0;
-    background: #f0f0f0;
+
     color: inherit;
+    background: var(--bg-2);
+    border: none;
+    border-radius: 10em;
+    box-shadow: var(--shadow-sm);
+    font-weight: 500;
+    transition: background .1s ease-out, color .1s ease-out;
+
+    cursor: pointer;
+    user-select: none;
 }
 button:hover, .button:hover {
     background: #fff;
-    border-color: #d0d0d0;
 }
 button:active, .button:active {
     background: #d0d0d0;
-    border-color: #808080;
 }
 
-.button, button {
-    color: inherit;
-}
 .button.new, button.new {
-    background: #c4ff6a;
-    border-color: #84b141;
+    color: var(--col-on-new);
+    background: var(--col-new);
 }
 .button.save, button.save {
-    background: #6fd7ff;
-    border-color: #6f9eb0;
+    color: var(--col-on-save);
+    background: var(--col-save);
 }
 .button.delete, button.delete {
-    background: #ff7171;
-    border-color: #7d3535;
+    color: var(--col-on-delete);
+    background: var(--col-delete);
 }
 .button:hover, button:hover {
-    background: #fff;
-    border-color: #d0d0d0;
+    color: var(--bg-3);
+    background: var(--fg-3);
 }
 .button:active, button:active {
-    background: #d0d0d0;
-    border-color: #808080;
+    color: var(--bg-2);
+    background: var(--fg-0);
 }
 .button[disabled], button[disabled] {
-    background: #d0d0d0 !important;
-    border-color: #808080 !important;
+    color: var(--fg-0) !important;
+    background: var(--bg-3) !important;
     opacity: .5;
-    cursor: not-allowed !important;
+    cursor: default !important;
 }
 
 
@@ -217,7 +282,6 @@ form input {
     padding: .3rem .5rem;
     display: block;
     border-radius: 4px;
-    border: 1px solid #808080;
     font-size: inherit;
     font-family: inherit;
     color: inherit;
diff --git a/admin/static/admin.js b/admin/static/admin.js
index 0763ab7..140efe0 100644
--- a/admin/static/admin.js
+++ b/admin/static/admin.js
@@ -69,3 +69,20 @@ export function makeMagicList(container, itemSelector, callback) {
         if (callback) callback();
     });
 }
+
+export function hijackClickEvent(container, link) {
+    container.addEventListener('click', event => {
+        if (event.target.tagName.toLowerCase() === 'a') return;
+        event.preventDefault();
+        link.dispatchEvent(new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            ctrlKey: event.ctrlKey,
+            metaKey: event.metaKey,
+            shiftKey: event.shiftKey,
+            altKey: event.altKey,
+            button: event.button,
+        }));
+    });
+}
diff --git a/admin/static/edit-artist.css b/admin/static/edit-artist.css
index 5627e64..1bab082 100644
--- a/admin/static/edit-artist.css
+++ b/admin/static/edit-artist.css
@@ -9,9 +9,9 @@ h1 {
     flex-direction: row;
     gap: 1.2em;
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .artist-avatar {
@@ -27,6 +27,7 @@ h1 {
     cursor: pointer;
 }
 .artist-avatar #remove-avatar {
+    margin-top: .5em;
     padding: .3em .4em;
 }
 
@@ -53,8 +54,8 @@ input[type="text"] {
     font-family: inherit;
     font-weight: inherit;
     color: inherit;
-    background: #ffffff;
-    border: 1px solid transparent;
+    background: var(--bg-0);
+    border: none;
     border-radius: 4px;
     outline: none;
 }
@@ -85,9 +86,10 @@ input[type="text"]:focus {
     flex-direction: row;
     gap: 1em;
     align-items: center;
-    background: #f8f8f8;
-    border-radius: 8px;
-    border: 1px solid #808080;
+
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .release-artwork {
diff --git a/admin/static/edit-release.css b/admin/static/edit-release.css
index aa70e34..d30db84 100644
--- a/admin/static/edit-release.css
+++ b/admin/static/edit-release.css
@@ -12,8 +12,8 @@ input[type="text"] {
     gap: 1.2em;
 
     border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .release-artwork {
@@ -29,7 +29,8 @@ input[type="text"] {
     cursor: pointer;
 }
 .release-artwork #remove-artwork {
-    padding: .3em .4em;
+    margin-top: .5em;
+    padding: .3em .6em;
 }
 
 .release-info {
@@ -54,17 +55,17 @@ input[type="text"] {
     background: transparent;
     outline: none;
     cursor: pointer;
+    transition: background .1s ease-out, border-color .1s ease-out;
 }
 
 #title:hover {
-    background: #ffffff;
-    border-color: #80808080;
+    background: var(--bg-3);
+    border-color: var(--fg-0);
 }
 
 #title:active,
 #title:focus {
-    background: #ffffff;
-    border-color: #808080;
+    background: var(--bg-3);
 }
 
 .release-title small {
@@ -75,19 +76,21 @@ input[type="text"] {
     width: 100%;
     margin: .5em 0;
     border-collapse: collapse;
+    color: var(--fg-2);
 }
 .release-info table td {
     padding: .2em;
-    border-bottom: 1px solid #d0d0d0;
+    border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 25%, transparent);
+    transition: background .1s ease-out, border-color .1s ease-out;
 }
 .release-info table tr td:first-child {
     vertical-align: top;
-    opacity: .66;
+    opacity: .5;
 }
 .release-info table tr td:not(:first-child) select:hover,
 .release-info table tr td:not(:first-child) input:hover,
 .release-info table tr td:not(:first-child) textarea:hover {
-    background: #e8e8e8;
+    background: var(--bg-3);
     cursor: pointer;
 }
 .release-info table td select,
@@ -117,11 +120,19 @@ input[type="text"] {
     justify-content: right;
 }
 
+.release-actions button,
+.release-actions .button {
+    color: var(--fg-2);
+    background: var(--bg-3);
+}
+
 dialog {
     width: min(720px, calc(100% - 2em));
     padding: 2em;
     border: 1px solid #101010;
-    border-radius: 8px;
+    border-radius: 16px;
+    color: var(--fg-0);
+    background: var(--bg-0);
 }
 
 dialog header {
@@ -160,9 +171,9 @@ dialog div.dialog-actions {
     align-items: center;
     gap: 1em;
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .card.credits .credit p {
@@ -170,10 +181,11 @@ dialog div.dialog-actions {
 }
 
 .card.credits .credit .artist-avatar {
-    border-radius: 8px;
+    border-radius: 12px;
 }
 
 .card.credits .credit .artist-name {
+    color: var(--fg-3);
     font-weight: bold;
 }
 
@@ -197,8 +209,8 @@ dialog div.dialog-actions {
     gap: 1em;
 
     border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 #editcredits .credit {
@@ -232,6 +244,7 @@ dialog div.dialog-actions {
     margin: 0;
     display: flex;
     align-items: center;
+    color: inherit;
 }
 
 #editcredits .credit .credit-info .credit-attribute input[type="text"] {
@@ -239,15 +252,17 @@ dialog div.dialog-actions {
     padding: .2em .4em;
     flex-grow: 1;
     font-family: inherit;
-    border: 1px solid #8888;
+    border: none;
     border-radius: 4px;
-    color: inherit;
+    color: var(--fg-2);
+    background: var(--bg-0);
 }
 #editcredits .credit .credit-info .credit-attribute input[type="checkbox"] {
     margin: 0 .3em;
 }
 
 #editcredits .credit .artist-name {
+    color: var(--fg-2);
     font-weight: bold;
 }
 
@@ -256,8 +271,12 @@ dialog div.dialog-actions {
     opacity: .66;
 }
 
-#editcredits .credit button.delete {
-    margin-left: auto;
+#editcredits .credit .delete {
+    margin-right: .5em;
+    cursor: pointer;
+}
+#editcredits .credit .delete:hover {
+    text-decoration: underline;
 }
 
 #addcredit ul {
@@ -400,9 +419,9 @@ dialog div.dialog-actions {
     flex-direction: column;
     gap: .5em;
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .card.tracks .track h3,
diff --git a/admin/static/edit-track.css b/admin/static/edit-track.css
index 600b680..1a9323f 100644
--- a/admin/static/edit-track.css
+++ b/admin/static/edit-track.css
@@ -11,9 +11,9 @@ h1 {
     flex-direction: row;
     gap: 1.2em;
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .track-info {
@@ -49,7 +49,8 @@ h1 {
     font-weight: inherit;
     font-family: inherit;
     font-size: inherit;
-    border: 1px solid transparent;
+    background: var(--bg-0);
+    border: none;
     border-radius: 4px;
     outline: none;
     color: inherit;
diff --git a/admin/static/index.css b/admin/static/index.css
index 9fcd731..278224e 100644
--- a/admin/static/index.css
+++ b/admin/static/index.css
@@ -7,13 +7,18 @@
     flex-direction: row;
     align-items: center;
     gap: .5em;
+    color: var(--fg-3);
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
+
+    transition: background .1s ease-out;
+    cursor: pointer;
 }
 
 .artist:hover {
+    background: var(--bg-1);
     text-decoration: hover;
 }
 
diff --git a/admin/static/index.js b/admin/static/index.js
index e251802..0091fa4 100644
--- a/admin/static/index.js
+++ b/admin/static/index.js
@@ -1,3 +1,5 @@
+import { hijackClickEvent } from "./admin.js";
+
 const newReleaseBtn = document.getElementById("create-release");
 const newArtistBtn = document.getElementById("create-artist");
 const newTrackBtn = document.getElementById("create-track");
@@ -72,3 +74,9 @@ newTrackBtn.addEventListener("click", event => {
         console.error(err);
     });
 });
+
+document.addEventListener("readystatechange", () => {
+    document.querySelectorAll(".card.artists .artist").forEach(el => {
+        hijackClickEvent(el, el.querySelector("a.artist-name"))
+    });
+});
diff --git a/admin/static/logs.css b/admin/static/logs.css
index f0df299..4a66038 100644
--- a/admin/static/logs.css
+++ b/admin/static/logs.css
@@ -2,8 +2,14 @@ main {
     width: min(1080px, calc(100% - 2em))!important
 }
 
-form {
+form#search-form {
+    width: calc(100% - 2em);
     margin: 1em 0;
+    padding: 1em;
+    border-radius: 16px;
+    color: var(--fg-0);
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 div#search {
@@ -12,24 +18,25 @@ div#search {
 
 #search input {
     margin: 0;
+    padding: .3em .8em;
     flex-grow: 1;
-
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border: none;
+    border-radius: 16px;
+    color: var(--fg-1);
+    background: var(--bg-0);
+    box-shadow: var(--shadow-sm);
 }
 
 #search button {
-    padding: 0 .5em;
-
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    margin-left: .5em;
+    padding: 0 .8em;
 }
 
 form #filters p {
     margin: .5em 0 0 0;
 }
 form #filters label {
+    color: inherit;
     display: inline;
 }
 form #filters input {
@@ -57,6 +64,10 @@ form #filters input {
     padding: .4em .8em;
 }
 
+#logs .log {
+    color: var(--fg-2);
+}
+
 td, th {
     width: 1%;
     text-align: left;
@@ -74,13 +85,14 @@ td.log-content {
     white-space: collapse;
 }
 
-.log:hover {
-    background: #fff8;
+#logs .log:hover {
+    background: color-mix(in srgb, var(--fg-3) 10%, transparent);
 }
 
-.log.warn {
-    background: #ffe86a;
+#logs .log.warn {
+    color: var(--col-on-warn);
+    background: var(--col-warn);
 }
-.log.warn:hover {
-    background: #ffec81;
+#logs .log.warn:hover {
+    background: var(--col-warn-hover);
 }
diff --git a/admin/static/release-list-item.css b/admin/static/release-list-item.css
index 638eac0..fb5d2d4 100644
--- a/admin/static/release-list-item.css
+++ b/admin/static/release-list-item.css
@@ -5,9 +5,9 @@
     flex-direction: row;
     gap: 1em;
 
-    border-radius: 8px;
-    background: #f8f8f8f8;
-    border: 1px solid #808080;
+    border-radius: 16px;
+    background: var(--bg-2);
+    box-shadow: var(--shadow-md);
 }
 
 .release h3,
@@ -16,11 +16,15 @@
 }
 
 .release-artwork {
+    margin: auto 0;
     width: 96px;
 
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: 4px;
+    overflow: hidden;
+    box-shadow: var(--shadow-sm);
 }
 
 .release-artwork img {
@@ -42,30 +46,9 @@
     gap: .5em;
 }
 
-.release-links li {
-    flex-grow: 1;
-}
-
-.release-links a {
-    padding: .5em;
-    display: block;
-
-    border-radius: 8px;
-    text-decoration: none;
-    color: #f0f0f0;
-    background: #303030;
-    text-align: center;
-
-    transition: color .1s, background .1s;
-}
-
-.release-links a:hover {
-    color: #303030;
-    background: #f0f0f0;
-}
-
 .release-actions {
     margin-top: .5em;
+    user-select: none;
 }
 
 .release-actions a {
@@ -74,14 +57,14 @@
     display: inline-block;
 
     border-radius: 4px;
-    background: #e0e0e0;
+    background: var(--bg-3);
+    box-shadow: var(--shadow-sm);
 
-    transition: color .1s, background .1s;
+    transition: color .1s ease-out, background .1s ease-out;
 }
 
 .release-actions a:hover {
-    color: #303030;
-    background: #f0f0f0;
-
+    background: var(--bg-0);
+    color: var(--fg-3);
     text-decoration: none;
 }
diff --git a/admin/templates/html/layout.html b/admin/templates/html/layout.html
index fdeda9b..4925ce9 100644
--- a/admin/templates/html/layout.html
+++ b/admin/templates/html/layout.html
@@ -16,10 +16,9 @@
     <body>
         <header>
             <nav>
-                <img src="/img/favicon.png" alt="" class="icon">
-                <div class="nav-item">
-                    <a href="/">ari melody</a>
-                </div>
+                <a href="/" class="nav icon" aria-label="ari melody" title="Return to Home">
+                    <img src="/img/favicon.png" alt="">
+                </a>
                 <div class="nav-item">
                     <a href="/admin">home</a>
                 </div>
diff --git a/admin/templates/html/logs.html b/admin/templates/html/logs.html
index e3a3ccb..94146a7 100644
--- a/admin/templates/html/logs.html
+++ b/admin/templates/html/logs.html
@@ -9,7 +9,7 @@
 <main>
     <h1>Audit Logs</h1>
 
-    <form action="/admin/logs" method="GET">
+    <form action="/admin/logs" method="GET" id="search-form">
         <div id="search">
             <input type="text" name="q" value="" placeholder="Filter by message...">
             <button type="submit" class="save">Search</button>