diff --git a/app/frontend/Mail/LeftPane/ViewSwitcher.svelte b/app/frontend/Mail/LeftPane/ViewSwitcher.svelte
index 34f42d028..37c51ffd9 100644
--- a/app/frontend/Mail/LeftPane/ViewSwitcher.svelte
+++ b/app/frontend/Mail/LeftPane/ViewSwitcher.svelte
@@ -1,8 +1,8 @@
-<hbox class="buttons">
+<hbox class="buttons" class:large>
   <Button
     label={$t`Chat-like mail view`}
     icon={ChatIcon}
-    iconOnly
+    iconOnly={!large}
     iconSize="16px"
     plain
     onClick={() => switchTo('chat')}
@@ -12,7 +12,7 @@
     label={$t`Vertical view`}
     icon={VerticalIcon}
     classes="vertical"
-    iconOnly
+    iconOnly={!large}
     iconSize="16px"
     plain
     onClick={() => switchTo('vertical')}
@@ -21,7 +21,7 @@
   <Button
     label={$t`Classic 3-pane view`}
     icon={ThreePaneIcon}
-    iconOnly
+    iconOnly={!large}
     iconSize="16px"
     plain
     onClick={() => switchTo('3pane')}
@@ -38,6 +38,8 @@
   import ThreePaneIcon from "lucide-svelte/icons/layout-panel-left";
   import { t } from "../../../l10n/l10n";
 
+  export let large = false;
+
   let viewSetting = getLocalStorage("mail.view", "vertical");
   $: view = $viewSetting.value;
 
@@ -50,10 +52,21 @@
   .buttons :global(button) {
     padding: 4px;
   }
-  .buttons :global(.vertical) {
+  .buttons.large :global(button) {
+    padding: 8px;
+    margin-right: 12px;
+  }
+  .buttons :global(.vertical .icon) {
     color: transparent;
   }
   .buttons :global(svg) {
     fill: transparent;
   }
-</style>
+  @media (max-width: 800px)  {
+    .buttons.large {
+      flex-direction: column;
+      align-items: start;
+      justify-content: stretch;
+    }
+  }
+  </style>
diff --git a/app/frontend/Settings/Global/DarkMode.svelte b/app/frontend/Settings/Global/DarkMode.svelte
index fc1e42c13..d60047a41 100644
--- a/app/frontend/Settings/Global/DarkMode.svelte
+++ b/app/frontend/Settings/Global/DarkMode.svelte
@@ -2,7 +2,6 @@
   <Button
     label={$t`System`}
     icon={SystemIcon}
-    iconOnly
     iconSize="16px"
     plain
     onClick={() => switchTo('system')}
@@ -11,7 +10,6 @@
   <Button
     label={$t`Light`}
     icon={LightIcon}
-    iconOnly
     iconSize="16px"
     plain
     onClick={() => switchTo('light')}
@@ -21,7 +19,6 @@
     label={$t`Dark`}
     icon={DarkIcon}
     classes="vertical"
-    iconOnly
     iconSize="16px"
     plain
     onClick={() => switchTo('dark')}
@@ -47,6 +44,7 @@
 
 <style>
   .buttons :global(button) {
-    padding: 4px;
+    padding: 8px;
+    margin-right: 12px;
   }
 </style>
diff --git a/app/frontend/Settings/Mail/Appearance.svelte b/app/frontend/Settings/Mail/Appearance.svelte
index 0b858eab6..285939f0a 100644
--- a/app/frontend/Settings/Mail/Appearance.svelte
+++ b/app/frontend/Settings/Mail/Appearance.svelte
@@ -1,9 +1,14 @@
 <vbox class="view-switcher">
-  <ViewSwitcher />
+  <HeaderGroupBox>
+    <hbox slot="header">{$t`Mail app view`}</hbox>
+    <ViewSwitcher large={true} />
+  </HeaderGroupBox>
 </vbox>
 
 <script lang="ts">
+  import { t } from "../../../l10n/l10n";
   import ViewSwitcher from "../../Mail/LeftPane/ViewSwitcher.svelte";
+  import HeaderGroupBox from "../../Shared/HeaderGroupBox.svelte";
 </script>
 
 <style>