diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 573ed5a69d..7b6a16c753 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1231,8 +1231,8 @@
     "edited_notes_message": "Edited Notes ribbon tab will automatically open on day notes"
   },
   "theme": {
-    "title": "Application Theme",
-    "theme_label": "Theme",
+    "title": "User Interface",
+    "theme_label": "Application theme",
     "override_theme_fonts_label": "Override theme fonts",
     "auto_theme": "Legacy (Follow system color scheme)",
     "light_theme": "Legacy (Light)",
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 591b329d20..c6de5ff760 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -93,8 +93,7 @@ const FONT_FAMILIES: FontGroup[] = [
 export default function AppearanceSettings() {
     return (
         <div>
-            {!isMobile() && <LayoutOptions />}
-            <ApplicationTheme />
+            <UserInterface />
             <Fonts />
             {isElectron() && <ElectronIntegration /> }
             <Performance />
@@ -114,35 +113,54 @@ export default function AppearanceSettings() {
     );
 }
 
-function LayoutOptions() {
+function UserInterface() {
+    const [ theme, setTheme ] = useTriliumOption("theme", true);
+    const [ themes, setThemes ] = useState<Theme[]>([]);
     const [ newLayout, setNewLayout ] = useTriliumOptionBool("newLayout");
     const [ layoutOrientation, setLayoutOrientation ] = useTriliumOption("layoutOrientation", true);
 
+    useEffect(() => {
+        server.get<Theme[]>("options/user-themes").then((userThemes) => {
+            setThemes([
+                ...BUILTIN_THEMES,
+                ...userThemes
+            ]);
+        });
+    }, []);
+
     return (
-        <OptionsSection title={t("settings_appearance.ui")}>
-            <OptionsRow name="layout-style" label={t("settings_appearance.ui_layout_style")}>
-                <RadioWithIllustration
-                    currentValue={newLayout ? "new-layout" : "old-layout"}
-                    onChange={async newValue => {
-                        await setNewLayout(newValue === "new-layout");
-                        reloadFrontendApp();
-                    }}
-                    values={[
-                        { key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
-                        { key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
-                    ]}
-                />
-            </OptionsRow>
-            <OptionsRow name="layout-orientation" label={t("settings_appearance.ui_layout_orientation")}>
-                <RadioWithIllustration
-                    currentValue={layoutOrientation ?? "vertical"}
-                    onChange={setLayoutOrientation}
-                    values={[
-                        { key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
-                        { key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
-                    ]}
+        <OptionsSection title={t("theme.title")}>
+            <OptionsRow name="theme" label={t("theme.theme_label")}>
+                <FormSelect
+                    values={themes} currentValue={theme} onChange={setTheme}
+                    keyProperty="val" titleProperty="title"
                 />
             </OptionsRow>
+            {!isMobile() && <>
+                <OptionsRow name="layout-style" label={t("settings_appearance.ui_layout_style")}>
+                    <RadioWithIllustration
+                        currentValue={newLayout ? "new-layout" : "old-layout"}
+                        onChange={async newValue => {
+                            await setNewLayout(newValue === "new-layout");
+                            reloadFrontendApp();
+                        }}
+                        values={[
+                            { key: "old-layout", text: t("settings_appearance.ui_old_layout"), illustration: <LayoutIllustration /> },
+                            { key: "new-layout", text: t("settings_appearance.ui_new_layout"), illustration: <LayoutIllustration isNewLayout /> }
+                        ]}
+                    />
+                </OptionsRow>
+                <OptionsRow name="layout-orientation" label={t("settings_appearance.ui_layout_orientation")}>
+                    <RadioWithIllustration
+                        currentValue={layoutOrientation ?? "vertical"}
+                        onChange={setLayoutOrientation}
+                        values={[
+                            { key: "vertical", text: t("theme.layout-vertical-title"), illustration: <OrientationIllustration orientation="vertical" /> },
+                            { key: "horizontal", text: t("theme.layout-horizontal-title"), illustration: <OrientationIllustration orientation="horizontal" /> }
+                        ]}
+                    />
+                </OptionsRow>
+            </>}
         </OptionsSection>
     );
 }
@@ -286,31 +304,6 @@ function OrientationIllustration({ orientation }: { orientation: "vertical" | "h
     );
 }
 
-function ApplicationTheme() {
-    const [ theme, setTheme ] = useTriliumOption("theme", true);
-    const [ themes, setThemes ] = useState<Theme[]>([]);
-
-    useEffect(() => {
-        server.get<Theme[]>("options/user-themes").then((userThemes) => {
-            setThemes([
-                ...BUILTIN_THEMES,
-                ...userThemes
-            ]);
-        });
-    }, []);
-
-    return (
-        <OptionsSection title={t("theme.title")}>
-            <FormGroup name="theme" label={t("theme.theme_label")} className="col-md-6">
-                <FormSelect
-                    values={themes} currentValue={theme} onChange={setTheme}
-                    keyProperty="val" titleProperty="title"
-                />
-            </FormGroup>
-        </OptionsSection>
-    );
-}
-
 function Fonts() {
     const [ overrideThemeFonts, setOverrideThemeFonts ] = useTriliumOptionBool("overrideThemeFonts");
     const isEnabled = overrideThemeFonts === true;