diff --git a/package-lock.json b/package-lock.json
index e1d14f69..3a370ad3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,18 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "2.4.1",
+      "version": "2.4.3",
       "license": "MIT",
       "dependencies": {
         "@11ty/eleventy-fetch": "4.0.1",
-        "@cdransf/api-text": "^1.7.0",
+        "@cdransf/api-text": "^1.8.0",
         "@cdransf/select-pagination": "^1.3.1",
-        "@cdransf/theme-toggle": "^3.2.0",
+        "@cdransf/theme-toggle": "^3.2.1",
         "@daviddarnes/mastodon-post": "^1.3.0",
         "http-proxy-middleware": "3.0.3",
         "minisearch": "^7.1.0",
@@ -22,7 +22,7 @@
         "@11ty/eleventy": "v3.0.0",
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@cdransf/eleventy-plugin-tabler-icons": "^2.1.0",
-        "@supabase/supabase-js": "^2.46.0",
+        "@supabase/supabase-js": "^2.46.1",
         "autoprefixer": "^10.4.20",
         "cssnano": "^7.0.6",
         "dotenv-flow": "^4.1.0",
@@ -392,9 +392,9 @@
       }
     },
     "node_modules/@cdransf/api-text": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@cdransf/api-text/-/api-text-1.7.0.tgz",
-      "integrity": "sha512-7UIi0sqXOEm/9GB3STi2fPbmJmoVLCuuuTatll59v+BSj/Q6Sbtk8vVlYVh+ofWhqZVUxSMXugkb8W/qMR7PVQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@cdransf/api-text/-/api-text-1.8.0.tgz",
+      "integrity": "sha512-CwhP9YU6Qeti9d/RAXM6wbg8Ybhq4VaRZD3PaJIuHvVyJ1Dn59FIOO5vybzb7WL/zYuRIzmwsDHp/Tmdk35aWQ==",
       "license": "MIT"
     },
     "node_modules/@cdransf/eleventy-plugin-tabler-icons": {
@@ -411,9 +411,9 @@
       "license": "MIT"
     },
     "node_modules/@cdransf/theme-toggle": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.2.0.tgz",
-      "integrity": "sha512-pr9tvk4PrFDaXjczYVTcXIIee+KJrLLzE0eumPG1v0RzmdYWue28XGmBvBndmr2dFRUurwcQUhdexSg7giHJrA==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@cdransf/theme-toggle/-/theme-toggle-3.2.1.tgz",
+      "integrity": "sha512-YJsnQNXJeaeZOWb4eKxmTbXxda9XBKHq/eQQ26IhVvZzTfZzVjG9ma5Fvq3Em4gwTHWCRnG+YU2M1eDnl6qTgw==",
       "license": "MIT"
     },
     "node_modules/@daviddarnes/mastodon-post": {
diff --git a/package.json b/package.json
index 9e9a9614..e874c82d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {
@@ -27,9 +27,9 @@
   "license": "MIT",
   "dependencies": {
     "@11ty/eleventy-fetch": "4.0.1",
-    "@cdransf/api-text": "^1.7.0",
+    "@cdransf/api-text": "^1.8.0",
     "@cdransf/select-pagination": "^1.3.1",
-    "@cdransf/theme-toggle": "^3.2.0",
+    "@cdransf/theme-toggle": "^3.2.1",
     "@daviddarnes/mastodon-post": "^1.3.0",
     "http-proxy-middleware": "3.0.3",
     "minisearch": "^7.1.0",
@@ -39,7 +39,7 @@
     "@11ty/eleventy": "v3.0.0",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@cdransf/eleventy-plugin-tabler-icons": "^2.1.0",
-    "@supabase/supabase-js": "^2.46.0",
+    "@supabase/supabase-js": "^2.46.1",
     "autoprefixer": "^10.4.20",
     "cssnano": "^7.0.6",
     "dotenv-flow": "^4.1.0",
diff --git a/src/includes/blocks/now-playing.liquid b/src/includes/blocks/now-playing.liquid
index 6b12f433..88f7b9f1 100644
--- a/src/includes/blocks/now-playing.liquid
+++ b/src/includes/blocks/now-playing.liquid
@@ -1,5 +1,10 @@
 <script type="module" src="/assets/scripts/components/api-text.js?v={% appVersion %}" crossorigin="anonymous"></script>
-<api-text api-url="/api/now-playing" display="inline" storage="local">
+<api-text
+  api-url="/api/now-playing"
+  display="inline"
+  storage="local"
+  transition-duration="10ms"
+>
   <span class="loading client-side">&nbsp;{{ nowPlaying }}</span>
   <span class="content"></span>
   <noscript>
diff --git a/src/layouts/base.liquid b/src/layouts/base.liquid
index 330117c3..aca63a1a 100644
--- a/src/layouts/base.liquid
+++ b/src/layouts/base.liquid
@@ -53,8 +53,13 @@
           document.querySelector("theme-toggle")?.getAttribute("storage") === "local"
             ? localStorage
             : sessionStorage;
+
         const currentTheme = storageType.getItem("theme") || "auto";
         const metaColorScheme = document.querySelector('meta[name="color-scheme"]');
+        const lightIcon = document.querySelector(".light");
+        const darkIcon = document.querySelector(".dark");
+        const autoIcon = document.querySelector(".auto");
+
         if (currentTheme === "auto") {
           metaColorScheme.setAttribute("content", "light dark");
           document.documentElement.style.colorScheme = "";
@@ -62,6 +67,18 @@
           metaColorScheme.setAttribute("content", currentTheme);
           document.documentElement.style.colorScheme = currentTheme;
         }
+
+        lightIcon.style.display = "none";
+        darkIcon.style.display = "none";
+        autoIcon.style.display = "none";
+
+        if (currentTheme === "light") {
+          lightIcon.style.display = "inline";
+        } else if (currentTheme === "dark") {
+          darkIcon.style.display = "inline";
+        } else {
+          autoIcon.style.display = "inline";
+        }
       })();
     </script>
     <div class="main-wrapper">