diff --git a/.gitignore b/.gitignore
index 6b4c33b50..8327c8b84 100644
--- a/.gitignore
+++ b/.gitignore
@@ -51,4 +51,7 @@ yarn-error.log*
 db.sqlite
 
 # logs
-*.log
\ No newline at end of file
+*.log
+
+apps/tasks/tasks.cjs
+apps/websocket/wssServer.cjs
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b59ae4f97..53c760db0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,9 +6,10 @@
   ],
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "js/ts.implicitProjectConfig.experimentalDecorators": true,
+  "prettier.configPath": "./tooling/prettier/index.mjs",
   "cSpell.words": [
     "superjson",
     "homarr",
     "trpc"
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/nextjs/next.config.mjs b/apps/nextjs/next.config.mjs
index 26bb9d9c1..fcf1321a4 100644
--- a/apps/nextjs/next.config.mjs
+++ b/apps/nextjs/next.config.mjs
@@ -10,19 +10,9 @@ const config = {
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
   experimental: {
-    optimizePackageImports: [
-      "@mantine/core",
-      "@mantine/hooks",
-      "@tabler/icons-react",
-    ],
+    optimizePackageImports: ["@mantine/core", "@mantine/hooks", "@tabler/icons-react"],
   },
-  transpilePackages: [
-    "@homarr/ui",
-    "@homarr/notifications",
-    "@homarr/modals",
-    "@homarr/spotlight",
-    "@homarr/widgets",
-  ],
+  transpilePackages: ["@homarr/ui", "@homarr/notifications", "@homarr/modals", "@homarr/spotlight", "@homarr/widgets"],
   images: {
     domains: ["cdn.jsdelivr.net"],
   },
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index 0515c0ca7..9e1989e46 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -29,15 +29,16 @@
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "@homarr/widgets": "workspace:^0.1.0",
-    "@mantine/colors-generator": "^7.9.1",
-    "@mantine/hooks": "^7.9.1",
-    "@mantine/modals": "^7.9.1",
-    "@mantine/tiptap": "^7.9.1",
+    "@mantine/colors-generator": "^7.9.2",
+    "@mantine/hooks": "^7.9.2",
+    "@mantine/modals": "^7.9.2",
+    "@mantine/tiptap": "^7.9.2",
+    "@homarr/server-settings": "workspace:^0.1.0",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.36.2",
-    "@tanstack/react-query-devtools": "^5.36.2",
-    "@tanstack/react-query-next-experimental": "5.36.2",
-    "@trpc/client": "11.0.0-rc.373",
+    "@tanstack/react-query": "^5.37.1",
+    "@tanstack/react-query-devtools": "^5.37.1",
+    "@tanstack/react-query-next-experimental": "5.37.1",
+    "@trpc/client": "11.0.0-rc.374",
     "@trpc/next": "next",
     "@trpc/react-query": "next",
     "@trpc/server": "next",
@@ -47,13 +48,14 @@
     "chroma-js": "^2.4.2",
     "dayjs": "^1.11.11",
     "dotenv": "^16.4.5",
+    "flag-icons": "^7.2.1",
     "glob": "^10.3.15",
     "jotai": "^2.8.0",
     "next": "^14.2.3",
     "postcss-preset-mantine": "^1.15.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "sass": "^1.77.1",
+    "sass": "^1.77.2",
     "superjson": "2.2.1",
     "use-deep-compare-effect": "^1.8.1"
   },
@@ -68,7 +70,7 @@
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "prettier": "^3.2.5",
-    "tsx": "4.10.3",
+    "tsx": "4.10.5",
     "typescript": "^5.4.5"
   },
   "eslintConfig": {
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx b/apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx
index 626296d69..8297a73bb 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/next-international.tsx
@@ -3,10 +3,7 @@ import type { PropsWithChildren } from "react";
 import { defaultLocale } from "@homarr/translation";
 import { I18nProviderClient } from "@homarr/translation/client";
 
-export const NextInternationalProvider = ({
-  children,
-  locale,
-}: PropsWithChildren<{ locale: string }>) => {
+export const NextInternationalProvider = ({ children, locale }: PropsWithChildren<{ locale: string }>) => {
   return (
     <I18nProviderClient locale={locale} fallback={defaultLocale}>
       {children}
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/session.tsx b/apps/nextjs/src/app/[locale]/_client-providers/session.tsx
index 5ed469e1c..d4e0538db 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/session.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/session.tsx
@@ -9,9 +9,6 @@ interface AuthProviderProps {
   session: Session | null;
 }
 
-export const AuthProvider = ({
-  children,
-  session,
-}: PropsWithChildren<AuthProviderProps>) => {
+export const AuthProvider = ({ children, session }: PropsWithChildren<AuthProviderProps>) => {
   return <SessionProvider session={session}>{children}</SessionProvider>;
 };
diff --git a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
index 00a923407..db34ced95 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/trpc.tsx
@@ -5,12 +5,7 @@ import { useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
-import {
-  createWSClient,
-  loggerLink,
-  unstable_httpBatchStreamLink,
-  wsLink,
-} from "@trpc/client";
+import { createWSClient, loggerLink, unstable_httpBatchStreamLink, wsLink } from "@trpc/client";
 import superjson from "superjson";
 
 import type { AppRouter } from "@homarr/api";
@@ -37,8 +32,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
       links: [
         loggerLink({
           enabled: (opts) =>
-            process.env.NODE_ENV === "development" ||
-            (opts.direction === "down" && opts.result instanceof Error),
+            process.env.NODE_ENV === "development" || (opts.direction === "down" && opts.result instanceof Error),
         }),
         (args) => {
           return ({ op, next }) => {
@@ -69,9 +63,7 @@ export function TRPCReactProvider(props: PropsWithChildren) {
   return (
     <clientApi.Provider client={trpcClient} queryClient={queryClient}>
       <QueryClientProvider client={queryClient}>
-        <ReactQueryStreamedHydration transformer={superjson}>
-          {props.children}
-        </ReactQueryStreamedHydration>
+        <ReactQueryStreamedHydration transformer={superjson}>{props.children}</ReactQueryStreamedHydration>
         <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
     </clientApi.Provider>
diff --git a/apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx b/apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx
index 091bcfa78..b1986f12c 100644
--- a/apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx
@@ -4,11 +4,8 @@ import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -24,18 +21,15 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
   const t = useScopedI18n("user");
   const router = useRouter();
   const { mutate, isPending } = clientApi.user.register.useMutation();
-  const form = useForm<FormType>({
-    validate: zodResolver(validation.user.registration),
+  const form = useZodForm(validation.user.registration, {
     initialValues: {
       username: "",
       password: "",
       confirmPassword: "",
     },
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
   });
 
-  const handleSubmit = (values: FormType) => {
+  const handleSubmit = (values: z.infer<typeof validation.user.registration>) => {
     mutate(
       {
         ...values,
@@ -69,11 +63,7 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     <Stack gap="xl">
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack gap="lg">
-          <TextInput
-            label={t("field.username.label")}
-            autoComplete="off"
-            {...form.getInputProps("username")}
-          />
+          <TextInput label={t("field.username.label")} autoComplete="off" {...form.getInputProps("username")} />
           <PasswordInput
             label={t("field.password.label")}
             autoComplete="new-password"
@@ -93,5 +83,3 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     </Stack>
   );
 };
-
-type FormType = z.infer<typeof validation.user.registration>;
diff --git a/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx b/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
index a7441022d..989406228 100644
--- a/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx
@@ -18,18 +18,12 @@ interface InviteUsagePageProps {
   };
 }
 
-export default async function InviteUsagePage({
-  params,
-  searchParams,
-}: InviteUsagePageProps) {
+export default async function InviteUsagePage({ params, searchParams }: InviteUsagePageProps) {
   const session = await auth();
   if (session) notFound();
 
   const invite = await db.query.invites.findFirst({
-    where: and(
-      eq(invites.id, params.id),
-      eq(invites.token, searchParams.token),
-    ),
+    where: and(eq(invites.id, params.id), eq(invites.token, searchParams.token)),
     columns: {
       id: true,
       token: true,
diff --git a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
index ec5edf3a5..d0345ec72 100644
--- a/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
+++ b/apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx
@@ -2,22 +2,12 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  Alert,
-  Button,
-  PasswordInput,
-  rem,
-  Stack,
-  TextInput,
-} from "@mantine/core";
+import { Alert, Button, PasswordInput, rem, Stack, TextInput } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { signIn } from "@homarr/auth/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -27,15 +17,14 @@ export const LoginForm = () => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
-  const form = useForm<FormType>({
-    validate: zodResolver(validation.user.signIn),
+  const form = useZodForm(validation.user.signIn, {
     initialValues: {
       name: "",
       password: "",
     },
   });
 
-  const handleSubmitAsync = async (values: FormType) => {
+  const handleSubmitAsync = async (values: z.infer<typeof validation.user.signIn>) => {
     setIsLoading(true);
     setError(undefined);
     await signIn("credentials", {
@@ -66,18 +55,10 @@ export const LoginForm = () => {
 
   return (
     <Stack gap="xl">
-      <form
-        onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}
-      >
+      <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
         <Stack gap="lg">
-          <TextInput
-            label={t("field.username.label")}
-            {...form.getInputProps("name")}
-          />
-          <PasswordInput
-            label={t("field.password.label")}
-            {...form.getInputProps("password")}
-          />
+          <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
+          <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
           <Button type="submit" fullWidth loading={isLoading}>
             {t("action.login.label")}
           </Button>
@@ -92,5 +73,3 @@ export const LoginForm = () => {
     </Stack>
   );
 };
-
-type FormType = z.infer<typeof validation.user.signIn>;
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/(default)/_definition.ts b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
similarity index 81%
rename from apps/nextjs/src/app/[locale]/boards/(content)/(default)/_definition.ts
rename to apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
index 79a6a42c2..2357d7424 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/(default)/_definition.ts
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/_definition.ts
@@ -4,6 +4,6 @@ import { createBoardContentPage } from "../_creator";
 
 export default createBoardContentPage<{ locale: string }>({
   async getInitialBoardAsync() {
-    return await api.board.getDefaultBoard();
+    return await api.board.getHomeBoard();
   },
 });
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/(default)/layout.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/layout.tsx
similarity index 100%
rename from apps/nextjs/src/app/[locale]/boards/(content)/(default)/layout.tsx
rename to apps/nextjs/src/app/[locale]/boards/(content)/(home)/layout.tsx
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/(default)/page.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/(home)/page.tsx
similarity index 100%
rename from apps/nextjs/src/app/[locale]/boards/(content)/(default)/page.tsx
rename to apps/nextjs/src/app/[locale]/boards/(content)/(home)/page.tsx
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
index 3faac9877..ea80dc68b 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_client.tsx
@@ -18,9 +18,7 @@ export const updateBoardName = (name: string | null) => {
   boardName = name;
 };
 
-type UpdateCallback = (
-  prev: RouterOutputs["board"]["getDefaultBoard"],
-) => RouterOutputs["board"]["getDefaultBoard"];
+type UpdateCallback = (prev: RouterOutputs["board"]["getHomeBoard"]) => RouterOutputs["board"]["getHomeBoard"];
 
 export const useUpdateBoard = () => {
   const utils = clientApi.useUtils();
@@ -46,9 +44,7 @@ export const ClientBoard = () => {
   const board = useRequiredBoard();
   const isReady = useIsBoardReady();
 
-  const sortedSections = board.sections.sort(
-    (sectionA, sectionB) => sectionA.position - sectionB.position,
-  );
+  const sortedSections = board.sections.sort((sectionA, sectionB) => sectionA.position - sectionB.position);
 
   const ref = useRef<HTMLDivElement>(null);
 
@@ -61,24 +57,12 @@ export const ClientBoard = () => {
         loaderProps={{ size: "lg" }}
         h={fullHeightWithoutHeaderAndFooter}
       />
-      <Stack
-        ref={ref}
-        h="100%"
-        style={{ visibility: isReady ? "visible" : "hidden" }}
-      >
+      <Stack ref={ref} h="100%" style={{ visibility: isReady ? "visible" : "hidden" }}>
         {sortedSections.map((section) =>
           section.kind === "empty" ? (
-            <BoardEmptySection
-              key={section.id}
-              section={section}
-              mainRef={ref}
-            />
+            <BoardEmptySection key={section.id} section={section} mainRef={ref} />
           ) : (
-            <BoardCategorySection
-              key={section.id}
-              section={section}
-              mainRef={ref}
-            />
+            <BoardCategorySection key={section.id} section={section} mainRef={ref} />
           ),
         )}
       </Stack>
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
index 5fbb6886d..a5ab76c03 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
@@ -1,13 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -16,7 +10,7 @@ import { clientApi } from "@homarr/api/client";
 import { updateBoardName } from "./_client";
 
 const BoardContext = createContext<{
-  board: RouterOutputs["board"]["getDefaultBoard"];
+  board: RouterOutputs["board"]["getHomeBoard"];
   isReady: boolean;
   markAsReady: (id: string) => void;
 } | null>(null);
@@ -52,18 +46,12 @@ export const BoardProvider = ({
   }, [pathname, utils, initialBoard.name]);
 
   useEffect(() => {
-    setReadySections((previous) =>
-      previous.filter((id) =>
-        data.sections.some((section) => section.id === id),
-      ),
-    );
+    setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.sections.length, setReadySections]);
 
   const markAsReady = useCallback((id: string) => {
-    setReadySections((previous) =>
-      previous.includes(id) ? previous : [...previous, id],
-    );
+    setReadySections((previous) => (previous.includes(id) ? previous : [...previous, id]));
   }, []);
 
   return (
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
index badc80a07..fe56c11ea 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_creator.tsx
@@ -1,11 +1,12 @@
 import type { Metadata } from "next";
 import { TRPCError } from "@trpc/server";
 
-import { capitalize } from "@homarr/common";
-
 // Placed here because gridstack styles are used for board content
 import "~/styles/gridstack.scss";
 
+import { getI18n } from "@homarr/translation/server";
+
+import { createMetaTitle } from "~/metadata";
 import { createBoardLayout } from "../_layout-creator";
 import type { Board } from "../_types";
 import { ClientBoard } from "./_client";
@@ -17,9 +18,7 @@ interface Props<TParams extends Params> {
   getInitialBoardAsync: (params: TParams) => Promise<Board>;
 }
 
-export const createBoardContentPage = <
-  TParams extends Record<string, unknown>,
->({
+export const createBoardContentPage = <TParams extends Record<string, unknown>>({
   getInitialBoardAsync: getInitialBoard,
 }: Props<TParams>) => {
   return {
@@ -31,16 +30,13 @@ export const createBoardContentPage = <
     page: () => {
       return <ClientBoard />;
     },
-    generateMetadataAsync: async ({
-      params,
-    }: {
-      params: TParams;
-    }): Promise<Metadata> => {
+    generateMetadataAsync: async ({ params }: { params: TParams }): Promise<Metadata> => {
       try {
         const board = await getInitialBoard(params);
+        const t = await getI18n();
 
         return {
-          title: board.metaTitle ?? `${capitalize(board.name)} board | Homarr`,
+          title: board.metaTitle ?? createMetaTitle(t("board.content.metaTitle", { boardName: board.name })),
           icons: {
             icon: board.faviconImageUrl ? board.faviconImageUrl : undefined,
           },
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_custom-css.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_custom-css.tsx
new file mode 100644
index 000000000..ab01aff39
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_custom-css.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { useRequiredBoard } from "./_context";
+
+export const CustomCss = () => {
+  const board = useRequiredBoard();
+
+  return <style>{board.customCss}</style>;
+};
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
index 33abb0661..79c019dad 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_header-actions.tsx
@@ -16,10 +16,7 @@ import { useAtom, useAtomValue } from "jotai";
 
 import { clientApi } from "@homarr/api/client";
 import { useModalAction } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
@@ -54,8 +51,7 @@ export const BoardContentHeaderActions = () => {
 };
 
 const AddMenu = () => {
-  const { openModal: openCategoryEditModal } =
-    useModalAction(CategoryEditModal);
+  const { openModal: openCategoryEditModal } = useModalAction(CategoryEditModal);
   const { openModal: openItemSelectModal } = useModalAction(ItemSelectModal);
   const { addCategoryToEnd } = useCategoryActions();
   const t = useI18n();
@@ -95,22 +91,14 @@ const AddMenu = () => {
         </HeaderButton>
       </Menu.Target>
       <Menu.Dropdown style={{ transform: "translate(-3px, 0)" }}>
-        <Menu.Item
-          leftSection={<IconBox size={20} />}
-          onClick={handleSelectItem}
-        >
+        <Menu.Item leftSection={<IconBox size={20} />} onClick={handleSelectItem}>
           {t("item.action.create")}
         </Menu.Item>
-        <Menu.Item leftSection={<IconPackageImport size={20} />}>
-          {t("item.action.import")}
-        </Menu.Item>
+        <Menu.Item leftSection={<IconPackageImport size={20} />}>{t("item.action.import")}</Menu.Item>
 
         <Menu.Divider />
 
-        <Menu.Item
-          leftSection={<IconBoxAlignTop size={20} />}
-          onClick={handleAddCategory}
-        >
+        <Menu.Item leftSection={<IconBoxAlignTop size={20} />} onClick={handleAddCategory}>
           {t("section.category.action.create")}
         </Menu.Item>
       </Menu.Dropdown>
@@ -123,24 +111,23 @@ const EditModeMenu = () => {
   const board = useRequiredBoard();
   const utils = clientApi.useUtils();
   const t = useScopedI18n("board.action.edit");
-  const { mutate: saveBoard, isPending } =
-    clientApi.board.saveBoard.useMutation({
-      onSuccess() {
-        showSuccessNotification({
-          title: t("notification.success.title"),
-          message: t("notification.success.message"),
-        });
-        void utils.board.getBoardByName.invalidate({ name: board.name });
-        void revalidatePathActionAsync(`/boards/${board.name}`);
-        setEditMode(false);
-      },
-      onError() {
-        showErrorNotification({
-          title: t("notification.error.title"),
-          message: t("notification.error.message"),
-        });
-      },
-    });
+  const { mutate: saveBoard, isPending } = clientApi.board.saveBoard.useMutation({
+    onSuccess() {
+      showSuccessNotification({
+        title: t("notification.success.title"),
+        message: t("notification.success.message"),
+      });
+      void utils.board.getBoardByName.invalidate({ name: board.name });
+      void revalidatePathActionAsync(`/boards/${board.name}`);
+      setEditMode(false);
+    },
+    onError() {
+      showErrorNotification({
+        title: t("notification.error.title"),
+        message: t("notification.error.message"),
+      });
+    },
+  });
 
   const toggle = useCallback(() => {
     if (isEditMode) return saveBoard(board);
@@ -149,11 +136,7 @@ const EditModeMenu = () => {
 
   return (
     <HeaderButton onClick={toggle} loading={isPending}>
-      {isEditMode ? (
-        <IconPencilOff stroke={1.5} />
-      ) : (
-        <IconPencil stroke={1.5} />
-      )}
+      {isEditMode ? <IconPencilOff stroke={1.5} /> : <IconPencil stroke={1.5} />}
     </HeaderButton>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
index 48c8a829d..bf68bb902 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -22,9 +22,7 @@ export const BoardMantineProvider = ({ children }: PropsWithChildren) => {
 };
 
 export const generateColors = (hex: string) => {
-  const lightnessForColors = [
-    -0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2,
-  ] as const;
+  const lightnessForColors = [-0.25, -0.2, -0.15, -0.1, -0.05, 0, 0.05, 0.1, 0.15, 0.2] as const;
   const rgbaColors = lightnessForColors.map((lightness) => {
     if (lightness < 0) {
       return lighten(hex, -lightness);
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
index c90192bfa..5739e98b6 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
@@ -44,11 +44,7 @@ export const AccessSettingsContent = ({ board, initialPermissions }: Props) => {
         <Tabs.List grow>
           <TabItem value="user" count={counts.user} icon={IconUser} />
           <TabItem value="group" count={counts.group} icon={IconUsersGroup} />
-          <TabItem
-            value="inherited"
-            count={initialPermissions.inherited.length}
-            icon={IconUserDown}
-          />
+          <TabItem value="inherited" count={initialPermissions.inherited.length} icon={IconUserDown} />
         </Tabs.List>
 
         <Tabs.Panel value="user">
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx
index 392e5a36d..4a370051a 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/board-access-table-rows.tsx
@@ -1,21 +1,8 @@
 import { useCallback } from "react";
 import type { ReactNode } from "react";
 import type { SelectProps } from "@mantine/core";
-import {
-  Button,
-  Flex,
-  Group,
-  Select,
-  TableTd,
-  TableTr,
-  Text,
-} from "@mantine/core";
-import {
-  IconCheck,
-  IconEye,
-  IconPencil,
-  IconSettings,
-} from "@tabler/icons-react";
+import { Button, Flex, Group, Select, TableTd, TableTr, Text } from "@mantine/core";
+import { IconCheck, IconEye, IconPencil, IconSettings } from "@tabler/icons-react";
 
 import type { BoardPermission } from "@homarr/definitions";
 import { boardPermissions } from "@homarr/definitions";
@@ -38,12 +25,7 @@ interface BoardAccessSelectRowProps {
   onCountChange: OnCountChange;
 }
 
-export const BoardAccessSelectRow = ({
-  itemContent,
-  permission,
-  index,
-  onCountChange,
-}: BoardAccessSelectRowProps) => {
+export const BoardAccessSelectRow = ({ itemContent, permission, index, onCountChange }: BoardAccessSelectRowProps) => {
   const tRoot = useI18n();
   const tPermissions = useScopedI18n("board.setting.section.access.permission");
   const form = useFormContext();
@@ -61,11 +43,7 @@ export const BoardAccessSelectRow = ({
     <TableTr>
       <TableTd w={{ sm: 128, lg: 256 }}>{itemContent}</TableTd>
       <TableTd>
-        <Flex
-          direction={{ base: "column", xs: "row" }}
-          align={{ base: "end", xs: "center" }}
-          wrap="nowrap"
-        >
+        <Flex direction={{ base: "column", xs: "row" }} align={{ base: "end", xs: "center" }} wrap="nowrap">
           <Select
             allowDeselect={false}
             flex="1"
@@ -93,10 +71,7 @@ interface BoardAccessDisplayRowProps {
   permission: BoardPermission | "board-full";
 }
 
-export const BoardAccessDisplayRow = ({
-  itemContent,
-  permission,
-}: BoardAccessDisplayRowProps) => {
+export const BoardAccessDisplayRow = ({ itemContent, permission }: BoardAccessDisplayRowProps) => {
   const tPermissions = useScopedI18n("board.setting.section.access.permission");
   const Icon = icons[permission];
 
@@ -106,10 +81,7 @@ export const BoardAccessDisplayRow = ({
       <TableTd>
         <Group gap={0}>
           <Flex w={34} h={34} align="center" justify="center">
-            <Icon
-              size="1rem"
-              color="var(--input-section-color, var(--mantine-color-dimmed))"
-            />
+            <Icon size="1rem" color="var(--input-section-color, var(--mantine-color-dimmed))" />
           </Flex>
           <Text size="sm">{tPermissions(`item.${permission}.label`)}</Text>
         </Group>
@@ -131,9 +103,7 @@ const RenderOption: SelectProps["renderOption"] = ({ option, checked }) => {
     <Group flex="1" gap="xs" wrap="nowrap">
       <Icon {...iconProps} />
       {option.label}
-      {checked && (
-        <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />
-      )}
+      {checked && <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />}
     </Group>
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
index 874376fc0..08520b9d5 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/form.ts
@@ -8,7 +8,6 @@ export interface BoardAccessFormType {
   }[];
 }
 
-export const [FormProvider, useFormContext, useForm] =
-  createFormContext<BoardAccessFormType>();
+export const [FormProvider, useFormContext, useForm] = createFormContext<BoardAccessFormType>();
 
 export type OnCountChange = (callback: (prev: number) => number) => void;
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
index 4ea047eca..f465b6c08 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
@@ -1,16 +1,6 @@
 import { useCallback, useState } from "react";
 import Link from "next/link";
-import {
-  Anchor,
-  Button,
-  Group,
-  Stack,
-  Table,
-  TableTbody,
-  TableTh,
-  TableThead,
-  TableTr,
-} from "@mantine/core";
+import { Anchor, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -24,30 +14,21 @@ import { FormProvider, useForm } from "./form";
 import { GroupSelectModal } from "./group-select-modal";
 import type { FormProps } from "./user-access";
 
-export const GroupsForm = ({
-  board,
-  initialPermissions,
-  onCountChange,
-}: FormProps) => {
-  const { mutate, isPending } =
-    clientApi.board.saveGroupBoardPermissions.useMutation();
+export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
+  const { mutate, isPending } = clientApi.board.saveGroupBoardPermissions.useMutation();
   const utils = clientApi.useUtils();
   const [groups, setGroups] = useState<Map<string, Group>>(
-    new Map(
-      initialPermissions.groupPermissions.map(({ group }) => [group.id, group]),
-    ),
+    new Map(initialPermissions.groupPermissions.map(({ group }) => [group.id, group])),
   );
   const { openModal } = useModalAction(GroupSelectModal);
   const t = useI18n();
   const tPermissions = useScopedI18n("board.setting.section.access.permission");
   const form = useForm({
     initialValues: {
-      items: initialPermissions.groupPermissions.map(
-        ({ group, permission }) => ({
-          itemId: group.id,
-          permission,
-        }),
-      ),
+      items: initialPermissions.groupPermissions.map(({ group, permission }) => ({
+        itemId: group.id,
+        permission,
+      })),
     },
   });
 
@@ -92,9 +73,7 @@ export const GroupsForm = ({
           <Table>
             <TableThead>
               <TableTr>
-                <TableTh style={{ whiteSpace: "nowrap" }}>
-                  {tPermissions("field.group.label")}
-                </TableTh>
+                <TableTh style={{ whiteSpace: "nowrap" }}>{tPermissions("field.group.label")}</TableTh>
                 <TableTh>{tPermissions("field.permission.label")}</TableTh>
               </TableTr>
             </TableThead>
@@ -102,9 +81,7 @@ export const GroupsForm = ({
               {form.values.items.map((row, index) => (
                 <BoardAccessSelectRow
                   key={row.itemId}
-                  itemContent={
-                    <GroupItemContent group={groups.get(row.itemId)!} />
-                  }
+                  itemContent={<GroupItemContent group={groups.get(row.itemId)!} />}
                   permission={row.permission}
                   index={index}
                   onCountChange={onCountChange}
@@ -114,11 +91,7 @@ export const GroupsForm = ({
           </Table>
 
           <Group justify="space-between">
-            <Button
-              rightSection={<IconPlus size="1rem" />}
-              variant="light"
-              onClick={handleAddUser}
-            >
+            <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
             <Button type="submit" loading={isPending} color="teal">
@@ -133,16 +106,10 @@ export const GroupsForm = ({
 
 export const GroupItemContent = ({ group }: { group: Group }) => {
   return (
-    <Anchor
-      component={Link}
-      href={`/manage/users/groups/${group.id}`}
-      size="sm"
-      style={{ whiteSpace: "nowrap" }}
-    >
+    <Anchor component={Link} href={`/manage/users/groups/${group.id}`} size="sm" style={{ whiteSpace: "nowrap" }}>
       {group.name}
     </Anchor>
   );
 };
 
-type Group =
-  RouterOutputs["board"]["getBoardPermissions"]["groupPermissions"][0]["group"];
+type Group = RouterOutputs["board"]["getBoardPermissions"]["groupPermissions"][0]["group"];
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx
index 27a76627c..ef7ff2d5e 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-select-modal.tsx
@@ -16,59 +16,52 @@ interface GroupSelectFormType {
   groupId: string;
 }
 
-export const GroupSelectModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const { data: groups, isPending } = clientApi.group.selectable.useQuery();
-    const [loading, setLoading] = useState(false);
-    const form = useForm<GroupSelectFormType>();
-    const handleSubmitAsync = async (values: GroupSelectFormType) => {
-      const currentGroup = groups?.find((group) => group.id === values.groupId);
-      if (!currentGroup) return;
-      setLoading(true);
-      await innerProps.onSelect({
-        id: currentGroup.id,
-        name: currentGroup.name,
-      });
+export const GroupSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const { data: groups, isPending } = clientApi.group.selectable.useQuery();
+  const [loading, setLoading] = useState(false);
+  const form = useForm<GroupSelectFormType>();
+  const handleSubmitAsync = async (values: GroupSelectFormType) => {
+    const currentGroup = groups?.find((group) => group.id === values.groupId);
+    if (!currentGroup) return;
+    setLoading(true);
+    await innerProps.onSelect({
+      id: currentGroup.id,
+      name: currentGroup.name,
+    });
 
-      setLoading(false);
-      actions.closeModal();
-    };
+    setLoading(false);
+    actions.closeModal();
+  };
 
-    const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+  const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
 
-    return (
-      <form
-        onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}
-      >
-        <Stack>
-          <Select
-            {...form.getInputProps("groupId")}
-            label={t("group.action.select.label")}
-            clearable
-            searchable
-            leftSection={isPending ? <Loader size="xs" /> : undefined}
-            nothingFoundMessage={t("group.action.select.notFound")}
-            limit={5}
-            data={groups
-              ?.filter(
-                (group) => !innerProps.presentGroupIds.includes(group.id),
-              )
-              .map((group) => ({ value: group.id, label: group.name }))}
-          />
-          <Group justify="end">
-            <Button variant="default" onClick={actions.closeModal}>
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit" loading={loading}>
-              {confirmLabel}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    );
-  },
-).withOptions({
-  defaultTitle: (t) =>
-    t("board.setting.section.access.permission.groupSelect.title"),
+  return (
+    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+      <Stack>
+        <Select
+          {...form.getInputProps("groupId")}
+          label={t("group.action.select.label")}
+          clearable
+          searchable
+          leftSection={isPending ? <Loader size="xs" /> : undefined}
+          nothingFoundMessage={t("group.action.select.notFound")}
+          limit={5}
+          data={groups
+            ?.filter((group) => !innerProps.presentGroupIds.includes(group.id))
+            .map((group) => ({ value: group.id, label: group.name }))}
+        />
+        <Group justify="end">
+          <Button variant="default" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={loading}>
+            {confirmLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle: (t) => t("board.setting.section.access.permission.groupSelect.title"),
 });
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
index 6cd45b821..d887ee696 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/inherit-access.tsx
@@ -1,11 +1,4 @@
-import {
-  Stack,
-  Table,
-  TableTbody,
-  TableTh,
-  TableThead,
-  TableTr,
-} from "@mantine/core";
+import { Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { getPermissionsWithChildren } from "@homarr/definitions";
@@ -41,9 +34,7 @@ export const InheritTable = ({ initialPermissions }: InheritTableProps) => {
             const boardPermission =
               permission in mapPermissions
                 ? mapPermissions[permission as keyof typeof mapPermissions]
-                : getPermissionsWithChildren([permission]).includes(
-                      "board-full-access",
-                    )
+                : getPermissionsWithChildren([permission]).includes("board-full-access")
                   ? "board-full"
                   : null;
 
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
index 6699a220b..8ed7e98ee 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
@@ -1,17 +1,6 @@
 import { useCallback, useState } from "react";
 import Link from "next/link";
-import {
-  Anchor,
-  Box,
-  Button,
-  Group,
-  Stack,
-  Table,
-  TableTbody,
-  TableTh,
-  TableThead,
-  TableTr,
-} from "@mantine/core";
+import { Anchor, Box, Button, Group, Stack, Table, TableTbody, TableTh, TableThead, TableTr } from "@mantine/core";
 import { IconPlus } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
@@ -21,10 +10,7 @@ import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
 
 import type { Board } from "../../../_types";
-import {
-  BoardAccessDisplayRow,
-  BoardAccessSelectRow,
-} from "./board-access-table-rows";
+import { BoardAccessDisplayRow, BoardAccessSelectRow } from "./board-access-table-rows";
 import type { BoardAccessFormType, OnCountChange } from "./form";
 import { FormProvider, useForm } from "./form";
 import { UserSelectModal } from "./user-select-modal";
@@ -35,18 +21,11 @@ export interface FormProps {
   onCountChange: OnCountChange;
 }
 
-export const UsersForm = ({
-  board,
-  initialPermissions,
-  onCountChange,
-}: FormProps) => {
-  const { mutate, isPending } =
-    clientApi.board.saveUserBoardPermissions.useMutation();
+export const UsersForm = ({ board, initialPermissions, onCountChange }: FormProps) => {
+  const { mutate, isPending } = clientApi.board.saveUserBoardPermissions.useMutation();
   const utils = clientApi.useUtils();
   const [users, setUsers] = useState<Map<string, User>>(
-    new Map(
-      initialPermissions.userPermissions.map(({ user }) => [user.id, user]),
-    ),
+    new Map(initialPermissions.userPermissions.map(({ user }) => [user.id, user])),
   );
   const { openModal } = useModalAction(UserSelectModal);
   const t = useI18n();
@@ -81,9 +60,7 @@ export const UsersForm = ({
     const presentUserIds = form.values.items.map(({ itemId: id }) => id);
 
     openModal({
-      presentUserIds: board.creatorId
-        ? presentUserIds.concat(board.creatorId)
-        : presentUserIds,
+      presentUserIds: board.creatorId ? presentUserIds.concat(board.creatorId) : presentUserIds,
       onSelect: (user) => {
         setUsers((prev) => new Map(prev).set(user.id, user));
         form.setFieldValue("items", [
@@ -111,17 +88,12 @@ export const UsersForm = ({
             </TableThead>
             <TableTbody>
               {board.creator && (
-                <BoardAccessDisplayRow
-                  itemContent={<UserItemContent user={board.creator} />}
-                  permission="board-full"
-                />
+                <BoardAccessDisplayRow itemContent={<UserItemContent user={board.creator} />} permission="board-full" />
               )}
               {form.values.items.map((row, index) => (
                 <BoardAccessSelectRow
                   key={row.itemId}
-                  itemContent={
-                    <UserItemContent user={users.get(row.itemId)!} />
-                  }
+                  itemContent={<UserItemContent user={users.get(row.itemId)!} />}
                   permission={row.permission}
                   index={index}
                   onCountChange={onCountChange}
@@ -131,11 +103,7 @@ export const UsersForm = ({
           </Table>
 
           <Group justify="space-between">
-            <Button
-              rightSection={<IconPlus size="1rem" />}
-              variant="light"
-              onClick={handleAddUser}
-            >
+            <Button rightSection={<IconPlus size="1rem" />} variant="light" onClick={handleAddUser}>
               {t("common.action.add")}
             </Button>
             <Button type="submit" loading={isPending} color="teal">
@@ -154,12 +122,7 @@ const UserItemContent = ({ user }: { user: User }) => {
       <Box visibleFrom="xs">
         <UserAvatar user={user} size="sm" />
       </Box>
-      <Anchor
-        component={Link}
-        href={`/manage/users/${user.id}`}
-        size="sm"
-        style={{ whiteSpace: "nowrap" }}
-      >
+      <Anchor component={Link} href={`/manage/users/${user.id}`} size="sm" style={{ whiteSpace: "nowrap" }}>
         {user.name}
       </Anchor>
     </Group>
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx
index ae4bebfd7..d4c4946ff 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-select-modal.tsx
@@ -12,11 +12,7 @@ import { UserAvatar } from "@homarr/ui";
 
 interface InnerProps {
   presentUserIds: string[];
-  onSelect: (props: {
-    id: string;
-    name: string;
-    image: string;
-  }) => void | Promise<void>;
+  onSelect: (props: { id: string; name: string; image: string }) => void | Promise<void>;
   confirmLabel?: string;
 }
 
@@ -24,68 +20,59 @@ interface UserSelectFormType {
   userId: string;
 }
 
-export const UserSelectModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const { data: users, isPending } = clientApi.user.selectable.useQuery();
-    const [loading, setLoading] = useState(false);
-    const form = useForm<UserSelectFormType>();
-    const handleSubmitAsync = async (values: UserSelectFormType) => {
-      const currentUser = users?.find((user) => user.id === values.userId);
-      if (!currentUser) return;
-      setLoading(true);
-      await innerProps.onSelect({
-        id: currentUser.id,
-        name: currentUser.name ?? "",
-        image: currentUser.image ?? "",
-      });
+export const UserSelectModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const { data: users, isPending } = clientApi.user.selectable.useQuery();
+  const [loading, setLoading] = useState(false);
+  const form = useForm<UserSelectFormType>();
+  const handleSubmitAsync = async (values: UserSelectFormType) => {
+    const currentUser = users?.find((user) => user.id === values.userId);
+    if (!currentUser) return;
+    setLoading(true);
+    await innerProps.onSelect({
+      id: currentUser.id,
+      name: currentUser.name ?? "",
+      image: currentUser.image ?? "",
+    });
 
-      setLoading(false);
-      actions.closeModal();
-    };
+    setLoading(false);
+    actions.closeModal();
+  };
 
-    const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
-    const currentUser = users?.find((user) => user.id === form.values.userId);
+  const confirmLabel = innerProps.confirmLabel ?? t("common.action.add");
+  const currentUser = users?.find((user) => user.id === form.values.userId);
 
-    return (
-      <form
-        onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}
-      >
-        <Stack>
-          <Select
-            {...form.getInputProps("userId")}
-            label={t("user.action.select.label")}
-            searchable
-            clearable
-            leftSection={
-              isPending ? (
-                <Loader size="xs" />
-              ) : currentUser ? (
-                <UserAvatar user={currentUser} size="xs" />
-              ) : undefined
-            }
-            nothingFoundMessage={t("user.action.select.notFound")}
-            renderOption={createRenderOption(users ?? [])}
-            limit={5}
-            data={users
-              ?.filter((user) => !innerProps.presentUserIds.includes(user.id))
-              .map((user) => ({ value: user.id, label: user.name ?? "" }))}
-          />
-          <Group justify="end">
-            <Button variant="default" onClick={actions.closeModal}>
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit" loading={loading}>
-              {confirmLabel}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    );
-  },
-).withOptions({
-  defaultTitle: (t) =>
-    t("board.setting.section.access.permission.userSelect.title"),
+  return (
+    <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
+      <Stack>
+        <Select
+          {...form.getInputProps("userId")}
+          label={t("user.action.select.label")}
+          searchable
+          clearable
+          leftSection={
+            isPending ? <Loader size="xs" /> : currentUser ? <UserAvatar user={currentUser} size="xs" /> : undefined
+          }
+          nothingFoundMessage={t("user.action.select.notFound")}
+          renderOption={createRenderOption(users ?? [])}
+          limit={5}
+          data={users
+            ?.filter((user) => !innerProps.presentUserIds.includes(user.id))
+            .map((user) => ({ value: user.id, label: user.name ?? "" }))}
+        />
+        <Group justify="end">
+          <Button variant="default" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={loading}>
+            {confirmLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle: (t) => t("board.setting.section.access.permission.userSelect.title"),
 });
 
 const iconProps = {
@@ -95,9 +82,7 @@ const iconProps = {
   size: "1rem",
 };
 
-const createRenderOption = (
-  users: RouterOutputs["user"]["selectable"],
-): SelectProps["renderOption"] =>
+const createRenderOption = (users: RouterOutputs["user"]["selectable"]): SelectProps["renderOption"] =>
   function InnerRenderRoot({ option, checked }) {
     const user = users.find((user) => user.id === option.value);
     if (!user) return null;
@@ -106,9 +91,7 @@ const createRenderOption = (
       <Group flex="1" gap="xs">
         <UserAvatar user={user} size="xs" />
         {option.label}
-        {checked && (
-          <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />
-        )}
+        {checked && <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />}
       </Group>
     );
   };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
index 08c936336..9f790cf7c 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_background.tsx
@@ -2,16 +2,13 @@
 
 import { Button, Grid, Group, Stack, TextInput } from "@mantine/core";
 
-import {
-  backgroundImageAttachments,
-  backgroundImageRepeats,
-  backgroundImageSizes,
-} from "@homarr/definitions";
-import { useForm } from "@homarr/form";
+import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
+import { useZodForm } from "@homarr/form";
 import type { TranslationObject } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { SelectItemWithDescriptionBadge } from "@homarr/ui";
 import { SelectWithDescriptionBadge } from "@homarr/ui";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -21,9 +18,8 @@ interface Props {
 }
 export const BackgroundSettingsContent = ({ board }: Props) => {
   const t = useI18n();
-  const { mutate: savePartialSettings, isPending } =
-    useSavePartialSettingsMutation(board);
-  const form = useForm({
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useZodForm(validation.board.savePartialSettings, {
     initialValues: {
       backgroundImageUrl: board.backgroundImageUrl ?? "",
       backgroundImageAttachment: board.backgroundImageAttachment,
@@ -36,14 +32,8 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
     "backgroundImageAttachment",
     backgroundImageAttachments,
   );
-  const backgroundImageSizeData = useBackgroundOptionData(
-    "backgroundImageSize",
-    backgroundImageSizes,
-  );
-  const backgroundImageRepeatData = useBackgroundOptionData(
-    "backgroundImageRepeat",
-    backgroundImageRepeats,
-  );
+  const backgroundImageSizeData = useBackgroundOptionData("backgroundImageSize", backgroundImageSizes);
+  const backgroundImageRepeatData = useBackgroundOptionData("backgroundImageRepeat", backgroundImageRepeats);
 
   return (
     <form
@@ -95,13 +85,9 @@ export const BackgroundSettingsContent = ({ board }: Props) => {
   );
 };
 
-type BackgroundImageKey =
-  | "backgroundImageAttachment"
-  | "backgroundImageSize"
-  | "backgroundImageRepeat";
+type BackgroundImageKey = "backgroundImageAttachment" | "backgroundImageSize" | "backgroundImageRepeat";
 
-type inferOptions<TKey extends BackgroundImageKey> =
-  TranslationObject["board"]["field"][TKey]["option"];
+type inferOptions<TKey extends BackgroundImageKey> = TranslationObject["board"]["field"][TKey]["option"];
 
 const useBackgroundOptionData = <
   TKey extends BackgroundImageKey,
@@ -119,9 +105,7 @@ const useBackgroundOptionData = <
     (value) =>
       ({
         label: t(`board.field.${key}.option.${value as string}.label` as never),
-        description: t(
-          `board.field.${key}.option.${value as string}.description` as never,
-        ),
+        description: t(`board.field.${key}.option.${value as string}.description` as never),
         value: value as string,
         badge:
           data.defaultValue === value
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
index 4b38a2d5f..4f12e28ad 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
@@ -17,8 +17,9 @@ import {
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { generateColors } from "../../(content)/_theme";
@@ -33,7 +34,7 @@ const hexRegex = /^#[0-9a-fA-F]{6}$/;
 const progressPercentageLabel = (value: number) => `${value}%`;
 
 export const ColorSettingsContent = ({ board }: Props) => {
-  const form = useForm({
+  const form = useZodForm(validation.board.savePartialSettings, {
     initialValues: {
       primaryColor: board.primaryColor,
       secondaryColor: board.secondaryColor,
@@ -43,8 +44,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
   const [showPreview, { toggle }] = useDisclosure(false);
   const t = useI18n();
   const theme = useMantineTheme();
-  const { mutate: savePartialSettings, isPending } =
-    useSavePartialSettingsMutation(board);
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
 
   return (
     <form
@@ -76,11 +76,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
             />
           </Grid.Col>
           <Grid.Col span={12}>
-            <Anchor onClick={toggle}>
-              {showPreview
-                ? t("common.preview.hide")
-                : t("common.preview.show")}
-            </Anchor>
+            <Anchor onClick={toggle}>{showPreview ? t("common.preview.hide") : t("common.preview.show")}</Anchor>
           </Grid.Col>
           <Grid.Col span={12}>
             <Collapse in={showPreview}>
@@ -114,15 +110,13 @@ export const ColorSettingsContent = ({ board }: Props) => {
 };
 
 interface ColorsPreviewProps {
-  previewColor: string;
+  previewColor: string | undefined;
 }
 
 const ColorsPreview = ({ previewColor }: ColorsPreviewProps) => {
   const theme = useMantineTheme();
 
-  const colors = hexRegex.test(previewColor)
-    ? generateColors(previewColor)
-    : generateColors("#000000");
+  const colors = previewColor && hexRegex.test(previewColor) ? generateColors(previewColor) : generateColors("#000000");
 
   return (
     <Group gap={0} wrap="nowrap">
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
index 4d9bc7f75..4e007388f 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_customCss.tsx
@@ -1,7 +1,91 @@
 "use client";
 
-// TODO: add some sort of store (maybe directory on GitHub)
+import { Alert, Button, Group, Input, Stack } from "@mantine/core";
+import { highlight, languages } from "prismjs";
+import Editor from "react-simple-code-editor";
 
-export const CustomCssSettingsContent = () => {
-  return null;
+import "~/styles/prismjs.scss";
+
+import { IconInfoCircle } from "@tabler/icons-react";
+
+import { useForm } from "@homarr/form";
+import { useI18n, useScopedI18n } from "@homarr/translation/client";
+
+import type { Board } from "../../_types";
+import { useSavePartialSettingsMutation } from "./_shared";
+import classes from "./customcss.module.css";
+
+interface Props {
+  board: Board;
+}
+
+export const CustomCssSettingsContent = ({ board }: Props) => {
+  const t = useI18n();
+  const customCssT = useScopedI18n("board.field.customCss");
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useForm({
+    initialValues: {
+      customCss: board.customCss ?? "",
+    },
+  });
+
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        savePartialSettings({
+          id: board.id,
+          ...values,
+        });
+      })}
+    >
+      <Stack>
+        <CustomCssInput {...form.getInputProps("customCss")} />
+
+        <Alert variant="light" color="cyan" title={customCssT("customClassesAlert.title")} icon={<IconInfoCircle />}>
+          {customCssT("customClassesAlert.description")}
+        </Alert>
+
+        <Group justify="end">
+          <Button type="submit" loading={isPending} color="teal">
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+};
+
+interface CustomCssInputProps {
+  value?: string;
+  onChange: (value: string) => void;
+}
+
+const CustomCssInput = ({ value, onChange }: CustomCssInputProps) => {
+  const customCssT = useScopedI18n("board.field.customCss");
+
+  return (
+    <Input.Wrapper
+      label={customCssT("label")}
+      labelProps={{
+        htmlFor: "custom-css",
+      }}
+      description={customCssT("description")}
+      inputWrapperOrder={["label", "description", "input", "error"]}
+    >
+      <div className={classes.codeEditorRoot}>
+        <Editor
+          textareaId="custom-css"
+          onValueChange={onChange}
+          value={value ?? ""}
+          highlight={(code) => highlight(code, languages.extend("css", {}), "css")}
+          padding={10}
+          style={{
+            fontFamily: '"Fira code", "Fira Mono", monospace',
+            fontSize: 12,
+            minHeight: 250,
+          }}
+        />
+      </div>
+    </Input.Wrapper>
+  );
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
index 6635d0ba3..fa1c05bd3 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_danger.tsx
@@ -20,8 +20,7 @@ export const DangerZoneSettingsContent = () => {
   const { openModal } = useModalAction(BoardRenameModal);
   const { mutate: changeVisibility, isPending: isChangeVisibilityPending } =
     clientApi.board.changeBoardVisibility.useMutation();
-  const { mutate: deleteBoard, isPending: isDeletePending } =
-    clientApi.board.deleteBoard.useMutation();
+  const { mutate: deleteBoard, isPending: isDeletePending } = clientApi.board.deleteBoard.useMutation();
   const utils = clientApi.useUtils();
   const visibility = board.isPublic ? "public" : "private";
 
@@ -37,12 +36,8 @@ export const DangerZoneSettingsContent = () => {
 
   const onVisibilityClick = useCallback(() => {
     openConfirmModal({
-      title: t(
-        `section.dangerZone.action.visibility.confirm.${visibility}.title`,
-      ),
-      children: t(
-        `section.dangerZone.action.visibility.confirm.${visibility}.description`,
-      ),
+      title: t(`section.dangerZone.action.visibility.confirm.${visibility}.title`),
+      children: t(`section.dangerZone.action.visibility.confirm.${visibility}.description`),
       onConfirm: () => {
         changeVisibility(
           {
@@ -52,7 +47,7 @@ export const DangerZoneSettingsContent = () => {
           {
             onSettled() {
               void utils.board.getBoardByName.invalidate({ name: board.name });
-              void utils.board.getDefaultBoard.invalidate();
+              void utils.board.getHomeBoard.invalidate();
             },
           },
         );
@@ -64,7 +59,7 @@ export const DangerZoneSettingsContent = () => {
     changeVisibility,
     t,
     utils.board.getBoardByName,
-    utils.board.getDefaultBoard,
+    utils.board.getHomeBoard,
     visibility,
     openConfirmModal,
   ]);
@@ -98,12 +93,8 @@ export const DangerZoneSettingsContent = () => {
       <Divider />
       <DangerZoneRow
         label={t("section.dangerZone.action.visibility.label")}
-        description={t(
-          `section.dangerZone.action.visibility.description.${visibility}`,
-        )}
-        buttonText={t(
-          `section.dangerZone.action.visibility.button.${visibility}`,
-        )}
+        description={t(`section.dangerZone.action.visibility.description.${visibility}`)}
+        buttonText={t(`section.dangerZone.action.visibility.button.${visibility}`)}
         onClick={onVisibilityClick}
         isPending={isChangeVisibilityPending}
       />
@@ -127,13 +118,7 @@ interface DangerZoneRowProps {
   onClick: () => void;
 }
 
-const DangerZoneRow = ({
-  label,
-  description,
-  buttonText,
-  onClick,
-  isPending,
-}: DangerZoneRowProps) => {
+const DangerZoneRow = ({ label, description, buttonText, onClick, isPending }: DangerZoneRowProps) => {
   return (
     <Group justify="space-between" px="md" className={classes.dangerZoneGroup}>
       <Stack gap={0}>
@@ -143,12 +128,7 @@ const DangerZoneRow = ({
         <Text size="sm">{description}</Text>
       </Stack>
       <Group justify="end" w={{ base: "100%", xs: "auto" }}>
-        <Button
-          variant="subtle"
-          color="red"
-          loading={isPending}
-          onClick={onClick}
-        >
+        <Button variant="subtle" color="red" loading={isPending} onClick={onClick}>
           {buttonText}
         </Button>
       </Group>
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
index d8e3eec82..0303be98d 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_general.tsx
@@ -1,25 +1,15 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import {
-  Button,
-  Grid,
-  Group,
-  Loader,
-  Stack,
-  TextInput,
-  Tooltip,
-} from "@mantine/core";
-import {
-  useDebouncedValue,
-  useDocumentTitle,
-  useFavicon,
-} from "@mantine/hooks";
+import { Button, Grid, Group, Loader, Stack, TextInput, Tooltip } from "@mantine/core";
+import { useDebouncedValue, useDocumentTitle, useFavicon } from "@mantine/hooks";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
+import { createMetaTitle } from "~/metadata";
 import type { Board } from "../../_types";
 import { useUpdateBoard } from "../../(content)/_client";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -36,22 +26,31 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   });
   const { updateBoard } = useUpdateBoard();
 
-  const { mutate: savePartialSettings, isPending } =
-    useSavePartialSettingsMutation(board);
-  const form = useForm({
-    initialValues: {
-      pageTitle: board.pageTitle ?? "",
-      logoImageUrl: board.logoImageUrl ?? "",
-      metaTitle: board.metaTitle ?? "",
-      faviconImageUrl: board.faviconImageUrl ?? "",
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useZodForm(
+    validation.board.savePartialSettings
+      .pick({
+        pageTitle: true,
+        logoImageUrl: true,
+        metaTitle: true,
+        faviconImageUrl: true,
+      })
+      .required(),
+    {
+      initialValues: {
+        pageTitle: board.pageTitle ?? "",
+        logoImageUrl: board.logoImageUrl ?? "",
+        metaTitle: board.metaTitle ?? "",
+        faviconImageUrl: board.faviconImageUrl ?? "",
+      },
+      onValuesChange({ pageTitle }) {
+        updateBoard((previous) => ({
+          ...previous,
+          pageTitle,
+        }));
+      },
     },
-    onValuesChange({ pageTitle }) {
-      updateBoard((previous) => ({
-        ...previous,
-        pageTitle,
-      }));
-    },
-  });
+  );
 
   const metaTitleStatus = useMetaTitlePreview(form.values.metaTitle);
   const faviconStatus = useFaviconPreview(form.values.faviconImageUrl);
@@ -94,7 +93,7 @@ export const GeneralSettingsContent = ({ board }: Props) => {
           <Grid.Col span={{ xs: 12, md: 6 }}>
             <TextInput
               label={t("board.field.metaTitle.label")}
-              placeholder="Default Board | Homarr"
+              placeholder={createMetaTitle(t("board.content.metaTitle", { boardName: board.name }))}
               rightSection={<PendingOrInvalidIndicator {...metaTitleStatus} />}
               {...form.getInputProps("metaTitle")}
             />
@@ -126,22 +125,12 @@ export const GeneralSettingsContent = ({ board }: Props) => {
   );
 };
 
-const PendingOrInvalidIndicator = ({
-  isPending,
-  isInvalid,
-}: {
-  isPending: boolean;
-  isInvalid?: boolean;
-}) => {
+const PendingOrInvalidIndicator = ({ isPending, isInvalid }: { isPending: boolean; isInvalid?: boolean }) => {
   const t = useI18n();
 
   if (isInvalid) {
     return (
-      <Tooltip
-        multiline
-        w={220}
-        label={t("board.setting.section.general.unrecognizedLink")}
-      >
+      <Tooltip multiline w={220} label={t("board.setting.section.general.unrecognizedLink")}>
         <IconAlertTriangle size="1rem" color="red" />
       </Tooltip>
     );
@@ -183,8 +172,7 @@ const useMetaTitlePreview = (title: string | null) => {
 
 const validFaviconExtensions = ["ico", "png", "svg", "gif"];
 const isValidUrl = (url: string) =>
-  url.includes("/") &&
-  validFaviconExtensions.some((extension) => url.endsWith(`.${extension}`));
+  url.includes("/") && validFaviconExtensions.some((extension) => url.endsWith(`.${extension}`));
 
 const useFaviconPreview = (url: string | null) => {
   const [faviconDebounced] = useDebouncedValue(url ?? "", 500);
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
index ea8865a7e..f0c2eeb9f 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx
@@ -2,8 +2,9 @@
 
 import { Button, Grid, Group, Input, Slider, Stack } from "@mantine/core";
 
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
 import type { Board } from "../../_types";
 import { useSavePartialSettingsMutation } from "./_shared";
@@ -13,9 +14,8 @@ interface Props {
 }
 export const LayoutSettingsContent = ({ board }: Props) => {
   const t = useI18n();
-  const { mutate: savePartialSettings, isPending } =
-    useSavePartialSettingsMutation(board);
-  const form = useForm({
+  const { mutate: savePartialSettings, isPending } = useSavePartialSettingsMutation(board);
+  const form = useZodForm(validation.board.savePartialSettings.pick({ columnCount: true }).required(), {
     initialValues: {
       columnCount: board.columnCount,
     },
@@ -34,13 +34,7 @@ export const LayoutSettingsContent = ({ board }: Props) => {
         <Grid>
           <Grid.Col span={{ sm: 12, md: 6 }}>
             <Input.Wrapper label={t("board.field.columnCount.label")}>
-              <Slider
-                mt="xs"
-                min={1}
-                max={24}
-                step={1}
-                {...form.getInputProps("columnCount")}
-              />
+              <Slider mt="xs" min={1} max={24} step={1} {...form.getInputProps("columnCount")} />
             </Input.Wrapper>
           </Grid.Col>
         </Grid>
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
index 1097a8e13..9fa888be2 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_shared.tsx
@@ -7,7 +7,7 @@ export const useSavePartialSettingsMutation = (board: Board) => {
   return clientApi.board.savePartialBoardSettings.useMutation({
     onSettled() {
       void utils.board.getBoardByName.invalidate({ name: board.name });
-      void utils.board.getDefaultBoard.invalidate();
+      void utils.board.getHomeBoard.invalidate();
     },
   });
 };
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css b/apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css
new file mode 100644
index 000000000..b01c21383
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/customcss.module.css
@@ -0,0 +1,22 @@
+.codeEditorFooter {
+  border-bottom-left-radius: var(--mantine-radius-sm);
+  border-bottom-right-radius: var(--mantine-radius-sm);
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-7));
+}
+
+.codeEditorRoot {
+  margin-top: 4px;
+  border-color: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--mantine-radius-sm);
+}
+
+.codeEditor {
+  background-color: light-dark(white, var(--mantine-color-dark-6));
+  font-size: var(--mantine-font-size-xs);
+}
+
+.codeEditor ::placeholder {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+}
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
index 1f3dfeaeb..1748ee36b 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/page.tsx
@@ -1,14 +1,6 @@
 import type { PropsWithChildren } from "react";
 import { notFound } from "next/navigation";
-import {
-  AccordionControl,
-  AccordionItem,
-  AccordionPanel,
-  Container,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { AccordionControl, AccordionItem, AccordionPanel, Container, Stack, Text, Title } from "@mantine/core";
 import {
   IconAlertTriangle,
   IconBrush,
@@ -69,10 +61,7 @@ const getBoardAndPermissionsAsync = async (params: Props["params"]) => {
   }
 };
 
-export default async function BoardSettingsPage({
-  params,
-  searchParams,
-}: Props) {
+export default async function BoardSettingsPage({ params, searchParams }: Props) {
   const { board, permissions } = await getBoardAndPermissionsAsync(params);
   const { hasFullAccess } = await getBoardPermissionsAsync(board);
   const t = await getScopedI18n("board.setting");
@@ -81,10 +70,7 @@ export default async function BoardSettingsPage({
     <Container>
       <Stack>
         <Title>{t("title", { boardName: capitalize(board.name) })}</Title>
-        <ActiveTabAccordion
-          variant="separated"
-          defaultValue={searchParams.tab ?? "general"}
-        >
+        <ActiveTabAccordion variant="separated" defaultValue={searchParams.tab ?? "general"}>
           <AccordionItemFor value="general" icon={IconSettings}>
             <GeneralSettingsContent board={board} />
           </AccordionItemFor>
@@ -98,22 +84,14 @@ export default async function BoardSettingsPage({
             <ColorSettingsContent board={board} />
           </AccordionItemFor>
           <AccordionItemFor value="customCss" icon={IconFileTypeCss}>
-            <CustomCssSettingsContent />
+            <CustomCssSettingsContent board={board} />
           </AccordionItemFor>
           {hasFullAccess && (
             <>
               <AccordionItemFor value="access" icon={IconUser}>
-                <AccessSettingsContent
-                  board={board}
-                  initialPermissions={permissions}
-                />
+                <AccessSettingsContent board={board} initialPermissions={permissions} />
               </AccordionItemFor>
-              <AccordionItemFor
-                value="dangerZone"
-                icon={IconAlertTriangle}
-                danger
-                noPadding
-              >
+              <AccordionItemFor value="dangerZone" icon={IconAlertTriangle} danger noPadding>
                 <DangerZoneSettingsContent />
               </AccordionItemFor>
             </>
@@ -131,13 +109,7 @@ type AccordionItemForProps = PropsWithChildren<{
   noPadding?: boolean;
 }>;
 
-const AccordionItemFor = async ({
-  value,
-  children,
-  icon: Icon,
-  danger,
-  noPadding,
-}: AccordionItemForProps) => {
+const AccordionItemFor = async ({ value, children, icon: Icon, danger, noPadding }: AccordionItemForProps) => {
   const t = await getScopedI18n("board.setting.section");
   return (
     <AccordionItem
@@ -158,13 +130,7 @@ const AccordionItemFor = async ({
           {t(`${value}.title`)}
         </Text>
       </AccordionControl>
-      <AccordionPanel
-        styles={
-          noPadding
-            ? { content: { paddingRight: 0, paddingLeft: 0 } }
-            : undefined
-        }
-      >
+      <AccordionPanel styles={noPadding ? { content: { paddingRight: 0, paddingLeft: 0 } } : undefined}>
         {children}
       </AccordionPanel>
     </AccordionItem>
diff --git a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
index a4559b33b..56dabdd88 100644
--- a/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/_layout-creator.tsx
@@ -12,6 +12,7 @@ import { ClientShell } from "~/components/layout/shell";
 import type { Board } from "./_types";
 import { BoardProvider } from "./(content)/_context";
 import type { Params } from "./(content)/_creator";
+import { CustomCss } from "./(content)/_custom-css";
 import { BoardMantineProvider } from "./(content)/_theme";
 
 interface CreateBoardLayoutProps<TParams extends Params> {
@@ -41,12 +42,10 @@ export const createBoardLayout = <TParams extends Params>({
     });
 
     return (
-      <GlobalItemServerDataRunner
-        board={initialBoard}
-        shouldRun={isBoardContentPage}
-      >
+      <GlobalItemServerDataRunner board={initialBoard} shouldRun={isBoardContentPage}>
         <BoardProvider initialBoard={initialBoard}>
           <BoardMantineProvider>
+            <CustomCss />
             <ClientShell hasNavigation={false}>
               <MainHeader
                 logo={<BoardLogoWithTitle size="md" hideTitleOnMobile />}
diff --git a/apps/nextjs/src/app/[locale]/boards/_types.ts b/apps/nextjs/src/app/[locale]/boards/_types.ts
index dc5828171..4d841d1ac 100644
--- a/apps/nextjs/src/app/[locale]/boards/_types.ts
+++ b/apps/nextjs/src/app/[locale]/boards/_types.ts
@@ -1,14 +1,11 @@
 import type { RouterOutputs } from "@homarr/api";
 import type { WidgetKind } from "@homarr/definitions";
 
-export type Board = RouterOutputs["board"]["getDefaultBoard"];
+export type Board = RouterOutputs["board"]["getHomeBoard"];
 export type Section = Board["sections"][number];
 export type Item = Section["items"][number];
 
 export type CategorySection = Extract<Section, { kind: "category" }>;
 export type EmptySection = Extract<Section, { kind: "empty" }>;
 
-export type ItemOfKind<TKind extends WidgetKind> = Extract<
-  Item,
-  { kind: TKind }
->;
+export type ItemOfKind<TKind extends WidgetKind> = Extract<Item, { kind: TKind }>;
diff --git a/apps/nextjs/src/app/[locale]/compose.tsx b/apps/nextjs/src/app/[locale]/compose.tsx
index cddd9dcda..6997ca986 100644
--- a/apps/nextjs/src/app/[locale]/compose.tsx
+++ b/apps/nextjs/src/app/[locale]/compose.tsx
@@ -5,14 +5,12 @@ type PropsWithChildren = Required<React.PropsWithChildren>;
 export const composeWrappers = (
   wrappers: React.FunctionComponent<PropsWithChildren>[],
 ): React.FunctionComponent<PropsWithChildren> => {
-  return wrappers
-    .reverse()
-    .reduce((Acc, Current): React.FunctionComponent<PropsWithChildren> => {
-      // eslint-disable-next-line react/display-name
-      return (props) => (
-        <Current>
-          <Acc {...props} />
-        </Current>
-      );
-    });
+  return wrappers.reverse().reduce((Acc, Current): React.FunctionComponent<PropsWithChildren> => {
+    // eslint-disable-next-line react/display-name
+    return (props) => (
+      <Current>
+        <Acc {...props} />
+      </Current>
+    );
+  });
 };
diff --git a/apps/nextjs/src/app/[locale]/init/user/_init-user-form.tsx b/apps/nextjs/src/app/[locale]/init/user/_init-user-form.tsx
index 30a30e7de..516b3b898 100644
--- a/apps/nextjs/src/app/[locale]/init/user/_init-user-form.tsx
+++ b/apps/nextjs/src/app/[locale]/init/user/_init-user-form.tsx
@@ -4,11 +4,8 @@ import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -16,12 +13,8 @@ import { validation } from "@homarr/validation";
 export const InitUserForm = () => {
   const router = useRouter();
   const t = useScopedI18n("user");
-  const { mutateAsync, error, isPending } =
-    clientApi.user.initUser.useMutation();
-  const form = useForm<FormType>({
-    validate: zodResolver(validation.user.init),
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
+  const { mutateAsync, error, isPending } = clientApi.user.initUser.useMutation();
+  const form = useZodForm(validation.user.init, {
     initialValues: {
       username: "",
       password: "",
@@ -56,18 +49,9 @@ export const InitUserForm = () => {
         )}
       >
         <Stack gap="lg">
-          <TextInput
-            label={t("field.username.label")}
-            {...form.getInputProps("username")}
-          />
-          <PasswordInput
-            label={t("field.password.label")}
-            {...form.getInputProps("password")}
-          />
-          <PasswordInput
-            label={t("field.passwordConfirm.label")}
-            {...form.getInputProps("confirmPassword")}
-          />
+          <TextInput label={t("field.username.label")} {...form.getInputProps("username")} />
+          <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
+          <PasswordInput label={t("field.passwordConfirm.label")} {...form.getInputProps("confirmPassword")} />
           <Button type="submit" fullWidth loading={isPending}>
             {t("action.create")}
           </Button>
diff --git a/apps/nextjs/src/app/[locale]/layout.tsx b/apps/nextjs/src/app/[locale]/layout.tsx
index 4a5d6c616..35414e252 100644
--- a/apps/nextjs/src/app/[locale]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/layout.tsx
@@ -48,10 +48,7 @@ export const viewport: Viewport = {
   ],
 };
 
-export default function Layout(props: {
-  children: React.ReactNode;
-  params: { locale: string };
-}) {
+export default function Layout(props: { children: React.ReactNode; params: { locale: string } }) {
   const colorScheme = "dark";
 
   const StackedProvider = composeWrappers([
@@ -61,9 +58,7 @@ export default function Layout(props: {
     },
     (innerProps) => <JotaiProvider {...innerProps} />,
     (innerProps) => <TRPCReactProvider {...innerProps} />,
-    (innerProps) => (
-      <NextInternationalProvider {...innerProps} locale={props.params.locale} />
-    ),
+    (innerProps) => <NextInternationalProvider {...innerProps} locale={props.params.locale} />,
     (innerProps) => (
       <MantineProvider
         {...innerProps}
diff --git a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
index be82bdf1a..35943bcf9 100644
--- a/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx
@@ -48,13 +48,7 @@ export const HeroBanner = () => {
           <Title>Homarr Dashboard</Title>
         </Group>
       </Stack>
-      <Box
-        className={classes.scrollContainer}
-        w={"30%"}
-        top={0}
-        right={0}
-        pos="absolute"
-      >
+      <Box className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">
         <Grid>
           {Array(countIconGroups)
             .fill(0)
@@ -67,24 +61,12 @@ export const HeroBanner = () => {
                   }}
                 >
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-1-${index}`}
-                      src={icon}
-                      radius="md"
-                      w={50}
-                      h={50}
-                    />
+                    <Image key={`grid-column-${columnIndex}-scroll-1-${index}`} src={icon} radius="md" w={50} h={50} />
                   ))}
 
                   {/* This is used for making the animation seem seamless */}
                   {arrayInChunks[columnIndex]?.map((icon, index) => (
-                    <Image
-                      key={`grid-column-${columnIndex}-scroll-2-${index}`}
-                      src={icon}
-                      radius="md"
-                      w={50}
-                      h={50}
-                    />
+                    <Image key={`grid-column-${columnIndex}-scroll-2-${index}`} src={icon} radius="md" w={50} h={50} />
                   ))}
                 </Stack>
               </GridCol>
diff --git a/apps/nextjs/src/app/[locale]/manage/about/about.module.css b/apps/nextjs/src/app/[locale]/manage/about/about.module.css
index ccb8e9a98..c1d362c48 100644
--- a/apps/nextjs/src/app/[locale]/manage/about/about.module.css
+++ b/apps/nextjs/src/app/[locale]/manage/about/about.module.css
@@ -1,6 +1,3 @@
 .contributorCard {
-  background-color: light-dark(
-    var(--mantine-color-gray-1),
-    var(--mantine-color-dark-5)
-  );
+  background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
 }
diff --git a/apps/nextjs/src/app/[locale]/manage/about/page.tsx b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
index 2805c565c..a1dadf037 100644
--- a/apps/nextjs/src/app/[locale]/manage/about/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
@@ -21,6 +21,7 @@ import { setStaticParamsLocale } from "next-international/server";
 
 import { getScopedI18n, getStaticParams } from "@homarr/translation/server";
 
+import { createMetaTitle } from "~/metadata";
 import { getPackageAttributesAsync } from "~/versions/package-reader";
 import contributorsData from "../../../../../../../static-data/contributors.json";
 import translatorsData from "../../../../../../../static-data/translators.json";
@@ -29,10 +30,9 @@ import classes from "./about.module.css";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
-  const metaTitle = `${t("metaTitle")} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle")),
   };
 }
 
@@ -55,9 +55,7 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
             <Title order={1} tt="uppercase">
               Homarr
             </Title>
-            <Title order={2}>
-              {t("version", { version: attributes.version })}
-            </Title>
+            <Title order={2}>{t("version", { version: attributes.version })}</Title>
           </Stack>
         </Group>
       </Center>
@@ -150,20 +148,10 @@ interface GenericContributorLinkCardProps {
   image: string;
 }
 
-const GenericContributorLinkCard = ({
-  name,
-  image,
-  link,
-}: GenericContributorLinkCardProps) => {
+const GenericContributorLinkCard = ({ name, image, link }: GenericContributorLinkCardProps) => {
   return (
     <AspectRatio ratio={1}>
-      <Card
-        className={classes.contributorCard}
-        component="a"
-        href={link}
-        target="_blank"
-        w={100}
-      >
+      <Card className={classes.contributorCard} component="a" href={link} target="_blank" w={100}>
         <Stack align="center">
           <Avatar src={image} alt={name} size={40} display="block" />
           <Text lineClamp={1} size="sm">
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
index 210185589..0f81cde48 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_app-delete-button.tsx
@@ -7,10 +7,7 @@ import { IconTrash } from "@tabler/icons-react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "../../../revalidatePathAction";
@@ -52,13 +49,7 @@ export const AppDeleteButton = ({ app }: AppDeleteButtonProps) => {
   }, [app, mutate, t, openConfirmModal]);
 
   return (
-    <ActionIcon
-      loading={isPending}
-      variant="subtle"
-      color="red"
-      onClick={onClick}
-      aria-label="Delete app"
-    >
+    <ActionIcon loading={isPending} variant="subtle" color="red" onClick={onClick} aria-label="Delete app">
       <IconTrash color="red" size={16} stroke={1.5} />
     </ActionIcon>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
index d024a9c36..2cb6b6a47 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/_form.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { Button, Group, Stack, Textarea, TextInput } from "@mantine/core";
 
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
@@ -21,30 +21,23 @@ interface AppFormProps {
 }
 
 export const AppForm = (props: AppFormProps) => {
-  const { submitButtonTranslation, handleSubmit, initialValues, isPending } =
-    props;
+  const { submitButtonTranslation, handleSubmit, initialValues, isPending } = props;
   const t = useI18n();
 
-  const form = useForm({
+  const form = useZodForm(validation.app.manage, {
     initialValues: initialValues ?? {
       name: "",
       description: "",
       iconUrl: "",
       href: "",
     },
-    validate: zodResolver(validation.app.manage),
   });
 
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
         <TextInput {...form.getInputProps("name")} withAsterisk label="Name" />
-        <IconPicker
-          initialValue={initialValues?.iconUrl}
-          onChange={(iconUrl) => {
-            form.setFieldValue("iconUrl", iconUrl);
-          }}
-        />
+        <IconPicker initialValue={initialValues?.iconUrl} {...form.getInputProps("iconUrl")} />
         <Textarea {...form.getInputProps("description")} label="Description" />
         <TextInput {...form.getInputProps("href")} label="URL" />
 
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx
index 870411a14..5fda90040 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/edit/[id]/_app-edit-form.tsx
@@ -5,10 +5,7 @@ import { useRouter } from "next/navigation";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { validation, z } from "@homarr/validation";
@@ -52,10 +49,7 @@ export const AppEditForm = ({ app }: AppEditFormProps) => {
     [mutate, app.id],
   );
 
-  const submitButtonTranslation = useCallback(
-    (t: TranslationFunction) => t("common.action.save"),
-    [],
-  );
+  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.save"), []);
 
   return (
     <AppForm
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx
index 733a350de..171dec027 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/new/_app-new-form.tsx
@@ -4,10 +4,7 @@ import { useCallback } from "react";
 import { useRouter } from "next/navigation";
 
 import { clientApi } from "@homarr/api/client";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import type { TranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { validation, z } from "@homarr/validation";
@@ -44,16 +41,9 @@ export const AppNewForm = () => {
     [mutate],
   );
 
-  const submitButtonTranslation = useCallback(
-    (t: TranslationFunction) => t("common.action.create"),
-    [],
-  );
+  const submitButtonTranslation = useCallback((t: TranslationFunction) => t("common.action.create"), []);
 
   return (
-    <AppForm
-      submitButtonTranslation={submitButtonTranslation}
-      handleSubmit={handleSubmit}
-      isPending={isPending}
-    />
+    <AppForm submitButtonTranslation={submitButtonTranslation} handleSubmit={handleSubmit} isPending={isPending} />
   );
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
index 2b5a6574e..6aab6ae37 100644
--- a/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/apps/page.tsx
@@ -107,9 +107,7 @@ const AppNoResults = async () => {
         <Text fw={500} size="lg">
           {t("app.page.list.noResults.title")}
         </Text>
-        <Anchor href="/manage/apps/new">
-          {t("app.page.list.noResults.description")}
-        </Anchor>
+        <Anchor href="/manage/apps/new">{t("app.page.list.noResults.description")}</Anchor>
       </Stack>
     </Card>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx b/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx
index 6a97c81ca..0da1a442d 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/_components/board-card-menu-dropdown.tsx
@@ -3,7 +3,7 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { Menu } from "@mantine/core";
-import { IconSettings, IconTrash } from "@tabler/icons-react";
+import { IconHome, IconSettings, IconTrash } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -21,18 +21,11 @@ const iconProps = {
 interface BoardCardMenuDropdownProps {
   board: Pick<
     RouterOutputs["board"]["getAllBoards"][number],
-    | "id"
-    | "name"
-    | "creator"
-    | "userPermissions"
-    | "groupPermissions"
-    | "isPublic"
+    "id" | "name" | "creator" | "userPermissions" | "groupPermissions" | "isPublic"
   >;
 }
 
-export const BoardCardMenuDropdown = ({
-  board,
-}: BoardCardMenuDropdownProps) => {
+export const BoardCardMenuDropdown = ({ board }: BoardCardMenuDropdownProps) => {
   const t = useScopedI18n("management.page.board.action");
   const tCommon = useScopedI18n("common");
 
@@ -40,7 +33,13 @@ export const BoardCardMenuDropdown = ({
 
   const { openConfirmModal } = useConfirmModal();
 
-  const { mutateAsync, isPending } = clientApi.board.deleteBoard.useMutation({
+  const setHomeBoardMutation = clientApi.board.setHomeBoard.useMutation({
+    onSettled: async () => {
+      // Revalidate all as it's part of the user settings, /boards page and board manage page
+      await revalidatePathActionAsync("/");
+    },
+  });
+  const deleteBoardMutation = clientApi.board.deleteBoard.useMutation({
     onSettled: async () => {
       await revalidatePathActionAsync("/manage/boards");
     },
@@ -54,23 +53,33 @@ export const BoardCardMenuDropdown = ({
       }),
       // eslint-disable-next-line no-restricted-syntax
       onConfirm: async () => {
-        await mutateAsync({
+        await deleteBoardMutation.mutateAsync({
           id: board.id,
         });
       },
     });
-  }, [board.id, board.name, mutateAsync, openConfirmModal, t]);
+  }, [board.id, board.name, deleteBoardMutation, openConfirmModal, t]);
+
+  const handleSetHomeBoard = useCallback(async () => {
+    await setHomeBoardMutation.mutateAsync({ id: board.id });
+  }, [board.id, setHomeBoardMutation]);
 
   return (
     <Menu.Dropdown>
+      <Menu.Item onClick={handleSetHomeBoard} leftSection={<IconHome {...iconProps} />}>
+        {t("setHomeBoard.label")}
+      </Menu.Item>
       {hasChangeAccess && (
-        <Menu.Item
-          component={Link}
-          href={`/boards/${board.name}/settings`}
-          leftSection={<IconSettings {...iconProps} />}
-        >
-          {t("settings.label")}
-        </Menu.Item>
+        <>
+          <Menu.Divider />
+          <Menu.Item
+            component={Link}
+            href={`/boards/${board.name}/settings`}
+            leftSection={<IconSettings {...iconProps} />}
+          >
+            {t("settings.label")}
+          </Menu.Item>
+        </>
       )}
       {hasFullAccess && (
         <>
@@ -80,7 +89,7 @@ export const BoardCardMenuDropdown = ({
             c="red.7"
             leftSection={<IconTrash {...iconProps} />}
             onClick={handleDeletion}
-            disabled={isPending}
+            disabled={deleteBoardMutation.isPending}
           >
             {t("delete.label")}
           </Menu.Item>
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
index 1c0331da6..4bd24a346 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx
@@ -37,11 +37,7 @@ export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
   }, [mutateAsync, boardNames, openModal]);
 
   return (
-    <Button
-      leftSection={<IconCategoryPlus size="1rem" />}
-      onClick={onClick}
-      loading={isPending}
-    >
+    <Button leftSection={<IconCategoryPlus size="1rem" />} onClick={onClick} loading={isPending}>
       {t("management.page.board.action.new.label")}
     </Button>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
index ac254468d..5dc4c79d7 100644
--- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import {
   ActionIcon,
+  Badge,
   Button,
   Card,
   CardSection,
@@ -13,7 +14,7 @@ import {
   Title,
   Tooltip,
 } from "@mantine/core";
-import { IconDotsVertical, IconLock, IconWorld } from "@tabler/icons-react";
+import { IconDotsVertical, IconHomeFilled, IconLock, IconWorld } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -53,8 +54,7 @@ interface BoardCardProps {
 
 const BoardCard = async ({ board }: BoardCardProps) => {
   const t = await getScopedI18n("management.page.board");
-  const { hasChangeAccess: isMenuVisible } =
-    await getBoardPermissionsAsync(board);
+  const { hasChangeAccess: isMenuVisible } = await getBoardPermissionsAsync(board);
   const visibility = board.isPublic ? "public" : "private";
   const VisibilityIcon = board.isPublic ? IconWorld : IconLock;
 
@@ -71,23 +71,28 @@ const BoardCard = async ({ board }: BoardCardProps) => {
             </Text>
           </Group>
 
-          {board.creator && (
-            <Group gap="xs">
-              <UserAvatar user={board.creator} size="sm" />
-              <Text>{board.creator?.name}</Text>
-            </Group>
-          )}
+          <Group>
+            {board.isHome && (
+              <Tooltip label={t("action.setHomeBoard.badge.tooltip")}>
+                <Badge tt="none" color="yellow" variant="light" leftSection={<IconHomeFilled size=".7rem" />}>
+                  {t("action.setHomeBoard.badge.label")}
+                </Badge>
+              </Tooltip>
+            )}
+
+            {board.creator && (
+              <Group gap="xs">
+                <UserAvatar user={board.creator} size="sm" />
+                <Text>{board.creator?.name}</Text>
+              </Group>
+            )}
+          </Group>
         </Group>
       </CardSection>
 
       <CardSection p="sm">
         <Group wrap="nowrap">
-          <Button
-            component={Link}
-            href={`/boards/${board.name}`}
-            variant="default"
-            fullWidth
-          >
+          <Button component={Link} href={`/boards/${board.name}`} variant="default" fullWidth>
             {t("action.open.label")}
           </Button>
           {isMenuVisible && (
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
index a2d4a7ad2..2f31cb169 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-buttons.tsx
@@ -6,10 +6,7 @@ import { IconTrash } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "../../../revalidatePathAction";
@@ -19,10 +16,7 @@ interface DeleteIntegrationActionButtonProps {
   integration: { id: string; name: string };
 }
 
-export const DeleteIntegrationActionButton = ({
-  count,
-  integration,
-}: DeleteIntegrationActionButtonProps) => {
+export const DeleteIntegrationActionButton = ({ count, integration }: DeleteIntegrationActionButtonProps) => {
   const t = useScopedI18n("integration.page.delete");
   const router = useRouter();
   const { openConfirmModal } = useConfirmModal();
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
index 2c8b77b4f..b23fd148a 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-card.tsx
@@ -2,17 +2,7 @@
 
 import { useState } from "react";
 import { useParams } from "next/navigation";
-import {
-  ActionIcon,
-  Avatar,
-  Button,
-  Card,
-  Collapse,
-  Group,
-  Kbd,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { ActionIcon, Avatar, Button, Card, Collapse, Group, Kbd, Stack, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconEye, IconEyeOff } from "@tabler/icons-react";
 import dayjs from "dayjs";
@@ -36,8 +26,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
   const params = useParams<{ locale: string }>();
   const t = useI18n();
   const { isPublic } = integrationSecretKindObject[secret.kind];
-  const [publicSecretDisplayOpened, { toggle: togglePublicSecretDisplay }] =
-    useDisclosure(false);
+  const [publicSecretDisplayOpened, { toggle: togglePublicSecretDisplay }] = useDisclosure(false);
   const [editMode, setEditMode] = useState(false);
   const DisplayIcon = publicSecretDisplayOpened ? IconEye : IconEyeOff;
   const KindIcon = integrationSecretIcons[secret.kind];
@@ -50,9 +39,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
             <Avatar>
               <KindIcon size={16} />
             </Avatar>
-            <Text fw={500}>
-              {t(`integration.secrets.kind.${secret.kind}.label`)}
-            </Text>
+            <Text fw={500}>{t(`integration.secrets.kind.${secret.kind}.label`)}</Text>
             {publicSecretDisplayOpened ? <Kbd>{secret.value}</Kbd> : null}
           </Group>
           <Group>
@@ -62,11 +49,7 @@ export const SecretCard = ({ secret, children, onCancel }: SecretCardProps) => {
               })}
             </Text>
             {isPublic ? (
-              <ActionIcon
-                color="gray"
-                variant="subtle"
-                onClick={togglePublicSecretDisplay}
-              >
+              <ActionIcon color="gray" variant="subtle" onClick={togglePublicSecretDisplay}>
                 <DisplayIcon size={16} stroke={1.5} />
               </ActionIcon>
             ) : null}
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
index f68997943..f73e8516b 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx
@@ -10,6 +10,7 @@ import { useI18n } from "@homarr/translation/client";
 import { integrationSecretIcons } from "./_integration-secret-icons";
 
 interface IntegrationSecretInputProps {
+  withAsterisk?: boolean;
   label?: string;
   kind: IntegrationSecretKind;
   value?: string;
@@ -41,10 +42,7 @@ const PublicSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
   );
 };
 
-const PrivateSecretInput = ({
-  kind,
-  ...props
-}: IntegrationSecretInputProps) => {
+const PrivateSecretInput = ({ kind, ...props }: IntegrationSecretInputProps) => {
   const t = useI18n();
   const Icon = integrationSecretIcons[kind];
 
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
index e3181828b..2ae512edd 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/_integration-test-connection.tsx
@@ -6,10 +6,7 @@ import { IconCheck, IconInfoCircle, IconX } from "@tabler/icons-react";
 
 import type { RouterInputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 interface UseTestConnectionDirtyProps {
@@ -20,10 +17,7 @@ interface UseTestConnectionDirtyProps {
   };
 }
 
-export const useTestConnectionDirty = ({
-  defaultDirty,
-  initialFormValue,
-}: UseTestConnectionDirtyProps) => {
+export const useTestConnectionDirty = ({ defaultDirty, initialFormValue }: UseTestConnectionDirtyProps) => {
   const [isDirty, setIsDirty] = useState(defaultDirty);
   const prevFormValueRef = useRef(initialFormValue);
 
@@ -36,10 +30,7 @@ export const useTestConnectionDirty = ({
         prevFormValueRef.current.url !== values.url ||
         !prevFormValueRef.current.secrets
           .map((secret) => secret.value)
-          .every(
-            (secretValue, index) =>
-              values.secrets[index]?.value === secretValue,
-          )
+          .every((secretValue, index) => values.secrets[index]?.value === secretValue)
       ) {
         setIsDirty(true);
         return;
@@ -62,14 +53,9 @@ interface TestConnectionProps {
   integration: RouterInputs["integration"]["testConnection"] & { name: string };
 }
 
-export const TestConnection = ({
-  integration,
-  removeDirty,
-  isDirty,
-}: TestConnectionProps) => {
+export const TestConnection = ({ integration, removeDirty, isDirty }: TestConnectionProps) => {
   const t = useScopedI18n("integration.testConnection");
-  const { mutateAsync, ...mutation } =
-    clientApi.integration.testConnection.useMutation();
+  const { mutateAsync, ...mutation } = clientApi.integration.testConnection.useMutation();
 
   return (
     <Group>
@@ -125,13 +111,7 @@ interface TestConnectionIconProps {
   size: number;
 }
 
-const TestConnectionIcon = ({
-  isDirty,
-  isPending,
-  isSuccess,
-  isError,
-  size,
-}: TestConnectionIconProps) => {
+const TestConnectionIcon = ({ isDirty, isPending, isSuccess, isError, size }: TestConnectionIconProps) => {
   if (isPending) return <Loader color="blue" size={size} />;
   if (isDirty) return null;
   if (isSuccess) return <IconCheck size={size} stroke={1.5} color="green" />;
@@ -142,12 +122,7 @@ const TestConnectionIcon = ({
 export const TestConnectionNoticeAlert = () => {
   const t = useI18n();
   return (
-    <Alert
-      variant="light"
-      color="yellow"
-      title="Test Connection"
-      icon={<IconInfoCircle />}
-    >
+    <Alert variant="light" color="yellow" title="Test Connection" icon={<IconInfoCircle />}>
       {t("integration.testConnection.alertNotice")}
     </Alert>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
index 14519e686..e1521abd2 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
@@ -6,16 +6,10 @@ import { Button, Fieldset, Group, Stack, TextInput } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import {
-  getAllSecretKindOptions,
-  getDefaultSecretKinds,
-} from "@homarr/definitions";
-import { useForm, zodResolver } from "@homarr/form";
+import { getAllSecretKindOptions, getDefaultSecretKinds } from "@homarr/definitions";
+import { useZodForm } from "@homarr/form";
 import { useConfirmModal } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -23,11 +17,7 @@ import { validation } from "@homarr/validation";
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 import { SecretCard } from "../../_integration-secret-card";
 import { IntegrationSecretInput } from "../../_integration-secret-inputs";
-import {
-  TestConnection,
-  TestConnectionNoticeAlert,
-  useTestConnectionDirty,
-} from "../../_integration-test-connection";
+import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../../_integration-test-connection";
 
 interface EditIntegrationForm {
   integration: RouterOutputs["integration"]["byId"];
@@ -45,8 +35,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
     url: integration.url,
     secrets: secretsKinds.map((kind) => ({
       kind,
-      value:
-        integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
+      value: integration.secrets.find((secret) => secret.kind === kind)?.value ?? "",
     })),
   };
   const { isDirty, onValuesChange, removeDirty } = useTestConnectionDirty({
@@ -55,16 +44,13 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   });
 
   const router = useRouter();
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.integration.update.omit({ id: true }), {
     initialValues: initialFormValues,
-    validate: zodResolver(validation.integration.update.omit({ id: true })),
     onValuesChange,
   });
   const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
 
-  const secretsMap = new Map(
-    integration.secrets.map((secret) => [secret.kind, secret]),
-  );
+  const secretsMap = new Map(integration.secrets.map((secret) => [secret.kind, secret]));
 
   const handleSubmitAsync = async (values: FormType) => {
     if (isDirty) return;
@@ -83,9 +69,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
             title: t("integration.page.edit.notification.success.title"),
             message: t("integration.page.edit.notification.success.message"),
           });
-          void revalidatePathActionAsync("/manage/integrations").then(() =>
-            router.push("/manage/integrations"),
-          );
+          void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
         },
         onError: () => {
           showErrorNotification({
@@ -102,15 +86,9 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
       <Stack>
         <TestConnectionNoticeAlert />
 
-        <TextInput
-          label={t("integration.field.name.label")}
-          {...form.getInputProps("name")}
-        />
+        <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        <TextInput
-          label={t("integration.field.url.label")}
-          {...form.getInputProps("url")}
-        />
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
@@ -121,10 +99,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
                 onCancel={() =>
                   new Promise((res) => {
                     // When nothing changed, just close the secret card
-                    if (
-                      (form.values.secrets[index]?.value ?? "") ===
-                      (secretsMap.get(kind)?.value ?? "")
-                    ) {
+                    if ((form.values.secrets[index]?.value ?? "") === (secretsMap.get(kind)?.value ?? "")) {
                       return res(true);
                     }
                     openConfirmModal({
@@ -132,10 +107,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
                       children: t("integration.secrets.reset.message"),
                       onCancel: () => res(false),
                       onConfirm: () => {
-                        form.setFieldValue(
-                          `secrets.${index}.value`,
-                          secretsMap.get(kind)!.value ?? "",
-                        );
+                        form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)!.value ?? "");
                         res(true);
                       },
                     });
@@ -164,11 +136,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
             }}
           />
           <Group>
-            <Button
-              variant="default"
-              component={Link}
-              href="/manage/integrations"
-            >
+            <Button variant="default" component={Link} href="/manage/integrations">
               {t("common.action.backToOverview")}
             </Button>
             <Button type="submit" loading={isPending} disabled={isDirty}>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
index 9a2d1293a..bebf34626 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/page.tsx
@@ -11,9 +11,7 @@ interface EditIntegrationPageProps {
   params: { id: string };
 }
 
-export default async function EditIntegrationPage({
-  params,
-}: EditIntegrationPageProps) {
+export default async function EditIntegrationPage({ params }: EditIntegrationPageProps) {
   const t = await getScopedI18n("integration.page.edit");
   const integration = await api.integration.byId({ id: params.id });
 
@@ -22,9 +20,7 @@ export default async function EditIntegrationPage({
       <Stack>
         <Group align="center">
           <IntegrationAvatar kind={integration.kind} size="md" />
-          <Title>
-            {t("title", { name: getIntegrationName(integration.kind) })}
-          </Title>
+          <Title>{t("title", { name: getIntegrationName(integration.kind) })}</Title>
         </Group>
         <EditIntegrationForm integration={integration} />
       </Stack>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
index 4d6e4d7dd..8f03a39ff 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-dropdown.tsx
@@ -16,9 +16,7 @@ export const IntegrationCreateDropdownContent = () => {
   const [search, setSearch] = useState("");
 
   const filteredKinds = useMemo(() => {
-    return integrationKinds.filter((kind) =>
-      kind.includes(search.toLowerCase()),
-    );
+    return integrationKinds.filter((kind) => kind.includes(search.toLowerCase()));
   }, [search]);
 
   const handleSearch = React.useCallback(
@@ -38,11 +36,7 @@ export const IntegrationCreateDropdownContent = () => {
       {filteredKinds.length > 0 ? (
         <ScrollArea.Autosize mah={384}>
           {filteredKinds.map((kind) => (
-            <Menu.Item
-              component={Link}
-              href={`/manage/integrations/new?kind=${kind}`}
-              key={kind}
-            >
+            <Menu.Item component={Link} href={`/manage/integrations/new?kind=${kind}`} key={kind}>
               <Group>
                 <IntegrationAvatar kind={kind} size="sm" />
                 <Text size="sm">{getIntegrationName(kind)}</Text>
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
index 039af27eb..524b2efb9 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx
@@ -3,37 +3,20 @@
 import { useCallback } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import {
-  Button,
-  Fieldset,
-  Group,
-  SegmentedControl,
-  Stack,
-  TextInput,
-} from "@mantine/core";
+import { Button, Fieldset, Group, SegmentedControl, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import type {
-  IntegrationKind,
-  IntegrationSecretKind,
-} from "@homarr/definitions";
+import type { IntegrationKind, IntegrationSecretKind } from "@homarr/definitions";
 import { getAllSecretKindOptions } from "@homarr/definitions";
 import type { UseFormReturnType } from "@homarr/form";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
 
 import { IntegrationSecretInput } from "../_integration-secret-inputs";
-import {
-  TestConnection,
-  TestConnectionNoticeAlert,
-  useTestConnectionDirty,
-} from "../_integration-test-connection";
+import { TestConnection, TestConnectionNoticeAlert, useTestConnectionDirty } from "../_integration-test-connection";
 import { revalidatePathActionAsync } from "../../../../revalidatePathAction";
 
 interface NewIntegrationFormProps {
@@ -42,9 +25,7 @@ interface NewIntegrationFormProps {
   };
 }
 
-export const NewIntegrationForm = ({
-  searchParams,
-}: NewIntegrationFormProps) => {
+export const NewIntegrationForm = ({ searchParams }: NewIntegrationFormProps) => {
   const t = useI18n();
   const secretKinds = getAllSecretKindOptions(searchParams.kind);
   const initialFormValues = {
@@ -60,9 +41,8 @@ export const NewIntegrationForm = ({
     initialFormValue: initialFormValues,
   });
   const router = useRouter();
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.integration.create.omit({ kind: true }), {
     initialValues: initialFormValues,
-    validate: zodResolver(validation.integration.create.omit({ kind: true })),
     onValuesChange,
   });
   const { mutateAsync, isPending } = clientApi.integration.create.useMutation();
@@ -80,9 +60,7 @@ export const NewIntegrationForm = ({
             title: t("integration.page.create.notification.success.title"),
             message: t("integration.page.create.notification.success.message"),
           });
-          void revalidatePathActionAsync("/manage/integrations").then(() =>
-            router.push("/manage/integrations"),
-          );
+          void revalidatePathActionAsync("/manage/integrations").then(() => router.push("/manage/integrations"));
         },
         onError: () => {
           showErrorNotification({
@@ -99,26 +77,16 @@ export const NewIntegrationForm = ({
       <Stack>
         <TestConnectionNoticeAlert />
 
-        <TextInput
-          label={t("integration.field.name.label")}
-          {...form.getInputProps("name")}
-        />
+        <TextInput withAsterisk label={t("integration.field.name.label")} {...form.getInputProps("name")} />
 
-        <TextInput
-          label={t("integration.field.url.label")}
-          {...form.getInputProps("url")}
-        />
+        <TextInput withAsterisk label={t("integration.field.url.label")} {...form.getInputProps("url")} />
 
         <Fieldset legend={t("integration.secrets.title")}>
           <Stack gap="sm">
-            {secretKinds.length > 1 && (
-              <SecretKindsSegmentedControl
-                secretKinds={secretKinds}
-                form={form}
-              />
-            )}
+            {secretKinds.length > 1 && <SecretKindsSegmentedControl secretKinds={secretKinds} form={form} />}
             {form.values.secrets.map(({ kind }, index) => (
               <IntegrationSecretInput
+                withAsterisk
                 key={kind}
                 kind={kind}
                 {...form.getInputProps(`secrets.${index}.value`)}
@@ -139,11 +107,7 @@ export const NewIntegrationForm = ({
           />
 
           <Group>
-            <Button
-              variant="default"
-              component={Link}
-              href="/manage/integrations"
-            >
+            <Button variant="default" component={Link} href="/manage/integrations">
               {t("common.action.backToOverview")}
             </Button>
             <Button type="submit" loading={isPending} disabled={isDirty}>
@@ -161,10 +125,7 @@ interface SecretKindsSegmentedControlProps {
   form: UseFormReturnType<FormType, (values: FormType) => FormType>;
 }
 
-const SecretKindsSegmentedControl = ({
-  secretKinds,
-  form,
-}: SecretKindsSegmentedControlProps) => {
+const SecretKindsSegmentedControl = ({ secretKinds, form }: SecretKindsSegmentedControlProps) => {
   const t = useScopedI18n("integration.secrets");
 
   const secretKindGroups = secretKinds.map((kinds) => ({
@@ -184,13 +145,7 @@ const SecretKindsSegmentedControl = ({
     [form],
   );
 
-  return (
-    <SegmentedControl
-      fullWidth
-      data={secretKindGroups}
-      onChange={onChange}
-    ></SegmentedControl>
-  );
+  return <SegmentedControl fullWidth data={secretKindGroups} onChange={onChange}></SegmentedControl>;
 };
 
 type FormType = Omit<z.infer<typeof validation.integration.create>, "kind">;
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
index 83f2e11bb..23eb474f5 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
@@ -16,12 +16,8 @@ interface NewIntegrationPageProps {
   };
 }
 
-export default async function IntegrationsNewPage({
-  searchParams,
-}: NewIntegrationPageProps) {
-  const result = z
-    .enum([integrationKinds[0]!, ...integrationKinds.slice(1)])
-    .safeParse(searchParams.kind);
+export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
+  const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
   if (!result.success) {
     notFound();
   }
diff --git a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
index 032e72e9b..07b4c894d 100644
--- a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
@@ -43,9 +43,7 @@ interface IntegrationsPageProps {
   };
 }
 
-export default async function IntegrationsPage({
-  searchParams,
-}: IntegrationsPageProps) {
+export default async function IntegrationsPage({ searchParams }: IntegrationsPageProps) {
   const integrations = await api.integration.all();
   const t = await getScopedI18n("integration");
 
@@ -54,18 +52,9 @@ export default async function IntegrationsPage({
       <Stack>
         <Group justify="space-between" align="center">
           <Title>{t("page.list.title")}</Title>
-          <Menu
-            width={256}
-            trapFocus
-            position="bottom-start"
-            withinPortal
-            shadow="md"
-            keepMounted={false}
-          >
+          <Menu width={256} trapFocus position="bottom-start" withinPortal shadow="md" keepMounted={false}>
             <MenuTarget>
-              <Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>
-                {t("action.create")}
-              </Button>
+              <Button rightSection={<IconChevronDown size={16} stroke={1.5} />}>{t("action.create")}</Button>
             </MenuTarget>
             <MenuDropdown>
               <IntegrationCreateDropdownContent />
@@ -73,10 +62,7 @@ export default async function IntegrationsPage({
           </Menu>
         </Group>
 
-        <IntegrationList
-          integrations={integrations}
-          activeTab={searchParams.tab}
-        />
+        <IntegrationList integrations={integrations} activeTab={searchParams.tab} />
       </Stack>
     </Container>
   );
@@ -87,10 +73,7 @@ interface IntegrationListProps {
   activeTab?: IntegrationKind;
 }
 
-const IntegrationList = async ({
-  integrations,
-  activeTab,
-}: IntegrationListProps) => {
+const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps) => {
   const t = await getScopedI18n("integration");
 
   if (integrations.length === 0) {
@@ -134,12 +117,7 @@ const IntegrationList = async ({
                   <TableTr key={integration.id}>
                     <TableTd>{integration.name}</TableTd>
                     <TableTd>
-                      <Anchor
-                        href={integration.url}
-                        target="_blank"
-                        rel="noreferrer"
-                        size="sm"
-                      >
+                      <Anchor href={integration.url} target="_blank" rel="noreferrer" size="sm">
                         {integration.url}
                       </Anchor>
                     </TableTd>
@@ -155,10 +133,7 @@ const IntegrationList = async ({
                           >
                             <IconPencil size={16} stroke={1.5} />
                           </ActionIcon>
-                          <DeleteIntegrationActionButton
-                            integration={integration}
-                            count={integrations.length}
-                          />
+                          <DeleteIntegrationActionButton integration={integration} count={integrations.length} />
                         </ActionIconGroup>
                       </Group>
                     </TableTd>
diff --git a/apps/nextjs/src/app/[locale]/manage/layout.tsx b/apps/nextjs/src/app/[locale]/manage/layout.tsx
index ce95f27f9..63e964b29 100644
--- a/apps/nextjs/src/app/[locale]/manage/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/layout.tsx
@@ -14,6 +14,7 @@ import {
   IconMailForward,
   IconPlug,
   IconQuestionMark,
+  IconSettings,
   IconTool,
   IconUser,
   IconUsers,
@@ -87,6 +88,11 @@ export default async function ManageLayout({ children }: PropsWithChildren) {
         },
       ],
     },
+    {
+      label: t("items.settings"),
+      href: "/manage/settings",
+      icon: IconSettings,
+    },
     {
       label: t("items.help.label"),
       icon: IconQuestionMark,
diff --git a/apps/nextjs/src/app/[locale]/manage/page.tsx b/apps/nextjs/src/app/[locale]/manage/page.tsx
index 6c1bf2b84..711a2e3a3 100644
--- a/apps/nextjs/src/app/[locale]/manage/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/page.tsx
@@ -5,6 +5,7 @@ import { IconArrowRight } from "@tabler/icons-react";
 import { api } from "@homarr/api/server";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { createMetaTitle } from "~/metadata";
 import { HeroBanner } from "./_components/hero-banner";
 
 interface LinkProps {
@@ -16,10 +17,9 @@ interface LinkProps {
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
-  const metaTitle = `${t("metaTitle")} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle")),
   };
 }
 
@@ -71,12 +71,7 @@ export default async function ManagementPage() {
       <Space h="md" />
       <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
         {links.map((link, index) => (
-          <Card
-            component={Link}
-            href={link.href}
-            key={`link-${index}`}
-            withBorder
-          >
+          <Card component={Link} href={link.href} key={`link-${index}`} withBorder>
             <Group justify="space-between">
               <Group>
                 <Text size="2.4rem" fw="bolder">
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
new file mode 100644
index 000000000..dfe86b363
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/_components/analytics.settings.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import type { ReactNode } from "react";
+import React from "react";
+import type { MantineSpacing } from "@mantine/core";
+import { Card, Group, LoadingOverlay, Stack, Switch, Text, Title, UnstyledButton } from "@mantine/core";
+
+import { clientApi } from "@homarr/api/client";
+import type { UseFormReturnType } from "@homarr/form";
+import { useForm } from "@homarr/form";
+import type { defaultServerSettings } from "@homarr/server-settings";
+import { useScopedI18n } from "@homarr/translation/client";
+
+import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
+
+interface AnalyticsSettingsProps {
+  initialData: typeof defaultServerSettings.analytics;
+}
+
+export const AnalyticsSettings = ({ initialData }: AnalyticsSettingsProps) => {
+  const t = useScopedI18n("management.page.settings.section.analytics");
+  const form = useForm({
+    initialValues: initialData,
+    onValuesChange: (updatedValues, _) => {
+      if (!form.isValid()) {
+        return;
+      }
+
+      if (
+        !updatedValues.enableGeneral &&
+        (updatedValues.enableWidgetData || updatedValues.enableIntegrationData || updatedValues.enableUserData)
+      ) {
+        updatedValues.enableIntegrationData = false;
+        updatedValues.enableUserData = false;
+        updatedValues.enableWidgetData = false;
+      }
+
+      void mutateAsync({
+        settingsKey: "analytics",
+        value: updatedValues,
+      });
+    },
+  });
+
+  const { mutateAsync, isPending } = clientApi.serverSettings.saveSettings.useMutation({
+    onSettled: async () => {
+      await revalidatePathActionAsync("/manage/settings");
+    },
+  });
+
+  return (
+    <>
+      <Title order={2}>{t("title")}</Title>
+
+      <Card pos="relative" withBorder>
+        <LoadingOverlay visible={isPending} zIndex={1000} overlayProps={{ radius: "sm", blur: 2 }} />
+        <Stack>
+          <SwitchSetting form={form} formKey="enableGeneral" title={t("general.title")} text={t("general.text")} />
+          <SwitchSetting
+            form={form}
+            formKey="enableIntegrationData"
+            ms="xl"
+            title={t("integrationData.title")}
+            text={t("integrationData.text")}
+          />
+          <SwitchSetting
+            form={form}
+            formKey="enableWidgetData"
+            ms="xl"
+            title={t("widgetData.title")}
+            text={t("widgetData.text")}
+          />
+          <SwitchSetting
+            form={form}
+            formKey="enableUserData"
+            ms="xl"
+            title={t("usersData.title")}
+            text={t("usersData.text")}
+          />
+        </Stack>
+      </Card>
+    </>
+  );
+};
+
+const SwitchSetting = ({
+  form,
+  ms,
+  title,
+  text,
+  formKey,
+}: {
+  form: UseFormReturnType<typeof defaultServerSettings.analytics>;
+  formKey: keyof typeof defaultServerSettings.analytics;
+  ms?: MantineSpacing;
+  title: string;
+  text: ReactNode;
+}) => {
+  const handleClick = React.useCallback(() => {
+    form.setFieldValue(formKey, !form.values[formKey]);
+  }, [form, formKey]);
+  return (
+    <UnstyledButton onClick={handleClick}>
+      <Group ms={ms} justify="space-between" gap="lg" align="center" wrap="nowrap">
+        <Stack gap={0}>
+          <Text fw="bold">{title}</Text>
+          <Text c="gray.5">{text}</Text>
+        </Stack>
+        <Switch {...form.getInputProps(formKey, { type: "checkbox" })} />
+      </Group>
+    </UnstyledButton>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/settings/page.tsx b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
new file mode 100644
index 000000000..bf5c92f34
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/settings/page.tsx
@@ -0,0 +1,26 @@
+import { Stack, Title } from "@mantine/core";
+
+import { api } from "@homarr/api/server";
+import { getScopedI18n } from "@homarr/translation/server";
+
+import { AnalyticsSettings } from "./_components/analytics.settings";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management");
+  const metaTitle = `${t("metaTitle")} • Homarr`;
+
+  return {
+    title: metaTitle,
+  };
+}
+
+export default async function SettingsPage() {
+  const serverSettings = await api.serverSettings.getAll();
+  const t = await getScopedI18n("management.page.settings");
+  return (
+    <Stack>
+      <Title order={1}>{t("title")}</Title>
+      <AnalyticsSettings initialData={serverSettings.analytics} />
+    </Stack>
+  );
+}
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
index f290e4e85..4b6373764 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/page.tsx
@@ -7,13 +7,13 @@ import "@xterm/xterm/css/xterm.css";
 import dynamic from "next/dynamic";
 
 import { fullHeightWithoutHeaderAndFooter } from "~/constants";
+import { createMetaTitle } from "~/metadata";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management");
-  const metaTitle = `${t("metaTitle")} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle")),
   };
 }
 
@@ -23,12 +23,7 @@ const ClientSideTerminalComponent = dynamic(() => import("./terminal"), {
 
 export default function LogsManagementPage() {
   return (
-    <Box
-      style={{ borderRadius: 6 }}
-      h={fullHeightWithoutHeaderAndFooter}
-      p="md"
-      bg="black"
-    >
+    <Box style={{ borderRadius: 6 }} h={fullHeightWithoutHeaderAndFooter} p="md" bg="black">
       <ClientSideTerminalComponent />
     </Box>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx b/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
index 43b105156..428f1f300 100644
--- a/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/tools/logs/terminal.tsx
@@ -16,9 +16,7 @@ export default function TerminalComponent() {
   const terminalRef = useRef<Terminal>();
   clientApi.log.subscribe.useSubscription(undefined, {
     onData(data) {
-      terminalRef.current?.writeln(
-        `${data.timestamp} ${data.level} ${data.message}`,
-      );
+      terminalRef.current?.writeln(`${data.timestamp} ${data.level} ${data.message}`);
       terminalRef.current?.refresh(0, terminalRef.current.rows - 1);
     },
     onError(err) {
@@ -55,12 +53,5 @@ export default function TerminalComponent() {
       canvasAddon.dispose();
     };
   }, []);
-  return (
-    <Box
-      ref={ref}
-      id="terminal"
-      className={classes.outerTerminal}
-      h="100%"
-    ></Box>
-  );
+  return <Box ref={ref} id="terminal" className={classes.outerTerminal} h="100%"></Box>;
 }
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/access.ts b/apps/nextjs/src/app/[locale]/manage/users/[userId]/access.ts
index c5ed1ac30..8e5664911 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/access.ts
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/access.ts
@@ -1,9 +1,6 @@
 import type { Session } from "@homarr/auth";
 
-export const canAccessUserEditPage = (
-  session: Session | null,
-  userId: string,
-) => {
+export const canAccessUserEditPage = (session: Session | null, userId: string) => {
   if (!session) {
     return false;
   }
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_delete-user-button.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_delete-user-button.tsx
similarity index 82%
rename from apps/nextjs/src/app/[locale]/manage/users/[userId]/_delete-user-button.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_delete-user-button.tsx
index 9f501d5c7..c23202e79 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_delete-user-button.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_delete-user-button.tsx
@@ -18,14 +18,11 @@ interface DeleteUserButtonProps {
 export const DeleteUserButton = ({ user }: DeleteUserButtonProps) => {
   const t = useI18n();
   const router = useRouter();
-  const { mutateAsync: mutateUserDeletionAsync } =
-    clientApi.user.delete.useMutation({
-      async onSuccess() {
-        await revalidatePathActionAsync("/manage/users").then(() =>
-          router.push("/manage/users"),
-        );
-      },
-    });
+  const { mutateAsync: mutateUserDeletionAsync } = clientApi.user.delete.useMutation({
+    async onSuccess() {
+      await revalidatePathActionAsync("/manage/users").then(() => router.push("/manage/users"));
+    },
+  });
   const { openConfirmModal } = useConfirmModal();
 
   const handleDelete = useCallback(
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-avatar-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
similarity index 74%
rename from apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-avatar-form.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
index df7f974b0..0e819d163 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-avatar-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
@@ -8,10 +8,7 @@ import { IconPencil, IconPhotoEdit, IconPhotoX } from "@tabler/icons-react";
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 import { UserAvatar } from "@homarr/ui";
 
@@ -46,25 +43,18 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
             // Revalidate all as the avatar is used in multiple places
             await revalidatePathActionAsync("/");
             showSuccessNotification({
-              message: tManageAvatar(
-                "changeImage.notification.success.message",
-              ),
+              message: tManageAvatar("changeImage.notification.success.message"),
             });
           },
           onError(error) {
             if (error.shape?.data.code === "BAD_REQUEST") {
               showErrorNotification({
                 title: tManageAvatar("changeImage.notification.toLarge.title"),
-                message: tManageAvatar(
-                  "changeImage.notification.toLarge.message",
-                  { size: "256KB" },
-                ),
+                message: tManageAvatar("changeImage.notification.toLarge.message", { size: "256KB" }),
               });
             } else {
               showErrorNotification({
-                message: tManageAvatar(
-                  "changeImage.notification.error.message",
-                ),
+                message: tManageAvatar("changeImage.notification.error.message"),
               });
             }
           },
@@ -89,16 +79,12 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
               // Revalidate all as the avatar is used in multiple places
               await revalidatePathActionAsync("/");
               showSuccessNotification({
-                message: tManageAvatar(
-                  "removeImage.notification.success.message",
-                ),
+                message: tManageAvatar("removeImage.notification.success.message"),
               });
             },
             onError() {
               showErrorNotification({
-                message: tManageAvatar(
-                  "removeImage.notification.error.message",
-                ),
+                message: tManageAvatar("removeImage.notification.error.message"),
               });
             },
           },
@@ -109,13 +95,7 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
 
   return (
     <Box pos="relative">
-      <Menu
-        opened={opened}
-        keepMounted
-        onChange={toggle}
-        position="bottom-start"
-        withArrow
-      >
+      <Menu opened={opened} keepMounted onChange={toggle} position="bottom-start" withArrow>
         <Menu.Target>
           <UnstyledButton onClick={toggle}>
             <UserAvatar user={user} size={200} />
@@ -134,24 +114,15 @@ export const UserProfileAvatarForm = ({ user }: UserProfileAvatarForm) => {
           </UnstyledButton>
         </Menu.Target>
         <Menu.Dropdown>
-          <FileButton
-            onChange={handleAvatarChange}
-            accept="image/png,image/jpeg,image/webp,image/gif"
-          >
+          <FileButton onChange={handleAvatarChange} accept="image/png,image/jpeg,image/webp,image/gif">
             {(props) => (
-              <Menu.Item
-                {...props}
-                leftSection={<IconPhotoEdit size={16} stroke={1.5} />}
-              >
+              <Menu.Item {...props} leftSection={<IconPhotoEdit size={16} stroke={1.5} />}>
                 {tManageAvatar("changeImage.label")}
               </Menu.Item>
             )}
           </FileButton>
           {user.image && (
-            <Menu.Item
-              onClick={handleRemoveAvatar}
-              leftSection={<IconPhotoX size={16} stroke={1.5} />}
-            >
+            <Menu.Item onClick={handleRemoveAvatar} leftSection={<IconPhotoX size={16} stroke={1.5} />}>
               {tManageAvatar("removeImage.label")}
             </Menu.Item>
           )}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx
similarity index 73%
rename from apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-form.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx
index 01a3e06c7..44ba9ddb7 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/_profile-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-form.tsx
@@ -5,11 +5,8 @@ import { Button, Group, Stack, TextInput } from "@mantine/core";
 
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
@@ -21,15 +18,6 @@ interface UserProfileFormProps {
 
 export const UserProfileForm = ({ user }: UserProfileFormProps) => {
   const t = useI18n();
-  const form = useForm({
-    initialValues: {
-      name: user.name ?? "",
-      email: user.email ?? "",
-    },
-    validate: zodResolver(validation.user.editProfile.omit({ id: true })),
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
-  });
   const { mutate, isPending } = clientApi.user.editProfile.useMutation({
     async onSettled() {
       await revalidatePathActionAsync("/manage/users");
@@ -56,6 +44,12 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
       });
     },
   });
+  const form = useZodForm(validation.user.editProfile.omit({ id: true }), {
+    initialValues: {
+      name: user.name ?? "",
+      email: user.email ?? "",
+    },
+  });
 
   const handleSubmit = useCallback(
     (values: FormType) => {
@@ -70,23 +64,11 @@ export const UserProfileForm = ({ user }: UserProfileFormProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <TextInput
-          label={t("user.field.username.label")}
-          withAsterisk
-          {...form.getInputProps("name")}
-        />
-        <TextInput
-          label={t("user.field.email.label")}
-          {...form.getInputProps("email")}
-        />
+        <TextInput label={t("user.field.username.label")} withAsterisk {...form.getInputProps("name")} />
+        <TextInput label={t("user.field.email.label")} {...form.getInputProps("email")} />
 
         <Group justify="end">
-          <Button
-            type="submit"
-            color="teal"
-            disabled={!form.isDirty()}
-            loading={isPending}
-          >
+          <Button type="submit" color="teal" disabled={!form.isDirty()} loading={isPending}>
             {t("common.action.saveChanges")}
           </Button>
         </Group>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-language-change.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-language-change.tsx
new file mode 100644
index 000000000..e83b8b170
--- /dev/null
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-language-change.tsx
@@ -0,0 +1,12 @@
+import { Stack, Title } from "@mantine/core";
+
+import { LanguageCombobox } from "~/components/language/language-combobox";
+
+export const ProfileLanguageChange = () => {
+  return (
+    <Stack mb="lg">
+      <Title order={2}>Language & Region</Title>
+      <LanguageCombobox />
+    </Stack>
+  );
+};
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
similarity index 74%
rename from apps/nextjs/src/app/[locale]/manage/users/[userId]/page.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
index 9a5c5aade..82d3a6f89 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
@@ -5,15 +5,14 @@ import { api } from "@homarr/api/server";
 import { auth } from "@homarr/auth/next";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
-import {
-  DangerZoneItem,
-  DangerZoneRoot,
-} from "~/components/manage/danger-zone";
+import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
-import { DeleteUserButton } from "./_delete-user-button";
-import { UserProfileAvatarForm } from "./_profile-avatar-form";
-import { UserProfileForm } from "./_profile-form";
-import { canAccessUserEditPage } from "./access";
+import { createMetaTitle } from "~/metadata";
+import { canAccessUserEditPage } from "../access";
+import { DeleteUserButton } from "./_components/_delete-user-button";
+import { UserProfileAvatarForm } from "./_components/_profile-avatar-form";
+import { UserProfileForm } from "./_components/_profile-form";
+import { ProfileLanguageChange } from "./_components/_profile-language-change";
 
 interface Props {
   params: {
@@ -34,10 +33,9 @@ export async function generateMetadata({ params }: Props) {
   }
 
   const t = await getScopedI18n("management.page.user.edit");
-  const metaTitle = `${t("metaTitle", { username: user?.name })} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle", { username: user?.name })),
   };
 }
 
@@ -67,6 +65,8 @@ export default async function EditUserPage({ params }: Props) {
         </Box>
       </Group>
 
+      <ProfileLanguageChange />
+
       <DangerZoneRoot>
         <DangerZoneItem
           label={t("user.action.delete.label")}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
index 56c798610..be6c0f71a 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/layout.tsx
@@ -1,16 +1,7 @@
 import type { PropsWithChildren } from "react";
 import Link from "next/link";
 import { notFound } from "next/navigation";
-import {
-  Button,
-  Container,
-  Grid,
-  GridCol,
-  Group,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
 import { IconSettings, IconShieldLock } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
@@ -26,16 +17,11 @@ interface LayoutProps {
   params: { userId: string };
 }
 
-export default async function Layout({
-  children,
-  params,
-}: PropsWithChildren<LayoutProps>) {
+export default async function Layout({ children, params }: PropsWithChildren<LayoutProps>) {
   const session = await auth();
   const t = await getI18n();
   const tUser = await getScopedI18n("management.page.user");
-  const user = await api.user
-    .getById({ userId: params.userId })
-    .catch(catchTrpcNotFound);
+  const user = await api.user.getById({ userId: params.userId }).catch(catchTrpcNotFound);
 
   if (!canAccessUserEditPage(session, user.id)) {
     notFound();
@@ -54,12 +40,7 @@ export default async function Layout({
               </Stack>
             </Group>
             {session?.user.permissions.includes("admin") && (
-              <Button
-                component={Link}
-                href="/manage/users"
-                color="gray"
-                variant="light"
-              >
+              <Button component={Link} href="/manage/users" color="gray" variant="light">
                 {tUser("back")}
               </Button>
             )}
@@ -69,7 +50,7 @@ export default async function Layout({
           <Stack>
             <Stack gap={0}>
               <NavigationLink
-                href={`/manage/users/${params.userId}`}
+                href={`/manage/users/${params.userId}/general`}
                 label={tUser("setting.general.title")}
                 icon={<IconSettings size="1rem" stroke={1.5} />}
               />
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_change-password-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx
similarity index 83%
rename from apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_change-password-form.tsx
rename to apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx
index 0f1c310eb..199e225cf 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_change-password-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/_components/_change-password-form.tsx
@@ -5,11 +5,8 @@ import { Button, Fieldset, Group, PasswordInput, Stack } from "@mantine/core";
 import type { RouterInputs, RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
 import { useSession } from "@homarr/auth/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
 import { validation } from "@homarr/validation";
 
@@ -37,15 +34,13 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
       });
     },
   });
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.user.changePassword, {
     initialValues: {
-      previousPassword: "",
+      /* Require previous password if the current user want's to change his password */
+      previousPassword: session?.user.id === user.id ? "" : "_",
       password: "",
       confirmPassword: "",
     },
-    validate: zodResolver(validation.user.changePassword),
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
   });
 
   const handleSubmit = (values: FormType) => {
@@ -76,11 +71,7 @@ export const ChangePasswordForm = ({ user }: ChangePasswordFormProps) => {
               />
             )}
 
-            <PasswordInput
-              withAsterisk
-              label={t("user.field.password.label")}
-              {...form.getInputProps("password")}
-            />
+            <PasswordInput withAsterisk label={t("user.field.password.label")} {...form.getInputProps("password")} />
 
             <PasswordInput
               withAsterisk
diff --git a/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx
index 0ce00f304..0145520de 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/security/page.tsx
@@ -7,7 +7,7 @@ import { getScopedI18n } from "@homarr/translation/server";
 
 import { catchTrpcNotFound } from "~/errors/trpc-not-found";
 import { canAccessUserEditPage } from "../access";
-import { ChangePasswordForm } from "./_change-password-form";
+import { ChangePasswordForm } from "./_components/_change-password-form";
 
 interface Props {
   params: {
@@ -17,9 +17,7 @@ interface Props {
 
 export default async function UserSecurityPage({ params }: Props) {
   const session = await auth();
-  const tSecurity = await getScopedI18n(
-    "management.page.user.setting.security",
-  );
+  const tSecurity = await getScopedI18n("management.page.user.setting.security");
   const user = await api.user
     .getById({
       userId: params.userId,
diff --git a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
index 4bda7a355..8759f5d8d 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/_components/user-list.component.tsx
@@ -15,25 +15,21 @@ interface UserListComponentProps {
   initialUserList: RouterOutputs["user"]["getAll"];
 }
 
-export const UserListComponent = ({
-  initialUserList,
-}: UserListComponentProps) => {
+export const UserListComponent = ({ initialUserList }: UserListComponentProps) => {
   const tUserList = useScopedI18n("management.page.user.list");
   const t = useI18n();
   const { data, isLoading } = clientApi.user.getAll.useQuery(undefined, {
     initialData: initialUserList,
   });
 
-  const columns = useMemo<
-    MRT_ColumnDef<RouterOutputs["user"]["getAll"][number]>[]
-  >(
+  const columns = useMemo<MRT_ColumnDef<RouterOutputs["user"]["getAll"][number]>[]>(
     () => [
       {
         accessorKey: "name",
         header: t("user.field.username.label"),
         grow: 100,
         Cell: ({ renderedCellValue, row }) => (
-          <Link href={`/manage/users/${row.original.id}`}>
+          <Link href={`/manage/users/${row.original.id}/general`}>
             <Group>
               <Avatar size="sm"></Avatar>
               {renderedCellValue}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
index e35b1ae1b..eadf51ddd 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -1,23 +1,15 @@
 "use client";
 
 import { useCallback, useMemo, useState } from "react";
-import {
-  Avatar,
-  Card,
-  PasswordInput,
-  Stack,
-  Stepper,
-  Text,
-  TextInput,
-  Title,
-} from "@mantine/core";
+import { Avatar, Card, PasswordInput, Stack, Stepper, Text, TextInput, Title } from "@mantine/core";
 import { IconUserCheck } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { showErrorNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import { validation, z } from "@homarr/validation";
+import { createCustomErrorParams } from "@homarr/validation/form";
 
 import { StepperNavigationComponent } from "./stepper-navigation.component";
 
@@ -28,14 +20,10 @@ export const UserCreateStepperComponent = () => {
   const stepperMax = 4;
   const [active, setActive] = useState(0);
   const nextStep = useCallback(
-    () =>
-      setActive((current) => (current < stepperMax ? current + 1 : current)),
-    [setActive],
-  );
-  const prevStep = useCallback(
-    () => setActive((current) => (current > 0 ? current - 1 : current)),
+    () => setActive((current) => (current < stepperMax ? current + 1 : current)),
     [setActive],
   );
+  const prevStep = useCallback(() => setActive((current) => (current > 0 ? current - 1 : current)), [setActive]);
   const hasNext = active < stepperMax;
   const hasPrevious = active > 0;
 
@@ -50,49 +38,40 @@ export const UserCreateStepperComponent = () => {
     },
   });
 
-  const generalForm = useForm({
-    initialValues: {
-      username: "",
-      email: undefined,
+  const generalForm = useZodForm(
+    z.object({
+      username: z.string().min(1),
+      email: z.string().email().or(z.string().length(0).optional()),
+    }),
+    {
+      initialValues: {
+        username: "",
+        email: "",
+      },
     },
-    validate: zodResolver(
-      z.object({
-        username: z.string().min(1),
-        email: z.string().email().or(z.string().length(0).optional()),
-      }),
-    ),
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
-  });
-
-  const securityForm = useForm({
-    initialValues: {
-      password: "",
-      confirmPassword: "",
-    },
-    validate: zodResolver(
-      z
-        .object({
-          password: validation.user.password,
-          confirmPassword: z.string(),
-        })
-        .refine((data) => data.password === data.confirmPassword, {
-          path: ["confirmPassword"],
-          message: "Passwords do not match",
-        }),
-    ),
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
-  });
-
-  const allForms = useMemo(
-    () => [generalForm, securityForm],
-    [generalForm, securityForm],
   );
 
-  const isCurrentFormValid = allForms[active]
-    ? (allForms[active]!.isValid satisfies () => boolean)
-    : () => true;
+  const securityForm = useZodForm(
+    z
+      .object({
+        password: validation.user.password,
+        confirmPassword: z.string(),
+      })
+      .refine((data) => data.password === data.confirmPassword, {
+        path: ["confirmPassword"],
+        params: createCustomErrorParams("passwordsDoNotMatch"),
+      }),
+    {
+      initialValues: {
+        password: "",
+        confirmPassword: "",
+      },
+    },
+  );
+
+  const allForms = useMemo(() => [generalForm, securityForm], [generalForm, securityForm]);
+
+  const isCurrentFormValid = allForms[active] ? (allForms[active]!.isValid satisfies () => boolean) : () => true;
   const canNavigateToNextStep = isCurrentFormValid();
 
   const controlledGoToNextStep = useCallback(async () => {
@@ -117,12 +96,7 @@ export const UserCreateStepperComponent = () => {
   return (
     <>
       <Title mb="md">{t("title")}</Title>
-      <Stepper
-        active={active}
-        onStepClick={setActive}
-        allowNextStepsSelect={false}
-        mb="md"
-      >
+      <Stepper active={active} onStepClick={setActive} allowNextStepsSelect={false} mb="md">
         <Stepper.Step
           label={t("step.personalInformation.label")}
           allowStepSelect={false}
@@ -139,20 +113,12 @@ export const UserCreateStepperComponent = () => {
                   {...generalForm.getInputProps("username")}
                 />
 
-                <TextInput
-                  label={tUserField("email.label")}
-                  variant="filled"
-                  {...generalForm.getInputProps("email")}
-                />
+                <TextInput label={tUserField("email.label")} variant="filled" {...generalForm.getInputProps("email")} />
               </Stack>
             </Card>
           </form>
         </Stepper.Step>
-        <Stepper.Step
-          label={t("step.security.label")}
-          allowStepSelect={false}
-          allowStepClick={false}
-        >
+        <Stepper.Step label={t("step.security.label")} allowStepSelect={false} allowStepClick={false}>
           <form>
             <Card p="xl">
               <Stack gap="md">
@@ -180,11 +146,7 @@ export const UserCreateStepperComponent = () => {
         >
           3
         </Stepper.Step>
-        <Stepper.Step
-          label={t("step.review.label")}
-          allowStepSelect={false}
-          allowStepClick={false}
-        >
+        <Stepper.Step label={t("step.review.label")} allowStepSelect={false} allowStepClick={false}>
           <Card p="xl">
             <Stack maw={300} align="center" mx="auto">
               <Avatar size="xl">{generalForm.values.username}</Avatar>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx
index 5511eeaf5..9a277f8b1 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/stepper-navigation.component.tsx
@@ -1,11 +1,6 @@
 import Link from "next/link";
 import { Button, Card, Group } from "@mantine/core";
-import {
-  IconArrowBackUp,
-  IconArrowLeft,
-  IconArrowRight,
-  IconRotate,
-} from "@tabler/icons-react";
+import { IconArrowBackUp, IconArrowLeft, IconArrowRight, IconRotate } from "@tabler/icons-react";
 
 import { useI18n } from "@homarr/translation/client";
 
@@ -51,18 +46,10 @@ export const StepperNavigationComponent = ({
         </Group>
       ) : (
         <Group justify="end" wrap="nowrap">
-          <Button
-            variant="light"
-            leftSection={<IconRotate size="1rem" />}
-            onClick={reset}
-          >
+          <Button variant="light" leftSection={<IconRotate size="1rem" />} onClick={reset}>
             {t("management.page.user.create.action.createAnother")}
           </Button>
-          <Button
-            leftSection={<IconArrowBackUp size="1rem" />}
-            component={Link}
-            href="/manage/users"
-          >
+          <Button leftSection={<IconArrowBackUp size="1rem" />} component={Link} href="/manage/users">
             {t("management.page.user.create.action.back")}
           </Button>
         </Group>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
index 5f5d28c07..b44c17b6c 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/page.tsx
@@ -1,13 +1,13 @@
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { createMetaTitle } from "~/metadata";
 import { UserCreateStepperComponent } from "./_components/create-user-stepper";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management.page.user.create");
-  const metaTitle = `${t("metaTitle")} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle")),
   };
 }
 
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
index a0dfe6cbb..5941a31a2 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_delete-group.tsx
@@ -6,10 +6,7 @@ import { Button } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
@@ -63,15 +60,7 @@ export const DeleteGroup = ({ group }: DeleteGroupProps) => {
         );
       },
     });
-  }, [
-    tDelete,
-    tRoot,
-    openConfirmModal,
-    group.id,
-    group.name,
-    mutateAsync,
-    router,
-  ]);
+  }, [tDelete, tRoot, openConfirmModal, group.id, group.name, mutateAsync, router]);
 
   return (
     <Button variant="subtle" color="red" onClick={handleDeletion}>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx
index cef6b6a11..8b7f0004c 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_navigation.tsx
@@ -14,13 +14,5 @@ interface NavigationLinkProps {
 export const NavigationLink = ({ href, icon, label }: NavigationLinkProps) => {
   const pathName = usePathname();
 
-  return (
-    <NavLink
-      component={Link}
-      href={href}
-      active={pathName === href}
-      label={label}
-      leftSection={icon}
-    />
-  );
+  return <NavLink component={Link} href={href} active={pathName === href} label={label} leftSection={icon} />;
 };
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx
index da0f9195c..fea242030 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_rename-group-form.tsx
@@ -4,12 +4,10 @@ import { useCallback } from "react";
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 
@@ -23,7 +21,7 @@ interface RenameGroupFormProps {
 export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
   const t = useI18n();
   const { mutate, isPending } = clientApi.group.updateGroup.useMutation();
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.group.update.pick({ name: true }), {
     initialValues: {
       name: group.name,
     },
@@ -63,10 +61,7 @@ export const RenameGroupForm = ({ group }: RenameGroupFormProps) => {
   return (
     <form onSubmit={form.onSubmit(handleSubmit)}>
       <Stack>
-        <TextInput
-          label={t("group.field.name")}
-          {...form.getInputProps("name")}
-        />
+        <TextInput label={t("group.field.name")} {...form.getInputProps("name")} />
 
         <Group justify="end">
           <Button type="submit" color="teal" loading={isPending}>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
index 89bafb3e5..a350b3236 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_transfer-group-ownership.tsx
@@ -5,10 +5,7 @@ import { Button } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useConfirmModal, useModalAction } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 import { UserSelectModal } from "~/app/[locale]/boards/[name]/settings/_access/user-select-modal";
@@ -21,9 +18,7 @@ interface TransferGroupOwnershipProps {
   };
 }
 
-export const TransferGroupOwnership = ({
-  group,
-}: TransferGroupOwnershipProps) => {
+export const TransferGroupOwnership = ({ group }: TransferGroupOwnershipProps) => {
   const tTransfer = useScopedI18n("group.action.transfer");
   const tRoot = useI18n();
   const [innerOwnerId, setInnerOwnerId] = useState(group.ownerId);
@@ -77,16 +72,7 @@ export const TransferGroupOwnership = ({
         title: tTransfer("label"),
       },
     );
-  }, [
-    group.id,
-    group.name,
-    innerOwnerId,
-    mutateAsync,
-    openConfirmModal,
-    openModal,
-    tRoot,
-    tTransfer,
-  ]);
+  }, [group.id, group.name, innerOwnerId, mutateAsync, openConfirmModal, openModal, tRoot, tTransfer]);
 
   return (
     <Button variant="subtle" color="red" onClick={handleTransfer}>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
index ee0f8e5e1..e512c13b5 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/layout.tsx
@@ -1,15 +1,6 @@
 import type { PropsWithChildren } from "react";
 import Link from "next/link";
-import {
-  Button,
-  Container,
-  Grid,
-  GridCol,
-  Group,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Button, Container, Grid, GridCol, Group, Stack, Text, Title } from "@mantine/core";
 import { IconLock, IconSettings, IconUsersGroup } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
@@ -21,10 +12,7 @@ interface LayoutProps {
   params: { id: string };
 }
 
-export default async function Layout({
-  children,
-  params,
-}: PropsWithChildren<LayoutProps>) {
+export default async function Layout({ children, params }: PropsWithChildren<LayoutProps>) {
   const t = await getI18n();
   const tGroup = await getScopedI18n("management.page.group");
   const group = await api.group.getById({ id: params.id });
@@ -38,12 +26,7 @@ export default async function Layout({
               <Title order={3}>{group.name}</Title>
               <Text c="gray.5">{t("group.name")}</Text>
             </Stack>
-            <Button
-              component={Link}
-              href="/manage/users/groups"
-              color="gray"
-              variant="light"
-            >
+            <Button component={Link} href="/manage/users/groups" color="gray" variant="light">
               {tGroup("back")}
             </Button>
           </Group>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
index b1b585629..2d7d2941d 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_add-group-member.tsx
@@ -15,10 +15,7 @@ interface AddGroupMemberProps {
   presentUserIds: string[];
 }
 
-export const AddGroupMember = ({
-  groupId,
-  presentUserIds,
-}: AddGroupMemberProps) => {
+export const AddGroupMember = ({ groupId, presentUserIds }: AddGroupMemberProps) => {
   const tMembersAdd = useScopedI18n("group.action.addMember");
   const { mutateAsync } = clientApi.group.addMember.useMutation();
   const { openModal } = useModalAction(UserSelectModal);
@@ -32,9 +29,7 @@ export const AddGroupMember = ({
             userId: id,
             groupId,
           });
-          await revalidatePathActionAsync(
-            `/manage/users/groups/${groupId}}/members`,
-          );
+          await revalidatePathActionAsync(`/manage/users/groups/${groupId}}/members`);
         },
         presentUserIds,
       },
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_remove-group-member.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_remove-group-member.tsx
index 6c8ea272e..be9b9ff78 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_remove-group-member.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/_remove-group-member.tsx
@@ -14,10 +14,7 @@ interface RemoveGroupMemberProps {
   user: { id: string; name: string | null };
 }
 
-export const RemoveGroupMember = ({
-  groupId,
-  user,
-}: RemoveGroupMemberProps) => {
+export const RemoveGroupMember = ({ groupId, user }: RemoveGroupMemberProps) => {
   const t = useI18n();
   const tRemoveMember = useScopedI18n("group.action.removeMember");
   const { mutateAsync } = clientApi.group.removeMember.useMutation();
@@ -35,27 +32,13 @@ export const RemoveGroupMember = ({
           groupId,
           userId: user.id,
         });
-        await revalidatePathActionAsync(
-          `/manage/users/groups/${groupId}/members`,
-        );
+        await revalidatePathActionAsync(`/manage/users/groups/${groupId}/members`);
       },
     });
-  }, [
-    openConfirmModal,
-    mutateAsync,
-    groupId,
-    user.id,
-    user.name,
-    tRemoveMember,
-  ]);
+  }, [openConfirmModal, mutateAsync, groupId, user.id, user.name, tRemoveMember]);
 
   return (
-    <Button
-      variant="subtle"
-      color="red.9"
-      size="compact-sm"
-      onClick={handleRemove}
-    >
+    <Button variant="subtle" color="red.9" size="compact-sm" onClick={handleRemove}>
       {t("common.action.remove")}
     </Button>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
index a9bdea5f4..7f694ba6b 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
@@ -1,16 +1,5 @@
 import Link from "next/link";
-import {
-  Anchor,
-  Center,
-  Group,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTr,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Anchor, Center, Group, Stack, Table, TableTbody, TableTd, TableTr, Text, Title } from "@mantine/core";
 
 import type { RouterOutputs } from "@homarr/api";
 import { api } from "@homarr/api/server";
@@ -29,20 +18,13 @@ interface GroupsDetailPageProps {
   };
 }
 
-export default async function GroupsDetailPage({
-  params,
-  searchParams,
-}: GroupsDetailPageProps) {
+export default async function GroupsDetailPage({ params, searchParams }: GroupsDetailPageProps) {
   const t = await getI18n();
   const tMembers = await getScopedI18n("management.page.group.setting.members");
   const group = await api.group.getById({ id: params.id });
 
   const filteredMembers = searchParams.search
-    ? group.members.filter((member) =>
-        member.name
-          ?.toLowerCase()
-          .includes(searchParams.search!.trim().toLowerCase()),
-      )
+    ? group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
     : group.members;
 
   return (
@@ -56,10 +38,7 @@ export default async function GroupsDetailPage({
           })}
           defaultValue={searchParams.search}
         />
-        <AddGroupMember
-          groupId={group.id}
-          presentUserIds={group.members.map((member) => member.id)}
-        />
+        <AddGroupMember groupId={group.id} presentUserIds={group.members.map((member) => member.id)} />
       </Group>
       {filteredMembers.length === 0 && (
         <Center py="sm">
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
index 2c8e1fa4d..cc3496520 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/page.tsx
@@ -3,10 +3,7 @@ import { Stack, Title } from "@mantine/core";
 import { api } from "@homarr/api/server";
 import { getScopedI18n } from "@homarr/translation/server";
 
-import {
-  DangerZoneItem,
-  DangerZoneRoot,
-} from "~/components/manage/danger-zone";
+import { DangerZoneItem, DangerZoneRoot } from "~/components/manage/danger-zone";
 import { DeleteGroup } from "./_delete-group";
 import { RenameGroupForm } from "./_rename-group-form";
 import { TransferGroupOwnership } from "./_transfer-group-ownership";
@@ -17,9 +14,7 @@ interface GroupsDetailPageProps {
   };
 }
 
-export default async function GroupsDetailPage({
-  params,
-}: GroupsDetailPageProps) {
+export default async function GroupsDetailPage({ params }: GroupsDetailPageProps) {
   const group = await api.group.getById({ id: params.id });
   const tGeneral = await getScopedI18n("management.page.group.setting.general");
   const tGroupAction = await getScopedI18n("group.action");
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx
index 38dddc0f9..ef5906354 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/_group-permission-form.tsx
@@ -9,10 +9,7 @@ import { objectEntries } from "@homarr/common";
 import type { GroupPermissionKey } from "@homarr/definitions";
 import { groupPermissionKeys } from "@homarr/definitions";
 import { createFormContext } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n, useScopedI18n } from "@homarr/translation/client";
 
 const [FormProvider, useFormContext, useForm] = createFormContext<FormType>();
@@ -21,10 +18,7 @@ interface PermissionFormProps {
   initialPermissions: GroupPermissionKey[];
 }
 
-export const PermissionForm = ({
-  children,
-  initialPermissions,
-}: PropsWithChildren<PermissionFormProps>) => {
+export const PermissionForm = ({ children, initialPermissions }: PropsWithChildren<PermissionFormProps>) => {
   const form = useForm({
     initialValues: groupPermissionKeys.reduce((acc, key) => {
       acc[key] = initialPermissions.includes(key);
@@ -73,9 +67,7 @@ interface SaveAffixProps {
 export const SaveAffix = ({ groupId }: SaveAffixProps) => {
   const t = useI18n();
   const tForm = useScopedI18n("management.page.group.setting.permissions.form");
-  const tNotification = useScopedI18n(
-    "group.action.changePermissions.notification",
-  );
+  const tNotification = useScopedI18n("group.action.changePermissions.notification");
   const form = useFormContext();
   const { mutate, isPending } = clientApi.group.savePermissions.useMutation();
 
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
index 98acc2c11..21f89c5e9 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/permissions/page.tsx
@@ -1,13 +1,5 @@
 import React from "react";
-import {
-  Card,
-  CardSection,
-  Divider,
-  Group,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
 
 import { api } from "@homarr/api/server";
 import { objectKeys } from "@homarr/common";
@@ -15,11 +7,7 @@ import type { GroupPermissionKey } from "@homarr/definitions";
 import { groupPermissions } from "@homarr/definitions";
 import { getI18n, getScopedI18n } from "@homarr/translation/server";
 
-import {
-  PermissionForm,
-  PermissionSwitch,
-  SaveAffix,
-} from "./_group-permission-form";
+import { PermissionForm, PermissionSwitch, SaveAffix } from "./_group-permission-form";
 
 interface GroupPermissionsPageProps {
   params: {
@@ -27,9 +15,7 @@ interface GroupPermissionsPageProps {
   };
 }
 
-export default async function GroupPermissionsPage({
-  params,
-}: GroupPermissionsPageProps) {
+export default async function GroupPermissionsPage({ params }: GroupPermissionsPageProps) {
   const group = await api.group.getById({ id: params.id });
   const tPermissions = await getScopedI18n("group.permission");
   const t = await getI18n();
@@ -99,10 +85,7 @@ const PermissionCard = async ({ group, isDanger }: PermissionCardProps) => {
   );
 };
 
-const createGroupPermissionKey = (
-  group: keyof typeof groupPermissions,
-  permission: string,
-): GroupPermissionKey => {
+const createGroupPermissionKey = (group: keyof typeof groupPermissions, permission: string): GroupPermissionKey => {
   if (typeof groupPermissions[group] === "boolean") {
     return group as GroupPermissionKey;
   }
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
index e126e7503..b28ddccd0 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/_add-group.tsx
@@ -4,13 +4,11 @@ import { useCallback } from "react";
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal, useModalAction } from "@homarr/modals";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useI18n } from "@homarr/translation/client";
+import { validation } from "@homarr/validation";
 
 import { revalidatePathActionAsync } from "~/app/revalidatePathAction";
 
@@ -32,7 +30,7 @@ export const AddGroup = () => {
 const AddGroupModal = createModal<void>(({ actions }) => {
   const t = useI18n();
   const { mutate, isPending } = clientApi.group.createGroup.useMutation();
-  const form = useForm({
+  const form = useZodForm(validation.group.create, {
     initialValues: {
       name: "",
     },
@@ -60,11 +58,7 @@ const AddGroupModal = createModal<void>(({ actions }) => {
       })}
     >
       <Stack>
-        <TextInput
-          label={t("group.field.name")}
-          data-autofocus
-          {...form.getInputProps("name")}
-        />
+        <TextInput label={t("group.field.name")} data-autofocus {...form.getInputProps("name")} />
         <Group justify="right">
           <Button onClick={actions.closeModal} variant="subtle" color="gray">
             {t("common.action.cancel")}
diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
index d41d98d1c..410fe57ed 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/page.tsx
@@ -27,25 +27,18 @@ const searchParamsSchema = z.object({
   page: z.string().regex(/\d+/).transform(Number).catch(1),
 });
 
-type SearchParamsSchemaInputFromSchema<
-  TSchema extends Record<string, unknown>,
-> = Partial<{
-  [K in keyof TSchema]: Exclude<TSchema[K], undefined> extends unknown[]
-    ? string[]
-    : string;
+type SearchParamsSchemaInputFromSchema<TSchema extends Record<string, unknown>> = Partial<{
+  [K in keyof TSchema]: Exclude<TSchema[K], undefined> extends unknown[] ? string[] : string;
 }>;
 
 interface GroupsListPageProps {
-  searchParams: SearchParamsSchemaInputFromSchema<
-    z.infer<typeof searchParamsSchema>
-  >;
+  searchParams: SearchParamsSchemaInputFromSchema<z.infer<typeof searchParamsSchema>>;
 }
 
 export default async function GroupsListPage(props: GroupsListPageProps) {
   const t = await getI18n();
   const searchParams = searchParamsSchema.parse(props.searchParams);
-  const { items: groups, totalCount } =
-    await api.group.getPaginated(searchParams);
+  const { items: groups, totalCount } = await api.group.getPaginated(searchParams);
 
   return (
     <Container size="xl">
@@ -76,9 +69,7 @@ export default async function GroupsListPage(props: GroupsListPageProps) {
         </Table>
 
         <Group justify="end">
-          <TablePagination
-            total={Math.ceil(totalCount / searchParams.pageSize)}
-          />
+          <TablePagination total={Math.ceil(totalCount / searchParams.pageSize)} />
         </Group>
       </Stack>
     </Container>
diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-copy-modal.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-copy-modal.tsx
index 359402cf4..2fa3890a3 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-copy-modal.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-copy-modal.tsx
@@ -6,9 +6,7 @@ import type { RouterOutputs } from "@homarr/api";
 import { createModal } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
-export const InviteCopyModal = createModal<
-  RouterOutputs["invite"]["createInvite"]
->(({ actions, innerProps }) => {
+export const InviteCopyModal = createModal<RouterOutputs["invite"]["createInvite"]>(({ actions, innerProps }) => {
   const t = useScopedI18n("management.page.user.invite");
   const inviteUrl = useInviteUrl(innerProps);
 
@@ -50,13 +48,9 @@ export const InviteCopyModal = createModal<
   },
 });
 
-const createPath = ({ id, token }: RouterOutputs["invite"]["createInvite"]) =>
-  `/auth/invite/${id}?token=${token}`;
+const createPath = ({ id, token }: RouterOutputs["invite"]["createInvite"]) => `/auth/invite/${id}?token=${token}`;
 
-const useInviteUrl = ({
-  id,
-  token,
-}: RouterOutputs["invite"]["createInvite"]) => {
+const useInviteUrl = ({ id, token }: RouterOutputs["invite"]["createInvite"]) => {
   const pathname = usePathname();
 
   return window.location.href.replace(pathname, createPath({ id, token }));
diff --git a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx
index 8a512818e..accc23982 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/invites/_components/invite-list.tsx
@@ -21,9 +21,7 @@ interface InviteListComponentProps {
   initialInvites: RouterOutputs["invite"]["getAll"];
 }
 
-export const InviteListComponent = ({
-  initialInvites,
-}: InviteListComponentProps) => {
+export const InviteListComponent = ({ initialInvites }: InviteListComponentProps) => {
   const t = useScopedI18n("management.page.user.invite");
   const { data, isLoading } = clientApi.invite.getAll.useQuery(undefined, {
     initialData: initialInvites,
@@ -32,9 +30,7 @@ export const InviteListComponent = ({
     refetchOnReconnect: false,
   });
 
-  const columns = useMemo<
-    MRT_ColumnDef<RouterOutputs["invite"]["getAll"][number]>[]
-  >(
+  const columns = useMemo<MRT_ColumnDef<RouterOutputs["invite"]["getAll"][number]>[]>(
     () => [
       {
         accessorKey: "id",
@@ -100,11 +96,7 @@ const RenderTopToolbarCustomActions = () => {
   );
 };
 
-const RenderRowActions = ({
-  row,
-}: {
-  row: MRT_Row<RouterOutputs["invite"]["getAll"][number]>;
-}) => {
+const RenderRowActions = ({ row }: { row: MRT_Row<RouterOutputs["invite"]["getAll"][number]> }) => {
   const t = useScopedI18n("management.page.user.invite");
   const { mutate, isPending } = clientApi.invite.deleteInvite.useMutation();
   const utils = clientApi.useUtils();
@@ -121,12 +113,7 @@ const RenderRowActions = ({
   }, [openConfirmModal, row.original.id, mutate, utils, t]);
 
   return (
-    <ActionIcon
-      variant="subtle"
-      color="red"
-      onClick={handleDelete}
-      loading={isPending}
-    >
+    <ActionIcon variant="subtle" color="red" onClick={handleDelete} loading={isPending}>
       <IconTrash color="red" size={20} stroke={1.5} />
     </ActionIcon>
   );
diff --git a/apps/nextjs/src/app/[locale]/manage/users/page.tsx b/apps/nextjs/src/app/[locale]/manage/users/page.tsx
index 6d5f4f3d5..61a143f5a 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/page.tsx
@@ -1,14 +1,14 @@
 import { api } from "@homarr/api/server";
 import { getScopedI18n } from "@homarr/translation/server";
 
+import { createMetaTitle } from "~/metadata";
 import { UserListComponent } from "./_components/user-list.component";
 
 export async function generateMetadata() {
   const t = await getScopedI18n("management.page.user.list");
-  const metaTitle = `${t("metaTitle")} • Homarr`;
 
   return {
-    title: metaTitle,
+    title: createMetaTitle(t("metaTitle")),
   };
 }
 
diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
index 8f76fda4f..9a2a1f100 100644
--- a/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
+++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/_content.tsx
@@ -2,18 +2,13 @@
 
 import { useCallback, useMemo, useState } from "react";
 import { ActionIcon, Affix, Card } from "@mantine/core";
-import {
-  IconDimensions,
-  IconPencil,
-  IconToggleLeft,
-  IconToggleRight,
-} from "@tabler/icons-react";
+import { IconDimensions, IconPencil, IconToggleLeft, IconToggleRight } from "@tabler/icons-react";
 
 import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import { useModalAction } from "@homarr/modals";
 import { showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
-import type { BoardItemIntegration } from "@homarr/validation";
+import type { BoardItemAdvancedOptions, BoardItemIntegration } from "@homarr/validation";
 import {
   loadWidgetDynamic,
   reduceWidgetOptionsWithDefaultValues,
@@ -34,19 +29,11 @@ interface WidgetPreviewPageContentProps {
   }[];
 }
 
-export const WidgetPreviewPageContent = ({
-  kind,
-  integrationData,
-}: WidgetPreviewPageContentProps) => {
+export const WidgetPreviewPageContent = ({ kind, integrationData }: WidgetPreviewPageContentProps) => {
   const t = useScopedI18n("widgetPreview");
   const { openModal: openWidgetEditModal } = useModalAction(WidgetEditModal);
-  const { openModal: openPreviewDimensionsModal } = useModalAction(
-    PreviewDimensionsModal,
-  );
-  const currentDefinition = useMemo(
-    () => widgetImports[kind].definition,
-    [kind],
-  );
+  const { openModal: openPreviewDimensionsModal } = useModalAction(PreviewDimensionsModal);
+  const currentDefinition = useMemo(() => widgetImports[kind].definition, [kind]);
   const [editMode, setEditMode] = useState(false);
   const [dimensions, setDimensions] = useState<Dimensions>({
     width: 128,
@@ -55,9 +42,13 @@ export const WidgetPreviewPageContent = ({
   const [state, setState] = useState<{
     options: Record<string, unknown>;
     integrations: BoardItemIntegration[];
+    advancedOptions: BoardItemAdvancedOptions;
   }>({
     options: reduceWidgetOptionsWithDefaultValues(kind, {}),
     integrations: [],
+    advancedOptions: {
+      customCssClasses: [],
+    },
   });
 
   const handleOpenEditWidgetModal = useCallback(() => {
@@ -70,9 +61,7 @@ export const WidgetPreviewPageContent = ({
       integrationData: integrationData.filter(
         (integration) =>
           "supportedIntegrations" in currentDefinition &&
-          (currentDefinition.supportedIntegrations as string[]).some(
-            (kind) => kind === integration.kind,
-          ),
+          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
       ),
       integrationSupport: "supportedIntegrations" in currentDefinition,
     });
@@ -96,19 +85,11 @@ export const WidgetPreviewPageContent = ({
 
   return (
     <>
-      <Card
-        withBorder
-        w={dimensions.width}
-        h={dimensions.height}
-        p={dimensions.height >= 96 ? undefined : 4}
-      >
+      <Card withBorder w={dimensions.width} h={dimensions.height} p={dimensions.height >= 96 ? undefined : 4}>
         <Comp
           options={state.options as never}
           integrations={state.integrations.map(
-            (stateIntegration) =>
-              integrationData.find(
-                (integration) => integration.id === stateIntegration.id,
-              )!,
+            (stateIntegration) => integrationData.find((integration) => integration.id === stateIntegration.id)!,
           )}
           width={dimensions.width}
           height={dimensions.height}
@@ -118,36 +99,17 @@ export const WidgetPreviewPageContent = ({
         />
       </Card>
       <Affix bottom={12} right={72}>
-        <ActionIcon
-          size={48}
-          variant="default"
-          radius="xl"
-          onClick={handleOpenEditWidgetModal}
-        >
+        <ActionIcon size={48} variant="default" radius="xl" onClick={handleOpenEditWidgetModal}>
           <IconPencil size={24} />
         </ActionIcon>
       </Affix>
       <Affix bottom={12} right={72 + 60}>
-        <ActionIcon
-          size={48}
-          variant="default"
-          radius="xl"
-          onClick={toggleEditMode}
-        >
-          {editMode ? (
-            <IconToggleLeft size={24} />
-          ) : (
-            <IconToggleRight size={24} />
-          )}
+        <ActionIcon size={48} variant="default" radius="xl" onClick={toggleEditMode}>
+          {editMode ? <IconToggleLeft size={24} /> : <IconToggleRight size={24} />}
         </ActionIcon>
       </Affix>
       <Affix bottom={12} right={72 + 120}>
-        <ActionIcon
-          size={48}
-          variant="default"
-          radius="xl"
-          onClick={openDimensionsModal}
-        >
+        <ActionIcon size={48} variant="default" radius="xl" onClick={openDimensionsModal}>
           <IconDimensions size={24} />
         </ActionIcon>
       </Affix>
diff --git a/apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx b/apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx
index 964330fe7..1077de04a 100644
--- a/apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx
+++ b/apps/nextjs/src/app/[locale]/widgets/[kind]/_dimension-modal.tsx
@@ -11,48 +11,36 @@ interface InnerProps {
   setDimensions: (dimensions: Dimensions) => void;
 }
 
-export const PreviewDimensionsModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const form = useForm({
-      initialValues: innerProps.dimensions,
-    });
+export const PreviewDimensionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const form = useForm({
+    initialValues: innerProps.dimensions,
+  });
 
-    const handleSubmit = (values: Dimensions) => {
-      innerProps.setDimensions(values);
-      actions.closeModal();
-    };
+  const handleSubmit = (values: Dimensions) => {
+    innerProps.setDimensions(values);
+    actions.closeModal();
+  };
 
-    return (
-      <form onSubmit={form.onSubmit(handleSubmit)}>
-        <Stack>
-          <InputWrapper label={t("item.move.field.width.label")}>
-            <Slider
-              min={64}
-              max={1024}
-              step={64}
-              {...form.getInputProps("width")}
-            />
-          </InputWrapper>
-          <InputWrapper label={t("item.move.field.height.label")}>
-            <Slider
-              min={64}
-              max={1024}
-              step={64}
-              {...form.getInputProps("height")}
-            />
-          </InputWrapper>
-          <Group justify="end">
-            <Button variant="subtle" color="gray" onClick={actions.closeModal}>
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit">{t("common.action.confirm")}</Button>
-          </Group>
-        </Stack>
-      </form>
-    );
-  },
-).withOptions({
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <InputWrapper label={t("item.move.field.width.label")}>
+          <Slider min={64} max={1024} step={64} {...form.getInputProps("width")} />
+        </InputWrapper>
+        <InputWrapper label={t("item.move.field.height.label")}>
+          <Slider min={64} max={1024} step={64} {...form.getInputProps("height")} />
+        </InputWrapper>
+        <Group justify="end">
+          <Button variant="subtle" color="gray" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit">{t("common.action.confirm")}</Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
   defaultTitle: (t) => t("widgetPreview.dimensions.title"),
 });
 
diff --git a/apps/nextjs/src/app/api/trpc/[trpc]/route.ts b/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
index e4682239b..7d1ae50d5 100644
--- a/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
+++ b/apps/nextjs/src/app/api/trpc/[trpc]/route.ts
@@ -28,12 +28,9 @@ const handler = auth(async (req) => {
     endpoint: "/api/trpc",
     router: appRouter,
     req,
-    createContext: () =>
-      createTRPCContext({ session: req.auth, headers: req.headers }),
+    createContext: () => createTRPCContext({ session: req.auth, headers: req.headers }),
     onError({ error, path, type }) {
-      logger.error(
-        `tRPC Error with ${type} on '${path}': (${error.code}) - ${error.message}`,
-      );
+      logger.error(`tRPC Error with ${type} on '${path}': (${error.code}) - ${error.message}`);
     },
   });
 
diff --git a/apps/nextjs/src/components/active-tab-accordion.tsx b/apps/nextjs/src/components/active-tab-accordion.tsx
index bd000a0df..d52c987b4 100644
--- a/apps/nextjs/src/components/active-tab-accordion.tsx
+++ b/apps/nextjs/src/components/active-tab-accordion.tsx
@@ -7,28 +7,16 @@ import type { AccordionProps } from "@mantine/core";
 import { Accordion } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 
-type ActiveTabAccordionProps = PropsWithChildren<
-  Omit<AccordionProps<false>, "onChange">
->;
+type ActiveTabAccordionProps = PropsWithChildren<Omit<AccordionProps<false>, "onChange">>;
 
 // Replace state without fetchign new data
 const replace = (newUrl: string) => {
-  window.history.replaceState(
-    { ...window.history.state, as: newUrl, url: newUrl },
-    "",
-    newUrl,
-  );
+  window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
 };
 
-export const ActiveTabAccordion = ({
-  children,
-  ...props
-}: ActiveTabAccordionProps) => {
+export const ActiveTabAccordion = ({ children, ...props }: ActiveTabAccordionProps) => {
   const pathname = usePathname();
-  const onChange = useCallback(
-    (tab: string | null) => (tab ? replace(`?tab=${tab}`) : replace(pathname)),
-    [pathname],
-  );
+  const onChange = useCallback((tab: string | null) => (tab ? replace(`?tab=${tab}`) : replace(pathname)), [pathname]);
 
   useShallowEffect(() => {
     if (props.defaultValue) {
diff --git a/apps/nextjs/src/components/board/items/item-actions.tsx b/apps/nextjs/src/components/board/items/item-actions.tsx
index 83df3aaa8..309dab8bd 100644
--- a/apps/nextjs/src/components/board/items/item-actions.tsx
+++ b/apps/nextjs/src/components/board/items/item-actions.tsx
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 
 import { createId } from "@homarr/db/client";
 import type { WidgetKind } from "@homarr/definitions";
-import type { BoardItemIntegration } from "@homarr/validation";
+import type { BoardItemAdvancedOptions, BoardItemIntegration } from "@homarr/validation";
 
 import type { EmptySection, Item } from "~/app/[locale]/boards/_types";
 import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
@@ -31,6 +31,11 @@ interface UpdateItemOptions {
   newOptions: Record<string, unknown>;
 }
 
+interface UpdateItemAdvancedOptions {
+  itemId: string;
+  newAdvancedOptions: BoardItemAdvancedOptions;
+}
+
 interface UpdateItemIntegrations {
   itemId: string;
   newIntegrations: BoardItemIntegration[];
@@ -47,12 +52,8 @@ export const useItemActions = () => {
     ({ kind }: CreateItem) => {
       updateBoard((previous) => {
         const lastSection = previous.sections
-          .filter(
-            (section): section is EmptySection => section.kind === "empty",
-          )
-          .sort(
-            (sectionA, sectionB) => sectionB.position - sectionA.position,
-          )[0];
+          .filter((section): section is EmptySection => section.kind === "empty")
+          .sort((sectionA, sectionB) => sectionB.position - sectionA.position)[0];
 
         if (!lastSection) return previous;
 
@@ -63,6 +64,9 @@ export const useItemActions = () => {
           width: 1,
           height: 1,
           integrations: [],
+          advancedOptions: {
+            customCssClasses: [],
+          },
         } satisfies Omit<Item, "kind" | "yOffset" | "xOffset"> & {
           kind: WidgetKind;
         };
@@ -91,12 +95,11 @@ export const useItemActions = () => {
           ...previous,
           sections: previous.sections.map((section) => {
             // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId))
-              return section;
+            if (!section.items.some((item) => item.id === itemId)) return section;
             return {
               ...section,
               items: section.items.map((item) => {
-                // Return same item if item is not the one we're moving
+                // Return same item if item is not the one we're changing
                 if (item.id !== itemId) return item;
                 return {
                   ...item,
@@ -111,6 +114,33 @@ export const useItemActions = () => {
     [updateBoard],
   );
 
+  const updateItemAdvancedOptions = useCallback(
+    ({ itemId, newAdvancedOptions }: UpdateItemAdvancedOptions) => {
+      updateBoard((previous) => {
+        if (!previous) return previous;
+        return {
+          ...previous,
+          sections: previous.sections.map((section) => {
+            // Return same section if item is not in it
+            if (!section.items.some((item) => item.id === itemId)) return section;
+            return {
+              ...section,
+              items: section.items.map((item) => {
+                // Return same item if item is not the one we're changing
+                if (item.id !== itemId) return item;
+                return {
+                  ...item,
+                  advancedOptions: newAdvancedOptions,
+                };
+              }),
+            };
+          }),
+        };
+      });
+    },
+    [updateBoard],
+  );
+
   const updateItemIntegrations = useCallback(
     ({ itemId, newIntegrations }: UpdateItemIntegrations) => {
       updateBoard((previous) => {
@@ -119,8 +149,7 @@ export const useItemActions = () => {
           ...previous,
           sections: previous.sections.map((section) => {
             // Return same section if item is not in it
-            if (!section.items.some((item) => item.id === itemId))
-              return section;
+            if (!section.items.some((item) => item.id === itemId)) return section;
             return {
               ...section,
               items: section.items.map((item) => {
@@ -128,9 +157,7 @@ export const useItemActions = () => {
                 if (item.id !== itemId) return item;
                 return {
                   ...item,
-                  ...("integrations" in item
-                    ? { integrations: newIntegrations }
-                    : {}),
+                  ...("integrations" in item ? { integrations: newIntegrations } : {}),
                 };
               }),
             };
@@ -168,18 +195,14 @@ export const useItemActions = () => {
   const moveItemToSection = useCallback(
     ({ itemId, sectionId, ...positionProps }: MoveItemToSection) => {
       updateBoard((previous) => {
-        const currentSection = previous.sections.find((section) =>
-          section.items.some((item) => item.id === itemId),
-        );
+        const currentSection = previous.sections.find((section) => section.items.some((item) => item.id === itemId));
 
         // If item is in the same section (on initial loading) don't do anything
         if (!currentSection) {
           return previous;
         }
 
-        const currentItem = currentSection.items.find(
-          (item) => item.id === itemId,
-        );
+        const currentItem = currentSection.items.find((item) => item.id === itemId);
         if (!currentItem) {
           return previous;
         }
@@ -236,6 +259,7 @@ export const useItemActions = () => {
     moveItemToSection,
     removeItem,
     updateItemOptions,
+    updateItemAdvancedOptions,
     updateItemIntegrations,
     createItem,
   };
diff --git a/apps/nextjs/src/components/board/items/item-select-modal.tsx b/apps/nextjs/src/components/board/items/item-select-modal.tsx
index f01b09322..64d7c4a5f 100644
--- a/apps/nextjs/src/components/board/items/item-select-modal.tsx
+++ b/apps/nextjs/src/components/board/items/item-select-modal.tsx
@@ -13,14 +13,7 @@ export const ItemSelectModal = createModal<void>(({ actions }) => {
   return (
     <Grid>
       {objectEntries(widgetImports).map(([key, value]) => {
-        return (
-          <WidgetItem
-            key={key}
-            kind={key}
-            definition={value.definition}
-            closeModal={actions.closeModal}
-          />
-        );
+        return <WidgetItem key={key} kind={key} definition={value.definition} closeModal={actions.closeModal} />;
       })}
     </Grid>
   );
@@ -56,13 +49,7 @@ const WidgetItem = ({
             <Text lh={1.2} style={{ whiteSpace: "normal" }} ta="center">
               {t(`widget.${kind}.name`)}
             </Text>
-            <Text
-              lh={1.2}
-              style={{ whiteSpace: "normal" }}
-              size="xs"
-              ta="center"
-              c="dimmed"
-            >
+            <Text lh={1.2} style={{ whiteSpace: "normal" }} size="xs" ta="center" c="dimmed">
               {t(`widget.${kind}.description`)}
             </Text>
           </Stack>
diff --git a/apps/nextjs/src/components/board/modals/board-rename-modal.tsx b/apps/nextjs/src/components/board/modals/board-rename-modal.tsx
index 0be5cede3..c627aab05 100644
--- a/apps/nextjs/src/components/board/modals/board-rename-modal.tsx
+++ b/apps/nextjs/src/components/board/modals/board-rename-modal.tsx
@@ -3,10 +3,11 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 interface InnerProps {
   id: string;
@@ -14,62 +15,55 @@ interface InnerProps {
   onSuccess?: (name: string) => void;
 }
 
-export const BoardRenameModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const utils = clientApi.useUtils();
-    const t = useI18n();
-    const { mutate, isPending } = clientApi.board.renameBoard.useMutation({
-      onSettled() {
-        void utils.board.getBoardByName.invalidate({
-          name: innerProps.previousName,
-        });
-        void utils.board.getDefaultBoard.invalidate();
-      },
-    });
-    const form = useForm<FormType>({
-      initialValues: {
+export const BoardRenameModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const utils = clientApi.useUtils();
+  const t = useI18n();
+  const { mutate, isPending } = clientApi.board.renameBoard.useMutation({
+    onSettled() {
+      void utils.board.getBoardByName.invalidate({
         name: innerProps.previousName,
+      });
+      void utils.board.getHomeBoard.invalidate();
+    },
+  });
+  const form = useZodForm(validation.board.rename.omit({ id: true }), {
+    initialValues: {
+      name: innerProps.previousName,
+    },
+  });
+
+  const handleSubmit = (values: FormType) => {
+    mutate(
+      {
+        id: innerProps.id,
+        name: values.name,
       },
-    });
-
-    const handleSubmit = (values: FormType) => {
-      mutate(
-        {
-          id: innerProps.id,
-          name: values.name,
+      {
+        onSuccess: () => {
+          actions.closeModal();
+          innerProps.onSuccess?.(values.name);
         },
-        {
-          onSuccess: () => {
-            actions.closeModal();
-            innerProps.onSuccess?.(values.name);
-          },
-        },
-      );
-    };
-
-    return (
-      <form onSubmit={form.onSubmit(handleSubmit)}>
-        <Stack>
-          <TextInput
-            label={t("board.field.name.label")}
-            {...form.getInputProps("name")}
-            data-autofocus
-          />
-          <Group justify="end">
-            <Button variant="subtle" color="gray" onClick={actions.closeModal}>
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit" loading={isPending}>
-              {t("common.action.confirm")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
+      },
     );
-  },
-).withOptions({
-  defaultTitle: (t) =>
-    t("board.setting.section.dangerZone.action.rename.modal.title"),
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextInput label={t("board.field.name.label")} {...form.getInputProps("name")} data-autofocus />
+        <Group justify="end">
+          <Button variant="subtle" color="gray" onClick={actions.closeModal}>
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" loading={isPending}>
+            {t("common.action.confirm")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle: (t) => t("board.setting.section.dangerZone.action.rename.modal.title"),
 });
 
 type FormType = Omit<z.infer<(typeof validation)["board"]["rename"]>, "id">;
diff --git a/apps/nextjs/src/components/board/permissions/server.ts b/apps/nextjs/src/components/board/permissions/server.ts
index 7a8294509..d51dd4200 100644
--- a/apps/nextjs/src/components/board/permissions/server.ts
+++ b/apps/nextjs/src/components/board/permissions/server.ts
@@ -2,9 +2,7 @@ import { auth } from "@homarr/auth/next";
 import type { BoardPermissionsProps } from "@homarr/auth/shared";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 
-export const getBoardPermissionsAsync = async (
-  board: BoardPermissionsProps,
-) => {
+export const getBoardPermissionsAsync = async (board: BoardPermissionsProps) => {
   const session = await auth();
   return constructBoardPermissions(board, session);
 };
diff --git a/apps/nextjs/src/components/board/sections/category-section.tsx b/apps/nextjs/src/components/board/sections/category-section.tsx
index bbf9f54de..f47f2e8ff 100644
--- a/apps/nextjs/src/components/board/sections/category-section.tsx
+++ b/apps/nextjs/src/components/board/sections/category-section.tsx
@@ -1,12 +1,5 @@
 import type { RefObject } from "react";
-import {
-  Card,
-  Collapse,
-  Group,
-  Stack,
-  Title,
-  UnstyledButton,
-} from "@mantine/core";
+import { Card, Collapse, Group, Stack, Title, UnstyledButton } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
 
@@ -30,23 +23,14 @@ export const BoardCategorySection = ({ section, mainRef }: Props) => {
         <Group wrap="nowrap" gap="sm">
           <UnstyledButton w="100%" p="sm" onClick={toggle}>
             <Group wrap="nowrap">
-              {opened ? (
-                <IconChevronUp size={20} />
-              ) : (
-                <IconChevronDown size={20} />
-              )}
+              {opened ? <IconChevronUp size={20} /> : <IconChevronDown size={20} />}
               <Title order={3}>{section.name}</Title>
             </Group>
           </UnstyledButton>
           <CategoryMenu category={section} />
         </Group>
         <Collapse in={opened} p="sm" pt={0}>
-          <div
-            className="grid-stack grid-stack-category"
-            data-category
-            data-section-id={section.id}
-            ref={refs.wrapper}
-          >
+          <div className="grid-stack grid-stack-category" data-category data-section-id={section.id} ref={refs.wrapper}>
             <SectionContent items={section.items} refs={refs} />
           </div>
         </Collapse>
diff --git a/apps/nextjs/src/components/board/sections/category/category-actions.ts b/apps/nextjs/src/components/board/sections/category/category-actions.ts
index 1bd715439..f78144536 100644
--- a/apps/nextjs/src/components/board/sections/category/category-actions.ts
+++ b/apps/nextjs/src/components/board/sections/category/category-actions.ts
@@ -2,11 +2,7 @@ import { useCallback } from "react";
 
 import { createId } from "@homarr/db/client";
 
-import type {
-  CategorySection,
-  EmptySection,
-  Section,
-} from "~/app/[locale]/boards/_types";
+import type { CategorySection, EmptySection, Section } from "~/app/[locale]/boards/_types";
 import { useUpdateBoard } from "~/app/[locale]/boards/(content)/_client";
 
 interface AddCategory {
@@ -41,9 +37,7 @@ export const useCategoryActions = () => {
         sections: [
           // Place sections before the new category
           ...previous.sections.filter(
-            (section) =>
-              (section.kind === "category" || section.kind === "empty") &&
-              section.position < position,
+            (section) => (section.kind === "category" || section.kind === "empty") && section.position < position,
           ),
           {
             id: createId(),
@@ -62,8 +56,7 @@ export const useCategoryActions = () => {
           ...previous.sections
             .filter(
               (section): section is CategorySection | EmptySection =>
-                (section.kind === "category" || section.kind === "empty") &&
-                section.position >= position,
+                (section.kind === "category" || section.kind === "empty") && section.position >= position,
             )
             .map((section) => ({
               ...section,
@@ -134,29 +127,19 @@ export const useCategoryActions = () => {
     ({ id, direction }: MoveCategory) => {
       updateBoard((previous) => {
         const currentCategory = previous.sections.find(
-          (section): section is CategorySection =>
-            section.kind === "category" && section.id === id,
+          (section): section is CategorySection => section.kind === "category" && section.id === id,
         );
         if (!currentCategory) return previous;
-        if (currentCategory?.position === 1 && direction === "up")
-          return previous;
-        if (
-          currentCategory?.position === previous.sections.length - 2 &&
-          direction === "down"
-        )
-          return previous;
+        if (currentCategory?.position === 1 && direction === "up") return previous;
+        if (currentCategory?.position === previous.sections.length - 2 && direction === "down") return previous;
 
         return {
           ...previous,
           sections: previous.sections.map((section) => {
-            if (section.kind !== "category" && section.kind !== "empty")
-              return section;
+            if (section.kind !== "category" && section.kind !== "empty") return section;
             const offset = direction === "up" ? -2 : 2;
             // Move category and empty section
-            if (
-              section.position === currentCategory.position ||
-              section.position - 1 === currentCategory.position
-            ) {
+            if (section.position === currentCategory.position || section.position - 1 === currentCategory.position) {
               return {
                 ...section,
                 position: section.position + offset,
@@ -165,8 +148,7 @@ export const useCategoryActions = () => {
 
             if (
               direction === "up" &&
-              (section.position === currentCategory.position - 2 ||
-                section.position === currentCategory.position - 1)
+              (section.position === currentCategory.position - 2 || section.position === currentCategory.position - 1)
             ) {
               return {
                 ...section,
@@ -176,8 +158,7 @@ export const useCategoryActions = () => {
 
             if (
               direction === "down" &&
-              (section.position === currentCategory.position + 2 ||
-                section.position === currentCategory.position + 3)
+              (section.position === currentCategory.position + 2 || section.position === currentCategory.position + 3)
             ) {
               return {
                 ...section,
@@ -197,21 +178,18 @@ export const useCategoryActions = () => {
     ({ id: categoryId }: RemoveCategory) => {
       updateBoard((previous) => {
         const currentCategory = previous.sections.find(
-          (section): section is CategorySection =>
-            section.kind === "category" && section.id === categoryId,
+          (section): section is CategorySection => section.kind === "category" && section.id === categoryId,
         );
         if (!currentCategory) return previous;
 
         const aboveWrapper = previous.sections.find(
           (section): section is EmptySection =>
-            section.kind === "empty" &&
-            section.position === currentCategory.position - 1,
+            section.kind === "empty" && section.position === currentCategory.position - 1,
         );
 
         const removedWrapper = previous.sections.find(
           (section): section is EmptySection =>
-            section.kind === "empty" &&
-            section.position === currentCategory.position + 1,
+            section.kind === "empty" && section.position === currentCategory.position + 1,
         );
 
         if (!aboveWrapper || !removedWrapper) return previous;
@@ -232,16 +210,10 @@ export const useCategoryActions = () => {
         return {
           ...previous,
           sections: [
-            ...previous.sections.filter(
-              (section) => section.position < currentCategory.position - 1,
-            ),
+            ...previous.sections.filter((section) => section.position < currentCategory.position - 1),
             {
               ...aboveWrapper,
-              items: [
-                ...aboveWrapper.items,
-                ...previousCategoryItems,
-                ...previousBelowWrapperItems,
-              ],
+              items: [...aboveWrapper.items, ...previousCategoryItems, ...previousBelowWrapperItems],
             },
             ...previous.sections
               .filter(
diff --git a/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx b/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
index 31fa67cad..16d25c4ce 100644
--- a/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
+++ b/apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx
@@ -1,8 +1,9 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
+import { z } from "@homarr/validation";
 
 interface Category {
   id: string;
@@ -15,41 +16,35 @@ interface InnerProps {
   onSuccess: (category: Category) => void;
 }
 
-export const CategoryEditModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const form = useForm({
-      initialValues: {
-        name: innerProps.category.name,
-      },
-    });
+export const CategoryEditModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const form = useZodForm(z.object({ name: z.string().min(1) }), {
+    initialValues: {
+      name: innerProps.category.name,
+    },
+  });
 
-    return (
-      <form
-        onSubmit={form.onSubmit((values) => {
-          void innerProps.onSuccess({
-            ...innerProps.category,
-            name: values.name,
-          });
-          actions.closeModal();
-        })}
-      >
-        <Stack>
-          <TextInput
-            label={t("section.category.field.name.label")}
-            data-autofocus
-            {...form.getInputProps("name")}
-          />
-          <Group justify="right">
-            <Button onClick={actions.closeModal} variant="subtle" color="gray">
-              {t("common.action.cancel")}
-            </Button>
-            <Button type="submit" color="teal">
-              {innerProps.submitLabel}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    );
-  },
-).withOptions({});
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        void innerProps.onSuccess({
+          ...innerProps.category,
+          name: values.name,
+        });
+        actions.closeModal();
+      })}
+    >
+      <Stack>
+        <TextInput label={t("section.category.field.name.label")} data-autofocus {...form.getInputProps("name")} />
+        <Group justify="right">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" color="teal">
+            {innerProps.submitLabel}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({});
diff --git a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx b/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
index 8106334f7..fc7610deb 100644
--- a/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
+++ b/apps/nextjs/src/components/board/sections/category/category-menu-actions.tsx
@@ -11,8 +11,7 @@ import { CategoryEditModal } from "./category-edit-modal";
 export const useCategoryMenuActions = (category: CategorySection) => {
   const { openModal } = useModalAction(CategoryEditModal);
   const { openConfirmModal } = useConfirmModal();
-  const { addCategory, moveCategory, removeCategory, renameCategory } =
-    useCategoryActions();
+  const { addCategory, moveCategory, removeCategory, renameCategory } = useCategoryActions();
   const t = useI18n();
 
   const createCategoryAtPosition = useCallback(
diff --git a/apps/nextjs/src/components/board/sections/category/category-menu.tsx b/apps/nextjs/src/components/board/sections/category/category-menu.tsx
index e82326cda..be67285ff 100644
--- a/apps/nextjs/src/components/board/sections/category/category-menu.tsx
+++ b/apps/nextjs/src/components/board/sections/category/category-menu.tsx
@@ -67,14 +67,8 @@ const useActions = (category: CategorySection) => {
 };
 
 const useEditModeActions = (category: CategorySection) => {
-  const {
-    addCategoryAbove,
-    addCategoryBelow,
-    moveCategoryUp,
-    moveCategoryDown,
-    edit,
-    remove,
-  } = useCategoryMenuActions(category);
+  const { addCategoryAbove, addCategoryBelow, moveCategoryUp, moveCategoryDown, edit, remove } =
+    useCategoryMenuActions(category);
 
   return [
     {
diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index 2d042f27b..f978ced0f 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -5,12 +5,7 @@ import { useMemo } from "react";
 import type { RefObject } from "react";
 import { ActionIcon, Card, Menu } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
-import {
-  IconDotsVertical,
-  IconLayoutKanban,
-  IconPencil,
-  IconTrash,
-} from "@tabler/icons-react";
+import { IconDotsVertical, IconLayoutKanban, IconPencil, IconTrash } from "@tabler/icons-react";
 import combineClasses from "clsx";
 import { useAtomValue } from "jotai";
 
@@ -43,12 +38,7 @@ export const SectionContent = ({ items, refs }: Props) => {
   return (
     <>
       {items.map((item) => (
-        <BoardItem
-          key={item.id}
-          refs={refs}
-          item={item}
-          opacity={board.opacity}
-        />
+        <BoardItem key={item.id} refs={refs} item={item} opacity={board.opacity} />
       ))}
     </>
   );
@@ -80,7 +70,11 @@ const BoardItem = ({ refs, item, opacity }: ItemProps) => {
     >
       <Card
         ref={ref}
-        className={combineClasses(classes.itemCard, "grid-stack-item-content")}
+        className={combineClasses(
+          classes.itemCard,
+          "grid-stack-item-content",
+          item.advancedOptions.customCssClasses.join(" "),
+        )}
         withBorder
         styles={{
           root: {
@@ -133,14 +127,9 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
   const { openModal } = useModalAction(WidgetEditModal);
   const { openConfirmModal } = useConfirmModal();
   const isEditMode = useAtomValue(editModeAtom);
-  const { updateItemOptions, updateItemIntegrations, removeItem } =
-    useItemActions();
-  const { data: integrationData, isPending } =
-    clientApi.integration.all.useQuery();
-  const currentDefinition = useMemo(
-    () => widgetImports[item.kind].definition,
-    [item.kind],
-  );
+  const { updateItemOptions, updateItemAdvancedOptions, updateItemIntegrations, removeItem } = useItemActions();
+  const { data: integrationData, isPending } = clientApi.integration.all.useQuery();
+  const currentDefinition = useMemo(() => widgetImports[item.kind].definition, [item.kind]);
 
   if (!isEditMode || isPending) return null;
 
@@ -148,14 +137,19 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
     openModal({
       kind: item.kind,
       value: {
+        advancedOptions: item.advancedOptions,
         options: item.options,
         integrations: item.integrations,
       },
-      onSuccessfulEdit: ({ options, integrations }) => {
+      onSuccessfulEdit: ({ options, integrations, advancedOptions }) => {
         updateItemOptions({
           itemId: item.id,
           newOptions: options,
         });
+        updateItemAdvancedOptions({
+          itemId: item.id,
+          newAdvancedOptions: advancedOptions,
+        });
         updateItemIntegrations({
           itemId: item.id,
           newIntegrations: integrations,
@@ -164,9 +158,7 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
       integrationData: (integrationData ?? []).filter(
         (integration) =>
           "supportedIntegrations" in currentDefinition &&
-          (currentDefinition.supportedIntegrations as string[]).some(
-            (kind) => kind === integration.kind,
-          ),
+          (currentDefinition.supportedIntegrations as string[]).some((kind) => kind === integration.kind),
       ),
       integrationSupport: "supportedIntegrations" in currentDefinition,
     });
@@ -185,34 +177,19 @@ const ItemMenu = ({ offset, item }: { offset: number; item: Item }) => {
   return (
     <Menu withinPortal withArrow position="right-start" arrowPosition="center">
       <Menu.Target>
-        <ActionIcon
-          variant="transparent"
-          pos="absolute"
-          top={offset}
-          right={offset}
-          style={{ zIndex: 1 }}
-        >
+        <ActionIcon variant="transparent" pos="absolute" top={offset} right={offset} style={{ zIndex: 1 }}>
           <IconDotsVertical />
         </ActionIcon>
       </Menu.Target>
       <Menu.Dropdown miw={128}>
         <Menu.Label>{tItem("menu.label.settings")}</Menu.Label>
-        <Menu.Item
-          leftSection={<IconPencil size={16} />}
-          onClick={openEditModal}
-        >
+        <Menu.Item leftSection={<IconPencil size={16} />} onClick={openEditModal}>
           {tItem("action.edit")}
         </Menu.Item>
-        <Menu.Item leftSection={<IconLayoutKanban size={16} />}>
-          {tItem("action.move")}
-        </Menu.Item>
+        <Menu.Item leftSection={<IconLayoutKanban size={16} />}>{tItem("action.move")}</Menu.Item>
         <Menu.Divider />
         <Menu.Label c="red.6">{t("common.dangerZone")}</Menu.Label>
-        <Menu.Item
-          c="red.6"
-          leftSection={<IconTrash size={16} />}
-          onClick={openRemoveModal}
-        >
+        <Menu.Item c="red.6" leftSection={<IconTrash size={16} />} onClick={openRemoveModal}>
           {tItem("action.remove")}
         </Menu.Item>
       </Menu.Dropdown>
diff --git a/apps/nextjs/src/components/board/sections/empty-section.tsx b/apps/nextjs/src/components/board/sections/empty-section.tsx
index 268a7ec88..0f011c153 100644
--- a/apps/nextjs/src/components/board/sections/empty-section.tsx
+++ b/apps/nextjs/src/components/board/sections/empty-section.tsx
@@ -19,11 +19,7 @@ export const BoardEmptySection = ({ section, mainRef }: Props) => {
 
   return (
     <div
-      className={
-        section.items.length > 0 || isEditMode
-          ? defaultClasses
-          : `${defaultClasses} gridstack-empty-wrapper`
-      }
+      className={section.items.length > 0 || isEditMode ? defaultClasses : `${defaultClasses} gridstack-empty-wrapper`}
       style={{ transitionDuration: "0s" }}
       data-empty
       data-section-id={section.id}
diff --git a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
index 310f7aadb..84378fc7f 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
@@ -15,20 +15,14 @@ interface InitializeGridstackProps {
   sectionColumnCount: number;
 }
 
-export const initializeGridstack = ({
-  section,
-  refs,
-  sectionColumnCount,
-}: InitializeGridstackProps) => {
+export const initializeGridstack = ({ section, refs, sectionColumnCount }: InitializeGridstackProps) => {
   if (!refs.wrapper.current) return false;
   // initialize gridstack
   const newGrid = refs.gridstack;
   newGrid.current = GridStack.init(
     {
       column: sectionColumnCount,
-      margin: Math.round(
-        Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1),
-      ),
+      margin: Math.round(Math.max(Math.min(refs.wrapper.current.offsetWidth / 100, 10), 1)),
       cellHeight: 128,
       float: true,
       alwaysShowResizeHandle: true,
diff --git a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
index 0db33be04..36673d95b 100644
--- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
@@ -2,17 +2,10 @@ import type { MutableRefObject, RefObject } from "react";
 import { createRef, useCallback, useEffect, useMemo, useRef } from "react";
 import { useAtomValue } from "jotai";
 
-import type {
-  GridItemHTMLElement,
-  GridStack,
-  GridStackNode,
-} from "@homarr/gridstack";
+import type { GridItemHTMLElement, GridStack, GridStackNode } from "@homarr/gridstack";
 
 import type { Section } from "~/app/[locale]/boards/_types";
-import {
-  useMarkSectionAsReady,
-  useRequiredBoard,
-} from "~/app/[locale]/boards/(content)/_context";
+import { useMarkSectionAsReady, useRequiredBoard } from "~/app/[locale]/boards/(content)/_context";
 import { editModeAtom } from "../../editMode";
 import { useItemActions } from "../../items/item-actions";
 import { initializeGridstack } from "./init-gridstack";
@@ -32,10 +25,7 @@ interface UseGridstackProps {
   mainRef?: RefObject<HTMLDivElement>;
 }
 
-export const useGridstack = ({
-  section,
-  mainRef,
-}: UseGridstackProps): UseGristackReturnType => {
+export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGristackReturnType => {
   const isEditMode = useAtomValue(editModeAtom);
   const markAsReady = useMarkSectionAsReady();
   const { moveAndResizeItem, moveItemToSection } = useItemActions();
@@ -157,10 +147,7 @@ interface UseCssVariableConfiguration {
  * @param mainRef reference to the main div wrapping all sections
  * @param gridRef reference to the gridstack object
  */
-const useCssVariableConfiguration = ({
-  mainRef,
-  gridRef,
-}: UseCssVariableConfiguration) => {
+const useCssVariableConfiguration = ({ mainRef, gridRef }: UseCssVariableConfiguration) => {
   const board = useRequiredBoard();
 
   // Get reference to the :root element
@@ -177,10 +164,7 @@ const useCssVariableConfiguration = ({
       if (!mainRef?.current) return;
       const widgetWidth = mainRef.current.clientWidth / board.columnCount;
       // widget width is used to define sizes of gridstack items within global.scss
-      root?.style.setProperty(
-        "--gridstack-widget-width",
-        widgetWidth.toString(),
-      );
+      root?.style.setProperty("--gridstack-widget-width", widgetWidth.toString());
       gridRef.current?.cellHeight(widgetWidth);
     };
     onResize();
@@ -194,9 +178,6 @@ const useCssVariableConfiguration = ({
 
   // Define column count by using the sectionColumnCount
   useEffect(() => {
-    root?.style.setProperty(
-      "--gridstack-column-count",
-      board.columnCount.toString(),
-    );
+    root?.style.setProperty("--gridstack-column-count", board.columnCount.toString());
   }, [board.columnCount, root]);
 };
diff --git a/apps/nextjs/src/components/icons/picker/icon-picker.tsx b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
index f03b0a329..1406b20e5 100644
--- a/apps/nextjs/src/components/icons/picker/icon-picker.tsx
+++ b/apps/nextjs/src/components/icons/picker/icon-picker.tsx
@@ -1,13 +1,6 @@
+import type { FocusEventHandler } from "react";
 import { useState } from "react";
-import {
-  Combobox,
-  Group,
-  Image,
-  InputBase,
-  Skeleton,
-  Text,
-  useCombobox,
-} from "@mantine/core";
+import { Combobox, Group, Image, InputBase, Skeleton, Text, useCombobox } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -15,9 +8,12 @@ import { useScopedI18n } from "@homarr/translation/client";
 interface IconPickerProps {
   initialValue?: string;
   onChange: (iconUrl: string) => void;
+  error?: string | null;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 }
 
-export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
+export const IconPicker = ({ initialValue, onChange, error, onFocus, onBlur }: IconPickerProps) => {
   const [value, setValue] = useState<string>(initialValue ?? "");
   const [search, setSearch] = useState(initialValue ?? "");
 
@@ -33,10 +29,7 @@ export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
 
   const notNullableData = data?.icons ?? [];
 
-  const totalOptions = notNullableData.reduce(
-    (acc, group) => acc + group.icons.length,
-    0,
-  );
+  const totalOptions = notNullableData.reduce((acc, group) => acc + group.icons.length, 0);
 
   const groups = notNullableData.map((group) => {
     const options = group.icons.map((item) => (
@@ -76,22 +69,25 @@ export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
             setSearch(event.currentTarget.value);
           }}
           onClick={() => combobox.openDropdown()}
-          onFocus={() => combobox.openDropdown()}
-          onBlur={() => {
+          onFocus={(event) => {
+            onFocus?.(event);
+            combobox.openDropdown();
+          }}
+          onBlur={(event) => {
+            onBlur?.(event);
             combobox.closeDropdown();
             setSearch(value || "");
           }}
           rightSectionPointerEvents="none"
           withAsterisk
+          error={error}
           label="Icon URL"
         />
       </Combobox.Target>
 
       <Combobox.Dropdown>
         <Combobox.Header>
-          <Text c="dimmed">
-            {t("iconPicker.header", { countIcons: data?.countIcons })}
-          </Text>
+          <Text c="dimmed">{t("iconPicker.header", { countIcons: data?.countIcons })}</Text>
         </Combobox.Header>
         <Combobox.Options mah={350} style={{ overflowY: "auto" }}>
           {totalOptions > 0 ? (
@@ -102,11 +98,7 @@ export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
             Array(15)
               .fill(0)
               .map((_, index: number) => (
-                <Combobox.Option
-                  value={`skeleton-${index}`}
-                  key={index}
-                  disabled
-                >
+                <Combobox.Option value={`skeleton-${index}`} key={index} disabled>
                   <Skeleton height={25} visible />
                 </Combobox.Option>
               ))
diff --git a/apps/nextjs/src/components/language/language-combobox.module.css b/apps/nextjs/src/components/language/language-combobox.module.css
new file mode 100644
index 000000000..fe98524ad
--- /dev/null
+++ b/apps/nextjs/src/components/language/language-combobox.module.css
@@ -0,0 +1,3 @@
+.flagIcon {
+  border-radius: 4px;
+}
diff --git a/apps/nextjs/src/components/language/language-combobox.tsx b/apps/nextjs/src/components/language/language-combobox.tsx
new file mode 100644
index 000000000..6bd362591
--- /dev/null
+++ b/apps/nextjs/src/components/language/language-combobox.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import React from "react";
+import { Combobox, Group, InputBase, Text, useCombobox } from "@mantine/core";
+import { IconCheck } from "@tabler/icons-react";
+
+import type { SupportedLanguage } from "@homarr/translation";
+import { localeAttributes, supportedLanguages } from "@homarr/translation";
+import { useChangeLocale, useCurrentLocale } from "@homarr/translation/client";
+
+import classes from "./language-combobox.module.css";
+
+export const LanguageCombobox = () => {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+  });
+  const currentLocale = useCurrentLocale();
+  const changeLocale = useChangeLocale();
+
+  const handleOnOptionSubmit = React.useCallback(
+    (value: string) => {
+      if (!value) {
+        return;
+      }
+      changeLocale(value as SupportedLanguage);
+      combobox.closeDropdown();
+    },
+    [changeLocale, combobox],
+  );
+
+  const handleOnClick = React.useCallback(() => {
+    combobox.toggleDropdown();
+  }, [combobox]);
+
+  return (
+    <Combobox store={combobox} onOptionSubmit={handleOnOptionSubmit}>
+      <Combobox.Target>
+        <InputBase
+          component="button"
+          type="button"
+          pointer
+          rightSection={<Combobox.Chevron />}
+          rightSectionPointerEvents="none"
+          onClick={handleOnClick}
+          variant="filled"
+        >
+          <OptionItem currentLocale={currentLocale} localeKey={currentLocale} />
+        </InputBase>
+      </Combobox.Target>
+      <Combobox.Dropdown>
+        <Combobox.Options>
+          {supportedLanguages.map((languageKey) => (
+            <Combobox.Option value={languageKey} key={languageKey}>
+              <OptionItem currentLocale={currentLocale} localeKey={languageKey} showCheck />
+            </Combobox.Option>
+          ))}
+        </Combobox.Options>
+      </Combobox.Dropdown>
+    </Combobox>
+  );
+};
+
+const OptionItem = ({
+  currentLocale,
+  localeKey,
+  showCheck,
+}: {
+  currentLocale: SupportedLanguage;
+  localeKey: SupportedLanguage;
+  showCheck?: boolean;
+}) => {
+  return (
+    <Group wrap="nowrap" justify="space-between">
+      <Group wrap="nowrap">
+        <span className={`fi fi-${localeAttributes[localeKey].flagIcon} ${classes.flagIcon}`}></span>
+        <Group wrap="nowrap" gap="xs">
+          <Text>{localeAttributes[localeKey].name}</Text>
+          <Text size="xs" c="dimmed" inherit>
+            ({localeAttributes[localeKey].translatedName})
+          </Text>
+        </Group>
+      </Group>
+      {showCheck && localeKey === currentLocale && <IconCheck color="currentColor" size={16} />}
+    </Group>
+  );
+};
diff --git a/apps/nextjs/src/components/layout/background.tsx b/apps/nextjs/src/components/layout/background.tsx
index c6158dfca..1c5b7c8b4 100644
--- a/apps/nextjs/src/components/layout/background.tsx
+++ b/apps/nextjs/src/components/layout/background.tsx
@@ -4,10 +4,7 @@ import type { AppShellProps } from "@mantine/core";
 import { useOptionalBoard } from "~/app/[locale]/boards/(content)/_context";
 
 const supportedVideoFormats = ["mp4", "webm", "ogg"];
-const isVideo = (url: string) =>
-  supportedVideoFormats.some((format) =>
-    url.toLowerCase().endsWith(`.${format}`),
-  );
+const isVideo = (url: string) => supportedVideoFormats.some((format) => url.toLowerCase().endsWith(`.${format}`));
 
 export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
   const board = useOptionalBoard();
diff --git a/apps/nextjs/src/components/layout/header.tsx b/apps/nextjs/src/components/layout/header.tsx
index 996d78ab5..dd5d51243 100644
--- a/apps/nextjs/src/components/layout/header.tsx
+++ b/apps/nextjs/src/components/layout/header.tsx
@@ -26,13 +26,7 @@ export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
           </UnstyledButton>
         </Group>
         <DesktopSearchInput />
-        <Group
-          h="100%"
-          align="center"
-          justify="end"
-          style={{ flex: 1 }}
-          wrap="nowrap"
-        >
+        <Group h="100%" align="center" justify="end" style={{ flex: 1 }} wrap="nowrap">
           {actions}
           <MobileSearchButton />
           <UserButton />
diff --git a/apps/nextjs/src/components/layout/header/burger.tsx b/apps/nextjs/src/components/layout/header/burger.tsx
index 3622ba116..03ad0851a 100644
--- a/apps/nextjs/src/components/layout/header/burger.tsx
+++ b/apps/nextjs/src/components/layout/header/burger.tsx
@@ -9,12 +9,7 @@ export const navigationCollapsedAtom = atom(true);
 export const ClientBurger = () => {
   const [collapsed, setCollapsed] = useAtom(navigationCollapsedAtom);
 
-  const toggle = useCallback(
-    () => setCollapsed((collapsed) => !collapsed),
-    [setCollapsed],
-  );
+  const toggle = useCallback(() => setCollapsed((collapsed) => !collapsed), [setCollapsed]);
 
-  return (
-    <Burger opened={!collapsed} onClick={toggle} hiddenFrom="sm" size="sm" />
-  );
+  return <Burger opened={!collapsed} onClick={toggle} hiddenFrom="sm" size="sm" />;
 };
diff --git a/apps/nextjs/src/components/layout/header/button.tsx b/apps/nextjs/src/components/layout/header/button.tsx
index 20636d8a3..0604c137b 100644
--- a/apps/nextjs/src/components/layout/header/button.tsx
+++ b/apps/nextjs/src/components/layout/header/button.tsx
@@ -23,24 +23,22 @@ const headerButtonActionIconProps: ActionIconProps = {
 };
 
 // eslint-disable-next-line react/display-name
-export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>(
-  (props, ref) => {
-    if ("href" in props) {
-      return (
-        <ActionIcon
-          ref={ref as ForwardedRef<HTMLAnchorElement>}
-          component={Link}
-          {...props}
-          {...headerButtonActionIconProps}
-        >
-          {props.children}
-        </ActionIcon>
-      );
-    }
+export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>((props, ref) => {
+  if ("href" in props) {
     return (
-      <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+      <ActionIcon
+        ref={ref as ForwardedRef<HTMLAnchorElement>}
+        component={Link}
+        {...props}
+        {...headerButtonActionIconProps}
+      >
         {props.children}
       </ActionIcon>
     );
-  },
-);
+  }
+  return (
+    <ActionIcon ref={ref} {...props} {...headerButtonActionIconProps}>
+      {props.children}
+    </ActionIcon>
+  );
+});
diff --git a/apps/nextjs/src/components/layout/logo/board-logo.tsx b/apps/nextjs/src/components/layout/logo/board-logo.tsx
index 584c9a01a..096709431 100644
--- a/apps/nextjs/src/components/layout/logo/board-logo.tsx
+++ b/apps/nextjs/src/components/layout/logo/board-logo.tsx
@@ -28,10 +28,7 @@ interface CommonLogoWithTitleProps {
   hideTitleOnMobile?: boolean;
 }
 
-export const BoardLogoWithTitle = ({
-  size,
-  hideTitleOnMobile,
-}: CommonLogoWithTitleProps) => {
+export const BoardLogoWithTitle = ({ size, hideTitleOnMobile }: CommonLogoWithTitleProps) => {
   const board = useRequiredBoard();
   const imageOptions = useImageOptions();
   return (
diff --git a/apps/nextjs/src/components/layout/logo/homarr-logo.tsx b/apps/nextjs/src/components/layout/logo/homarr-logo.tsx
index 5d863ec71..bdfe0086f 100644
--- a/apps/nextjs/src/components/layout/logo/homarr-logo.tsx
+++ b/apps/nextjs/src/components/layout/logo/homarr-logo.tsx
@@ -14,16 +14,12 @@ const imageOptions = {
   shouldUseNextImage: true,
 };
 
-export const HomarrLogo = ({ size }: LogoProps) => (
-  <Logo size={size} {...imageOptions} />
-);
+export const HomarrLogo = ({ size }: LogoProps) => <Logo size={size} {...imageOptions} />;
 
 interface CommonLogoWithTitleProps {
   size: LogoWithTitleProps["size"];
 }
 
 export const HomarrLogoWithTitle = ({ size }: CommonLogoWithTitleProps) => {
-  return (
-    <LogoWithTitle size={size} title={homarrPageTitle} image={imageOptions} />
-  );
+  return <LogoWithTitle size={size} title={homarrPageTitle} image={imageOptions} />;
 };
diff --git a/apps/nextjs/src/components/layout/logo/logo.tsx b/apps/nextjs/src/components/layout/logo/logo.tsx
index f8ba3757e..beb3f493c 100644
--- a/apps/nextjs/src/components/layout/logo/logo.tsx
+++ b/apps/nextjs/src/components/layout/logo/logo.tsx
@@ -9,12 +9,7 @@ interface LogoProps {
   shouldUseNextImage?: boolean;
 }
 
-export const Logo = ({
-  size = 60,
-  shouldUseNextImage = false,
-  src,
-  alt,
-}: LogoProps) =>
+export const Logo = ({ size = 60, shouldUseNextImage = false, src, alt }: LogoProps) =>
   shouldUseNextImage ? (
     <Image src={src} alt={alt} width={size} height={size} />
   ) : (
@@ -36,22 +31,13 @@ export interface LogoWithTitleProps {
   hideTitleOnMobile?: boolean;
 }
 
-export const LogoWithTitle = ({
-  size,
-  title,
-  image,
-  hideTitleOnMobile,
-}: LogoWithTitleProps) => {
+export const LogoWithTitle = ({ size, title, image, hideTitleOnMobile }: LogoWithTitleProps) => {
   const { logoSize, titleOrder } = logoWithTitleSizes[size];
 
   return (
     <Group gap="xs" wrap="nowrap">
       <Logo {...image} size={logoSize} />
-      <Title
-        order={titleOrder}
-        visibleFrom={hideTitleOnMobile ? "sm" : undefined}
-        textWrap="nowrap"
-      >
+      <Title order={titleOrder} visibleFrom={hideTitleOnMobile ? "sm" : undefined} textWrap="nowrap">
         {title}
       </Title>
     </Group>
diff --git a/apps/nextjs/src/components/layout/navigation-link.tsx b/apps/nextjs/src/components/layout/navigation-link.tsx
index e0a9f5c60..c65f9381c 100644
--- a/apps/nextjs/src/components/layout/navigation-link.tsx
+++ b/apps/nextjs/src/components/layout/navigation-link.tsx
@@ -6,11 +6,7 @@ import { usePathname } from "next/navigation";
 import { NavLink } from "@mantine/core";
 
 export const CommonNavLink = (props: ClientNavigationLink) =>
-  "href" in props ? (
-    <NavLinkHref {...props} />
-  ) : (
-    <NavLinkWithItems {...props} />
-  );
+  "href" in props ? <NavLinkHref {...props} /> : <NavLinkWithItems {...props} />;
 
 const NavLinkHref = (props: NavigationLinkHref) => {
   const pathname = usePathname();
diff --git a/apps/nextjs/src/components/layout/navigation.tsx b/apps/nextjs/src/components/layout/navigation.tsx
index 751c55cb1..c9a53aaad 100644
--- a/apps/nextjs/src/components/layout/navigation.tsx
+++ b/apps/nextjs/src/components/layout/navigation.tsx
@@ -11,11 +11,7 @@ interface MainNavigationProps {
   links: NavigationLink[];
 }
 
-export const MainNavigation = ({
-  headerSection,
-  footerSection,
-  links,
-}: MainNavigationProps) => {
+export const MainNavigation = ({ headerSection, footerSection, links }: MainNavigationProps) => {
   return (
     <AppShellNavbar p="md">
       {headerSection && <AppShellSection>{headerSection}</AppShellSection>}
diff --git a/apps/nextjs/src/components/manage/boards/add-board-modal.tsx b/apps/nextjs/src/components/manage/boards/add-board-modal.tsx
index 2cbe4e588..bdc225a1f 100644
--- a/apps/nextjs/src/components/manage/boards/add-board-modal.tsx
+++ b/apps/nextjs/src/components/manage/boards/add-board-modal.tsx
@@ -1,59 +1,52 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 import { boardSchemas } from "node_modules/@homarr/validation/src/board";
 
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import { z } from "@homarr/validation";
+import { createCustomErrorParams } from "@homarr/validation/form";
 
 interface InnerProps {
   boardNames: string[];
   onSuccess: ({ name }: { name: string }) => Promise<void>;
 }
 
-export const AddBoardModal = createModal<InnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const form = useForm({
+export const AddBoardModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const form = useZodForm(
+    z.object({
+      name: boardSchemas.byName.shape.name.refine((value) => !innerProps.boardNames.includes(value), {
+        params: createCustomErrorParams("boardAlreadyExists"),
+      }),
+    }),
+    {
       initialValues: {
         name: "",
       },
-      validate: zodResolver(
-        z.object({
-          name: boardSchemas.byName.shape.name.refine(
-            (value) => !innerProps.boardNames.includes(value),
-          ),
-        }),
-      ),
-      validateInputOnBlur: true,
-      validateInputOnChange: true,
-    });
+    },
+  );
 
-    return (
-      <form
-        onSubmit={form.onSubmit((values) => {
-          void innerProps.onSuccess(values);
-          actions.closeModal();
-        })}
-      >
-        <Stack>
-          <TextInput
-            label={t("board.field.name.label")}
-            data-autofocus
-            {...form.getInputProps("name")}
-          />
-          <Group justify="right">
-            <Button onClick={actions.closeModal} variant="subtle" color="gray">
-              {t("common.action.cancel")}
-            </Button>
-            <Button disabled={!form.isValid()} type="submit" color="teal">
-              {t("common.action.create")}
-            </Button>
-          </Group>
-        </Stack>
-      </form>
-    );
-  },
-).withOptions({
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        void innerProps.onSuccess(values);
+        actions.closeModal();
+      })}
+    >
+      <Stack>
+        <TextInput label={t("board.field.name.label")} data-autofocus {...form.getInputProps("name")} />
+        <Group justify="right">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button disabled={!form.isValid()} type="submit" color="teal">
+            {t("common.action.create")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
   defaultTitle: (t) => t("management.page.board.action.new.label"),
 });
diff --git a/apps/nextjs/src/components/manage/danger-zone.tsx b/apps/nextjs/src/components/manage/danger-zone.tsx
index 7359ca62e..5c515b4a0 100644
--- a/apps/nextjs/src/components/manage/danger-zone.tsx
+++ b/apps/nextjs/src/components/manage/danger-zone.tsx
@@ -1,13 +1,5 @@
 import { Fragment } from "react";
-import {
-  Card,
-  CardSection,
-  Divider,
-  Group,
-  Stack,
-  Text,
-  Title,
-} from "@mantine/core";
+import { Card, CardSection, Divider, Group, Stack, Text, Title } from "@mantine/core";
 
 import { getI18n } from "@homarr/translation/server";
 
@@ -49,11 +41,7 @@ interface DangerZoneItemProps {
   action: React.ReactNode;
 }
 
-export const DangerZoneItem = ({
-  label,
-  description,
-  action,
-}: DangerZoneItemProps) => {
+export const DangerZoneItem = ({ label, description, action }: DangerZoneItemProps) => {
   return (
     <Group justify="space-between" px="md">
       <Stack gap={0}>
diff --git a/apps/nextjs/src/components/user-avatar-menu.tsx b/apps/nextjs/src/components/user-avatar-menu.tsx
index 2ffa79c4e..0cd5e0726 100644
--- a/apps/nextjs/src/components/user-avatar-menu.tsx
+++ b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -4,17 +4,11 @@ import type { ReactNode } from "react";
 import { useCallback, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import {
-  Center,
-  Menu,
-  Stack,
-  Text,
-  useMantineColorScheme,
-} from "@mantine/core";
+import { Center, Menu, Stack, Text, useMantineColorScheme } from "@mantine/core";
 import { useTimeout } from "@mantine/hooks";
 import {
   IconCheck,
-  IconDashboard,
+  IconHome,
   IconLogin,
   IconLogout,
   IconMoon,
@@ -27,6 +21,10 @@ import { signOut, useSession } from "@homarr/auth/client";
 import { createModal, useModalAction } from "@homarr/modals";
 import { useScopedI18n } from "@homarr/translation/client";
 
+import "flag-icons/css/flag-icons.min.css";
+
+import { LanguageCombobox } from "./language/language-combobox";
+
 interface UserAvatarMenuProps {
   children: ReactNode;
 }
@@ -37,8 +35,7 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
 
   const ColorSchemeIcon = colorScheme === "dark" ? IconSun : IconMoon;
 
-  const colorSchemeText =
-    colorScheme === "dark" ? t("switchToLightMode") : t("switchToDarkMode");
+  const colorSchemeText = colorScheme === "dark" ? t("switchToLightMode") : t("switchToDarkMode");
 
   const session = useSession();
   const router = useRouter();
@@ -57,51 +54,42 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
   }, [openModal, router]);
 
   return (
-    <Menu width={200} withArrow withinPortal>
+    <Menu width={300} withArrow withinPortal>
       <Menu.Dropdown>
-        <Menu.Item
-          onClick={toggleColorScheme}
-          leftSection={<ColorSchemeIcon size="1rem" />}
-        >
+        <Menu.Item onClick={toggleColorScheme} leftSection={<ColorSchemeIcon size="1rem" />}>
           {colorSchemeText}
         </Menu.Item>
-        <Menu.Item
-          component={Link}
-          href="/boards"
-          leftSection={<IconDashboard size="1rem" />}
-        >
-          {t("navigateDefaultBoard")}
-        </Menu.Item>
-        {Boolean(session.data) && (
-          <Menu.Item
-            component={Link}
-            href={`/manage/users/${session.data?.user.id}`}
-            leftSection={<IconSettings size="1rem" />}
-          >
-            {t("preferences")}
-          </Menu.Item>
-        )}
-        <Menu.Item
-          component={Link}
-          href="/manage"
-          leftSection={<IconTool size="1rem" />}
-        >
-          {t("management")}
+        <Menu.Item component={Link} href="/boards" leftSection={<IconHome size="1rem" />}>
+          {t("homeBoard")}
         </Menu.Item>
         <Menu.Divider />
+
+        <Menu.Item p={0} closeMenuOnClick={false}>
+          <LanguageCombobox />
+        </Menu.Item>
+        <Menu.Divider />
+        {Boolean(session.data) && (
+          <>
+            <Menu.Item
+              component={Link}
+              href={`/manage/users/${session.data?.user.id}`}
+              leftSection={<IconSettings size="1rem" />}
+            >
+              {t("preferences")}
+            </Menu.Item>
+
+            <Menu.Item component={Link} href="/manage" leftSection={<IconTool size="1rem" />}>
+              {t("management")}
+            </Menu.Item>
+          </>
+        )}
+        <Menu.Divider />
         {session.status === "authenticated" ? (
-          <Menu.Item
-            onClick={handleSignout}
-            leftSection={<IconLogout size="1rem" />}
-            color="red"
-          >
+          <Menu.Item onClick={handleSignout} leftSection={<IconLogout size="1rem" />} color="red">
             {t("logout")}
           </Menu.Item>
         ) : (
-          <Menu.Item
-            onClick={() => router.push("/auth/login")}
-            leftSection={<IconLogin size="1rem" />}
-          >
+          <Menu.Item onClick={() => router.push("/auth/login")} leftSection={<IconLogin size="1rem" />}>
             {t("login")}
           </Menu.Item>
         )}
@@ -111,30 +99,28 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
   );
 };
 
-const LogoutModal = createModal<{ onTimeout: () => void }>(
-  ({ actions, innerProps }) => {
-    const t = useScopedI18n("common.userAvatar.menu");
-    const { start } = useTimeout(() => {
-      actions.closeModal();
-      innerProps.onTimeout();
-    }, 1500);
+const LogoutModal = createModal<{ onTimeout: () => void }>(({ actions, innerProps }) => {
+  const t = useScopedI18n("common.userAvatar.menu");
+  const { start } = useTimeout(() => {
+    actions.closeModal();
+    innerProps.onTimeout();
+  }, 1500);
 
-    useEffect(() => {
-      start();
-    }, [start]);
+  useEffect(() => {
+    start();
+  }, [start]);
 
-    return (
-      <Center h={200 - 2 * 16}>
-        <Stack align="center" c="green">
-          <IconCheck size={50} />
-          <Text ta="center" fw="bold">
-            {t("loggedOut")}
-          </Text>
-        </Stack>
-      </Center>
-    );
-  },
-).withOptions({
+  return (
+    <Center h={200 - 2 * 16}>
+      <Stack align="center" c="green">
+        <IconCheck size={50} />
+        <Text ta="center" fw="bold">
+          {t("loggedOut")}
+        </Text>
+      </Stack>
+    </Center>
+  );
+}).withOptions({
   centered: true,
   withCloseButton: false,
   transitionProps: {
diff --git a/apps/nextjs/src/components/user-avatar.tsx b/apps/nextjs/src/components/user-avatar.tsx
index dd30dc647..d75606caf 100644
--- a/apps/nextjs/src/components/user-avatar.tsx
+++ b/apps/nextjs/src/components/user-avatar.tsx
@@ -17,17 +17,7 @@ export const UserAvatar = async ({ size }: UserAvatarProps) => {
 
   if (!currentSession?.user) return <Avatar {...commonProps} />;
   if (currentSession.user.image)
-    return (
-      <Avatar
-        {...commonProps}
-        src={currentSession.user.image}
-        alt={currentSession.user.name!}
-      />
-    );
+    return <Avatar {...commonProps} src={currentSession.user.image} alt={currentSession.user.name!} />;
 
-  return (
-    <Avatar {...commonProps}>
-      {currentSession.user.name!.substring(0, 2).toUpperCase()}
-    </Avatar>
-  );
+  return <Avatar {...commonProps}>{currentSession.user.name!.substring(0, 2).toUpperCase()}</Avatar>;
 };
diff --git a/apps/nextjs/src/env.mjs b/apps/nextjs/src/env.mjs
index 14e02551c..2e4452340 100644
--- a/apps/nextjs/src/env.mjs
+++ b/apps/nextjs/src/env.mjs
@@ -12,9 +12,7 @@ export const env = createEnv({
       .optional()
       .transform((url) => (url ? `https://${url}` : undefined)),
     PORT: z.coerce.number().default(3000),
-    NODE_ENV: z
-      .enum(["development", "production", "test"])
-      .default("development"),
+    NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
   },
   /**
    * Specify your server-side environment variables schema here. This way you can ensure the app isn't
@@ -25,9 +23,7 @@ export const env = createEnv({
     // If the DB_HOST is set, the DB_URL is optional
     DB_URL: isUsingDbHost ? z.string().optional() : z.string(),
     DB_HOST: isUsingDbUrl ? z.string().optional() : z.string(),
-    DB_PORT: isUsingDbUrl
-      ? z.number().optional()
-      : z.number().min(1).default(3306),
+    DB_PORT: isUsingDbUrl ? z.number().optional() : z.number().min(1).default(3306),
     DB_USER: isUsingDbCredentials ? z.string() : z.string().optional(),
     DB_PASSWORD: isUsingDbCredentials ? z.string() : z.string().optional(),
     DB_NAME: isUsingDbUrl ? z.string().optional() : z.string(),
@@ -56,7 +52,5 @@ export const env = createEnv({
     // NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
   },
   skipValidation:
-    Boolean(process.env.CI) ||
-    Boolean(process.env.SKIP_ENV_VALIDATION) ||
-    process.env.npm_lifecycle_event === "lint",
+    Boolean(process.env.CI) || Boolean(process.env.SKIP_ENV_VALIDATION) || process.env.npm_lifecycle_event === "lint",
 });
diff --git a/apps/nextjs/src/metadata.ts b/apps/nextjs/src/metadata.ts
new file mode 100644
index 000000000..856ecc9d3
--- /dev/null
+++ b/apps/nextjs/src/metadata.ts
@@ -0,0 +1 @@
+export const createMetaTitle = (name: string) => `${name} • Homarr`;
diff --git a/apps/nextjs/src/styles/prismjs.scss b/apps/nextjs/src/styles/prismjs.scss
new file mode 100644
index 000000000..d9f1d6327
--- /dev/null
+++ b/apps/nextjs/src/styles/prismjs.scss
@@ -0,0 +1,225 @@
+[data-mantine-color-scheme="light"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    text-shadow: 0 1px #fff;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  code[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  pre[class*="language-"]::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  code[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  pre[class*="language-"]::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #f5f2f0;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #708090;
+  }
+  .token.punctuation {
+    color: #999;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.deleted,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #905;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #690;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url {
+    color: #9a6e3a;
+    background: hsla(0, 0%, 100%, 0.5);
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+  .token.class-name,
+  .token.function {
+    color: #dd4a68;
+  }
+  .token.important,
+  .token.regex,
+  .token.variable {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+}
+
+[data-mantine-color-scheme="dark"] {
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #fff;
+    background: 0 0;
+    text-shadow: 0 -0.1em 0.2em #000;
+    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    background: #4c3f33;
+  }
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    border: 0.3em solid #7a6651;
+    border-radius: 0.5em;
+    box-shadow: 1px 1px 0.5em #000 inset;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.15em 0.2em 0.05em;
+    border-radius: 0.3em;
+    border: 0.13em solid #7a6651;
+    box-shadow: 1px 1px 0.3em -0.1em #000 inset;
+    white-space: normal;
+  }
+  .token.cdata,
+  .token.comment,
+  .token.doctype,
+  .token.prolog {
+    color: #997f66;
+  }
+  .token.punctuation {
+    opacity: 0.7;
+  }
+  .token.namespace {
+    opacity: 0.7;
+  }
+  .token.boolean,
+  .token.constant,
+  .token.number,
+  .token.property,
+  .token.symbol,
+  .token.tag {
+    color: #d1939e;
+  }
+  .token.attr-name,
+  .token.builtin,
+  .token.char,
+  .token.inserted,
+  .token.selector,
+  .token.string {
+    color: #bce051;
+  }
+  .language-css .token.string,
+  .style .token.string,
+  .token.entity,
+  .token.operator,
+  .token.url,
+  .token.variable {
+    color: #f4b73d;
+  }
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #d1939e;
+  }
+  .token.important,
+  .token.regex {
+    color: #e90;
+  }
+  .token.bold,
+  .token.important {
+    font-weight: 700;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  .token.entity {
+    cursor: help;
+  }
+  .token.deleted {
+    color: red;
+  }
+}
diff --git a/apps/nextjs/src/versions/package-reader.ts b/apps/nextjs/src/versions/package-reader.ts
index 0862c711c..c61da286b 100644
--- a/apps/nextjs/src/versions/package-reader.ts
+++ b/apps/nextjs/src/versions/package-reader.ts
@@ -10,14 +10,9 @@ const getDependenciesAsync = async (): Promise<PackageJsonDependencies> => {
     cwd: "../../",
     absolute: true,
   });
-  const packageContents = await Promise.all(
-    pathNames.map(async (path) => await fsPromises.readFile(path, "utf-8")),
-  );
+  const packageContents = await Promise.all(pathNames.map(async (path) => await fsPromises.readFile(path, "utf-8")));
   const packageDependencies = packageContents
-    .map(
-      (packageContent) =>
-        (JSON.parse(packageContent) as PackageJson).dependencies,
-    )
+    .map((packageContent) => (JSON.parse(packageContent) as PackageJson).dependencies)
     .filter((dependencies) => dependencies !== undefined);
 
   let dependencies = {};
diff --git a/apps/tasks/package.json b/apps/tasks/package.json
index e5d233ab9..7133523b8 100644
--- a/apps/tasks/package.json
+++ b/apps/tasks/package.json
@@ -22,12 +22,14 @@
     "@homarr/common": "workspace:^0.1.0",
     "@homarr/db": "workspace:^0.1.0",
     "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/icons": "workspace:^0.1.0",
     "@homarr/log": "workspace:^",
     "@homarr/redis": "workspace:^0.1.0",
+    "@homarr/server-settings": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
     "dotenv": "^16.4.5",
     "node-cron": "^3.0.3",
-    "@homarr/icons": "workspace:^0.1.0"
+    "superjson": "2.2.1"
   },
   "devDependencies": {
     "@homarr/eslint-config": "workspace:^0.2.0",
@@ -38,7 +40,7 @@
     "dotenv-cli": "^7.4.2",
     "eslint": "^8.57.0",
     "prettier": "^3.2.5",
-    "tsx": "4.10.3",
+    "tsx": "4.10.5",
     "typescript": "^5.4.5"
   },
   "eslintConfig": {
diff --git a/apps/tasks/src/jobs/icons-updater.ts b/apps/tasks/src/jobs/icons-updater.ts
index 820b3602c..7fd274dd0 100644
--- a/apps/tasks/src/jobs/icons-updater.ts
+++ b/apps/tasks/src/jobs/icons-updater.ts
@@ -43,9 +43,7 @@ export const iconsUpdaterJob = createCronJob(EVERY_WEEK, {
       continue;
     }
 
-    const repositoryInDb = databaseIconGroups.find(
-      (dbIconGroup) => dbIconGroup.slug === repositoryIconGroup.slug,
-    );
+    const repositoryInDb = databaseIconGroups.find((dbIconGroup) => dbIconGroup.slug === repositoryIconGroup.slug);
     const repositoryIconGroupId: string = repositoryInDb?.id ?? createId();
     if (!repositoryInDb?.id) {
       newIconRepositories.push({
@@ -55,11 +53,7 @@ export const iconsUpdaterJob = createCronJob(EVERY_WEEK, {
     }
 
     for (const icon of repositoryIconGroup.icons) {
-      if (
-        databaseIconGroups
-          .flatMap((group) => group.icons)
-          .some((dbIcon) => dbIcon.checksum === icon.checksum)
-      ) {
+      if (databaseIconGroups.flatMap((group) => group.icons).some((dbIcon) => dbIcon.checksum === icon.checksum)) {
         skippedChecksums.push(icon.checksum);
         continue;
       }
@@ -99,7 +93,5 @@ export const iconsUpdaterJob = createCronJob(EVERY_WEEK, {
     countDeleted += deadIcons.length;
   });
 
-  logger.info(
-    `Updated database within ${stopWatch.getElapsedInHumanWords()} (-${countDeleted}, +${countInserted})`,
-  );
+  logger.info(`Updated database within ${stopWatch.getElapsedInHumanWords()} (-${countDeleted}, +${countInserted})`);
 });
diff --git a/apps/tasks/src/lib/cron-job/creator.ts b/apps/tasks/src/lib/cron-job/creator.ts
index 8f7b304be..1dcb59fcc 100644
--- a/apps/tasks/src/lib/cron-job/creator.ts
+++ b/apps/tasks/src/lib/cron-job/creator.ts
@@ -6,10 +6,7 @@ interface CreateCronJobOptions {
   runOnStart?: boolean;
 }
 
-export const createCronJob = (
-  cronExpression: string,
-  options: CreateCronJobOptions = { runOnStart: false },
-) => {
+export const createCronJob = (cronExpression: string, options: CreateCronJobOptions = { runOnStart: false }) => {
   return {
     withCallback: (callback: () => MaybePromise<void>) => {
       if (options.runOnStart) {
diff --git a/apps/tasks/src/lib/cron-job/group.ts b/apps/tasks/src/lib/cron-job/group.ts
index 17b7ff204..0854259df 100644
--- a/apps/tasks/src/lib/cron-job/group.ts
+++ b/apps/tasks/src/lib/cron-job/group.ts
@@ -3,10 +3,7 @@ import { objectEntries } from "@homarr/common";
 import type { createCronJob } from "./creator";
 import { jobRegistry } from "./registry";
 
-type Jobs = Record<
-  string,
-  ReturnType<ReturnType<typeof createCronJob>["withCallback"]>
->;
+type Jobs = Record<string, ReturnType<ReturnType<typeof createCronJob>["withCallback"]>>;
 
 export const createJobGroup = <TJobs extends Jobs>(jobs: TJobs) => {
   for (const [name, job] of objectEntries(jobs)) {
diff --git a/apps/tasks/src/lib/queue/client.ts b/apps/tasks/src/lib/queue/client.ts
index 6b65885e0..b67cb968d 100644
--- a/apps/tasks/src/lib/queue/client.ts
+++ b/apps/tasks/src/lib/queue/client.ts
@@ -11,10 +11,7 @@ interface Queue<TInput extends z.ZodType = z.ZodType> {
   inputValidator: TInput;
 }
 
-type Queues = Record<
-  string,
-  ReturnType<ReturnType<typeof createQueue>["withCallback"]>
->;
+type Queues = Record<string, ReturnType<ReturnType<typeof createQueue>["withCallback"]>>;
 
 export const createQueueClient = <TQueues extends Queues>(queues: TQueues) => {
   const queueRegistry = new Map<string, Queue>();
@@ -31,10 +28,7 @@ export const createQueueClient = <TQueues extends Queues>(queues: TQueues) => {
     queueRegistry,
     client: objectKeys(queues).reduce(
       (acc, name) => {
-        acc[name] = async (
-          data: z.infer<TQueues[typeof name]["_input"]>,
-          options,
-        ) => {
+        acc[name] = async (data: z.infer<TQueues[typeof name]["_input"]>, options) => {
           if (typeof name !== "string") return;
           const queue = queueRegistry.get(name);
           if (!queue) return;
@@ -42,10 +36,7 @@ export const createQueueClient = <TQueues extends Queues>(queues: TQueues) => {
           await queueChannel.addAsync({
             name,
             data,
-            executionDate:
-              typeof options === "object" && options.executionDate
-                ? options.executionDate
-                : new Date(),
+            executionDate: typeof options === "object" && options.executionDate ? options.executionDate : new Date(),
           });
         };
         return acc;
diff --git a/apps/tasks/src/main.ts b/apps/tasks/src/main.ts
index 4ed475372..16327cd16 100644
--- a/apps/tasks/src/main.ts
+++ b/apps/tasks/src/main.ts
@@ -1,3 +1,6 @@
 import { jobs } from "./jobs";
+import { seedServerSettingsAsync } from "./seed-server-settings";
 
 jobs.startAll();
+
+void seedServerSettingsAsync();
diff --git a/apps/tasks/src/seed-server-settings.ts b/apps/tasks/src/seed-server-settings.ts
new file mode 100644
index 000000000..885d4e64c
--- /dev/null
+++ b/apps/tasks/src/seed-server-settings.ts
@@ -0,0 +1,28 @@
+import SuperJSON from "superjson";
+
+import { db } from "@homarr/db";
+import { serverSettings } from "@homarr/db/schema/sqlite";
+import { logger } from "@homarr/log";
+
+import { defaultServerSettings, defaultServerSettingsKeys } from "../../../packages/server-settings";
+
+export const seedServerSettingsAsync = async () => {
+  const serverSettingsData = await db.query.serverSettings.findMany();
+  let insertedSettingsCount = 0;
+
+  for (const settingsKey of defaultServerSettingsKeys) {
+    if (serverSettingsData.some((setting) => setting.settingKey === settingsKey)) {
+      return;
+    }
+
+    await db.insert(serverSettings).values({
+      settingKey: settingsKey,
+      value: SuperJSON.stringify(defaultServerSettings[settingsKey]),
+    });
+    insertedSettingsCount++;
+  }
+
+  if (insertedSettingsCount > 0) {
+    logger.info(`Inserted ${insertedSettingsCount} missing settings`);
+  }
+};
diff --git a/apps/websocket/src/main.ts b/apps/websocket/src/main.ts
index 0b4e8d166..ee742c58c 100644
--- a/apps/websocket/src/main.ts
+++ b/apps/websocket/src/main.ts
@@ -18,11 +18,7 @@ const handler = applyWSSHandler({
   createContext: async ({ req }) => {
     try {
       const headers = Object.entries(req.headers).map(
-        ([key, value]) =>
-          [key, typeof value === "string" ? value : value?.[0]] as [
-            string,
-            string,
-          ],
+        ([key, value]) => [key, typeof value === "string" ? value : value?.[0]] as [string, string],
       );
       const nextHeaders = new Headers(headers);
 
@@ -46,13 +42,9 @@ const handler = applyWSSHandler({
 });
 
 wss.on("connection", (websocket, incomingMessage) => {
-  logger.info(
-    `➕ Connection (${wss.clients.size}) ${incomingMessage.method} ${incomingMessage.url}`,
-  );
+  logger.info(`➕ Connection (${wss.clients.size}) ${incomingMessage.method} ${incomingMessage.url}`);
   websocket.once("close", (code, reason) => {
-    logger.info(
-      `➖ Connection (${wss.clients.size}) ${code} ${reason.toString()}`,
-    );
+    logger.info(`➖ Connection (${wss.clients.size}) ${code} ${reason.toString()}`);
   });
 });
 logger.info("✅ WebSocket Server listening on ws://localhost:3001");
diff --git a/package.json b/package.json
index 6e5be63a6..ca243e083 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "vitest": "^1.6.0"
   },
   "dependencies": {
-    "@mantine/core": "^7.9.1",
-    "@mantine/dates": "^7.9.1",
+    "@mantine/core": "^7.9.2",
+    "@mantine/dates": "^7.9.2",
     "@tabler/icons-react": "^3.4.0",
     "mantine-react-table": "2.0.0-beta.3"
   },
diff --git a/packages/api/package.json b/packages/api/package.json
index 5defee719..52fd9fb21 100644
--- a/packages/api/package.json
+++ b/packages/api/package.json
@@ -27,6 +27,7 @@
     "@homarr/redis": "workspace:^0.1.0",
     "@homarr/tasks": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
+    "@homarr/server-settings": "workspace:^0.1.0",
     "@trpc/client": "next",
     "@trpc/server": "next",
     "superjson": "2.2.1"
diff --git a/packages/api/src/root.ts b/packages/api/src/root.ts
index 0ee76f2aa..1395b871e 100644
--- a/packages/api/src/root.ts
+++ b/packages/api/src/root.ts
@@ -7,6 +7,7 @@ import { integrationRouter } from "./router/integration";
 import { inviteRouter } from "./router/invite";
 import { locationRouter } from "./router/location";
 import { logRouter } from "./router/log";
+import { serverSettingsRouter } from "./router/serverSettings";
 import { userRouter } from "./router/user";
 import { widgetRouter } from "./router/widgets";
 import { createTRPCRouter } from "./trpc";
@@ -23,6 +24,7 @@ export const appRouter = createTRPCRouter({
   log: logRouter,
   icon: iconsRouter,
   home: homeRouter,
+  serverSettings: serverSettingsRouter,
 });
 
 // export type definition of API
diff --git a/packages/api/src/router/app.ts b/packages/api/src/router/app.ts
index 24198bf04..38171a946 100644
--- a/packages/api/src/router/app.ts
+++ b/packages/api/src/router/app.ts
@@ -22,60 +22,52 @@ export const appRouter = createTRPCRouter({
       orderBy: asc(apps.name),
     });
   }),
-  byId: publicProcedure
-    .input(validation.app.byId)
-    .query(async ({ ctx, input }) => {
-      const app = await ctx.db.query.apps.findFirst({
-        where: eq(apps.id, input.id),
+  byId: publicProcedure.input(validation.app.byId).query(async ({ ctx, input }) => {
+    const app = await ctx.db.query.apps.findFirst({
+      where: eq(apps.id, input.id),
+    });
+
+    if (!app) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "App not found",
       });
+    }
 
-      if (!app) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "App not found",
-        });
-      }
+    return app;
+  }),
+  create: publicProcedure.input(validation.app.manage).mutation(async ({ ctx, input }) => {
+    await ctx.db.insert(apps).values({
+      id: createId(),
+      name: input.name,
+      description: input.description,
+      iconUrl: input.iconUrl,
+      href: input.href,
+    });
+  }),
+  update: publicProcedure.input(validation.app.edit).mutation(async ({ ctx, input }) => {
+    const app = await ctx.db.query.apps.findFirst({
+      where: eq(apps.id, input.id),
+    });
 
-      return app;
-    }),
-  create: publicProcedure
-    .input(validation.app.manage)
-    .mutation(async ({ ctx, input }) => {
-      await ctx.db.insert(apps).values({
-        id: createId(),
+    if (!app) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "App not found",
+      });
+    }
+
+    await ctx.db
+      .update(apps)
+      .set({
         name: input.name,
         description: input.description,
         iconUrl: input.iconUrl,
         href: input.href,
-      });
-    }),
-  update: publicProcedure
-    .input(validation.app.edit)
-    .mutation(async ({ ctx, input }) => {
-      const app = await ctx.db.query.apps.findFirst({
-        where: eq(apps.id, input.id),
-      });
-
-      if (!app) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "App not found",
-        });
-      }
-
-      await ctx.db
-        .update(apps)
-        .set({
-          name: input.name,
-          description: input.description,
-          iconUrl: input.iconUrl,
-          href: input.href,
-        })
-        .where(eq(apps.id, input.id));
-    }),
-  delete: publicProcedure
-    .input(validation.app.byId)
-    .mutation(async ({ ctx, input }) => {
-      await ctx.db.delete(apps).where(eq(apps.id, input.id));
-    }),
+      })
+      .where(eq(apps.id, input.id));
+  }),
+  delete: publicProcedure.input(validation.app.byId).mutation(async ({ ctx, input }) => {
+    await ctx.db.delete(apps).where(eq(apps.id, input.id));
+  }),
 });
diff --git a/packages/api/src/router/board.ts b/packages/api/src/router/board.ts
index b00263b7a..c37e92c57 100644
--- a/packages/api/src/router/board.ts
+++ b/packages/api/src/router/board.ts
@@ -12,54 +12,46 @@ import {
   integrationItems,
   items,
   sections,
+  users,
 } from "@homarr/db/schema/sqlite";
 import type { WidgetKind } from "@homarr/definitions";
 import { getPermissionsWithParents, widgetKinds } from "@homarr/definitions";
-import {
-  createSectionSchema,
-  sharedItemSchema,
-  validation,
-  z,
-} from "@homarr/validation";
+import type { BoardItemAdvancedOptions } from "@homarr/validation";
+import { createSectionSchema, sharedItemSchema, validation, z } from "@homarr/validation";
 
 import { zodUnionFromArray } from "../../../validation/src/enums";
-import {
-  createTRPCRouter,
-  permissionRequiredProcedure,
-  protectedProcedure,
-  publicProcedure,
-} from "../trpc";
+import { createTRPCRouter, permissionRequiredProcedure, protectedProcedure, publicProcedure } from "../trpc";
 import { throwIfActionForbiddenAsync } from "./board/board-access";
 
 export const boardRouter = createTRPCRouter({
   getAllBoards: publicProcedure.query(async ({ ctx }) => {
-    const permissionsOfCurrentUserWhenPresent =
-      await ctx.db.query.boardUserPermissions.findMany({
-        where: eq(boardUserPermissions.userId, ctx.session?.user.id ?? ""),
-      });
+    const userId = ctx.session?.user.id;
+    const permissionsOfCurrentUserWhenPresent = await ctx.db.query.boardUserPermissions.findMany({
+      where: eq(boardUserPermissions.userId, userId ?? ""),
+    });
 
-    const permissionsOfCurrentUserGroupsWhenPresent =
-      await ctx.db.query.groupMembers.findMany({
-        where: eq(groupMembers.userId, ctx.session?.user.id ?? ""),
-        with: {
-          group: {
-            with: {
-              boardPermissions: {},
-            },
+    const permissionsOfCurrentUserGroupsWhenPresent = await ctx.db.query.groupMembers.findMany({
+      where: eq(groupMembers.userId, userId ?? ""),
+      with: {
+        group: {
+          with: {
+            boardPermissions: {},
           },
         },
-      });
+      },
+    });
     const boardIds = permissionsOfCurrentUserWhenPresent
       .map((permission) => permission.boardId)
       .concat(
         permissionsOfCurrentUserGroupsWhenPresent
-          .map((groupMember) =>
-            groupMember.group.boardPermissions.map(
-              (permission) => permission.boardId,
-            ),
-          )
+          .map((groupMember) => groupMember.group.boardPermissions.map((permission) => permission.boardId))
           .flat(),
       );
+
+    const currentUserWhenPresent = await ctx.db.query.users.findFirst({
+      where: eq(users.id, userId ?? ""),
+    });
+
     const dbBoards = await ctx.db.query.boards.findMany({
       columns: {
         id: true,
@@ -82,9 +74,7 @@ export const boardRouter = createTRPCRouter({
             permissionsOfCurrentUserGroupsWhenPresent.length >= 1
               ? inArray(
                   boardGroupPermissions.groupId,
-                  permissionsOfCurrentUserGroupsWhenPresent.map(
-                    (groupMember) => groupMember.groupId,
-                  ),
+                  permissionsOfCurrentUserGroupsWhenPresent.map((groupMember) => groupMember.groupId),
                 )
               : undefined,
         },
@@ -98,7 +88,10 @@ export const boardRouter = createTRPCRouter({
             boardIds.length > 0 ? inArray(boards.id, boardIds) : undefined,
           ),
     });
-    return dbBoards;
+    return dbBoards.map((board) => ({
+      ...board,
+      isHome: currentUserWhenPresent?.homeBoardId === board.id,
+    }));
   }),
   createBoard: permissionRequiredProcedure
     .requiresPermission("board-create")
@@ -119,77 +112,56 @@ export const boardRouter = createTRPCRouter({
         });
       });
     }),
-  renameBoard: protectedProcedure
-    .input(validation.board.rename)
-    .mutation(async ({ ctx, input }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
-      );
+  renameBoard: protectedProcedure.input(validation.board.rename).mutation(async ({ ctx, input }) => {
+    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
 
-      await noBoardWithSimilarNameAsync(ctx.db, input.name, [input.id]);
+    await noBoardWithSimilarNameAsync(ctx.db, input.name, [input.id]);
 
-      await ctx.db
-        .update(boards)
-        .set({ name: input.name })
-        .where(eq(boards.id, input.id));
-    }),
+    await ctx.db.update(boards).set({ name: input.name }).where(eq(boards.id, input.id));
+  }),
   changeBoardVisibility: protectedProcedure
     .input(validation.board.changeVisibility)
     .mutation(async ({ ctx, input }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
-      );
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
 
       await ctx.db
         .update(boards)
         .set({ isPublic: input.visibility === "public" })
         .where(eq(boards.id, input.id));
     }),
-  deleteBoard: protectedProcedure
-    .input(z.object({ id: z.string() }))
-    .mutation(async ({ ctx, input }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
-      );
+  deleteBoard: protectedProcedure.input(z.object({ id: z.string() })).mutation(async ({ ctx, input }) => {
+    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
 
-      await ctx.db.delete(boards).where(eq(boards.id, input.id));
-    }),
-  getDefaultBoard: publicProcedure.query(async ({ ctx }) => {
-    const boardWhere = eq(boards.name, "default");
+    await ctx.db.delete(boards).where(eq(boards.id, input.id));
+  }),
+  setHomeBoard: protectedProcedure.input(z.object({ id: z.string() })).mutation(async ({ ctx, input }) => {
+    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "board-view");
+
+    await ctx.db.update(users).set({ homeBoardId: input.id }).where(eq(users.id, ctx.session.user.id));
+  }),
+  getHomeBoard: publicProcedure.query(async ({ ctx }) => {
+    const userId = ctx.session?.user.id;
+    const user = userId
+      ? await ctx.db.query.users.findFirst({
+          where: eq(users.id, userId),
+        })
+      : null;
+
+    const boardWhere = user?.homeBoardId ? eq(boards.id, user.homeBoardId) : eq(boards.name, "home");
     await throwIfActionForbiddenAsync(ctx, boardWhere, "board-view");
 
-    return await getFullBoardWithWhereAsync(
-      ctx.db,
-      boardWhere,
-      ctx.session?.user.id ?? null,
-    );
+    return await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
   }),
-  getBoardByName: publicProcedure
-    .input(validation.board.byName)
-    .query(async ({ input, ctx }) => {
-      const boardWhere = eq(boards.name, input.name);
-      await throwIfActionForbiddenAsync(ctx, boardWhere, "board-view");
+  getBoardByName: publicProcedure.input(validation.board.byName).query(async ({ input, ctx }) => {
+    const boardWhere = eq(boards.name, input.name);
+    await throwIfActionForbiddenAsync(ctx, boardWhere, "board-view");
 
-      return await getFullBoardWithWhereAsync(
-        ctx.db,
-        boardWhere,
-        ctx.session?.user.id ?? null,
-      );
-    }),
+    return await getFullBoardWithWhereAsync(ctx.db, boardWhere, ctx.session?.user.id ?? null);
+  }),
   savePartialBoardSettings: protectedProcedure
-    .input(validation.board.savePartialSettings)
+    .input(validation.board.savePartialSettings.and(z.object({ id: z.string() })))
     .mutation(async ({ ctx, input }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "board-change",
-      );
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "board-change");
 
       await ctx.db
         .update(boards)
@@ -219,271 +191,223 @@ export const boardRouter = createTRPCRouter({
         })
         .where(eq(boards.id, input.id));
     }),
-  saveBoard: protectedProcedure
-    .input(validation.board.save)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "board-change",
+  saveBoard: protectedProcedure.input(validation.board.save).mutation(async ({ input, ctx }) => {
+    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "board-change");
+
+    await ctx.db.transaction(async (transaction) => {
+      const dbBoard = await getFullBoardWithWhereAsync(transaction, eq(boards.id, input.id), ctx.session.user.id);
+
+      const addedSections = filterAddedItems(input.sections, dbBoard.sections);
+
+      if (addedSections.length > 0) {
+        await transaction.insert(sections).values(
+          addedSections.map((section) => ({
+            id: section.id,
+            kind: section.kind,
+            position: section.position,
+            name: "name" in section ? section.name : null,
+            boardId: dbBoard.id,
+          })),
+        );
+      }
+
+      const inputItems = input.sections.flatMap((section) =>
+        section.items.map((item) => ({ ...item, sectionId: section.id })),
+      );
+      const dbItems = dbBoard.sections.flatMap((section) =>
+        section.items.map((item) => ({ ...item, sectionId: section.id })),
       );
 
-      await ctx.db.transaction(async (transaction) => {
-        const dbBoard = await getFullBoardWithWhereAsync(
-          transaction,
-          eq(boards.id, input.id),
-          ctx.session.user.id,
+      const addedItems = filterAddedItems(inputItems, dbItems);
+
+      if (addedItems.length > 0) {
+        await transaction.insert(items).values(
+          addedItems.map((item) => ({
+            id: item.id,
+            kind: item.kind,
+            height: item.height,
+            width: item.width,
+            xOffset: item.xOffset,
+            yOffset: item.yOffset,
+            options: superjson.stringify(item.options),
+            advancedOptions: superjson.stringify(item.advancedOptions),
+            sectionId: item.sectionId,
+          })),
         );
+      }
 
-        const addedSections = filterAddedItems(
-          input.sections,
-          dbBoard.sections,
-        );
-
-        if (addedSections.length > 0) {
-          await transaction.insert(sections).values(
-            addedSections.map((section) => ({
-              id: section.id,
-              kind: section.kind,
-              position: section.position,
-              name: "name" in section ? section.name : null,
-              boardId: dbBoard.id,
-            })),
-          );
-        }
-
-        const inputItems = input.sections.flatMap((section) =>
-          section.items.map((item) => ({ ...item, sectionId: section.id })),
-        );
-        const dbItems = dbBoard.sections.flatMap((section) =>
-          section.items.map((item) => ({ ...item, sectionId: section.id })),
-        );
-
-        const addedItems = filterAddedItems(inputItems, dbItems);
-
-        if (addedItems.length > 0) {
-          await transaction.insert(items).values(
-            addedItems.map((item) => ({
-              id: item.id,
-              kind: item.kind,
-              height: item.height,
-              width: item.width,
-              xOffset: item.xOffset,
-              yOffset: item.yOffset,
-              options: superjson.stringify(item.options),
-              sectionId: item.sectionId,
-            })),
-          );
-        }
-
-        const inputIntegrationRelations = inputItems.flatMap(
-          ({ integrations, id: itemId }) =>
-            integrations.map((integration) => ({
-              integrationId: integration.id,
-              itemId,
-            })),
-        );
-        const dbIntegrationRelations = dbItems.flatMap(
-          ({ integrations, id: itemId }) =>
-            integrations.map((integration) => ({
-              integrationId: integration.id,
-              itemId,
-            })),
-        );
-        const addedIntegrationRelations = inputIntegrationRelations.filter(
-          (inputRelation) =>
-            !dbIntegrationRelations.some(
-              (dbRelation) =>
-                dbRelation.itemId === inputRelation.itemId &&
-                dbRelation.integrationId === inputRelation.integrationId,
-            ),
-        );
-
-        if (addedIntegrationRelations.length > 0) {
-          await transaction.insert(integrationItems).values(
-            addedIntegrationRelations.map((relation) => ({
-              itemId: relation.itemId,
-              integrationId: relation.integrationId,
-            })),
-          );
-        }
-
-        const updatedItems = filterUpdatedItems(inputItems, dbItems);
-
-        for (const item of updatedItems) {
-          await transaction
-            .update(items)
-            .set({
-              kind: item.kind,
-              height: item.height,
-              width: item.width,
-              xOffset: item.xOffset,
-              yOffset: item.yOffset,
-              options: superjson.stringify(item.options),
-              sectionId: item.sectionId,
-            })
-            .where(eq(items.id, item.id));
-        }
-
-        const updatedSections = filterUpdatedItems(
-          input.sections,
-          dbBoard.sections,
-        );
-
-        for (const section of updatedSections) {
-          const prev = dbBoard.sections.find(
-            (dbSection) => dbSection.id === section.id,
-          );
-          await transaction
-            .update(sections)
-            .set({
-              position: section.position,
-              name:
-                prev?.kind === "category" && "name" in section
-                  ? section.name
-                  : null,
-            })
-            .where(eq(sections.id, section.id));
-        }
-
-        const removedIntegrationRelations = dbIntegrationRelations.filter(
-          (dbRelation) =>
-            !inputIntegrationRelations.some(
-              (inputRelation) =>
-                dbRelation.itemId === inputRelation.itemId &&
-                dbRelation.integrationId === inputRelation.integrationId,
-            ),
-        );
-
-        for (const relation of removedIntegrationRelations) {
-          await transaction
-            .delete(integrationItems)
-            .where(
-              and(
-                eq(integrationItems.itemId, relation.itemId),
-                eq(integrationItems.integrationId, relation.integrationId),
-              ),
-            );
-        }
-
-        const removedItems = filterRemovedItems(inputItems, dbItems);
-
-        const itemIds = removedItems.map((item) => item.id);
-        if (itemIds.length > 0) {
-          await transaction.delete(items).where(inArray(items.id, itemIds));
-        }
-
-        const removedSections = filterRemovedItems(
-          input.sections,
-          dbBoard.sections,
-        );
-        const sectionIds = removedSections.map((section) => section.id);
-
-        if (sectionIds.length > 0) {
-          await transaction
-            .delete(sections)
-            .where(inArray(sections.id, sectionIds));
-        }
-      });
-    }),
-
-  getBoardPermissions: protectedProcedure
-    .input(validation.board.permissions)
-    .query(async ({ input, ctx }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
+      const inputIntegrationRelations = inputItems.flatMap(({ integrations, id: itemId }) =>
+        integrations.map((integration) => ({
+          integrationId: integration.id,
+          itemId,
+        })),
+      );
+      const dbIntegrationRelations = dbItems.flatMap(({ integrations, id: itemId }) =>
+        integrations.map((integration) => ({
+          integrationId: integration.id,
+          itemId,
+        })),
+      );
+      const addedIntegrationRelations = inputIntegrationRelations.filter(
+        (inputRelation) =>
+          !dbIntegrationRelations.some(
+            (dbRelation) =>
+              dbRelation.itemId === inputRelation.itemId && dbRelation.integrationId === inputRelation.integrationId,
+          ),
       );
 
-      const dbGroupPermissions = await ctx.db.query.groupPermissions.findMany({
-        where: inArray(
-          groupPermissions.permission,
-          getPermissionsWithParents([
-            "board-view-all",
-            "board-modify-all",
-            "board-full-access",
-          ]),
-        ),
-        columns: {
-          groupId: false,
+      if (addedIntegrationRelations.length > 0) {
+        await transaction.insert(integrationItems).values(
+          addedIntegrationRelations.map((relation) => ({
+            itemId: relation.itemId,
+            integrationId: relation.integrationId,
+          })),
+        );
+      }
+
+      const updatedItems = filterUpdatedItems(inputItems, dbItems);
+
+      for (const item of updatedItems) {
+        await transaction
+          .update(items)
+          .set({
+            kind: item.kind,
+            height: item.height,
+            width: item.width,
+            xOffset: item.xOffset,
+            yOffset: item.yOffset,
+            options: superjson.stringify(item.options),
+            sectionId: item.sectionId,
+          })
+          .where(eq(items.id, item.id));
+      }
+
+      const updatedSections = filterUpdatedItems(input.sections, dbBoard.sections);
+
+      for (const section of updatedSections) {
+        const prev = dbBoard.sections.find((dbSection) => dbSection.id === section.id);
+        await transaction
+          .update(sections)
+          .set({
+            position: section.position,
+            name: prev?.kind === "category" && "name" in section ? section.name : null,
+          })
+          .where(eq(sections.id, section.id));
+      }
+
+      const removedIntegrationRelations = dbIntegrationRelations.filter(
+        (dbRelation) =>
+          !inputIntegrationRelations.some(
+            (inputRelation) =>
+              dbRelation.itemId === inputRelation.itemId && dbRelation.integrationId === inputRelation.integrationId,
+          ),
+      );
+
+      for (const relation of removedIntegrationRelations) {
+        await transaction
+          .delete(integrationItems)
+          .where(
+            and(
+              eq(integrationItems.itemId, relation.itemId),
+              eq(integrationItems.integrationId, relation.integrationId),
+            ),
+          );
+      }
+
+      const removedItems = filterRemovedItems(inputItems, dbItems);
+
+      const itemIds = removedItems.map((item) => item.id);
+      if (itemIds.length > 0) {
+        await transaction.delete(items).where(inArray(items.id, itemIds));
+      }
+
+      const removedSections = filterRemovedItems(input.sections, dbBoard.sections);
+      const sectionIds = removedSections.map((section) => section.id);
+
+      if (sectionIds.length > 0) {
+        await transaction.delete(sections).where(inArray(sections.id, sectionIds));
+      }
+    });
+  }),
+
+  getBoardPermissions: protectedProcedure.input(validation.board.permissions).query(async ({ input, ctx }) => {
+    await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
+
+    const dbGroupPermissions = await ctx.db.query.groupPermissions.findMany({
+      where: inArray(
+        groupPermissions.permission,
+        getPermissionsWithParents(["board-view-all", "board-modify-all", "board-full-access"]),
+      ),
+      columns: {
+        groupId: false,
+      },
+      with: {
+        group: {
+          columns: {
+            id: true,
+            name: true,
+          },
         },
-        with: {
+      },
+    });
+
+    const userPermissions = await ctx.db.query.boardUserPermissions.findMany({
+      where: eq(boardUserPermissions.boardId, input.id),
+      with: {
+        user: {
+          columns: {
+            id: true,
+            name: true,
+            image: true,
+          },
+        },
+      },
+    });
+
+    const dbGroupBoardPermission = await ctx.db.query.boardGroupPermissions.findMany({
+      where: eq(boardGroupPermissions.boardId, input.id),
+      with: {
+        group: {
+          columns: {
+            id: true,
+            name: true,
+          },
+        },
+      },
+    });
+
+    return {
+      inherited: dbGroupPermissions.sort((permissionA, permissionB) => {
+        return permissionA.group.name.localeCompare(permissionB.group.name);
+      }),
+      userPermissions: userPermissions
+        .map(({ user, permission }) => ({
+          user,
+          permission,
+        }))
+        .sort((permissionA, permissionB) => {
+          return (permissionA.user.name ?? "").localeCompare(permissionB.user.name ?? "");
+        }),
+      groupPermissions: dbGroupBoardPermission
+        .map(({ group, permission }) => ({
           group: {
-            columns: {
-              id: true,
-              name: true,
-            },
+            id: group.id,
+            name: group.name,
           },
-        },
-      });
-
-      const userPermissions = await ctx.db.query.boardUserPermissions.findMany({
-        where: eq(boardUserPermissions.boardId, input.id),
-        with: {
-          user: {
-            columns: {
-              id: true,
-              name: true,
-              image: true,
-            },
-          },
-        },
-      });
-
-      const dbGroupBoardPermission =
-        await ctx.db.query.boardGroupPermissions.findMany({
-          where: eq(boardGroupPermissions.boardId, input.id),
-          with: {
-            group: {
-              columns: {
-                id: true,
-                name: true,
-              },
-            },
-          },
-        });
-
-      return {
-        inherited: dbGroupPermissions.sort((permissionA, permissionB) => {
+          permission,
+        }))
+        .sort((permissionA, permissionB) => {
           return permissionA.group.name.localeCompare(permissionB.group.name);
         }),
-        userPermissions: userPermissions
-          .map(({ user, permission }) => ({
-            user,
-            permission,
-          }))
-          .sort((permissionA, permissionB) => {
-            return (permissionA.user.name ?? "").localeCompare(
-              permissionB.user.name ?? "",
-            );
-          }),
-        groupPermissions: dbGroupBoardPermission
-          .map(({ group, permission }) => ({
-            group: {
-              id: group.id,
-              name: group.name,
-            },
-            permission,
-          }))
-          .sort((permissionA, permissionB) => {
-            return permissionA.group.name.localeCompare(permissionB.group.name);
-          }),
-      };
-    }),
+    };
+  }),
   saveUserBoardPermissions: protectedProcedure
     .input(validation.board.savePermissions)
     .mutation(async ({ input, ctx }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
-      );
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
 
       await ctx.db.transaction(async (transaction) => {
-        await transaction
-          .delete(boardUserPermissions)
-          .where(eq(boardUserPermissions.boardId, input.id));
+        await transaction.delete(boardUserPermissions).where(eq(boardUserPermissions.boardId, input.id));
         if (input.permissions.length === 0) {
           return;
         }
@@ -499,16 +423,10 @@ export const boardRouter = createTRPCRouter({
   saveGroupBoardPermissions: protectedProcedure
     .input(validation.board.savePermissions)
     .mutation(async ({ input, ctx }) => {
-      await throwIfActionForbiddenAsync(
-        ctx,
-        eq(boards.id, input.id),
-        "full-access",
-      );
+      await throwIfActionForbiddenAsync(ctx, eq(boards.id, input.id), "full-access");
 
       await ctx.db.transaction(async (transaction) => {
-        await transaction
-          .delete(boardGroupPermissions)
-          .where(eq(boardGroupPermissions.boardId, input.id));
+        await transaction.delete(boardGroupPermissions).where(eq(boardGroupPermissions.boardId, input.id));
         if (input.permissions.length === 0) {
           return;
         }
@@ -523,11 +441,7 @@ export const boardRouter = createTRPCRouter({
     }),
 });
 
-const noBoardWithSimilarNameAsync = async (
-  db: Database,
-  name: string,
-  ignoredIds: string[] = [],
-) => {
+const noBoardWithSimilarNameAsync = async (db: Database, name: string, ignoredIds: string[] = []) => {
   const boards = await db.query.boards.findMany({
     columns: {
       id: true,
@@ -536,9 +450,7 @@ const noBoardWithSimilarNameAsync = async (
   });
 
   const board = boards.find(
-    (board) =>
-      board.name.toLowerCase() === name.toLowerCase() &&
-      !ignoredIds.includes(board.id),
+    (board) => board.name.toLowerCase() === name.toLowerCase() && !ignoredIds.includes(board.id),
   );
 
   if (board) {
@@ -549,11 +461,7 @@ const noBoardWithSimilarNameAsync = async (
   }
 };
 
-const getFullBoardWithWhereAsync = async (
-  db: Database,
-  where: SQL<unknown>,
-  userId: string | null,
-) => {
+const getFullBoardWithWhereAsync = async (db: Database, where: SQL<unknown>, userId: string | null) => {
   const groupsOfCurrentUser = await db.query.groupMembers.findMany({
     where: eq(groupMembers.userId, userId ?? ""),
   });
@@ -587,10 +495,7 @@ const getFullBoardWithWhereAsync = async (
         },
       },
       groupPermissions: {
-        where: inArray(
-          boardGroupPermissions.groupId,
-          groupsOfCurrentUser.map((group) => group.groupId).concat(""),
-        ),
+        where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
       },
     },
   });
@@ -612,6 +517,7 @@ const getFullBoardWithWhereAsync = async (
         items: section.items.map((item) => ({
           ...item,
           integrations: item.integrations.map((item) => item.integration),
+          advancedOptions: superjson.parse<BoardItemAdvancedOptions>(item.advancedOptions),
           options: superjson.parse<Record<string, unknown>>(item.options),
         })),
       }),
@@ -625,9 +531,7 @@ const forKind = <T extends WidgetKind>(kind: T) =>
     options: z.record(z.unknown()),
   });
 
-const outputItemSchema = zodUnionFromArray(
-  widgetKinds.map((kind) => forKind(kind)),
-).and(sharedItemSchema);
+const outputItemSchema = zodUnionFromArray(widgetKinds.map((kind) => forKind(kind))).and(sharedItemSchema);
 
 const parseSection = (section: unknown) => {
   const result = createSectionSchema(outputItemSchema).safeParse(section);
@@ -637,26 +541,11 @@ const parseSection = (section: unknown) => {
   return result.data;
 };
 
-const filterAddedItems = <TInput extends { id: string }>(
-  inputArray: TInput[],
-  dbArray: TInput[],
-) =>
-  inputArray.filter(
-    (inputItem) => !dbArray.some((dbItem) => dbItem.id === inputItem.id),
-  );
+const filterAddedItems = <TInput extends { id: string }>(inputArray: TInput[], dbArray: TInput[]) =>
+  inputArray.filter((inputItem) => !dbArray.some((dbItem) => dbItem.id === inputItem.id));
 
-const filterRemovedItems = <TInput extends { id: string }>(
-  inputArray: TInput[],
-  dbArray: TInput[],
-) =>
-  dbArray.filter(
-    (dbItem) => !inputArray.some((inputItem) => dbItem.id === inputItem.id),
-  );
+const filterRemovedItems = <TInput extends { id: string }>(inputArray: TInput[], dbArray: TInput[]) =>
+  dbArray.filter((dbItem) => !inputArray.some((inputItem) => dbItem.id === inputItem.id));
 
-const filterUpdatedItems = <TInput extends { id: string }>(
-  inputArray: TInput[],
-  dbArray: TInput[],
-) =>
-  inputArray.filter((inputItem) =>
-    dbArray.some((dbItem) => dbItem.id === inputItem.id),
-  );
+const filterUpdatedItems = <TInput extends { id: string }>(inputArray: TInput[], dbArray: TInput[]) =>
+  inputArray.filter((inputItem) => dbArray.some((dbItem) => dbItem.id === inputItem.id));
diff --git a/packages/api/src/router/board/board-access.ts b/packages/api/src/router/board/board-access.ts
index b66866b98..d27d1cbe5 100644
--- a/packages/api/src/router/board/board-access.ts
+++ b/packages/api/src/router/board/board-access.ts
@@ -4,11 +4,7 @@ import type { Session } from "@homarr/auth";
 import { constructBoardPermissions } from "@homarr/auth/shared";
 import type { Database, SQL } from "@homarr/db";
 import { eq, inArray } from "@homarr/db";
-import {
-  boardGroupPermissions,
-  boardUserPermissions,
-  groupMembers,
-} from "@homarr/db/schema/sqlite";
+import { boardGroupPermissions, boardUserPermissions, groupMembers } from "@homarr/db/schema/sqlite";
 import type { BoardPermission } from "@homarr/definitions";
 
 /**
@@ -38,10 +34,7 @@ export const throwIfActionForbiddenAsync = async (
         where: eq(boardUserPermissions.userId, session?.user.id ?? ""),
       },
       groupPermissions: {
-        where: inArray(
-          boardGroupPermissions.groupId,
-          groupsOfCurrentUser.map((group) => group.groupId).concat(""),
-        ),
+        where: inArray(boardGroupPermissions.groupId, groupsOfCurrentUser.map((group) => group.groupId).concat("")),
       },
     },
   });
@@ -50,8 +43,7 @@ export const throwIfActionForbiddenAsync = async (
     notAllowed();
   }
 
-  const { hasViewAccess, hasChangeAccess, hasFullAccess } =
-    constructBoardPermissions(board, session);
+  const { hasViewAccess, hasChangeAccess, hasFullAccess } = constructBoardPermissions(board, session);
 
   if (hasFullAccess) {
     return; // As full access is required and user has full access, allow
diff --git a/packages/api/src/router/group.ts b/packages/api/src/router/group.ts
index 19785b32d..17a7749d1 100644
--- a/packages/api/src/router/group.ts
+++ b/packages/api/src/router/group.ts
@@ -2,98 +2,86 @@ import { TRPCError } from "@trpc/server";
 
 import type { Database } from "@homarr/db";
 import { and, createId, eq, like, not, sql } from "@homarr/db";
-import {
-  groupMembers,
-  groupPermissions,
-  groups,
-} from "@homarr/db/schema/sqlite";
+import { groupMembers, groupPermissions, groups } from "@homarr/db/schema/sqlite";
 import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const groupRouter = createTRPCRouter({
-  getPaginated: protectedProcedure
-    .input(validation.group.paginated)
-    .query(async ({ input, ctx }) => {
-      const whereQuery = input.search
-        ? like(groups.name, `%${input.search.trim()}%`)
-        : undefined;
-      const groupCount = await ctx.db
-        .select({
-          count: sql<number>`count(*)`,
-        })
-        .from(groups)
-        .where(whereQuery);
+  getPaginated: protectedProcedure.input(validation.group.paginated).query(async ({ input, ctx }) => {
+    const whereQuery = input.search ? like(groups.name, `%${input.search.trim()}%`) : undefined;
+    const groupCount = await ctx.db
+      .select({
+        count: sql<number>`count(*)`,
+      })
+      .from(groups)
+      .where(whereQuery);
 
-      const dbGroups = await ctx.db.query.groups.findMany({
-        with: {
-          members: {
-            with: {
-              user: {
-                columns: {
-                  id: true,
-                  name: true,
-                  email: true,
-                  image: true,
-                },
+    const dbGroups = await ctx.db.query.groups.findMany({
+      with: {
+        members: {
+          with: {
+            user: {
+              columns: {
+                id: true,
+                name: true,
+                email: true,
+                image: true,
               },
             },
           },
         },
-        limit: input.pageSize,
-        offset: (input.page - 1) * input.pageSize,
-        where: whereQuery,
-      });
+      },
+      limit: input.pageSize,
+      offset: (input.page - 1) * input.pageSize,
+      where: whereQuery,
+    });
 
-      return {
-        items: dbGroups.map((group) => ({
-          ...group,
-          members: group.members.map((member) => member.user),
-        })),
-        totalCount: groupCount[0]!.count,
-      };
-    }),
-  getById: protectedProcedure
-    .input(validation.group.byId)
-    .query(async ({ input, ctx }) => {
-      const group = await ctx.db.query.groups.findFirst({
-        where: eq(groups.id, input.id),
-        with: {
-          members: {
-            with: {
-              user: {
-                columns: {
-                  id: true,
-                  name: true,
-                  email: true,
-                  image: true,
-                },
-              },
-            },
-          },
-          permissions: {
-            columns: {
-              permission: true,
-            },
-          },
-        },
-      });
-
-      if (!group) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Group not found",
-        });
-      }
-
-      return {
+    return {
+      items: dbGroups.map((group) => ({
         ...group,
         members: group.members.map((member) => member.user),
-        permissions: group.permissions.map(
-          (permission) => permission.permission,
-        ),
-      };
-    }),
+      })),
+      totalCount: groupCount[0]!.count,
+    };
+  }),
+  getById: protectedProcedure.input(validation.group.byId).query(async ({ input, ctx }) => {
+    const group = await ctx.db.query.groups.findFirst({
+      where: eq(groups.id, input.id),
+      with: {
+        members: {
+          with: {
+            user: {
+              columns: {
+                id: true,
+                name: true,
+                email: true,
+                image: true,
+              },
+            },
+          },
+        },
+        permissions: {
+          columns: {
+            permission: true,
+          },
+        },
+      },
+    });
+
+    if (!group) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Group not found",
+      });
+    }
+
+    return {
+      ...group,
+      members: group.members.map((member) => member.user),
+      permissions: group.permissions.map((permission) => permission.permission),
+    };
+  }),
   selectable: protectedProcedure.query(async ({ ctx }) => {
     return await ctx.db.query.groups.findMany({
       columns: {
@@ -102,120 +90,92 @@ export const groupRouter = createTRPCRouter({
       },
     });
   }),
-  createGroup: protectedProcedure
-    .input(validation.group.create)
-    .mutation(async ({ input, ctx }) => {
-      const normalizedName = normalizeName(input.name);
-      await checkSimilarNameAndThrowAsync(ctx.db, normalizedName);
+  createGroup: protectedProcedure.input(validation.group.create).mutation(async ({ input, ctx }) => {
+    const normalizedName = normalizeName(input.name);
+    await checkSimilarNameAndThrowAsync(ctx.db, normalizedName);
 
-      const id = createId();
-      await ctx.db.insert(groups).values({
-        id,
+    const id = createId();
+    await ctx.db.insert(groups).values({
+      id,
+      name: normalizedName,
+      ownerId: ctx.session.user.id,
+    });
+
+    return id;
+  }),
+  updateGroup: protectedProcedure.input(validation.group.update).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.id);
+
+    const normalizedName = normalizeName(input.name);
+    await checkSimilarNameAndThrowAsync(ctx.db, normalizedName, input.id);
+
+    await ctx.db
+      .update(groups)
+      .set({
         name: normalizedName,
-        ownerId: ctx.session.user.id,
-      });
+      })
+      .where(eq(groups.id, input.id));
+  }),
+  savePermissions: protectedProcedure.input(validation.group.savePermissions).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
 
-      return id;
-    }),
-  updateGroup: protectedProcedure
-    .input(validation.group.update)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.id);
+    await ctx.db.delete(groupPermissions).where(eq(groupPermissions.groupId, input.groupId));
 
-      const normalizedName = normalizeName(input.name);
-      await checkSimilarNameAndThrowAsync(ctx.db, normalizedName, input.id);
-
-      await ctx.db
-        .update(groups)
-        .set({
-          name: normalizedName,
-        })
-        .where(eq(groups.id, input.id));
-    }),
-  savePermissions: protectedProcedure
-    .input(validation.group.savePermissions)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
-
-      await ctx.db
-        .delete(groupPermissions)
-        .where(eq(groupPermissions.groupId, input.groupId));
-
-      await ctx.db.insert(groupPermissions).values(
-        input.permissions.map((permission) => ({
-          groupId: input.groupId,
-          permission,
-        })),
-      );
-    }),
-  transferOwnership: protectedProcedure
-    .input(validation.group.groupUser)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
-
-      await ctx.db
-        .update(groups)
-        .set({
-          ownerId: input.userId,
-        })
-        .where(eq(groups.id, input.groupId));
-    }),
-  deleteGroup: protectedProcedure
-    .input(validation.group.byId)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.id);
-
-      await ctx.db.delete(groups).where(eq(groups.id, input.id));
-    }),
-  addMember: protectedProcedure
-    .input(validation.group.groupUser)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
-
-      const user = await ctx.db.query.users.findFirst({
-        where: eq(groups.id, input.userId),
-      });
-
-      if (!user) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      await ctx.db.insert(groupMembers).values({
+    await ctx.db.insert(groupPermissions).values(
+      input.permissions.map((permission) => ({
         groupId: input.groupId,
-        userId: input.userId,
-      });
-    }),
-  removeMember: protectedProcedure
-    .input(validation.group.groupUser)
-    .mutation(async ({ input, ctx }) => {
-      await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
+        permission,
+      })),
+    );
+  }),
+  transferOwnership: protectedProcedure.input(validation.group.groupUser).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
 
-      await ctx.db
-        .delete(groupMembers)
-        .where(
-          and(
-            eq(groupMembers.groupId, input.groupId),
-            eq(groupMembers.userId, input.userId),
-          ),
-        );
-    }),
+    await ctx.db
+      .update(groups)
+      .set({
+        ownerId: input.userId,
+      })
+      .where(eq(groups.id, input.groupId));
+  }),
+  deleteGroup: protectedProcedure.input(validation.group.byId).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.id);
+
+    await ctx.db.delete(groups).where(eq(groups.id, input.id));
+  }),
+  addMember: protectedProcedure.input(validation.group.groupUser).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
+
+    const user = await ctx.db.query.users.findFirst({
+      where: eq(groups.id, input.userId),
+    });
+
+    if (!user) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "User not found",
+      });
+    }
+
+    await ctx.db.insert(groupMembers).values({
+      groupId: input.groupId,
+      userId: input.userId,
+    });
+  }),
+  removeMember: protectedProcedure.input(validation.group.groupUser).mutation(async ({ input, ctx }) => {
+    await throwIfGroupNotFoundAsync(ctx.db, input.groupId);
+
+    await ctx.db
+      .delete(groupMembers)
+      .where(and(eq(groupMembers.groupId, input.groupId), eq(groupMembers.userId, input.userId)));
+  }),
 });
 
 const normalizeName = (name: string) => name.trim();
 
-const checkSimilarNameAndThrowAsync = async (
-  db: Database,
-  name: string,
-  ignoreId?: string,
-) => {
+const checkSimilarNameAndThrowAsync = async (db: Database, name: string, ignoreId?: string) => {
   const similar = await db.query.groups.findFirst({
-    where: and(
-      like(groups.name, `${name}`),
-      not(eq(groups.id, ignoreId ?? "")),
-    ),
+    where: and(like(groups.name, `${name}`), not(eq(groups.id, ignoreId ?? ""))),
   });
 
   if (similar) {
diff --git a/packages/api/src/router/home.ts b/packages/api/src/router/home.ts
index 9bcabf029..191698566 100644
--- a/packages/api/src/router/home.ts
+++ b/packages/api/src/router/home.ts
@@ -1,31 +1,17 @@
 import { count } from "@homarr/db";
-import {
-  apps,
-  boards,
-  groups,
-  integrations,
-  invites,
-  users,
-} from "@homarr/db/schema/sqlite";
+import { apps, boards, groups, integrations, invites, users } from "@homarr/db/schema/sqlite";
 
 import { createTRPCRouter, protectedProcedure } from "../trpc";
 
 export const homeRouter = createTRPCRouter({
   getStats: protectedProcedure.query(async ({ ctx }) => {
     return {
-      countBoards:
-        (await ctx.db.select({ count: count() }).from(boards))[0]?.count ?? 0,
-      countUsers:
-        (await ctx.db.select({ count: count() }).from(users))[0]?.count ?? 0,
-      countGroups:
-        (await ctx.db.select({ count: count() }).from(groups))[0]?.count ?? 0,
-      countInvites:
-        (await ctx.db.select({ count: count() }).from(invites))[0]?.count ?? 0,
-      countIntegrations:
-        (await ctx.db.select({ count: count() }).from(integrations))[0]
-          ?.count ?? 0,
-      countApps:
-        (await ctx.db.select({ count: count() }).from(apps))[0]?.count ?? 0,
+      countBoards: (await ctx.db.select({ count: count() }).from(boards))[0]?.count ?? 0,
+      countUsers: (await ctx.db.select({ count: count() }).from(users))[0]?.count ?? 0,
+      countGroups: (await ctx.db.select({ count: count() }).from(groups))[0]?.count ?? 0,
+      countInvites: (await ctx.db.select({ count: count() }).from(invites))[0]?.count ?? 0,
+      countIntegrations: (await ctx.db.select({ count: count() }).from(integrations))[0]?.count ?? 0,
+      countApps: (await ctx.db.select({ count: count() }).from(apps))[0]?.count ?? 0,
     };
   }),
 });
diff --git a/packages/api/src/router/icons.ts b/packages/api/src/router/icons.ts
index 88b514462..e0c3c9a7c 100644
--- a/packages/api/src/router/icons.ts
+++ b/packages/api/src/router/icons.ts
@@ -5,28 +5,22 @@ import { validation } from "@homarr/validation";
 import { createTRPCRouter, publicProcedure } from "../trpc";
 
 export const iconsRouter = createTRPCRouter({
-  findIcons: publicProcedure
-    .input(validation.icons.findIcons)
-    .query(async ({ ctx, input }) => {
-      return {
-        icons: await ctx.db.query.iconRepositories.findMany({
-          with: {
-            icons: {
-              columns: {
-                id: true,
-                name: true,
-                url: true,
-              },
-              where:
-                input.searchText?.length ?? 0 > 0
-                  ? like(icons.name, `%${input.searchText}%`)
-                  : undefined,
-              limit: 5,
+  findIcons: publicProcedure.input(validation.icons.findIcons).query(async ({ ctx, input }) => {
+    return {
+      icons: await ctx.db.query.iconRepositories.findMany({
+        with: {
+          icons: {
+            columns: {
+              id: true,
+              name: true,
+              url: true,
             },
+            where: input.searchText?.length ?? 0 > 0 ? like(icons.name, `%${input.searchText}%`) : undefined,
+            limit: 5,
           },
-        }),
-        countIcons:
-          (await ctx.db.select({ count: count() }).from(icons))[0]?.count ?? 0,
-      };
-    }),
+        },
+      }),
+      countIcons: (await ctx.db.select({ count: count() }).from(icons))[0]?.count ?? 0,
+    };
+  }),
 });
diff --git a/packages/api/src/router/integration.ts b/packages/api/src/router/integration.ts
index f0b27f99d..ae807ef97 100644
--- a/packages/api/src/router/integration.ts
+++ b/packages/api/src/router/integration.ts
@@ -5,11 +5,7 @@ import type { Database } from "@homarr/db";
 import { and, createId, eq } from "@homarr/db";
 import { integrations, integrationSecrets } from "@homarr/db/schema/sqlite";
 import type { IntegrationSecretKind } from "@homarr/definitions";
-import {
-  getAllSecretKindOptions,
-  integrationKinds,
-  integrationSecretKindObject,
-} from "@homarr/definitions";
+import { getAllSecretKindOptions, integrationKinds, integrationSecretKindObject } from "@homarr/definitions";
 import { validation } from "@homarr/validation";
 
 import { createTRPCRouter, publicProcedure } from "../trpc";
@@ -26,231 +22,198 @@ export const integrationRouter = createTRPCRouter({
       }))
       .sort(
         (integrationA, integrationB) =>
-          integrationKinds.indexOf(integrationA.kind) -
-          integrationKinds.indexOf(integrationB.kind),
+          integrationKinds.indexOf(integrationA.kind) - integrationKinds.indexOf(integrationB.kind),
       );
   }),
-  byId: publicProcedure
-    .input(validation.integration.byId)
-    .query(async ({ ctx, input }) => {
-      const integration = await ctx.db.query.integrations.findFirst({
-        where: eq(integrations.id, input.id),
-        with: {
-          secrets: {
-            columns: {
-              kind: true,
-              value: true,
-              updatedAt: true,
-            },
+  byId: publicProcedure.input(validation.integration.byId).query(async ({ ctx, input }) => {
+    const integration = await ctx.db.query.integrations.findFirst({
+      where: eq(integrations.id, input.id),
+      with: {
+        secrets: {
+          columns: {
+            kind: true,
+            value: true,
+            updatedAt: true,
           },
         },
+      },
+    });
+
+    if (!integration) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Integration not found",
       });
+    }
 
-      if (!integration) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Integration not found",
-        });
-      }
+    return {
+      id: integration.id,
+      name: integration.name,
+      kind: integration.kind,
+      url: integration.url,
+      secrets: integration.secrets.map((secret) => ({
+        kind: secret.kind,
+        // Only return the value if the secret is public, so for example the username
+        value: integrationSecretKindObject[secret.kind].isPublic ? decryptSecret(secret.value) : null,
+        updatedAt: secret.updatedAt,
+      })),
+    };
+  }),
+  create: publicProcedure.input(validation.integration.create).mutation(async ({ ctx, input }) => {
+    const integrationId = createId();
+    await ctx.db.insert(integrations).values({
+      id: integrationId,
+      name: input.name,
+      url: input.url,
+      kind: input.kind,
+    });
 
-      return {
-        id: integration.id,
-        name: integration.name,
-        kind: integration.kind,
-        url: integration.url,
-        secrets: integration.secrets.map((secret) => ({
-          kind: secret.kind,
-          // Only return the value if the secret is public, so for example the username
-          value: integrationSecretKindObject[secret.kind].isPublic
-            ? decryptSecret(secret.value)
-            : null,
-          updatedAt: secret.updatedAt,
-        })),
-      };
-    }),
-  create: publicProcedure
-    .input(validation.integration.create)
-    .mutation(async ({ ctx, input }) => {
-      const integrationId = createId();
-      await ctx.db.insert(integrations).values({
-        id: integrationId,
+    for (const secret of input.secrets) {
+      await ctx.db.insert(integrationSecrets).values({
+        kind: secret.kind,
+        value: encryptSecret(secret.value),
+        updatedAt: new Date(),
+        integrationId,
+      });
+    }
+  }),
+  update: publicProcedure.input(validation.integration.update).mutation(async ({ ctx, input }) => {
+    const integration = await ctx.db.query.integrations.findFirst({
+      where: eq(integrations.id, input.id),
+      with: {
+        secrets: true,
+      },
+    });
+
+    if (!integration) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Integration not found",
+      });
+    }
+
+    await ctx.db
+      .update(integrations)
+      .set({
         name: input.name,
         url: input.url,
-        kind: input.kind,
-      });
+      })
+      .where(eq(integrations.id, input.id));
 
-      for (const secret of input.secrets) {
-        await ctx.db.insert(integrationSecrets).values({
-          kind: secret.kind,
-          value: encryptSecret(secret.value),
-          updatedAt: new Date(),
-          integrationId,
-        });
+    const decryptedSecrets = integration.secrets.map((secret) => ({
+      ...secret,
+      value: decryptSecret(secret.value),
+    }));
+
+    const changedSecrets = input.secrets.filter(
+      (secret): secret is { kind: IntegrationSecretKind; value: string } =>
+        secret.value !== null && // only update secrets that have a value
+        !decryptedSecrets.find((dSecret) => dSecret.kind === secret.kind && dSecret.value === secret.value),
+    );
+
+    if (changedSecrets.length > 0) {
+      for (const changedSecret of changedSecrets) {
+        const secretInput = {
+          integrationId: input.id,
+          value: changedSecret.value,
+          kind: changedSecret.kind,
+        };
+        if (!decryptedSecrets.some((secret) => secret.kind === changedSecret.kind)) {
+          await addSecretAsync(ctx.db, secretInput);
+        } else {
+          await updateSecretAsync(ctx.db, secretInput);
+        }
       }
-    }),
-  update: publicProcedure
-    .input(validation.integration.update)
-    .mutation(async ({ ctx, input }) => {
+    }
+  }),
+  delete: publicProcedure.input(validation.integration.delete).mutation(async ({ ctx, input }) => {
+    const integration = await ctx.db.query.integrations.findFirst({
+      where: eq(integrations.id, input.id),
+    });
+
+    if (!integration) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "Integration not found",
+      });
+    }
+
+    await ctx.db.delete(integrations).where(eq(integrations.id, input.id));
+  }),
+  testConnection: publicProcedure.input(validation.integration.testConnection).mutation(async ({ ctx, input }) => {
+    const secrets = input.secrets.filter((secret): secret is { kind: IntegrationSecretKind; value: string } =>
+      Boolean(secret.value),
+    );
+
+    // Find any matching secret kinds
+    let secretKinds = getAllSecretKindOptions(input.kind).find((secretKinds) =>
+      secretKinds.every((secretKind) => secrets.some((secret) => secret.kind === secretKind)),
+    );
+
+    if (!secretKinds && input.id === null) {
+      throw new TRPCError({
+        code: "BAD_REQUEST",
+        message: "SECRETS_NOT_DEFINED",
+      });
+    }
+
+    if (!secretKinds && input.id !== null) {
       const integration = await ctx.db.query.integrations.findFirst({
         where: eq(integrations.id, input.id),
         with: {
           secrets: true,
         },
       });
-
       if (!integration) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Integration not found",
-        });
-      }
-
-      await ctx.db
-        .update(integrations)
-        .set({
-          name: input.name,
-          url: input.url,
-        })
-        .where(eq(integrations.id, input.id));
-
-      const decryptedSecrets = integration.secrets.map((secret) => ({
-        ...secret,
-        value: decryptSecret(secret.value),
-      }));
-
-      const changedSecrets = input.secrets.filter(
-        (secret): secret is { kind: IntegrationSecretKind; value: string } =>
-          secret.value !== null && // only update secrets that have a value
-          !decryptedSecrets.find(
-            (dSecret) =>
-              dSecret.kind === secret.kind && dSecret.value === secret.value,
-          ),
-      );
-
-      if (changedSecrets.length > 0) {
-        for (const changedSecret of changedSecrets) {
-          const secretInput = {
-            integrationId: input.id,
-            value: changedSecret.value,
-            kind: changedSecret.kind,
-          };
-          if (
-            !decryptedSecrets.some(
-              (secret) => secret.kind === changedSecret.kind,
-            )
-          ) {
-            await addSecretAsync(ctx.db, secretInput);
-          } else {
-            await updateSecretAsync(ctx.db, secretInput);
-          }
-        }
-      }
-    }),
-  delete: publicProcedure
-    .input(validation.integration.delete)
-    .mutation(async ({ ctx, input }) => {
-      const integration = await ctx.db.query.integrations.findFirst({
-        where: eq(integrations.id, input.id),
-      });
-
-      if (!integration) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "Integration not found",
-        });
-      }
-
-      await ctx.db.delete(integrations).where(eq(integrations.id, input.id));
-    }),
-  testConnection: publicProcedure
-    .input(validation.integration.testConnection)
-    .mutation(async ({ ctx, input }) => {
-      const secrets = input.secrets.filter(
-        (secret): secret is { kind: IntegrationSecretKind; value: string } =>
-          Boolean(secret.value),
-      );
-
-      // Find any matching secret kinds
-      let secretKinds = getAllSecretKindOptions(input.kind).find(
-        (secretKinds) =>
-          secretKinds.every((secretKind) =>
-            secrets.some((secret) => secret.kind === secretKind),
-          ),
-      );
-
-      if (!secretKinds && input.id === null) {
         throw new TRPCError({
           code: "BAD_REQUEST",
           message: "SECRETS_NOT_DEFINED",
         });
       }
+      const decryptedSecrets = integration.secrets.map((secret) => ({
+        ...secret,
+        value: decryptSecret(secret.value),
+      }));
 
-      if (!secretKinds && input.id !== null) {
-        const integration = await ctx.db.query.integrations.findFirst({
-          where: eq(integrations.id, input.id),
-          with: {
-            secrets: true,
-          },
-        });
-        if (!integration) {
-          throw new TRPCError({
-            code: "BAD_REQUEST",
-            message: "SECRETS_NOT_DEFINED",
-          });
-        }
-        const decryptedSecrets = integration.secrets.map((secret) => ({
-          ...secret,
-          value: decryptSecret(secret.value),
-        }));
-
-        // Add secrets that are not defined in the input from the database
-        for (const dbSecret of decryptedSecrets) {
-          if (!secrets.find((secret) => secret.kind === dbSecret.kind)) {
-            secrets.push({
-              kind: dbSecret.kind,
-              value: dbSecret.value,
-            });
-          }
-        }
-
-        secretKinds = getAllSecretKindOptions(input.kind).find((secretKinds) =>
-          secretKinds.every((secretKind) =>
-            secrets.some((secret) => secret.kind === secretKind),
-          ),
-        );
-
-        if (!secretKinds) {
-          throw new TRPCError({
-            code: "BAD_REQUEST",
-            message: "SECRETS_NOT_DEFINED",
+      // Add secrets that are not defined in the input from the database
+      for (const dbSecret of decryptedSecrets) {
+        if (!secrets.find((secret) => secret.kind === dbSecret.kind)) {
+          secrets.push({
+            kind: dbSecret.kind,
+            value: dbSecret.value,
           });
         }
       }
 
-      // TODO: actually test the connection
-      // Probably by calling a function on the integration class
-      // getIntegration(input.kind).testConnection(secrets)
-      // getIntegration(kind: IntegrationKind): Integration
-      // interface Integration {
-      //   testConnection(): Promise<void>;
-      // }
-    }),
+      secretKinds = getAllSecretKindOptions(input.kind).find((secretKinds) =>
+        secretKinds.every((secretKind) => secrets.some((secret) => secret.kind === secretKind)),
+      );
+
+      if (!secretKinds) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "SECRETS_NOT_DEFINED",
+        });
+      }
+    }
+
+    // TODO: actually test the connection
+    // Probably by calling a function on the integration class
+    // getIntegration(input.kind).testConnection(secrets)
+    // getIntegration(kind: IntegrationKind): Integration
+    // interface Integration {
+    //   testConnection(): Promise<void>;
+    // }
+  }),
 });
 
 const algorithm = "aes-256-cbc"; //Using AES encryption
-const key = Buffer.from(
-  "1d71cceced68159ba59a277d056a66173613052cbeeccbfbd15ab1c909455a4d",
-  "hex",
-); // TODO: generate with const data = crypto.randomBytes(32).toString('hex')
+const key = Buffer.from("1d71cceced68159ba59a277d056a66173613052cbeeccbfbd15ab1c909455a4d", "hex"); // TODO: generate with const data = crypto.randomBytes(32).toString('hex')
 
 //Encrypting text
 export function encryptSecret(text: string): `${string}.${string}` {
   const initializationVector = crypto.randomBytes(16);
-  const cipher = crypto.createCipheriv(
-    algorithm,
-    Buffer.from(key),
-    initializationVector,
-  );
+  const cipher = crypto.createCipheriv(algorithm, Buffer.from(key), initializationVector);
   let encrypted = cipher.update(text);
   encrypted = Buffer.concat([encrypted, cipher.final()]);
   return `${encrypted.toString("hex")}.${initializationVector.toString("hex")}`;
@@ -261,11 +224,7 @@ function decryptSecret(value: `${string}.${string}`) {
   const [data, dataIv] = value.split(".") as [string, string];
   const initializationVector = Buffer.from(dataIv, "hex");
   const encryptedText = Buffer.from(data, "hex");
-  const decipher = crypto.createDecipheriv(
-    algorithm,
-    Buffer.from(key),
-    initializationVector,
-  );
+  const decipher = crypto.createDecipheriv(algorithm, Buffer.from(key), initializationVector);
   let decrypted = decipher.update(encryptedText);
   decrypted = Buffer.concat([decrypted, decipher.final()]);
   return decrypted.toString();
@@ -283,12 +242,7 @@ const updateSecretAsync = async (db: Database, input: UpdateSecretInput) => {
       value: encryptSecret(input.value),
       updatedAt: new Date(),
     })
-    .where(
-      and(
-        eq(integrationSecrets.integrationId, input.integrationId),
-        eq(integrationSecrets.kind, input.kind),
-      ),
-    );
+    .where(and(eq(integrationSecrets.integrationId, input.integrationId), eq(integrationSecrets.kind, input.kind)));
 };
 
 interface AddSecretInput {
diff --git a/packages/api/src/router/location.ts b/packages/api/src/router/location.ts
index faeb82e42..11e6e6770 100644
--- a/packages/api/src/router/location.ts
+++ b/packages/api/src/router/location.ts
@@ -8,11 +8,7 @@ export const locationRouter = createTRPCRouter({
     .input(validation.location.searchCity.input)
     .output(validation.location.searchCity.output)
     .query(async ({ input }) => {
-      const res = await fetch(
-        `https://geocoding-api.open-meteo.com/v1/search?name=${input.query}`,
-      );
-      return (await res.json()) as z.infer<
-        typeof validation.location.searchCity.output
-      >;
+      const res = await fetch(`https://geocoding-api.open-meteo.com/v1/search?name=${input.query}`);
+      return (await res.json()) as z.infer<typeof validation.location.searchCity.output>;
     }),
 });
diff --git a/packages/api/src/router/serverSettings.ts b/packages/api/src/router/serverSettings.ts
new file mode 100644
index 000000000..8766836ca
--- /dev/null
+++ b/packages/api/src/router/serverSettings.ts
@@ -0,0 +1,41 @@
+import SuperJSON from "superjson";
+
+import { eq } from "@homarr/db";
+import { serverSettings } from "@homarr/db/schema/sqlite";
+import type { ServerSettings } from "@homarr/server-settings";
+import { defaultServerSettingsKeys } from "@homarr/server-settings";
+import { z } from "@homarr/validation";
+
+import { createTRPCRouter, protectedProcedure } from "../trpc";
+
+export const serverSettingsRouter = createTRPCRouter({
+  getAll: protectedProcedure.query(async ({ ctx }) => {
+    const settings = await ctx.db.query.serverSettings.findMany();
+
+    const data = {} as ServerSettings;
+    defaultServerSettingsKeys.forEach((key) => {
+      const settingValue = settings.find((setting) => setting.settingKey === key)?.value;
+      if (!settingValue) {
+        return;
+      }
+      data[key] = SuperJSON.parse(settingValue);
+    });
+    return data;
+  }),
+  saveSettings: protectedProcedure
+    .input(
+      z.object({
+        settingsKey: z.enum(defaultServerSettingsKeys),
+        value: z.record(z.string(), z.unknown()),
+      }),
+    )
+    .mutation(async ({ ctx, input }) => {
+      const databaseRunResult = await ctx.db
+        .update(serverSettings)
+        .set({
+          value: SuperJSON.stringify(input.value),
+        })
+        .where(eq(serverSettings.settingKey, input.settingsKey));
+      return databaseRunResult.changes === 1;
+    }),
+});
diff --git a/packages/api/src/router/test/board.spec.ts b/packages/api/src/router/test/board.spec.ts
index 7ae949058..11ac8c913 100644
--- a/packages/api/src/router/test/board.spec.ts
+++ b/packages/api/src/router/test/board.spec.ts
@@ -41,6 +41,7 @@ const createRandomUserAsync = async (db: Database) => {
   const userId = createId();
   await db.insert(users).values({
     id: userId,
+    homeBoardId: null,
   });
   return userId;
 };
@@ -154,10 +155,7 @@ describe("getAllBoards should return all boards accessable to the current user",
 
     // Assert
     expect(result.length).toBe(2);
-    expect(result.map(({ name }) => name)).toStrictEqual([
-      "public",
-      "private2",
-    ]);
+    expect(result.map(({ name }) => name)).toStrictEqual(["public", "private2"]);
   });
 
   test.each([["board-view"], ["board-change"]] satisfies [BoardPermission][])(
@@ -220,10 +218,7 @@ describe("getAllBoards should return all boards accessable to the current user",
 
       // Assert
       expect(result.length).toBe(2);
-      expect(result.map(({ name }) => name)).toStrictEqual([
-        "public",
-        "private1",
-      ]);
+      expect(result.map(({ name }) => name)).toStrictEqual(["public", "private1"]);
     },
   );
 
@@ -276,10 +271,7 @@ describe("getAllBoards should return all boards accessable to the current user",
 
       // Assert
       expect(result.length).toBe(2);
-      expect(result.map(({ name }) => name)).toStrictEqual([
-        "public",
-        "private1",
-      ]);
+      expect(result.map(({ name }) => name)).toStrictEqual(["public", "private1"]);
     },
   );
 });
@@ -355,11 +347,7 @@ describe("rename board should rename board", () => {
     });
     expect(dbBoard).toBeDefined();
     expect(dbBoard?.name).toBe("newName");
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "full-access",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
   });
 
   test("should throw error when similar board name exists", async () => {
@@ -383,13 +371,10 @@ describe("rename board should rename board", () => {
     });
 
     // Act
-    const actAsync = async () =>
-      await caller.renameBoard({ id: boardId, name: "Newname" });
+    const actAsync = async () => await caller.renameBoard({ id: boardId, name: "Newname" });
 
     // Assert
-    await expect(actAsync()).rejects.toThrowError(
-      "Board with similar name already exists",
-    );
+    await expect(actAsync()).rejects.toThrowError("Board with similar name already exists");
   });
 
   test("should throw error when board not found", async () => {
@@ -398,8 +383,7 @@ describe("rename board should rename board", () => {
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
     // Act
-    const actAsync = async () =>
-      await caller.renameBoard({ id: "nonExistentBoardId", name: "newName" });
+    const actAsync = async () => await caller.renameBoard({ id: "nonExistentBoardId", name: "newName" });
 
     // Assert
     await expect(actAsync()).rejects.toThrowError("Board not found");
@@ -438,11 +422,7 @@ describe("changeBoardVisibility should change board visibility", () => {
       });
       expect(dbBoard).toBeDefined();
       expect(dbBoard?.isPublic).toBe(visibility === "public");
-      expect(spy).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "full-access",
-      );
+      expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
     },
   );
 });
@@ -472,11 +452,7 @@ describe("deleteBoard should delete board", () => {
       where: eq(boards.id, boardId),
     });
     expect(dbBoard).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "full-access",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
   });
 
   test("should throw error when board not found", async () => {
@@ -485,65 +461,53 @@ describe("deleteBoard should delete board", () => {
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
     // Act
-    const actAsync = async () =>
-      await caller.deleteBoard({ id: "nonExistentBoardId" });
+    const actAsync = async () => await caller.deleteBoard({ id: "nonExistentBoardId" });
 
     // Assert
     await expect(actAsync()).rejects.toThrowError("Board not found");
   });
 });
 
-describe("getDefaultBoard should return default board", () => {
-  it("should return default board", async () => {
+describe("getHomeBoard should return home board", () => {
+  it("should return home board", async () => {
     // Arrange
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
     const db = createDb();
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
-    const fullBoardProps = await createFullBoardAsync(db, "default");
+    const fullBoardProps = await createFullBoardAsync(db, "home");
 
     // Act
-    const result = await caller.getDefaultBoard();
+    const result = await caller.getHomeBoard();
 
     // Assert
     expectInputToBeFullBoardWithName(result, {
-      name: "default",
+      name: "home",
       ...fullBoardProps,
     });
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-view",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-view");
   });
 });
 
 describe("getBoardByName should return board by name", () => {
-  it.each([["default"], ["something"]])(
-    "should return board by name %s when present",
-    async (name) => {
-      // Arrange
-      const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
-      const db = createDb();
-      const caller = boardRouter.createCaller({ db, session: defaultSession });
+  it.each([["default"], ["something"]])("should return board by name %s when present", async (name) => {
+    // Arrange
+    const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
+    const db = createDb();
+    const caller = boardRouter.createCaller({ db, session: defaultSession });
 
-      const fullBoardProps = await createFullBoardAsync(db, name);
+    const fullBoardProps = await createFullBoardAsync(db, name);
 
-      // Act
-      const result = await caller.getBoardByName({ name });
+    // Act
+    const result = await caller.getBoardByName({ name });
 
-      // Assert
-      expectInputToBeFullBoardWithName(result, {
-        name,
-        ...fullBoardProps,
-      });
-      expect(spy).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "board-view",
-      );
-    },
-  );
+    // Assert
+    expectInputToBeFullBoardWithName(result, {
+      name,
+      ...fullBoardProps,
+    });
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-view");
+  });
 
   it("should throw error when not present", async () => {
     // Arrange
@@ -552,8 +516,7 @@ describe("getBoardByName should return board by name", () => {
     await createFullBoardAsync(db, "default");
 
     // Act
-    const actAsync = async () =>
-      await caller.getBoardByName({ name: "nonExistentBoard" });
+    const actAsync = async () => await caller.getBoardByName({ name: "nonExistentBoard" });
 
     // Assert
     await expect(actAsync()).rejects.toThrowError("Board not found");
@@ -610,9 +573,7 @@ describe("savePartialBoardSettings should save general settings", () => {
     expect(dbBoard?.metaTitle).toBe(newMetaTitle);
     expect(dbBoard?.logoImageUrl).toBe(newLogoImageUrl);
     expect(dbBoard?.faviconImageUrl).toBe(newFaviconImageUrl);
-    expect(dbBoard?.backgroundImageAttachment).toBe(
-      newBackgroundImageAttachment,
-    );
+    expect(dbBoard?.backgroundImageAttachment).toBe(newBackgroundImageAttachment);
     expect(dbBoard?.backgroundImageRepeat).toBe(newBackgroundImageRepeat);
     expect(dbBoard?.backgroundImageSize).toBe(newBackgroundImageSize);
     expect(dbBoard?.backgroundImageUrl).toBe(newBackgroundImageUrl);
@@ -622,11 +583,7 @@ describe("savePartialBoardSettings should save general settings", () => {
     expect(dbBoard?.primaryColor).toBe(newPrimaryColor);
     expect(dbBoard?.secondaryColor).toBe(newSecondaryColor);
 
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
 
   it("should throw error when board not found", async () => {
@@ -681,21 +638,14 @@ describe("saveBoard should save full board", () => {
     expect(definedBoard.sections.length).toBe(1);
     expect(definedBoard.sections[0]?.id).not.toBe(sectionId);
     expect(section).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
   it("should remove item when not present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
     const db = createDb();
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
-    const { boardId, itemId, sectionId } = await createFullBoardAsync(
-      db,
-      "default",
-    );
+    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
 
     await caller.saveBoard({
       id: boardId,
@@ -714,6 +664,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -741,11 +692,7 @@ describe("saveBoard should save full board", () => {
     expect(firstSection.items.length).toBe(1);
     expect(firstSection.items[0]?.id).not.toBe(itemId);
     expect(item).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
   it("should remove integration reference when not present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
@@ -758,8 +705,7 @@ describe("saveBoard should save full board", () => {
       url: "http://localhost:3000",
     } as const;
 
-    const { boardId, itemId, integrationId, sectionId } =
-      await createFullBoardAsync(db, "default");
+    const { boardId, itemId, integrationId, sectionId } = await createFullBoardAsync(db, "default");
     await db.insert(integrations).values(anotherIntegration);
 
     await caller.saveBoard({
@@ -779,6 +725,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -812,71 +759,61 @@ describe("saveBoard should save full board", () => {
     expect(firstItem.integrations.length).toBe(1);
     expect(firstItem.integrations[0]?.integrationId).not.toBe(integrationId);
     expect(integration).toBeUndefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
-  it.each([
-    [{ kind: "empty" as const }],
-    [{ kind: "category" as const, name: "My first category" }],
-  ])("should add section when present in input", async (partialSection) => {
-    const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
-    const db = createDb();
-    const caller = boardRouter.createCaller({ db, session: defaultSession });
+  it.each([[{ kind: "empty" as const }], [{ kind: "category" as const, name: "My first category" }]])(
+    "should add section when present in input",
+    async (partialSection) => {
+      const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
+      const db = createDb();
+      const caller = boardRouter.createCaller({ db, session: defaultSession });
 
-    const { boardId, sectionId } = await createFullBoardAsync(db, "default");
+      const { boardId, sectionId } = await createFullBoardAsync(db, "default");
 
-    const newSectionId = createId();
-    await caller.saveBoard({
-      id: boardId,
-      sections: [
-        {
-          id: newSectionId,
-          position: 1,
-          items: [],
-          ...partialSection,
+      const newSectionId = createId();
+      await caller.saveBoard({
+        id: boardId,
+        sections: [
+          {
+            id: newSectionId,
+            position: 1,
+            items: [],
+            ...partialSection,
+          },
+          {
+            id: sectionId,
+            kind: "empty",
+            position: 0,
+            items: [],
+          },
+        ],
+      });
+
+      const board = await db.query.boards.findFirst({
+        where: eq(boards.id, boardId),
+        with: {
+          sections: true,
         },
-        {
-          id: sectionId,
-          kind: "empty",
-          position: 0,
-          items: [],
-        },
-      ],
-    });
+      });
 
-    const board = await db.query.boards.findFirst({
-      where: eq(boards.id, boardId),
-      with: {
-        sections: true,
-      },
-    });
+      const section = await db.query.sections.findFirst({
+        where: eq(sections.id, newSectionId),
+      });
 
-    const section = await db.query.sections.findFirst({
-      where: eq(sections.id, newSectionId),
-    });
-
-    const definedBoard = expectToBeDefined(board);
-    expect(definedBoard.sections.length).toBe(2);
-    const addedSection = expectToBeDefined(
-      definedBoard.sections.find((section) => section.id === newSectionId),
-    );
-    expect(addedSection).toBeDefined();
-    expect(addedSection.id).toBe(newSectionId);
-    expect(addedSection.kind).toBe(partialSection.kind);
-    expect(addedSection.position).toBe(1);
-    if ("name" in partialSection) {
-      expect(addedSection.name).toBe(partialSection.name);
-    }
-    expect(section).toBeDefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
-  });
+      const definedBoard = expectToBeDefined(board);
+      expect(definedBoard.sections.length).toBe(2);
+      const addedSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === newSectionId));
+      expect(addedSection).toBeDefined();
+      expect(addedSection.id).toBe(newSectionId);
+      expect(addedSection.kind).toBe(partialSection.kind);
+      expect(addedSection.position).toBe(1);
+      if ("name" in partialSection) {
+        expect(addedSection.name).toBe(partialSection.name);
+      }
+      expect(section).toBeDefined();
+      expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
+    },
+  );
   it("should add item when present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
     const db = createDb();
@@ -902,6 +839,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 3,
               yOffset: 2,
+              advancedOptions: {},
             },
           ],
         },
@@ -927,25 +865,17 @@ describe("saveBoard should save full board", () => {
     expect(definedBoard.sections.length).toBe(1);
     const firstSection = expectToBeDefined(definedBoard.sections[0]);
     expect(firstSection.items.length).toBe(1);
-    const addedItem = expectToBeDefined(
-      firstSection.items.find((item) => item.id === newItemId),
-    );
+    const addedItem = expectToBeDefined(firstSection.items.find((item) => item.id === newItemId));
     expect(addedItem).toBeDefined();
     expect(addedItem.id).toBe(newItemId);
     expect(addedItem.kind).toBe("clock");
-    expect(addedItem.options).toBe(
-      SuperJSON.stringify({ is24HourFormat: true }),
-    );
+    expect(addedItem.options).toBe(SuperJSON.stringify({ is24HourFormat: true }));
     expect(addedItem.height).toBe(1);
     expect(addedItem.width).toBe(1);
     expect(addedItem.xOffset).toBe(3);
     expect(addedItem.yOffset).toBe(2);
     expect(item).toBeDefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
   it("should add integration reference when present in input", async () => {
     const spy = vi.spyOn(boardAccess, "throwIfActionForbiddenAsync");
@@ -958,10 +888,7 @@ describe("saveBoard should save full board", () => {
       url: "http://plex.local",
     } as const;
 
-    const { boardId, itemId, sectionId } = await createFullBoardAsync(
-      db,
-      "default",
-    );
+    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
     await db.insert(integrations).values(integration);
 
     await caller.saveBoard({
@@ -981,6 +908,7 @@ describe("saveBoard should save full board", () => {
               width: 1,
               xOffset: 0,
               yOffset: 0,
+              advancedOptions: {},
             },
           ],
         },
@@ -1010,17 +938,11 @@ describe("saveBoard should save full board", () => {
     expect(definedBoard.sections.length).toBe(1);
     const firstSection = expectToBeDefined(definedBoard.sections[0]);
     expect(firstSection.items.length).toBe(1);
-    const firstItem = expectToBeDefined(
-      firstSection.items.find((item) => item.id === itemId),
-    );
+    const firstItem = expectToBeDefined(firstSection.items.find((item) => item.id === itemId));
     expect(firstItem.integrations.length).toBe(1);
     expect(firstItem.integrations[0]?.integrationId).toBe(integration.id);
     expect(integrationItem).toBeDefined();
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
   it("should update section when present in input", async () => {
     const db = createDb();
@@ -1065,16 +987,12 @@ describe("saveBoard should save full board", () => {
 
     const definedBoard = expectToBeDefined(board);
     expect(definedBoard.sections.length).toBe(2);
-    const firstSection = expectToBeDefined(
-      definedBoard.sections.find((section) => section.id === sectionId),
-    );
+    const firstSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === sectionId));
     expect(firstSection.id).toBe(sectionId);
     expect(firstSection.kind).toBe("empty");
     expect(firstSection.position).toBe(1);
     expect(firstSection.name).toBe(null);
-    const secondSection = expectToBeDefined(
-      definedBoard.sections.find((section) => section.id === newSectionId),
-    );
+    const secondSection = expectToBeDefined(definedBoard.sections.find((section) => section.id === newSectionId));
     expect(secondSection.id).toBe(newSectionId);
     expect(secondSection.kind).toBe("category");
     expect(secondSection.position).toBe(0);
@@ -1085,10 +1003,7 @@ describe("saveBoard should save full board", () => {
     const db = createDb();
     const caller = boardRouter.createCaller({ db, session: defaultSession });
 
-    const { boardId, itemId, sectionId } = await createFullBoardAsync(
-      db,
-      "default",
-    );
+    const { boardId, itemId, sectionId } = await createFullBoardAsync(db, "default");
 
     await caller.saveBoard({
       id: boardId,
@@ -1107,6 +1022,7 @@ describe("saveBoard should save full board", () => {
               width: 2,
               xOffset: 7,
               yOffset: 5,
+              advancedOptions: {},
             },
           ],
         },
@@ -1128,24 +1044,15 @@ describe("saveBoard should save full board", () => {
     expect(definedBoard.sections.length).toBe(1);
     const firstSection = expectToBeDefined(definedBoard.sections[0]);
     expect(firstSection.items.length).toBe(1);
-    const firstItem = expectToBeDefined(
-      firstSection.items.find((item) => item.id === itemId),
-    );
+    const firstItem = expectToBeDefined(firstSection.items.find((item) => item.id === itemId));
     expect(firstItem.id).toBe(itemId);
     expect(firstItem.kind).toBe("clock");
-    expect(
-      SuperJSON.parse<{ is24HourFormat: boolean }>(firstItem.options)
-        .is24HourFormat,
-    ).toBe(false);
+    expect(SuperJSON.parse<{ is24HourFormat: boolean }>(firstItem.options).is24HourFormat).toBe(false);
     expect(firstItem.height).toBe(3);
     expect(firstItem.width).toBe(2);
     expect(firstItem.xOffset).toBe(7);
     expect(firstItem.yOffset).toBe(5);
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "board-change",
-    );
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "board-change");
   });
   it("should fail when board not found", async () => {
     const db = createDb();
@@ -1215,9 +1122,7 @@ describe("getBoardPermissions should return board permissions", () => {
     const result = await caller.getBoardPermissions({ id: boardId });
 
     // Assert
-    expect(result.groupPermissions).toEqual([
-      { group: { id: groupId, name: "group1" }, permission: "board-view" },
-    ]);
+    expect(result.groupPermissions).toEqual([{ group: { id: groupId, name: "group1" }, permission: "board-view" }]);
     expect(result.userPermissions).toEqual(
       expect.arrayContaining([
         {
@@ -1230,14 +1135,8 @@ describe("getBoardPermissions should return board permissions", () => {
         },
       ]),
     );
-    expect(result.inherited).toEqual([
-      { group: { id: groupId, name: "group1" }, permission: "admin" },
-    ]);
-    expect(spy).toHaveBeenCalledWith(
-      expect.anything(),
-      expect.anything(),
-      "full-access",
-    );
+    expect(result.inherited).toEqual([{ group: { id: groupId, name: "group1" }, permission: "admin" }]);
+    expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
   });
 });
 
@@ -1278,11 +1177,7 @@ describe("saveUserBoardPermissions should save user board permissions", () => {
         where: eq(boardUserPermissions.userId, user1),
       });
       expect(dbUserPermission).toBeDefined();
-      expect(spy).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "full-access",
-      );
+      expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
     },
   );
 });
@@ -1329,17 +1224,13 @@ describe("saveGroupBoardPermissions should save group board permissions", () =>
         where: eq(boardGroupPermissions.groupId, groupId),
       });
       expect(dbGroupPermission).toBeDefined();
-      expect(spy).toHaveBeenCalledWith(
-        expect.anything(),
-        expect.anything(),
-        "full-access",
-      );
+      expect(spy).toHaveBeenCalledWith(expect.anything(), expect.anything(), "full-access");
     },
   );
 });
 
 const expectInputToBeFullBoardWithName = (
-  input: RouterOutputs["board"]["getDefaultBoard"],
+  input: RouterOutputs["board"]["getHomeBoard"],
   props: { name: string } & Awaited<ReturnType<typeof createFullBoardAsync>>,
 ) => {
   expect(input.id).toBe(props.boardId);
diff --git a/packages/api/src/router/test/board/board-access.spec.ts b/packages/api/src/router/test/board/board-access.spec.ts
index 6a9a8b520..a9072f7e6 100644
--- a/packages/api/src/router/test/board/board-access.spec.ts
+++ b/packages/api/src/router/test/board/board-access.spec.ts
@@ -9,10 +9,7 @@ import { throwIfActionForbiddenAsync } from "../../board/board-access";
 
 const defaultCreatorId = createId();
 
-const expectActToBeAsync = async (
-  act: () => Promise<void>,
-  success: boolean,
-) => {
+const expectActToBeAsync = async (act: () => Promise<void>, success: boolean) => {
   if (!success) {
     await expect(act()).rejects.toThrow("Board not found");
     return;
@@ -29,161 +26,124 @@ describe("throwIfActionForbiddenAsync should check access to board and return bo
     ["full-access" as const, true],
     ["board-change" as const, true],
     ["board-view" as const, true],
-  ])(
-    "with permission %s should return %s when hasFullAccess is true",
-    async (permission, expectedResult) => {
-      // Arrange
-      const db = createDb();
-      const spy = vi.spyOn(authShared, "constructBoardPermissions");
-      spy.mockReturnValue({
-        hasFullAccess: true,
-        hasChangeAccess: false,
-        hasViewAccess: false,
-      });
+  ])("with permission %s should return %s when hasFullAccess is true", async (permission, expectedResult) => {
+    // Arrange
+    const db = createDb();
+    const spy = vi.spyOn(authShared, "constructBoardPermissions");
+    spy.mockReturnValue({
+      hasFullAccess: true,
+      hasChangeAccess: false,
+      hasViewAccess: false,
+    });
 
-      await db.insert(users).values({ id: defaultCreatorId });
-      const boardId = createId();
-      await db.insert(boards).values({
-        id: boardId,
-        name: "test",
-        creatorId: defaultCreatorId,
-      });
+    await db.insert(users).values({ id: defaultCreatorId });
+    const boardId = createId();
+    await db.insert(boards).values({
+      id: boardId,
+      name: "test",
+      creatorId: defaultCreatorId,
+    });
 
-      // Act
-      const act = () =>
-        throwIfActionForbiddenAsync(
-          { db, session: null },
-          eq(boards.id, boardId),
-          permission,
-        );
+    // Act
+    const act = () => throwIfActionForbiddenAsync({ db, session: null }, eq(boards.id, boardId), permission);
 
-      // Assert
-      await expectActToBeAsync(act, expectedResult);
-    },
-  );
+    // Assert
+    await expectActToBeAsync(act, expectedResult);
+  });
 
   test.each([
     ["full-access" as const, false],
     ["board-change" as const, true],
     ["board-view" as const, true],
-  ])(
-    "with permission %s should return %s when hasChangeAccess is true",
-    async (permission, expectedResult) => {
-      // Arrange
-      const db = createDb();
-      const spy = vi.spyOn(authShared, "constructBoardPermissions");
-      spy.mockReturnValue({
-        hasFullAccess: false,
-        hasChangeAccess: true,
-        hasViewAccess: false,
-      });
+  ])("with permission %s should return %s when hasChangeAccess is true", async (permission, expectedResult) => {
+    // Arrange
+    const db = createDb();
+    const spy = vi.spyOn(authShared, "constructBoardPermissions");
+    spy.mockReturnValue({
+      hasFullAccess: false,
+      hasChangeAccess: true,
+      hasViewAccess: false,
+    });
 
-      await db.insert(users).values({ id: defaultCreatorId });
-      const boardId = createId();
-      await db.insert(boards).values({
-        id: boardId,
-        name: "test",
-        creatorId: defaultCreatorId,
-      });
+    await db.insert(users).values({ id: defaultCreatorId });
+    const boardId = createId();
+    await db.insert(boards).values({
+      id: boardId,
+      name: "test",
+      creatorId: defaultCreatorId,
+    });
 
-      // Act
-      const act = () =>
-        throwIfActionForbiddenAsync(
-          { db, session: null },
-          eq(boards.id, boardId),
-          permission,
-        );
+    // Act
+    const act = () => throwIfActionForbiddenAsync({ db, session: null }, eq(boards.id, boardId), permission);
 
-      // Assert
-      await expectActToBeAsync(act, expectedResult);
-    },
-  );
+    // Assert
+    await expectActToBeAsync(act, expectedResult);
+  });
 
   test.each([
     ["full-access" as const, false],
     ["board-change" as const, false],
     ["board-view" as const, true],
-  ])(
-    "with permission %s should return %s when hasViewAccess is true",
-    async (permission, expectedResult) => {
-      // Arrange
-      const db = createDb();
-      const spy = vi.spyOn(authShared, "constructBoardPermissions");
-      spy.mockReturnValue({
-        hasFullAccess: false,
-        hasChangeAccess: false,
-        hasViewAccess: true,
-      });
+  ])("with permission %s should return %s when hasViewAccess is true", async (permission, expectedResult) => {
+    // Arrange
+    const db = createDb();
+    const spy = vi.spyOn(authShared, "constructBoardPermissions");
+    spy.mockReturnValue({
+      hasFullAccess: false,
+      hasChangeAccess: false,
+      hasViewAccess: true,
+    });
 
-      await db.insert(users).values({ id: defaultCreatorId });
-      const boardId = createId();
-      await db.insert(boards).values({
-        id: boardId,
-        name: "test",
-        creatorId: defaultCreatorId,
-      });
+    await db.insert(users).values({ id: defaultCreatorId });
+    const boardId = createId();
+    await db.insert(boards).values({
+      id: boardId,
+      name: "test",
+      creatorId: defaultCreatorId,
+    });
 
-      // Act
-      const act = () =>
-        throwIfActionForbiddenAsync(
-          { db, session: null },
-          eq(boards.id, boardId),
-          permission,
-        );
+    // Act
+    const act = () => throwIfActionForbiddenAsync({ db, session: null }, eq(boards.id, boardId), permission);
 
-      // Assert
-      await expectActToBeAsync(act, expectedResult);
-    },
-  );
+    // Assert
+    await expectActToBeAsync(act, expectedResult);
+  });
 
   test.each([
     ["full-access" as const, false],
     ["board-change" as const, false],
     ["board-view" as const, false],
-  ])(
-    "with permission %s should return %s when hasViewAccess is false",
-    async (permission, expectedResult) => {
-      // Arrange
-      const db = createDb();
-      const spy = vi.spyOn(authShared, "constructBoardPermissions");
-      spy.mockReturnValue({
-        hasFullAccess: false,
-        hasChangeAccess: false,
-        hasViewAccess: false,
-      });
+  ])("with permission %s should return %s when hasViewAccess is false", async (permission, expectedResult) => {
+    // Arrange
+    const db = createDb();
+    const spy = vi.spyOn(authShared, "constructBoardPermissions");
+    spy.mockReturnValue({
+      hasFullAccess: false,
+      hasChangeAccess: false,
+      hasViewAccess: false,
+    });
 
-      await db.insert(users).values({ id: defaultCreatorId });
-      const boardId = createId();
-      await db.insert(boards).values({
-        id: boardId,
-        name: "test",
-        creatorId: defaultCreatorId,
-      });
+    await db.insert(users).values({ id: defaultCreatorId });
+    const boardId = createId();
+    await db.insert(boards).values({
+      id: boardId,
+      name: "test",
+      creatorId: defaultCreatorId,
+    });
 
-      // Act
-      const act = () =>
-        throwIfActionForbiddenAsync(
-          { db, session: null },
-          eq(boards.id, boardId),
-          permission,
-        );
+    // Act
+    const act = () => throwIfActionForbiddenAsync({ db, session: null }, eq(boards.id, boardId), permission);
 
-      // Assert
-      await expectActToBeAsync(act, expectedResult);
-    },
-  );
+    // Assert
+    await expectActToBeAsync(act, expectedResult);
+  });
 
   test("should throw when board is not found", async () => {
     // Arrange
     const db = createDb();
 
     // Act
-    const act = () =>
-      throwIfActionForbiddenAsync(
-        { db, session: null },
-        eq(boards.id, createId()),
-        "full-access",
-      );
+    const act = () => throwIfActionForbiddenAsync({ db, session: null }, eq(boards.id, createId()), "full-access");
 
     // Assert
     await expect(act()).rejects.toThrow("Board not found");
diff --git a/packages/api/src/router/test/group.spec.ts b/packages/api/src/router/test/group.spec.ts
index 130040a09..2901ec32b 100644
--- a/packages/api/src/router/test/group.spec.ts
+++ b/packages/api/src/router/test/group.spec.ts
@@ -2,12 +2,7 @@ import { describe, expect, test, vi } from "vitest";
 
 import type { Session } from "@homarr/auth";
 import { createId, eq } from "@homarr/db";
-import {
-  groupMembers,
-  groupPermissions,
-  groups,
-  users,
-} from "@homarr/db/schema/sqlite";
+import { groupMembers, groupPermissions, groups, users } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
 
 import { groupRouter } from "../group";
@@ -103,9 +98,7 @@ describe("paginated should return a list of groups with pagination", () => {
     expect(item?.members.length).toBe(1);
     const userKeys = Object.keys(item?.members[0] ?? {});
     expect(userKeys.length).toBe(4);
-    expect(
-      ["id", "name", "email", "image"].some((key) => userKeys.includes(key)),
-    );
+    expect(["id", "name", "email", "image"].some((key) => userKeys.includes(key)));
   });
 
   test.each([
@@ -178,9 +171,7 @@ describe("byId should return group by id including members and permissions", ()
 
     const userKeys = Object.keys(result?.members[0] ?? {});
     expect(userKeys.length).toBe(4);
-    expect(
-      ["id", "name", "email", "image"].some((key) => userKeys.includes(key)),
-    );
+    expect(["id", "name", "email", "image"].some((key) => userKeys.includes(key)));
     expect(result.permissions.length).toBe(1);
     expect(result.permissions[0]).toBe("admin");
   });
@@ -249,98 +240,88 @@ describe("create should create group in database", () => {
     ["test", "Test "],
     ["test", "test"],
     ["test", " TeSt"],
-  ])(
-    "with similar name %s it should fail to create %s",
-    async (similarName, nameToCreate) => {
-      // Arrange
-      const db = createDb();
-      const caller = groupRouter.createCaller({ db, session: defaultSession });
+  ])("with similar name %s it should fail to create %s", async (similarName, nameToCreate) => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, session: defaultSession });
 
-      await db.insert(groups).values({
-        id: createId(),
-        name: similarName,
-      });
+    await db.insert(groups).values({
+      id: createId(),
+      name: similarName,
+    });
 
-      // Act
-      const actAsync = async () =>
-        await caller.createGroup({ name: nameToCreate });
+    // Act
+    const actAsync = async () => await caller.createGroup({ name: nameToCreate });
 
-      // Assert
-      await expect(actAsync()).rejects.toThrow("similar name");
-    },
-  );
+    // Assert
+    await expect(actAsync()).rejects.toThrow("similar name");
+  });
 });
 
 describe("update should update name with value that is no duplicate", () => {
   test.each([
     ["first", "second ", "second"],
     ["first", " first", "first"],
-  ])(
-    "update should update name from %s to %s normalized",
-    async (initialValue, updateValue, expectedValue) => {
-      // Arrange
-      const db = createDb();
-      const caller = groupRouter.createCaller({ db, session: defaultSession });
+  ])("update should update name from %s to %s normalized", async (initialValue, updateValue, expectedValue) => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, session: defaultSession });
 
-      const groupId = createId();
-      await db.insert(groups).values([
-        {
-          id: groupId,
-          name: initialValue,
-        },
-        {
-          id: createId(),
-          name: "Third",
-        },
-      ]);
+    const groupId = createId();
+    await db.insert(groups).values([
+      {
+        id: groupId,
+        name: initialValue,
+      },
+      {
+        id: createId(),
+        name: "Third",
+      },
+    ]);
 
-      // Act
+    // Act
+    await caller.updateGroup({
+      id: groupId,
+      name: updateValue,
+    });
+
+    // Assert
+    const value = await db.query.groups.findFirst({
+      where: eq(groups.id, groupId),
+    });
+    expect(value?.name).toBe(expectedValue);
+  });
+
+  test.each([
+    ["Second ", "second"],
+    [" seCond", "second"],
+  ])("with similar name %s it should fail to update %s", async (updateValue, initialDuplicate) => {
+    // Arrange
+    const db = createDb();
+    const caller = groupRouter.createCaller({ db, session: defaultSession });
+
+    const groupId = createId();
+    await db.insert(groups).values([
+      {
+        id: groupId,
+        name: "Something",
+      },
+      {
+        id: createId(),
+        name: initialDuplicate,
+      },
+    ]);
+
+    // Act
+    const actAsync = async () =>
       await caller.updateGroup({
         id: groupId,
         name: updateValue,
       });
 
-      // Assert
-      const value = await db.query.groups.findFirst({
-        where: eq(groups.id, groupId),
-      });
-      expect(value?.name).toBe(expectedValue);
-    },
-  );
-
-  test.each([
-    ["Second ", "second"],
-    [" seCond", "second"],
-  ])(
-    "with similar name %s it should fail to update %s",
-    async (updateValue, initialDuplicate) => {
-      // Arrange
-      const db = createDb();
-      const caller = groupRouter.createCaller({ db, session: defaultSession });
-
-      const groupId = createId();
-      await db.insert(groups).values([
-        {
-          id: groupId,
-          name: "Something",
-        },
-        {
-          id: createId(),
-          name: initialDuplicate,
-        },
-      ]);
-
-      // Act
-      const actAsync = async () =>
-        await caller.updateGroup({
-          id: groupId,
-          name: updateValue,
-        });
-
-      // Assert
-      await expect(actAsync()).rejects.toThrow("similar name");
-    },
-  );
+    // Assert
+    await expect(actAsync()).rejects.toThrow("similar name");
+  });
 
   test("with non existing id it should throw not found error", async () => {
     // Arrange
@@ -392,10 +373,7 @@ describe("savePermissions should save permissions for group", () => {
     });
 
     expect(permissions.length).toBe(2);
-    expect(permissions.map(({ permission }) => permission)).toEqual([
-      "integration-use-all",
-      "board-full-access",
-    ]);
+    expect(permissions.map(({ permission }) => permission)).toEqual(["integration-use-all", "board-full-access"]);
   });
 
   test("with non existing group it should throw not found error", async () => {
diff --git a/packages/api/src/router/test/integration.spec.ts b/packages/api/src/router/test/integration.spec.ts
index ca6d0eb3f..2a68a8c39 100644
--- a/packages/api/src/router/test/integration.spec.ts
+++ b/packages/api/src/router/test/integration.spec.ts
@@ -118,17 +118,11 @@ describe("byId should return an integration by id", () => {
 
     const result = await caller.byId({ id: "1" });
     expect(result.secrets.length).toBe(3);
-    const username = expectToBeDefined(
-      result.secrets.find((secret) => secret.kind === "username"),
-    );
+    const username = expectToBeDefined(result.secrets.find((secret) => secret.kind === "username"));
     expect(username.value).not.toBeNull();
-    const password = expectToBeDefined(
-      result.secrets.find((secret) => secret.kind === "password"),
-    );
+    const password = expectToBeDefined(result.secrets.find((secret) => secret.kind === "password"));
     expect(password.value).toBeNull();
-    const apiKey = expectToBeDefined(
-      result.secrets.find((secret) => secret.kind === "apiKey"),
-    );
+    const apiKey = expectToBeDefined(result.secrets.find((secret) => secret.kind === "apiKey"));
     expect(apiKey.value).toBeNull();
   });
 });
@@ -200,9 +194,7 @@ describe("update should update an integration", () => {
       integrationId,
       updatedAt: lastWeek,
     };
-    await db
-      .insert(integrationSecrets)
-      .values([usernameToInsert, passwordToInsert]);
+    await db.insert(integrationSecrets).values([usernameToInsert, passwordToInsert]);
 
     const input = {
       id: integrationId,
@@ -231,15 +223,9 @@ describe("update should update an integration", () => {
     expect(dbIntegration!.url).toBe(input.url);
 
     expect(dbSecrets.length).toBe(3);
-    const username = expectToBeDefined(
-      dbSecrets.find((secret) => secret.kind === "username"),
-    );
-    const password = expectToBeDefined(
-      dbSecrets.find((secret) => secret.kind === "password"),
-    );
-    const apiKey = expectToBeDefined(
-      dbSecrets.find((secret) => secret.kind === "apiKey"),
-    );
+    const username = expectToBeDefined(dbSecrets.find((secret) => secret.kind === "username"));
+    const password = expectToBeDefined(dbSecrets.find((secret) => secret.kind === "password"));
+    const apiKey = expectToBeDefined(dbSecrets.find((secret) => secret.kind === "apiKey"));
     expect(username.value).toMatch(/^[a-f0-9]+.[a-f0-9]+$/);
     expect(password.value).toMatch(/^[a-f0-9]+.[a-f0-9]+$/);
     expect(apiKey.value).toMatch(/^[a-f0-9]+.[a-f0-9]+$/);
@@ -327,26 +313,23 @@ describe("testConnection should test the connection to an integration", () => {
         { kind: "password" as const, value: "Password123!" },
       ],
     ],
-  ])(
-    "should fail when a required secret is missing when creating %s integration",
-    async (kind, secrets) => {
-      const db = createDb();
-      const caller = integrationRouter.createCaller({
-        db,
-        session: null,
-      });
+  ])("should fail when a required secret is missing when creating %s integration", async (kind, secrets) => {
+    const db = createDb();
+    const caller = integrationRouter.createCaller({
+      db,
+      session: null,
+    });
 
-      const input: RouterInputs["integration"]["testConnection"] = {
-        id: null,
-        kind,
-        url: `http://${kind}.local`,
-        secrets,
-      };
+    const input: RouterInputs["integration"]["testConnection"] = {
+      id: null,
+      kind,
+      url: `http://${kind}.local`,
+      secrets,
+    };
 
-      const actAsync = async () => await caller.testConnection(input);
-      await expect(actAsync()).rejects.toThrow("SECRETS_NOT_DEFINED");
-    },
-  );
+    const actAsync = async () => await caller.testConnection(input);
+    await expect(actAsync()).rejects.toThrow("SECRETS_NOT_DEFINED");
+  });
 
   it.each([
     [
diff --git a/packages/api/src/router/test/serverSettings.spec.ts b/packages/api/src/router/test/serverSettings.spec.ts
new file mode 100644
index 000000000..331631229
--- /dev/null
+++ b/packages/api/src/router/test/serverSettings.spec.ts
@@ -0,0 +1,131 @@
+import SuperJSON from "superjson";
+import { describe, expect, test, vi } from "vitest";
+
+import type { Session } from "@homarr/auth";
+import { createId } from "@homarr/db";
+import { serverSettings } from "@homarr/db/schema/sqlite";
+import { createDb } from "@homarr/db/test";
+import { defaultServerSettings, defaultServerSettingsKeys } from "@homarr/server-settings";
+
+import { serverSettingsRouter } from "../serverSettings";
+
+// Mock the auth module to return an empty session
+vi.mock("@homarr/auth", () => ({ auth: () => ({}) as Session }));
+
+const defaultSession = {
+  user: {
+    id: createId(),
+    permissions: [],
+  },
+  expires: new Date().toISOString(),
+} satisfies Session;
+
+describe("getAll server settings", () => {
+  test("getAll should throw error when unauthorized", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      session: null,
+    });
+
+    await db.insert(serverSettings).values([
+      {
+        settingKey: defaultServerSettingsKeys[0],
+        value: SuperJSON.stringify(defaultServerSettings.analytics),
+      },
+    ]);
+
+    const actAsync = async () => await caller.getAll();
+
+    await expect(actAsync()).rejects.toThrow();
+  });
+  test("getAll should return server", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      session: defaultSession,
+    });
+
+    await db.insert(serverSettings).values([
+      {
+        settingKey: defaultServerSettingsKeys[0],
+        value: SuperJSON.stringify(defaultServerSettings.analytics),
+      },
+    ]);
+
+    const result = await caller.getAll();
+
+    expect(result).toStrictEqual({
+      analytics: {
+        enableGeneral: true,
+        enableWidgetData: false,
+        enableIntegrationData: false,
+        enableUserData: false,
+      },
+    });
+  });
+});
+
+describe("saveSettings", () => {
+  test("saveSettings should return false when it did not update one", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      session: defaultSession,
+    });
+
+    const result = await caller.saveSettings({
+      settingsKey: "analytics",
+      value: {
+        enableGeneral: true,
+        enableWidgetData: true,
+        enableIntegrationData: true,
+        enableUserData: true,
+      },
+    });
+
+    expect(result).toBe(false);
+
+    const dbSettings = await db.select().from(serverSettings);
+    expect(dbSettings.length).toBe(0);
+  });
+  test("saveSettings should update settings and return true when it updated only one", async () => {
+    const db = createDb();
+    const caller = serverSettingsRouter.createCaller({
+      db,
+      session: defaultSession,
+    });
+
+    await db.insert(serverSettings).values([
+      {
+        settingKey: defaultServerSettingsKeys[0],
+        value: SuperJSON.stringify(defaultServerSettings.analytics),
+      },
+    ]);
+
+    const result = await caller.saveSettings({
+      settingsKey: "analytics",
+      value: {
+        enableGeneral: true,
+        enableWidgetData: true,
+        enableIntegrationData: true,
+        enableUserData: true,
+      },
+    });
+
+    expect(result).toBe(true);
+
+    const dbSettings = await db.select().from(serverSettings);
+    expect(dbSettings).toStrictEqual([
+      {
+        settingKey: "analytics",
+        value: SuperJSON.stringify({
+          enableGeneral: true,
+          enableWidgetData: true,
+          enableIntegrationData: true,
+          enableUserData: true,
+        }),
+      },
+    ]);
+  });
+});
diff --git a/packages/api/src/router/test/user.spec.ts b/packages/api/src/router/test/user.spec.ts
index 6873f74c6..59c58436f 100644
--- a/packages/api/src/router/test/user.spec.ts
+++ b/packages/api/src/router/test/user.spec.ts
@@ -73,7 +73,7 @@ describe("initUser should initialize the first user", () => {
         confirmPassword: "12345679",
       });
 
-    await expect(actAsync()).rejects.toThrow("Passwords do not match");
+    await expect(actAsync()).rejects.toThrow("passwordsDoNotMatch");
   });
 
   it("should not create a user if the password is too short", async () => {
@@ -218,10 +218,7 @@ describe("editProfile shoud update user", () => {
     });
 
     // assert
-    const user = await db
-      .select()
-      .from(schema.users)
-      .where(eq(schema.users.id, id));
+    const user = await db.select().from(schema.users).where(eq(schema.users.id, id));
 
     expect(user).toHaveLength(1);
     expect(user[0]).toStrictEqual({
@@ -232,6 +229,7 @@ describe("editProfile shoud update user", () => {
       salt: null,
       password: null,
       image: null,
+      homeBoardId: null,
     });
   });
 
@@ -260,10 +258,7 @@ describe("editProfile shoud update user", () => {
     });
 
     // assert
-    const user = await db
-      .select()
-      .from(schema.users)
-      .where(eq(schema.users.id, id));
+    const user = await db.select().from(schema.users).where(eq(schema.users.id, id));
 
     expect(user).toHaveLength(1);
     expect(user[0]).toStrictEqual({
@@ -274,6 +269,7 @@ describe("editProfile shoud update user", () => {
       salt: null,
       password: null,
       image: null,
+      homeBoardId: null,
     });
   });
 });
@@ -297,6 +293,7 @@ describe("delete should delete user", () => {
         image: null,
         password: null,
         salt: null,
+        homeBoardId: null,
       },
       {
         id: userToDelete,
@@ -306,6 +303,7 @@ describe("delete should delete user", () => {
         image: null,
         password: null,
         salt: null,
+        homeBoardId: null,
       },
       {
         id: createId(),
@@ -315,6 +313,7 @@ describe("delete should delete user", () => {
         image: null,
         password: null,
         salt: null,
+        homeBoardId: null,
       },
     ];
 
diff --git a/packages/api/src/router/user.ts b/packages/api/src/router/user.ts
index 4d44884fa..7d3fbd100 100644
--- a/packages/api/src/router/user.ts
+++ b/packages/api/src/router/user.ts
@@ -11,60 +11,58 @@ import { validation, z } from "@homarr/validation";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
 
 export const userRouter = createTRPCRouter({
-  initUser: publicProcedure
-    .input(validation.user.init)
-    .mutation(async ({ ctx, input }) => {
-      const firstUser = await ctx.db.query.users.findFirst({
-        columns: {
-          id: true,
-        },
+  initUser: publicProcedure.input(validation.user.init).mutation(async ({ ctx, input }) => {
+    const firstUser = await ctx.db.query.users.findFirst({
+      columns: {
+        id: true,
+      },
+    });
+
+    if (firstUser) {
+      throw new TRPCError({
+        code: "FORBIDDEN",
+        message: "User already exists",
       });
+    }
 
-      if (firstUser) {
-        throw new TRPCError({
-          code: "FORBIDDEN",
-          message: "User already exists",
-        });
-      }
+    await createUserAsync(ctx.db, input);
+  }),
+  register: publicProcedure.input(validation.user.registrationApi).mutation(async ({ ctx, input }) => {
+    const inviteWhere = and(eq(invites.id, input.inviteId), eq(invites.token, input.token));
+    const dbInvite = await ctx.db.query.invites.findFirst({
+      columns: {
+        id: true,
+        expirationDate: true,
+      },
+      where: inviteWhere,
+    });
 
-      await createUserAsync(ctx.db, input);
-    }),
-  register: publicProcedure
-    .input(validation.user.registrationApi)
-    .mutation(async ({ ctx, input }) => {
-      const inviteWhere = and(
-        eq(invites.id, input.inviteId),
-        eq(invites.token, input.token),
-      );
-      const dbInvite = await ctx.db.query.invites.findFirst({
-        columns: {
-          id: true,
-          expirationDate: true,
-        },
-        where: inviteWhere,
+    if (!dbInvite || dbInvite.expirationDate < new Date()) {
+      throw new TRPCError({
+        code: "FORBIDDEN",
+        message: "Invalid invite",
       });
+    }
 
-      if (!dbInvite || dbInvite.expirationDate < new Date()) {
-        throw new TRPCError({
-          code: "FORBIDDEN",
-          message: "Invalid invite",
-        });
-      }
+    if (!dbInvite || dbInvite.expirationDate < new Date()) {
+      throw new TRPCError({
+        code: "FORBIDDEN",
+        message: "Invalid invite",
+      });
+    }
 
-      await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
+    await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
 
-      await createUserAsync(ctx.db, input);
+    await createUserAsync(ctx.db, input);
 
-      // Delete invite as it's used
-      await ctx.db.delete(invites).where(inviteWhere);
-    }),
-  create: publicProcedure
-    .input(validation.user.create)
-    .mutation(async ({ ctx, input }) => {
-      await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
+    // Delete invite as it's used
+    await ctx.db.delete(invites).where(inviteWhere);
+  }),
+  create: publicProcedure.input(validation.user.create).mutation(async ({ ctx, input }) => {
+    await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.username);
 
-      await createUserAsync(ctx.db, input);
-    }),
+    await createUserAsync(ctx.db, input);
+  }),
   setProfileImage: protectedProcedure
     .input(
       z.object({
@@ -79,10 +77,7 @@ export const userRouter = createTRPCRouter({
     )
     .mutation(async ({ input, ctx }) => {
       // Only admins can change other users profile images
-      if (
-        ctx.session.user.id !== input.userId &&
-        !ctx.session.user.permissions.includes("admin")
-      ) {
+      if (ctx.session.user.id !== input.userId && !ctx.session.user.permissions.includes("admin")) {
         throw new TRPCError({
           code: "FORBIDDEN",
           message: "You are not allowed to change other users profile images",
@@ -131,118 +126,105 @@ export const userRouter = createTRPCRouter({
       },
     });
   }),
-  getById: publicProcedure
-    .input(z.object({ userId: z.string() }))
-    .query(async ({ input, ctx }) => {
-      const user = await ctx.db.query.users.findFirst({
+  getById: publicProcedure.input(z.object({ userId: z.string() })).query(async ({ input, ctx }) => {
+    const user = await ctx.db.query.users.findFirst({
+      columns: {
+        id: true,
+        name: true,
+        email: true,
+        emailVerified: true,
+        image: true,
+      },
+      where: eq(users.id, input.userId),
+    });
+
+    if (!user) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "User not found",
+      });
+    }
+
+    return user;
+  }),
+  editProfile: publicProcedure.input(validation.user.editProfile).mutation(async ({ input, ctx }) => {
+    const user = await ctx.db.query.users.findFirst({
+      columns: { email: true },
+      where: eq(users.id, input.id),
+    });
+
+    if (!user) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "User not found",
+      });
+    }
+
+    await checkUsernameAlreadyTakenAndThrowAsync(ctx.db, input.name, input.id);
+
+    const emailDirty = input.email && user.email !== input.email;
+    await ctx.db
+      .update(users)
+      .set({
+        name: input.name,
+        email: emailDirty === true ? input.email : undefined,
+        emailVerified: emailDirty === true ? null : undefined,
+      })
+      .where(eq(users.id, input.id));
+  }),
+  delete: publicProcedure.input(z.string()).mutation(async ({ input, ctx }) => {
+    await ctx.db.delete(users).where(eq(users.id, input));
+  }),
+  changePassword: protectedProcedure.input(validation.user.changePasswordApi).mutation(async ({ ctx, input }) => {
+    const user = ctx.session.user;
+    // Only admins can change other users' passwords
+    if (!user.permissions.includes("admin") && user.id !== input.userId) {
+      throw new TRPCError({
+        code: "NOT_FOUND",
+        message: "User not found",
+      });
+    }
+
+    // Admins can change the password of other users without providing the previous password
+    const isPreviousPasswordRequired = ctx.session.user.id === input.userId;
+
+    if (isPreviousPasswordRequired) {
+      const dbUser = await ctx.db.query.users.findFirst({
         columns: {
           id: true,
-          name: true,
-          email: true,
-          emailVerified: true,
-          image: true,
+          password: true,
+          salt: true,
         },
         where: eq(users.id, input.userId),
       });
 
-      if (!user) {
+      if (!dbUser) {
         throw new TRPCError({
           code: "NOT_FOUND",
           message: "User not found",
         });
       }
 
-      return user;
-    }),
-  editProfile: publicProcedure
-    .input(validation.user.editProfile)
-    .mutation(async ({ input, ctx }) => {
-      const user = await ctx.db.query.users.findFirst({
-        columns: { email: true },
-        where: eq(users.id, input.id),
-      });
+      const previousPasswordHash = await hashPasswordAsync(input.previousPassword, dbUser.salt ?? "");
+      const isValid = previousPasswordHash === dbUser.password;
 
-      if (!user) {
+      if (!isValid) {
         throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
+          code: "FORBIDDEN",
+          message: "Invalid password",
         });
       }
+    }
 
-      await checkUsernameAlreadyTakenAndThrowAsync(
-        ctx.db,
-        input.name,
-        input.id,
-      );
-
-      const emailDirty = input.email && user.email !== input.email;
-      await ctx.db
-        .update(users)
-        .set({
-          name: input.name,
-          email: emailDirty === true ? input.email : undefined,
-          emailVerified: emailDirty === true ? null : undefined,
-        })
-        .where(eq(users.id, input.id));
-    }),
-  delete: publicProcedure.input(z.string()).mutation(async ({ input, ctx }) => {
-    await ctx.db.delete(users).where(eq(users.id, input));
+    const salt = await createSaltAsync();
+    const hashedPassword = await hashPasswordAsync(input.password, salt);
+    await ctx.db
+      .update(users)
+      .set({
+        password: hashedPassword,
+      })
+      .where(eq(users.id, input.userId));
   }),
-  changePassword: protectedProcedure
-    .input(validation.user.changePasswordApi)
-    .mutation(async ({ ctx, input }) => {
-      const user = ctx.session.user;
-      // Only admins can change other users' passwords
-      if (!user.permissions.includes("admin") && user.id !== input.userId) {
-        throw new TRPCError({
-          code: "NOT_FOUND",
-          message: "User not found",
-        });
-      }
-
-      // Admins can change the password of other users without providing the previous password
-      const isPreviousPasswordRequired = ctx.session.user.id === input.userId;
-
-      if (isPreviousPasswordRequired) {
-        const dbUser = await ctx.db.query.users.findFirst({
-          columns: {
-            id: true,
-            password: true,
-            salt: true,
-          },
-          where: eq(users.id, input.userId),
-        });
-
-        if (!dbUser) {
-          throw new TRPCError({
-            code: "NOT_FOUND",
-            message: "User not found",
-          });
-        }
-
-        const previousPasswordHash = await hashPasswordAsync(
-          input.previousPassword,
-          dbUser.salt ?? "",
-        );
-        const isValid = previousPasswordHash === dbUser.password;
-
-        if (!isValid) {
-          throw new TRPCError({
-            code: "FORBIDDEN",
-            message: "Invalid password",
-          });
-        }
-      }
-
-      const salt = await createSaltAsync();
-      const hashedPassword = await hashPasswordAsync(input.password, salt);
-      await ctx.db
-        .update(users)
-        .set({
-          password: hashedPassword,
-        })
-        .where(eq(users.id, input.userId));
-    }),
   setMessage: publicProcedure.input(z.string()).mutation(async ({ input }) => {
     await exampleChannel.publishAsync({ message: input });
   }),
@@ -255,10 +237,7 @@ export const userRouter = createTRPCRouter({
   }),
 });
 
-const createUserAsync = async (
-  db: Database,
-  input: z.infer<typeof validation.user.create>,
-) => {
+const createUserAsync = async (db: Database, input: z.infer<typeof validation.user.create>) => {
   const salt = await createSaltAsync();
   const hashedPassword = await hashPasswordAsync(input.password, salt);
 
@@ -268,16 +247,13 @@ const createUserAsync = async (
   await db.insert(schema.users).values({
     id: userId,
     name: username,
+    email: input.email,
     password: hashedPassword,
     salt,
   });
 };
 
-const checkUsernameAlreadyTakenAndThrowAsync = async (
-  db: Database,
-  username: string,
-  ignoreId?: string,
-) => {
+const checkUsernameAlreadyTakenAndThrowAsync = async (db: Database, username: string, ignoreId?: string) => {
   const user = await db.query.users.findFirst({
     where: eq(users.name, username.toLowerCase()),
   });
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index 0f64c9ff8..a15612a2a 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -27,17 +27,11 @@ import { ZodError } from "@homarr/validation";
  *
  * @see https://trpc.io/docs/server/context
  */
-export const createTRPCContext = (opts: {
-  headers: Headers;
-  session: Session | null;
-}) => {
+export const createTRPCContext = (opts: { headers: Headers; session: Session | null }) => {
   const session = opts.session;
   const source = opts.headers.get("x-trpc-source") ?? "unknown";
 
-  logger.info(
-    `tRPC request from ${source} by user '${session?.user.id}'`,
-    session?.user,
-  );
+  logger.info(`tRPC request from ${source} by user '${session?.user.id}'`, session?.user);
 
   return {
     session,
diff --git a/packages/auth/callbacks.ts b/packages/auth/callbacks.ts
index ddad44996..3fdeb0c54 100644
--- a/packages/auth/callbacks.ts
+++ b/packages/auth/callbacks.ts
@@ -7,17 +7,9 @@ import { eq, inArray } from "@homarr/db";
 import { groupMembers, groupPermissions } from "@homarr/db/schema/sqlite";
 import { getPermissionsWithChildren } from "@homarr/definitions";
 
-import {
-  expireDateAfter,
-  generateSessionToken,
-  sessionMaxAgeInSeconds,
-  sessionTokenCookieName,
-} from "./session";
+import { expireDateAfter, generateSessionToken, sessionMaxAgeInSeconds, sessionTokenCookieName } from "./session";
 
-export const getCurrentUserPermissionsAsync = async (
-  db: Database,
-  userId: string,
-) => {
+export const getCurrentUserPermissionsAsync = async (db: Database, userId: string) => {
   const dbGroupMembers = await db.query.groupMembers.findMany({
     where: eq(groupMembers.userId, userId),
   });
@@ -27,19 +19,13 @@ export const getCurrentUserPermissionsAsync = async (
       permission: groupPermissions.permission,
     })
     .from(groupPermissions)
-    .where(
-      groupIds.length > 0
-        ? inArray(groupPermissions.groupId, groupIds)
-        : undefined,
-    );
+    .where(groupIds.length > 0 ? inArray(groupPermissions.groupId, groupIds) : undefined);
   const permissionKeys = dbGroupPermissions.map(({ permission }) => permission);
 
   return getPermissionsWithChildren(permissionKeys);
 };
 
-export const createSessionCallback = (
-  db: Database,
-): NextAuthCallbackOf<"session"> => {
+export const createSessionCallback = (db: Database): NextAuthCallbackOf<"session"> => {
   return async ({ session, user }) => {
     return {
       ...session,
@@ -54,10 +40,7 @@ export const createSessionCallback = (
 };
 
 export const createSignInCallback =
-  (
-    adapter: Adapter,
-    isCredentialsRequest: boolean,
-  ): NextAuthCallbackOf<"signIn"> =>
+  (adapter: Adapter, isCredentialsRequest: boolean): NextAuthCallbackOf<"signIn"> =>
   async ({ user }) => {
     if (!isCredentialsRequest) return true;
 
@@ -89,5 +72,7 @@ export const createSignInCallback =
   };
 
 type NextAuthCallbackRecord = Exclude<NextAuthConfig["callbacks"], undefined>;
-export type NextAuthCallbackOf<TKey extends keyof NextAuthCallbackRecord> =
-  Exclude<NextAuthCallbackRecord[TKey], undefined>;
+export type NextAuthCallbackOf<TKey extends keyof NextAuthCallbackRecord> = Exclude<
+  NextAuthCallbackRecord[TKey],
+  undefined
+>;
diff --git a/packages/auth/configuration.ts b/packages/auth/configuration.ts
index 2c8c4459f..290df5f10 100644
--- a/packages/auth/configuration.ts
+++ b/packages/auth/configuration.ts
@@ -28,10 +28,7 @@ export const createConfiguration = (isCredentialsRequest: boolean) =>
     },
     trustHost: true,
     adapter,
-    providers: [
-      Credentials(createCredentialsConfiguration(db)),
-      EmptyNextAuthProvider(),
-    ],
+    providers: [Credentials(createCredentialsConfiguration(db)), EmptyNextAuthProvider()],
     callbacks: {
       session: createSessionCallback(db),
       signIn: createSignInCallback(adapter, isCredentialsRequest),
diff --git a/packages/auth/env.mjs b/packages/auth/env.mjs
index 3bcd30f32..2e7ddcad0 100644
--- a/packages/auth/env.mjs
+++ b/packages/auth/env.mjs
@@ -3,15 +3,11 @@ import { z } from "zod";
 
 export const env = createEnv({
   server: {
-    AUTH_SECRET:
-      process.env.NODE_ENV === "production"
-        ? z.string().min(1)
-        : z.string().min(1).optional(),
+    AUTH_SECRET: process.env.NODE_ENV === "production" ? z.string().min(1) : z.string().min(1).optional(),
   },
   client: {},
   runtimeEnv: {
     AUTH_SECRET: process.env.AUTH_SECRET,
   },
-  skipValidation:
-    Boolean(process.env.CI) || Boolean(process.env.SKIP_ENV_VALIDATION),
+  skipValidation: Boolean(process.env.CI) || Boolean(process.env.SKIP_ENV_VALIDATION),
 });
diff --git a/packages/auth/index.ts b/packages/auth/index.ts
index 0a555056c..eed6a80b9 100644
--- a/packages/auth/index.ts
+++ b/packages/auth/index.ts
@@ -17,10 +17,6 @@ declare module "@auth/core/types" {
 
 export * from "./security";
 
-export const createHandlers = (isCredentialsRequest: boolean) =>
-  createConfiguration(isCredentialsRequest);
+export const createHandlers = (isCredentialsRequest: boolean) => createConfiguration(isCredentialsRequest);
 
-export {
-  getSessionFromTokenAsync as getSessionFromToken,
-  sessionTokenCookieName,
-} from "./session";
+export { getSessionFromTokenAsync as getSessionFromToken, sessionTokenCookieName } from "./session";
diff --git a/packages/auth/permissions/board-permissions.ts b/packages/auth/permissions/board-permissions.ts
index a67b988b5..a3adbe8f6 100644
--- a/packages/auth/permissions/board-permissions.ts
+++ b/packages/auth/permissions/board-permissions.ts
@@ -19,24 +19,15 @@ export type BoardPermissionsProps = (
   isPublic: boolean;
 };
 
-export const constructBoardPermissions = (
-  board: BoardPermissionsProps,
-  session: Session | null,
-) => {
+export const constructBoardPermissions = (board: BoardPermissionsProps, session: Session | null) => {
   const creatorId = "creator" in board ? board.creator?.id : board.creatorId;
 
   return {
-    hasFullAccess:
-      session?.user?.id === creatorId ||
-      session?.user.permissions.includes("board-full-access"),
+    hasFullAccess: session?.user?.id === creatorId || session?.user.permissions.includes("board-full-access"),
     hasChangeAccess:
       session?.user?.id === creatorId ||
-      board.userPermissions.some(
-        ({ permission }) => permission === "board-change",
-      ) ||
-      board.groupPermissions.some(
-        ({ permission }) => permission === "board-change",
-      ) ||
+      board.userPermissions.some(({ permission }) => permission === "board-change") ||
+      board.groupPermissions.some(({ permission }) => permission === "board-change") ||
       session?.user.permissions.includes("board-modify-all"),
     hasViewAccess:
       session?.user?.id === creatorId ||
diff --git a/packages/auth/providers/credentials.ts b/packages/auth/providers/credentials.ts
index edfd5eb62..ecc101078 100644
--- a/packages/auth/providers/credentials.ts
+++ b/packages/auth/providers/credentials.ts
@@ -35,13 +35,8 @@ export const createCredentialsConfiguration = (db: Database) =>
         return null;
       }
 
-      console.log(
-        `user ${user.name} is trying to log in. checking password...`,
-      );
-      const isValidPassword = await bcrypt.compare(
-        data.password,
-        user.password,
-      );
+      console.log(`user ${user.name} is trying to log in. checking password...`);
+      const isValidPassword = await bcrypt.compare(data.password, user.password);
 
       if (!isValidPassword) {
         console.log(`password for user ${user.name} was incorrect`);
diff --git a/packages/auth/providers/test/credentials.spec.ts b/packages/auth/providers/test/credentials.spec.ts
index 09b42d32d..0f7c7c98b 100644
--- a/packages/auth/providers/test/credentials.spec.ts
+++ b/packages/auth/providers/test/credentials.spec.ts
@@ -26,13 +26,7 @@ describe("Credentials authorization", () => {
     expect(result).toEqual({ id: userId, name: "test" });
   });
 
-  const passwordsThatShouldNotAuthorize = [
-    "wrong",
-    "Test",
-    "test ",
-    " test",
-    " test ",
-  ];
+  const passwordsThatShouldNotAuthorize = ["wrong", "Test", "test ", " test", " test "];
 
   passwordsThatShouldNotAuthorize.forEach((password) => {
     it(`should not authorize user with incorrect credentials (${password})`, async () => {
diff --git a/packages/auth/session.ts b/packages/auth/session.ts
index 40dbf874c..3e893db04 100644
--- a/packages/auth/session.ts
+++ b/packages/auth/session.ts
@@ -16,10 +16,7 @@ export const generateSessionToken = () => {
   return randomUUID();
 };
 
-export const getSessionFromTokenAsync = async (
-  db: Database,
-  token: string | undefined,
-): Promise<Session | null> => {
+export const getSessionFromTokenAsync = async (db: Database, token: string | undefined): Promise<Session | null> => {
   if (!token) {
     return null;
   }
diff --git a/packages/auth/test/callbacks.spec.ts b/packages/auth/test/callbacks.spec.ts
index 679669627..1dced2115 100644
--- a/packages/auth/test/callbacks.spec.ts
+++ b/packages/auth/test/callbacks.spec.ts
@@ -6,20 +6,11 @@ import type { Account, User } from "next-auth";
 import type { JWT } from "next-auth/jwt";
 import { describe, expect, it, test, vi } from "vitest";
 
-import {
-  groupMembers,
-  groupPermissions,
-  groups,
-  users,
-} from "@homarr/db/schema/sqlite";
+import { groupMembers, groupPermissions, groups, users } from "@homarr/db/schema/sqlite";
 import { createDb } from "@homarr/db/test";
 import * as definitions from "@homarr/definitions";
 
-import {
-  createSessionCallback,
-  createSignInCallback,
-  getCurrentUserPermissionsAsync,
-} from "../callbacks";
+import { createSessionCallback, createSignInCallback, getCurrentUserPermissionsAsync } from "../callbacks";
 
 describe("getCurrentUserPermissions", () => {
   test("should return empty permissions when non existing user requested", async () => {
@@ -96,9 +87,7 @@ describe("session callback", () => {
   });
 });
 
-type AdapterSessionInput = Parameters<
-  Exclude<Adapter["createSession"], undefined>
->[0];
+type AdapterSessionInput = Parameters<Exclude<Adapter["createSession"], undefined>>[0];
 
 const createAdapter = () => {
   const result = {
@@ -131,8 +120,7 @@ vi.mock("next/headers", async (importOriginal) => {
   const mod = await importOriginal<HeadersExport>();
 
   const result = {
-    set: (name: string, value: string, options: Partial<ResponseCookie>) =>
-      options as ResponseCookie,
+    set: (name: string, value: string, options: Partial<ResponseCookie>) => options as ResponseCookie,
   } as unknown as ReadonlyRequestCookies;
 
   vi.spyOn(result, "set");
@@ -145,10 +133,7 @@ vi.mock("next/headers", async (importOriginal) => {
 describe("createSignInCallback", () => {
   it("should return true if not credentials request", async () => {
     const isCredentialsRequest = false;
-    const signInCallback = createSignInCallback(
-      createAdapter(),
-      isCredentialsRequest,
-    );
+    const signInCallback = createSignInCallback(createAdapter(), isCredentialsRequest);
     const result = await signInCallback({
       user: { id: "1", emailVerified: new Date("2023-01-13") },
       account: {} as Account,
@@ -158,10 +143,7 @@ describe("createSignInCallback", () => {
 
   it("should return true if no user", async () => {
     const isCredentialsRequest = true;
-    const signInCallback = createSignInCallback(
-      createAdapter(),
-      isCredentialsRequest,
-    );
+    const signInCallback = createSignInCallback(createAdapter(), isCredentialsRequest);
     const result = await signInCallback({
       user: undefined as unknown as User,
       account: {} as Account,
@@ -195,16 +177,12 @@ describe("createSignInCallback", () => {
       userId: user.id,
       expires: mockSessionExpiry,
     });
-    expect(cookies().set).toHaveBeenCalledWith(
-      "next-auth.session-token",
-      mockSessionToken,
-      {
-        path: "/",
-        expires: mockSessionExpiry,
-        httpOnly: true,
-        sameSite: "lax",
-        secure: true,
-      },
-    );
+    expect(cookies().set).toHaveBeenCalledWith("next-auth.session-token", mockSessionToken, {
+      path: "/",
+      expires: mockSessionExpiry,
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+    });
   });
 });
diff --git a/packages/auth/test/session.spec.ts b/packages/auth/test/session.spec.ts
index 2d2ced596..27adfef2a 100644
--- a/packages/auth/test/session.spec.ts
+++ b/packages/auth/test/session.spec.ts
@@ -20,14 +20,11 @@ describe("expireDateAfter should calculate date after specified seconds", () =>
     ["2023-07-01T00:00:00Z", 60 * 60 * 24 * 30, "2023-07-31T00:00:00Z"], // 30 days
     ["2023-07-01T00:00:00Z", 60 * 60 * 24 * 365, "2024-06-30T00:00:00Z"], // 1 year
     ["2023-07-01T00:00:00Z", 60 * 60 * 24 * 365 * 10, "2033-06-28T00:00:00Z"], // 10 years
-  ])(
-    "should calculate date %s and after %i seconds to equal %s",
-    (initialDate, seconds, expectedDate) => {
-      vi.setSystemTime(new Date(initialDate));
-      const result = expireDateAfter(seconds);
-      expect(result).toEqual(new Date(expectedDate));
-    },
-  );
+  ])("should calculate date %s and after %i seconds to equal %s", (initialDate, seconds, expectedDate) => {
+    vi.setSystemTime(new Date(initialDate));
+    const result = expireDateAfter(seconds);
+    expect(result).toEqual(new Date(expectedDate));
+  });
 });
 
 describe("generateSessionToken should return a random UUID", () => {
diff --git a/packages/common/src/object.ts b/packages/common/src/object.ts
index 6bcb87a62..7e0ccde7f 100644
--- a/packages/common/src/object.ts
+++ b/packages/common/src/object.ts
@@ -6,5 +6,4 @@ type Entries<T> = {
   [K in keyof T]: [K, T[K]];
 }[keyof T][];
 
-export const objectEntries = <T extends object>(obj: T) =>
-  Object.entries(obj) as Entries<T>;
+export const objectEntries = <T extends object>(obj: T) => Object.entries(obj) as Entries<T>;
diff --git a/packages/common/src/test/object.spec.ts b/packages/common/src/test/object.spec.ts
index 02a1ed241..d99ebd7cf 100644
--- a/packages/common/src/test/object.spec.ts
+++ b/packages/common/src/test/object.spec.ts
@@ -2,12 +2,7 @@ import { describe, expect, it } from "vitest";
 
 import { objectEntries, objectKeys } from "../object";
 
-const testObjects = [
-  { a: 1, c: 3, b: 2 },
-  { a: 1, b: 2 },
-  { a: 1 },
-  {},
-] as const;
+const testObjects = [{ a: 1, c: 3, b: 2 }, { a: 1, b: 2 }, { a: 1 }, {}] as const;
 
 describe("objectKeys should return all keys of an object", () => {
   testObjects.forEach((obj) => {
diff --git a/packages/db/configs/mysql.config.ts.ts b/packages/db/configs/mysql.config.ts
similarity index 100%
rename from packages/db/configs/mysql.config.ts.ts
rename to packages/db/configs/mysql.config.ts
diff --git a/packages/db/driver.ts b/packages/db/driver.ts
index f705b91ac..2cea933ea 100644
--- a/packages/db/driver.ts
+++ b/packages/db/driver.ts
@@ -39,7 +39,7 @@ const initBetterSqlite = () => {
   database = drizzleSqlite(connection, {
     schema: sqliteSchema,
     logger: new WinstonDrizzleLogger(),
-  });
+  }) as unknown as never;
 };
 
 const initMySQL2 = () => {
diff --git a/packages/db/migrations/mysql/0001_wild_alex_wilder.sql b/packages/db/migrations/mysql/0001_wild_alex_wilder.sql
new file mode 100644
index 000000000..9c3c23f31
--- /dev/null
+++ b/packages/db/migrations/mysql/0001_wild_alex_wilder.sql
@@ -0,0 +1,2 @@
+ALTER TABLE `user` ADD `homeBoardId` varchar(64);--> statement-breakpoint
+ALTER TABLE `user` ADD CONSTRAINT `user_homeBoardId_board_id_fk` FOREIGN KEY (`homeBoardId`) REFERENCES `board`(`id`) ON DELETE set null ON UPDATE no action;
\ No newline at end of file
diff --git a/packages/db/migrations/mysql/0002_flimsy_deathbird.sql b/packages/db/migrations/mysql/0002_flimsy_deathbird.sql
new file mode 100644
index 000000000..57e15e767
--- /dev/null
+++ b/packages/db/migrations/mysql/0002_flimsy_deathbird.sql
@@ -0,0 +1 @@
+ALTER TABLE `item` ADD `advanced_options` text DEFAULT ('{"json": {}}') NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/mysql/0003_freezing_black_panther.sql b/packages/db/migrations/mysql/0003_freezing_black_panther.sql
new file mode 100644
index 000000000..b360ae7a0
--- /dev/null
+++ b/packages/db/migrations/mysql/0003_freezing_black_panther.sql
@@ -0,0 +1,6 @@
+CREATE TABLE `serverSetting` (
+	`key` varchar(64) NOT NULL,
+	`value` text NOT NULL DEFAULT ('{"json": {}}'),
+	CONSTRAINT `serverSetting_key` PRIMARY KEY(`key`),
+	CONSTRAINT `serverSetting_key_unique` UNIQUE(`key`)
+);
diff --git a/packages/db/migrations/mysql/meta/0001_snapshot.json b/packages/db/migrations/mysql/meta/0001_snapshot.json
new file mode 100644
index 000000000..1ba3799f4
--- /dev/null
+++ b/packages/db/migrations/mysql/meta/0001_snapshot.json
@@ -0,0 +1,1166 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "ba2dd885-4e7f-4a45-99a0-7b45cbd0a5c2",
+  "prevId": "fdeaf6eb-cd62-4fa5-9b38-d7f80a60db9f",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "name": "account_provider_providerAccountId_pk",
+          "columns": ["provider", "providerAccountId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "app_id": {
+          "name": "app_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('fixed')"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('no-repeat')"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('cover')"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fa5252')"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fd7e14')"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "board_id": {
+          "name": "board_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"]
+        }
+      }
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "name": "groupMember_groupId_userId_pk",
+          "columns": ["groupId", "userId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_iconRepository_id": {
+          "name": "iconRepository_iconRepository_id",
+          "columns": ["iconRepository_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_icon_id": {
+          "name": "icon_icon_id",
+          "columns": ["icon_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      }
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_id": {
+          "name": "section_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "session_sessionToken": {
+          "name": "session_sessionToken",
+          "columns": ["sessionToken"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_id": {
+          "name": "user_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/mysql/meta/0002_snapshot.json b/packages/db/migrations/mysql/meta/0002_snapshot.json
new file mode 100644
index 000000000..f098f20c9
--- /dev/null
+++ b/packages/db/migrations/mysql/meta/0002_snapshot.json
@@ -0,0 +1,1174 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "4e382d0d-a432-4953-bd5e-04f3f33e26a4",
+  "prevId": "fdeaf6eb-cd62-4fa5-9b38-d7f80a60db9f",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "name": "account_provider_providerAccountId_pk",
+          "columns": ["provider", "providerAccountId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "app_id": {
+          "name": "app_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('fixed')"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('no-repeat')"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('cover')"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fa5252')"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fd7e14')"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "board_id": {
+          "name": "board_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"]
+        }
+      }
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "name": "groupMember_groupId_userId_pk",
+          "columns": ["groupId", "userId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_iconRepository_id": {
+          "name": "iconRepository_iconRepository_id",
+          "columns": ["iconRepository_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_icon_id": {
+          "name": "icon_icon_id",
+          "columns": ["icon_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      }
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_id": {
+          "name": "section_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "session_sessionToken": {
+          "name": "session_sessionToken",
+          "columns": ["sessionToken"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_id": {
+          "name": "user_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/mysql/meta/0003_snapshot.json b/packages/db/migrations/mysql/meta/0003_snapshot.json
new file mode 100644
index 000000000..19b512ac9
--- /dev/null
+++ b/packages/db/migrations/mysql/meta/0003_snapshot.json
@@ -0,0 +1,1208 @@
+{
+  "version": "5",
+  "dialect": "mysql",
+  "id": "4e382d0d-a432-4953-bd5e-04f3f33e26a4",
+  "prevId": "e7a373e1-9f36-4910-9f2b-ac6fd5e79145",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "name": "account_provider_providerAccountId_pk",
+          "columns": ["provider", "providerAccountId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "app_id": {
+          "name": "app_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "name": "boardGroupPermission_board_id_group_id_permission_pk",
+          "columns": ["board_id", "group_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "name": "boardUserPermission_board_id_user_id_permission_pk",
+          "columns": ["board_id", "user_id", "permission"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(256)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('fixed')"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('no-repeat')"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('cover')"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fa5252')"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('#fd7e14')"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "board_id": {
+          "name": "board_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"]
+        }
+      }
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "name": "groupMember_groupId_userId_pk",
+          "columns": ["groupId", "userId"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "group_id": {
+          "name": "group_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "varchar(150)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "iconRepository_iconRepository_id": {
+          "name": "iconRepository_iconRepository_id",
+          "columns": ["iconRepository_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "varchar(250)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "icon_icon_id": {
+          "name": "icon_icon_id",
+          "columns": ["icon_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "name": "integration_item_item_id_integration_id_pk",
+          "columns": ["item_id", "integration_id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "varchar(16)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "name": "integrationSecret_integration_id_kind_pk",
+          "columns": ["integration_id", "kind"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "varchar(128)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "integration_id": {
+          "name": "integration_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "invite_id": {
+          "name": "invite_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"]
+        }
+      }
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "item_id": {
+          "name": "item_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "int",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "section_id": {
+          "name": "section_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "key": {
+          "name": "key",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "('{\"json\": {}}')"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "serverSetting_key": {
+          "name": "serverSetting_key",
+          "columns": ["key"]
+        }
+      },
+      "uniqueConstraints": {
+        "serverSetting_key_unique": {
+          "name": "serverSetting_key_unique",
+          "columns": ["key"]
+        }
+      }
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "session_sessionToken": {
+          "name": "session_sessionToken",
+          "columns": ["sessionToken"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_id": {
+          "name": "user_id",
+          "columns": ["id"]
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "varchar(64)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "varchar(512)",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "name": "verificationToken_identifier_token_pk",
+          "columns": ["identifier", "token"]
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/mysql/meta/_journal.json b/packages/db/migrations/mysql/meta/_journal.json
index 72ae1f1b7..bb349fd94 100644
--- a/packages/db/migrations/mysql/meta/_journal.json
+++ b/packages/db/migrations/mysql/meta/_journal.json
@@ -8,6 +8,27 @@
       "when": 1715334452118,
       "tag": "0000_harsh_photon",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "5",
+      "when": 1715885855801,
+      "tag": "0001_wild_alex_wilder",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "5",
+      "when": 1715980459023,
+      "tag": "0002_flimsy_deathbird",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "5",
+      "when": 1716148439439,
+      "tag": "0003_freezing_black_panther",
+      "breakpoints": true
     }
   ]
 }
diff --git a/packages/db/migrations/sqlite/0001_mixed_titanium_man.sql b/packages/db/migrations/sqlite/0001_mixed_titanium_man.sql
new file mode 100644
index 000000000..66b30f3e5
--- /dev/null
+++ b/packages/db/migrations/sqlite/0001_mixed_titanium_man.sql
@@ -0,0 +1,33 @@
+COMMIT TRANSACTION;
+--> statement-breakpoint
+PRAGMA foreign_keys = OFF;
+--> statement-breakpoint
+BEGIN TRANSACTION;
+--> statement-breakpoint
+ALTER TABLE `user` RENAME TO `__user_old`;
+--> statement-breakpoint
+CREATE TABLE `user` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text,
+	`email` text,
+	`emailVerified` integer,
+	`image` text,
+	`password` text,
+	`salt` text,
+    `homeBoardId` text,
+    FOREIGN KEY (`homeBoardId`) REFERENCES `board`(`id`) ON UPDATE no action ON DELETE set null
+);
+--> statement-breakpoint
+INSERT INTO `user` SELECT `id`, `name`, `email`, `emailVerified`, `image`, `password`, `salt`, null FROM `__user_old`;
+--> statement-breakpoint
+DROP TABLE `__user_old`;
+--> statement-breakpoint
+ALTER TABLE `user` RENAME TO `__user_old`;
+--> statement-breakpoint
+ALTER TABLE `__user_old` RENAME TO `user`;
+--> statement-breakpoint
+COMMIT TRANSACTION;
+--> statement-breakpoint
+PRAGMA foreign_keys = ON;
+--> statement-breakpoint
+BEGIN TRANSACTION;
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/0002_cooing_sumo.sql b/packages/db/migrations/sqlite/0002_cooing_sumo.sql
new file mode 100644
index 000000000..a12cdb821
--- /dev/null
+++ b/packages/db/migrations/sqlite/0002_cooing_sumo.sql
@@ -0,0 +1 @@
+ALTER TABLE `item` ADD `advanced_options` text DEFAULT '{"json": {}}' NOT NULL;
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/0003_adorable_raider.sql b/packages/db/migrations/sqlite/0003_adorable_raider.sql
new file mode 100644
index 000000000..af0219b7c
--- /dev/null
+++ b/packages/db/migrations/sqlite/0003_adorable_raider.sql
@@ -0,0 +1,6 @@
+CREATE TABLE `serverSetting` (
+	`key` text PRIMARY KEY NOT NULL,
+	`value` text DEFAULT '{"json": {}}' NOT NULL
+);
+--> statement-breakpoint
+CREATE UNIQUE INDEX `serverSetting_key_unique` ON `serverSetting` (`key`);
\ No newline at end of file
diff --git a/packages/db/migrations/sqlite/meta/0001_snapshot.json b/packages/db/migrations/sqlite/meta/0001_snapshot.json
new file mode 100644
index 000000000..e5b1558cf
--- /dev/null
+++ b/packages/db/migrations/sqlite/meta/0001_snapshot.json
@@ -0,0 +1,1114 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "2ed0ffc3-8612-42e7-bd8e-f5f8f3338a39",
+  "prevId": "0575873a-9e10-4480-8d7d-c47198622c22",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "columns": ["provider", "providerAccountId"],
+          "name": "account_provider_providerAccountId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "columns": ["board_id", "group_id", "permission"],
+          "name": "boardGroupPermission_board_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "columns": ["board_id", "permission", "user_id"],
+          "name": "boardUserPermission_board_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "columns": ["groupId", "userId"],
+          "name": "groupMember_groupId_userId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["integration_id", "item_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": ["identifier", "token"],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/sqlite/meta/0002_snapshot.json b/packages/db/migrations/sqlite/meta/0002_snapshot.json
new file mode 100644
index 000000000..885a5df37
--- /dev/null
+++ b/packages/db/migrations/sqlite/meta/0002_snapshot.json
@@ -0,0 +1,1122 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "5ad60251-8450-437d-9081-a456884120d2",
+  "prevId": "0575873a-9e10-4480-8d7d-c47198622c22",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "columns": ["provider", "providerAccountId"],
+          "name": "account_provider_providerAccountId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "columns": ["board_id", "group_id", "permission"],
+          "name": "boardGroupPermission_board_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "columns": ["board_id", "permission", "user_id"],
+          "name": "boardUserPermission_board_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "columns": ["groupId", "userId"],
+          "name": "groupMember_groupId_userId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["integration_id", "item_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": ["identifier", "token"],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/sqlite/meta/0003_snapshot.json b/packages/db/migrations/sqlite/meta/0003_snapshot.json
new file mode 100644
index 000000000..7324558d3
--- /dev/null
+++ b/packages/db/migrations/sqlite/meta/0003_snapshot.json
@@ -0,0 +1,1152 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "b72fe407-31bc-4dd0-8c36-dbb8e42ef708",
+  "prevId": "5ad60251-8450-437d-9081-a456884120d2",
+  "tables": {
+    "account": {
+      "name": "account",
+      "columns": {
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "provider": {
+          "name": "provider",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "providerAccountId": {
+          "name": "providerAccountId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "token_type": {
+          "name": "token_type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "session_state": {
+          "name": "session_state",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "userId_idx": {
+          "name": "userId_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "account_userId_user_id_fk": {
+          "name": "account_userId_user_id_fk",
+          "tableFrom": "account",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "account_provider_providerAccountId_pk": {
+          "columns": ["provider", "providerAccountId"],
+          "name": "account_provider_providerAccountId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "app": {
+      "name": "app",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "description": {
+          "name": "description",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "href": {
+          "name": "href",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "boardGroupPermission": {
+      "name": "boardGroupPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "group_id": {
+          "name": "group_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardGroupPermission_board_id_board_id_fk": {
+          "name": "boardGroupPermission_board_id_board_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardGroupPermission_group_id_group_id_fk": {
+          "name": "boardGroupPermission_group_id_group_id_fk",
+          "tableFrom": "boardGroupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["group_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardGroupPermission_board_id_group_id_permission_pk": {
+          "columns": ["board_id", "group_id", "permission"],
+          "name": "boardGroupPermission_board_id_group_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "boardUserPermission": {
+      "name": "boardUserPermission",
+      "columns": {
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "boardUserPermission_board_id_board_id_fk": {
+          "name": "boardUserPermission_board_id_board_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "boardUserPermission_user_id_user_id_fk": {
+          "name": "boardUserPermission_user_id_user_id_fk",
+          "tableFrom": "boardUserPermission",
+          "tableTo": "user",
+          "columnsFrom": ["user_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "boardUserPermission_board_id_user_id_permission_pk": {
+          "columns": ["board_id", "permission", "user_id"],
+          "name": "boardUserPermission_board_id_user_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "board": {
+      "name": "board",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "is_public": {
+          "name": "is_public",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "page_title": {
+          "name": "page_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "meta_title": {
+          "name": "meta_title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "logo_image_url": {
+          "name": "logo_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "favicon_image_url": {
+          "name": "favicon_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_url": {
+          "name": "background_image_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "background_image_attachment": {
+          "name": "background_image_attachment",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'fixed'"
+        },
+        "background_image_repeat": {
+          "name": "background_image_repeat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'no-repeat'"
+        },
+        "background_image_size": {
+          "name": "background_image_size",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'cover'"
+        },
+        "primary_color": {
+          "name": "primary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fa5252'"
+        },
+        "secondary_color": {
+          "name": "secondary_color",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'#fd7e14'"
+        },
+        "opacity": {
+          "name": "opacity",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 100
+        },
+        "custom_css": {
+          "name": "custom_css",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "column_count": {
+          "name": "column_count",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 10
+        }
+      },
+      "indexes": {
+        "board_name_unique": {
+          "name": "board_name_unique",
+          "columns": ["name"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "board_creator_id_user_id_fk": {
+          "name": "board_creator_id_user_id_fk",
+          "tableFrom": "board",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "groupMember": {
+      "name": "groupMember",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupMember_groupId_group_id_fk": {
+          "name": "groupMember_groupId_group_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "groupMember_userId_user_id_fk": {
+          "name": "groupMember_userId_user_id_fk",
+          "tableFrom": "groupMember",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "groupMember_groupId_userId_pk": {
+          "columns": ["groupId", "userId"],
+          "name": "groupMember_groupId_userId_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "groupPermission": {
+      "name": "groupPermission",
+      "columns": {
+        "groupId": {
+          "name": "groupId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "groupPermission_groupId_group_id_fk": {
+          "name": "groupPermission_groupId_group_id_fk",
+          "tableFrom": "groupPermission",
+          "tableTo": "group",
+          "columnsFrom": ["groupId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "group": {
+      "name": "group",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner_id": {
+          "name": "owner_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "group_owner_id_user_id_fk": {
+          "name": "group_owner_id_user_id_fk",
+          "tableFrom": "group",
+          "tableTo": "user",
+          "columnsFrom": ["owner_id"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "iconRepository": {
+      "name": "iconRepository",
+      "columns": {
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_slug": {
+          "name": "iconRepository_slug",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "icon": {
+      "name": "icon",
+      "columns": {
+        "icon_id": {
+          "name": "icon_id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_name": {
+          "name": "icon_name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_url": {
+          "name": "icon_url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "icon_checksum": {
+          "name": "icon_checksum",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "iconRepository_id": {
+          "name": "iconRepository_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "icon_iconRepository_id_iconRepository_iconRepository_id_fk": {
+          "name": "icon_iconRepository_id_iconRepository_iconRepository_id_fk",
+          "tableFrom": "icon",
+          "tableTo": "iconRepository",
+          "columnsFrom": ["iconRepository_id"],
+          "columnsTo": ["iconRepository_id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "integration_item": {
+      "name": "integration_item",
+      "columns": {
+        "item_id": {
+          "name": "item_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "integration_item_item_id_item_id_fk": {
+          "name": "integration_item_item_id_item_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "item",
+          "columnsFrom": ["item_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        },
+        "integration_item_integration_id_integration_id_fk": {
+          "name": "integration_item_integration_id_integration_id_fk",
+          "tableFrom": "integration_item",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integration_item_item_id_integration_id_pk": {
+          "columns": ["integration_id", "item_id"],
+          "name": "integration_item_item_id_integration_id_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integrationSecret": {
+      "name": "integrationSecret",
+      "columns": {
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "integration_id": {
+          "name": "integration_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration_secret__kind_idx": {
+          "name": "integration_secret__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        },
+        "integration_secret__updated_at_idx": {
+          "name": "integration_secret__updated_at_idx",
+          "columns": ["updated_at"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "integrationSecret_integration_id_integration_id_fk": {
+          "name": "integrationSecret_integration_id_integration_id_fk",
+          "tableFrom": "integrationSecret",
+          "tableTo": "integration",
+          "columnsFrom": ["integration_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "integrationSecret_integration_id_kind_pk": {
+          "columns": ["integration_id", "kind"],
+          "name": "integrationSecret_integration_id_kind_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    },
+    "integration": {
+      "name": "integration",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "url": {
+          "name": "url",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "integration__kind_idx": {
+          "name": "integration__kind_idx",
+          "columns": ["kind"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "invite": {
+      "name": "invite",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expiration_date": {
+          "name": "expiration_date",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "creator_id": {
+          "name": "creator_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "invite_token_unique": {
+          "name": "invite_token_unique",
+          "columns": ["token"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {
+        "invite_creator_id_user_id_fk": {
+          "name": "invite_creator_id_user_id_fk",
+          "tableFrom": "invite",
+          "tableTo": "user",
+          "columnsFrom": ["creator_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "item": {
+      "name": "item",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "section_id": {
+          "name": "section_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "x_offset": {
+          "name": "x_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "y_offset": {
+          "name": "y_offset",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "width": {
+          "name": "width",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "height": {
+          "name": "height",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        },
+        "advanced_options": {
+          "name": "advanced_options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "item_section_id_section_id_fk": {
+          "name": "item_section_id_section_id_fk",
+          "tableFrom": "item",
+          "tableTo": "section",
+          "columnsFrom": ["section_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "section": {
+      "name": "section",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "board_id": {
+          "name": "board_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "kind": {
+          "name": "kind",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "position": {
+          "name": "position",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "section_board_id_board_id_fk": {
+          "name": "section_board_id_board_id_fk",
+          "tableFrom": "section",
+          "tableTo": "board",
+          "columnsFrom": ["board_id"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "serverSetting": {
+      "name": "serverSetting",
+      "columns": {
+        "key": {
+          "name": "key",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{\"json\": {}}'"
+        }
+      },
+      "indexes": {
+        "serverSetting_key_unique": {
+          "name": "serverSetting_key_unique",
+          "columns": ["key"],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "session": {
+      "name": "session",
+      "columns": {
+        "sessionToken": {
+          "name": "sessionToken",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "userId": {
+          "name": "userId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {
+        "user_id_idx": {
+          "name": "user_id_idx",
+          "columns": ["userId"],
+          "isUnique": false
+        }
+      },
+      "foreignKeys": {
+        "session_userId_user_id_fk": {
+          "name": "session_userId_user_id_fk",
+          "tableFrom": "session",
+          "tableTo": "user",
+          "columnsFrom": ["userId"],
+          "columnsTo": ["id"],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "user": {
+      "name": "user",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "emailVerified": {
+          "name": "emailVerified",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "salt": {
+          "name": "salt",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "homeBoardId": {
+          "name": "homeBoardId",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_homeBoardId_board_id_fk": {
+          "name": "user_homeBoardId_board_id_fk",
+          "tableFrom": "user",
+          "tableTo": "board",
+          "columnsFrom": ["homeBoardId"],
+          "columnsTo": ["id"],
+          "onDelete": "set null",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "verificationToken": {
+      "name": "verificationToken",
+      "columns": {
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "expires": {
+          "name": "expires",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {
+        "verificationToken_identifier_token_pk": {
+          "columns": ["identifier", "token"],
+          "name": "verificationToken_identifier_token_pk"
+        }
+      },
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  }
+}
diff --git a/packages/db/migrations/sqlite/meta/_journal.json b/packages/db/migrations/sqlite/meta/_journal.json
index 8b44adc89..5d9bc2d12 100644
--- a/packages/db/migrations/sqlite/meta/_journal.json
+++ b/packages/db/migrations/sqlite/meta/_journal.json
@@ -8,6 +8,27 @@
       "when": 1715334238443,
       "tag": "0000_talented_ben_parker",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "6",
+      "when": 1715871797713,
+      "tag": "0001_mixed_titanium_man",
+      "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "6",
+      "when": 1715973963014,
+      "tag": "0002_cooing_sumo",
+      "breakpoints": true
+    },
+    {
+      "idx": 3,
+      "version": "6",
+      "when": 1716148434186,
+      "tag": "0003_adorable_raider",
+      "breakpoints": true
     }
   ]
 }
diff --git a/packages/db/schema/mysql.ts b/packages/db/schema/mysql.ts
index 3af3111fc..d53a9ec30 100644
--- a/packages/db/schema/mysql.ts
+++ b/packages/db/schema/mysql.ts
@@ -1,15 +1,7 @@
 import type { AdapterAccount } from "@auth/core/adapters";
 import { relations } from "drizzle-orm";
-import {
-  boolean,
-  index,
-  int,
-  mysqlTable,
-  primaryKey,
-  text,
-  timestamp,
-  varchar,
-} from "drizzle-orm/mysql-core";
+import type { AnyMySqlColumn } from "drizzle-orm/mysql-core";
+import { boolean, index, int, mysqlTable, primaryKey, text, timestamp, varchar } from "drizzle-orm/mysql-core";
 
 import type {
   BackgroundImageAttachment,
@@ -22,11 +14,7 @@ import type {
   SectionKind,
   WidgetKind,
 } from "@homarr/definitions";
-import {
-  backgroundImageAttachments,
-  backgroundImageRepeats,
-  backgroundImageSizes,
-} from "@homarr/definitions";
+import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
 
 export const users = mysqlTable("user", {
   id: varchar("id", { length: 64 }).notNull().primaryKey(),
@@ -36,6 +24,9 @@ export const users = mysqlTable("user", {
   image: text("image"),
   password: text("password"),
   salt: text("salt"),
+  homeBoardId: varchar("homeBoardId", { length: 64 }).references((): AnyMySqlColumn => boards.id, {
+    onDelete: "set null",
+  }),
 });
 
 export const accounts = mysqlTable(
@@ -66,9 +57,7 @@ export const accounts = mysqlTable(
 export const sessions = mysqlTable(
   "session",
   {
-    sessionToken: varchar("sessionToken", { length: 512 })
-      .notNull()
-      .primaryKey(),
+    sessionToken: varchar("sessionToken", { length: 512 }).notNull().primaryKey(),
     userId: varchar("userId", { length: 64 })
       .notNull()
       .references(() => users.id, { onDelete: "cascade" }),
@@ -150,9 +139,7 @@ export const integrations = mysqlTable(
 export const integrationSecrets = mysqlTable(
   "integrationSecret",
   {
-    kind: varchar("kind", { length: 16 })
-      .$type<IntegrationSecretKind>()
-      .notNull(),
+    kind: varchar("kind", { length: 16 }).$type<IntegrationSecretKind>().notNull(),
     value: text("value").$type<`${string}.${string}`>().notNull(),
     updatedAt: timestamp("updated_at").notNull(),
     integrationId: varchar("integration_id", { length: 64 })
@@ -164,9 +151,7 @@ export const integrationSecrets = mysqlTable(
       columns: [integrationSecret.integrationId, integrationSecret.kind],
     }),
     kindIdx: index("integration_secret__kind_idx").on(integrationSecret.kind),
-    updatedAtIdx: index("integration_secret__updated_at_idx").on(
-      integrationSecret.updatedAt,
-    ),
+    updatedAtIdx: index("integration_secret__updated_at_idx").on(integrationSecret.updatedAt),
   }),
 );
 
@@ -210,9 +195,7 @@ export const boardUserPermissions = mysqlTable(
     userId: varchar("user_id", { length: 64 })
       .notNull()
       .references(() => users.id, { onDelete: "cascade" }),
-    permission: varchar("permission", { length: 128 })
-      .$type<BoardPermission>()
-      .notNull(),
+    permission: varchar("permission", { length: 128 }).$type<BoardPermission>().notNull(),
   },
   (table) => ({
     compoundKey: primaryKey({
@@ -230,9 +213,7 @@ export const boardGroupPermissions = mysqlTable(
     groupId: varchar("group_id", { length: 64 })
       .notNull()
       .references(() => groups.id, { onDelete: "cascade" }),
-    permission: varchar("permission", { length: 128 })
-      .$type<BoardPermission>()
-      .notNull(),
+    permission: varchar("permission", { length: 128 }).$type<BoardPermission>().notNull(),
   },
   (table) => ({
     compoundKey: primaryKey({
@@ -262,6 +243,7 @@ export const items = mysqlTable("item", {
   width: int("width").notNull(),
   height: int("height").notNull(),
   options: text("options").default('{"json": {}}').notNull(), // empty superjson object
+  advancedOptions: text("advanced_options").default('{"json": {}}').notNull(), // empty superjson object
 });
 
 export const apps = mysqlTable("app", {
@@ -304,6 +286,11 @@ export const iconRepositories = mysqlTable("iconRepository", {
   slug: varchar("iconRepository_slug", { length: 150 }).notNull(),
 });
 
+export const serverSettings = mysqlTable("serverSetting", {
+  settingKey: varchar("key", { length: 64 }).notNull().unique().primaryKey(),
+  value: text("value").default('{"json": {}}').notNull(), // empty superjson object
+});
+
 export const accountRelations = relations(accounts, ({ one }) => ({
   user: one(users, {
     fields: [accounts.userId],
@@ -327,12 +314,9 @@ export const iconRelations = relations(icons, ({ one }) => ({
   }),
 }));
 
-export const iconRepositoryRelations = relations(
-  iconRepositories,
-  ({ many }) => ({
-    icons: many(icons),
-  }),
-);
+export const iconRepositoryRelations = relations(iconRepositories, ({ many }) => ({
+  icons: many(icons),
+}));
 
 export const inviteRelations = relations(invites, ({ one }) => ({
   creator: one(users, {
@@ -369,58 +353,46 @@ export const groupRelations = relations(groups, ({ one, many }) => ({
   }),
 }));
 
-export const groupPermissionRelations = relations(
-  groupPermissions,
-  ({ one }) => ({
-    group: one(groups, {
-      fields: [groupPermissions.groupId],
-      references: [groups.id],
-    }),
+export const groupPermissionRelations = relations(groupPermissions, ({ one }) => ({
+  group: one(groups, {
+    fields: [groupPermissions.groupId],
+    references: [groups.id],
   }),
-);
+}));
 
-export const boardUserPermissionRelations = relations(
-  boardUserPermissions,
-  ({ one }) => ({
-    user: one(users, {
-      fields: [boardUserPermissions.userId],
-      references: [users.id],
-    }),
-    board: one(boards, {
-      fields: [boardUserPermissions.boardId],
-      references: [boards.id],
-    }),
+export const boardUserPermissionRelations = relations(boardUserPermissions, ({ one }) => ({
+  user: one(users, {
+    fields: [boardUserPermissions.userId],
+    references: [users.id],
   }),
-);
+  board: one(boards, {
+    fields: [boardUserPermissions.boardId],
+    references: [boards.id],
+  }),
+}));
 
-export const boardGroupPermissionRelations = relations(
-  boardGroupPermissions,
-  ({ one }) => ({
-    group: one(groups, {
-      fields: [boardGroupPermissions.groupId],
-      references: [groups.id],
-    }),
-    board: one(boards, {
-      fields: [boardGroupPermissions.boardId],
-      references: [boards.id],
-    }),
+export const boardGroupPermissionRelations = relations(boardGroupPermissions, ({ one }) => ({
+  group: one(groups, {
+    fields: [boardGroupPermissions.groupId],
+    references: [groups.id],
   }),
-);
+  board: one(boards, {
+    fields: [boardGroupPermissions.boardId],
+    references: [boards.id],
+  }),
+}));
 
 export const integrationRelations = relations(integrations, ({ many }) => ({
   secrets: many(integrationSecrets),
   items: many(integrationItems),
 }));
 
-export const integrationSecretRelations = relations(
-  integrationSecrets,
-  ({ one }) => ({
-    integration: one(integrations, {
-      fields: [integrationSecrets.integrationId],
-      references: [integrations.id],
-    }),
+export const integrationSecretRelations = relations(integrationSecrets, ({ one }) => ({
+  integration: one(integrations, {
+    fields: [integrationSecrets.integrationId],
+    references: [integrations.id],
   }),
-);
+}));
 
 export const boardRelations = relations(boards, ({ many, one }) => ({
   sections: many(sections),
@@ -448,16 +420,13 @@ export const itemRelations = relations(items, ({ one, many }) => ({
   integrations: many(integrationItems),
 }));
 
-export const integrationItemRelations = relations(
-  integrationItems,
-  ({ one }) => ({
-    integration: one(integrations, {
-      fields: [integrationItems.integrationId],
-      references: [integrations.id],
-    }),
-    item: one(items, {
-      fields: [integrationItems.itemId],
-      references: [items.id],
-    }),
+export const integrationItemRelations = relations(integrationItems, ({ one }) => ({
+  integration: one(integrations, {
+    fields: [integrationItems.integrationId],
+    references: [integrations.id],
   }),
-);
+  item: one(items, {
+    fields: [integrationItems.itemId],
+    references: [items.id],
+  }),
+}));
diff --git a/packages/db/schema/sqlite.ts b/packages/db/schema/sqlite.ts
index a8ed08889..f7c3c87e5 100644
--- a/packages/db/schema/sqlite.ts
+++ b/packages/db/schema/sqlite.ts
@@ -1,20 +1,10 @@
 import type { AdapterAccount } from "@auth/core/adapters";
 import type { InferSelectModel } from "drizzle-orm";
 import { relations } from "drizzle-orm";
-import {
-  index,
-  int,
-  integer,
-  primaryKey,
-  sqliteTable,
-  text,
-} from "drizzle-orm/sqlite-core";
+import type { AnySQLiteColumn } from "drizzle-orm/sqlite-core";
+import { index, int, integer, primaryKey, sqliteTable, text } from "drizzle-orm/sqlite-core";
 
-import {
-  backgroundImageAttachments,
-  backgroundImageRepeats,
-  backgroundImageSizes,
-} from "@homarr/definitions";
+import { backgroundImageAttachments, backgroundImageRepeats, backgroundImageSizes } from "@homarr/definitions";
 import type {
   BackgroundImageAttachment,
   BackgroundImageRepeat,
@@ -35,6 +25,9 @@ export const users = sqliteTable("user", {
   image: text("image"),
   password: text("password"),
   salt: text("salt"),
+  homeBoardId: text("homeBoardId").references((): AnySQLiteColumn => boards.id, {
+    onDelete: "set null",
+  }),
 });
 
 export const accounts = sqliteTable(
@@ -161,9 +154,7 @@ export const integrationSecrets = sqliteTable(
       columns: [integrationSecret.integrationId, integrationSecret.kind],
     }),
     kindIdx: index("integration_secret__kind_idx").on(integrationSecret.kind),
-    updatedAtIdx: index("integration_secret__updated_at_idx").on(
-      integrationSecret.updatedAt,
-    ),
+    updatedAtIdx: index("integration_secret__updated_at_idx").on(integrationSecret.updatedAt),
   }),
 );
 
@@ -255,6 +246,7 @@ export const items = sqliteTable("item", {
   width: int("width").notNull(),
   height: int("height").notNull(),
   options: text("options").default('{"json": {}}').notNull(), // empty superjson object
+  advancedOptions: text("advanced_options").default('{"json": {}}').notNull(), // empty superjson object
 });
 
 export const apps = sqliteTable("app", {
@@ -297,6 +289,11 @@ export const iconRepositories = sqliteTable("iconRepository", {
   slug: text("iconRepository_slug").notNull(),
 });
 
+export const serverSettings = sqliteTable("serverSetting", {
+  settingKey: text("key").notNull().unique().primaryKey(),
+  value: text("value").default('{"json": {}}').notNull(), // empty superjson object
+});
+
 export const accountRelations = relations(accounts, ({ one }) => ({
   user: one(users, {
     fields: [accounts.userId],
@@ -320,12 +317,9 @@ export const iconRelations = relations(icons, ({ one }) => ({
   }),
 }));
 
-export const iconRepositoryRelations = relations(
-  iconRepositories,
-  ({ many }) => ({
-    icons: many(icons),
-  }),
-);
+export const iconRepositoryRelations = relations(iconRepositories, ({ many }) => ({
+  icons: many(icons),
+}));
 
 export const inviteRelations = relations(invites, ({ one }) => ({
   creator: one(users, {
@@ -362,58 +356,46 @@ export const groupRelations = relations(groups, ({ one, many }) => ({
   }),
 }));
 
-export const groupPermissionRelations = relations(
-  groupPermissions,
-  ({ one }) => ({
-    group: one(groups, {
-      fields: [groupPermissions.groupId],
-      references: [groups.id],
-    }),
+export const groupPermissionRelations = relations(groupPermissions, ({ one }) => ({
+  group: one(groups, {
+    fields: [groupPermissions.groupId],
+    references: [groups.id],
   }),
-);
+}));
 
-export const boardUserPermissionRelations = relations(
-  boardUserPermissions,
-  ({ one }) => ({
-    user: one(users, {
-      fields: [boardUserPermissions.userId],
-      references: [users.id],
-    }),
-    board: one(boards, {
-      fields: [boardUserPermissions.boardId],
-      references: [boards.id],
-    }),
+export const boardUserPermissionRelations = relations(boardUserPermissions, ({ one }) => ({
+  user: one(users, {
+    fields: [boardUserPermissions.userId],
+    references: [users.id],
   }),
-);
+  board: one(boards, {
+    fields: [boardUserPermissions.boardId],
+    references: [boards.id],
+  }),
+}));
 
-export const boardGroupPermissionRelations = relations(
-  boardGroupPermissions,
-  ({ one }) => ({
-    group: one(groups, {
-      fields: [boardGroupPermissions.groupId],
-      references: [groups.id],
-    }),
-    board: one(boards, {
-      fields: [boardGroupPermissions.boardId],
-      references: [boards.id],
-    }),
+export const boardGroupPermissionRelations = relations(boardGroupPermissions, ({ one }) => ({
+  group: one(groups, {
+    fields: [boardGroupPermissions.groupId],
+    references: [groups.id],
   }),
-);
+  board: one(boards, {
+    fields: [boardGroupPermissions.boardId],
+    references: [boards.id],
+  }),
+}));
 
 export const integrationRelations = relations(integrations, ({ many }) => ({
   secrets: many(integrationSecrets),
   items: many(integrationItems),
 }));
 
-export const integrationSecretRelations = relations(
-  integrationSecrets,
-  ({ one }) => ({
-    integration: one(integrations, {
-      fields: [integrationSecrets.integrationId],
-      references: [integrations.id],
-    }),
+export const integrationSecretRelations = relations(integrationSecrets, ({ one }) => ({
+  integration: one(integrations, {
+    fields: [integrationSecrets.integrationId],
+    references: [integrations.id],
   }),
-);
+}));
 
 export const boardRelations = relations(boards, ({ many, one }) => ({
   sections: many(sections),
@@ -441,19 +423,16 @@ export const itemRelations = relations(items, ({ one, many }) => ({
   integrations: many(integrationItems),
 }));
 
-export const integrationItemRelations = relations(
-  integrationItems,
-  ({ one }) => ({
-    integration: one(integrations, {
-      fields: [integrationItems.integrationId],
-      references: [integrations.id],
-    }),
-    item: one(items, {
-      fields: [integrationItems.itemId],
-      references: [items.id],
-    }),
+export const integrationItemRelations = relations(integrationItems, ({ one }) => ({
+  integration: one(integrations, {
+    fields: [integrationItems.integrationId],
+    references: [integrations.id],
   }),
-);
+  item: one(items, {
+    fields: [integrationItems.itemId],
+    references: [items.id],
+  }),
+}));
 
 export type User = InferSelectModel<typeof users>;
 export type Account = InferSelectModel<typeof accounts>;
diff --git a/packages/db/test/db-mock.ts b/packages/db/test/db-mock.ts
index db4c15978..d2befdfb9 100644
--- a/packages/db/test/db-mock.ts
+++ b/packages/db/test/db-mock.ts
@@ -4,11 +4,16 @@ import { migrate } from "drizzle-orm/better-sqlite3/migrator";
 
 import { schema } from "..";
 
-export const createDb = () => {
+export const createDb = (debug?: boolean) => {
   const sqlite = new Database(":memory:");
-  const db = drizzle(sqlite, { schema });
+  const db = drizzle(sqlite, { schema, logger: debug });
   migrate(db, {
     migrationsFolder: "./packages/db/migrations/sqlite",
   });
+
+  if (debug) {
+    console.log("Database created");
+  }
+
   return db;
 };
diff --git a/packages/db/test/schema.spec.ts b/packages/db/test/schema.spec.ts
index cbce0f745..78b8363e2 100644
--- a/packages/db/test/schema.spec.ts
+++ b/packages/db/test/schema.spec.ts
@@ -1,12 +1,6 @@
 import type { Column, InferSelectModel } from "drizzle-orm";
-import type {
-  ForeignKey as MysqlForeignKey,
-  MySqlTableWithColumns,
-} from "drizzle-orm/mysql-core";
-import type {
-  ForeignKey as SqliteForeignKey,
-  SQLiteTableWithColumns,
-} from "drizzle-orm/sqlite-core";
+import type { ForeignKey as MysqlForeignKey, MySqlTableWithColumns } from "drizzle-orm/mysql-core";
+import type { ForeignKey as SqliteForeignKey, SQLiteTableWithColumns } from "drizzle-orm/sqlite-core";
 import { expect, expectTypeOf, test } from "vitest";
 
 import { objectEntries } from "@homarr/common";
@@ -21,54 +15,44 @@ test("schemas should match", () => {
   expectTypeOf<MysqlConfig>().toEqualTypeOf<SqliteConfig>();
 
   objectEntries(sqliteSchema).forEach(([tableName, sqliteTable]) => {
-    Object.entries(sqliteTable).forEach(
-      ([columnName, sqliteColumn]: [string, object]) => {
-        if (!("isUnique" in sqliteColumn)) return;
-        if (!("uniqueName" in sqliteColumn)) return;
-        if (!("primary" in sqliteColumn)) return;
+    Object.entries(sqliteTable).forEach(([columnName, sqliteColumn]: [string, object]) => {
+      if (!("isUnique" in sqliteColumn)) return;
+      if (!("uniqueName" in sqliteColumn)) return;
+      if (!("primary" in sqliteColumn)) return;
 
-        const mysqlTable = mysqlSchema[tableName];
+      const mysqlTable = mysqlSchema[tableName];
 
-        const mysqlColumn = mysqlTable[
-          columnName as keyof typeof mysqlTable
-        ] as object;
-        if (!("isUnique" in mysqlColumn)) return;
-        if (!("uniqueName" in mysqlColumn)) return;
-        if (!("primary" in mysqlColumn)) return;
+      const mysqlColumn = mysqlTable[columnName as keyof typeof mysqlTable] as object;
+      if (!("isUnique" in mysqlColumn)) return;
+      if (!("uniqueName" in mysqlColumn)) return;
+      if (!("primary" in mysqlColumn)) return;
 
-        expect(
-          sqliteColumn.isUnique,
-          `expect unique of column ${columnName} in table ${tableName} to be the same for both schemas`,
-        ).toEqual(mysqlColumn.isUnique);
-        expect(
-          sqliteColumn.uniqueName,
-          `expect uniqueName of column ${columnName} in table ${tableName} to be the same for both schemas`,
-        ).toEqual(mysqlColumn.uniqueName);
-        expect(
-          sqliteColumn.primary,
-          `expect primary of column ${columnName} in table ${tableName} to be the same for both schemas`,
-        ).toEqual(mysqlColumn.primary);
-      },
-    );
+      expect(
+        sqliteColumn.isUnique,
+        `expect unique of column ${columnName} in table ${tableName} to be the same for both schemas`,
+      ).toEqual(mysqlColumn.isUnique);
+      expect(
+        sqliteColumn.uniqueName,
+        `expect uniqueName of column ${columnName} in table ${tableName} to be the same for both schemas`,
+      ).toEqual(mysqlColumn.uniqueName);
+      expect(
+        sqliteColumn.primary,
+        `expect primary of column ${columnName} in table ${tableName} to be the same for both schemas`,
+      ).toEqual(mysqlColumn.primary);
+    });
 
     const mysqlTable = mysqlSchema[tableName];
-    const sqliteForeignKeys = sqliteTable[
-      Symbol.for("drizzle:SQLiteInlineForeignKeys") as keyof typeof sqliteTable
-    ] as SqliteForeignKey[] | undefined;
-    const mysqlForeignKeys = mysqlTable[
-      Symbol.for("drizzle:MySqlInlineForeignKeys") as keyof typeof mysqlTable
-    ] as MysqlForeignKey[] | undefined;
+    const sqliteForeignKeys = sqliteTable[Symbol.for("drizzle:SQLiteInlineForeignKeys") as keyof typeof sqliteTable] as
+      | SqliteForeignKey[]
+      | undefined;
+    const mysqlForeignKeys = mysqlTable[Symbol.for("drizzle:MySqlInlineForeignKeys") as keyof typeof mysqlTable] as
+      | MysqlForeignKey[]
+      | undefined;
 
     if (!sqliteForeignKeys && !mysqlForeignKeys) return;
 
-    expect(
-      mysqlForeignKeys,
-      `mysql foreign key for ${tableName} to be defined`,
-    ).toBeDefined();
-    expect(
-      sqliteForeignKeys,
-      `sqlite foreign key for ${tableName} to be defined`,
-    ).toBeDefined();
+    expect(mysqlForeignKeys, `mysql foreign key for ${tableName} to be defined`).toBeDefined();
+    expect(sqliteForeignKeys, `sqlite foreign key for ${tableName} to be defined`).toBeDefined();
 
     expect(
       sqliteForeignKeys!.length,
@@ -77,9 +61,7 @@ test("schemas should match", () => {
 
     sqliteForeignKeys?.forEach((sqliteForeignKey) => {
       sqliteForeignKey.getName();
-      const mysqlForeignKey = mysqlForeignKeys!.find(
-        (key) => key.getName() === sqliteForeignKey.getName(),
-      );
+      const mysqlForeignKey = mysqlForeignKeys!.find((key) => key.getName() === sqliteForeignKey.getName());
       expect(
         mysqlForeignKey,
         `expect foreign key ${sqliteForeignKey.getName()} to be defined in mysql schema`,
@@ -97,9 +79,7 @@ test("schemas should match", () => {
 
       sqliteForeignKey.reference().foreignColumns.forEach((column) => {
         expect(
-          mysqlForeignKey!
-            .reference()
-            .foreignColumns.map((column) => column.name),
+          mysqlForeignKey!.reference().foreignColumns.map((column) => column.name),
           `expect foreign key (${sqliteForeignKey.getName()}) columns to be the same for both schemas`,
         ).toContainEqual(column.name);
       });
@@ -127,9 +107,7 @@ type MysqlTables = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type InferColumnConfig<T extends Column<any, object>> =
-  T extends Column<infer C, object>
-    ? Omit<C, "columnType" | "enumValues" | "driverParam">
-    : never;
+  T extends Column<infer C, object> ? Omit<C, "columnType" | "enumValues" | "driverParam"> : never;
 
 type SqliteConfig = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/packages/definitions/src/_definition.ts b/packages/definitions/src/_definition.ts
index 41c63f4c8..a99ecb382 100644
--- a/packages/definitions/src/_definition.ts
+++ b/packages/definitions/src/_definition.ts
@@ -1,7 +1,4 @@
-export const createDefinition = <
-  const TKeys extends string[],
-  TOptions extends { defaultValue: TKeys[number] } | void,
->(
+export const createDefinition = <const TKeys extends string[], TOptions extends { defaultValue: TKeys[number] } | void>(
   values: TKeys,
   options: TOptions,
 ) => ({
diff --git a/packages/definitions/src/board.ts b/packages/definitions/src/board.ts
index e27490a59..302008550 100644
--- a/packages/definitions/src/board.ts
+++ b/packages/definitions/src/board.ts
@@ -1,24 +1,14 @@
 import type { inferDefinitionType } from "./_definition";
 import { createDefinition } from "./_definition";
 
-export const backgroundImageAttachments = createDefinition(
-  ["fixed", "scroll"],
-  { defaultValue: "fixed" },
-);
-export const backgroundImageRepeats = createDefinition(
-  ["repeat", "repeat-x", "repeat-y", "no-repeat"],
-  { defaultValue: "no-repeat" },
-);
+export const backgroundImageAttachments = createDefinition(["fixed", "scroll"], { defaultValue: "fixed" });
+export const backgroundImageRepeats = createDefinition(["repeat", "repeat-x", "repeat-y", "no-repeat"], {
+  defaultValue: "no-repeat",
+});
 export const backgroundImageSizes = createDefinition(["cover", "contain"], {
   defaultValue: "cover",
 });
 
-export type BackgroundImageAttachment = inferDefinitionType<
-  typeof backgroundImageAttachments
->;
-export type BackgroundImageRepeat = inferDefinitionType<
-  typeof backgroundImageRepeats
->;
-export type BackgroundImageSize = inferDefinitionType<
-  typeof backgroundImageSizes
->;
+export type BackgroundImageAttachment = inferDefinitionType<typeof backgroundImageAttachments>;
+export type BackgroundImageRepeat = inferDefinitionType<typeof backgroundImageRepeats>;
+export type BackgroundImageSize = inferDefinitionType<typeof backgroundImageSizes>;
diff --git a/packages/definitions/src/integration.ts b/packages/definitions/src/integration.ts
index 6f2b5c58f..3f5650af4 100644
--- a/packages/definitions/src/integration.ts
+++ b/packages/definitions/src/integration.ts
@@ -12,113 +12,97 @@ export const integrationDefs = {
   sabNzbd: {
     name: "SABnzbd",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/sabnzbd.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/sabnzbd.png",
     category: ["useNetClient"],
   },
   nzbGet: {
     name: "NZBGet",
     secretKinds: [["username", "password"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/nzbget.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/nzbget.png",
     category: ["useNetClient"],
   },
   deluge: {
     name: "Deluge",
     secretKinds: [["password"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/deluge.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/deluge.png",
     category: ["downloadClient"],
   },
   transmission: {
     name: "Transmission",
     secretKinds: [["username", "password"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/transmission.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/transmission.png",
     category: ["downloadClient"],
   },
   qBittorrent: {
     name: "qBittorrent",
     secretKinds: [["username", "password"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/qbittorrent.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/qbittorrent.png",
     category: ["downloadClient"],
   },
   sonarr: {
     name: "Sonarr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/sonarr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/sonarr.png",
     category: ["calendar"],
   },
   radarr: {
     name: "Radarr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/radarr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/radarr.png",
     category: ["calendar"],
   },
   lidarr: {
     name: "Lidarr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/lidarr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/lidarr.png",
     category: ["calendar"],
   },
   readarr: {
     name: "Readarr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/readarr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/readarr.png",
     category: ["calendar"],
   },
   jellyfin: {
     name: "Jellyfin",
     secretKinds: [["username", "password"], ["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/jellyfin.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/jellyfin.png",
     category: ["mediaService"],
   },
   plex: {
     name: "Plex",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/plex.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/plex.png",
     category: ["mediaService"],
   },
   jellyseerr: {
     name: "Jellyseerr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/jellyseerr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/jellyseerr.png",
     category: ["mediaSearch", "mediaRequest"],
   },
   overseerr: {
     name: "Overseerr",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/overseerr.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/overseerr.png",
     category: ["mediaSearch", "mediaRequest"],
   },
   piHole: {
     name: "Pi-hole",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/pi-hole.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/pi-hole.png",
     category: ["dnsHole"],
   },
   adGuardHome: {
     name: "AdGuard Home",
     secretKinds: [["username", "password"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/adguard-home.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/adguard-home.png",
     category: ["dnsHole"],
   },
   homeAssistant: {
     name: "Home Assistant",
     secretKinds: [["apiKey"]],
-    iconUrl:
-      "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/home-assistant.png",
+    iconUrl: "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons@master/png/home-assistant.png",
     category: [],
   },
 } satisfies Record<
@@ -131,20 +115,16 @@ export const integrationDefs = {
   }
 >;
 
-export const getIconUrl = (integration: IntegrationKind) =>
-  integrationDefs[integration]?.iconUrl ?? null;
+export const getIconUrl = (integration: IntegrationKind) => integrationDefs[integration]?.iconUrl ?? null;
 
-export const getIntegrationName = (integration: IntegrationKind) =>
-  integrationDefs[integration].name;
+export const getIntegrationName = (integration: IntegrationKind) => integrationDefs[integration].name;
 
-export const getDefaultSecretKinds = (
-  integration: IntegrationKind,
-): IntegrationSecretKind[] => integrationDefs[integration]?.secretKinds[0];
+export const getDefaultSecretKinds = (integration: IntegrationKind): IntegrationSecretKind[] =>
+  integrationDefs[integration]?.secretKinds[0];
 
 export const getAllSecretKindOptions = (
   integration: IntegrationKind,
-): [IntegrationSecretKind[], ...IntegrationSecretKind[][]] =>
-  integrationDefs[integration]?.secretKinds;
+): [IntegrationSecretKind[], ...IntegrationSecretKind[][]] => integrationDefs[integration]?.secretKinds;
 
 export const integrationKinds = objectKeys(integrationDefs);
 
diff --git a/packages/definitions/src/permissions.ts b/packages/definitions/src/permissions.ts
index a3a25f31d..827c78df9 100644
--- a/packages/definitions/src/permissions.ts
+++ b/packages/definitions/src/permissions.ts
@@ -20,14 +20,10 @@ const groupPermissionParents = {
   admin: ["board-full-access", "integration-full-access"],
 } satisfies Partial<Record<GroupPermissionKey, GroupPermissionKey[]>>;
 
-export const getPermissionsWithParents = (
-  permissions: GroupPermissionKey[],
-): GroupPermissionKey[] => {
+export const getPermissionsWithParents = (permissions: GroupPermissionKey[]): GroupPermissionKey[] => {
   const res = permissions.map((permission) => {
     return objectEntries(groupPermissionParents)
-      .filter(([_key, value]: [string, GroupPermissionKey[]]) =>
-        value.includes(permission),
-      )
+      .filter(([_key, value]: [string, GroupPermissionKey[]]) => value.includes(permission))
       .map(([key]) => getPermissionsWithParents([key]))
       .flat();
   });
@@ -35,13 +31,9 @@ export const getPermissionsWithParents = (
   return permissions.concat(res.flat());
 };
 
-const getPermissionsInner = (
-  permissionSet: Set<GroupPermissionKey>,
-  permissions: GroupPermissionKey[],
-) => {
+const getPermissionsInner = (permissionSet: Set<GroupPermissionKey>, permissions: GroupPermissionKey[]) => {
   permissions.forEach((permission) => {
-    const children =
-      groupPermissionParents[permission as keyof typeof groupPermissionParents];
+    const children = groupPermissionParents[permission as keyof typeof groupPermissionParents];
     if (children) {
       getPermissionsInner(permissionSet, children);
     }
@@ -50,9 +42,7 @@ const getPermissionsInner = (
   });
 };
 
-export const getPermissionsWithChildren = (
-  permissions: GroupPermissionKey[],
-) => {
+export const getPermissionsWithChildren = (permissions: GroupPermissionKey[]) => {
   const permissionSet = new Set<GroupPermissionKey>();
   getPermissionsInner(permissionSet, permissions);
   return Array.from(permissionSet);
@@ -66,19 +56,14 @@ export type GroupPermissionKey = {
     : key;
 }[keyof GroupPermissions];
 
-export const groupPermissionKeys = objectKeys(groupPermissions).reduce(
-  (acc, key) => {
-    const item = groupPermissions[key];
-    if (typeof item !== "boolean") {
-      acc.push(
-        ...item.map((subKey) => `${key}-${subKey}` as GroupPermissionKey),
-      );
-    } else {
-      acc.push(key as GroupPermissionKey);
-    }
-    return acc;
-  },
-  [] as GroupPermissionKey[],
-);
+export const groupPermissionKeys = objectKeys(groupPermissions).reduce((acc, key) => {
+  const item = groupPermissions[key];
+  if (typeof item !== "boolean") {
+    acc.push(...item.map((subKey) => `${key}-${subKey}` as GroupPermissionKey));
+  } else {
+    acc.push(key as GroupPermissionKey);
+  }
+  return acc;
+}, [] as GroupPermissionKey[]);
 
 export type BoardPermission = (typeof boardPermissions)[number];
diff --git a/packages/definitions/src/test/permissions.spec.ts b/packages/definitions/src/test/permissions.spec.ts
index abc581476..1a3572c45 100644
--- a/packages/definitions/src/test/permissions.spec.ts
+++ b/packages/definitions/src/test/permissions.spec.ts
@@ -1,47 +1,22 @@
 import { describe, expect, test } from "vitest";
 
 import type { GroupPermissionKey } from "../permissions";
-import {
-  getPermissionsWithChildren,
-  getPermissionsWithParents,
-} from "../permissions";
+import { getPermissionsWithChildren, getPermissionsWithParents } from "../permissions";
 
 describe("getPermissionsWithParents should return the correct permissions", () => {
   test.each([
-    [
-      ["board-view-all"],
-      ["board-view-all", "board-modify-all", "board-full-access", "admin"],
-    ],
+    [["board-view-all"], ["board-view-all", "board-modify-all", "board-full-access", "admin"]],
     [["board-modify-all"], ["board-modify-all", "board-full-access", "admin"]],
     [["board-create"], ["board-create", "board-full-access", "admin"]],
     [["board-full-access"], ["board-full-access", "admin"]],
-    [
-      ["integration-use-all"],
-      [
-        "integration-use-all",
-        "integration-interact-all",
-        "integration-full-access",
-        "admin",
-      ],
-    ],
-    [
-      ["integration-create"],
-      ["integration-create", "integration-full-access", "admin"],
-    ],
-    [
-      ["integration-interact-all"],
-      ["integration-interact-all", "integration-full-access", "admin"],
-    ],
+    [["integration-use-all"], ["integration-use-all", "integration-interact-all", "integration-full-access", "admin"]],
+    [["integration-create"], ["integration-create", "integration-full-access", "admin"]],
+    [["integration-interact-all"], ["integration-interact-all", "integration-full-access", "admin"]],
     [["integration-full-access"], ["integration-full-access", "admin"]],
     [["admin"], ["admin"]],
-  ] satisfies [GroupPermissionKey[], GroupPermissionKey[]][])(
-    "expect %s to return %s",
-    (input, expectedOutput) => {
-      expect(getPermissionsWithParents(input)).toEqual(
-        expect.arrayContaining(expectedOutput),
-      );
-    },
-  );
+  ] satisfies [GroupPermissionKey[], GroupPermissionKey[]][])("expect %s to return %s", (input, expectedOutput) => {
+    expect(getPermissionsWithParents(input)).toEqual(expect.arrayContaining(expectedOutput));
+  });
 });
 
 describe("getPermissionsWithChildren should return the correct permissions", () => {
@@ -49,24 +24,11 @@ describe("getPermissionsWithChildren should return the correct permissions", ()
     [["board-view-all"], ["board-view-all"]],
     [["board-modify-all"], ["board-view-all", "board-modify-all"]],
     [["board-create"], ["board-create"]],
-    [
-      ["board-full-access"],
-      ["board-full-access", "board-modify-all", "board-view-all"],
-    ],
+    [["board-full-access"], ["board-full-access", "board-modify-all", "board-view-all"]],
     [["integration-use-all"], ["integration-use-all"]],
     [["integration-create"], ["integration-create"]],
-    [
-      ["integration-interact-all"],
-      ["integration-interact-all", "integration-use-all"],
-    ],
-    [
-      ["integration-full-access"],
-      [
-        "integration-full-access",
-        "integration-interact-all",
-        "integration-use-all",
-      ],
-    ],
+    [["integration-interact-all"], ["integration-interact-all", "integration-use-all"]],
+    [["integration-full-access"], ["integration-full-access", "integration-interact-all", "integration-use-all"]],
     [
       ["admin"],
       [
@@ -79,12 +41,7 @@ describe("getPermissionsWithChildren should return the correct permissions", ()
         "integration-use-all",
       ],
     ],
-  ] satisfies [GroupPermissionKey[], GroupPermissionKey[]][])(
-    "expect %s to return %s",
-    (input, expectedOutput) => {
-      expect(getPermissionsWithChildren(input)).toEqual(
-        expect.arrayContaining(expectedOutput),
-      );
-    },
-  );
+  ] satisfies [GroupPermissionKey[], GroupPermissionKey[]][])("expect %s to return %s", (input, expectedOutput) => {
+    expect(getPermissionsWithChildren(input)).toEqual(expect.arrayContaining(expectedOutput));
+  });
 });
diff --git a/packages/definitions/src/widget.ts b/packages/definitions/src/widget.ts
index 7cd6ac962..a095f01f1 100644
--- a/packages/definitions/src/widget.ts
+++ b/packages/definitions/src/widget.ts
@@ -1,9 +1,2 @@
-export const widgetKinds = [
-  "clock",
-  "weather",
-  "app",
-  "iframe",
-  "video",
-  "notebook",
-] as const;
+export const widgetKinds = ["clock", "weather", "app", "iframe", "video", "notebook"] as const;
 export type WidgetKind = (typeof widgetKinds)[number];
diff --git a/packages/form/package.json b/packages/form/package.json
index 6d754a6eb..b964a10ea 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -33,6 +33,8 @@
   },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
-    "@mantine/form": "^7.9.1"
+    "@mantine/form": "^7.9.2",
+    "@homarr/validation": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0"
   }
 }
diff --git a/packages/form/src/index.ts b/packages/form/src/index.ts
index 7211e1b1e..60a2f425e 100644
--- a/packages/form/src/index.ts
+++ b/packages/form/src/index.ts
@@ -1 +1,26 @@
-export const name = "form";
+import { useForm, zodResolver } from "@mantine/form";
+
+import { useI18n } from "@homarr/translation/client";
+import { z } from "@homarr/validation";
+import type { AnyZodObject, ZodEffects, ZodIntersection } from "@homarr/validation";
+import { zodErrorMap } from "@homarr/validation/form";
+
+export const useZodForm = <
+  TSchema extends AnyZodObject | ZodEffects<AnyZodObject> | ZodIntersection<AnyZodObject, AnyZodObject>,
+>(
+  schema: TSchema,
+  options: Omit<
+    Exclude<Parameters<typeof useForm<z.infer<TSchema>>>[0], undefined>,
+    "validate" | "validateInputOnBlur" | "validateInputOnChange"
+  >,
+) => {
+  const t = useI18n();
+
+  z.setErrorMap(zodErrorMap(t));
+  return useForm<z.infer<TSchema>>({
+    ...options,
+    validateInputOnBlur: true,
+    validateInputOnChange: true,
+    validate: zodResolver(schema),
+  });
+};
diff --git a/packages/form/src/messages.ts b/packages/form/src/messages.ts
new file mode 100644
index 000000000..51983fff1
--- /dev/null
+++ b/packages/form/src/messages.ts
@@ -0,0 +1,102 @@
+import type { TranslationObject } from "@homarr/translation";
+import type { ErrorMapCtx, z, ZodTooBigIssue, ZodTooSmallIssue } from "@homarr/validation";
+import { ZodIssueCode } from "@homarr/validation";
+
+const handleStringError = (issue: z.ZodInvalidStringIssue) => {
+  if (typeof issue.validation === "object") {
+    // Check if object contains startsWith / endsWith key to determine the error type. If not, it's an includes error. (see type of issue.validation)
+    if ("startsWith" in issue.validation) {
+      return {
+        key: "errors.string.startsWith",
+        params: {
+          startsWith: issue.validation.startsWith,
+        },
+      } as const;
+    } else if ("endsWith" in issue.validation) {
+      return {
+        key: "errors.string.endsWith",
+        params: {
+          endsWith: issue.validation.endsWith,
+        },
+      } as const;
+    }
+
+    return {
+      key: "errors.invalid_string.includes",
+      params: {
+        includes: issue.validation.includes,
+      },
+    } as const;
+  }
+
+  return {
+    message: issue.message,
+  };
+};
+
+const handleTooSmallError = (issue: ZodTooSmallIssue) => {
+  if (issue.type !== "string" && issue.type !== "number") {
+    return {
+      message: issue.message,
+    };
+  }
+
+  return {
+    key: `errors.tooSmall.${issue.type}`,
+    params: {
+      minimum: issue.minimum,
+      count: issue.minimum,
+    },
+  } as const;
+};
+
+const handleTooBigError = (issue: ZodTooBigIssue) => {
+  if (issue.type !== "string" && issue.type !== "number") {
+    return {
+      message: issue.message,
+    };
+  }
+
+  return {
+    key: `errors.tooBig.${issue.type}`,
+    params: {
+      maximum: issue.maximum,
+      count: issue.maximum,
+    },
+  } as const;
+};
+
+export const handleZodError = (issue: z.ZodIssueOptionalMessage, ctx: ErrorMapCtx) => {
+  if (ctx.defaultError === "Required") {
+    return {
+      key: "errors.required",
+      params: {},
+    } as const;
+  }
+  if (issue.code === ZodIssueCode.invalid_string) {
+    return handleStringError(issue);
+  }
+  if (issue.code === ZodIssueCode.too_small) {
+    return handleTooSmallError(issue);
+  }
+  if (issue.code === ZodIssueCode.too_big) {
+    return handleTooBigError(issue);
+  }
+  if (issue.code === ZodIssueCode.custom && issue.params?.i18n) {
+    const { i18n } = issue.params as CustomErrorParams;
+    return {
+      key: `errors.custom.${i18n.key}`,
+    } as const;
+  }
+
+  return {
+    message: issue.message,
+  };
+};
+
+export interface CustomErrorParams {
+  i18n: {
+    key: keyof TranslationObject["common"]["zod"]["errors"]["custom"];
+    params?: Record<string, unknown>;
+  };
+}
diff --git a/packages/icons/src/icons-fetcher.ts b/packages/icons/src/icons-fetcher.ts
index dd3389102..32ba31af8 100644
--- a/packages/icons/src/icons-fetcher.ts
+++ b/packages/icons/src/icons-fetcher.ts
@@ -8,9 +8,7 @@ const repositories = [
     "walkxcode/dashboard-icons",
     undefined,
     new URL("https://github.com/walkxcode/dashboard-icons"),
-    new URL(
-      "https://api.github.com/repos/walkxcode/dashboard-icons/git/trees/main?recursive=true",
-    ),
+    new URL("https://api.github.com/repos/walkxcode/dashboard-icons/git/trees/main?recursive=true"),
     "https://cdn.jsdelivr.net/gh/walkxcode/dashboard-icons/{0}",
   ),
   new JsdelivrIconRepository(
@@ -18,9 +16,7 @@ const repositories = [
     "PapirusDevelopmentTeam/papirus-icon-theme",
     "GPL-3.0",
     new URL("https://github.com/PapirusDevelopmentTeam/papirus-icon-theme"),
-    new URL(
-      "https://data.jsdelivr.com/v1/packages/gh/PapirusDevelopmentTeam/papirus_icons@master?structure=flat",
-    ),
+    new URL("https://data.jsdelivr.com/v1/packages/gh/PapirusDevelopmentTeam/papirus_icons@master?structure=flat"),
     "https://cdn.jsdelivr.net/gh/PapirusDevelopmentTeam/papirus_icons/{0}",
   ),
   new JsdelivrIconRepository(
@@ -28,15 +24,11 @@ const repositories = [
     "loganmarchione/homelab-svg-assets",
     "MIT",
     new URL("https://github.com/loganmarchione/homelab-svg-assets"),
-    new URL(
-      "https://data.jsdelivr.com/v1/packages/gh/loganmarchione/homelab-svg-assets@main?structure=flat",
-    ),
+    new URL("https://data.jsdelivr.com/v1/packages/gh/loganmarchione/homelab-svg-assets@main?structure=flat"),
     "https://cdn.jsdelivr.net/gh/loganmarchione/homelab-svg-assets/{0}",
   ),
 ];
 
 export const fetchIconsAsync = async (): Promise<RepositoryIconGroup[]> => {
-  return await Promise.all(
-    repositories.map(async (repository) => await repository.getAllIconsAsync()),
-  );
+  return await Promise.all(repositories.map(async (repository) => await repository.getAllIconsAsync()));
 };
diff --git a/packages/icons/src/repositories/github.icon-repository.ts b/packages/icons/src/repositories/github.icon-repository.ts
index a3f8a8ea7..3523bf930 100644
--- a/packages/icons/src/repositories/github.icon-repository.ts
+++ b/packages/icons/src/repositories/github.icon-repository.ts
@@ -11,14 +11,7 @@ export class GitHubIconRepository extends IconRepository {
     public readonly repositoryIndexingUrl?: URL,
     public readonly repositoryBlobUrlTemplate?: string,
   ) {
-    super(
-      name,
-      slug,
-      license,
-      repositoryUrl,
-      repositoryIndexingUrl,
-      repositoryBlobUrlTemplate,
-    );
+    super(name, slug, license, repositoryUrl, repositoryIndexingUrl, repositoryBlobUrlTemplate);
   }
 
   protected async getAllIconsInternalAsync(): Promise<RepositoryIconGroup> {
@@ -33,18 +26,13 @@ export class GitHubIconRepository extends IconRepository {
       success: true,
       icons: listOfFiles.tree
         .filter((treeItem) =>
-          this.allowedImageFileTypes.some((allowedExtension) =>
-            treeItem.path.includes(allowedExtension),
-          ),
+          this.allowedImageFileTypes.some((allowedExtension) => treeItem.path.includes(allowedExtension)),
         )
         .map((treeItem) => {
-          const fileNameWithExtension =
-            this.getFileNameWithoutExtensionFromPath(treeItem.path);
+          const fileNameWithExtension = this.getFileNameWithoutExtensionFromPath(treeItem.path);
 
           return {
-            imageUrl: new URL(
-              this.repositoryBlobUrlTemplate!.replace("{0}", treeItem.path),
-            ),
+            imageUrl: new URL(this.repositoryBlobUrlTemplate!.replace("{0}", treeItem.path)),
             fileNameWithExtension: fileNameWithExtension,
             local: false,
             sizeInBytes: treeItem.size,
diff --git a/packages/icons/src/repositories/icon-repository.ts b/packages/icons/src/repositories/icon-repository.ts
index f6eaac46a..358e48dfa 100644
--- a/packages/icons/src/repositories/icon-repository.ts
+++ b/packages/icons/src/repositories/icon-repository.ts
@@ -19,9 +19,7 @@ export abstract class IconRepository {
     try {
       return await this.getAllIconsInternalAsync();
     } catch (err) {
-      logger.error(
-        `Unable to request icons from repository "${this.slug}": ${JSON.stringify(err)}`,
-      );
+      logger.error(`Unable to request icons from repository "${this.slug}": ${JSON.stringify(err)}`);
       return {
         success: false,
         icons: [],
diff --git a/packages/icons/src/repositories/jsdelivr.icon-repository.ts b/packages/icons/src/repositories/jsdelivr.icon-repository.ts
index fe0638ccb..919cdd2ba 100644
--- a/packages/icons/src/repositories/jsdelivr.icon-repository.ts
+++ b/packages/icons/src/repositories/jsdelivr.icon-repository.ts
@@ -11,14 +11,7 @@ export class JsdelivrIconRepository extends IconRepository {
     public readonly repositoryIndexingUrl: URL,
     public readonly repositoryBlobUrlTemplate: string,
   ) {
-    super(
-      name,
-      slug,
-      license,
-      repositoryUrl,
-      repositoryIndexingUrl,
-      repositoryBlobUrlTemplate,
-    );
+    super(name, slug, license, repositoryUrl, repositoryIndexingUrl, repositoryBlobUrlTemplate);
   }
 
   protected async getAllIconsInternalAsync(): Promise<RepositoryIconGroup> {
@@ -29,18 +22,13 @@ export class JsdelivrIconRepository extends IconRepository {
       success: true,
       icons: listOfFiles.files
         .filter((file) =>
-          this.allowedImageFileTypes.some((allowedImageFileType) =>
-            file.name.includes(allowedImageFileType),
-          ),
+          this.allowedImageFileTypes.some((allowedImageFileType) => file.name.includes(allowedImageFileType)),
         )
         .map((file) => {
-          const fileNameWithExtension =
-            this.getFileNameWithoutExtensionFromPath(file.name);
+          const fileNameWithExtension = this.getFileNameWithoutExtensionFromPath(file.name);
 
           return {
-            imageUrl: new URL(
-              this.repositoryBlobUrlTemplate.replace("{0}", file.name),
-            ),
+            imageUrl: new URL(this.repositoryBlobUrlTemplate.replace("{0}", file.name)),
             fileNameWithExtension: fileNameWithExtension,
             local: false,
             sizeInBytes: file.size,
diff --git a/packages/log/src/index.mjs b/packages/log/src/index.mjs
index c1fa71f42..1ef0b09d2 100644
--- a/packages/log/src/index.mjs
+++ b/packages/log/src/index.mjs
@@ -7,11 +7,7 @@ const logMessageFormat = format.printf(({ level, message, timestamp }) => {
 });
 
 const logger = winston.createLogger({
-  format: format.combine(
-    format.colorize(),
-    format.timestamp(),
-    logMessageFormat,
-  ),
+  format: format.combine(format.colorize(), format.timestamp(), logMessageFormat),
   transports: [new transports.Console(), new RedisTransport()],
 });
 
diff --git a/packages/modals/src/confirm-modal.tsx b/packages/modals/src/confirm-modal.tsx
index 9bf3242db..d1434b874 100644
--- a/packages/modals/src/confirm-modal.tsx
+++ b/packages/modals/src/confirm-modal.tsx
@@ -3,10 +3,7 @@ import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import type { ButtonProps, GroupProps } from "@mantine/core";
 import { Box, Button, Group } from "@mantine/core";
 
-import type {
-  stringOrTranslation,
-  TranslationFunction,
-} from "@homarr/translation";
+import type { stringOrTranslation, TranslationFunction } from "@homarr/translation";
 import { translateIfNecessary } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";
 
@@ -31,70 +28,50 @@ export interface ConfirmModalProps {
   };
 }
 
-export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(
-  ({ actions, innerProps }) => {
-    const [loading, setLoading] = useState(false);
-    const t = useI18n();
-    const {
-      children,
-      onConfirm,
-      onCancel,
-      cancelProps,
-      confirmProps,
-      groupProps,
-      labels,
-    } = innerProps;
+export const ConfirmModal = createModal<Omit<ConfirmModalProps, "title">>(({ actions, innerProps }) => {
+  const [loading, setLoading] = useState(false);
+  const t = useI18n();
+  const { children, onConfirm, onCancel, cancelProps, confirmProps, groupProps, labels } = innerProps;
 
-    const closeOnConfirm = innerProps.closeOnConfirm ?? true;
-    const closeOnCancel = innerProps.closeOnCancel ?? true;
+  const closeOnConfirm = innerProps.closeOnConfirm ?? true;
+  const closeOnCancel = innerProps.closeOnCancel ?? true;
 
-    const cancelLabel =
-      labels?.cancel ?? ((t: TranslationFunction) => t("common.action.cancel"));
-    const confirmLabel =
-      labels?.confirm ??
-      ((t: TranslationFunction) => t("common.action.confirm"));
+  const cancelLabel = labels?.cancel ?? ((t: TranslationFunction) => t("common.action.cancel"));
+  const confirmLabel = labels?.confirm ?? ((t: TranslationFunction) => t("common.action.confirm"));
 
-    const handleCancel = useCallback(
-      async (event: React.MouseEvent<HTMLButtonElement>) => {
-        typeof cancelProps?.onClick === "function" &&
-          cancelProps?.onClick(event);
-        typeof onCancel === "function" && (await onCancel());
-        closeOnCancel && actions.closeModal();
-      },
-      [cancelProps?.onClick, onCancel, actions.closeModal],
-    );
+  const handleCancel = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      typeof cancelProps?.onClick === "function" && cancelProps?.onClick(event);
+      typeof onCancel === "function" && (await onCancel());
+      closeOnCancel && actions.closeModal();
+    },
+    [cancelProps?.onClick, onCancel, actions.closeModal],
+  );
 
-    const handleConfirm = useCallback(
-      async (event: React.MouseEvent<HTMLButtonElement>) => {
-        setLoading(true);
-        typeof confirmProps?.onClick === "function" &&
-          confirmProps?.onClick(event);
-        typeof onConfirm === "function" && (await onConfirm());
-        closeOnConfirm && actions.closeModal();
-        setLoading(false);
-      },
-      [confirmProps?.onClick, onConfirm, actions.closeModal],
-    );
+  const handleConfirm = useCallback(
+    async (event: React.MouseEvent<HTMLButtonElement>) => {
+      setLoading(true);
+      typeof confirmProps?.onClick === "function" && confirmProps?.onClick(event);
+      typeof onConfirm === "function" && (await onConfirm());
+      closeOnConfirm && actions.closeModal();
+      setLoading(false);
+    },
+    [confirmProps?.onClick, onConfirm, actions.closeModal],
+  );
 
-    return (
-      <>
-        {children && <Box mb="md">{children}</Box>}
+  return (
+    <>
+      {children && <Box mb="md">{children}</Box>}
 
-        <Group justify="flex-end" {...groupProps}>
-          <Button variant="default" {...cancelProps} onClick={handleCancel}>
-            {cancelProps?.children || translateIfNecessary(t, cancelLabel)}
-          </Button>
+      <Group justify="flex-end" {...groupProps}>
+        <Button variant="default" {...cancelProps} onClick={handleCancel}>
+          {cancelProps?.children || translateIfNecessary(t, cancelLabel)}
+        </Button>
 
-          <Button
-            {...confirmProps}
-            onClick={handleConfirm}
-            color="red.9"
-            loading={loading}
-          >
-            {confirmProps?.children || translateIfNecessary(t, confirmLabel)}
-          </Button>
-        </Group>
-      </>
-    );
-  },
-).withOptions({});
+        <Button {...confirmProps} onClick={handleConfirm} color="red.9" loading={loading}>
+          {confirmProps?.children || translateIfNecessary(t, confirmLabel)}
+        </Button>
+      </Group>
+    </>
+  );
+}).withOptions({});
diff --git a/packages/modals/src/creator.ts b/packages/modals/src/creator.ts
index 362032033..ab91d378f 100644
--- a/packages/modals/src/creator.ts
+++ b/packages/modals/src/creator.ts
@@ -1,8 +1,6 @@
 import type { CreateModalOptions, ModalComponent } from "./type";
 
-export const createModal = <TInnerProps>(
-  component: ModalComponent<TInnerProps>,
-) => {
+export const createModal = <TInnerProps>(component: ModalComponent<TInnerProps>) => {
   return {
     withOptions: (options: Partial<CreateModalOptions>) => {
       return {
diff --git a/packages/modals/src/index.tsx b/packages/modals/src/index.tsx
index 16e99c4b6..68876a6b6 100644
--- a/packages/modals/src/index.tsx
+++ b/packages/modals/src/index.tsx
@@ -1,15 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from "react";
+import { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
 import { getDefaultZIndex, Modal } from "@mantine/core";
 import { randomId } from "@mantine/hooks";
 
@@ -76,19 +68,12 @@ export const ModalProvider = ({ children }: PropsWithChildren) => {
     [closeModal, state.current?.id],
   );
 
-  const activeModals = state.modals.filter(
-    (modal) => modal.id === state.current?.id || modal.props.keepMounted,
-  );
+  const activeModals = state.modals.filter((modal) => modal.id === state.current?.id || modal.props.keepMounted);
 
   return (
     <ModalContext.Provider value={{ openModalInner, closeModal }}>
       {activeModals.map((modal) => (
-        <ActiveModal
-          key={modal.id}
-          modal={modal}
-          state={state}
-          handleCloseModal={handleCloseModal}
-        />
+        <ActiveModal key={modal.id} modal={modal} state={state} handleCloseModal={handleCloseModal} />
       ))}
 
       {children}
@@ -112,14 +97,12 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
     setTimeout(() => setOpened(true), 0);
   }, []);
 
-  const { defaultTitle: _ignored, ...otherModalProps } =
-    modal.reference.modalProps;
+  const { defaultTitle: _ignored, ...otherModalProps } = modal.reference.modalProps;
 
   return (
     <Modal
       key={modal.id}
       zIndex={getDefaultZIndex("modal") + 1}
-      display={modal.id === state.current?.id ? undefined : "none"}
       style={{
         userSelect: modal.id === state.current?.id ? undefined : "none",
       }}
@@ -128,6 +111,9 @@ const ActiveModal = ({ modal, state, handleCloseModal }: ActiveModalProps) => {
           fontSize: "1.25rem",
           fontWeight: 500,
         },
+        inner: {
+          display: modal.id === state.current?.id ? undefined : "none",
+        },
       }}
       trapFocus={modal.id === state.current?.id}
       {...otherModalProps}
@@ -145,18 +131,13 @@ interface OpenModalOptions {
   title?: stringOrTranslation;
 }
 
-export const useModalAction = <TModal extends ModalDefinition>(
-  modal: TModal,
-) => {
+export const useModalAction = <TModal extends ModalDefinition>(modal: TModal) => {
   const context = useContext(ModalContext);
 
   if (!context) throw new Error("ModalContext is not provided");
 
   return {
-    openModal: (
-      innerProps: inferInnerProps<TModal>,
-      options: OpenModalOptions | void,
-    ) => {
+    openModal: (innerProps: inferInnerProps<TModal>, options: OpenModalOptions | void) => {
       context.openModalInner({ modal, innerProps, options: options ?? {} });
     },
   };
@@ -166,7 +147,6 @@ export const useConfirmModal = () => {
   const { openModal } = useModalAction(ConfirmModal);
 
   return {
-    openConfirmModal: (props: ConfirmModalProps) =>
-      openModal(props, { title: props.title }),
+    openConfirmModal: (props: ConfirmModalProps) => openModal(props, { title: props.title }),
   };
 };
diff --git a/packages/modals/src/reducer.tsx b/packages/modals/src/reducer.tsx
index 10bbd93ce..ab45cb386 100644
--- a/packages/modals/src/reducer.tsx
+++ b/packages/modals/src/reducer.tsx
@@ -39,10 +39,7 @@ interface CloseAllAction {
   canceled?: boolean;
 }
 
-export const modalReducer = (
-  state: ModalsState,
-  action: OpenAction | CloseAction | CloseAllAction,
-): ModalsState => {
+export const modalReducer = (state: ModalsState, action: OpenAction | CloseAction | CloseAllAction): ModalsState => {
   switch (action.type) {
     case "OPEN": {
       const newModal = {
@@ -62,9 +59,7 @@ export const modalReducer = (
 
       modal.props.onClose?.();
 
-      const remainingModals = state.modals.filter(
-        (modal) => modal.id !== action.modalId,
-      );
+      const remainingModals = state.modals.filter((modal) => modal.id !== action.modalId);
 
       return {
         current: remainingModals[remainingModals.length - 1] || state.current,
@@ -95,9 +90,7 @@ export const modalReducer = (
   }
 };
 
-const getModal = <TModal extends ModalDefinition>(
-  modal: ModalState<TModal>,
-) => {
+const getModal = <TModal extends ModalDefinition>(modal: ModalState<TModal>) => {
   const ModalContent = modal.modal.component;
 
   const { innerProps, ...rest } = modal.props;
diff --git a/packages/notifications/package.json b/packages/notifications/package.json
index 194cbbb53..73f13e79e 100644
--- a/packages/notifications/package.json
+++ b/packages/notifications/package.json
@@ -28,7 +28,7 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@mantine/notifications": "^7.9.1",
+    "@mantine/notifications": "^7.9.2",
     "@homarr/ui": "workspace:^0.1.0"
   },
   "eslintConfig": {
diff --git a/packages/redis/src/index.ts b/packages/redis/src/index.ts
index 71c6dca99..06ec8006b 100644
--- a/packages/redis/src/index.ts
+++ b/packages/redis/src/index.ts
@@ -1,8 +1,6 @@
 import { createQueueChannel, createSubPubChannel } from "./lib/channel";
 
-export const exampleChannel = createSubPubChannel<{ message: string }>(
-  "example",
-);
+export const exampleChannel = createSubPubChannel<{ message: string }>("example");
 export const queueChannel = createQueueChannel<{
   name: string;
   executionDate: Date;
diff --git a/packages/redis/src/lib/channel.ts b/packages/redis/src/lib/channel.ts
index a80a8fb19..eeb4d13ba 100644
--- a/packages/redis/src/lib/channel.ts
+++ b/packages/redis/src/lib/channel.ts
@@ -32,9 +32,7 @@ export const createSubPubChannel = <TData>(name: string) => {
         if (!err) {
           return;
         }
-        logger.error(
-          `Error with channel '${channelName}': ${err.name} (${err.message})`,
-        );
+        logger.error(`Error with channel '${channelName}': ${err.name} (${err.message})`);
       });
       subscriber.on("message", (channel, message) => {
         if (channel !== channelName) return; // TODO: check if this is necessary - it should be handled by the redis client
@@ -53,6 +51,34 @@ export const createSubPubChannel = <TData>(name: string) => {
   };
 };
 
+const cacheClient = createRedisConnection();
+
+/**
+ * Creates a new cache channel.
+ * @param name name of the channel
+ * @returns cache channel object
+ */
+export const createCacheChannel = <TData>(name: string) => {
+  const cacheChannelName = `cache:${name}`;
+  return {
+    /**
+     * Get the data from the cache channel.
+     * @returns data or undefined if not found
+     */
+    getAsync: async () => {
+      const data = await cacheClient.get(cacheChannelName);
+      return data ? superjson.parse<TData>(data) : undefined;
+    },
+    /**
+     * Set the data in the cache channel.
+     * @param data data to be stored in the cache channel
+     */
+    setAsync: async (data: TData) => {
+      await cacheClient.set(cacheChannelName, superjson.stringify(data));
+    },
+  };
+};
+
 const queueClient = createRedisConnection();
 
 type WithId<TItem> = TItem & { _id: string };
diff --git a/packages/server-settings/index.ts b/packages/server-settings/index.ts
new file mode 100644
index 000000000..3bd16e178
--- /dev/null
+++ b/packages/server-settings/index.ts
@@ -0,0 +1 @@
+export * from "./src";
diff --git a/packages/server-settings/package.json b/packages/server-settings/package.json
new file mode 100644
index 000000000..8e0ffc6c8
--- /dev/null
+++ b/packages/server-settings/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@homarr/server-settings",
+  "private": true,
+  "version": "0.1.0",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "src/*"
+      ]
+    }
+  },
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "lint": "eslint .",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@homarr/eslint-config": "workspace:^0.2.0",
+    "@homarr/prettier-config": "workspace:^0.1.0",
+    "@homarr/tsconfig": "workspace:^0.1.0",
+    "eslint": "^8.57.0",
+    "typescript": "^5.4.5"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@homarr/eslint-config/base"
+    ]
+  },
+  "prettier": "@homarr/prettier-config"
+}
diff --git a/packages/server-settings/src/index.ts b/packages/server-settings/src/index.ts
new file mode 100644
index 000000000..672481db4
--- /dev/null
+++ b/packages/server-settings/src/index.ts
@@ -0,0 +1,16 @@
+export const defaultServerSettingsKeys = ["analytics"] as const;
+
+export type ServerSettingsRecord = {
+  [key in (typeof defaultServerSettingsKeys)[number]]: Record<string, unknown>;
+};
+
+export const defaultServerSettings = {
+  analytics: {
+    enableGeneral: true,
+    enableWidgetData: false,
+    enableIntegrationData: false,
+    enableUserData: false,
+  },
+} satisfies ServerSettingsRecord;
+
+export type ServerSettings = typeof defaultServerSettings;
diff --git a/packages/server-settings/tsconfig.json b/packages/server-settings/tsconfig.json
new file mode 100644
index 000000000..cbe8483d9
--- /dev/null
+++ b/packages/server-settings/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@homarr/tsconfig/base.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": ["*.ts", "src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/spotlight/ReadMe.md b/packages/spotlight/ReadMe.md
index 7705d3373..ac4122282 100644
--- a/packages/spotlight/ReadMe.md
+++ b/packages/spotlight/ReadMe.md
@@ -130,8 +130,7 @@ const ColorSchemeButton = () => {
       {
         id: "toggle-color-scheme",
         title: (t) => t("common.colorScheme.toggle.title"),
-        description: (t) =>
-          t(`common.colorScheme.toggle.${colorScheme}.description`),
+        description: (t) => t(`common.colorScheme.toggle.${colorScheme}.description`),
         icon: colorScheme === "light" ? IconSun : IconMoon,
         group: "action",
         type: "button",
diff --git a/packages/spotlight/package.json b/packages/spotlight/package.json
index d6386ec5d..743850739 100644
--- a/packages/spotlight/package.json
+++ b/packages/spotlight/package.json
@@ -34,7 +34,7 @@
   },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
-    "@mantine/spotlight": "^7.9.1",
+    "@mantine/spotlight": "^7.9.2",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0"
   }
diff --git a/packages/spotlight/src/chip-group.tsx b/packages/spotlight/src/chip-group.tsx
index 36437f348..d2cc08cc9 100644
--- a/packages/spotlight/src/chip-group.tsx
+++ b/packages/spotlight/src/chip-group.tsx
@@ -2,17 +2,10 @@ import { Chip } from "@mantine/core";
 
 import { useScopedI18n } from "@homarr/translation/client";
 
-import {
-  selectNextAction,
-  selectPreviousAction,
-  spotlightStore,
-  triggerSelectedAction,
-} from "./spotlight-store";
+import { selectNextAction, selectPreviousAction, spotlightStore, triggerSelectedAction } from "./spotlight-store";
 import type { SpotlightActionGroup } from "./type";
 
-const disableArrowUpAndDown = (
-  event: React.KeyboardEvent<HTMLInputElement>,
-) => {
+const disableArrowUpAndDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
   if (event.key === "ArrowDown") {
     selectNextAction(spotlightStore);
     event.preventDefault();
@@ -27,8 +20,7 @@ const disableArrowUpAndDown = (
 const focusActiveByDefault = (event: React.FocusEvent<HTMLInputElement>) => {
   const relatedTarget = event.relatedTarget;
 
-  const isPreviousTargetRadio =
-    relatedTarget && "type" in relatedTarget && relatedTarget.type === "radio";
+  const isPreviousTargetRadio = relatedTarget && "type" in relatedTarget && relatedTarget.type === "radio";
   if (isPreviousTargetRadio) return;
 
   const group = event.currentTarget.parentElement?.parentElement;
@@ -45,12 +37,7 @@ interface Props {
 export const GroupChip = ({ group }: Props) => {
   const t = useScopedI18n("common.search.group");
   return (
-    <Chip
-      key={group}
-      value={group}
-      onFocus={focusActiveByDefault}
-      onKeyDown={disableArrowUpAndDown}
-    >
+    <Chip key={group} value={group} onFocus={focusActiveByDefault} onKeyDown={disableArrowUpAndDown}>
       {t(group)}
     </Chip>
   );
diff --git a/packages/spotlight/src/component.tsx b/packages/spotlight/src/component.tsx
index 043b7e780..59f67ef20 100644
--- a/packages/spotlight/src/component.tsx
+++ b/packages/spotlight/src/component.tsx
@@ -3,10 +3,7 @@
 import { useCallback, useState } from "react";
 import Link from "next/link";
 import { Center, Chip, Divider, Flex, Group, Text } from "@mantine/core";
-import {
-  Spotlight as MantineSpotlight,
-  SpotlightAction,
-} from "@mantine/spotlight";
+import { Spotlight as MantineSpotlight, SpotlightAction } from "@mantine/spotlight";
 import { IconSearch } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
 
@@ -41,11 +38,7 @@ export const Spotlight = () => {
       const renderRoot =
         item.type === "link"
           ? (props: Record<string, unknown>) => (
-              <Link
-                href={prepareHref(item.href, query)}
-                target={item.openInNewTab ? "_blank" : undefined}
-                {...props}
-              />
+              <Link href={prepareHref(item.href, query)} target={item.openInNewTab ? "_blank" : undefined} {...props} />
             )
           : undefined;
 
@@ -60,14 +53,7 @@ export const Spotlight = () => {
             {item.icon && (
               <Center w={50} h={50}>
                 {typeof item.icon !== "string" && <item.icon size={24} />}
-                {typeof item.icon === "string" && (
-                  <img
-                    src={item.icon}
-                    alt={item.title}
-                    width={24}
-                    height={24}
-                  />
-                )}
+                {typeof item.icon === "string" && <img src={item.icon} alt={item.title} width={24} height={24} />}
               </Center>
             )}
 
@@ -94,11 +80,7 @@ export const Spotlight = () => {
   );
 
   return (
-    <MantineSpotlight.Root
-      query={query}
-      onQueryChange={setQuery}
-      store={spotlightStore}
-    >
+    <MantineSpotlight.Root query={query} onQueryChange={setQuery} store={spotlightStore}>
       <MantineSpotlight.Search
         placeholder={t("common.rtl", {
           value: t("common.search.placeholder"),
@@ -119,13 +101,7 @@ export const Spotlight = () => {
       </Group>
 
       <MantineSpotlight.ActionsList>
-        {items.length > 0 ? (
-          items
-        ) : (
-          <MantineSpotlight.Empty>
-            {t("common.search.nothingFound")}
-          </MantineSpotlight.Empty>
-        )}
+        {items.length > 0 ? items : <MantineSpotlight.Empty>{t("common.search.nothingFound")}</MantineSpotlight.Empty>}
       </MantineSpotlight.ActionsList>
     </MantineSpotlight.Root>
   );
@@ -135,10 +111,7 @@ const prepareHref = (href: string, query: string) => {
   return href.replace("%s", query);
 };
 
-const translateIfNecessary = (
-  value: string | ((t: TranslationFunction) => string),
-  t: TranslationFunction,
-) => {
+const translateIfNecessary = (value: string | ((t: TranslationFunction) => string), t: TranslationFunction) => {
   if (typeof value === "function") {
     return value(t);
   }
@@ -146,10 +119,7 @@ const translateIfNecessary = (
   return value;
 };
 
-const prepareAction = (
-  action: SpotlightActionData,
-  t: TranslationFunction,
-) => ({
+const prepareAction = (action: SpotlightActionData, t: TranslationFunction) => ({
   ...action,
   title: translateIfNecessary(action.title, t),
   description: translateIfNecessary(action.description, t),
diff --git a/packages/spotlight/src/data-store.ts b/packages/spotlight/src/data-store.ts
index f217ae2ee..0a2dbd52d 100644
--- a/packages/spotlight/src/data-store.ts
+++ b/packages/spotlight/src/data-store.ts
@@ -7,9 +7,7 @@ import type { SpotlightActionData, SpotlightActionGroup } from "./type";
 const defaultGroups = ["all", "web", "action"] as const;
 const reversedDefaultGroups = [...defaultGroups].reverse() as string[];
 const actionsAtom = atom<Record<string, readonly SpotlightActionData[]>>({});
-export const actionsAtomRead = atom((get) =>
-  Object.values(get(actionsAtom)).flatMap((item) => item),
-);
+export const actionsAtomRead = atom((get) => Object.values(get(actionsAtom)).flatMap((item) => item));
 
 export const groupsAtomRead = atom((get) =>
   Array.from(
@@ -43,8 +41,7 @@ export const useRegisterSpotlightActions = (
   const setActions = useSetAtom(actionsAtom);
 
   // Use deep compare effect if there are dependencies for the actions, this supports deep compare of the action dependencies
-  const useSpecificEffect =
-    dependencies.length >= 1 ? useDeepCompareEffect : useEffect;
+  const useSpecificEffect = dependencies.length >= 1 ? useDeepCompareEffect : useEffect;
 
   useSpecificEffect(() => {
     if (!registrations.has(key) || dependencies.length >= 1) {
diff --git a/packages/spotlight/src/spotlight-store.ts b/packages/spotlight/src/spotlight-store.ts
index 3e8659de4..052ac59cb 100644
--- a/packages/spotlight/src/spotlight-store.ts
+++ b/packages/spotlight/src/spotlight-store.ts
@@ -13,12 +13,9 @@ export const setSelectedAction = (index: number, store: SpotlightStore) => {
 export const selectAction = (index: number, store: SpotlightStore): number => {
   const state = store.getState();
   const actionsList = document.getElementById(state.listId);
-  const selected =
-    actionsList?.querySelector<HTMLButtonElement>("[data-selected]");
-  const actions =
-    actionsList?.querySelectorAll<HTMLButtonElement>("[data-action]") ?? [];
-  const nextIndex =
-    index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;
+  const selected = actionsList?.querySelector<HTMLButtonElement>("[data-selected]");
+  const actions = actionsList?.querySelectorAll<HTMLButtonElement>("[data-action]") ?? [];
+  const nextIndex = index === -1 ? actions.length - 1 : index === actions.length ? 0 : index;
 
   const selectedIndex = clamp(nextIndex, 0, actions.length - 1);
   selected?.removeAttribute("data-selected");
@@ -38,8 +35,6 @@ export const selectPreviousAction = (store: SpotlightStore) => {
 };
 export const triggerSelectedAction = (store: SpotlightStore) => {
   const state = store.getState();
-  const selected = document.querySelector<HTMLButtonElement>(
-    `#${state.listId} [data-selected]`,
-  );
+  const selected = document.querySelector<HTMLButtonElement>(`#${state.listId} [data-selected]`);
   selected?.click();
 };
diff --git a/packages/spotlight/src/type.ts b/packages/spotlight/src/type.ts
index d8cb6b683..25f96c2c7 100644
--- a/packages/spotlight/src/type.ts
+++ b/packages/spotlight/src/type.ts
@@ -1,11 +1,7 @@
-import type {
-  TranslationFunction,
-  TranslationObject,
-} from "@homarr/translation";
+import type { TranslationFunction, TranslationObject } from "@homarr/translation";
 import type { TablerIcon } from "@homarr/ui";
 
-export type SpotlightActionGroup =
-  keyof TranslationObject["common"]["search"]["group"];
+export type SpotlightActionGroup = keyof TranslationObject["common"]["search"]["group"];
 
 interface BaseSpotlightAction {
   id: string;
diff --git a/packages/translation/src/client.ts b/packages/translation/src/client.ts
index 7e5341cbe..8cbb49e73 100644
--- a/packages/translation/src/client.ts
+++ b/packages/translation/src/client.ts
@@ -5,7 +5,7 @@ import { createI18nClient } from "next-international/client";
 import { languageMapping } from "./lang";
 import enTranslation from "./lang/en";
 
-export const { useI18n, useScopedI18n, I18nProviderClient } = createI18nClient(
+export const { useI18n, useScopedI18n, useCurrentLocale, useChangeLocale, I18nProviderClient } = createI18nClient(
   languageMapping(),
   {
     fallbackLocale: enTranslation,
diff --git a/packages/translation/src/index.ts b/packages/translation/src/index.ts
index e7e7389e3..805b3e873 100644
--- a/packages/translation/src/index.ts
+++ b/packages/translation/src/index.ts
@@ -1,6 +1,7 @@
 import type { stringOrTranslation, TranslationFunction } from "./type";
 
 export * from "./type";
+export * from "./locale-attributes";
 
 export const supportedLanguages = ["en", "de"] as const;
 export type SupportedLanguage = (typeof supportedLanguages)[number];
@@ -8,10 +9,7 @@ export type SupportedLanguage = (typeof supportedLanguages)[number];
 export const defaultLocale = "en";
 export { languageMapping } from "./lang";
 
-export const translateIfNecessary = (
-  t: TranslationFunction,
-  value: stringOrTranslation | undefined,
-) => {
+export const translateIfNecessary = (t: TranslationFunction, value: stringOrTranslation | undefined) => {
   if (typeof value === "function") {
     return value(t);
   }
diff --git a/packages/translation/src/lang.ts b/packages/translation/src/lang.ts
index 42f624c12..7765d1cce 100644
--- a/packages/translation/src/lang.ts
+++ b/packages/translation/src/lang.ts
@@ -6,12 +6,8 @@ export const languageMapping = () => {
   const mapping: Record<string, unknown> = {};
 
   for (const language of supportedLanguages) {
-    mapping[language] = () =>
-      import(`./lang/${language}`) as ReturnType<typeof enTranslations>;
+    mapping[language] = () => import(`./lang/${language}`) as ReturnType<typeof enTranslations>;
   }
 
-  return mapping as Record<
-    (typeof supportedLanguages)[number],
-    () => ReturnType<typeof enTranslations>
-  >;
+  return mapping as Record<(typeof supportedLanguages)[number], () => ReturnType<typeof enTranslations>>;
 };
diff --git a/packages/translation/src/lang/de.ts b/packages/translation/src/lang/de.ts
index db314a4a8..e0cbe8b72 100644
--- a/packages/translation/src/lang/de.ts
+++ b/packages/translation/src/lang/de.ts
@@ -93,8 +93,7 @@ export default {
     },
     testConnection: {
       action: "Verbindung überprüfen",
-      alertNotice:
-        "Der Button zum Speichern wird aktiviert, sobald die Verbindung erfolgreich überprüft wurde",
+      alertNotice: "Der Button zum Speichern wird aktiviert, sobald die Verbindung erfolgreich überprüft wurde",
       notification: {
         success: {
           title: "Verbindung erfolgreich",
@@ -121,8 +120,7 @@ export default {
     secrets: {
       title: "Zugangsdaten",
       lastUpdated: "Zuletzt geändert {date}",
-      secureNotice:
-        "Diese Zugangsdaten können nach der Erstellung nicht mehr ausgelesen werden",
+      secureNotice: "Diese Zugangsdaten können nach der Erstellung nicht mehr ausgelesen werden",
       reset: {
         title: "Zugangsdaten zurücksetzen",
         message: "Möchtest du diese Zugangsdaten wirklich zurücksetzen?",
@@ -172,8 +170,7 @@ export default {
       option: {
         is24HourFormat: {
           label: "24-Stunden Format",
-          description:
-            "Verwende das 24-Stunden Format anstelle des 12-Stunden Formats",
+          description: "Verwende das 24-Stunden Format anstelle des 12-Stunden Formats",
         },
         isLocaleTime: {
           label: "Lokale Zeit verwenden",
diff --git a/packages/translation/src/lang/en.ts b/packages/translation/src/lang/en.ts
index c019f6889..3ba679d51 100644
--- a/packages/translation/src/lang/en.ts
+++ b/packages/translation/src/lang/en.ts
@@ -121,8 +121,7 @@ export default {
         label: "Delete user permanently",
         description:
           "Deletes this user including their preferences. Will not delete any boards. User will not be notified.",
-        confirm:
-          "Are you sure, that you want to delete the user {username} with his preferences?",
+        confirm: "Are you sure, that you want to delete the user {username} with his preferences?",
       },
       select: {
         label: "Select user",
@@ -147,8 +146,7 @@ export default {
         item: {
           admin: {
             label: "Administrator",
-            description:
-              "Members with this permission have full access to all features and settings",
+            description: "Members with this permission have full access to all features and settings",
           },
         },
       },
@@ -165,8 +163,7 @@ export default {
           },
           "modify-all": {
             label: "Modify all boards",
-            description:
-              "Allow members to modify all boards (Does not include access control and danger zone)",
+            description: "Allow members to modify all boards (Does not include access control and danger zone)",
           },
           "full-access": {
             label: "Full board access",
@@ -184,8 +181,7 @@ export default {
           },
           "use-all": {
             label: "Use all integrations",
-            description:
-              "Allows members to add any integrations to their boards",
+            description: "Allows members to add any integrations to their boards",
           },
           "interact-all": {
             label: "Interact with any integration",
@@ -193,8 +189,7 @@ export default {
           },
           "full-access": {
             label: "Full integration access",
-            description:
-              "Allow members to manage, use and interact with any integration",
+            description: "Allow members to manage, use and interact with any integration",
           },
         },
       },
@@ -214,8 +209,7 @@ export default {
       transfer: {
         label: "Transfer ownership",
         description: "Transfer ownership of this group to another user.",
-        confirm:
-          "Are you sure you want to transfer ownership for the group {name} to {username}?",
+        confirm: "Are you sure you want to transfer ownership for the group {name} to {username}?",
         notification: {
           success: {
             message: "Transfered group {group} successfully to {user}",
@@ -234,8 +228,7 @@ export default {
       },
       delete: {
         label: "Delete group",
-        description:
-          "Once you delete a group, there is no going back. Please be certain.",
+        description: "Once you delete a group, there is no going back. Please be certain.",
         confirm: "Are you sure you want to delete the group {name}?",
         notification: {
           success: {
@@ -386,8 +379,7 @@ export default {
     },
     testConnection: {
       action: "Test connection",
-      alertNotice:
-        "The Save button is enabled once a successful connection is established",
+      alertNotice: "The Save button is enabled once a successful connection is established",
       notification: {
         success: {
           title: "Connection successful",
@@ -457,8 +449,7 @@ export default {
       checkoutDocs: "Check out the documentation",
     },
     iconPicker: {
-      header:
-        "Type name or objects to filter for icons... Homarr will search through {countIcons} icons for you.",
+      header: "Type name or objects to filter for icons... Homarr will search through {countIcons} icons for you.",
     },
     notification: {
       create: {
@@ -481,6 +472,10 @@ export default {
     multiSelect: {
       placeholder: "Pick one or more values",
     },
+    multiText: {
+      placeholder: "Add more values",
+      addLabel: `Add {value}`,
+    },
     select: {
       placeholder: "Pick value",
       badge: {
@@ -505,7 +500,7 @@ export default {
         preferences: "Your preferences",
         logout: "Logout",
         login: "Login",
-        navigateDefaultBoard: "Navigate to default board",
+        homeBoard: "Your home board",
         loggedOut: "Logged out",
       },
     },
@@ -515,6 +510,31 @@ export default {
       show: "Show preview",
       hide: "Hide preview",
     },
+    zod: {
+      errors: {
+        default: "This field is invalid",
+        required: "This field is required",
+        string: {
+          startsWith: "This field must start with {startsWith}",
+          endsWith: "This field must end with {endsWith}",
+          includes: "This field must include {includes}",
+          invalidEmail: "This field must be a valid email",
+        },
+        tooSmall: {
+          string: "This field must be at least {minimum} characters long",
+          number: "This field must be greater than or equal to {minimum}",
+        },
+        tooBig: {
+          string: "This field must be at most {maximum} characters long",
+          number: "This field must be less than or equal to {maximum}",
+        },
+        custom: {
+          passwordsDoNotMatch: "Passwords do not match",
+          boardAlreadyExists: "A board with this name already exists",
+          // TODO: Add custom error messages
+        },
+      },
+    },
   },
   section: {
     category: {
@@ -581,10 +601,17 @@ export default {
     },
     edit: {
       title: "Edit item",
+      advancedOptions: {
+        label: "Advanced options",
+        title: "Advanced item options",
+      },
       field: {
         integrations: {
           label: "Integrations",
         },
+        customCssClasses: {
+          label: "Custom css classes",
+        },
       },
     },
     remove: {
@@ -620,8 +647,7 @@ export default {
       option: {
         customTitleToggle: {
           label: "Custom Title/City display",
-          description:
-            "Show off a custom title or the name of the city/country on top of the clock.",
+          description: "Show off a custom title or the name of the city/country on top of the clock.",
         },
         customTitle: {
           label: "Title",
@@ -712,8 +738,7 @@ export default {
     },
     iframe: {
       name: "iFrame",
-      description:
-        "Embed any content from the internet. Some websites may restrict access.",
+      description: "Embed any content from the internet. Some websites may restrict access.",
       option: {
         embedUrl: {
           label: "Embed URL",
@@ -745,14 +770,12 @@ export default {
       },
       error: {
         noUrl: "No iFrame URL provided",
-        noBrowerSupport:
-          "Your Browser does not support iframes. Please update your browser.",
+        noBrowerSupport: "Your Browser does not support iframes. Please update your browser.",
       },
     },
     weather: {
       name: "Weather",
-      description:
-        "Displays the current weather information of a set location.",
+      description: "Displays the current weather information of a set location.",
       option: {
         isFormatFahrenheit: {
           label: "Temperature in Fahrenheit",
@@ -768,8 +791,7 @@ export default {
         },
         forecastDayCount: {
           label: "Amount of forecast days",
-          description:
-            "When the widget is not wide enough, less days are shown",
+          description: "When the widget is not wide enough, less days are shown",
         },
       },
       kind: {
@@ -822,8 +844,7 @@ export default {
         },
         hasAutoPlay: {
           label: "Autoplay",
-          description:
-            "Autoplay only works when muted because of browser restrictions",
+          description: "Autoplay only works when muted because of browser restrictions",
         },
         isMuted: {
           label: "Muted",
@@ -896,13 +917,11 @@ export default {
         option: {
           repeat: {
             label: "Repeat",
-            description:
-              "The image is repeated as much as needed to cover the whole background image painting area.",
+            description: "The image is repeated as much as needed to cover the whole background image painting area.",
           },
           "no-repeat": {
             label: "No repeat",
-            description:
-              "The image is not repeated and may not fill the entire space.",
+            description: "The image is not repeated and may not fill the entire space.",
           },
           "repeat-x": {
             label: "Repeat X",
@@ -939,7 +958,13 @@ export default {
         label: "Opacity",
       },
       customCss: {
-        label: "Custom CSS",
+        label: "Custom css for this board",
+        description: "Further, customize your dashboard using CSS, only recommended for experienced users",
+        customClassesAlert: {
+          title: "Custom classes",
+          description:
+            "You can add custom classes to your board items in the advanced options of each item and use them in the custom CSS above.",
+        },
       },
       columnCount: {
         label: "Column count",
@@ -948,13 +973,15 @@ export default {
         label: "Name",
       },
     },
+    content: {
+      metaTitle: "{boardName} board",
+    },
     setting: {
       title: "Settings for {boardName} board",
       section: {
         general: {
           title: "General",
-          unrecognizedLink:
-            "The provided link is not recognized and won't preview, it might still work.",
+          unrecognizedLink: "The provided link is not recognized and won't preview, it might still work.",
         },
         layout: {
           title: "Layout",
@@ -1011,8 +1038,7 @@ export default {
           action: {
             rename: {
               label: "Rename board",
-              description:
-                "Changing the name will break any links to this board.",
+              description: "Changing the name will break any links to this board.",
               button: "Change name",
               modal: {
                 title: "Rename board",
@@ -1043,8 +1069,7 @@ export default {
             },
             delete: {
               label: "Delete this board",
-              description:
-                "Once you delete a board, there is no going back. Please be certain.",
+              description: "Once you delete a board, there is no going back. Please be certain.",
               button: "Delete this board",
               confirm: {
                 title: "Delete board",
@@ -1089,6 +1114,7 @@ export default {
             logs: "Logs",
           },
         },
+        settings: "Settings",
         help: {
           label: "Help",
           items: {
@@ -1130,6 +1156,13 @@ export default {
           settings: {
             label: "Settings",
           },
+          setHomeBoard: {
+            label: "Set as your home board",
+            badge: {
+              label: "Home",
+              tooltip: "This board will show as your home board",
+            },
+          },
           delete: {
             label: "Delete permanently",
             confirm: {
@@ -1254,6 +1287,30 @@ export default {
           },
         },
       },
+      settings: {
+        title: "Settings",
+        section: {
+          analytics: {
+            title: "Analytics",
+            general: {
+              title: "Send anonymous analytics",
+              text: "Homarr will send anonymized analytics using the open source software Umami. It never collects any personal information and is therefore fully GDPR & CCPA compliant. We encourage you to enable analytics because it helps our open source team to identify issues and prioritize our backlog.",
+            },
+            widgetData: {
+              title: "Widget data",
+              text: "Send which widgets (and their quantity) you have configured. Does not include URLs, names or any other data.",
+            },
+            integrationData: {
+              title: "Integration data",
+              text: "Send which integrations (and their quantity) you have configured. Does not include URLs, names or any other data.",
+            },
+            usersData: {
+              title: "Users data",
+              text: "Send the amount of users and whether you've activated SSO",
+            },
+          },
+        },
+      },
       about: {
         version: "Version {version}",
         text: "Homarr is a community driven open source project that is being maintained by volunteers. Thanks to these people, Homarr has been a growing project since 2021. Our team is working completely remote from many different countries on Homarr in their leisure time for no compensation.",
diff --git a/packages/translation/src/locale-attributes.ts b/packages/translation/src/locale-attributes.ts
new file mode 100644
index 000000000..69967c003
--- /dev/null
+++ b/packages/translation/src/locale-attributes.ts
@@ -0,0 +1,21 @@
+import type { SupportedLanguage } from ".";
+
+export const localeAttributes: Record<
+  SupportedLanguage,
+  {
+    name: string;
+    translatedName: string;
+    flagIcon: string;
+  }
+> = {
+  de: {
+    name: "Deutsch",
+    translatedName: "German",
+    flagIcon: "de",
+  },
+  en: {
+    name: "English",
+    translatedName: "English",
+    flagIcon: "us",
+  },
+};
diff --git a/packages/translation/src/server.ts b/packages/translation/src/server.ts
index 481ca59cb..c7b32793a 100644
--- a/packages/translation/src/server.ts
+++ b/packages/translation/src/server.ts
@@ -3,9 +3,6 @@ import { createI18nServer } from "next-international/server";
 import { languageMapping } from "./lang";
 import enTranslation from "./lang/en";
 
-export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer(
-  languageMapping(),
-  {
-    fallbackLocale: enTranslation,
-  },
-);
+export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer(languageMapping(), {
+  fallbackLocale: enTranslation,
+});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 111b352f0..783154b52 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -29,7 +29,8 @@
     "typescript": "^5.4.5"
   },
   "dependencies": {
-    "@homarr/log": "workspace:^0.1.0"
+    "@homarr/log": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0"
   },
   "eslintConfig": {
     "extends": [
diff --git a/packages/ui/src/components/index.tsx b/packages/ui/src/components/index.tsx
index 5155f07de..425545c50 100644
--- a/packages/ui/src/components/index.tsx
+++ b/packages/ui/src/components/index.tsx
@@ -5,3 +5,4 @@ export { UserAvatar } from "./user-avatar";
 export { UserAvatarGroup } from "./user-avatar-group";
 export { TablePagination } from "./table-pagination";
 export { SearchInput } from "./search-input";
+export { TextMultiSelect } from "./text-multi-select";
diff --git a/packages/ui/src/components/search-input.tsx b/packages/ui/src/components/search-input.tsx
index 1cf182741..4a783d50a 100644
--- a/packages/ui/src/components/search-input.tsx
+++ b/packages/ui/src/components/search-input.tsx
@@ -12,10 +12,7 @@ interface SearchInputProps {
   placeholder: string;
 }
 
-export const SearchInput = ({
-  placeholder,
-  defaultValue,
-}: SearchInputProps) => {
+export const SearchInput = ({ placeholder, defaultValue }: SearchInputProps) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const { replace } = useRouter();
   const pathName = usePathname();
diff --git a/packages/ui/src/components/select-with-custom-items.tsx b/packages/ui/src/components/select-with-custom-items.tsx
index f8185e0f5..94b756a58 100644
--- a/packages/ui/src/components/select-with-custom-items.tsx
+++ b/packages/ui/src/components/select-with-custom-items.tsx
@@ -11,19 +11,15 @@ interface BaseSelectItem {
 }
 
 export interface SelectWithCustomItemsProps<TSelectItem extends BaseSelectItem>
-  extends Pick<
-    SelectProps,
-    "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder"
-  > {
+  extends Pick<SelectProps, "label" | "error" | "defaultValue" | "value" | "onChange" | "placeholder"> {
   data: TSelectItem[];
   onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
   onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
 }
 
-type Props<TSelectItem extends BaseSelectItem> =
-  SelectWithCustomItemsProps<TSelectItem> & {
-    SelectOption: React.ComponentType<TSelectItem>;
-  };
+type Props<TSelectItem extends BaseSelectItem> = SelectWithCustomItemsProps<TSelectItem> & {
+  SelectOption: React.ComponentType<TSelectItem>;
+};
 
 export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
   data,
@@ -45,10 +41,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
     onChange,
   });
 
-  const selectedOption = useMemo(
-    () => data.find((item) => item.value === _value),
-    [data, _value],
-  );
+  const selectedOption = useMemo(() => data.find((item) => item.value === _value), [data, _value]);
 
   const options = data.map((item) => (
     <Combobox.Option value={item.value} key={item.value}>
@@ -69,11 +62,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
   );
 
   return (
-    <Combobox
-      store={combobox}
-      withinPortal={false}
-      onOptionSubmit={onOptionSubmit}
-    >
+    <Combobox store={combobox} withinPortal={false} onOptionSubmit={onOptionSubmit}>
       <Combobox.Target>
         <InputBase
           {...props}
@@ -85,11 +74,7 @@ export const SelectWithCustomItems = <TSelectItem extends BaseSelectItem>({
           rightSectionPointerEvents="none"
           multiline
         >
-          {selectedOption ? (
-            <SelectOption {...selectedOption} />
-          ) : (
-            <Input.Placeholder>{placeholder}</Input.Placeholder>
-          )}
+          {selectedOption ? <SelectOption {...selectedOption} /> : <Input.Placeholder>{placeholder}</Input.Placeholder>}
         </InputBase>
       </Combobox.Target>
 
diff --git a/packages/ui/src/components/select-with-description-and-badge.tsx b/packages/ui/src/components/select-with-description-and-badge.tsx
index 0293c1e83..5874da042 100644
--- a/packages/ui/src/components/select-with-description-and-badge.tsx
+++ b/packages/ui/src/components/select-with-description-and-badge.tsx
@@ -15,19 +15,10 @@ export interface SelectItemWithDescriptionBadge {
 type Props = SelectWithCustomItemsProps<SelectItemWithDescriptionBadge>;
 
 export const SelectWithDescriptionBadge = (props: Props) => {
-  return (
-    <SelectWithCustomItems<SelectItemWithDescriptionBadge>
-      {...props}
-      SelectOption={SelectOption}
-    />
-  );
+  return <SelectWithCustomItems<SelectItemWithDescriptionBadge> {...props} SelectOption={SelectOption} />;
 };
 
-const SelectOption = ({
-  label,
-  description,
-  badge,
-}: SelectItemWithDescriptionBadge) => {
+const SelectOption = ({ label, description, badge }: SelectItemWithDescriptionBadge) => {
   return (
     <Group justify="space-between">
       <div>
diff --git a/packages/ui/src/components/select-with-description.tsx b/packages/ui/src/components/select-with-description.tsx
index c301effcc..bc5914216 100644
--- a/packages/ui/src/components/select-with-description.tsx
+++ b/packages/ui/src/components/select-with-description.tsx
@@ -13,12 +13,7 @@ export interface SelectItemWithDescription {
 type Props = SelectWithCustomItemsProps<SelectItemWithDescription>;
 
 export const SelectWithDescription = (props: Props) => {
-  return (
-    <SelectWithCustomItems<SelectItemWithDescription>
-      {...props}
-      SelectOption={SelectOption}
-    />
-  );
+  return <SelectWithCustomItems<SelectItemWithDescription> {...props} SelectOption={SelectOption} />;
 };
 
 const SelectOption = ({ label, description }: SelectItemWithDescription) => {
diff --git a/packages/ui/src/components/table-pagination.tsx b/packages/ui/src/components/table-pagination.tsx
index eefcc0168..83420ba54 100644
--- a/packages/ui/src/components/table-pagination.tsx
+++ b/packages/ui/src/components/table-pagination.tsx
@@ -47,23 +47,12 @@ export const TablePagination = ({ total }: TablePaginationProps) => {
   );
 
   return (
-    <Pagination
-      total={total}
-      getItemProps={getItemProps}
-      getControlProps={getControlProps}
-      onChange={handleChange}
-    />
+    <Pagination total={total} getItemProps={getItemProps} getControlProps={getControlProps} onChange={handleChange} />
   );
 };
 
-type ControlType = Parameters<
-  Exclude<PaginationProps["getControlProps"], undefined>
->[0];
-const calculatePageFor = (
-  type: ControlType,
-  current: number,
-  total: number,
-) => {
+type ControlType = Parameters<Exclude<PaginationProps["getControlProps"], undefined>>[0];
+const calculatePageFor = (type: ControlType, current: number, total: number) => {
   switch (type) {
     case "first":
       return 1;
diff --git a/packages/ui/src/components/text-multi-select.tsx b/packages/ui/src/components/text-multi-select.tsx
new file mode 100644
index 000000000..e63d570dc
--- /dev/null
+++ b/packages/ui/src/components/text-multi-select.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import type { FocusEventHandler } from "react";
+import { useState } from "react";
+import { Combobox, Group, Pill, PillsInput, Text, useCombobox } from "@mantine/core";
+import { IconPlus } from "@tabler/icons-react";
+
+import { useI18n } from "@homarr/translation/client";
+
+interface TextMultiSelectProps {
+  label: string;
+  value?: string[];
+  onChange: (value: string[]) => void;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  error?: string;
+}
+
+export const TextMultiSelect = ({ label, value = [], onChange, onBlur, onFocus, error }: TextMultiSelectProps) => {
+  const t = useI18n();
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: () => combobox.updateSelectedOptionIndex("active"),
+  });
+
+  const [search, setSearch] = useState("");
+
+  const exactOptionMatch = value.some((item) => item === search);
+
+  const handleValueSelect = (selectedValue: string) => {
+    setSearch("");
+
+    if (selectedValue === "$create") {
+      onChange([...value, search]);
+    } else {
+      onChange(value.filter((filterValue) => filterValue !== selectedValue));
+    }
+  };
+
+  const handleValueRemove = (removedValue: string) =>
+    onChange(value.filter((filterValue) => filterValue !== removedValue));
+
+  const values = value.map((item) => (
+    <Pill key={item} withRemoveButton onRemove={() => handleValueRemove(item)}>
+      {item}
+    </Pill>
+  ));
+
+  return (
+    <Combobox store={combobox} onOptionSubmit={handleValueSelect} withinPortal={false}>
+      <Combobox.DropdownTarget>
+        <PillsInput label={label} error={error} onClick={() => combobox.openDropdown()}>
+          <Pill.Group>
+            {values}
+
+            <Combobox.EventsTarget>
+              <PillsInput.Field
+                onFocus={(event) => {
+                  onFocus?.(event);
+                  combobox.openDropdown();
+                }}
+                onBlur={(event) => {
+                  onBlur?.(event);
+                  combobox.closeDropdown();
+                }}
+                value={search}
+                placeholder={t("common.multiText.placeholder")}
+                onChange={(event) => {
+                  combobox.updateSelectedOptionIndex();
+                  setSearch(event.currentTarget.value);
+                }}
+                onKeyDown={(event) => {
+                  if (event.key === "Backspace" && search.length === 0) {
+                    event.preventDefault();
+                    handleValueRemove(value.at(-1)!);
+                  }
+                }}
+              />
+            </Combobox.EventsTarget>
+          </Pill.Group>
+        </PillsInput>
+      </Combobox.DropdownTarget>
+
+      {!exactOptionMatch && search.trim().length > 0 && (
+        <Combobox.Dropdown>
+          <Combobox.Options>
+            <Combobox.Option value="$create">
+              <Group>
+                <IconPlus size={12} />
+                <Text size="sm">{t("common.multiText.addLabel", { value: search })}</Text>
+              </Group>
+            </Combobox.Option>
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      )}
+    </Combobox>
+  );
+};
diff --git a/packages/ui/src/components/user-avatar-group.tsx b/packages/ui/src/components/user-avatar-group.tsx
index cb838c814..1aa2fbf6b 100644
--- a/packages/ui/src/components/user-avatar-group.tsx
+++ b/packages/ui/src/components/user-avatar-group.tsx
@@ -10,11 +10,7 @@ interface UserAvatarGroupProps {
   users: UserProps[];
 }
 
-export const UserAvatarGroup = ({
-  size,
-  limit,
-  users,
-}: UserAvatarGroupProps) => {
+export const UserAvatarGroup = ({ size, limit, users }: UserAvatarGroupProps) => {
   return (
     <TooltipGroup openDelay={300} closeDelay={300}>
       <AvatarGroup>
diff --git a/packages/ui/src/components/user-avatar.tsx b/packages/ui/src/components/user-avatar.tsx
index 41369225c..805be9c9b 100644
--- a/packages/ui/src/components/user-avatar.tsx
+++ b/packages/ui/src/components/user-avatar.tsx
@@ -22,7 +22,5 @@ export const UserAvatar = ({ user, size }: UserAvatarProps) => {
     return <Avatar {...commonProps} src={user.image} alt={user.name} />;
   }
 
-  return (
-    <Avatar {...commonProps}>{user.name.substring(0, 2).toUpperCase()}</Avatar>
-  );
+  return <Avatar {...commonProps}>{user.name.substring(0, 2).toUpperCase()}</Avatar>;
 };
diff --git a/packages/validation/package.json b/packages/validation/package.json
index 356189fdf..fa45fba35 100644
--- a/packages/validation/package.json
+++ b/packages/validation/package.json
@@ -4,7 +4,8 @@
   "version": "0.1.0",
   "type": "module",
   "exports": {
-    ".": "./index.ts"
+    ".": "./index.ts",
+    "./form": "./src/form/i18n.ts"
   },
   "typesVersions": {
     "*": {
@@ -35,6 +36,7 @@
   "prettier": "@homarr/prettier-config",
   "dependencies": {
     "zod": "^3.23.8",
-    "@homarr/definitions": "workspace:^0.1.0"
+    "@homarr/definitions": "workspace:^0.1.0",
+    "@homarr/translation": "workspace:^0.1.0"
   }
 }
diff --git a/packages/validation/src/board.ts b/packages/validation/src/board.ts
index b908ab591..42577f1f3 100644
--- a/packages/validation/src/board.ts
+++ b/packages/validation/src/board.ts
@@ -16,7 +16,7 @@ const boardNameSchema = z
   .string()
   .min(1)
   .max(255)
-  .regex(/^[A-Za-z0-9-\\._]+$/);
+  .regex(/^[A-Za-z0-9-\\._]*$/);
 
 const byNameSchema = z.object({
   name: boardNameSchema,
@@ -53,12 +53,7 @@ const savePartialSettingsSchema = z
     customCss: z.string().max(16384),
     columnCount: z.number().min(1).max(24),
   })
-  .partial()
-  .and(
-    z.object({
-      id: z.string(),
-    }),
-  );
+  .partial();
 
 const saveSchema = z.object({
   id: z.string(),
diff --git a/packages/validation/src/enums.ts b/packages/validation/src/enums.ts
index d9644a776..f9e59ef89 100644
--- a/packages/validation/src/enums.ts
+++ b/packages/validation/src/enums.ts
@@ -2,10 +2,8 @@ import { z } from "zod";
 
 type CouldBeReadonlyArray<T> = T[] | readonly T[];
 
-export const zodEnumFromArray = <T extends string>(
-  array: CouldBeReadonlyArray<T>,
-) => z.enum([array[0]!, ...array.slice(1)]);
+export const zodEnumFromArray = <T extends string>(array: CouldBeReadonlyArray<T>) =>
+  z.enum([array[0]!, ...array.slice(1)]);
 
-export const zodUnionFromArray = <T extends z.ZodTypeAny>(
-  array: CouldBeReadonlyArray<T>,
-) => z.union([array[0]!, array[1]!, ...array.slice(2)]);
+export const zodUnionFromArray = <T extends z.ZodTypeAny>(array: CouldBeReadonlyArray<T>) =>
+  z.union([array[0]!, array[1]!, ...array.slice(2)]);
diff --git a/packages/validation/src/form/i18n.ts b/packages/validation/src/form/i18n.ts
new file mode 100644
index 000000000..08f97e988
--- /dev/null
+++ b/packages/validation/src/form/i18n.ts
@@ -0,0 +1,135 @@
+import type { ErrorMapCtx, z, ZodTooBigIssue, ZodTooSmallIssue } from "zod";
+import { ZodIssueCode } from "zod";
+
+import type { TranslationObject } from "@homarr/translation";
+
+export const zodErrorMap = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TFunction extends (key: string, ...params: any[]) => string,
+>(
+  t: TFunction,
+) => {
+  return (issue: z.ZodIssueOptionalMessage, ctx: ErrorMapCtx) => {
+    const error = handleZodError(issue, ctx);
+    if ("message" in error && error.message)
+      return {
+        message: error.message ?? ctx.defaultError,
+      };
+    return {
+      message: t(error.key ? `common.zod.${error.key}` : "common.zod.errors.default", error.params ?? {}),
+    };
+  };
+};
+
+const handleStringError = (issue: z.ZodInvalidStringIssue) => {
+  if (issue.validation === "email") {
+    return {
+      key: "errors.string.invalidEmail",
+    } as const;
+  }
+
+  if (typeof issue.validation === "object") {
+    if ("startsWith" in issue.validation) {
+      return {
+        key: "errors.string.startsWith",
+        params: {
+          startsWith: issue.validation.startsWith,
+        },
+      } as const;
+    } else if ("endsWith" in issue.validation) {
+      return {
+        key: "errors.string.endsWith",
+        params: {
+          endsWith: issue.validation.endsWith,
+        },
+      } as const;
+    }
+
+    return {
+      key: "errors.invalid_string.includes",
+      params: {
+        includes: issue.validation.includes,
+      },
+    } as const;
+  }
+
+  return {
+    message: issue.message,
+  };
+};
+
+const handleTooSmallError = (issue: ZodTooSmallIssue) => {
+  if (issue.type !== "string" && issue.type !== "number") {
+    return {
+      message: issue.message,
+    };
+  }
+
+  if (issue.type === "string" && issue.minimum === 1) {
+    return {
+      key: "errors.required",
+    } as const;
+  }
+
+  return {
+    key: `errors.tooSmall.${issue.type}`,
+    params: {
+      minimum: issue.minimum,
+      count: issue.minimum,
+    },
+  } as const;
+};
+
+const handleTooBigError = (issue: ZodTooBigIssue) => {
+  if (issue.type !== "string" && issue.type !== "number") {
+    return {
+      message: issue.message,
+    };
+  }
+
+  return {
+    key: `errors.tooBig.${issue.type}`,
+    params: {
+      maximum: issue.maximum,
+      count: issue.maximum,
+    },
+  } as const;
+};
+
+const handleZodError = (issue: z.ZodIssueOptionalMessage, ctx: ErrorMapCtx) => {
+  if (ctx.defaultError === "Required") {
+    return {
+      key: "errors.required",
+      params: {},
+    } as const;
+  }
+  if (issue.code === ZodIssueCode.invalid_string) {
+    return handleStringError(issue);
+  }
+  if (issue.code === ZodIssueCode.too_small) {
+    return handleTooSmallError(issue);
+  }
+  if (issue.code === ZodIssueCode.too_big) {
+    return handleTooBigError(issue);
+  }
+  if (issue.code === ZodIssueCode.custom && issue.params?.i18n) {
+    const { i18n } = issue.params as CustomErrorParams;
+    return {
+      key: `errors.custom.${i18n.key}`,
+    } as const;
+  }
+
+  return {
+    message: issue.message,
+  };
+};
+
+export interface CustomErrorParams {
+  i18n: {
+    key: keyof TranslationObject["common"]["zod"]["errors"]["custom"];
+    params?: Record<string, unknown>;
+  };
+}
+
+export const createCustomErrorParams = (i18n: CustomErrorParams["i18n"] | CustomErrorParams["i18n"]["key"]) =>
+  typeof i18n === "string" ? { i18n: { key: i18n } } : { i18n };
diff --git a/packages/validation/src/index.ts b/packages/validation/src/index.ts
index 9d3c503be..34c4211c5 100644
--- a/packages/validation/src/index.ts
+++ b/packages/validation/src/index.ts
@@ -21,5 +21,7 @@ export const validation = {
 export {
   createSectionSchema,
   sharedItemSchema,
+  itemAdvancedOptionsSchema,
   type BoardItemIntegration,
+  type BoardItemAdvancedOptions,
 } from "./shared";
diff --git a/packages/validation/src/shared.ts b/packages/validation/src/shared.ts
index c5aa875a2..46b2de2c1 100644
--- a/packages/validation/src/shared.ts
+++ b/packages/validation/src/shared.ts
@@ -13,6 +13,12 @@ export const integrationSchema = z.object({
 
 export type BoardItemIntegration = z.infer<typeof integrationSchema>;
 
+export const itemAdvancedOptionsSchema = z.object({
+  customCssClasses: z.array(z.string()).default([]),
+});
+
+export type BoardItemAdvancedOptions = z.infer<typeof itemAdvancedOptionsSchema>;
+
 export const sharedItemSchema = z.object({
   id: z.string(),
   xOffset: z.number(),
@@ -20,6 +26,7 @@ export const sharedItemSchema = z.object({
   height: z.number(),
   width: z.number(),
   integrations: z.array(integrationSchema),
+  advancedOptions: itemAdvancedOptionsSchema,
 });
 
 export const commonItemSchema = z
@@ -29,9 +36,7 @@ export const commonItemSchema = z
   })
   .and(sharedItemSchema);
 
-const createCategorySchema = <TItemSchema extends z.ZodTypeAny>(
-  itemSchema: TItemSchema,
-) =>
+const createCategorySchema = <TItemSchema extends z.ZodTypeAny>(itemSchema: TItemSchema) =>
   z.object({
     id: z.string(),
     name: z.string(),
@@ -40,9 +45,7 @@ const createCategorySchema = <TItemSchema extends z.ZodTypeAny>(
     items: z.array(itemSchema),
   });
 
-const createEmptySchema = <TItemSchema extends z.ZodTypeAny>(
-  itemSchema: TItemSchema,
-) =>
+const createEmptySchema = <TItemSchema extends z.ZodTypeAny>(itemSchema: TItemSchema) =>
   z.object({
     id: z.string(),
     kind: z.literal("empty"),
@@ -50,6 +53,5 @@ const createEmptySchema = <TItemSchema extends z.ZodTypeAny>(
     items: z.array(itemSchema),
   });
 
-export const createSectionSchema = <TItemSchema extends z.ZodTypeAny>(
-  itemSchema: TItemSchema,
-) => z.union([createCategorySchema(itemSchema), createEmptySchema(itemSchema)]);
+export const createSectionSchema = <TItemSchema extends z.ZodTypeAny>(itemSchema: TItemSchema) =>
+  z.union([createCategorySchema(itemSchema), createEmptySchema(itemSchema)]);
diff --git a/packages/validation/src/user.ts b/packages/validation/src/user.ts
index 02bf45acc..9653b7991 100644
--- a/packages/validation/src/user.ts
+++ b/packages/validation/src/user.ts
@@ -1,25 +1,33 @@
 import { z } from "zod";
 
+import { createCustomErrorParams } from "./form/i18n";
+
 const usernameSchema = z.string().min(3).max(255);
 const passwordSchema = z.string().min(8).max(255);
 
+const confirmPasswordRefine = [
+  (data: { password: string; confirmPassword: string }) => data.password === data.confirmPassword,
+  {
+    path: ["confirmPassword"],
+    params: createCustomErrorParams("passwordsDoNotMatch"),
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+] satisfies [(args: any) => boolean, unknown];
+
 const createUserSchema = z
   .object({
     username: usernameSchema,
     password: passwordSchema,
     confirmPassword: z.string(),
-    email: z.string().email().optional(),
+    email: z.string().email().or(z.string().length(0).optional()),
   })
-  .refine((data) => data.password === data.confirmPassword, {
-    path: ["confirmPassword"],
-    message: "Passwords do not match",
-  });
+  .refine(confirmPasswordRefine[0], confirmPasswordRefine[1]);
 
 const initUserSchema = createUserSchema;
 
 const signInSchema = z.object({
-  name: z.string(),
-  password: z.string(),
+  name: z.string().min(1),
+  password: z.string().min(1),
 });
 
 const registrationSchema = z
@@ -28,10 +36,7 @@ const registrationSchema = z
     password: passwordSchema,
     confirmPassword: z.string(),
   })
-  .refine((data) => data.password === data.confirmPassword, {
-    path: ["confirmPassword"],
-    message: "Passwords do not match",
-  });
+  .refine(confirmPasswordRefine[0], confirmPasswordRefine[1]);
 
 const registrationSchemaApi = registrationSchema.and(
   z.object({
@@ -54,18 +59,13 @@ const editProfileSchema = z.object({
 
 const changePasswordSchema = z
   .object({
-    previousPassword: z.string(),
+    previousPassword: z.string().min(1),
     password: passwordSchema,
     confirmPassword: z.string(),
   })
-  .refine((data) => data.password === data.confirmPassword, {
-    path: ["confirmPassword"],
-    message: "Passwords do not match",
-  });
+  .refine(confirmPasswordRefine[0], confirmPasswordRefine[1]);
 
-const changePasswordApiSchema = changePasswordSchema.and(
-  z.object({ userId: z.string() }),
-);
+const changePasswordApiSchema = changePasswordSchema.and(z.object({ userId: z.string() }));
 
 export const userSchemas = {
   signIn: signInSchema,
diff --git a/packages/widgets/package.json b/packages/widgets/package.json
index dde1e0d8a..a31e97954 100644
--- a/packages/widgets/package.json
+++ b/packages/widgets/package.json
@@ -23,6 +23,7 @@
     "@homarr/eslint-config": "workspace:^0.2.0",
     "@homarr/prettier-config": "workspace:^0.1.0",
     "@homarr/tsconfig": "workspace:^0.1.0",
+    "@types/prismjs": "^1.26.4",
     "@types/video.js": "^7.3.58",
     "eslint": "^8.57.0",
     "typescript": "^5.4.5"
@@ -40,17 +41,15 @@
     "@homarr/form": "workspace:^0.1.0",
     "@homarr/modals": "workspace:^0.1.0",
     "@homarr/notifications": "workspace:^0.1.0",
-    "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/redis": "workspace:^0.1.0",
+    "@homarr/spotlight": "workspace:^0.1.0",
     "@homarr/translation": "workspace:^0.1.0",
     "@homarr/ui": "workspace:^0.1.0",
     "@homarr/validation": "workspace:^0.1.0",
-    "@tiptap/extension-link": "^2.4.0",
-    "@tiptap/react": "^2.4.0",
-    "@tiptap/starter-kit": "^2.4.0",
     "@tiptap/extension-color": "2.4.0",
     "@tiptap/extension-highlight": "2.4.0",
     "@tiptap/extension-image": "2.4.0",
+    "@tiptap/extension-link": "^2.4.0",
     "@tiptap/extension-table": "2.4.0",
     "@tiptap/extension-table-cell": "2.4.0",
     "@tiptap/extension-table-header": "2.4.0",
@@ -60,6 +59,10 @@
     "@tiptap/extension-text-align": "2.4.0",
     "@tiptap/extension-text-style": "2.4.0",
     "@tiptap/extension-underline": "2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "prismjs": "^1.29.0",
+    "react-simple-code-editor": "^0.13.1",
     "video.js": "^8.12.0"
   }
 }
diff --git a/packages/widgets/src/_inputs/common.tsx b/packages/widgets/src/_inputs/common.tsx
index 486c4b650..17d03aecf 100644
--- a/packages/widgets/src/_inputs/common.tsx
+++ b/packages/widgets/src/_inputs/common.tsx
@@ -9,9 +9,7 @@ export interface CommonWidgetInputProps<TKey extends WidgetOptionType> {
   options: Omit<WidgetOptionOfType<TKey>, "defaultValue" | "type">;
 }
 
-type UseWidgetInputTranslationReturnType = (
-  key: "label" | "description",
-) => string;
+type UseWidgetInputTranslationReturnType = (key: "label" | "description") => string;
 
 /**
  * Short description why as and unknown convertions are used below:
@@ -23,10 +21,7 @@ type UseWidgetInputTranslationReturnType = (
  * - The label translation can be used for every input, especially considering that all options should have defined a label for themself. The description translation should only be used when withDescription
  *   is defined for the option. The method does sadly not reconize issues with those definitions. So it does not yell at you when you somewhere show the label without having it defined in the translations.
  */
-export const useWidgetInputTranslation = (
-  kind: WidgetKind,
-  property: string,
-): UseWidgetInputTranslationReturnType => {
+export const useWidgetInputTranslation = (kind: WidgetKind, property: string): UseWidgetInputTranslationReturnType => {
   return useScopedI18n(
     `widget.${kind}.option.${property}` as never, // Because the type is complex and not recognized by typescript, we need to cast it to never to make it work.
   ) as unknown as UseWidgetInputTranslationReturnType;
diff --git a/packages/widgets/src/_inputs/form.ts b/packages/widgets/src/_inputs/form.ts
index c90b4d402..207eee02d 100644
--- a/packages/widgets/src/_inputs/form.ts
+++ b/packages/widgets/src/_inputs/form.ts
@@ -5,4 +5,4 @@ import { createFormContext } from "@homarr/form";
 import type { WidgetEditModalState } from "../modals/widget-edit-modal";
 
 export const [FormProvider, useFormContext, useForm] =
-  createFormContext<WidgetEditModalState>();
+  createFormContext<Omit<WidgetEditModalState, "advancedOptions">>();
diff --git a/packages/widgets/src/_inputs/index.ts b/packages/widgets/src/_inputs/index.ts
index 558872aee..c702d7238 100644
--- a/packages/widgets/src/_inputs/index.ts
+++ b/packages/widgets/src/_inputs/index.ts
@@ -20,8 +20,6 @@ const mapping = {
   app: WidgetAppInput,
 } satisfies Record<WidgetOptionType, unknown>;
 
-export const getInputForType = <TType extends WidgetOptionType>(
-  type: TType,
-) => {
+export const getInputForType = <TType extends WidgetOptionType>(type: TType) => {
   return mapping[type];
 };
diff --git a/packages/widgets/src/_inputs/widget-app-input.tsx b/packages/widgets/src/_inputs/widget-app-input.tsx
index 2ff70eb28..04a85d468 100644
--- a/packages/widgets/src/_inputs/widget-app-input.tsx
+++ b/packages/widgets/src/_inputs/widget-app-input.tsx
@@ -12,11 +12,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetAppInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"app">) => {
+export const WidgetAppInput = ({ property, kind, options }: CommonWidgetInputProps<"app">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
   const { data: apps, isPending } = clientApi.app.selectable.useQuery();
@@ -31,9 +27,7 @@ export const WidgetAppInput = ({
       label={t("label")}
       searchable
       limit={10}
-      leftSection={
-        <MemoizedLeftSection isPending={isPending} currentApp={currentApp} />
-      }
+      leftSection={<MemoizedLeftSection isPending={isPending} currentApp={currentApp} />}
       renderOption={renderSelectOption}
       data={
         apps?.map((app) => ({
@@ -55,18 +49,13 @@ const iconProps = {
   size: 18,
 };
 
-const renderSelectOption: SelectProps["renderOption"] = ({
-  option,
-  checked,
-}) => (
+const renderSelectOption: SelectProps["renderOption"] = ({ option, checked }) => (
   <Group flex="1" gap="xs">
     {"iconUrl" in option && typeof option.iconUrl === "string" ? (
       <img width={20} height={20} src={option.iconUrl} alt={option.label} />
     ) : null}
     {option.label}
-    {checked && (
-      <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />
-    )}
+    {checked && <IconCheck style={{ marginInlineStart: "auto" }} {...iconProps} />}
   </Group>
 );
 
@@ -82,14 +71,7 @@ const LeftSection = ({ isPending, currentApp }: LeftSectionProps) => {
   }
 
   if (currentApp) {
-    return (
-      <img
-        width={size}
-        height={size}
-        src={currentApp.iconUrl}
-        alt={currentApp.name}
-      />
-    );
+    return <img width={size} height={size} src={currentApp.iconUrl} alt={currentApp.name} />;
   }
 
   return null;
diff --git a/packages/widgets/src/_inputs/widget-location-input.tsx b/packages/widgets/src/_inputs/widget-location-input.tsx
index 9b035c515..baa6aca42 100644
--- a/packages/widgets/src/_inputs/widget-location-input.tsx
+++ b/packages/widgets/src/_inputs/widget-location-input.tsx
@@ -28,10 +28,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetLocationInput = ({
-  property,
-  kind,
-}: CommonWidgetInputProps<"location">) => {
+export const WidgetLocationInput = ({ property, kind }: CommonWidgetInputProps<"location">) => {
   const t = useWidgetInputTranslation(kind, property);
   const tLocation = useScopedI18n("widget.common.location");
   const form = useFormContext();
@@ -39,8 +36,7 @@ export const WidgetLocationInput = ({
   const value = form.values.options[property] as OptionLocation;
   const selectionEnabled = value.name.length > 1;
 
-  const handleChange = form.getInputProps(`options.${property}`)
-    .onChange as LocationOnChange;
+  const handleChange = form.getInputProps(`options.${property}`).onChange as LocationOnChange;
   const unknownLocation = tLocation("unknownLocation");
 
   const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -95,16 +91,8 @@ export const WidgetLocationInput = ({
     <Fieldset legend={t("label")}>
       <Stack gap="xs">
         <Group wrap="nowrap" align="end">
-          <TextInput
-            w="100%"
-            label={tLocation("query")}
-            value={value.name}
-            onChange={onQueryChange}
-          />
-          <Tooltip
-            hidden={selectionEnabled}
-            label={tLocation("disabledTooltip")}
-          >
+          <TextInput w="100%" label={tLocation("query")} value={value.name} onChange={onQueryChange} />
+          <Tooltip hidden={selectionEnabled} label={tLocation("disabledTooltip")}>
             <div>
               <Button
                 disabled={!selectionEnabled}
@@ -151,61 +139,57 @@ interface LocationSearchInnerProps {
   onLocationSelect: (location: OptionLocation) => void;
 }
 
-const LocationSearchModal = createModal<LocationSearchInnerProps>(
-  ({ actions, innerProps }) => {
-    const t = useScopedI18n("widget.common.location.table");
-    const tCommon = useScopedI18n("common");
-    const { data, isPending, error } = clientApi.location.searchCity.useQuery({
-      query: innerProps.query,
-    });
+const LocationSearchModal = createModal<LocationSearchInnerProps>(({ actions, innerProps }) => {
+  const t = useScopedI18n("widget.common.location.table");
+  const tCommon = useScopedI18n("common");
+  const { data, isPending, error } = clientApi.location.searchCity.useQuery({
+    query: innerProps.query,
+  });
 
-    if (error) {
-      throw error;
-    }
+  if (error) {
+    throw error;
+  }
 
-    return (
-      <Stack>
-        <Table striped>
-          <Table.Thead>
+  return (
+    <Stack>
+      <Table striped>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th style={{ width: "70%" }}>{t("header.city")}</Table.Th>
+            <Table.Th style={{ width: "50%" }}>{t("header.country")}</Table.Th>
+            <Table.Th>{t("header.coordinates")}</Table.Th>
+            <Table.Th>{t("header.population")}</Table.Th>
+            <Table.Th style={{ width: 40 }} />
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {isPending && (
             <Table.Tr>
-              <Table.Th style={{ width: "70%" }}>{t("header.city")}</Table.Th>
-              <Table.Th style={{ width: "50%" }}>
-                {t("header.country")}
-              </Table.Th>
-              <Table.Th>{t("header.coordinates")}</Table.Th>
-              <Table.Th>{t("header.population")}</Table.Th>
-              <Table.Th style={{ width: 40 }} />
+              <Table.Td colSpan={5}>
+                <Group justify="center">
+                  <Loader />
+                </Group>
+              </Table.Td>
             </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-            {isPending && (
-              <Table.Tr>
-                <Table.Td colSpan={5}>
-                  <Group justify="center">
-                    <Loader />
-                  </Group>
-                </Table.Td>
-              </Table.Tr>
-            )}
-            {data?.results.map((city) => (
-              <LocationSelectTableRow
-                key={city.id}
-                city={city}
-                onLocationSelect={innerProps.onLocationSelect}
-                closeModal={actions.closeModal}
-              />
-            ))}
-          </Table.Tbody>
-        </Table>
-        <Group justify="right">
-          <Button variant="light" onClick={actions.closeModal}>
-            {tCommon("action.cancel")}
-          </Button>
-        </Group>
-      </Stack>
-    );
-  },
-).withOptions({
+          )}
+          {data?.results.map((city) => (
+            <LocationSelectTableRow
+              key={city.id}
+              city={city}
+              onLocationSelect={innerProps.onLocationSelect}
+              closeModal={actions.closeModal}
+            />
+          ))}
+        </Table.Tbody>
+      </Table>
+      <Group justify="right">
+        <Button variant="light" onClick={actions.closeModal}>
+          {tCommon("action.cancel")}
+        </Button>
+      </Group>
+    </Stack>
+  );
+}).withOptions({
   defaultTitle(t) {
     return t("widget.common.location.search");
   },
@@ -218,11 +202,7 @@ interface LocationSearchTableRowProps {
   closeModal: () => void;
 }
 
-const LocationSelectTableRow = ({
-  city,
-  onLocationSelect,
-  closeModal,
-}: LocationSearchTableRowProps) => {
+const LocationSelectTableRow = ({ city, onLocationSelect, closeModal }: LocationSearchTableRowProps) => {
   const t = useScopedI18n("widget.common.location.table");
   const onSelect = useCallback(() => {
     onLocationSelect({
@@ -244,10 +224,7 @@ const LocationSelectTableRow = ({
         <Text style={{ whiteSpace: "nowrap" }}>{city.country}</Text>
       </Table.Td>
       <Table.Td>
-        <Anchor
-          target="_blank"
-          href={`https://www.google.com/maps/place/${city.latitude},${city.longitude}`}
-        >
+        <Anchor target="_blank" href={`https://www.google.com/maps/place/${city.latitude},${city.longitude}`}>
           <Text style={{ whiteSpace: "nowrap" }}>
             {city.latitude}, {city.longitude}
           </Text>
@@ -255,9 +232,7 @@ const LocationSelectTableRow = ({
       </Table.Td>
       <Table.Td>
         {city.population ? (
-          <Text style={{ whiteSpace: "nowrap" }}>
-            {formatter.format(city.population)}
-          </Text>
+          <Text style={{ whiteSpace: "nowrap" }}>{formatter.format(city.population)}</Text>
         ) : (
           <Text c="gray"> {t("population.fallback")}</Text>
         )}
diff --git a/packages/widgets/src/_inputs/widget-multiselect-input.tsx b/packages/widgets/src/_inputs/widget-multiselect-input.tsx
index 584c44117..282ae5c2f 100644
--- a/packages/widgets/src/_inputs/widget-multiselect-input.tsx
+++ b/packages/widgets/src/_inputs/widget-multiselect-input.tsx
@@ -7,11 +7,7 @@ import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 import type { SelectOption } from "./widget-select-input";
 
-export const WidgetMultiSelectInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"multiSelect">) => {
+export const WidgetMultiSelectInput = ({ property, kind, options }: CommonWidgetInputProps<"multiSelect">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/_inputs/widget-number-input.tsx b/packages/widgets/src/_inputs/widget-number-input.tsx
index 116a0cc6b..929aae1a5 100644
--- a/packages/widgets/src/_inputs/widget-number-input.tsx
+++ b/packages/widgets/src/_inputs/widget-number-input.tsx
@@ -6,11 +6,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetNumberInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"number">) => {
+export const WidgetNumberInput = ({ property, kind, options }: CommonWidgetInputProps<"number">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/_inputs/widget-select-input.tsx b/packages/widgets/src/_inputs/widget-select-input.tsx
index 721c1ef98..aa855dbf8 100644
--- a/packages/widgets/src/_inputs/widget-select-input.tsx
+++ b/packages/widgets/src/_inputs/widget-select-input.tsx
@@ -13,18 +13,13 @@ export type SelectOption =
     }
   | string;
 
-export type inferSelectOptionValue<TOption extends SelectOption> =
-  TOption extends {
-    value: infer TValue;
-  }
-    ? TValue
-    : TOption;
+export type inferSelectOptionValue<TOption extends SelectOption> = TOption extends {
+  value: infer TValue;
+}
+  ? TValue
+  : TOption;
 
-export const WidgetSelectInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"select">) => {
+export const WidgetSelectInput = ({ property, kind, options }: CommonWidgetInputProps<"select">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/_inputs/widget-slider-input.tsx b/packages/widgets/src/_inputs/widget-slider-input.tsx
index 654f9d782..8689b2f2c 100644
--- a/packages/widgets/src/_inputs/widget-slider-input.tsx
+++ b/packages/widgets/src/_inputs/widget-slider-input.tsx
@@ -6,11 +6,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetSliderInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"slider">) => {
+export const WidgetSliderInput = ({ property, kind, options }: CommonWidgetInputProps<"slider">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/_inputs/widget-switch-input.tsx b/packages/widgets/src/_inputs/widget-switch-input.tsx
index 369fd161d..66cbc0c67 100644
--- a/packages/widgets/src/_inputs/widget-switch-input.tsx
+++ b/packages/widgets/src/_inputs/widget-switch-input.tsx
@@ -6,11 +6,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetSwitchInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"switch">) => {
+export const WidgetSwitchInput = ({ property, kind, options }: CommonWidgetInputProps<"switch">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/_inputs/widget-text-input.tsx b/packages/widgets/src/_inputs/widget-text-input.tsx
index 67f368a6f..bd6b43fdb 100644
--- a/packages/widgets/src/_inputs/widget-text-input.tsx
+++ b/packages/widgets/src/_inputs/widget-text-input.tsx
@@ -6,11 +6,7 @@ import type { CommonWidgetInputProps } from "./common";
 import { useWidgetInputTranslation } from "./common";
 import { useFormContext } from "./form";
 
-export const WidgetTextInput = ({
-  property,
-  kind,
-  options,
-}: CommonWidgetInputProps<"text">) => {
+export const WidgetTextInput = ({ property, kind, options }: CommonWidgetInputProps<"text">) => {
   const t = useWidgetInputTranslation(kind, property);
   const form = useFormContext();
 
diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx
index 896b66d40..85754a0cf 100644
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -1,15 +1,7 @@
 "use client";
 
 import type { PropsWithChildren } from "react";
-import {
-  Center,
-  Flex,
-  Loader,
-  Stack,
-  Text,
-  Tooltip,
-  UnstyledButton,
-} from "@mantine/core";
+import { Center, Flex, Loader, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { IconDeviceDesktopX } from "@tabler/icons-react";
 
 import { clientApi } from "@homarr/api/client";
@@ -19,13 +11,7 @@ import { useScopedI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./app.module.css";
 
-export default function AppWidget({
-  options,
-  serverData,
-  isEditMode,
-  width,
-  height,
-}: WidgetComponentProps<"app">) {
+export default function AppWidget({ options, serverData, isEditMode, width, height }: WidgetComponentProps<"app">) {
   const t = useScopedI18n("widget.app");
   const isQueryEnabled = Boolean(options.appId);
   const {
@@ -90,11 +76,7 @@ export default function AppWidget({
   }
 
   return (
-    <AppLink
-      href={app?.href ?? ""}
-      openInNewTab={options.openInNewTab}
-      enabled={Boolean(app?.href) && !isEditMode}
-    >
+    <AppLink href={app?.href ?? ""} openInNewTab={options.openInNewTab} enabled={Boolean(app?.href) && !isEditMode}>
       <Flex align="center" justify="center" h="100%">
         <Tooltip.Floating
           label={app?.description}
@@ -118,11 +100,7 @@ export default function AppWidget({
                 {app?.name}
               </Text>
             )}
-            <img
-              src={app?.iconUrl}
-              alt={app?.name}
-              className={classes.appIcon}
-            />
+            <img src={app?.iconUrl} alt={app?.name} className={classes.appIcon} />
           </Flex>
         </Tooltip.Floating>
       </Flex>
@@ -136,20 +114,9 @@ interface AppLinkProps {
   enabled: boolean;
 }
 
-const AppLink = ({
-  href,
-  openInNewTab,
-  enabled,
-  children,
-}: PropsWithChildren<AppLinkProps>) =>
+const AppLink = ({ href, openInNewTab, enabled, children }: PropsWithChildren<AppLinkProps>) =>
   enabled ? (
-    <UnstyledButton
-      component="a"
-      href={href}
-      target={openInNewTab ? "_blank" : undefined}
-      h="100%"
-      w="100%"
-    >
+    <UnstyledButton component="a" href={href} target={openInNewTab ? "_blank" : undefined} h="100%" w="100%">
       {children}
     </UnstyledButton>
   ) : (
diff --git a/packages/widgets/src/app/index.ts b/packages/widgets/src/app/index.ts
index f6e2d7026..4eb1d5440 100644
--- a/packages/widgets/src/app/index.ts
+++ b/packages/widgets/src/app/index.ts
@@ -3,14 +3,13 @@ import { IconApps } from "@tabler/icons-react";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader, serverDataLoader } =
-  createWidgetDefinition("app", {
-    icon: IconApps,
-    options: optionsBuilder.from((factory) => ({
-      appId: factory.app(),
-      openInNewTab: factory.switch({ defaultValue: true }),
-      showDescriptionTooltip: factory.switch({ defaultValue: false }),
-    })),
-  })
-    .withServerData(() => import("./serverData"))
-    .withDynamicImport(() => import("./component"));
+export const { definition, componentLoader, serverDataLoader } = createWidgetDefinition("app", {
+  icon: IconApps,
+  options: optionsBuilder.from((factory) => ({
+    appId: factory.app(),
+    openInNewTab: factory.switch({ defaultValue: true }),
+    showDescriptionTooltip: factory.switch({ defaultValue: false }),
+  })),
+})
+  .withServerData(() => import("./serverData"))
+  .withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/app/serverData.ts b/packages/widgets/src/app/serverData.ts
index 730d449a5..a6df69678 100644
--- a/packages/widgets/src/app/serverData.ts
+++ b/packages/widgets/src/app/serverData.ts
@@ -4,9 +4,7 @@ import { api } from "@homarr/api/server";
 
 import type { WidgetProps } from "../definition";
 
-export default async function getServerDataAsync({
-  options,
-}: WidgetProps<"app">) {
+export default async function getServerDataAsync({ options }: WidgetProps<"app">) {
   try {
     const app = await api.app.byId({ id: options.appId });
     return { app };
diff --git a/packages/widgets/src/clock/component.tsx b/packages/widgets/src/clock/component.tsx
index 466a3fb9b..ce3969714 100644
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -13,37 +13,19 @@ dayjs.extend(advancedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezones);
 
-export default function ClockWidget({
-  options,
-}: WidgetComponentProps<"clock">) {
+export default function ClockWidget({ options }: WidgetComponentProps<"clock">) {
   const secondsFormat = options.showSeconds ? ":ss" : "";
-  const timeFormat = options.is24HourFormat
-    ? `HH:mm${secondsFormat}`
-    : `h:mm${secondsFormat} A`;
+  const timeFormat = options.is24HourFormat ? `HH:mm${secondsFormat}` : `h:mm${secondsFormat} A`;
   const dateFormat = options.dateFormat;
-  const timezone = options.useCustomTimezone
-    ? options.timezone
-    : Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
   const time = useCurrentTime(options);
   return (
-    <Flex
-      classNames={{ root: "clock-wrapper" }}
-      align="center"
-      justify="center"
-      h="100%"
-    >
+    <Flex classNames={{ root: "clock-wrapper" }} align="center" justify="center" h="100%">
       <Stack classNames={{ root: "clock-text-stack" }} align="center" gap="xs">
         {options.customTitleToggle && (
-          <Text classNames={{ root: "clock-customTitle-text" }}>
-            {options.customTitle}
-          </Text>
+          <Text classNames={{ root: "clock-customTitle-text" }}>{options.customTitle}</Text>
         )}
-        <Text
-          classNames={{ root: "clock-time-text" }}
-          fw={700}
-          size="2.125rem"
-          lh="1"
-        >
+        <Text classNames={{ root: "clock-time-text" }} fw={700} size="2.125rem" lh="1">
           {dayjs(time).tz(timezone).format(timeFormat)}
         </Text>
         {options.showDate && (
@@ -64,10 +46,7 @@ const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
   const [time, setTime] = useState(new Date());
   const timeoutRef = useRef<NodeJS.Timeout>();
   const intervalRef = useRef<NodeJS.Timeout>();
-  const intervalMultiplier = useMemo(
-    () => (showSeconds ? 1 : 60),
-    [showSeconds],
-  );
+  const intervalMultiplier = useMemo(() => (showSeconds ? 1 : 60), [showSeconds]);
 
   useEffect(() => {
     setTime(new Date());
@@ -79,8 +58,7 @@ const useCurrentTime = ({ showSeconds }: UseCurrentTimeProps) => {
           setTime(new Date());
         }, intervalMultiplier * 1000);
       },
-      intervalMultiplier * 1000 -
-        (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
+      intervalMultiplier * 1000 - (1000 * (showSeconds ? 0 : dayjs().second()) + dayjs().millisecond()),
     );
 
     return () => {
diff --git a/packages/widgets/src/definition.ts b/packages/widgets/src/definition.ts
index 88732a102..d134f185d 100644
--- a/packages/widgets/src/definition.ts
+++ b/packages/widgets/src/definition.ts
@@ -4,10 +4,7 @@ import type { IntegrationKind, WidgetKind } from "@homarr/definitions";
 import type { TablerIcon } from "@homarr/ui";
 
 import type { WidgetImports } from ".";
-import type {
-  inferOptionsFromDefinition,
-  WidgetOptionsRecord,
-} from "./options";
+import type { inferOptionsFromDefinition, WidgetOptionsRecord } from "./options";
 import type { IntegrationSelectOption } from "./widget-integration-select";
 
 type ServerDataLoader<TKind extends WidgetKind> = () => Promise<{
@@ -29,9 +26,7 @@ const createWithDynamicImport =
       WidgetComponentProps<TKind> &
         (TServerDataLoader extends ServerDataLoader<TKind>
           ? {
-              serverData: Awaited<
-                ReturnType<Awaited<ReturnType<TServerDataLoader>>["default"]>
-              >;
+              serverData: Awaited<ReturnType<Awaited<ReturnType<TServerDataLoader>>["default"]>>;
             }
           : never)
     >,
@@ -46,30 +41,18 @@ const createWithDynamicImport =
   });
 
 const createWithServerData =
-  <TKind extends WidgetKind, TDefinition extends WidgetDefinition>(
-    kind: TKind,
-    definition: TDefinition,
-  ) =>
-  <TServerDataLoader extends ServerDataLoader<TKind>>(
-    serverDataLoader: TServerDataLoader,
-  ) => ({
+  <TKind extends WidgetKind, TDefinition extends WidgetDefinition>(kind: TKind, definition: TDefinition) =>
+  <TServerDataLoader extends ServerDataLoader<TKind>>(serverDataLoader: TServerDataLoader) => ({
     definition: {
       ...definition,
       kind,
     },
     kind,
     serverDataLoader,
-    withDynamicImport: createWithDynamicImport(
-      kind,
-      definition,
-      serverDataLoader,
-    ),
+    withDynamicImport: createWithDynamicImport(kind, definition, serverDataLoader),
   });
 
-export const createWidgetDefinition = <
-  TKind extends WidgetKind,
-  TDefinition extends WidgetDefinition,
->(
+export const createWidgetDefinition = <TKind extends WidgetKind, TDefinition extends WidgetDefinition>(
   kind: TKind,
   definition: TDefinition,
 ) => ({
@@ -85,41 +68,32 @@ export interface WidgetDefinition {
 
 export interface WidgetProps<TKind extends WidgetKind> {
   options: inferOptionsFromDefinition<WidgetOptionsRecordOf<TKind>>;
-  integrations: inferIntegrationsFromDefinition<
-    WidgetImports[TKind]["definition"]
-  >;
+  integrations: inferIntegrationsFromDefinition<WidgetImports[TKind]["definition"]>;
 }
 
-type inferServerDataForKind<TKind extends WidgetKind> =
-  WidgetImports[TKind] extends { serverDataLoader: ServerDataLoader<TKind> }
-    ? Awaited<
-        ReturnType<
-          Awaited<
-            ReturnType<WidgetImports[TKind]["serverDataLoader"]>
-          >["default"]
-        >
-      >
-    : undefined;
+type inferServerDataForKind<TKind extends WidgetKind> = WidgetImports[TKind] extends {
+  serverDataLoader: ServerDataLoader<TKind>;
+}
+  ? Awaited<ReturnType<Awaited<ReturnType<WidgetImports[TKind]["serverDataLoader"]>>["default"]>>
+  : undefined;
 
-export type WidgetComponentProps<TKind extends WidgetKind> =
-  WidgetProps<TKind> & {
-    serverData?: inferServerDataForKind<TKind>;
-  } & {
-    itemId: string | undefined; // undefined when in preview mode
-    boardId: string | undefined; // undefined when in preview mode
-    isEditMode: boolean;
-    width: number;
-    height: number;
-  };
+export type WidgetComponentProps<TKind extends WidgetKind> = WidgetProps<TKind> & {
+  serverData?: inferServerDataForKind<TKind>;
+} & {
+  itemId: string | undefined; // undefined when in preview mode
+  boardId: string | undefined; // undefined when in preview mode
+  isEditMode: boolean;
+  width: number;
+  height: number;
+};
 
-type inferIntegrationsFromDefinition<TDefinition extends WidgetDefinition> =
-  TDefinition extends {
-    supportedIntegrations: infer TSupportedIntegrations;
-  } // check if definition has supportedIntegrations
-    ? TSupportedIntegrations extends IntegrationKind[] // check if supportedIntegrations is an array of IntegrationKind
-      ? IntegrationSelectOptionFor<TSupportedIntegrations[number]>[] // if so, return an array of IntegrationSelectOptionFor
-      : IntegrationSelectOption[] // otherwise, return an array of IntegrationSelectOption without specifying the kind
-    : IntegrationSelectOption[];
+type inferIntegrationsFromDefinition<TDefinition extends WidgetDefinition> = TDefinition extends {
+  supportedIntegrations: infer TSupportedIntegrations;
+} // check if definition has supportedIntegrations
+  ? TSupportedIntegrations extends IntegrationKind[] // check if supportedIntegrations is an array of IntegrationKind
+    ? IntegrationSelectOptionFor<TSupportedIntegrations[number]>[] // if so, return an array of IntegrationSelectOptionFor
+    : IntegrationSelectOption[] // otherwise, return an array of IntegrationSelectOption without specifying the kind
+  : IntegrationSelectOption[];
 
 interface IntegrationSelectOptionFor<TIntegration extends IntegrationKind> {
   id: string;
@@ -128,5 +102,4 @@ interface IntegrationSelectOptionFor<TIntegration extends IntegrationKind> {
   kind: TIntegration[number];
 }
 
-export type WidgetOptionsRecordOf<TKind extends WidgetKind> =
-  WidgetImports[TKind]["definition"]["options"];
+export type WidgetOptionsRecordOf<TKind extends WidgetKind> = WidgetImports[TKind]["definition"]["options"];
diff --git a/packages/widgets/src/iframe/component.tsx b/packages/widgets/src/iframe/component.tsx
index 31205fb8d..a4a2ffd55 100644
--- a/packages/widgets/src/iframe/component.tsx
+++ b/packages/widgets/src/iframe/component.tsx
@@ -7,9 +7,7 @@ import { useI18n } from "@homarr/translation/client";
 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.css";
 
-export default function IFrameWidget({
-  options,
-}: WidgetComponentProps<"iframe">) {
+export default function IFrameWidget({ options }: WidgetComponentProps<"iframe">) {
   const t = useI18n();
   const { embedUrl, ...permissions } = options;
   const allowedPermissions = getAllowedPermissions(permissions);
@@ -18,12 +16,7 @@ export default function IFrameWidget({
 
   return (
     <Box h="100%" w="100%">
-      <iframe
-        className={classes.iframe}
-        src={embedUrl}
-        title="widget iframe"
-        allow={allowedPermissions.join(" ")}
-      >
+      <iframe className={classes.iframe} src={embedUrl} title="widget iframe" allow={allowedPermissions.join(" ")}>
         <Text>{t("widget.iframe.error.noBrowerSupport")}</Text>
       </iframe>
     </Box>
@@ -41,9 +34,7 @@ const NoUrl = () => {
   );
 };
 
-const getAllowedPermissions = (
-  permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">,
-) => {
+const getAllowedPermissions = (permissions: Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">) => {
   return objectEntries(permissions)
     .filter(([_key, value]) => value)
     .map(([key]) => permissionMapping[key]);
@@ -58,7 +49,4 @@ const permissionMapping = {
   allowPayment: "payment",
   allowScrolling: "scrolling",
   allowTransparency: "transparency",
-} satisfies Record<
-  keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">,
-  string
->;
+} satisfies Record<keyof Omit<WidgetComponentProps<"iframe">["options"], "embedUrl">, string>;
diff --git a/packages/widgets/src/iframe/index.ts b/packages/widgets/src/iframe/index.ts
index 5da19beeb..97b277ff8 100644
--- a/packages/widgets/src/iframe/index.ts
+++ b/packages/widgets/src/iframe/index.ts
@@ -3,22 +3,19 @@ import { IconBrowser } from "@tabler/icons-react";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader } = createWidgetDefinition(
-  "iframe",
-  {
-    icon: IconBrowser,
-    options: optionsBuilder.from((factory) => ({
-      embedUrl: factory.text(),
-      allowFullScreen: factory.switch(),
-      allowScrolling: factory.switch({
-        defaultValue: true,
-      }),
-      allowTransparency: factory.switch(),
-      allowPayment: factory.switch(),
-      allowAutoPlay: factory.switch(),
-      allowMicrophone: factory.switch(),
-      allowCamera: factory.switch(),
-      allowGeolocation: factory.switch(),
-    })),
-  },
-).withDynamicImport(() => import("./component"));
+export const { definition, componentLoader } = createWidgetDefinition("iframe", {
+  icon: IconBrowser,
+  options: optionsBuilder.from((factory) => ({
+    embedUrl: factory.text(),
+    allowFullScreen: factory.switch(),
+    allowScrolling: factory.switch({
+      defaultValue: true,
+    }),
+    allowTransparency: factory.switch(),
+    allowPayment: factory.switch(),
+    allowAutoPlay: factory.switch(),
+    allowMicrophone: factory.switch(),
+    allowCamera: factory.switch(),
+    allowGeolocation: factory.switch(),
+  })),
+}).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/index.tsx b/packages/widgets/src/index.tsx
index 93d106117..7ea2d7e7a 100644
--- a/packages/widgets/src/index.tsx
+++ b/packages/widgets/src/index.tsx
@@ -32,10 +32,7 @@ export const widgetImports = {
 export type WidgetImports = typeof widgetImports;
 export type WidgetImportKey = keyof WidgetImports;
 
-const loadedComponents = new Map<
-  WidgetKind,
-  ComponentType<WidgetComponentProps<WidgetKind>>
->();
+const loadedComponents = new Map<WidgetKind, ComponentType<WidgetComponentProps<WidgetKind>>>();
 
 export const loadWidgetDynamic = <TKind extends WidgetKind>(kind: TKind) => {
   const existingComponent = loadedComponents.get(kind);
diff --git a/packages/widgets/src/modals/widget-advanced-options-modal.tsx b/packages/widgets/src/modals/widget-advanced-options-modal.tsx
new file mode 100644
index 000000000..674bc8f9c
--- /dev/null
+++ b/packages/widgets/src/modals/widget-advanced-options-modal.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Button, Group, Stack } from "@mantine/core";
+
+import { useForm } from "@homarr/form";
+import { createModal } from "@homarr/modals";
+import { useI18n } from "@homarr/translation/client";
+import { TextMultiSelect } from "@homarr/ui";
+import type { BoardItemAdvancedOptions } from "@homarr/validation";
+
+interface InnerProps {
+  advancedOptions: BoardItemAdvancedOptions;
+  onSuccess: (options: BoardItemAdvancedOptions) => void;
+}
+
+export const WidgetAdvancedOptionsModal = createModal<InnerProps>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const form = useForm({
+    initialValues: innerProps.advancedOptions,
+  });
+  const handleSubmit = (values: BoardItemAdvancedOptions) => {
+    innerProps.onSuccess(values);
+    actions.closeModal();
+  };
+
+  return (
+    <form onSubmit={form.onSubmit(handleSubmit)}>
+      <Stack>
+        <TextMultiSelect
+          label={t("item.edit.field.customCssClasses.label")}
+          {...form.getInputProps("customCssClasses")}
+        />
+        <Group justify="end">
+          <Button onClick={actions.closeModal} variant="subtle" color="gray">
+            {t("common.action.cancel")}
+          </Button>
+          <Button type="submit" color="teal">
+            {t("common.action.saveChanges")}
+          </Button>
+        </Group>
+      </Stack>
+    </form>
+  );
+}).withOptions({
+  defaultTitle(t) {
+    return t("item.edit.advancedOptions.title");
+  },
+  size: "lg",
+  transitionProps: {
+    duration: 0,
+  },
+});
diff --git a/packages/widgets/src/modals/widget-edit-modal.tsx b/packages/widgets/src/modals/widget-edit-modal.tsx
index 06b72e20a..cad7cf18f 100644
--- a/packages/widgets/src/modals/widget-edit-modal.tsx
+++ b/packages/widgets/src/modals/widget-edit-modal.tsx
@@ -1,21 +1,25 @@
 "use client";
 
+import { useState } from "react";
 import { Button, Group, Stack } from "@mantine/core";
 
 import type { WidgetKind } from "@homarr/definitions";
-import { createModal } from "@homarr/modals";
+import { createModal, useModalAction } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import type { BoardItemIntegration } from "@homarr/validation";
 
 import { widgetImports } from "..";
 import { getInputForType } from "../_inputs";
 import { FormProvider, useForm } from "../_inputs/form";
+import type { BoardItemAdvancedOptions } from "../../../validation/src/shared";
 import type { OptionsBuilderResult } from "../options";
 import type { IntegrationSelectOption } from "../widget-integration-select";
 import { WidgetIntegrationSelect } from "../widget-integration-select";
+import { WidgetAdvancedOptionsModal } from "./widget-advanced-options-modal";
 
 export interface WidgetEditModalState {
   options: Record<string, unknown>;
+  advancedOptions: BoardItemAdvancedOptions;
   integrations: BoardItemIntegration[];
 }
 
@@ -27,69 +31,79 @@ interface ModalProps<TSort extends WidgetKind> {
   integrationSupport: boolean;
 }
 
-export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(
-  ({ actions, innerProps }) => {
-    const t = useI18n();
-    const form = useForm({
-      initialValues: innerProps.value,
-    });
+export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, innerProps }) => {
+  const t = useI18n();
+  const [advancedOptions, setAdvancedOptions] = useState<BoardItemAdvancedOptions>(innerProps.value.advancedOptions);
+  const form = useForm({
+    initialValues: innerProps.value,
+  });
+  const { openModal } = useModalAction(WidgetAdvancedOptionsModal);
 
-    const { definition } = widgetImports[innerProps.kind];
+  const { definition } = widgetImports[innerProps.kind];
 
-    return (
-      <form
-        onSubmit={form.onSubmit((values) => {
-          innerProps.onSuccessfulEdit(values);
-          actions.closeModal();
-        })}
-      >
-        <FormProvider form={form}>
-          <Stack>
-            {innerProps.integrationSupport && (
-              <WidgetIntegrationSelect
-                label={t("item.edit.field.integrations.label")}
-                data={innerProps.integrationData}
-                {...form.getInputProps("integrations")}
-              />
-            )}
-            {Object.entries(definition.options).map(
-              ([key, value]: [string, OptionsBuilderResult[string]]) => {
-                const Input = getInputForType(value.type);
+  return (
+    <form
+      onSubmit={form.onSubmit((values) => {
+        innerProps.onSuccessfulEdit({
+          ...values,
+          advancedOptions,
+        });
+        actions.closeModal();
+      })}
+    >
+      <FormProvider form={form}>
+        <Stack>
+          {innerProps.integrationSupport && (
+            <WidgetIntegrationSelect
+              label={t("item.edit.field.integrations.label")}
+              data={innerProps.integrationData}
+              {...form.getInputProps("integrations")}
+            />
+          )}
+          {Object.entries(definition.options).map(([key, value]: [string, OptionsBuilderResult[string]]) => {
+            const Input = getInputForType(value.type);
 
-                if (
-                  !Input ||
-                  value.shouldHide?.(form.values.options as never)
-                ) {
-                  return null;
-                }
+            if (!Input || value.shouldHide?.(form.values.options as never)) {
+              return null;
+            }
 
-                return (
-                  <Input
-                    key={key}
-                    kind={innerProps.kind}
-                    property={key}
-                    options={value as never}
-                  />
-                );
-              },
-            )}
-            <Group justify="right">
-              <Button
-                onClick={actions.closeModal}
-                variant="subtle"
-                color="gray"
-              >
+            return <Input key={key} kind={innerProps.kind} property={key} options={value as never} />;
+          })}
+          <Group justify="space-between">
+            <Button
+              variant="subtle"
+              onClick={() =>
+                openModal({
+                  advancedOptions,
+                  onSuccess(options) {
+                    setAdvancedOptions(options);
+                    innerProps.onSuccessfulEdit({
+                      ...innerProps.value,
+                      advancedOptions: options,
+                    });
+                  },
+                })
+              }
+            >
+              {t("item.edit.advancedOptions.label")}
+            </Button>
+            <Group justify="end" w={{ base: "100%", xs: "auto" }}>
+              <Button onClick={actions.closeModal} variant="subtle" color="gray">
                 {t("common.action.cancel")}
               </Button>
               <Button type="submit" color="teal">
                 {t("common.action.saveChanges")}
               </Button>
             </Group>
-          </Stack>
-        </FormProvider>
-      </form>
-    );
-  },
-).withOptions({
+          </Group>
+        </Stack>
+      </FormProvider>
+    </form>
+  );
+}).withOptions({
   keepMounted: true,
+  defaultTitle(t) {
+    return t("item.edit.title");
+  },
+  size: "lg",
 });
diff --git a/packages/widgets/src/notebook/component.tsx b/packages/widgets/src/notebook/component.tsx
index 45c230a75..5231e1db9 100644
--- a/packages/widgets/src/notebook/component.tsx
+++ b/packages/widgets/src/notebook/component.tsx
@@ -4,15 +4,10 @@ import "@mantine/tiptap/styles.css";
 
 import type { WidgetComponentProps } from "../definition";
 
-const Notebook = dynamic(
-  () => import("./notebook").then((module) => module.Notebook),
-  {
-    ssr: false,
-  },
-);
+const Notebook = dynamic(() => import("./notebook").then((module) => module.Notebook), {
+  ssr: false,
+});
 
-export default function NotebookWidget(
-  props: WidgetComponentProps<"notebook">,
-) {
+export default function NotebookWidget(props: WidgetComponentProps<"notebook">) {
   return <Notebook {...props} />;
 }
diff --git a/packages/widgets/src/notebook/index.ts b/packages/widgets/src/notebook/index.ts
index 36ef69660..5258ee78d 100644
--- a/packages/widgets/src/notebook/index.ts
+++ b/packages/widgets/src/notebook/index.ts
@@ -4,27 +4,24 @@ import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 import { defaultContent } from "./default-content";
 
-export const { definition, componentLoader } = createWidgetDefinition(
-  "notebook",
-  {
-    icon: IconNotes,
-    options: optionsBuilder.from(
-      (factory) => ({
-        showToolbar: factory.switch({
-          defaultValue: true,
-        }),
-        allowReadOnlyCheck: factory.switch({
-          defaultValue: true,
-        }),
-        content: factory.text({
-          defaultValue: defaultContent,
-        }),
+export const { definition, componentLoader } = createWidgetDefinition("notebook", {
+  icon: IconNotes,
+  options: optionsBuilder.from(
+    (factory) => ({
+      showToolbar: factory.switch({
+        defaultValue: true,
       }),
-      {
-        content: {
-          shouldHide: () => true, // Hide the content option as it can be modified in the editor
-        },
+      allowReadOnlyCheck: factory.switch({
+        defaultValue: true,
+      }),
+      content: factory.text({
+        defaultValue: defaultContent,
+      }),
+    }),
+    {
+      content: {
+        shouldHide: () => true, // Hide the content option as it can be modified in the editor
       },
-    ),
-  },
-).withDynamicImport(() => import("./component"));
+    },
+  ),
+}).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx
index 7e056e4aa..e7967d81f 100644
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -16,11 +16,7 @@ import {
   useMantineTheme,
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import {
-  Link,
-  RichTextEditor,
-  useRichTextEditorContext,
-} from "@mantine/tiptap";
+import { Link, RichTextEditor, useRichTextEditorContext } from "@mantine/tiptap";
 import {
   IconCheck,
   IconCircleOff,
@@ -78,12 +74,7 @@ const controlIconProps = {
   stroke: 1.5,
 };
 
-export function Notebook({
-  options,
-  isEditMode,
-  boardId,
-  itemId,
-}: WidgetComponentProps<"notebook">) {
+export function Notebook({ options, isEditMode, boardId, itemId }: WidgetComponentProps<"notebook">) {
   const [content, setContent] = useState(options.content);
   const [toSaveContent, setToSaveContent] = useState(content);
 
@@ -137,12 +128,9 @@ export function Notebook({
               backgroundColor: {
                 default: undefined,
                 renderHTML: (attributes) => ({
-                  style: attributes.backgroundColor
-                    ? `background-color: ${attributes.backgroundColor}`
-                    : undefined,
+                  style: attributes.backgroundColor ? `background-color: ${attributes.backgroundColor}` : undefined,
                 }),
-                parseHTML: (element) =>
-                  element.style.backgroundColor || undefined,
+                parseHTML: (element) => element.style.backgroundColor || undefined,
               },
             };
           },
@@ -178,9 +166,7 @@ export function Notebook({
     [toSaveContent],
   );
 
-  const handleOnReadOnlyCheck = (
-    event: CustomEventInit<{ node: Node; checked: boolean }>,
-  ) => {
+  const handleOnReadOnlyCheck = (event: CustomEventInit<{ node: Node; checked: boolean }>) => {
     if (!options.allowReadOnlyCheck) return;
     if (!editor) return;
 
@@ -251,8 +237,7 @@ export function Notebook({
             "& .ProseMirror": {
               padding: "0  !important",
             },
-            backgroundColor:
-              colorScheme === "dark" ? theme.colors.dark[6] : "white",
+            backgroundColor: colorScheme === "dark" ? theme.colors.dark[6] : "white",
             border: "none",
             borderRadius: "0.5rem",
             display: "flex",
@@ -270,8 +255,7 @@ export function Notebook({
       >
         <RichTextEditor.Toolbar
           style={{
-            display:
-              isEditing && options.showToolbar === true ? "flex" : "none",
+            display: isEditing && options.showToolbar === true ? "flex" : "none",
           }}
         >
           <RichTextEditor.ControlsGroup>
@@ -319,9 +303,7 @@ export function Notebook({
             <RichTextEditor.BulletList title={tControls("bulletList")} />
             <RichTextEditor.OrderedList title={tControls("orderedList")} />
             <TaskListToggle />
-            {(editor?.isActive("taskList") ||
-              editor?.isActive("bulletList") ||
-              editor?.isActive("orderedList")) && (
+            {(editor?.isActive("taskList") || editor?.isActive("bulletList") || editor?.isActive("orderedList")) && (
               <>
                 <ListIndentIncrease />
                 <ListIndentDecrease />
@@ -368,9 +350,7 @@ export function Notebook({
       {enabled && (
         <>
           <ActionIcon
-            title={
-              isEditing ? t("common.action.save") : t("common.action.edit")
-            }
+            title={isEditing ? t("common.action.save") : t("common.action.edit")}
             style={{
               zIndex: 1,
             }}
@@ -383,11 +363,7 @@ export function Notebook({
             radius={"md"}
             onClick={handleEditToggle}
           >
-            {isEditing ? (
-              <IconDeviceFloppy {...iconProps} />
-            ) : (
-              <IconEdit {...iconProps} />
-            )}
+            {isEditing ? <IconDeviceFloppy {...iconProps} /> : <IconEdit {...iconProps} />}
           </ActionIcon>
           {isEditing && (
             <ActionIcon
@@ -482,9 +458,7 @@ function ColorCellControl() {
   const { editor } = useRichTextEditorContext();
 
   const getCurrent = useCallback(() => {
-    return editor?.getAttributes("tableCell").backgroundColor as
-      | string
-      | undefined;
+    return editor?.getAttributes("tableCell").backgroundColor as string | undefined;
   }, [editor]);
 
   const update = useCallback(
@@ -513,13 +487,7 @@ interface ColorControlProps {
   ariaLabel: string;
 }
 
-const ColorControl = ({
-  defaultColor,
-  getCurrent,
-  update,
-  icon: Icon,
-  ariaLabel,
-}: ColorControlProps) => {
+const ColorControl = ({ defaultColor, getCurrent, update, icon: Icon, ariaLabel }: ColorControlProps) => {
   const { editor } = useRichTextEditorContext();
   const [color, setColor] = useState(defaultColor);
   const { colors, white } = useMantineTheme();
@@ -591,33 +559,15 @@ const ColorControl = ({
       </Popover.Target>
       <Popover.Dropdown>
         <Stack gap={8}>
-          <ColorPicker
-            value={color}
-            onChange={setColor}
-            format="hexa"
-            swatches={palette}
-            swatchesPerRow={6}
-          />
+          <ColorPicker value={color} onChange={setColor} format="hexa" swatches={palette} swatchesPerRow={6} />
           <Group justify="right" gap={8}>
-            <ActionIcon
-              title={t("common.action.cancel")}
-              variant="default"
-              onClick={close}
-            >
+            <ActionIcon title={t("common.action.cancel")} variant="default" onClick={close}>
               <IconX stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon
-              title={t("common.action.apply")}
-              variant="default"
-              onClick={handleApplyColor}
-            >
+            <ActionIcon title={t("common.action.apply")} variant="default" onClick={handleApplyColor}>
               <IconCheck stroke={1.5} size="1rem" />
             </ActionIcon>
-            <ActionIcon
-              title={t("widget.notebook.popover.clearColor")}
-              variant="default"
-              onClick={handleClearColor}
-            >
+            <ActionIcon title={t("widget.notebook.popover.clearColor")} variant="default" onClick={handleClearColor}>
               <IconCircleOff stroke={1.5} size="1rem" />
             </ActionIcon>
           </Group>
@@ -676,11 +626,7 @@ function EmbedImage() {
       trapFocus
     >
       <Popover.Target>
-        <RichTextEditor.Control
-          onClick={toggle}
-          title={tControls("image")}
-          active={editor?.isActive("image")}
-        >
+        <RichTextEditor.Control onClick={toggle} title={tControls("image")} active={editor?.isActive("image")}>
           <IconPhoto stroke={1.5} size="1rem" />
         </RichTextEditor.Control>
       </Popover.Target>
@@ -777,11 +723,7 @@ const handleAddColumnBefore = (editor: Editor) => {
 };
 
 const TableAddColumnBefore = () => (
-  <TableControl
-    title="addColumnLeft"
-    onClick={handleAddColumnBefore}
-    icon={IconColumnInsertLeft}
-  />
+  <TableControl title="addColumnLeft" onClick={handleAddColumnBefore} icon={IconColumnInsertLeft} />
 );
 
 const handleAddColumnAfter = (editor: Editor) => {
@@ -789,11 +731,7 @@ const handleAddColumnAfter = (editor: Editor) => {
 };
 
 const TableAddColumnAfter = () => (
-  <TableControl
-    title="addColumnRight"
-    onClick={handleAddColumnAfter}
-    icon={IconColumnInsertRight}
-  />
+  <TableControl title="addColumnRight" onClick={handleAddColumnAfter} icon={IconColumnInsertRight} />
 );
 
 const handleRemoveColumn = (editor: Editor) => {
@@ -801,54 +739,31 @@ const handleRemoveColumn = (editor: Editor) => {
 };
 
 const TableRemoveColumn = () => (
-  <TableControl
-    title="deleteColumn"
-    onClick={handleRemoveColumn}
-    icon={IconColumnRemove}
-  />
+  <TableControl title="deleteColumn" onClick={handleRemoveColumn} icon={IconColumnRemove} />
 );
 
 const handleAddRowBefore = (editor: Editor) => {
   editor.commands.addRowBefore();
 };
 
-const TableAddRowBefore = () => (
-  <TableControl
-    title="addRowTop"
-    onClick={handleAddRowBefore}
-    icon={IconRowInsertTop}
-  />
-);
+const TableAddRowBefore = () => <TableControl title="addRowTop" onClick={handleAddRowBefore} icon={IconRowInsertTop} />;
 
 const handleAddRowAfter = (editor: Editor) => {
   editor.commands.addRowAfter();
 };
 
 const TableAddRowAfter = () => (
-  <TableControl
-    title="addRowBelow"
-    onClick={handleAddRowAfter}
-    icon={IconRowInsertBottom}
-  />
+  <TableControl title="addRowBelow" onClick={handleAddRowAfter} icon={IconRowInsertBottom} />
 );
 
 const handleRemoveRow = (editor: Editor) => {
   editor.commands.deleteRow();
 };
 
-const TableRemoveRow = () => (
-  <TableControl
-    title="deleteRow"
-    onClick={handleRemoveRow}
-    icon={IconRowRemove}
-  />
-);
+const TableRemoveRow = () => <TableControl title="deleteRow" onClick={handleRemoveRow} icon={IconRowRemove} />;
 
 interface TableControlProps {
-  title: Exclude<
-    keyof TranslationObject["widget"]["notebook"]["controls"],
-    "align" | "heading"
-  >;
+  title: Exclude<keyof TranslationObject["widget"]["notebook"]["controls"], "align" | "heading">;
   onClick: (editor: Editor) => void;
   icon: TablerIcon;
 }
@@ -862,10 +777,7 @@ const TableControl = ({ title, onClick, icon: Icon }: TableControlProps) => {
   }, [editor, onClick]);
 
   return (
-    <RichTextEditor.Control
-      title={tControls(title)}
-      onClick={handleControlClick}
-    >
+    <RichTextEditor.Control title={tControls(title)} onClick={handleControlClick}>
       <Icon {...controlIconProps} />
     </RichTextEditor.Control>
   );
@@ -958,26 +870,14 @@ function TableToggle() {
           active={isActive}
           onClick={handleControlClick}
         >
-          {isActive ? (
-            <IconTableOff stroke={1.5} size="1rem" />
-          ) : (
-            <IconTablePlus stroke={1.5} size="1rem" />
-          )}
+          {isActive ? <IconTableOff stroke={1.5} size="1rem" /> : <IconTablePlus stroke={1.5} size="1rem" />}
         </RichTextEditor.Control>
       </Popover.Target>
       <Popover.Dropdown>
         <form onSubmit={form.onSubmit(handleSubmit)}>
           <Stack gap={5}>
-            <NumberInput
-              label={t("widget.notebook.popover.columns")}
-              min={1}
-              {...form.getInputProps("cols")}
-            />
-            <NumberInput
-              label={t("widget.notebook.popover.rows")}
-              min={1}
-              {...form.getInputProps("rows")}
-            />
+            <NumberInput label={t("widget.notebook.popover.columns")} min={1} {...form.getInputProps("cols")} />
+            <NumberInput label={t("widget.notebook.popover.rows")} min={1} {...form.getInputProps("rows")} />
             <Button type="submit" variant="default" mt={10} mb={5}>
               {t("common.action.insert")}
             </Button>
diff --git a/packages/widgets/src/options.ts b/packages/widgets/src/options.ts
index 4a3c89048..4d7fc15be 100644
--- a/packages/widgets/src/options.ts
+++ b/packages/widgets/src/options.ts
@@ -3,10 +3,7 @@ import type { WidgetKind } from "@homarr/definitions";
 import type { z } from "@homarr/validation";
 
 import { widgetImports } from ".";
-import type {
-  inferSelectOptionValue,
-  SelectOption,
-} from "./_inputs/widget-select-input";
+import type { inferSelectOptionValue, SelectOption } from "./_inputs/widget-select-input";
 
 interface CommonInput<TType> {
   defaultValue?: TType;
@@ -57,21 +54,16 @@ const optionsFactory = {
     withDescription: input?.withDescription ?? false,
     validate: input?.validate,
   }),
-  multiSelect: <const TOptions extends SelectOption[]>(
-    input: MultiSelectInput<TOptions>,
-  ) => ({
+  multiSelect: <const TOptions extends SelectOption[]>(input: MultiSelectInput<TOptions>) => ({
     type: "multiSelect" as const,
     defaultValue: input.defaultValue ?? [],
     options: input.options,
     searchable: input.searchable ?? false,
     withDescription: input.withDescription ?? false,
   }),
-  select: <const TOptions extends SelectOption[]>(
-    input: SelectInput<TOptions>,
-  ) => ({
+  select: <const TOptions extends SelectOption[]>(input: SelectInput<TOptions>) => ({
     type: "select" as const,
-    defaultValue: (input.defaultValue ??
-      input.options[0]) as inferSelectOptionValue<TOptions[number]>,
+    defaultValue: (input.defaultValue ?? input.options[0]) as inferSelectOptionValue<TOptions[number]>,
     options: input.options,
     searchable: input.searchable ?? false,
     withDescription: input.withDescription ?? false,
@@ -112,18 +104,12 @@ const optionsFactory = {
 };
 
 type WidgetOptionFactory = typeof optionsFactory;
-export type WidgetOptionDefinition = ReturnType<
-  WidgetOptionFactory[keyof WidgetOptionFactory]
->;
+export type WidgetOptionDefinition = ReturnType<WidgetOptionFactory[keyof WidgetOptionFactory]>;
 export type WidgetOptionsRecord = Record<string, WidgetOptionDefinition>;
 export type WidgetOptionType = WidgetOptionDefinition["type"];
-export type WidgetOptionOfType<TType extends WidgetOptionType> = Extract<
-  WidgetOptionDefinition,
-  { type: TType }
->;
+export type WidgetOptionOfType<TType extends WidgetOptionType> = Extract<WidgetOptionDefinition, { type: TType }>;
 
-type inferOptionFromDefinition<TDefinition extends WidgetOptionDefinition> =
-  TDefinition["defaultValue"];
+type inferOptionFromDefinition<TDefinition extends WidgetOptionDefinition> = TDefinition["defaultValue"];
 export type inferOptionsFromDefinition<TOptions extends WidgetOptionsRecord> = {
   [key in keyof TOptions]: inferOptionFromDefinition<TOptions[key]>;
 };
@@ -162,10 +148,7 @@ export const optionsBuilder = {
   from: createOptions,
 };
 
-export const reduceWidgetOptionsWithDefaultValues = (
-  kind: WidgetKind,
-  currentValue: Record<string, unknown> = {},
-) => {
+export const reduceWidgetOptionsWithDefaultValues = (kind: WidgetKind, currentValue: Record<string, unknown> = {}) => {
   const definition = widgetImports[kind].definition;
   const options = definition.options as Record<string, WidgetOptionDefinition>;
   return objectEntries(options).reduce(
diff --git a/packages/widgets/src/server/provider.tsx b/packages/widgets/src/server/provider.tsx
index 4516559e9..f2e745be0 100644
--- a/packages/widgets/src/server/provider.tsx
+++ b/packages/widgets/src/server/provider.tsx
@@ -12,31 +12,21 @@ type Data = Record<
 >;
 
 interface GlobalItemServerDataContext {
-  setItemServerData: (
-    id: string,
-    data: Record<string, unknown> | undefined,
-  ) => void;
+  setItemServerData: (id: string, data: Record<string, unknown> | undefined) => void;
   data: Data;
   initalItemIds: string[];
 }
 
-const GlobalItemServerDataContext =
-  createContext<GlobalItemServerDataContext | null>(null);
+const GlobalItemServerDataContext = createContext<GlobalItemServerDataContext | null>(null);
 
 interface Props {
   initalItemIds: string[];
 }
 
-export const GlobalItemServerDataProvider = ({
-  children,
-  initalItemIds,
-}: PropsWithChildren<Props>) => {
+export const GlobalItemServerDataProvider = ({ children, initalItemIds }: PropsWithChildren<Props>) => {
   const [data, setData] = useState<Data>({});
 
-  const setItemServerData = (
-    id: string,
-    itemData: Record<string, unknown> | undefined,
-  ) => {
+  const setItemServerData = (id: string, itemData: Record<string, unknown> | undefined) => {
     setData((prev) => ({
       ...prev,
       [id]: {
@@ -47,9 +37,7 @@ export const GlobalItemServerDataProvider = ({
   };
 
   return (
-    <GlobalItemServerDataContext.Provider
-      value={{ setItemServerData, data, initalItemIds }}
-    >
+    <GlobalItemServerDataContext.Provider value={{ setItemServerData, data, initalItemIds }}>
       {children}
     </GlobalItemServerDataContext.Provider>
   );
@@ -73,10 +61,7 @@ export const useServerDataFor = (id: string) => {
   return context.data[id];
 };
 
-export const useServerDataInitializer = (
-  id: string,
-  serverData: Record<string, unknown> | undefined,
-) => {
+export const useServerDataInitializer = (id: string, serverData: Record<string, unknown> | undefined) => {
   const context = useContext(GlobalItemServerDataContext);
 
   if (!context) {
diff --git a/packages/widgets/src/server/runner.tsx b/packages/widgets/src/server/runner.tsx
index d3792574b..63d588e86 100644
--- a/packages/widgets/src/server/runner.tsx
+++ b/packages/widgets/src/server/runner.tsx
@@ -7,18 +7,14 @@ import { reduceWidgetOptionsWithDefaultValues, widgetImports } from "..";
 import { ClientServerDataInitalizer } from "./client";
 import { GlobalItemServerDataProvider } from "./provider";
 
-type Board = RouterOutputs["board"]["getDefaultBoard"];
+type Board = RouterOutputs["board"]["getHomeBoard"];
 
 type Props = PropsWithChildren<{
   shouldRun: boolean;
   board: Board;
 }>;
 
-export const GlobalItemServerDataRunner = ({
-  board,
-  shouldRun,
-  children,
-}: Props) => {
+export const GlobalItemServerDataRunner = ({ board, shouldRun, children }: Props) => {
   if (!shouldRun) return children;
 
   const allItems = board.sections.flatMap((section) => section.items);
@@ -45,10 +41,7 @@ const ItemDataLoader = async ({ item }: ItemDataLoaderProps) => {
     return <ClientServerDataInitalizer id={item.id} serverData={undefined} />;
   }
   const loader = await widgetImport.serverDataLoader();
-  const optionsWithDefault = reduceWidgetOptionsWithDefaultValues(
-    item.kind,
-    item.options,
-  );
+  const optionsWithDefault = reduceWidgetOptionsWithDefaultValues(item.kind, item.options);
   const data = await loader.default({
     ...item,
     options: optionsWithDefault as never,
diff --git a/packages/widgets/src/video/component.tsx b/packages/widgets/src/video/component.tsx
index e9b373bf7..8832d2390 100644
--- a/packages/widgets/src/video/component.tsx
+++ b/packages/widgets/src/video/component.tsx
@@ -13,9 +13,7 @@ import classes from "./component.module.css";
 
 import "video.js/dist/video-js.css";
 
-export default function VideoWidget({
-  options,
-}: WidgetComponentProps<"video">) {
+export default function VideoWidget({ options }: WidgetComponentProps<"video">) {
   if (options.feedUrl.trim() === "") {
     return <NoUrl />;
   }
@@ -48,9 +46,7 @@ const ForYoutubeUseIframe = () => {
       <Stack align="center" gap="xs">
         <IconBrandYoutube />
         <Title order={4}>{t("widget.video.error.forYoutubeUseIframe")}</Title>
-        <Anchor href="https://homarr.dev/docs/widgets/iframe/">
-          {t("common.action.checkoutDocs")}
-        </Anchor>
+        <Anchor href="https://homarr.dev/docs/widgets/iframe/">{t("common.action.checkoutDocs")}</Anchor>
       </Stack>
     </Center>
   );
@@ -80,10 +76,7 @@ const Feed = ({ options }: Pick<WidgetComponentProps<"video">, "options">) => {
 
   return (
     <Group justify="center" w="100%" h="100%" pos="relative">
-      <video
-        className={combineClasses("video-js", classes.video)}
-        ref={videoRef}
-      >
+      <video className={combineClasses("video-js", classes.video)} ref={videoRef}>
         <source src={options.feedUrl} />
       </video>
     </Group>
diff --git a/packages/widgets/src/weather/component.tsx b/packages/widgets/src/weather/component.tsx
index f6c41a7c6..cbe2ad5f4 100644
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,9 +1,5 @@
 import { Card, Flex, Group, Stack, Text, Title } from "@mantine/core";
-import {
-  IconArrowDownRight,
-  IconArrowUpRight,
-  IconMapPin,
-} from "@tabler/icons-react";
+import { IconArrowDownRight, IconArrowUpRight, IconMapPin } from "@tabler/icons-react";
 
 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -11,10 +7,7 @@ import { clientApi } from "@homarr/api/client";
 import type { WidgetComponentProps } from "../definition";
 import { WeatherIcon } from "./icon";
 
-export default function WeatherWidget({
-  options,
-  width,
-}: WidgetComponentProps<"weather">) {
+export default function WeatherWidget({ options, width }: WidgetComponentProps<"weather">) {
   const [weather] = clientApi.widget.weather.atLocation.useSuspenseQuery(
     {
       latitude: options.location.latitude,
@@ -29,34 +22,18 @@ export default function WeatherWidget({
 
   return (
     <Stack w="100%" h="100%" justify="space-around" gap={0} align="center">
-      <WeeklyForecast
-        weather={weather}
-        width={width}
-        options={options}
-        shouldHide={!options.hasForecast}
-      />
-      <DailyWeather
-        weather={weather}
-        width={width}
-        options={options}
-        shouldHide={options.hasForecast}
-      />
+      <WeeklyForecast weather={weather} width={width} options={options} shouldHide={!options.hasForecast} />
+      <DailyWeather weather={weather} width={width} options={options} shouldHide={options.hasForecast} />
     </Stack>
   );
 }
 
-interface DailyWeatherProps
-  extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
+interface DailyWeatherProps extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
   shouldHide: boolean;
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const DailyWeather = ({
-  shouldHide,
-  width,
-  options,
-  weather,
-}: DailyWeatherProps) => {
+const DailyWeather = ({ shouldHide, width, options, weather }: DailyWeatherProps) => {
   if (shouldHide) {
     return null;
   }
@@ -69,30 +46,16 @@ const DailyWeather = ({
         justify={"center"}
         direction={width < 200 ? "column" : "row"}
       >
-        <WeatherIcon
-          size={width < 300 ? 30 : 50}
-          code={weather.current_weather.weathercode}
-        />
-        <Title order={2}>
-          {getPreferredUnit(
-            weather.current_weather.temperature,
-            options.isFormatFahrenheit,
-          )}
-        </Title>
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title order={2}>{getPreferredUnit(weather.current_weather.temperature, options.isFormatFahrenheit)}</Title>
       </Flex>
 
       {width > 200 && (
         <Group wrap="nowrap" gap="xs">
           <IconArrowUpRight />
-          {getPreferredUnit(
-            weather.daily.temperature_2m_max[0]!,
-            options.isFormatFahrenheit,
-          )}
+          {getPreferredUnit(weather.daily.temperature_2m_max[0]!, options.isFormatFahrenheit)}
           <IconArrowDownRight />
-          {getPreferredUnit(
-            weather.daily.temperature_2m_min[0]!,
-            options.isFormatFahrenheit,
-          )}
+          {getPreferredUnit(weather.daily.temperature_2m_min[0]!, options.isFormatFahrenheit)}
         </Group>
       )}
 
@@ -106,30 +69,19 @@ const DailyWeather = ({
   );
 };
 
-interface WeeklyForecastProps
-  extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
+interface WeeklyForecastProps extends Pick<WidgetComponentProps<"weather">, "width" | "options"> {
   shouldHide: boolean;
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
-const WeeklyForecast = ({
-  shouldHide,
-  width,
-  options,
-  weather,
-}: WeeklyForecastProps) => {
+const WeeklyForecast = ({ shouldHide, width, options, weather }: WeeklyForecastProps) => {
   if (shouldHide) {
     return null;
   }
 
   return (
     <>
-      <Flex
-        align="center"
-        gap={width < 120 ? "0.25rem" : "xs"}
-        justify="center"
-        direction="row"
-      >
+      <Flex align="center" gap={width < 120 ? "0.25rem" : "xs"} justify="center" direction="row">
         {options.showCity && (
           <Group wrap="nowrap" gap="xs" align="center">
             <IconMapPin color="blue" size={30} />
@@ -138,18 +90,9 @@ const WeeklyForecast = ({
             </Text>
           </Group>
         )}
-        <WeatherIcon
-          size={width < 300 ? 30 : 50}
-          code={weather.current_weather.weathercode}
-        />
-        <Title
-          order={2}
-          c={weather.current_weather.temperature > 20 ? "red" : "blue"}
-        >
-          {getPreferredUnit(
-            weather.current_weather.temperature,
-            options.isFormatFahrenheit,
-          )}
+        <WeatherIcon size={width < 300 ? 30 : 50} code={weather.current_weather.weathercode} />
+        <Title order={2} c={weather.current_weather.temperature > 20 ? "red" : "blue"}>
+          {getPreferredUnit(weather.current_weather.temperature, options.isFormatFahrenheit)}
         </Title>
       </Flex>
       <Forecast weather={weather} options={options} width={width} />
@@ -157,8 +100,7 @@ const WeeklyForecast = ({
   );
 };
 
-interface ForecastProps
-  extends Pick<WidgetComponentProps<"weather">, "options" | "width"> {
+interface ForecastProps extends Pick<WidgetComponentProps<"weather">, "options" | "width"> {
   weather: RouterOutputs["widget"]["weather"]["atLocation"];
 }
 
@@ -166,31 +108,19 @@ function Forecast({ weather, options, width }: ForecastProps) {
   return (
     <Flex align="center" direction="row" justify="space-between" w="100%">
       {weather.daily.time
-        .slice(
-          0,
-          Math.min(options.forecastDayCount, width / (width < 300 ? 64 : 92)),
-        )
+        .slice(0, Math.min(options.forecastDayCount, width / (width < 300 ? 64 : 92)))
         .map((time, index) => (
           <Card key={time}>
             <Flex direction="column" align="center">
               <Text fw={700} lh="1.25rem">
                 {new Date(time).getDate().toString().padStart(2, "0")}
               </Text>
-              <WeatherIcon
-                size={width < 300 ? 20 : 50}
-                code={weather.daily.weathercode[index]!}
-              />
+              <WeatherIcon size={width < 300 ? 20 : 50} code={weather.daily.weathercode[index]!} />
               <Text fz={width < 300 ? "xs" : "sm"} lh="1rem">
-                {getPreferredUnit(
-                  weather.daily.temperature_2m_max[index]!,
-                  options.isFormatFahrenheit,
-                )}
+                {getPreferredUnit(weather.daily.temperature_2m_max[index]!, options.isFormatFahrenheit)}
               </Text>
               <Text fz={width < 300 ? "xs" : "sm"} lh="1rem" c="grey">
-                {getPreferredUnit(
-                  weather.daily.temperature_2m_min[index]!,
-                  options.isFormatFahrenheit,
-                )}
+                {getPreferredUnit(weather.daily.temperature_2m_min[index]!, options.isFormatFahrenheit)}
               </Text>
             </Flex>
           </Card>
@@ -200,6 +130,4 @@ function Forecast({ weather, options, width }: ForecastProps) {
 }
 
 const getPreferredUnit = (value: number, isFahrenheit = false): string =>
-  isFahrenheit
-    ? `${(value * (9 / 5) + 32).toFixed(1)}°F`
-    : `${value.toFixed(1)}°C`;
+  isFahrenheit ? `${(value * (9 / 5) + 32).toFixed(1)}°F` : `${value.toFixed(1)}°C`;
diff --git a/packages/widgets/src/weather/icon.tsx b/packages/widgets/src/weather/icon.tsx
index 5c2839b8c..71d9dc87b 100644
--- a/packages/widgets/src/weather/icon.tsx
+++ b/packages/widgets/src/weather/icon.tsx
@@ -28,8 +28,7 @@ export const WeatherIcon = ({ code, size = 50 }: WeatherIconProps) => {
   const t = useScopedI18n("widget.weather");
 
   const { icon: Icon, name } =
-    weatherDefinitions.find((definition) => definition.codes.includes(code)) ??
-    unknownWeather;
+    weatherDefinitions.find((definition) => definition.codes.includes(code)) ?? unknownWeather;
 
   return (
     <Tooltip withinPortal withArrow label={t(`kind.${name}`)}>
diff --git a/packages/widgets/src/weather/index.ts b/packages/widgets/src/weather/index.ts
index 28805cc1e..e0db620dc 100644
--- a/packages/widgets/src/weather/index.ts
+++ b/packages/widgets/src/weather/index.ts
@@ -5,36 +5,33 @@ import { z } from "@homarr/validation";
 import { createWidgetDefinition } from "../definition";
 import { optionsBuilder } from "../options";
 
-export const { definition, componentLoader } = createWidgetDefinition(
-  "weather",
-  {
-    icon: IconCloud,
-    options: optionsBuilder.from(
-      (factory) => ({
-        isFormatFahrenheit: factory.switch(),
-        location: factory.location({
-          defaultValue: {
-            name: "Paris",
-            latitude: 48.85341,
-            longitude: 2.3488,
-          },
-        }),
-        showCity: factory.switch(),
-        hasForecast: factory.switch(),
-        forecastDayCount: factory.slider({
-          defaultValue: 5,
-          validate: z.number().min(1).max(7),
-          step: 1,
-          withDescription: true,
-        }),
+export const { definition, componentLoader } = createWidgetDefinition("weather", {
+  icon: IconCloud,
+  options: optionsBuilder.from(
+    (factory) => ({
+      isFormatFahrenheit: factory.switch(),
+      location: factory.location({
+        defaultValue: {
+          name: "Paris",
+          latitude: 48.85341,
+          longitude: 2.3488,
+        },
       }),
-      {
-        forecastDayCount: {
-          shouldHide({ hasForecast }) {
-            return !hasForecast;
-          },
+      showCity: factory.switch(),
+      hasForecast: factory.switch(),
+      forecastDayCount: factory.slider({
+        defaultValue: 5,
+        validate: z.number().min(1).max(7),
+        step: 1,
+        withDescription: true,
+      }),
+    }),
+    {
+      forecastDayCount: {
+        shouldHide({ hasForecast }) {
+          return !hasForecast;
         },
       },
-    ),
-  },
-).withDynamicImport(() => import("./component"));
+    },
+  ),
+}).withDynamicImport(() => import("./component"));
diff --git a/packages/widgets/src/widget-integration-select.module.css b/packages/widgets/src/widget-integration-select.module.css
index 7e1da6c97..c3a912789 100644
--- a/packages/widgets/src/widget-integration-select.module.css
+++ b/packages/widgets/src/widget-integration-select.module.css
@@ -1,11 +1,7 @@
 .pill {
   cursor: default;
-  background-color: light-dark(
-    var(--mantine-color-white),
-    var(--mantine-color-dark-7)
-  );
-  border: rem(1px) solid
-    light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-7));
+  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
+  border: rem(1px) solid light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-7));
   padding-left: var(--mantine-spacing-xs);
   border-radius: var(--mantine-radius-xl);
 }
diff --git a/packages/widgets/src/widget-integration-select.tsx b/packages/widgets/src/widget-integration-select.tsx
index f59a0c9db..bb8ce11ef 100644
--- a/packages/widgets/src/widget-integration-select.tsx
+++ b/packages/widgets/src/widget-integration-select.tsx
@@ -65,11 +65,7 @@ export const WidgetIntegrationSelect = ({
 
   const options = data.map((item) => {
     return (
-      <Combobox.Option
-        value={item.id}
-        key={item.id}
-        active={multiSelectValues.includes(item.id)}
-      >
+      <Combobox.Option value={item.id} key={item.id} active={multiSelectValues.includes(item.id)}>
         <Group gap="sm" align="center">
           {multiSelectValues.includes(item.id) ? <CheckIcon size={12} /> : null}
           <Group gap={7} align="center">
@@ -87,25 +83,11 @@ export const WidgetIntegrationSelect = ({
   });
 
   return (
-    <Combobox
-      store={combobox}
-      onOptionSubmit={handleValueSelect}
-      withinPortal={false}
-    >
+    <Combobox store={combobox} onOptionSubmit={handleValueSelect} withinPortal={false}>
       <Combobox.DropdownTarget>
-        <PillsInput
-          pointer
-          onClick={() => combobox.toggleDropdown()}
-          {...props}
-        >
+        <PillsInput pointer onClick={() => combobox.toggleDropdown()} {...props}>
           <Pill.Group>
-            {values.length > 0 ? (
-              values
-            ) : (
-              <Input.Placeholder>
-                {t("common.multiSelect.placeholder")}
-              </Input.Placeholder>
-            )}
+            {values.length > 0 ? values : <Input.Placeholder>{t("common.multiSelect.placeholder")}</Input.Placeholder>}
 
             <Combobox.EventsTarget>
               <PillsInput.Field
@@ -115,9 +97,7 @@ export const WidgetIntegrationSelect = ({
                   if (event.key !== "Backspace") return;
 
                   event.preventDefault();
-                  handleValueRemove(
-                    multiSelectValues[multiSelectValues.length - 1]!,
-                  );
+                  handleValueRemove(multiSelectValues[multiSelectValues.length - 1]!);
                 }}
               />
             </Combobox.EventsTarget>
@@ -150,13 +130,6 @@ const IntegrationPill = ({ option, onRemove }: IntegrationPillProps) => (
     <Text span size="xs" lh={1} fw={500}>
       {option.name}
     </Text>
-    <CloseButton
-      onMouseDown={onRemove}
-      variant="transparent"
-      color="gray"
-      size={22}
-      iconSize={14}
-      tabIndex={-1}
-    />
+    <CloseButton onMouseDown={onRemove} variant="transparent" color="gray" size={22} iconSize={14} tabIndex={-1} />
   </Group>
 );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6db4e1fbe..21215ab64 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,17 +9,17 @@ importers:
   .:
     dependencies:
       '@mantine/core':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mantine/dates':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tabler/icons-react':
         specifier: ^3.4.0
         version: 3.4.0(react@18.3.1)
       mantine-react-table:
         specifier: 2.0.0-beta.3
-        version: 2.0.0-beta.3(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(@tabler/icons-react@3.4.0(react@18.3.1))(clsx@2.1.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.0.0-beta.3(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(@tabler/icons-react@3.4.0(react@18.3.1))(clsx@2.1.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@homarr/prettier-config':
         specifier: workspace:^0.1.0
@@ -29,10 +29,10 @@ importers:
         version: 1.13.3(@types/node@20.12.12)(typescript@5.4.5)
       '@vitejs/plugin-react':
         specifier: ^4.2.1
-        version: 4.2.1(vite@5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1))
+        version: 4.2.1(vite@5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1))
       '@vitest/coverage-v8':
         specifier: ^1.6.0
-        version: 1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1))
+        version: 1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1))
       '@vitest/ui':
         specifier: ^1.6.0
         version: 1.6.0(vitest@1.6.0)
@@ -53,10 +53,10 @@ importers:
         version: 5.4.5
       vite-tsconfig-paths:
         specifier: ^4.3.2
-        version: 4.3.2(typescript@5.4.5)(vite@5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1))
+        version: 4.3.2(typescript@5.4.5)(vite@5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1))
       vitest:
         specifier: ^1.6.0
-        version: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1)
+        version: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1)
 
   apps/nextjs:
     dependencies:
@@ -90,6 +90,9 @@ importers:
       '@homarr/notifications':
         specifier: workspace:^0.1.0
         version: link:../../packages/notifications
+      '@homarr/server-settings':
+        specifier: workspace:^0.1.0
+        version: link:../../packages/server-settings
       '@homarr/spotlight':
         specifier: workspace:^0.1.0
         version: link:../../packages/spotlight
@@ -106,41 +109,41 @@ importers:
         specifier: workspace:^0.1.0
         version: link:../../packages/widgets
       '@mantine/colors-generator':
-        specifier: ^7.9.1
-        version: 7.9.1(chroma-js@2.4.2)
+        specifier: ^7.9.2
+        version: 7.9.2(chroma-js@2.4.2)
       '@mantine/hooks':
-        specifier: ^7.9.1
-        version: 7.9.1(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(react@18.3.1)
       '@mantine/modals':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mantine/tiptap':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(@tiptap/extension-link@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4))(@tiptap/react@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(@tiptap/extension-link@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4))(@tiptap/react@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@t3-oss/env-nextjs':
         specifier: ^0.10.1
         version: 0.10.1(typescript@5.4.5)(zod@3.23.8)
       '@tanstack/react-query':
-        specifier: ^5.36.2
-        version: 5.36.2(react@18.3.1)
+        specifier: ^5.37.1
+        version: 5.37.1(react@18.3.1)
       '@tanstack/react-query-devtools':
-        specifier: ^5.36.2
-        version: 5.36.2(@tanstack/react-query@5.36.2(react@18.3.1))(react@18.3.1)
+        specifier: ^5.37.1
+        version: 5.37.1(@tanstack/react-query@5.37.1(react@18.3.1))(react@18.3.1)
       '@tanstack/react-query-next-experimental':
-        specifier: 5.36.2
-        version: 5.36.2(@tanstack/react-query@5.36.2(react@18.3.1))(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react@18.3.1)
+        specifier: 5.37.1
+        version: 5.37.1(@tanstack/react-query@5.37.1(react@18.3.1))(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react@18.3.1)
       '@trpc/client':
-        specifier: 11.0.0-rc.373
-        version: 11.0.0-rc.373(@trpc/server@11.0.0-rc.373)
+        specifier: 11.0.0-rc.374
+        version: 11.0.0-rc.374(@trpc/server@11.0.0-rc.374)
       '@trpc/next':
         specifier: next
-        version: 11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/react-query@11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/server@11.0.0-rc.373)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.373)(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/react-query@11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/server@11.0.0-rc.374)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.374)(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@trpc/react-query':
         specifier: next
-        version: 11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/server@11.0.0-rc.373)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/server@11.0.0-rc.374)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@trpc/server':
         specifier: next
-        version: 11.0.0-rc.373
+        version: 11.0.0-rc.374
       '@xterm/addon-canvas':
         specifier: ^0.7.0
         version: 0.7.0(@xterm/xterm@5.5.0)
@@ -159,6 +162,9 @@ importers:
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
+      flag-icons:
+        specifier: ^7.2.1
+        version: 7.2.1
       glob:
         specifier: ^10.3.15
         version: 10.3.15
@@ -167,7 +173,7 @@ importers:
         version: 2.8.0(@types/react@18.3.2)(react@18.3.1)
       next:
         specifier: ^14.2.3
-        version: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1)
+        version: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2)
       postcss-preset-mantine:
         specifier: ^1.15.0
         version: 1.15.0(postcss@8.4.38)
@@ -178,8 +184,8 @@ importers:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
       sass:
-        specifier: ^1.77.1
-        version: 1.77.1
+        specifier: ^1.77.2
+        version: 1.77.2
       superjson:
         specifier: 2.2.1
         version: 2.2.1
@@ -218,8 +224,8 @@ importers:
         specifier: ^3.2.5
         version: 3.2.5
       tsx:
-        specifier: 4.10.3
-        version: 4.10.3
+        specifier: 4.10.5
+        version: 4.10.5
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -244,6 +250,9 @@ importers:
       '@homarr/redis':
         specifier: workspace:^0.1.0
         version: link:../../packages/redis
+      '@homarr/server-settings':
+        specifier: workspace:^0.1.0
+        version: link:../../packages/server-settings
       '@homarr/validation':
         specifier: workspace:^0.1.0
         version: link:../../packages/validation
@@ -253,6 +262,9 @@ importers:
       node-cron:
         specifier: ^3.0.3
         version: 3.0.3
+      superjson:
+        specifier: 2.2.1
+        version: 2.2.1
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -279,8 +291,8 @@ importers:
         specifier: ^3.2.5
         version: 3.2.5
       tsx:
-        specifier: 4.10.3
-        version: 4.10.3
+        specifier: 4.10.5
+        version: 4.10.5
       typescript:
         specifier: ^5.4.5
         version: 5.4.5
@@ -360,6 +372,9 @@ importers:
       '@homarr/redis':
         specifier: workspace:^0.1.0
         version: link:../redis
+      '@homarr/server-settings':
+        specifier: workspace:^0.1.0
+        version: link:../server-settings
       '@homarr/tasks':
         specifier: workspace:^0.1.0
         version: link:../../apps/tasks
@@ -368,10 +383,10 @@ importers:
         version: link:../validation
       '@trpc/client':
         specifier: next
-        version: 11.0.0-rc.373(@trpc/server@11.0.0-rc.373)
+        version: 11.0.0-rc.374(@trpc/server@11.0.0-rc.374)
       '@trpc/server':
         specifier: next
-        version: 11.0.0-rc.373
+        version: 11.0.0-rc.374
       superjson:
         specifier: 2.2.1
         version: 2.2.1
@@ -417,10 +432,10 @@ importers:
         version: 0.9.1
       next:
         specifier: ^14.2.3
-        version: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1)
+        version: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2)
       next-auth:
         specifier: 5.0.0-beta.18
-        version: 5.0.0-beta.18(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react@18.3.1)
+        version: 5.0.0-beta.18(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react@18.3.1)
       react:
         specifier: 18.3.1
         version: 18.3.1
@@ -553,9 +568,15 @@ importers:
 
   packages/form:
     dependencies:
+      '@homarr/translation':
+        specifier: workspace:^0.1.0
+        version: link:../translation
+      '@homarr/validation':
+        specifier: workspace:^0.1.0
+        version: link:../validation
       '@mantine/form':
-        specifier: ^7.9.1
-        version: 7.9.1(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(react@18.3.1)
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -654,8 +675,8 @@ importers:
         specifier: workspace:^0.1.0
         version: link:../ui
       '@mantine/notifications':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -704,6 +725,24 @@ importers:
         specifier: ^5.4.5
         version: 5.4.5
 
+  packages/server-settings:
+    devDependencies:
+      '@homarr/eslint-config':
+        specifier: workspace:^0.2.0
+        version: link:../../tooling/eslint
+      '@homarr/prettier-config':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/prettier
+      '@homarr/tsconfig':
+        specifier: workspace:^0.1.0
+        version: link:../../tooling/typescript
+      eslint:
+        specifier: ^8.57.0
+        version: 8.57.0
+      typescript:
+        specifier: ^5.4.5
+        version: 5.4.5
+
   packages/spotlight:
     dependencies:
       '@homarr/translation':
@@ -713,8 +752,8 @@ importers:
         specifier: workspace:^0.1.0
         version: link:../ui
       '@mantine/spotlight':
-        specifier: ^7.9.1
-        version: 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: ^7.9.2
+        version: 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -759,6 +798,9 @@ importers:
       '@homarr/log':
         specifier: workspace:^0.1.0
         version: link:../log
+      '@homarr/translation':
+        specifier: workspace:^0.1.0
+        version: link:../translation
     devDependencies:
       '@homarr/eslint-config':
         specifier: workspace:^0.2.0
@@ -784,6 +826,9 @@ importers:
       '@homarr/definitions':
         specifier: workspace:^0.1.0
         version: link:../definitions
+      '@homarr/translation':
+        specifier: workspace:^0.1.0
+        version: link:../translation
       zod:
         specifier: ^3.23.8
         version: 3.23.8
@@ -884,6 +929,12 @@ importers:
       '@tiptap/starter-kit':
         specifier: ^2.4.0
         version: 2.4.0(@tiptap/pm@2.2.4)
+      prismjs:
+        specifier: ^1.29.0
+        version: 1.29.0
+      react-simple-code-editor:
+        specifier: ^0.13.1
+        version: 0.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       video.js:
         specifier: ^8.12.0
         version: 8.12.0
@@ -897,6 +948,9 @@ importers:
       '@homarr/tsconfig':
         specifier: workspace:^0.1.0
         version: link:../../tooling/typescript
+      '@types/prismjs':
+        specifier: ^1.26.4
+        version: 1.26.4
       '@types/video.js':
         specifier: ^7.3.58
         version: 7.3.58
@@ -1664,71 +1718,71 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@mantine/colors-generator@7.9.1':
-    resolution: {integrity: sha512-PruvJCRmzCDnNL0xAGfpqJfzhcSn1Q9fTNWgK99O30oOhqOhj0X0iY7lwZQbg8EVirVnbAP0yO4iIqPQBcHpig==}
+  '@mantine/colors-generator@7.9.2':
+    resolution: {integrity: sha512-PxGET2EosF2EvBHDPvC0dFolry6YFNEHoieZkhVm8o0a7NclBadkbbRiVDH5qZ7xOKM+94Jf+NCfitXdqKKsAg==}
     peerDependencies:
       chroma-js: ^2.4.2
 
-  '@mantine/core@7.9.1':
-    resolution: {integrity: sha512-UXK11t1fAQ2ROQ9HTIZfyU52XdwS8sFJ2SRUh5uHMWSahJo3wTdKzaCvYN7wg+ONM9p6ENT0hC0dfv5qXoKU4w==}
+  '@mantine/core@7.9.2':
+    resolution: {integrity: sha512-ARNEiREF70tikW6at8QwFFcDbtennPjnhPOifaDL1sQurO3ORN/iOUFxiH1npWoqNydUZHxhsfFVpte8NNf/oQ==}
     peerDependencies:
-      '@mantine/hooks': 7.9.1
+      '@mantine/hooks': 7.9.2
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  '@mantine/dates@7.9.1':
-    resolution: {integrity: sha512-HB6gIMV6OEz/ih48KedcII1MNpH6oLit2ajSG50POJ3jgDSBQI9710kSu3rTrC5TiTLrZTIr/u51gsk0Daaepg==}
+  '@mantine/dates@7.9.2':
+    resolution: {integrity: sha512-jbSHNuaZk0Fn/TfVFDM/l9cW1pt4kdGPCOD17SkTwuvSnlMjj7TTjp8I5UCrnNTbmrlUR451HrOGPD0j6vBSFg==}
     peerDependencies:
-      '@mantine/core': 7.9.1
-      '@mantine/hooks': 7.9.1
+      '@mantine/core': 7.9.2
+      '@mantine/hooks': 7.9.2
       dayjs: '>=1.0.0'
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  '@mantine/form@7.9.1':
-    resolution: {integrity: sha512-6Z4LkACT1ouoTvtI9hH/rT+L7qvfKnCypUyaCtYpPkA57ANamK7qkmeXXBmbGGOf8mJB+ZSgOvpDVKKRz5iH3Q==}
+  '@mantine/form@7.9.2':
+    resolution: {integrity: sha512-G3n4VcK8LksJG9NncOwROXwxIJPXhpFF5FNemU+mCyuqzYI2bj8qsLh12e3wf9m1eZ2kmYjK4UpqP/AOptHHCQ==}
     peerDependencies:
       react: ^18.2.0
 
-  '@mantine/hooks@7.9.1':
-    resolution: {integrity: sha512-nb2Ar+2HfGxLjGZgObapeUeqcQsUWJ+rvj4X2KNTUy3+YpvLIMD3CqREowWHF7/5OTGh4BCyBqQNZ9JFpnMeHQ==}
+  '@mantine/hooks@7.9.2':
+    resolution: {integrity: sha512-qT8vvHZ8K/qFXSSIyq/NHpKgtEs1Vas4Z2tPPtMTN7oyibjsel09XebPAt59nkJS/SACQbja0GZ4lUXI2+AFFw==}
     peerDependencies:
       react: ^18.2.0
 
-  '@mantine/modals@7.9.1':
-    resolution: {integrity: sha512-HvDJ3XLnNuYpFFuJ3SNPbRnM2kATKaIFmgsN9zt8ZkYD7GgvfYXyZ+jctwNBaR6atAbWyFboDklJ4AIc+0w8aw==}
+  '@mantine/modals@7.9.2':
+    resolution: {integrity: sha512-ViXo6wCsvxYz0XEKUP2wQZwPgUkTGqqeyqS11axhzZbDmbxvXC2uUX9jl1mlDNj83b/ynVqjKms5mW2p81+AuA==}
     peerDependencies:
-      '@mantine/core': 7.9.1
-      '@mantine/hooks': 7.9.1
+      '@mantine/core': 7.9.2
+      '@mantine/hooks': 7.9.2
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  '@mantine/notifications@7.9.1':
-    resolution: {integrity: sha512-+fzc/+conYQMqE72eaKcxaOrLijsWExRO6Rp+QVgsmp3Hf57yksRdEbVE259PrWq3jaVI8G4XIMeKdYK0tB5Pw==}
+  '@mantine/notifications@7.9.2':
+    resolution: {integrity: sha512-ERgmPLkiVPOqPjCVfSSK2QcRb/2W9wJVPpIlkSyMNYUWosceAH9uPhZCtnWxyRqH/PLhYtOOflxq2i4hiArEJQ==}
     peerDependencies:
-      '@mantine/core': 7.9.1
-      '@mantine/hooks': 7.9.1
+      '@mantine/core': 7.9.2
+      '@mantine/hooks': 7.9.2
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  '@mantine/spotlight@7.9.1':
-    resolution: {integrity: sha512-o01capdEMhYPBUtjosDjsHZhSSRAFJpmlTZQb1bWeNO2f+jmNRF40v6jZNFImYE41Y9bHeNFXegzhQcXOov5qw==}
+  '@mantine/spotlight@7.9.2':
+    resolution: {integrity: sha512-iNz6yk2nioWz28AqZpmLQ/iwYn0Vqx5hMzmCEIcHPJIxkSxbBNktGjiFLTqb30Wht1ITelmUuBEfkWGGgyYzgg==}
     peerDependencies:
-      '@mantine/core': 7.9.1
-      '@mantine/hooks': 7.9.1
+      '@mantine/core': 7.9.2
+      '@mantine/hooks': 7.9.2
       react: ^18.2.0
       react-dom: ^18.2.0
 
-  '@mantine/store@7.9.1':
-    resolution: {integrity: sha512-m15k51F4n6R08Iii+TWG64lofiYB9hhEGS+3y+9DZHuY+hSmTmQX9J5WKVNYJ3jmV24QG96EjEQNuLBcG2atSg==}
+  '@mantine/store@7.9.2':
+    resolution: {integrity: sha512-oqCjse3cAp0DQI1fT5AWLW+Me6Mu4b2DVPpoRRwm7Ptw8gzUEmxb/9Brx2rkhaAym+S9sGe8IdEpNVLXaZyGXw==}
     peerDependencies:
       react: ^18.2.0
 
-  '@mantine/tiptap@7.9.1':
-    resolution: {integrity: sha512-0o7qbORbk33bWcWOcdxlgKVcpTZio6VljquQMZANGvZjPDmKiHYjuxrandkwYZIXSstzOFtqc+8FMFB23OtlJg==}
+  '@mantine/tiptap@7.9.2':
+    resolution: {integrity: sha512-E32/0/2kSLZItXEgadK5el5YY3E7uCnFFc19qL18XSI6RLytrJhDyw0aoIxfeRxkkfFZjSUkrtec7XNWo4hUQQ==}
     peerDependencies:
-      '@mantine/core': 7.9.1
-      '@mantine/hooks': 7.9.1
+      '@mantine/core': 7.9.2
+      '@mantine/hooks': 7.9.2
       '@tiptap/extension-link': '>=2.1.12'
       '@tiptap/react': '>=2.1.12'
       react: ^18.2.0
@@ -1946,24 +2000,24 @@ packages:
   '@tanstack/query-core@5.36.1':
     resolution: {integrity: sha512-BteWYEPUcucEu3NBcDAgKuI4U25R9aPrHSP6YSf2NvaD2pSlIQTdqOfLRsxH9WdRYg7k0Uom35Uacb6nvbIMJg==}
 
-  '@tanstack/query-devtools@5.32.1':
-    resolution: {integrity: sha512-7Xq57Ctopiy/4atpb0uNY5VRuCqRS/1fi/WBCKKX6jHMa6cCgDuV/AQuiwRXcKARbq2OkVAOrW2v4xK9nTbcCA==}
+  '@tanstack/query-devtools@5.37.1':
+    resolution: {integrity: sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==}
 
-  '@tanstack/react-query-devtools@5.36.2':
-    resolution: {integrity: sha512-bkPQrKmKJOa2dNs6rBB9aef8jCG8XAg8QKIhwN8NI+QaXky86IofnO8YjiF6P1mYquLXbQvK0VZ9DnGV0wH/eA==}
+  '@tanstack/react-query-devtools@5.37.1':
+    resolution: {integrity: sha512-fWL3rV/avL9HsHt3RVYxuLCqSHghBwSGPIUMDZ9hfg9PDjQaeI9d8kJj6yLoCBWUhTue5/rQbISvFtr+yxyYyA==}
     peerDependencies:
-      '@tanstack/react-query': ^5.36.2
+      '@tanstack/react-query': ^5.37.1
       react: ^18.0.0
 
-  '@tanstack/react-query-next-experimental@5.36.2':
-    resolution: {integrity: sha512-RC/QZxrUvpd9w03J1BXhN0Zt0Yw/w+hji0X7ppY2mw1ZL15OjyJ4P3i9u7oaYhKF8Wx00mkQtUkjDagXZFNB3w==}
+  '@tanstack/react-query-next-experimental@5.37.1':
+    resolution: {integrity: sha512-Z4ksCK2Ta4UhQ2fwowlOT3P94pcfRLIY+cHHsp92y2di9Bft6q6yODoDVOSvVho1tqQjlJemljegZaUZUvtKVA==}
     peerDependencies:
-      '@tanstack/react-query': ^5.36.2
+      '@tanstack/react-query': ^5.37.1
       next: ^13 || ^14
       react: ^18.0.0
 
-  '@tanstack/react-query@5.36.2':
-    resolution: {integrity: sha512-bHNa+5dead+j6SA8WVlEOPxcGfteVFgdyFTCFcxBgjnPf0fFpHUc7aNZBCnvmPXqy/BeQa9zTuU9ectb7i8ZXA==}
+  '@tanstack/react-query@5.37.1':
+    resolution: {integrity: sha512-EhtBNA8GL3XFeSx6VYUjXQ96n44xe3JGKZCzBINrCYlxbZP6UwBafv7ti4eSRWc2Fy+fybQre0w17gR6lMzULA==}
     peerDependencies:
       react: ^18.0.0
 
@@ -2185,18 +2239,18 @@ packages:
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  '@trpc/client@11.0.0-rc.373':
-    resolution: {integrity: sha512-DSKOFjpQycJjwLrJWCpMqfwuFCP99QUPBZBeCb94WTvZUb6wGzOZWQMdIj7EnsR9jgWHlPll1e0s7OgAWxBKqw==}
+  '@trpc/client@11.0.0-rc.374':
+    resolution: {integrity: sha512-Ha1GaTT9FCq9BRPQPa+KKRTXSDRwvjHpsoYVl683vNoXnJRtTycMsPdydr/zdL10vuUHjutpLMZNycSRQ9yN0g==}
     peerDependencies:
-      '@trpc/server': 11.0.0-rc.373+db2ec5cae
+      '@trpc/server': 11.0.0-rc.374+5027209bc
 
-  '@trpc/next@11.0.0-rc.373':
-    resolution: {integrity: sha512-VCuV2qBlr0z5tFMExtNzY6zEtKMUSXCOxuC53u4IRePParFZ2uVpqx2yGqyHsgORThjn1xtjlX2klp5wEPt1YA==}
+  '@trpc/next@11.0.0-rc.374':
+    resolution: {integrity: sha512-yKyS0AcI3RF4ZyGHnSNWqIKC2jDpeP5if+z6qjnjsvMsrRXAt/yFobI9qqsu3eeQqfe0LdwiOPAax6A0ALeKXw==}
     peerDependencies:
       '@tanstack/react-query': ^5.25.0
-      '@trpc/client': 11.0.0-rc.373+db2ec5cae
-      '@trpc/react-query': 11.0.0-rc.373+db2ec5cae
-      '@trpc/server': 11.0.0-rc.373+db2ec5cae
+      '@trpc/client': 11.0.0-rc.374+5027209bc
+      '@trpc/react-query': 11.0.0-rc.374+5027209bc
+      '@trpc/server': 11.0.0-rc.374+5027209bc
       next: '*'
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
@@ -2206,17 +2260,17 @@ packages:
       '@trpc/react-query':
         optional: true
 
-  '@trpc/react-query@11.0.0-rc.373':
-    resolution: {integrity: sha512-yxHlSiuPkoCnEB0W9yzF5eSX6F09/JFsTpdrwyocTg0Z1TaAYkJ0pUVMP1Gb3bKZEou1x6a8ZJJEqKLZbLPXCA==}
+  '@trpc/react-query@11.0.0-rc.374':
+    resolution: {integrity: sha512-zv/KjlxfeuOS5f0G2wl4L3AKzI/shYLj1sKxbtfGKkLRPMbCBqLlw4b37wRf5BLX4gi8f87FXm11Wwa8okD6aQ==}
     peerDependencies:
       '@tanstack/react-query': ^5.25.0
-      '@trpc/client': 11.0.0-rc.373+db2ec5cae
-      '@trpc/server': 11.0.0-rc.373+db2ec5cae
+      '@trpc/client': 11.0.0-rc.374+5027209bc
+      '@trpc/server': 11.0.0-rc.374+5027209bc
       react: '>=18.2.0'
       react-dom: '>=18.2.0'
 
-  '@trpc/server@11.0.0-rc.373':
-    resolution: {integrity: sha512-i5q1KkQ0fuHqYbEPWMfk2rTp31wde8RKo0jxWfwZU8YsnjaErZ8lFnGCxz252l7mMCqT70IKR6c/N5MEXqChDA==}
+  '@trpc/server@11.0.0-rc.374':
+    resolution: {integrity: sha512-7r76KJwbSV5mffEYQMGBIAVrrJdPot0JzYQD9ZvcInO8q9sn+uVVZQ8XCAq93zXDSodvzGBJhRu3Kn1qXPw5Xg==}
 
   '@tsconfig/node10@1.0.9':
     resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
@@ -2325,6 +2379,9 @@ packages:
   '@types/object.pick@1.3.4':
     resolution: {integrity: sha512-5PjwB0uP2XDp3nt5u5NJAG2DORHIRClPzWT/TTZhJ2Ekwe8M5bA9tvPdi9NO/n2uvu2/ictat8kgqvLfcIE1SA==}
 
+  '@types/prismjs@1.26.4':
+    resolution: {integrity: sha512-rlAnzkW2sZOjbqZ743IHUhFcvzaGbqijwOu8QZnZCjfQzBqFE3s4lOTJEsxikImav9uzz/42I+O7YUs1mWgMlg==}
+
   '@types/prop-types@15.7.11':
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
 
@@ -3423,6 +3480,9 @@ packages:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
 
+  flag-icons@7.2.1:
+    resolution: {integrity: sha512-EaU4XZmFt1BOilz9nMmJKjma5pOaNjzL7somOhadrrilollh4xj6aaXI2M1sd00VUfVWN0E25Q6xaW3SNt0k/Q==}
+
   flat-cache@3.2.0:
     resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -3515,9 +3575,6 @@ packages:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
 
-  get-tsconfig@4.7.3:
-    resolution: {integrity: sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==}
-
   get-tsconfig@4.7.5:
     resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
 
@@ -4605,6 +4662,10 @@ packages:
   pretty-format@3.8.0:
     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
 
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   process@0.11.10:
     resolution: {integrity: sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==}
     engines: {node: '>= 0.6.0'}
@@ -4742,6 +4803,12 @@ packages:
       '@types/react':
         optional: true
 
+  react-simple-code-editor@0.13.1:
+    resolution: {integrity: sha512-XYeVwRZwgyKtjNIYcAEgg2FaQcCZwhbarnkJIV20U2wkCU9q/CPFBo8nRXrK4GXUz3AvbqZFsZRrpUTkqqEYyQ==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+
   react-style-singleton@2.2.1:
     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
     engines: {node: '>=10'}
@@ -4888,8 +4955,8 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  sass@1.77.1:
-    resolution: {integrity: sha512-OMEyfirt9XEfyvocduUIOlUSkWOXS/LAt6oblR/ISXCTukyavjex+zQNm51pPCOiFKY1QpWvEH1EeCkgyV3I6w==}
+  sass@1.77.2:
+    resolution: {integrity: sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
 
@@ -5262,8 +5329,8 @@ packages:
     resolution: {integrity: sha512-LxhtAkPDTkVCMQjt2h6eBVY28KCjikZqZfMcC15YBeNjkgUpdCfBu5HoiOTDu86v6smE8yOjyEktJ8hlbANHQA==}
     engines: {node: '>=0.6.x'}
 
-  tsx@4.10.3:
-    resolution: {integrity: sha512-f0g60aFSVRVkzcQkEflh8fPLRfmt+HJHgWi/plG5UgvVaV+9TcpOwJ0sZJSACXmwmjMPg9yQR0BhTLbhkfV2uA==}
+  tsx@4.10.5:
+    resolution: {integrity: sha512-twDSbf7Gtea4I2copqovUiNTEDrT8XNFXsuHpfGbdpW/z9ZW4fTghzzhAG0WfrCuJmJiOEY1nLIjq4u3oujRWQ==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -5947,7 +6014,7 @@ snapshots:
   '@esbuild-kit/esm-loader@2.6.5':
     dependencies:
       '@esbuild-kit/core-utils': 3.3.2
-      get-tsconfig: 4.7.3
+      get-tsconfig: 4.7.5
 
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
@@ -6266,14 +6333,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@mantine/colors-generator@7.9.1(chroma-js@2.4.2)':
+  '@mantine/colors-generator@7.9.2(chroma-js@2.4.2)':
     dependencies:
       chroma-js: 2.4.2
 
-  '@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@floating-ui/react': 0.26.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
       clsx: 2.1.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -6284,57 +6351,57 @@ snapshots:
     transitivePeerDependencies:
       - '@types/react'
 
-  '@mantine/dates@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/dates@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
       clsx: 2.1.0
       dayjs: 1.11.11
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@mantine/form@7.9.1(react@18.3.1)':
+  '@mantine/form@7.9.2(react@18.3.1)':
     dependencies:
       fast-deep-equal: 3.1.3
       klona: 2.0.6
       react: 18.3.1
 
-  '@mantine/hooks@7.9.1(react@18.3.1)':
+  '@mantine/hooks@7.9.2(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
-  '@mantine/modals@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/modals@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@mantine/notifications@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/notifications@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
-      '@mantine/store': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
+      '@mantine/store': 7.9.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-transition-group: 4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  '@mantine/spotlight@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/spotlight@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
-      '@mantine/store': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
+      '@mantine/store': 7.9.2(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@mantine/store@7.9.1(react@18.3.1)':
+  '@mantine/store@7.9.2(react@18.3.1)':
     dependencies:
       react: 18.3.1
 
-  '@mantine/tiptap@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(@tiptap/extension-link@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4))(@tiptap/react@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mantine/tiptap@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(@tiptap/extension-link@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4))(@tiptap/react@2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
       '@tiptap/extension-link': 2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)
       '@tiptap/react': 2.4.0(@tiptap/core@2.4.0(@tiptap/pm@2.2.4))(@tiptap/pm@2.2.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
@@ -6511,21 +6578,21 @@ snapshots:
 
   '@tanstack/query-core@5.36.1': {}
 
-  '@tanstack/query-devtools@5.32.1': {}
+  '@tanstack/query-devtools@5.37.1': {}
 
-  '@tanstack/react-query-devtools@5.36.2(@tanstack/react-query@5.36.2(react@18.3.1))(react@18.3.1)':
+  '@tanstack/react-query-devtools@5.37.1(@tanstack/react-query@5.37.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/query-devtools': 5.32.1
-      '@tanstack/react-query': 5.36.2(react@18.3.1)
+      '@tanstack/query-devtools': 5.37.1
+      '@tanstack/react-query': 5.37.1(react@18.3.1)
       react: 18.3.1
 
-  '@tanstack/react-query-next-experimental@5.36.2(@tanstack/react-query@5.36.2(react@18.3.1))(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react@18.3.1)':
+  '@tanstack/react-query-next-experimental@5.37.1(@tanstack/react-query@5.37.1(react@18.3.1))(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react@18.3.1)':
     dependencies:
-      '@tanstack/react-query': 5.36.2(react@18.3.1)
-      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1)
+      '@tanstack/react-query': 5.37.1(react@18.3.1)
+      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2)
       react: 18.3.1
 
-  '@tanstack/react-query@5.36.2(react@18.3.1)':
+  '@tanstack/react-query@5.37.1(react@18.3.1)':
     dependencies:
       '@tanstack/query-core': 5.36.1
       react: 18.3.1
@@ -6752,30 +6819,30 @@ snapshots:
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
-  '@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373)':
+  '@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374)':
     dependencies:
-      '@trpc/server': 11.0.0-rc.373
+      '@trpc/server': 11.0.0-rc.374
 
-  '@trpc/next@11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/react-query@11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/server@11.0.0-rc.373)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.373)(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@trpc/next@11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/react-query@11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/server@11.0.0-rc.374)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@trpc/server@11.0.0-rc.374)(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@trpc/client': 11.0.0-rc.373(@trpc/server@11.0.0-rc.373)
-      '@trpc/server': 11.0.0-rc.373
-      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1)
+      '@trpc/client': 11.0.0-rc.374(@trpc/server@11.0.0-rc.374)
+      '@trpc/server': 11.0.0-rc.374
+      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     optionalDependencies:
-      '@tanstack/react-query': 5.36.2(react@18.3.1)
-      '@trpc/react-query': 11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/server@11.0.0-rc.373)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tanstack/react-query': 5.37.1(react@18.3.1)
+      '@trpc/react-query': 11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/server@11.0.0-rc.374)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
 
-  '@trpc/react-query@11.0.0-rc.373(@tanstack/react-query@5.36.2(react@18.3.1))(@trpc/client@11.0.0-rc.373(@trpc/server@11.0.0-rc.373))(@trpc/server@11.0.0-rc.373)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@trpc/react-query@11.0.0-rc.374(@tanstack/react-query@5.37.1(react@18.3.1))(@trpc/client@11.0.0-rc.374(@trpc/server@11.0.0-rc.374))(@trpc/server@11.0.0-rc.374)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tanstack/react-query': 5.36.2(react@18.3.1)
-      '@trpc/client': 11.0.0-rc.373(@trpc/server@11.0.0-rc.373)
-      '@trpc/server': 11.0.0-rc.373
+      '@tanstack/react-query': 5.37.1(react@18.3.1)
+      '@trpc/client': 11.0.0-rc.374(@trpc/server@11.0.0-rc.374)
+      '@trpc/server': 11.0.0-rc.374
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@trpc/server@11.0.0-rc.373': {}
+  '@trpc/server@11.0.0-rc.374': {}
 
   '@tsconfig/node10@1.0.9': {}
 
@@ -6926,6 +6993,8 @@ snapshots:
 
   '@types/object.pick@1.3.4': {}
 
+  '@types/prismjs@1.26.4': {}
+
   '@types/prop-types@15.7.11': {}
 
   '@types/qs@6.9.11': {}
@@ -7080,18 +7149,18 @@ snapshots:
       global: 4.4.0
       is-function: 1.0.2
 
-  '@vitejs/plugin-react@4.2.1(vite@5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1))':
+  '@vitejs/plugin-react@4.2.1(vite@5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1))':
     dependencies:
       '@babel/core': 7.23.9
       '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.9)
       '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.9)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.0
-      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)
+      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1))':
+  '@vitest/coverage-v8@1.6.0(vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1))':
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@bcoe/v8-coverage': 0.2.3
@@ -7106,7 +7175,7 @@ snapshots:
       std-env: 3.7.0
       strip-literal: 2.0.0
       test-exclude: 6.0.0
-      vitest: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1)
+      vitest: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -7141,7 +7210,7 @@ snapshots:
       pathe: 1.1.2
       picocolors: 1.0.0
       sirv: 2.0.4
-      vitest: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1)
+      vitest: 1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1)
 
   '@vitest/utils@1.6.0':
     dependencies:
@@ -8283,6 +8352,8 @@ snapshots:
       locate-path: 6.0.0
       path-exists: 4.0.0
 
+  flag-icons@7.2.1: {}
+
   flat-cache@3.2.0:
     dependencies:
       flatted: 3.2.9
@@ -8384,10 +8455,6 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.2.4
 
-  get-tsconfig@4.7.3:
-    dependencies:
-      resolve-pkg-maps: 1.0.0
-
   get-tsconfig@4.7.5:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -9054,11 +9121,11 @@ snapshots:
 
   make-error@1.3.6: {}
 
-  mantine-react-table@2.0.0-beta.3(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(@tabler/icons-react@3.4.0(react@18.3.1))(clsx@2.1.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  mantine-react-table@2.0.0-beta.3(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/dates@7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(@tabler/icons-react@3.4.0(react@18.3.1))(clsx@2.1.0)(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@mantine/core': 7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/dates': 7.9.1(@mantine/core@7.9.1(@mantine/hooks@7.9.1(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.1(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@mantine/hooks': 7.9.1(react@18.3.1)
+      '@mantine/core': 7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/dates': 7.9.2(@mantine/core@7.9.2(@mantine/hooks@7.9.2(react@18.3.1))(@types/react@18.3.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@7.9.2(react@18.3.1))(dayjs@1.11.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@mantine/hooks': 7.9.2(react@18.3.1)
       '@tabler/icons-react': 3.4.0(react@18.3.1)
       '@tanstack/match-sorter-utils': 8.15.1
       '@tanstack/react-table': 8.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -9202,10 +9269,10 @@ snapshots:
 
   netmask@2.0.2: {}
 
-  next-auth@5.0.0-beta.18(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1))(react@18.3.1):
+  next-auth@5.0.0-beta.18(next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2))(react@18.3.1):
     dependencies:
       '@auth/core': 0.31.0
-      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1)
+      next: 14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2)
       react: 18.3.1
 
   next-international@1.2.4:
@@ -9216,7 +9283,7 @@ snapshots:
 
   next-tick@1.1.0: {}
 
-  next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.1):
+  next@14.2.3(@babel/core@7.23.9)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.2):
     dependencies:
       '@next/env': 14.2.3
       '@swc/helpers': 0.5.5
@@ -9237,7 +9304,7 @@ snapshots:
       '@next/swc-win32-arm64-msvc': 14.2.3
       '@next/swc-win32-ia32-msvc': 14.2.3
       '@next/swc-win32-x64-msvc': 14.2.3
-      sass: 1.77.1
+      sass: 1.77.2
     transitivePeerDependencies:
       - '@babel/core'
       - babel-plugin-macros
@@ -9574,6 +9641,8 @@ snapshots:
 
   pretty-format@3.8.0: {}
 
+  prismjs@1.29.0: {}
+
   process@0.11.10: {}
 
   prop-types@15.8.1:
@@ -9759,6 +9828,11 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.2
 
+  react-simple-code-editor@0.13.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-style-singleton@2.2.1(@types/react@18.3.2)(react@18.3.1):
     dependencies:
       get-nonce: 1.0.1
@@ -9931,7 +10005,7 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass@1.77.1:
+  sass@1.77.2:
     dependencies:
       chokidar: 3.6.0
       immutable: 4.3.5
@@ -10303,7 +10377,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsx@4.10.3:
+  tsx@4.10.5:
     dependencies:
       esbuild: 0.20.2
       get-tsconfig: 4.7.5
@@ -10512,13 +10586,13 @@ snapshots:
     dependencies:
       global: 4.4.0
 
-  vite-node@1.6.0(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1):
+  vite-node@1.6.0(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1):
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
       pathe: 1.1.2
       picocolors: 1.0.0
-      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)
+      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -10529,18 +10603,18 @@ snapshots:
       - supports-color
       - terser
 
-  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)):
+  vite-tsconfig-paths@4.3.2(typescript@5.4.5)(vite@5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)):
     dependencies:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 3.0.3(typescript@5.4.5)
     optionalDependencies:
-      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)
+      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1):
+  vite@5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1):
     dependencies:
       esbuild: 0.20.2
       postcss: 8.4.38
@@ -10548,10 +10622,10 @@ snapshots:
     optionalDependencies:
       '@types/node': 20.12.12
       fsevents: 2.3.3
-      sass: 1.77.1
+      sass: 1.77.2
       sugarss: 4.0.1(postcss@8.4.38)
 
-  vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.1)(sugarss@4.0.1):
+  vitest@1.6.0(@types/node@20.12.12)(@vitest/ui@1.6.0)(jsdom@24.0.0)(sass@1.77.2)(sugarss@4.0.1):
     dependencies:
       '@vitest/expect': 1.6.0
       '@vitest/runner': 1.6.0
@@ -10570,8 +10644,8 @@ snapshots:
       strip-literal: 2.0.0
       tinybench: 2.6.0
       tinypool: 0.8.3
-      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)
-      vite-node: 1.6.0(@types/node@20.12.12)(sass@1.77.1)(sugarss@4.0.1)
+      vite: 5.2.6(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)
+      vite-node: 1.6.0(@types/node@20.12.12)(sass@1.77.2)(sugarss@4.0.1)
       why-is-node-running: 2.2.2
     optionalDependencies:
       '@types/node': 20.12.12
diff --git a/tooling/eslint/base.js b/tooling/eslint/base.js
index fe08052ed..bb154044f 100644
--- a/tooling/eslint/base.js
+++ b/tooling/eslint/base.js
@@ -27,18 +27,12 @@ const config = {
     ],
     "@typescript-eslint/prefer-nullish-coalescing": "off",
     "turbo/no-undeclared-env-vars": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
-    ],
+    "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_", varsIgnorePattern: "^_" }],
     "@typescript-eslint/consistent-type-imports": [
       "warn",
       { prefer: "type-imports", fixStyle: "separate-type-imports" },
     ],
-    "@typescript-eslint/no-misused-promises": [
-      2,
-      { checksVoidReturn: { attributes: false } },
-    ],
+    "@typescript-eslint/no-misused-promises": [2, { checksVoidReturn: { attributes: false } }],
     "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
     "no-restricted-syntax": [
       "error",
@@ -49,8 +43,7 @@ const config = {
       {
         selector:
           "FunctionDeclaration[async=true][id.name=/^[a-z].*$/][id.name=/ ^(?!generateMetadata$)[a-z].*$/][id.name!=/Async$/]",
-        message:
-          "Async function name must end in 'Async' (function declaration)",
+        message: "Async function name must end in 'Async' (function declaration)",
       },
       {
         selector: "MethodDefinition[value.async=false][key.name=/Async$/]",
@@ -61,8 +54,7 @@ const config = {
         message: "Async method name must end in 'Async'",
       },
       {
-        selector:
-          "Property[value.type=/FunctionExpression$/][value.async=false][key.name=/Async$/]",
+        selector: "Property[value.type=/FunctionExpression$/][value.async=false][key.name=/Async$/]",
         message: "Function ending in 'Async' must be declared async",
       },
       {
@@ -71,26 +63,17 @@ const config = {
         message: "Async function name must end in 'Async' (property)",
       },
       {
-        selector:
-          "VariableDeclarator[init.type=/FunctionExpression$/][init.async=false][id.name=/Async$/]",
+        selector: "VariableDeclarator[init.type=/FunctionExpression$/][init.async=false][id.name=/Async$/]",
         message: "Function ending in 'Async' must be declared async",
       },
       {
         selector:
           "VariableDeclarator[init.type=/FunctionExpression$/][init.async=true][id.name=/^[a-z].*$/][id.name!=/Async$/]",
-        message:
-          "Async function name must end in 'Async' (variable declarator)",
+        message: "Async function name must end in 'Async' (variable declarator)",
       },
     ],
   },
-  ignorePatterns: [
-    "**/.eslintrc.cjs",
-    "**/*.config.js",
-    "**/*.config.cjs",
-    ".next",
-    "dist",
-    "pnpm-lock.yaml",
-  ],
+  ignorePatterns: ["**/.eslintrc.cjs", "**/*.config.js", "**/*.config.cjs", ".next", "dist", "pnpm-lock.yaml"],
   reportUnusedDisableDirectives: true,
 };
 
diff --git a/tooling/eslint/react.js b/tooling/eslint/react.js
index 618e1816f..ee21a219f 100644
--- a/tooling/eslint/react.js
+++ b/tooling/eslint/react.js
@@ -1,10 +1,6 @@
 /** @type {import('eslint').Linter.Config} */
 const config = {
-  extends: [
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:jsx-a11y/recommended",
-  ],
+  extends: ["plugin:react/recommended", "plugin:react-hooks/recommended", "plugin:jsx-a11y/recommended"],
   rules: {
     "react/prop-types": "off",
   },
diff --git a/tooling/prettier/index.mjs b/tooling/prettier/index.mjs
index 252af72ad..bbda4c6b8 100644
--- a/tooling/prettier/index.mjs
+++ b/tooling/prettier/index.mjs
@@ -16,6 +16,7 @@ const config = {
     "^[./]",
   ],
   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  printWidth: 120,
   importOrderTypeScriptVersion: "4.4.0",
 };