💄 Polish layouts

2025-11-06 21:45:47 +01:00 · 2023-08-01 01:13:21 +02:00
parent fff6e6c077
commit df890b8c0a
30 changed files with 556 additions and 1345 deletions
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,31 +0,0 @@
-import { AppShell, createStyles } from '@mantine/core';
-
-import { useConfigContext } from '../../config/provider';
-import { Background } from './Background';
-import { Head } from './Meta/Head';
-import { Header } from './header/Header';
-
-const useStyles = createStyles(() => ({}));
-
-export default function Layout({ children }: any) {
-  const { cx } = useStyles();
-  const { config } = useConfigContext();
-
-  return (
-    <AppShell
-      fixed={false}
-      header={<Header />}
-      styles={{
-        main: {
-          minHeight: 'calc(100vh - var(--mantine-header-height))',
-        },
-      }}
-      className="dashboard-app-shell"
-    >
-      <Head />
-      <Background />
-      {children}
-      <style>{cx(config?.settings.customization.customCss)}</style>
-    </AppShell>
-  );
-}
--- a/src/components/layout/Templates/BoardLayout.tsx
+++ b/src/components/layout/Templates/BoardLayout.tsx
@@ -0,0 +1,196 @@
+import { Button, Text, Title, Tooltip, clsx } from '@mantine/core';
+import { useHotkeys, useWindowEvent } from '@mantine/hooks';
+import { openContextModal } from '@mantine/modals';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import {
+  IconApps,
+  IconBrandDocker,
+  IconEditCircle,
+  IconEditCircleOff,
+  IconSettings,
+} from '@tabler/icons-react';
+import Consola from 'consola';
+import { useSession } from 'next-auth/react';
+import { Trans, useTranslation } from 'next-i18next';
+import Link from 'next/link';
+import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
+import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
+import { useConfigContext } from '~/config/provider';
+import { env } from '~/env';
+import { api } from '~/utils/api';
+
+import { Background } from '../Background';
+import { HeaderActionButton } from '../Header/ActionButton';
+import { MainLayout } from './MainLayout';
+
+type BoardLayoutProps = {
+  children: React.ReactNode;
+};
+
+export const BoardLayout = ({ children }: BoardLayoutProps) => {
+  const { config } = useConfigContext();
+
+  return (
+    <MainLayout headerActions={<HeaderActions />}>
+      <Background />
+      {children}
+      <style>{clsx(config?.settings.customization.customCss)}</style>
+    </MainLayout>
+  );
+};
+
+export const HeaderActions = () => {
+  const { data: sessionData } = useSession();
+
+  if (!sessionData?.user?.isAdmin) return null;
+
+  return (
+    <>
+      {env.NEXT_PUBLIC_DOCKER_ENABLED && <DockerButton />}
+      <ToggleEditModeButton />
+      <CustomizeBoardButton />
+    </>
+  );
+};
+
+const DockerButton = () => {
+  const { t } = useTranslation('modules/docker');
+
+  return (
+    <Tooltip label={t('actionIcon.tooltip')}>
+      <HeaderActionButton component={Link} href="/docker">
+        <IconBrandDocker size={20} stroke={1.5} />
+      </HeaderActionButton>
+    </Tooltip>
+  );
+};
+
+const CustomizeBoardButton = () => {
+  const { name } = useConfigContext();
+
+  return (
+    <Tooltip label="Customize board">
+      <HeaderActionButton component={Link} href={`/board/${name}/customize`}>
+        <IconSettings size={20} stroke={1.5} />
+      </HeaderActionButton>
+    </Tooltip>
+  );
+};
+
+const beforeUnloadEventText = 'Exit the edit mode to save your changes';
+const editModeNotificationId = 'toggle-edit-mode';
+
+const ToggleEditModeButton = () => {
+  const { enabled, toggleEditMode } = useEditModeStore();
+  const { config, name: configName } = useConfigContext();
+  const { mutateAsync: saveConfig } = api.config.save.useMutation();
+  const namedWrapperColumnCount = useNamedWrapperColumnCount();
+  const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
+  const translatedSize =
+    namedWrapperColumnCount !== null
+      ? t(`common:breakPoints.${namedWrapperColumnCount}`)
+      : t('common:loading');
+
+  useHotkeys([['mod+E', toggleEditMode]]);
+
+  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
+    if (enabled) {
+      // eslint-disable-next-line no-param-reassign
+      event.returnValue = beforeUnloadEventText;
+      return beforeUnloadEventText;
+    }
+
+    return undefined;
+  });
+
+  const save = async () => {
+    toggleEditMode();
+    if (!config || !configName) return;
+    await saveConfig({ name: configName, config });
+    Consola.log('Saved config to server', configName);
+    hideNotification(editModeNotificationId);
+  };
+
+  const enableEditMode = () => {
+    toggleEditMode();
+    showNotification({
+      styles: (theme) => ({
+        root: {
+          backgroundColor: theme.colors.orange[7],
+          borderColor: theme.colors.orange[7],
+
+          '&::before': { backgroundColor: theme.white },
+        },
+        title: { color: theme.white },
+        description: { color: theme.white },
+        closeButton: {
+          color: theme.white,
+          '&:hover': { backgroundColor: theme.colors.orange[7] },
+        },
+      }),
+      radius: 'md',
+      id: 'toggle-edit-mode',
+      autoClose: 10000,
+      title: (
+        <Title order={4}>
+          <Trans
+            i18nKey="layout/header/actions/toggle-edit-mode:popover.title"
+            values={{ size: translatedSize }}
+            components={{
+              1: (
+                <Text
+                  component="a"
+                  style={{ color: 'inherit', textDecoration: 'underline' }}
+                  href="https://homarr.dev/docs/customizations/layout"
+                  target="_blank"
+                />
+              ),
+            }}
+          />
+        </Title>
+      ),
+      message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
+    });
+  };
+
+  if (enabled) {
+    return (
+      <Button.Group>
+        <Tooltip label={t('button.disabled')}>
+          <HeaderActionButton onClick={save}>
+            <IconEditCircleOff size={20} stroke={1.5} />
+          </HeaderActionButton>
+        </Tooltip>
+        <AddElementButton />
+      </Button.Group>
+    );
+  }
+  return (
+    <Tooltip label={t('button.disabled')}>
+      <HeaderActionButton onClick={enableEditMode}>
+        <IconEditCircle size={20} stroke={1.5} />
+      </HeaderActionButton>
+    </Tooltip>
+  );
+};
+
+const AddElementButton = () => {
+  const { t } = useTranslation('layout/element-selector/selector');
+
+  return (
+    <Tooltip label={t('actionIcon.tooltip')}>
+      <HeaderActionButton
+        onClick={() =>
+          openContextModal({
+            modal: 'selectElement',
+            title: t('modal.title'),
+            size: 'xl',
+            innerProps: {},
+          })
+        }
+      >
+        <IconApps size={20} stroke={1.5} />
+      </HeaderActionButton>
+    </Tooltip>
+  );
+};
--- a/src/components/layout/Templates/MainLayout.tsx
+++ b/src/components/layout/Templates/MainLayout.tsx
@@ -1,9 +1,7 @@
-import { AppShell, clsx, useMantineTheme } from '@mantine/core';
-import { useConfigContext } from '~/config/provider';
+import { AppShell, useMantineTheme } from '@mantine/core';

-import { Background } from './Background';
-import { Head } from './Meta/Head';
-import { MainHeader } from './new-header/Header';
+import { MainHeader } from '../Header/Header';
+import { Head } from '../Meta/Head';

 type MainLayoutProps = {
  headerActions?: React.ReactNode;
@@ -11,7 +9,6 @@ type MainLayoutProps = {
 };

 export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
-  const { config } = useConfigContext();
  const theme = useMantineTheme();

  return (
@@ -25,9 +22,7 @@ export const MainLayout = ({ headerActions, children }: MainLayoutProps) => {
      className="dashboard-app-shell"
    >
      <Head />
-      <Background />
      {children}
-      <style>{clsx(config?.settings.customization.customCss)}</style>
    </AppShell>
  );
 };
--- a/src/components/layout/admin/main-admin.layout.tsx
+++ b/src/components/layout/admin/main-admin.layout.tsx
@@ -1,61 +1,45 @@
 import {
  AppShell,
-  Avatar,
-  Box,
  Burger,
  Drawer,
  Flex,
  Footer,
  Group,
-  Header,
-  Menu,
  NavLink,
  Navbar,
  Paper,
  Text,
-  TextInput,
  ThemeIcon,
-  UnstyledButton,
  useMantineTheme,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
-  IconAlertTriangle,
  IconBook2,
  IconBrandDiscord,
  IconBrandGithub,
-  IconDashboard,
  IconGitFork,
  IconHome,
  IconLayoutDashboard,
-  IconLogout,
  IconMailForward,
  IconQuestionMark,
  IconSettings2,
-  IconSun,
  IconUser,
-  IconUserSearch,
  IconUsers,
 } from '@tabler/icons-react';
-import { signOut } from 'next-auth/react';
-import { useTranslation } from 'next-i18next';
-import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { ReactNode } from 'react';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';

-import { Logo } from '../Logo';
+import { MainHeader } from '../Header/Header';
 import { CommonHeader } from '../common-header';
-import { MainHeader } from '../new-header/Header';

-interface MainLayoutProps {
+interface ManageLayoutProps {
  children: ReactNode;
 }

-export const MainLayout = ({ children }: MainLayoutProps) => {
-  const { t } = useTranslation();
+export const ManageLayout = ({ children }: ManageLayoutProps) => {
  const { attributes } = usePackageAttributesStore();
  const theme = useMantineTheme();

@@ -153,7 +137,9 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
    </>
  );

-  const burgerMenu = screenLargerThanMd ? undefined : <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />;
+  const burgerMenu = screenLargerThanMd ? undefined : (
+    <Burger opened={burgerMenuOpen} onClick={toggleBurgerMenu} />
+  );

  return (
    <>
@@ -171,13 +157,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
            </Navbar.Section>
          </Navbar>
        }
-        header={
-          <MainHeader
-            showExperimental
-            logoHref="/manage"
-            leftIcon={burgerMenu}
-          />
-        }
+        header={<MainHeader showExperimental logoHref="/manage" leftIcon={burgerMenu} />}
        footer={
          <Footer height={25}>
            <Group position="apart" px="md">
--- a/src/components/layout/header/ActionButton.tsx
+++ b/src/components/layout/header/ActionButton.tsx
@@ -0,0 +1,50 @@
+import { Button, ButtonProps } from '@mantine/core';
+import Link from 'next/link';
+import { ForwardedRef, forwardRef } from 'react';
+
+import { useCardStyles } from '../useCardStyles';
+
+type SpecificLinkProps = {
+  component: typeof Link;
+  href: string;
+};
+type SpecificButtonProps = {
+  onClick: HTMLButtonElement['onclick'];
+};
+type HeaderActionButtonProps = Omit<ButtonProps, 'variant' | 'className' | 'h' | 'w' | 'px'> &
+  (SpecificLinkProps | SpecificButtonProps);
+
+export const HeaderActionButton = forwardRef<
+  HTMLButtonElement | HTMLAnchorElement,
+  HeaderActionButtonProps
+>(({ children, ...props }, ref) => {
+  const { classes } = useCardStyles(true);
+
+  const buttonProps: ButtonProps = {
+    variant: 'default',
+    className: classes.card,
+    h: 38,
+    w: 38,
+    px: 0,
+    ...props,
+  };
+
+  if ('component' in props) {
+    return (
+      <Button
+        ref={ref as ForwardedRef<HTMLAnchorElement>}
+        component={props.component}
+        href={props.href}
+        {...buttonProps}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  return (
+    <Button ref={ref as ForwardedRef<HTMLButtonElement>} {...buttonProps}>
+      {children}
+    </Button>
+  );
+});
--- a/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
+++ b/src/components/layout/header/Actions/AddElementAction/AddElementAction.tsx
@@ -1,62 +0,0 @@
-import { ActionIcon, Button, Tooltip } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
-import { IconApps } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-
-import { useCardStyles } from '../../../useCardStyles';
-
-interface AddElementActionProps {
-  type: 'action-icon' | 'button';
-}
-
-export const AddElementAction = ({ type }: AddElementActionProps) => {
-  const { t } = useTranslation('layout/element-selector/selector');
-  const { classes } = useCardStyles(true);
-
-  switch (type) {
-    case 'button':
-      return (
-        <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
-          <Button
-            radius="md"
-            variant="default"
-            style={{ height: 43 }}
-            className={classes.card}
-            onClick={() =>
-              openContextModal({
-                modal: 'selectElement',
-                title: t('modal.title'),
-                size: 'xl',
-                innerProps: {},
-              })
-            }
-          >
-            <IconApps />
-          </Button>
-        </Tooltip>
-      );
-    case 'action-icon':
-      return (
-        <Tooltip label={t('actionIcon.tooltip')} withinPortal withArrow>
-          <ActionIcon
-            variant="default"
-            radius="md"
-            size="xl"
-            color="blue"
-            onClick={() =>
-              openContextModal({
-                modal: 'selectElement',
-                title: t('modal.title'),
-                size: 'xl',
-                innerProps: {},
-              })
-            }
-          >
-            <IconApps />
-          </ActionIcon>
-        </Tooltip>
-      );
-    default:
-      return null;
-  }
-};
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
@@ -1,145 +0,0 @@
-import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
-import { useHotkeys, useWindowEvent } from '@mantine/hooks';
-import { hideNotification, showNotification } from '@mantine/notifications';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons-react';
-import Consola from 'consola';
-import { getCookie } from 'cookies-next';
-import { Trans, useTranslation } from 'next-i18next';
-import { api } from '~/utils/api';
-
-import { useConfigContext } from '../../../../../config/provider';
-import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
-import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
-import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
-import { useCardStyles } from '../../../useCardStyles';
-import { AddElementAction } from '../AddElementAction/AddElementAction';
-
-const beforeUnloadEventText = 'Exit the edit mode to save your changes';
-
-export const ToggleEditModeAction = () => {
-  const { enabled, toggleEditMode } = useEditModeStore();
-  const namedWrapperColumnCount = useNamedWrapperColumnCount();
-  const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
-  const translatedSize =
-    namedWrapperColumnCount !== null
-      ? t(`common:breakPoints.${namedWrapperColumnCount}`)
-      : t('common:loading');
-
-  const smallerThanSm = useScreenSmallerThan('sm');
-  const { config } = useConfigContext();
-  const { classes } = useCardStyles(true);
-  const { mutateAsync: saveConfig } = api.config.save.useMutation();
-
-  useHotkeys([['mod+E', toggleEditMode]]);
-
-  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
-    if (enabled) {
-      // eslint-disable-next-line no-param-reassign
-      event.returnValue = beforeUnloadEventText;
-      return beforeUnloadEventText;
-    }
-
-    return undefined;
-  });
-
-  const toggleButtonClicked = async () => {
-    toggleEditMode();
-    if (config === undefined || config?.schemaVersion === undefined) return;
-    if (enabled) {
-      const configName = getCookie('config-name')?.toString() ?? 'default';
-      await saveConfig({ name: configName, config });
-      Consola.log('Saved config to server', configName);
-      hideNotification('toggle-edit-mode');
-    } else if (!enabled) {
-      showNotification({
-        styles: (theme) => ({
-          root: {
-            backgroundColor: theme.colors.orange[7],
-            borderColor: theme.colors.orange[7],
-
-            '&::before': { backgroundColor: theme.white },
-          },
-          title: { color: theme.white },
-          description: { color: theme.white },
-          closeButton: {
-            color: theme.white,
-            '&:hover': { backgroundColor: theme.colors.orange[7] },
-          },
-        }),
-        radius: 'md',
-        id: 'toggle-edit-mode',
-        autoClose: 10000,
-        title: (
-          <Title order={4}>
-            <Trans
-              i18nKey="layout/header/actions/toggle-edit-mode:popover.title"
-              values={{ size: translatedSize }}
-              components={{
-                1: (
-                  <Text
-                    component="a"
-                    style={{ color: 'inherit', textDecoration: 'underline' }}
-                    href="https://homarr.dev/docs/customizations/layout"
-                    target="_blank"
-                  />
-                ),
-              }}
-            />
-          </Title>
-        ),
-        message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
-      });
-    } else {
-      hideNotification('toggle-edit-mode');
-    }
-  };
-
-  const ToggleButtonDesktop = () => (
-    <Tooltip label={enabled ? t('button.enabled') : t('button.disabled')}>
-      <Button
-        className={classes.card}
-        onClick={() => toggleButtonClicked()}
-        radius="md"
-        variant="default"
-        style={{ height: 43 }}
-      >
-        {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-      </Button>
-    </Tooltip>
-  );
-
-  const ToggleActionIconMobile = () => (
-    <ActionIcon
-      className={classes.card}
-      onClick={() => toggleButtonClicked()}
-      variant="default"
-      radius="md"
-      size="xl"
-      color="blue"
-    >
-      {enabled ? <IconEditCircleOff /> : <IconEditCircle />}
-    </ActionIcon>
-  );
-
-  return (
-    <>
-      {smallerThanSm ? (
-        enabled ? (
-          <Group style={{ flexWrap: 'nowrap' }}>
-            <AddElementAction type="action-icon" />
-            <ToggleActionIconMobile />
-          </Group>
-        ) : (
-          <ToggleActionIconMobile />
-        )
-      ) : enabled ? (
-        <Button.Group>
-          <ToggleButtonDesktop />
-          {enabled && <AddElementAction type="button" />}
-        </Button.Group>
-      ) : (
-        <ToggleButtonDesktop />
-      )}
-    </>
-  );
-};
--- a/src/components/layout/new-header/AvatarMenu.tsx
+++ b/src/components/layout/new-header/AvatarMenu.tsx
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,72 +1,89 @@
-import { Box, Group, Indicator, Header as MantineHeader, createStyles } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
-import { useSession } from 'next-auth/react';
+import {
+  Box,
+  Center,
+  Flex,
+  Group,
+  Header,
+  Text,
+  UnstyledButton,
+  useMantineTheme,
+} from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+import { IconAlertTriangle } from '@tabler/icons-react';
+import Link from 'next/link';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';

-import { REPO_URL } from '../../../../data/constants';
-import DockerMenuButton from '../../../modules/Docker/DockerModule';
-import { usePackageAttributesStore } from '../../../tools/client/zustands/usePackageAttributesStore';
 import { Logo } from '../Logo';
-import { useCardStyles } from '../useCardStyles';
-import { ToggleEditModeAction } from './Actions/ToggleEditMode/ToggleEditMode';
-import { Search } from './Search';
-import { SettingsMenu } from './SettingsMenu';
+import { AvatarMenu } from './AvatarMenu';
+import { Search } from './search';

-export const HeaderHeight = 64;
+type MainHeaderProps = {
+  logoHref?: string;
+  showExperimental?: boolean;
+  headerActions?: React.ReactNode;
+  leftIcon?: React.ReactNode;
+};

-export function Header(props: any) {
-  const { classes } = useStyles();
-  const { classes: cardClasses, cx } = useCardStyles(false);
-  const { attributes } = usePackageAttributesStore();
-  const { data: sessionData } = useSession();
-
-  const { data } = useQuery({
-    queryKey: ['github/latest'],
-    cacheTime: 1000 * 60 * 60 * 24,
-    staleTime: 1000 * 60 * 60 * 5,
-    queryFn: () =>
-      fetch(`https://api.github.com/repos/${REPO_URL}/releases/latest`).then((res) => res.json()),
-  });
-  const newVersionAvailable =
-    data?.tag_name > `v${attributes.packageVersion}` ? data?.tag_name : undefined;
+export const MainHeader = ({
+  showExperimental = false,
+  logoHref = '/',
+  headerActions,
+  leftIcon,
+}: MainHeaderProps) => {
+  const { breakpoints } = useMantineTheme();
+  const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
+  const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30;
+  const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
+  const headerHeight = showExperimental
+    ? headerBaseHeight + experimentalHeaderNoteHeight
+    : headerBaseHeight;

  return (
-    <MantineHeader height="auto" className={cx(cardClasses.card, 'dashboard-header')}>
-      <Group p="xs" noWrap grow>
-        <Box className={cx(classes.hide, 'dashboard-header-logo-root')}>
+    <Header height={headerHeight} pb="sm" pt={0}>
+      <ExperimentalHeaderNote visible={showExperimental} height={experimentalHeaderNoteHeight} />
+      <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
+        <Group noWrap style={{ flex: 1 }}>
+          {leftIcon}
+          <UnstyledButton component={Link} href={logoHref}>
            <Logo />
-        </Box>
-        <Group
-          className="dashboard-header-group-right"
-          position="right"
-          style={{ maxWidth: 'none' }}
-          noWrap
-        >
-          <Search />
-          {sessionData?.user?.isAdmin && (
-            <>
-              <ToggleEditModeAction />
-              <DockerMenuButton />
-            </>
-          )}
-          <Indicator
-            size={15}
-            color="blue"
-            withBorder
-            processing
-            disabled={newVersionAvailable === undefined}
-          >
-            <SettingsMenu newVersionAvailable={newVersionAvailable} />
-          </Indicator>
+          </UnstyledButton>
        </Group>
-      </Group>
-    </MantineHeader>
-  );
-}

-const useStyles = createStyles((theme) => ({
-  hide: {
-    [theme.fn.smallerThan('xs')]: {
-      display: 'none',
-    },
-  },
-}));
+        {!isSmallerThanMd && <Search />}
+
+        <Group noWrap style={{ flex: 1 }} position="right">
+          <Group noWrap spacing={8}>
+            {headerActions}
+          </Group>
+          <AvatarMenu />
+        </Group>
+      </Group>
+
+      {isSmallerThanMd && (
+        <Center mt="xs" px="md">
+          <Search isMobile />
+        </Center>
+      )}
+    </Header>
+  );
+};
+
+type ExperimentalHeaderNoteProps = {
+  height?: 30 | 50;
+  visible?: boolean;
+};
+const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
+  if (!visible) return null;
+
+  return (
+    <Box bg="red" h={height} p={3} px={6}>
+      <Flex h="100%" align="center" columnGap={7}>
+        <IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
+        <Text color="white" lineClamp={height === 30 ? 1 : 2}>
+          This is an experimental feature of Homarr. Please report any issues to the official Homarr
+          team.
+        </Text>
+      </Flex>
+    </Box>
+  );
+};
--- a/src/components/layout/new-header/MovieModal.tsx
+++ b/src/components/layout/new-header/MovieModal.tsx
--- a/src/components/layout/header/Search.tsx
+++ b/src/components/layout/header/Search.tsx
@@ -1,319 +1,203 @@
+import { Autocomplete, Group, Kbd, Modal, Text, Tooltip, useMantineTheme } from '@mantine/core';
+import { useDisclosure, useHotkeys } from '@mantine/hooks';
 import {
-  ActionIcon,
-  Autocomplete,
-  Box,
-  Divider,
-  Kbd,
-  Menu,
-  Popover,
-  ScrollArea,
-  Tooltip,
-  createStyles,
-} from '@mantine/core';
-import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
-import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+  IconBrandYoutube,
+  IconDownload,
+  IconMovie,
+  IconSearch,
+  IconWorld,
+  TablerIconsProps,
+} from '@tabler/icons-react';
+import { useRouter } from 'next/router';
+import { ReactNode, forwardRef, useMemo, useRef, useState } from 'react';
+import { useConfigContext } from '~/config/provider';
 import { api } from '~/utils/api';

-import { useConfigContext } from '../../../config/provider';
-import { IModule } from '../../../modules/ModuleTypes';
-import { OverseerrMediaDisplay } from '../../../modules/common';
-import { ConfigType } from '../../../types/config';
-import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
-import Tip from '../Tip';
-import { useCardStyles } from '../useCardStyles';
-import SmallAppItem from './SmallAppItem';
+import { MovieModal } from './MovieModal';

-export const SearchModule: IModule = {
-  title: 'Search',
-  icon: IconSearch,
-  component: Search,
-  id: 'search',
+type SearchProps = {
+  isMobile?: boolean;
 };

-interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
-  label: string;
-  disabled: boolean;
-  value: string;
-  description: string;
-  icon: React.ReactNode;
-  url: string;
-  shortcut: string;
-}
-
-const useStyles = createStyles((theme) => ({
-  item: {
-    '&[data-hovered]': {
-      backgroundColor: theme.colors[theme.primaryColor][theme.fn.primaryShade()],
-      color: theme.white,
-    },
-  },
-}));
-
-export function Search() {
-  const { t } = useTranslation('modules/search');
+export const Search = ({ isMobile }: SearchProps) => {
+  const [search, setSearch] = useState('');
+  const ref = useRef<HTMLInputElement>(null);
+  useHotkeys([['mod+K', () => ref.current?.focus()]]);
+  const { data: userWithSettings } = api.user.getWithSettings.useQuery();
  const { config } = useConfigContext();
-  const [searchQuery, setSearchQuery] = useState('');
-  const [debounced] = useDebouncedValue(searchQuery, 250);
-  const { classes: cardClasses, cx } = useCardStyles(true);
+  const { colors } = useMantineTheme();
+  const router = useRouter();
+  const [showMovieModal, movieModal] = useDisclosure(router.query.movie === 'true');

-  const isOverseerrEnabled = config?.apps.some(
-    (x) => x.integration.type === 'overseerr' || x.integration.type === 'jellyseerr'
+  const apps = useConfigApps(search);
+  const engines = generateEngines(
+    search,
+    userWithSettings?.settings.searchTemplate ?? 'https://www.google.com/search?q=%s'
+  ).filter(
+    (engine) =>
+      engine.sort !== 'movie' || config?.apps.some((app) => app.integration.type === engine.value)
  );
-  const overseerrApp = config?.apps.find(
-    (app) => app.integration?.type === 'overseerr' || app.integration?.type === 'jellyseerr'
-  );
-  const searchEngineSettings = config?.settings.common.searchEngine;
-  const searchEngineUrl = !searchEngineSettings
-    ? searchUrls.google
-    : searchEngineSettings.type === 'custom'
-    ? searchEngineSettings.properties.template
-    : searchUrls[searchEngineSettings.type];
+  const data = [...engines, ...apps];

-  const searchEnginesList: ItemProps[] = [
-    {
-      icon: <IconSearch />,
-      disabled: false,
-      label: t('searchEngines.search.name'),
-      value: 'search',
-      description: t('searchEngines.search.description'),
-      url: searchEngineUrl,
-      shortcut: 's',
-    },
-    {
-      icon: <IconDownload />,
-      disabled: false,
-      label: t('searchEngines.torrents.name'),
-      value: 'torrents',
-      description: t('searchEngines.torrents.description'),
-      url: 'https://www.torrentdownloads.me/search/?search=',
-      shortcut: 't',
-    },
-    {
-      icon: <IconBrandYoutube />,
-      disabled: false,
-      label: t('searchEngines.youtube.name'),
-      value: 'youtube',
-      description: t('searchEngines.youtube.description'),
-      url: 'https://www.youtube.com/results?search_query=',
-      shortcut: 'y',
-    },
-    {
-      icon: <IconMovie />,
-      disabled: !(isOverseerrEnabled === true && overseerrApp !== undefined),
-      label: t('searchEngines.overseerr.name'),
-      value: 'overseerr',
-      description: t('searchEngines.overseerr.description'),
-      url: `${overseerrApp?.url}search?query=`,
-      shortcut: 'm',
-    },
-  ];
-  const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(searchEnginesList[0]);
-  const matchingApps =
-    config?.apps.filter((app) => {
-      if (searchQuery === '' || searchQuery === undefined) {
-        return false;
-      }
-      return app.name.toLowerCase().includes(searchQuery.toLowerCase());
-    }) ?? [];
-  const autocompleteData = matchingApps.map((app) => ({
-    label: app.name,
-    value: app.name,
-    icon: app.appearance.iconUrl,
-    url: app.behaviour.externalUrl ?? app.url,
-  }));
-  const AutoCompleteItem = forwardRef<HTMLDivElement, any>(
-    ({ label, value, icon, url, ...others }: any, ref) => (
-      <div ref={ref} {...others}>
-        <SmallAppItem app={{ label, value, icon, url }} />
-      </div>
-    )
-  );
-  useEffect(() => {
-    // Refresh the default search engine every time the config for it changes #521
-    setSearchEngine(searchEnginesList[0]);
-  }, [searchEngineUrl]);
-  const textInput = useRef<HTMLInputElement>(null);
-  useHotkeys([['mod+K', () => textInput.current?.focus()]]);
-  const { classes } = useStyles();
-  const openTarget = getOpenTarget(config);
-  const [opened, setOpened] = useState(false);
-
-  const isOverseerrSearchEnabled =
-    isOverseerrEnabled === true &&
-    selectedSearchEngine.value === 'overseerr' &&
-    debounced.length > 3;
-
-  const { data: overseerrResults } = useOverseerrSearchQuery(debounced, isOverseerrSearchEnabled);
-
-  const isModuleEnabled = config?.settings.customization.layout.enabledSearchbar;
-  if (!isModuleEnabled) {
-    return null;
-  }
-
-  //TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
-  // will close it (Because it closes the underlying Popover)
  return (
-    <Box style={{ width: '100%', maxWidth: 400 }}>
-      <Popover
-        opened={
-          (overseerrResults && overseerrResults.length > 0 && opened && searchQuery.length > 3) ??
-          false
-        }
-        position="bottom"
-        withinPortal
-        shadow="md"
-        radius="md"
-        zIndex={100}
-      >
-        <Popover.Target>
+    <>
      <Autocomplete
-            ref={textInput}
-            onFocusCapture={() => setOpened(true)}
+        ref={ref}
+        radius="xl"
+        w={isMobile ? '100%' : 400}
+        variant="filled"
+        placeholder="Search..."
+        hoverOnSearchChange
        autoFocus={typeof window !== 'undefined' && window.innerWidth > 768}
-            rightSection={<SearchModuleMenu />}
-            placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`) ?? undefined}
-            value={searchQuery}
-            onChange={(currentString) => tryMatchSearchEngine(currentString, setSearchQuery)}
-            itemComponent={AutoCompleteItem}
-            data={autocompleteData}
-            onItemSubmit={(item) => {
-              setOpened(false);
-              if (item.url) {
-                setSearchQuery('');
-                window.open(item.openedUrl ? item.openedUrl : item.url, openTarget);
+        rightSection={
+          <IconSearch
+            onClick={() => ref.current?.focus()}
+            color={colors.gray[5]}
+            size={16}
+            stroke={1.5}
+          />
        }
-            }}
-            // Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
-            onKeyDown={(event) => {
-              if (
-                event.key === 'Enter' &&
-                searchQuery.length > 0 &&
-                autocompleteData.length === 0
-              ) {
-                if (selectedSearchEngine.url.includes('%s')) {
-                  window.open(selectedSearchEngine.url.replace('%s', searchQuery), openTarget);
-                } else {
-                  window.open(selectedSearchEngine.url + searchQuery, openTarget);
+        limit={8}
+        value={search}
+        onChange={setSearch}
+        data={data}
+        itemComponent={SearchItemComponent}
+        filter={(value, item: SearchAutoCompleteItem) =>
+          engines.some((engine) => engine.sort === item.sort) ||
+          item.value.toLowerCase().includes(value.trim().toLowerCase())
        }
-              }
-            }}
        classNames={{
-              input: cx(cardClasses.card, 'dashboard-header-search-input'),
+          input: 'dashboard-header-search-input',
          root: 'dashboard-header-search-root',
        }}
-            radius="lg"
-            size="md"
-          />
-        </Popover.Target>
-        <Popover.Dropdown>
-          <ScrollArea style={{ height: '80vh', maxWidth: '90vw' }} offsetScrollbars>
-            {overseerrResults &&
-              overseerrResults.length > 0 &&
-              searchQuery.length > 3 &&
-              overseerrResults.slice(0, 4).map((result: any, index: number) => (
-                <React.Fragment key={index}>
-                  <OverseerrMediaDisplay key={result.id} media={result} />
-                  {index < overseerrResults.length - 1 && index < 3 && (
-                    <Divider variant="dashed" my="xs" />
-                  )}
-                </React.Fragment>
-              ))}
-          </ScrollArea>
-        </Popover.Dropdown>
-      </Popover>
-    </Box>
-  );
-
-  function tryMatchSearchEngine(query: string, setSearchQuery: (value: string) => void) {
-    const foundSearchEngine = searchEnginesList.find(
-      (engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
-    );
-    if (foundSearchEngine) {
-      setSearchQuery(query.replace(`!${foundSearchEngine.shortcut}`, ''));
-      changeSearchEngine(foundSearchEngine);
-    } else {
-      setSearchQuery(query);
+        onItemSubmit={(item: SearchAutoCompleteItem) => {
+          setSearch('');
+          if (item.sort === 'movie') {
+            // TODO: show movie modal
+            const url = new URL(`${window.location.origin}${router.asPath}`);
+            url.searchParams.set('movie', 'true');
+            url.searchParams.set('search', search);
+            url.searchParams.set('type', item.value);
+            router.push(url, undefined, { shallow: true });
+            movieModal.open();
+            return;
          }
-  }
-
-  function SearchModuleMenu() {
-    return (
-      <Menu shadow="md" width={200} withinPortal classNames={classes}>
-        <Menu.Target>
-          <ActionIcon>{selectedSearchEngine.icon}</ActionIcon>
-        </Menu.Target>
-
-        <Menu.Dropdown>
-          {searchEnginesList.map((item) => (
-            <Tooltip
-              multiline
-              label={item.description}
-              withinPortal
-              width={200}
-              position="left"
-              key={item.value}
-            >
-              <Menu.Item
-                key={item.value}
-                icon={item.icon}
-                rightSection={<Kbd>!{item.shortcut}</Kbd>}
-                disabled={item.disabled}
-                onClick={() => {
-                  changeSearchEngine(item);
+          const target = userWithSettings?.settings.openSearchInNewTab ? '_blank' : '_self';
+          window.open(item.metaData.url, target);
        }}
-              >
-                {item.label}
-              </Menu.Item>
-            </Tooltip>
-          ))}
-          <Menu.Divider />
-          <Menu.Label>
-            <Tip>
-              {t('tip')} <Kbd>mod+k</Kbd>{' '}
-            </Tip>
-          </Menu.Label>
-        </Menu.Dropdown>
-      </Menu>
+        aria-label="Search"
+      />
+      <MovieModal
+        opened={showMovieModal}
+        closeModal={() => {
+          movieModal.close();
+          router.push(router.pathname, undefined, { shallow: true });
+        }}
+      />
+    </>
  );
-  }
-
-  function changeSearchEngine(item: ItemProps) {
-    setSearchEngine(item);
-    showNotification({
-      radius: 'lg',
-      withCloseButton: false,
-      id: 'spotlight',
-      autoClose: 1000,
-      icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,
-      message: t('switchedSearchEngine', { searchEngine: t(`searchEngines.${item.value}.name`) }),
-    });
-  }
-}
-
-const getOpenTarget = (config: ConfigType | undefined): '_blank' | '_self' => {
-  if (!config || config.settings.common.searchEngine.properties.openInNewTab === undefined) {
-    return '_blank';
-  }
-
-  return config.settings.common.searchEngine.properties.openInNewTab ? '_blank' : '_self';
 };

-export const useOverseerrSearchQuery = (query: string, isEnabled: boolean) => {
-  const { name: configName } = useConfigContext();
-  return api.overseerr.search.useQuery(
+const SearchItemComponent = forwardRef<HTMLDivElement, SearchAutoCompleteItem>(
+  ({ icon, label, value, sort, ...others }, ref) => {
+    let Icon = getItemComponent(icon);
+
+    return (
+      <Group ref={ref} noWrap {...others}>
+        <Icon size={20} />
+        <Text>{label}</Text>
+      </Group>
+    );
+  }
+);
+
+const getItemComponent = (icon: SearchAutoCompleteItem['icon']) => {
+  if (typeof icon !== 'string') {
+    return icon;
+  }
+
+  return (props: TablerIconsProps) => (
+    <img src={icon} height={props.size} width={props.size} style={{ objectFit: 'contain' }} />
+  );
+};
+
+const useConfigApps = (search: string) => {
+  const { config } = useConfigContext();
+  return useMemo(() => {
+    if (search.trim().length === 0) return [];
+    const apps = config?.apps.filter((app) =>
+      app.name.toLowerCase().includes(search.toLowerCase())
+    );
+    return (
+      apps?.map((app) => ({
+        icon: app.appearance.iconUrl,
+        label: app.name,
+        value: app.name,
+        sort: 'app',
+        metaData: {
+          url: app.behaviour.externalUrl,
+        },
+      })) ?? []
+    );
+  }, [search, config]);
+};
+
+type SearchAutoCompleteItem = {
+  icon: ((props: TablerIconsProps) => ReactNode) | string;
+  label: string;
+  value: string;
+} & (
+  | {
+      sort: 'web' | 'torrent' | 'youtube' | 'app';
+      metaData: {
+        url: string;
+      };
+    }
+  | {
+      sort: 'movie';
+    }
+);
+const movieApps = ['overseerr', 'jellyseerr'] as const;
+const generateEngines = (searchValue: string, webTemplate: string) =>
+  searchValue.trim().length > 0
+    ? ([
        {
-      query,
-      configName: configName!,
-      integration: 'overseerr',
+          icon: IconWorld,
+          label: `Search for ${searchValue} in the web`,
+          value: `web`,
+          sort: 'web',
+          metaData: {
+            url: webTemplate.includes('%s')
+              ? webTemplate.replace('%s', searchValue)
+              : webTemplate + searchValue,
+          },
        },
        {
-      enabled: isEnabled,
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      refetchInterval: false,
-    }
-  );
-};
+          icon: IconDownload,
+          label: `Search for ${searchValue} torrents`,
+          value: `torrent`,
+          sort: 'torrent',
+          metaData: {
+            url: `https://www.torrentdownloads.me/search/?search=${searchValue}`,
+          },
+        },
+        {
+          icon: IconBrandYoutube,
+          label: `Search for ${searchValue} on youtube`,
+          value: 'youtube',
+          sort: 'youtube',
+          metaData: {
+            url: `https://www.youtube.com/results?search_query=${searchValue}`,
+          },
+        },
+        ...movieApps.map(
+          (name) =>
+            ({
+              icon: IconMovie,
+              label: `Search for ${searchValue} on ${name}`,
+              value: name,
+              sort: 'movie',
+            }) as const
+        ),
+      ] as const satisfies Readonly<SearchAutoCompleteItem[]>)
+    : [];
--- a/src/components/layout/header/SettingsMenu.tsx
+++ b/src/components/layout/header/SettingsMenu.tsx
@@ -1,81 +0,0 @@
-import { Badge, Button, Menu } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
-import {
-  IconInfoCircle,
-  IconLogin,
-  IconLogout,
-  IconMenu2,
-  IconSettings,
-} from '@tabler/icons-react';
-import { signOut, useSession } from 'next-auth/react';
-import { useTranslation } from 'next-i18next';
-import Link from 'next/link';
-
-import { AboutModal } from '../../Dashboard/Modals/AboutModal/AboutModal';
-import { SettingsDrawer } from '../../Settings/SettingsDrawer';
-import { useCardStyles } from '../useCardStyles';
-import { ColorSchemeSwitch } from './SettingsMenu/ColorSchemeSwitch';
-
-export function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
-  const [drawerOpened, drawer] = useDisclosure(false);
-  const { t } = useTranslation('common');
-  const [aboutModalOpened, aboutModal] = useDisclosure(false);
-  const { classes } = useCardStyles(true);
-  const { data: sessionData } = useSession();
-
-  return (
-    <>
-      <Menu width={250}>
-        <Menu.Target>
-          <Button className={classes.card} variant="default" radius="md" style={{ height: 43 }}>
-            <IconMenu2 />
-          </Button>
-        </Menu.Target>
-        <Menu.Dropdown>
-          <ColorSchemeSwitch />
-          {sessionData?.user?.isAdmin && (
-            <Menu.Item icon={<IconSettings strokeWidth={1.2} size={18} />} onClick={drawer.open}>
-              {t('sections.settings')}
-            </Menu.Item>
-          )}
-          <Menu.Item
-            icon={<IconInfoCircle strokeWidth={1.2} size={18} />}
-            rightSection={
-              newVersionAvailable && (
-                <Badge variant="light" color="blue">
-                  New
-                </Badge>
-              )
-            }
-            onClick={() => aboutModal.open()}
-          >
-            {t('about')}
-          </Menu.Item>
-          {sessionData?.user ? (
-            <Menu.Item icon={<IconLogout strokeWidth={1.2} size={18} />} onClick={() => signOut()}>
-              {t('header.logout')}
-            </Menu.Item>
-          ) : (
-            <Menu.Item
-              icon={<IconLogin strokeWidth={1.2} size={18} />}
-              component={Link}
-              href="/login"
-            >
-              {t('header.sign-in')}
-            </Menu.Item>
-          )}
-        </Menu.Dropdown>
-      </Menu>
-      <SettingsDrawer
-        opened={drawerOpened}
-        closeDrawer={drawer.close}
-        newVersionAvailable={newVersionAvailable}
-      />
-      <AboutModal
-        opened={aboutModalOpened}
-        closeModal={aboutModal.close}
-        newVersionAvailable={newVersionAvailable}
-      />
-    </>
-  );
-}
--- a/src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
+++ b/src/components/layout/header/SettingsMenu/ColorSchemeSwitch.tsx
@@ -1,23 +0,0 @@
-import { Menu } from '@mantine/core';
-import { IconMoonStars, IconSun } from '@tabler/icons-react';
-import { useTranslation } from 'next-i18next';
-import { useColorScheme } from '~/hooks/use-colorscheme';
-
-export const ColorSchemeSwitch = () => {
-  const { colorScheme, toggleColorScheme } = useColorScheme();
-  const { t } = useTranslation('settings/general/theme-selector');
-
-  const Icon = colorScheme === 'dark' ? IconSun : IconMoonStars;
-
-  return (
-    <Menu.Item
-      closeMenuOnClick={false}
-      icon={<Icon strokeWidth={1.2} size={18} />}
-      onClick={() => toggleColorScheme()}
-    >
-      {t('label', {
-        theme: colorScheme === 'dark' ? 'light' : 'dark',
-      })}
-    </Menu.Item>
-  );
-};
--- a/src/components/layout/header/SmallAppItem.tsx
+++ b/src/components/layout/header/SmallAppItem.tsx
@@ -1,17 +0,0 @@
-import { Avatar, Group, Text } from '@mantine/core';
-
-interface smallAppItem {
-  label: string;
-  icon?: string;
-  url?: string;
-}
-
-export default function SmallAppItem(props: any) {
-  const { app }: { app: smallAppItem } = props;
-  return (
-    <Group>
-      {app.icon && <Avatar src={app.icon} />}
-      <Text>{app.label}</Text>
-    </Group>
-  );
-}
--- a/src/components/layout/new-header/Header.tsx
+++ b/src/components/layout/new-header/Header.tsx
@@ -1,89 +0,0 @@
-import {
-  Box,
-  Center,
-  Flex,
-  Group,
-  Header,
-  Text,
-  UnstyledButton,
-  useMantineTheme,
-} from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
-import { IconAlertTriangle } from '@tabler/icons-react';
-import Link from 'next/link';
-import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
-
-import { Logo } from '../Logo';
-import { AvatarMenu } from './AvatarMenu';
-import { Search } from './search';
-
-type MainHeaderProps = {
-  logoHref?: string;
-  showExperimental?: boolean;
-  headerActions?: React.ReactNode;
-  leftIcon?: React.ReactNode;
-};
-
-export const MainHeader = ({
-  showExperimental = false,
-  logoHref = '/',
-  headerActions,
-  leftIcon,
-}: MainHeaderProps) => {
-  const { breakpoints } = useMantineTheme();
-  const isSmallerThanMd = useMediaQuery(`(max-width: ${breakpoints.sm})`);
-  const experimentalHeaderNoteHeight = isSmallerThanMd ? 50 : 30;
-  const headerBaseHeight = isSmallerThanMd ? 60 + 46 : 60;
-  const headerHeight = showExperimental
-    ? headerBaseHeight + experimentalHeaderNoteHeight
-    : headerBaseHeight;
-
-  return (
-    <Header height={headerHeight} pb="sm" pt={0}>
-      <ExperimentalHeaderNote visible={showExperimental} height={experimentalHeaderNoteHeight} />
-      <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
-        <Group noWrap style={{ flex: 1 }}>
-          {leftIcon}
-          <UnstyledButton component={Link} href={logoHref}>
-            <Logo />
-          </UnstyledButton>
-        </Group>
-
-        {!isSmallerThanMd && <Search />}
-
-        <Group noWrap style={{ flex: 1 }} position="right">
-          <Group noWrap spacing={8}>
-            {headerActions}
-          </Group>
-          <AvatarMenu />
-        </Group>
-      </Group>
-
-      {isSmallerThanMd && (
-        <Center mt="xs" px="md">
-          <Search isMobile />
-        </Center>
-      )}
-    </Header>
-  );
-};
-
-type ExperimentalHeaderNoteProps = {
-  height?: 30 | 50;
-  visible?: boolean;
-};
-const ExperimentalHeaderNote = ({ visible = false, height = 30 }: ExperimentalHeaderNoteProps) => {
-  if (!visible) return null;
-
-  return (
-    <Box bg="red" h={height} p={3} px={6}>
-      <Flex h="100%" align="center" columnGap={7}>
-        <IconAlertTriangle color="white" size="1rem" style={{ minWidth: '1rem' }} />
-        <Text color="white" lineClamp={height === 30 ? 1 : 2}>
-          This is an experimental feature of Homarr. Please report any issues to the official Homarr
-          team.
-        </Text>
-      </Flex>
-    </Box>
-  );
-};
--- a/src/components/layout/new-header/search.tsx
+++ b/src/components/layout/new-header/search.tsx
@@ -1,203 +0,0 @@
-import { Autocomplete, Group, Kbd, Modal, Text, Tooltip, useMantineTheme } from '@mantine/core';
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
-import {
-  IconBrandYoutube,
-  IconDownload,
-  IconMovie,
-  IconSearch,
-  IconWorld,
-  TablerIconsProps,
-} from '@tabler/icons-react';
-import { useRouter } from 'next/router';
-import { ReactNode, forwardRef, useMemo, useRef, useState } from 'react';
-import { useConfigContext } from '~/config/provider';
-import { api } from '~/utils/api';
-
-import { MovieModal } from './MovieModal';
-
-type SearchProps = {
-  isMobile?: boolean;
-};
-
-export const Search = ({ isMobile }: SearchProps) => {
-  const [search, setSearch] = useState('');
-  const ref = useRef<HTMLInputElement>(null);
-  useHotkeys([['mod+K', () => ref.current?.focus()]]);
-  const { data: userWithSettings } = api.user.getWithSettings.useQuery();
-  const { config } = useConfigContext();
-  const { colors } = useMantineTheme();
-  const router = useRouter();
-  const [showMovieModal, movieModal] = useDisclosure(router.query.movie === 'true');
-
-  const apps = useConfigApps(search);
-  const engines = generateEngines(
-    search,
-    userWithSettings?.settings.searchTemplate ?? 'https://www.google.com/search?q=%s'
-  ).filter(
-    (engine) =>
-      engine.sort !== 'movie' || config?.apps.some((app) => app.integration.type === engine.value)
-  );
-  const data = [...engines, ...apps];
-
-  return (
-    <>
-      <Autocomplete
-        ref={ref}
-        radius="xl"
-        w={isMobile ? '100%' : 400}
-        variant="filled"
-        placeholder="Search..."
-        hoverOnSearchChange
-        autoFocus={typeof window !== 'undefined' && window.innerWidth > 768}
-        rightSection={
-          <IconSearch
-            onClick={() => ref.current?.focus()}
-            color={colors.gray[5]}
-            size={16}
-            stroke={1.5}
-          />
-        }
-        limit={8}
-        value={search}
-        onChange={setSearch}
-        data={data}
-        itemComponent={SearchItemComponent}
-        filter={(value, item: SearchAutoCompleteItem) =>
-          engines.some((engine) => engine.sort === item.sort) ||
-          item.value.toLowerCase().includes(value.trim().toLowerCase())
-        }
-        classNames={{
-          input: 'dashboard-header-search-input',
-          root: 'dashboard-header-search-root',
-        }}
-        onItemSubmit={(item: SearchAutoCompleteItem) => {
-          setSearch('');
-          if (item.sort === 'movie') {
-            // TODO: show movie modal
-            const url = new URL(`${window.location.origin}${router.asPath}`);
-            url.searchParams.set('movie', 'true');
-            url.searchParams.set('search', search);
-            url.searchParams.set('type', item.value);
-            router.push(url, undefined, { shallow: true });
-            movieModal.open();
-            return;
-          }
-          const target = userWithSettings?.settings.openSearchInNewTab ? '_blank' : '_self';
-          window.open(item.metaData.url, target);
-        }}
-        aria-label="Search"
-      />
-      <MovieModal
-        opened={showMovieModal}
-        closeModal={() => {
-          movieModal.close();
-          router.push(router.pathname, undefined, { shallow: true });
-        }}
-      />
-    </>
-  );
-};
-
-const SearchItemComponent = forwardRef<HTMLDivElement, SearchAutoCompleteItem>(
-  ({ icon, label, value, sort, ...others }, ref) => {
-    let Icon = getItemComponent(icon);
-
-    return (
-      <Group ref={ref} noWrap {...others}>
-        <Icon size={20} />
-        <Text>{label}</Text>
-      </Group>
-    );
-  }
-);
-
-const getItemComponent = (icon: SearchAutoCompleteItem['icon']) => {
-  if (typeof icon !== 'string') {
-    return icon;
-  }
-
-  return (props: TablerIconsProps) => (
-    <img src={icon} height={props.size} width={props.size} style={{ objectFit: 'contain' }} />
-  );
-};
-
-const useConfigApps = (search: string) => {
-  const { config } = useConfigContext();
-  return useMemo(() => {
-    if (search.trim().length === 0) return [];
-    const apps = config?.apps.filter((app) =>
-      app.name.toLowerCase().includes(search.toLowerCase())
-    );
-    return (
-      apps?.map((app) => ({
-        icon: app.appearance.iconUrl,
-        label: app.name,
-        value: app.name,
-        sort: 'app',
-        metaData: {
-          url: app.behaviour.externalUrl,
-        },
-      })) ?? []
-    );
-  }, [search, config]);
-};
-
-type SearchAutoCompleteItem = {
-  icon: ((props: TablerIconsProps) => ReactNode) | string;
-  label: string;
-  value: string;
-} & (
-  | {
-      sort: 'web' | 'torrent' | 'youtube' | 'app';
-      metaData: {
-        url: string;
-      };
-    }
-  | {
-      sort: 'movie';
-    }
-);
-const movieApps = ['overseerr', 'jellyseerr'] as const;
-const generateEngines = (searchValue: string, webTemplate: string) =>
-  searchValue.trim().length > 0
-    ? ([
-        {
-          icon: IconWorld,
-          label: `Search for ${searchValue} in the web`,
-          value: `web`,
-          sort: 'web',
-          metaData: {
-            url: webTemplate.includes('%s')
-              ? webTemplate.replace('%s', searchValue)
-              : webTemplate + searchValue,
-          },
-        },
-        {
-          icon: IconDownload,
-          label: `Search for ${searchValue} torrents`,
-          value: `torrent`,
-          sort: 'torrent',
-          metaData: {
-            url: `https://www.torrentdownloads.me/search/?search=${searchValue}`,
-          },
-        },
-        {
-          icon: IconBrandYoutube,
-          label: `Search for ${searchValue} on youtube`,
-          value: 'youtube',
-          sort: 'youtube',
-          metaData: {
-            url: `https://www.youtube.com/results?search_query=${searchValue}`,
-          },
-        },
-        ...movieApps.map(
-          (name) =>
-            ({
-              icon: IconMovie,
-              label: `Search for ${searchValue} on ${name}`,
-              value: name,
-              sort: 'movie',
-            }) as const
-        ),
-      ] as const satisfies Readonly<SearchAutoCompleteItem[]>)
-    : [];
--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -1 +0,0 @@
-export * from './overseerr';
--- a/src/modules/overseerr/OverseerrModule.tsx
+++ b/src/modules/overseerr/OverseerrModule.tsx
@@ -1,15 +0,0 @@
-import { IconEyeglass } from '@tabler/icons-react';
-
-import { IModule } from '../ModuleTypes';
-import { OverseerrMediaDisplay } from '../common';
-
-export const OverseerrModule: IModule = {
-  title: 'Overseerr',
-  icon: IconEyeglass,
-  component: OverseerrMediaDisplay,
-  id: 'overseerr',
-};
-
-export interface OverseerSearchProps {
-  query: string;
-}
--- a/src/modules/overseerr/index.ts
+++ b/src/modules/overseerr/index.ts
@@ -1 +0,0 @@
-export { OverseerrModule } from './OverseerrModule';
--- a/src/pages/board/[slug].tsx
+++ b/src/pages/board/[slug].tsx
@@ -2,7 +2,7 @@ import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { SSRConfig } from 'next-i18next';
 import { z } from 'zod';
 import { Dashboard } from '~/components/Dashboard/Dashboard';
-import { MainLayout } from '~/components/layout/main';
+import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { useInitConfig } from '~/config/init';
 import { configExists } from '~/tools/config/configExists';
 import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
@@ -10,17 +10,15 @@ import { getServerSideTranslations } from '~/tools/server/getServerSideTranslati
 import { dashboardNamespaces } from '~/tools/server/translation-namespaces';
 import { ConfigType } from '~/types/config';

-import { HeaderActions } from '.';
-
 export default function BoardPage({
  config: initialConfig,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
  useInitConfig(initialConfig);

  return (
-    <MainLayout headerActions={<HeaderActions />}>
+    <BoardLayout>
      <Dashboard />
-    </MainLayout>
+    </BoardLayout>
  );
 }

--- a/src/pages/board/[slug]/customize.tsx
+++ b/src/pages/board/[slug]/customize.tsx
@@ -24,7 +24,7 @@ import {
  BoardCustomizationFormProvider,
  useBoardCustomizationForm,
 } from '~/components/Board/Customize/form';
-import { MainLayout } from '~/components/layout/main';
+import { MainLayout } from '~/components/layout/Templates/MainLayout';
 import { createTrpcServersideHelpers } from '~/server/api/helper';
 import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
--- a/src/pages/board/index.tsx
+++ b/src/pages/board/index.tsx
@@ -1,35 +1,14 @@
-import { Button, ButtonProps, Text, Title, Tooltip } from '@mantine/core';
-import { useHotkeys, useWindowEvent } from '@mantine/hooks';
-import { openContextModal } from '@mantine/modals';
-import { hideNotification, showNotification } from '@mantine/notifications';
-import {
-  IconApps,
-  IconBrandDocker,
-  IconEditCircle,
-  IconEditCircleOff,
-  IconSettings,
-} from '@tabler/icons-react';
-import Consola from 'consola';
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
-import { useSession } from 'next-auth/react';
-import { SSRConfig, Trans, useTranslation } from 'next-i18next';
-import Link from 'next/link';
-import { ForwardedRef, forwardRef } from 'react';
+import { SSRConfig } from 'next-i18next';
 import { Dashboard } from '~/components/Dashboard/Dashboard';
-import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
-import { useNamedWrapperColumnCount } from '~/components/Dashboard/Wrappers/gridstack/store';
-import { MainLayout } from '~/components/layout/main';
-import { useCardStyles } from '~/components/layout/useCardStyles';
+import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { useInitConfig } from '~/config/init';
-import { useConfigContext } from '~/config/provider';
-import { env } from '~/env';
 import { getServerAuthSession } from '~/server/auth';
 import { prisma } from '~/server/db';
 import { getFrontendConfig } from '~/tools/config/getFrontendConfig';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { dashboardNamespaces } from '~/tools/server/translation-namespaces';
 import { ConfigType } from '~/types/config';
-import { api } from '~/utils/api';

 export default function BoardPage({
  config: initialConfig,
@@ -37,9 +16,9 @@ export default function BoardPage({
  useInitConfig(initialConfig);

  return (
-    <MainLayout headerActions={<HeaderActions />}>
+    <BoardLayout>
      <Dashboard />
-    </MainLayout>
+    </BoardLayout>
  );
 }

@@ -72,205 +51,3 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
    },
  };
 };
-
-export const HeaderActions = () => {
-  const { data: sessionData } = useSession();
-
-  if (!sessionData?.user?.isAdmin) return null;
-
-  return (
-    <>
-      {env.NEXT_PUBLIC_DOCKER_ENABLED && <DockerButton />}
-      <ToggleEditModeButton />
-      <CustomizeBoardButton />
-    </>
-  );
-};
-
-const DockerButton = () => {
-  const { t } = useTranslation('modules/docker');
-
-  return (
-    <Tooltip label={t('actionIcon.tooltip')}>
-      <HeaderActionButton component={Link} href="/docker">
-        <IconBrandDocker size={20} stroke={1.5} />
-      </HeaderActionButton>
-    </Tooltip>
-  );
-};
-
-const CustomizeBoardButton = () => {
-  const { name } = useConfigContext();
-
-  return (
-    <Tooltip label="Customize board">
-      <HeaderActionButton component={Link} href={`/board/${name}/customize`}>
-        <IconSettings size={20} stroke={1.5} />
-      </HeaderActionButton>
-    </Tooltip>
-  );
-};
-
-type SpecificLinkProps = {
-  component: typeof Link;
-  href: string;
-};
-type SpecificButtonProps = {
-  onClick: HTMLButtonElement['onclick'];
-};
-type HeaderActionButtonProps = Omit<ButtonProps, 'variant' | 'className' | 'h' | 'w' | 'px'> &
-  (SpecificLinkProps | SpecificButtonProps);
-
-const HeaderActionButton = forwardRef<
-  HTMLButtonElement | HTMLAnchorElement,
-  HeaderActionButtonProps
->(({ children, ...props }, ref) => {
-  const { classes } = useCardStyles(true);
-
-  const buttonProps: ButtonProps = {
-    variant: 'default',
-    className: classes.card,
-    h: 38,
-    w: 38,
-    px: 0,
-    ...props,
-  };
-
-  if ('component' in props) {
-    return (
-      <Button
-        ref={ref as ForwardedRef<HTMLAnchorElement>}
-        component={props.component}
-        href={props.href}
-        {...buttonProps}
-      >
-        {children}
-      </Button>
-    );
-  }
-
-  return (
-    <Button ref={ref as ForwardedRef<HTMLButtonElement>} {...buttonProps}>
-      {children}
-    </Button>
-  );
-});
-
-const beforeUnloadEventText = 'Exit the edit mode to save your changes';
-const editModeNotificationId = 'toggle-edit-mode';
-
-const ToggleEditModeButton = () => {
-  const { enabled, toggleEditMode } = useEditModeStore();
-  const { config, name: configName } = useConfigContext();
-  const { mutateAsync: saveConfig } = api.config.save.useMutation();
-  const namedWrapperColumnCount = useNamedWrapperColumnCount();
-  const { t } = useTranslation(['layout/header/actions/toggle-edit-mode', 'common']);
-  const translatedSize =
-    namedWrapperColumnCount !== null
-      ? t(`common:breakPoints.${namedWrapperColumnCount}`)
-      : t('common:loading');
-
-  useHotkeys([['mod+E', toggleEditMode]]);
-
-  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
-    if (enabled) {
-      // eslint-disable-next-line no-param-reassign
-      event.returnValue = beforeUnloadEventText;
-      return beforeUnloadEventText;
-    }
-
-    return undefined;
-  });
-
-  const save = async () => {
-    toggleEditMode();
-    if (!config || !configName) return;
-    await saveConfig({ name: configName, config });
-    Consola.log('Saved config to server', configName);
-    hideNotification(editModeNotificationId);
-  };
-
-  const enableEditMode = () => {
-    toggleEditMode();
-    showNotification({
-      styles: (theme) => ({
-        root: {
-          backgroundColor: theme.colors.orange[7],
-          borderColor: theme.colors.orange[7],
-
-          '&::before': { backgroundColor: theme.white },
-        },
-        title: { color: theme.white },
-        description: { color: theme.white },
-        closeButton: {
-          color: theme.white,
-          '&:hover': { backgroundColor: theme.colors.orange[7] },
-        },
-      }),
-      radius: 'md',
-      id: 'toggle-edit-mode',
-      autoClose: 10000,
-      title: (
-        <Title order={4}>
-          <Trans
-            i18nKey="layout/header/actions/toggle-edit-mode:popover.title"
-            values={{ size: translatedSize }}
-            components={{
-              1: (
-                <Text
-                  component="a"
-                  style={{ color: 'inherit', textDecoration: 'underline' }}
-                  href="https://homarr.dev/docs/customizations/layout"
-                  target="_blank"
-                />
-              ),
-            }}
-          />
-        </Title>
-      ),
-      message: <Trans i18nKey="layout/header/actions/toggle-edit-mode:popover.text" />,
-    });
-  };
-
-  if (enabled) {
-    return (
-      <Button.Group>
-        <Tooltip label={t('button.disabled')}>
-          <HeaderActionButton onClick={save}>
-            <IconEditCircleOff size={20} stroke={1.5} />
-          </HeaderActionButton>
-        </Tooltip>
-        <AddElementButton />
-      </Button.Group>
-    );
-  }
-  return (
-    <Tooltip label={t('button.disabled')}>
-      <HeaderActionButton onClick={enableEditMode}>
-        <IconEditCircle size={20} stroke={1.5} />
-      </HeaderActionButton>
-    </Tooltip>
-  );
-};
-
-const AddElementButton = () => {
-  const { t } = useTranslation('layout/element-selector/selector');
-  const { classes } = useCardStyles(true);
-
-  return (
-    <Tooltip label={t('actionIcon.tooltip')}>
-      <HeaderActionButton
-        onClick={() =>
-          openContextModal({
-            modal: 'selectElement',
-            title: t('modal.title'),
-            size: 'xl',
-            innerProps: {},
-          })
-        }
-      >
-        <IconApps size={20} stroke={1.5} />
-      </HeaderActionButton>
-    </Tooltip>
-  );
-};
--- a/src/pages/docker.tsx
+++ b/src/pages/docker.tsx
@@ -2,7 +2,7 @@ import { Stack } from '@mantine/core';
 import { ContainerInfo } from 'dockerode';
 import { GetServerSideProps } from 'next';
 import { useState } from 'react';
-import { MainLayout } from '~/components/layout/main';
+import { MainLayout } from '~/components/layout/Templates/MainLayout';
 import { env } from '~/env';
 import ContainerActionBar from '~/modules/Docker/ContainerActionBar';
 import DockerTable from '~/modules/Docker/DockerTable';
--- a/src/pages/manage/boards/index.tsx
+++ b/src/pages/manage/boards/index.tsx
@@ -8,21 +8,14 @@ import {
  LoadingOverlay,
  Menu,
  SimpleGrid,
-  Table,
  Text,
  Title,
 } from '@mantine/core';
 import { useListState } from '@mantine/hooks';
 import { modals } from '@mantine/modals';
-import {
-  IconDotsVertical,
-  IconFile,
-  IconFolderFilled,
-  IconPlus,
-  IconTrash,
-} from '@tabler/icons-react';
+import { IconDotsVertical, IconFolderFilled, IconPlus, IconTrash } from '@tabler/icons-react';
 import Link from 'next/link';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { CommonHeader } from '~/components/layout/common-header';
 import { sleep } from '~/tools/client/time';
 import { api } from '~/utils/api';
@@ -39,7 +32,7 @@ const BoardsPage = () => {
  const [deletingDashboards, { append, filter }] = useListState<string>([]);

  return (
-    <MainLayout>
+    <ManageLayout>
      <CommonHeader>
        <title>Boards • Homarr</title>
      </CommonHeader>
@@ -136,7 +129,7 @@ const BoardsPage = () => {
          ))}
        </SimpleGrid>
      )}
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/manage/index.tsx
+++ b/src/pages/manage/index.tsx
@@ -14,7 +14,7 @@ import { useSession } from 'next-auth/react';
 import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';

 const ManagementPage = () => {
@@ -23,7 +23,7 @@ const ManagementPage = () => {
  const { data: sessionData } = useSession();

  return (
-    <MainLayout>
+    <ManageLayout>
      <Head>
        <title>Manage • Homarr</title>
      </Head>
@@ -98,7 +98,7 @@ const ManagementPage = () => {
          </Card>
        </UnstyledButton>
      </SimpleGrid>
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/manage/settings/index.tsx
+++ b/src/pages/manage/settings/index.tsx
@@ -1,17 +1,17 @@
-import { Title, Text } from '@mantine/core';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { Text, Title } from '@mantine/core';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { CommonHeader } from '~/components/layout/common-header';

 const SettingsPage = () => {
  return (
-    <MainLayout>
+    <ManageLayout>
      <CommonHeader>
        <title>Settings • Homarr</title>
      </CommonHeader>

      <Title>Settings</Title>
      <Text>Coming soon!</Text>
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/manage/users/create.tsx
+++ b/src/pages/manage/users/create.tsx
@@ -1,15 +1,4 @@
-import {
-  Alert,
-  Button,
-  Card,
-  Flex,
-  Group,
-  PasswordInput,
-  Stepper,
-  Table,
-  Text,
-  Title,
-} from '@mantine/core';
+import { Alert, Button, Card, Flex, Group, Stepper, Table, Text, Title } from '@mantine/core';
 import { useForm, zodResolver } from '@mantine/form';
 import {
  IconArrowLeft,
@@ -33,7 +22,7 @@ import {
  CreateAccountSecurityStep,
  createAccountSecurityStepValidationSchema,
 } from '~/components/Admin/CreateNewUser/security-step';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { api } from '~/utils/api';

 const CreateNewUserPage = () => {
@@ -70,7 +59,7 @@ const CreateNewUserPage = () => {
  });

  return (
-    <MainLayout>
+    <ManageLayout>
      <Head>
        <title>Create user • Homarr</title>
      </Head>
@@ -217,7 +206,7 @@ const CreateNewUserPage = () => {
          </Group>
        </Stepper.Completed>
      </Stepper>
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/manage/users/index.tsx
+++ b/src/pages/manage/users/index.tsx
@@ -7,7 +7,6 @@ import {
  Flex,
  Group,
  Pagination,
-  SegmentedControl,
  Table,
  Text,
  Title,
@@ -18,7 +17,7 @@ import { IconPlus, IconTrash } from '@tabler/icons-react';
 import Head from 'next/head';
 import Link from 'next/link';
 import { useState } from 'react';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { api } from '~/utils/api';

 const ManageUsersPage = () => {
@@ -31,7 +30,7 @@ const ManageUsersPage = () => {
  });

  return (
-    <MainLayout>
+    <ManageLayout>
      <Head>
        <title>Users • Homarr</title>
      </Head>
@@ -107,7 +106,9 @@ const ManageUsersPage = () => {
                <tr>
                  <td colSpan={1}>
                    <Box p={15}>
-                      <Text>Your search does not match any entries. Please adjust your filter.</Text>
+                      <Text>
+                        Your search does not match any entries. Please adjust your filter.
+                      </Text>
                    </Box>
                  </td>
                </tr>
@@ -129,7 +130,7 @@ const ManageUsersPage = () => {
          />
        </>
      )}
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/manage/users/invites.tsx
+++ b/src/pages/manage/users/invites.tsx
@@ -14,14 +14,13 @@ import { IconPlus, IconTrash } from '@tabler/icons-react';
 import dayjs from 'dayjs';
 import Head from 'next/head';
 import { useState } from 'react';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { api } from '~/utils/api';

 const ManageUserInvitesPage = () => {
  const [activePage, setActivePage] = useState(0);
-  const { data } =
-    api.registrationTokens.getAllInvites.useQuery({
-      page: activePage
+  const { data } = api.registrationTokens.getAllInvites.useQuery({
+    page: activePage,
  });

  const { classes } = useStyles();
@@ -35,7 +34,7 @@ const ManageUserInvitesPage = () => {
  };

  return (
-    <MainLayout>
+    <ManageLayout>
      <Head>
        <title>User invites • Homarr</title>
      </Head>
@@ -133,7 +132,7 @@ const ManageUserInvitesPage = () => {
          />
        </>
      )}
-    </MainLayout>
+    </ManageLayout>
  );
 };

--- a/src/pages/user/preferences.tsx
+++ b/src/pages/user/preferences.tsx
@@ -5,7 +5,7 @@ import { GetServerSidePropsContext } from 'next';
 import { forwardRef } from 'react';
 import { z } from 'zod';
 import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
-import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { ManageLayout } from '~/components/layout/Templates/ManageLayout';
 import { CommonHeader } from '~/components/layout/common-header';
 import { languages } from '~/tools/language';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -17,14 +17,14 @@ const PreferencesPage = ({ locale }: InferGetServerSidePropsType<typeof getServe
  const { data } = api.user.getWithSettings.useQuery();

  return (
-    <MainLayout>
+    <ManageLayout>
      <CommonHeader>
        <title>Preferences • Homarr</title>
      </CommonHeader>
      <Title mb="xl">Preferences</Title>

      {data && <SettingsComponent settings={data.settings} />}
-    </MainLayout>
+    </ManageLayout>
  );
 };

@@ -78,7 +78,7 @@ const SettingsComponent = ({
            searchable
            maxDropdownHeight={400}
            filter={(value, item) =>
-              item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
+              item.label!.toLowerCase().includes(value.toLowerCase().trim()) ||
              item.description.toLowerCase().includes(value.toLowerCase().trim())
            }
            defaultValue={settings.language}
				`@@ -1 +0,0 @@`
				`export { OverseerrModule } from './OverseerrModule';`