diff --git a/content-script.js b/content-script.js
index a3818b6..e7d7913 100644
--- a/content-script.js
+++ b/content-script.js
@@ -474,7 +474,8 @@
       action === "calendar-prev" ||
       action === "calendar-next" ||
       action === "calendar-today" ||
-      action === "toggle-sidebar"
+      action === "toggle-sidebar" ||
+      action === "toggle-theme"
     ) {
       return `[data-action="${action}"]`;
     }
@@ -530,9 +531,16 @@
               type="button"
               class="arch-panel-extension-theme-toggle"
               data-action="toggle-theme"
-              aria-label="Toggle dashboard theme"
+              aria-label="${appState.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}"
+              title="${appState.theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}"
             >
-              ${appState.theme === "dark" ? "Light mode" : "Dark mode"}
+              <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false">
+                ${
+                  appState.theme === "dark"
+                    ? `<path d="M10 2.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Zm0 3.5a4.25 4.25 0 1 0 0 8.5 4.25 4.25 0 0 0 0-8.5ZM4.47 3.97a.75.75 0 0 1 1.06 0l.71.71a.75.75 0 1 1-1.06 1.06l-.71-.71a.75.75 0 0 1 0-1.06Zm11.06 0a.75.75 0 0 1 0 1.06l-.71.71a.75.75 0 1 1-1.06-1.06l.71-.71a.75.75 0 0 1 1.06 0ZM2.25 10a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75Zm13 0a.75.75 0 0 1 .75-.75h1a.75.75 0 0 1 0 1.5h-1a.75.75 0 0 1-.75-.75ZM5.18 14.26a.75.75 0 0 1 1.06 1.06l-.71.71a.75.75 0 0 1-1.06-1.06l.71-.71Zm8.58 1.06a.75.75 0 0 1 1.06-1.06l.71.71a.75.75 0 0 1-1.06 1.06l-.71-.71ZM10 15.25a.75.75 0 0 1 .75.75v1a.75.75 0 0 1-1.5 0v-1a.75.75 0 0 1 .75-.75Z"></path>`
+                    : `<path d="M15.42 12.88a6.4 6.4 0 0 1-8.3-8.3.75.75 0 0 0-.88-.98 7.72 7.72 0 1 0 10.16 10.16.75.75 0 0 0-.98-.88Zm-5.7 2.89a6.22 6.22 0 0 1-4.36-10.66 7.9 7.9 0 0 0 9.53 9.53 6.2 6.2 0 0 1-5.17 1.13Z"></path>`
+                }
+              </svg>
             </button>
             <button
               type="button"
diff --git a/src/content/styles.css b/src/content/styles.css
index 7bb3211..b9f773a 100644
--- a/src/content/styles.css
+++ b/src/content/styles.css
@@ -222,8 +222,12 @@ body.arch-panel-extension-modal-open {
 
 .arch-panel-extension-theme-toggle {
   appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
   min-height: 34px;
-  padding: 0 14px;
+  padding: 0;
   border: 1px solid rgba(255, 255, 255, 0.28);
   border-radius: 4px;
   background: rgba(255, 255, 255, 0.12);
@@ -235,6 +239,13 @@ body.arch-panel-extension-modal-open {
   transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
 }
 
+.arch-panel-extension-theme-toggle svg {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+  pointer-events: none;
+}
+
 .arch-panel-extension-shell-header .arch-panel-extension-theme-toggle:hover {
   border-color: rgba(255, 255, 255, 0.44);
   background: rgba(255, 255, 255, 0.2);