diff --git a/src/components/themeManager/modeSwitcher.tsx b/src/components/themeManager/modeSwitcher.tsx
index 32859e5..8b1d905 100644
--- a/src/components/themeManager/modeSwitcher.tsx
+++ b/src/components/themeManager/modeSwitcher.tsx
@@ -4,12 +4,40 @@ import { capitalize } from "../../lib/text"
 import { themeState } from "./themeState"
 import { icons } from "../icons"
 import { styled } from "solid-styled-components"
+import { theme } from "../../theme"
 
 const Wrapper = styled(ButtonGroup)`
+  position: relative;
   width: max-content;
-  button {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  overflow: hidden;
+`
+
+const SwitcherButton = styled(Button)`
+  z-index: 2;
+  padding: 0.5rem 1rem 0.5rem 0.75rem;
+  align-items: center;
+  color: ${theme.fadeText};
+  iconify-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
+  span {
+    font-size: 1rem;
+  }
+  &.selected {
+    background: ${theme.surface};
+  }
+  @media (max-width: 768px) {
+    padding: 0.5rem 0.75rem;
+    iconify-icon {
+      width: 1.5rem;
+      height: 1.5rem;
+      font-size: 1.5rem;
+    }
+    span {
+      display: none;
+    }
   }
 `
 
@@ -20,17 +48,19 @@ const modeIcons = {
 }
 
 const ModeSwitcher = () => {
+  const modes = ['light', 'dark', 'auto'] as const
+
   return (
     <Wrapper>
-      <For each={['light', 'dark', 'auto'] as const}>
+      <For each={modes}>
         {(mode, i) => (
           <>
-            <Button
+            <SwitcherButton
               classList={{ selected: themeState.themeConfig.get().mode === mode }}
               onClick={() => themeState.changeMode(mode)}>
               <iconify-icon icon={modeIcons[mode]} />
-              {capitalize(mode)}
-            </Button>
+              <span>{capitalize(mode)}</span>
+            </SwitcherButton>
             <Show when={i() !== 2}>
               <GroupSeparator />
             </Show>