diff --git a/app/assets/images/monitor.svg b/app/assets/images/monitor.svg
new file mode 100644
index 000000000..a1140a2a8
--- /dev/null
+++ b/app/assets/images/monitor.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 3H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h5v2H7v2h10v-2h-2v-2h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12H4V5h16v10z"/></svg>
diff --git a/app/assets/images/moon.svg b/app/assets/images/moon.svg
new file mode 100644
index 000000000..8db6c1b09
--- /dev/null
+++ b/app/assets/images/moon.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.64 13.24A9 9 0 1 1 10.76 2.36a9.07 9.07 0 0 0 10.88 10.88z"/></svg>
diff --git a/app/assets/images/sun.svg b/app/assets/images/sun.svg
new file mode 100644
index 000000000..6dd6e54c8
--- /dev/null
+++ b/app/assets/images/sun.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
diff --git a/app/assets/stylesheets/icons.css b/app/assets/stylesheets/icons.css
index 8e9f19e89..2e269b9d0 100644
--- a/app/assets/stylesheets/icons.css
+++ b/app/assets/stylesheets/icons.css
@@ -72,6 +72,8 @@
   .icon--menu-dots-horizontal { --svg: url("menu-dots-horizontal.svg "); }
   .icon--menu-dots-vertical { --svg: url("menu-dots-vertical.svg "); }
   .icon--minus { --svg: url("minus.svg "); }
+  .icon--monitor { --svg: url("monitor.svg "); }
+  .icon--moon { --svg: url("moon.svg "); }
   .icon--move { --svg: url("move.svg "); }
   .icon--notification-bell-access-only { --svg: url("bell.svg "); }
   .icon--notification-bell-watching { --svg: url("bell-off.svg "); }
@@ -96,6 +98,7 @@
   .icon--settings { --svg: url("settings.svg "); }
   .icon--share { --svg: url("share.svg "); }
   .icon--sliders { --svg: url("sliders.svg "); }
+  .icon--sun { --svg: url("sun.svg "); }
   .icon--switch { --svg: url("switch.svg "); }
   .icon--tag { --svg: url("tag.svg "); }
   .icon--tag-outline { --svg: url("tag-outline.svg "); }
diff --git a/app/assets/stylesheets/theme-switcher.css b/app/assets/stylesheets/theme-switcher.css
new file mode 100644
index 000000000..1e35ca990
--- /dev/null
+++ b/app/assets/stylesheets/theme-switcher.css
@@ -0,0 +1,67 @@
+@layer components {
+  .theme-switcher {
+    --gap: 8px;
+
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--gap);
+    inline-size: 100%;
+    justify-content: center;
+    margin: 1rem auto;
+    max-inline-size: 100%;
+  }
+
+  .theme-switcher__btn {
+    --btn-border-radius: 0.4em;
+
+    align-items: center;
+    aspect-ratio: 5/3;
+    background-color: var(--color-ink-lightest);
+    border: none;
+    border-radius: 0.5em;
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    flex-basis: calc((100% - var(--gap) * 2) / 3);
+    flex-direction: column;
+    font-size: var(--text-small);
+    line-height: 1;
+    justify-content: center;
+    overflow: hidden;
+    padding: 0.5em;
+    position: relative;
+    row-gap: 0.3lh;
+    text-align: center;
+
+    .icon {
+      --icon-size: 2em;
+    }
+
+    span {
+      display: block;
+      text-wrap: nowrap;
+    }
+
+    @media (max-width: 639px) {
+      font-size: var(--text-x-small);
+      font-weight: 500;
+    }
+
+    @media (any-hover: hover) {
+      &:hover {
+        background-color: var(--color-ink-lighter);
+      }
+    }
+
+    &[aria-selected="true"] {
+      background-color: var(--color-selected);
+
+      @media (any-hover: hover) {
+        &:hover {
+          background-color: var(--color-selected);
+        }
+      }
+    }
+  }
+}
diff --git a/app/views/users/_theme.html.erb b/app/views/users/_theme.html.erb
index 86cf694e2..ce4e91429 100644
--- a/app/views/users/_theme.html.erb
+++ b/app/views/users/_theme.html.erb
@@ -1,35 +1,19 @@
 <div class="flex flex-column align-center gap txt-medium--responsive txt-medium margin-block-start-double">
   <strong class="txt-medium">Appearance</strong>
 
-  <div class="nav__hotkeys" role="list" style="margin: 1rem auto;">
-    <button type="button" class="popup__item btn borderless" data-action="click->theme#setLight" data-theme-target="lightBtn" role="listitem">
-      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <circle cx="12" cy="12" r="5"/>
-        <line x1="12" y1="1" x2="12" y2="3"/>
-        <line x1="12" y1="21" x2="12" y2="23"/>
-        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
-        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
-        <line x1="1" y1="12" x2="3" y2="12"/>
-        <line x1="21" y1="12" x2="23" y2="12"/>
-        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
-        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
-      </svg>
+  <div class="theme-switcher">
+    <button type="button" class="theme-switcher__btn" data-action="click->theme#setLight" data-theme-target="lightBtn">
+      <%= icon_tag "sun" %>
       <span>Always light</span>
     </button>
 
-    <button type="button" class="popup__item btn borderless" data-action="click->theme#setDark" data-theme-target="darkBtn" role="listitem">
-      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
-      </svg>
+    <button type="button" class="theme-switcher__btn" data-action="click->theme#setDark" data-theme-target="darkBtn">
+      <%= icon_tag "moon" %>
       <span>Always dark</span>
     </button>
 
-    <button type="button" class="popup__item btn borderless" data-action="click->theme#setAuto" data-theme-target="autoBtn" role="listitem">
-      <svg xmlns="http://www.w3.org/2000/svg" style="width: 2em; height: 2em;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-        <line x1="8" y1="21" x2="16" y2="21"/>
-        <line x1="12" y1="17" x2="12" y2="21"/>
-      </svg>
+    <button type="button" class="theme-switcher__btn" data-action="click->theme#setAuto" data-theme-target="autoBtn">
+      <%= icon_tag "monitor" %>
       <span>Same as OS</span>
     </button>
   </div>