diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index df864b716..3710f2fd1 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -3,6 +3,7 @@
   "about": "About",
   "cancel": "Cancel",
   "close": "Close",
+  "back": "Back",
   "delete": "Delete",
   "ok": "OK",
   "edit": "Edit",
diff --git a/src/components/layout/Templates/MainLayout.tsx b/src/components/layout/Templates/MainLayout.tsx
index ac59e1825..4a648650c 100644
--- a/src/components/layout/Templates/MainLayout.tsx
+++ b/src/components/layout/Templates/MainLayout.tsx
@@ -4,10 +4,11 @@ import { MainHeader } from '~/components/layout/header/Header';
 type MainLayoutProps = {
   showExperimental?: boolean;
   headerActions?: React.ReactNode;
+  contentComponents?: React.ReactNode;
   children: React.ReactNode;
 };
 
-export const MainLayout = ({ showExperimental, headerActions, children }: MainLayoutProps) => {
+export const MainLayout = ({ showExperimental, headerActions, contentComponents, children }: MainLayoutProps) => {
   const theme = useMantineTheme();
 
   return (
@@ -17,7 +18,7 @@ export const MainLayout = ({ showExperimental, headerActions, children }: MainLa
           background: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
         },
       }}
-      header={<MainHeader headerActions={headerActions} showExperimental={showExperimental} />}
+      header={<MainHeader headerActions={headerActions} contentComponents={contentComponents} showExperimental={showExperimental} />}
       className="dashboard-app-shell"
     >
       {children}
diff --git a/src/components/layout/header/AvatarMenu.tsx b/src/components/layout/header/AvatarMenu.tsx
index 5f46a12ff..0b7ca94c2 100644
--- a/src/components/layout/header/AvatarMenu.tsx
+++ b/src/components/layout/header/AvatarMenu.tsx
@@ -41,13 +41,14 @@ export const AvatarMenu = () => {
             <CurrentUserAvatar user={sessionData?.user ?? null} />
           </Menu.Target>
           <Menu.Dropdown>
-            <Menu.Item icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
+            <Menu.Item closeMenuOnClick={false} icon={<Icon size="1rem" />} onClick={toggleColorScheme}>
               {t('actions.avatar.switchTheme')}
             </Menu.Item>
             {sessionData?.user && (
               <>
                 <Menu.Item
                   component={Link}
+                  passHref
                   href="/user/preferences"
                   icon={<IconUserCog size="1rem" />}
                 >
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index 5db422bfa..5ecd9256f 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -21,6 +21,7 @@ type MainHeaderProps = {
   logoHref?: string;
   showExperimental?: boolean;
   headerActions?: React.ReactNode;
+  contentComponents?: React.ReactNode;
   leftIcon?: React.ReactNode;
 };
 
@@ -29,6 +30,7 @@ export const MainHeader = ({
   logoHref = '/',
   headerActions,
   leftIcon,
+  contentComponents,
 }: MainHeaderProps) => {
   const { breakpoints } = useMantineTheme();
   const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
@@ -53,6 +55,7 @@ export const MainHeader = ({
 
         <Group noWrap style={{ flex: 1 }} position="right">
           <Group noWrap spacing={8}>
+            {contentComponents}
             {headerActions}
           </Group>
           <AvatarMenu />
diff --git a/src/pages/board/[slug]/customize.tsx b/src/pages/board/[slug]/customize.tsx
index fe60e9d99..6b23dce0e 100644
--- a/src/pages/board/[slug]/customize.tsx
+++ b/src/pages/board/[slug]/customize.tsx
@@ -134,7 +134,19 @@ export default function CustomizationPage() {
   })} • Homarr`;
 
   return (
-    <MainLayout>
+    <MainLayout
+      contentComponents={
+        <Button
+          component={Link}
+          passHref
+          href={backToBoardHref}
+          variant="light"
+          leftIcon={<IconArrowLeft size={16} />}
+        >
+          {t('backToBoard')}
+        </Button>
+      }
+    >
       <Head>
         <title>{metaTitle}</title>
       </Head>
@@ -191,14 +203,6 @@ export default function CustomizationPage() {
                   name: firstUpperCase(query.slug),
                 })}
               </Title>
-              <Button
-                component={Link}
-                href={backToBoardHref}
-                variant="light"
-                leftIcon={<IconArrowLeft size={16} />}
-              >
-                {t('backToBoard')}
-              </Button>
             </Group>
             <BoardCustomizationFormProvider form={form}>
               <Stack spacing="xl">
diff --git a/src/pages/user/preferences.tsx b/src/pages/user/preferences.tsx
index f2754c730..c6a12e897 100644
--- a/src/pages/user/preferences.tsx
+++ b/src/pages/user/preferences.tsx
@@ -10,6 +10,7 @@ import {
   Title,
 } from '@mantine/core';
 import { createFormContext } from '@mantine/form';
+import { IconArrowLeft } from '@tabler/icons-react';
 import { GetServerSideProps } from 'next';
 import { useTranslation } from 'next-i18next';
 import Head from 'next/head';
@@ -33,7 +34,14 @@ const PreferencesPage = () => {
   const headTitle = `${t('metaTitle')} • Homarr`;
 
   return (
-    <MainLayout showExperimental>
+    <MainLayout
+      showExperimental
+      contentComponents={
+        <Button component="a" href="/board/" variant="light" leftIcon={<IconArrowLeft size={16} />}>
+          {t('common:back')}
+        </Button>
+      }
+    >
       <Container>
         <Paper p="xl" mih="100%" withBorder>
           <Head>