chore(release): automatic release v1.10.0

2026-02-27 00:40:58 +01:00 · 2025-03-07 19:13:16 +00:00
parent 72860a877b 37d471457a
commit 44007b2b4b
39 changed files with 728 additions and 708 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -31,6 +31,9 @@ body:
      label: Version
      description: What version of Homarr are you running?
      options:
+        - 1.9.0
+        - 1.8.0
+        - 1.7.0
        - 1.6.0
        - 1.5.0
        - 1.4.0
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -56,9 +56,9 @@
    "@mantine/tiptap": "^7.17.1",
    "@million/lint": "1.0.14",
    "@tabler/icons-react": "^3.31.0",
-    "@tanstack/react-query": "^5.67.1",
-    "@tanstack/react-query-devtools": "^5.67.1",
-    "@tanstack/react-query-next-experimental": "^5.67.1",
+    "@tanstack/react-query": "^5.67.2",
+    "@tanstack/react-query-devtools": "^5.67.2",
+    "@tanstack/react-query-next-experimental": "^5.67.2",
    "@trpc/client": "next",
    "@trpc/next": "next",
    "@trpc/react-query": "next",
--- a/package.json
+++ b/package.json
@@ -40,8 +40,8 @@
    "@semantic-release/release-notes-generator": "^14.0.3",
    "@turbo/gen": "^2.4.4",
    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^3.0.7",
-    "@vitest/ui": "^3.0.7",
+    "@vitest/coverage-v8": "^3.0.8",
+    "@vitest/ui": "^3.0.8",
    "conventional-changelog-conventionalcommits": "^8.0.0",
    "cross-env": "^7.0.3",
    "jsdom": "^26.0.0",
@@ -51,7 +51,7 @@
    "turbo": "^2.4.4",
    "typescript": "^5.8.2",
    "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.7"
+    "vitest": "^3.0.8"
  },
  "packageManager": "pnpm@10.5.2",
  "engines": {
--- a/packages/db/package.json
+++ b/packages/db/package.json
@@ -52,7 +52,7 @@
    "drizzle-kit": "^0.30.5",
    "drizzle-orm": "^0.40.0",
    "drizzle-zod": "^0.7.0",
-    "mysql2": "3.12.0"
+    "mysql2": "3.13.0"
  },
  "devDependencies": {
    "@homarr/eslint-config": "workspace:^0.2.0",
--- a/packages/integrations/src/pi-hole/pi-hole-integration-factory.ts
+++ b/packages/integrations/src/pi-hole/pi-hole-integration-factory.ts
@@ -1,3 +1,4 @@
+import { fetchWithTrustedCertificatesAsync } from "@homarr/certificates/server";
 import { removeTrailingSlash } from "@homarr/common";

 import type { IntegrationInput } from "../base/integration";
@@ -7,7 +8,7 @@ import { PiHoleIntegrationV6 } from "./v6/pi-hole-integration-v6";
 export const createPiHoleIntegrationAsync = async (input: IntegrationInput) => {
  const baseUrl = removeTrailingSlash(input.url);
  const url = new URL(`${baseUrl}/api/info/version`);
-  const response = await fetch(url);
+  const response = await fetchWithTrustedCertificatesAsync(url);

  /**
   * In pi-hole 5 the api was at /admin/api.php, in pi-hole 6 it was moved to /api
--- a/packages/log/package.json
+++ b/packages/log/package.json
@@ -24,7 +24,7 @@
  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@homarr/env": "workspace:^0.1.0",
-    "ioredis": "5.5.0",
+    "ioredis": "5.6.0",
    "superjson": "2.2.2",
    "winston": "3.17.0",
    "zod": "^3.24.2"
--- a/packages/redis/package.json
+++ b/packages/redis/package.json
@@ -26,7 +26,7 @@
    "@homarr/db": "workspace:^",
    "@homarr/definitions": "workspace:^",
    "@homarr/log": "workspace:^",
-    "ioredis": "5.5.0",
+    "ioredis": "5.6.0",
    "superjson": "2.2.2"
  },
  "devDependencies": {
--- a/packages/translation/src/lang/cn.json
+++ b/packages/translation/src/lang/cn.json
@@ -974,7 +974,7 @@
      },
      "option": {
        "borderColor": {
-          "label": ""
+          "label": "边界颜色"
        }
      },
      "remove": {
@@ -1822,10 +1822,10 @@
        "available": "可用"
      },
      "status": {
-        "pending": "",
-        "approved": "",
-        "declined": "",
-        "failed": ""
+        "pending": "待处理",
+        "approved": "已批准",
+        "declined": "已拒绝",
+        "failed": "失败"
      },
      "toBeDetermined": "待定"
    },
--- a/packages/translation/src/lang/he.json
+++ b/packages/translation/src/lang/he.json
@@ -974,7 +974,7 @@
      },
      "option": {
        "borderColor": {
-          "label": ""
+          "label": "צבע מסגרת"
        }
      },
      "remove": {
@@ -1822,10 +1822,10 @@
        "available": "זמין"
      },
      "status": {
-        "pending": "",
-        "approved": "",
-        "declined": "",
-        "failed": ""
+        "pending": "ממתין",
+        "approved": "אושר",
+        "declined": "נדחה",
+        "failed": "נכשל"
      },
      "toBeDetermined": "ייקבע בהמשך"
    },
--- a/packages/translation/src/lang/tr.json
+++ b/packages/translation/src/lang/tr.json
@@ -784,7 +784,7 @@
        },
        "tokenId": {
          "label": "Token Anahtar Kimliği",
-          "newLabel": "Yeni Anahtar Kimliği"
+          "newLabel": "Yeni Token Anahtar Kimliği"
        },
        "realm": {
          "label": "Erişim Alanı",
--- a/packages/translation/src/lang/zh.json
+++ b/packages/translation/src/lang/zh.json
@@ -974,7 +974,7 @@
      },
      "option": {
        "borderColor": {
-          "label": ""
+          "label": "邊框顏色"
        }
      },
      "remove": {
@@ -1822,10 +1822,10 @@
        "available": "待定"
      },
      "status": {
-        "pending": "",
-        "approved": "",
-        "declined": "",
-        "failed": ""
+        "pending": "待處理",
+        "approved": "已批准",
+        "declined": "已拒絕",
+        "failed": "失敗"
      },
      "toBeDetermined": "多媒體請求狀態"
    },
--- a/packages/widgets/src/app/component.tsx
+++ b/packages/widgets/src/app/component.tsx
@@ -74,12 +74,11 @@ export default function AppWidget({ options, isEditMode }: WidgetComponentProps<
          h="100%"
          w="100%"
          direction="column"
-          p="7.5cqmin"
          justify="center"
          align="center"
        >
          {options.showTitle && (
-            <Text className="app-title" fw={700} ta="center" size="12.5cqmin">
+            <Text className="app-title" fw={700} ta="center">
              {app.name}
            </Text>
          )}
--- a/packages/widgets/src/app/ping/ping-dot.tsx
+++ b/packages/widgets/src/app/ping/ping-dot.tsx
@@ -14,18 +14,18 @@ export const PingDot = ({ color, tooltip, ...props }: PingDotProps) => {
  const { pingIconsEnabled } = useSettings();

  return (
-    <Box bottom="2.5cqmin" right="2.5cqmin" pos="absolute">
+    <Box bottom={10} right={10} pos="absolute" display={"flex"}>
      <Tooltip label={tooltip}>
        {pingIconsEnabled ? (
-          <props.icon style={{ width: "10cqmin", height: "10cqmin" }} color={color} />
+          <props.icon style={{ width: 20, height: 20 }} strokeWidth={5} color={color} />
        ) : (
          <Box
            bg={color}
            style={{
              borderRadius: "100%",
            }}
-            w="10cqmin"
-            h="10cqmin"
+            w={16}
+            h={16}
          ></Box>
        )}
      </Tooltip>
--- a/packages/widgets/src/bookmarks/bookmark.module.css
+++ b/packages/widgets/src/bookmarks/bookmark.module.css
@@ -2,6 +2,14 @@
  background-color: var(--mantine-color-primaryColor-light-hover);
 }

+[data-mantine-color-scheme="light"] .card-grid {
+  background-color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme="dark"] .card-grid {
+  background-color: var(--mantine-color-dark-7);
+}
+
 .card:hover > div > div.bookmarkIcon {
  background-color: var(--mantine-color-iconColor-filled-hover);
 }
--- a/packages/widgets/src/bookmarks/component.tsx
+++ b/packages/widgets/src/bookmarks/component.tsx
@@ -1,6 +1,7 @@
 "use client";

 import { Anchor, Box, Card, Divider, Flex, Group, Stack, Text, Title, UnstyledButton } from "@mantine/core";
+import combineClasses from "clsx";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -42,9 +43,11 @@ export default function BookmarksWidget({ options, width, height, itemId }: Widg

  return (
    <Stack h="100%" gap="sm" p="sm">
-      <Title order={4} px="0.25rem">
-        {options.title}
-      </Title>
+      {options.title.length > 0 && (
+        <Title order={4} px="0.25rem">
+          {options.title}
+        </Title>
+      )}
      {options.layout === "grid" && (
        <GridLayout
          data={data}
@@ -80,8 +83,9 @@ interface FlexLayoutProps {
 }

 const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab, hasIconColor }: FlexLayoutProps) => {
+  const board = useRequiredBoard();
  return (
-    <Flex direction={direction} gap="0" h="100%" w="100%">
+    <Flex direction={direction} gap="0" w="100%">
      {data.map((app, index) => (
        <div key={app.id} style={{ display: "flex", flex: "1", flexDirection: direction }}>
          <Divider
@@ -95,18 +99,9 @@ const FlexLayout = ({ data, direction, hideIcon, hideHostname, openNewTab, hasIc
            target={openNewTab ? "_blank" : "_self"}
            rel="noopener noreferrer"
            key={app.id}
-            h="100%"
            w="100%"
          >
-            <Card
-              radius="md"
-              style={{ containerType: "size" }}
-              className={classes.card}
-              h="100%"
-              w="100%"
-              display="flex"
-              p={0}
-            >
+            <Card radius={board.itemRadius} className={classes.card} w="100%" display="flex" p={"xs"} h={"100%"}>
              {direction === "row" ? (
                <VerticalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} hasIconColor={hasIconColor} />
              ) : (
@@ -134,12 +129,14 @@ const GridLayout = ({ data, width, height, hideIcon, hideHostname, openNewTab, h
  // Calculates the perfect number of columns for the grid layout based on the width and height in pixels and the number of items
  const columns = Math.ceil(Math.sqrt(data.length * (width / height)));

+  const board = useRequiredBoard();
+
  return (
    <Box
      display="grid"
      h="100%"
      style={{
-        gridTemplateColumns: `repeat(${columns}, auto)`,
+        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: 10,
      }}
    >
@@ -152,8 +149,19 @@ const GridLayout = ({ data, width, height, hideIcon, hideHostname, openNewTab, h
          key={app.id}
          h="100%"
        >
-          <Card withBorder style={{ containerType: "size" }} h="100%" className={classes.card} p="5cqmin">
-            <VerticalItem app={app} hideIcon={hideIcon} hideHostname={hideHostname} hasIconColor={hasIconColor} />
+          <Card
+            h="100%"
+            className={combineClasses(classes.card, classes["card-grid"])}
+            radius={board.itemRadius}
+            p="sm"
+          >
+            <VerticalItem
+              app={app}
+              hideIcon={hideIcon}
+              hideHostname={hideHostname}
+              hasIconColor={hasIconColor}
+              size={50}
+            />
          </Card>
        </UnstyledButton>
      ))}
@@ -166,15 +174,17 @@ const VerticalItem = ({
  hideIcon,
  hideHostname,
  hasIconColor,
+  size = 30,
 }: {
  app: RouterOutputs["app"]["byIds"][number];
  hideIcon: boolean;
  hideHostname: boolean;
  hasIconColor: boolean;
+  size?: number;
 }) => {
  return (
-    <Stack h="100%" gap="5cqmin">
-      <Text fw={700} ta="center" size="20cqmin">
+    <Stack h="100%" gap="sm">
+      <Text fw={700} ta="center" size="lg">
        {app.name}
      </Text>
      {!hideIcon && (
@@ -184,16 +194,18 @@ const VerticalItem = ({
          alt={app.name}
          className={classes.bookmarkIcon}
          style={{
-            maxHeight: "100%",
-            maxWidth: "100%",
+            width: size,
+            height: size,
            overflow: "auto",
            flex: 1,
            scale: 0.8,
+            marginLeft: "auto",
+            marginRight: "auto",
          }}
        />
      )}
      {!hideHostname && (
-        <Anchor ta="center" component="span" size="12cqmin">
+        <Anchor ta="center" component="span" size="lg">
          {app.href ? new URL(app.href).hostname : undefined}
        </Anchor>
      )}
@@ -213,7 +225,7 @@ const HorizontalItem = ({
  hasIconColor: boolean;
 }) => {
  return (
-    <Group wrap="nowrap">
+    <Group wrap="nowrap" gap={"xs"}>
      {!hideIcon && (
        <MaskedOrNormalImage
          imageUrl={app.iconUrl}
@@ -223,20 +235,19 @@ const HorizontalItem = ({
          style={{
            overflow: "auto",
            scale: 0.8,
-            minHeight: "100cqh",
-            maxHeight: "100cqh",
-            minWidth: "100cqh",
-            maxWidth: "100cqh",
+            width: 30,
+            height: 30,
+            flex: "unset",
          }}
        />
      )}
      <Stack justify="space-between" gap={0}>
-        <Text fw={700} size="45cqh" lineClamp={1}>
+        <Text fw={700} size="md" lineClamp={1}>
          {app.name}
        </Text>

        {!hideHostname && (
-          <Anchor component="span" size="30cqh">
+          <Anchor component="span" size="xs">
            {app.href ? new URL(app.href).hostname : undefined}
          </Anchor>
        )}
--- a/packages/widgets/src/calendar/calender-day.tsx
+++ b/packages/widgets/src/calendar/calender-day.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
-import { Container, Popover, useMantineTheme } from "@mantine/core";
+import { Box, Container, Flex, Popover, Text, useMantineTheme } from "@mantine/core";

+import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";

 import { CalendarEventList } from "./calendar-event-list";
@@ -9,11 +10,19 @@ interface CalendarDayProps {
  date: Date;
  events: CalendarEvent[];
  disabled: boolean;
+  rootWidth: number;
+  rootHeight: number;
 }

-export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
-  const [opened, setOpend] = useState(false);
+export const CalendarDay = ({ date, events, disabled, rootHeight, rootWidth }: CalendarDayProps) => {
+  const [opened, setOpened] = useState(false);
  const { primaryColor } = useMantineTheme();
+  const board = useRequiredBoard();
+  const mantineTheme = useMantineTheme();
+  const actualItemRadius = mantineTheme.radius[board.itemRadius];
+
+  const minAxisSize = Math.min(rootWidth, rootHeight);
+  const shouldScaleDown = minAxisSize < 350;

  return (
    <Popover
@@ -25,7 +34,7 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
      transitionProps={{
        transition: "pop",
      }}
-      onChange={setOpend}
+      onChange={setOpened}
      opened={opened}
      disabled={disabled}
    >
@@ -35,30 +44,23 @@ export const CalendarDay = ({ date, events, disabled }: CalendarDayProps) => {
          w="100%"
          p={0}
          m={0}
-          bd={`1cqmin solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          bd={`3px solid ${opened && !disabled ? primaryColor : "transparent"}`}
+          pos={"relative"}
          style={{
            alignContent: "center",
-            borderRadius: "3.5cqmin",
+            borderRadius: actualItemRadius,
            cursor: disabled ? "default" : "pointer",
          }}
          onClick={() => {
            if (disabled) return;

-            setOpend((prev) => !prev);
+            setOpened((prev) => !prev);
          }}
        >
-          <div
-            style={{
-              textAlign: "center",
-              whiteSpace: "nowrap",
-              fontSize: "5cqmin",
-              lineHeight: "5cqmin",
-              paddingTop: "1.25cqmin",
-            }}
-          >
+          <Text ta={"center"} size={shouldScaleDown ? "xs" : "md"} lh={1}>
            {date.getDate()}
-          </div>
-          <NotificationIndicator events={events} />
+          </Text>
+          {rootHeight >= 350 && <NotificationIndicator events={events} />}
        </Container>
      </Popover.Target>
      <Popover.Dropdown>
@@ -75,19 +77,10 @@ interface NotificationIndicatorProps {
 const NotificationIndicator = ({ events }: NotificationIndicatorProps) => {
  const notificationEvents = [...new Set(events.map((event) => event.links[0]?.notificationColor))].filter(String);
  return (
-    <Container h="0.7cqmin" w="80%" display="flex" p={0} style={{ flexDirection: "row", justifyContent: "center" }}>
+    <Flex h="xs" w="75%" pos={"absolute"} bottom={0} left={"12.5%"} p={0} direction={"row"} justify={"center"}>
      {notificationEvents.map((notificationEvent) => {
-        return (
-          <Container
-            key={notificationEvent}
-            bg={notificationEvent}
-            h="100%"
-            mx="0.25cqmin"
-            p={0}
-            style={{ flex: 1, borderRadius: "1000px" }}
-          />
-        );
+        return <Box key={notificationEvent} bg={notificationEvent} h={4} p={0} style={{ flex: 1, borderRadius: 5 }} />;
      })}
-    </Container>
+    </Flex>
  );
 };
--- a/packages/widgets/src/calendar/component.tsx
+++ b/packages/widgets/src/calendar/component.tsx
@@ -2,11 +2,14 @@

 import { useState } from "react";
 import { useParams } from "next/navigation";
+import { useMantineTheme } from "@mantine/core";
 import { Calendar } from "@mantine/dates";
+import { useElementSize } from "@mantine/hooks";
 import dayjs from "dayjs";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { CalendarEvent } from "@homarr/integrations/types";
 import { useSettings } from "@homarr/settings";

@@ -60,6 +63,10 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
  const params = useParams();
  const locale = params.locale as string;
  const { firstDayOfWeek } = useSettings();
+  const board = useRequiredBoard();
+  const mantineTheme = useMantineTheme();
+  const actualItemRadius = mantineTheme.radius[board.itemRadius];
+  const { ref, width, height } = useElementSize();

  return (
    <Calendar
@@ -72,43 +79,39 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
      date={month}
      maxLevel="month"
      firstDayOfWeek={firstDayOfWeek}
-      w="100%"
-      h="100%"
      static={isEditMode}
      className={classes.calendar}
+      w={"100%"}
+      h={"100%"}
+      ref={ref}
      styles={{
        calendarHeaderControl: {
          pointerEvents: isEditMode ? "none" : undefined,
-          height: "12cqmin",
-          width: "12cqmin",
-          borderRadius: "3.5cqmin",
+          borderRadius: "md",
        },
        calendarHeaderLevel: {
-          height: "12cqmin",
-          fontSize: "6cqmin",
          pointerEvents: "none",
        },
        levelsGroup: {
          height: "100%",
-          padding: "2.5cqmin",
+          padding: "md",
        },
        calendarHeader: {
          maxWidth: "unset",
          marginBottom: 0,
        },
-        day: {
-          width: "12cqmin",
-          height: "12cqmin",
-          borderRadius: "3.5cqmin",
-        },
        monthCell: {
          textAlign: "center",
        },
+        day: {
+          borderRadius: actualItemRadius,
+          width: width < 350 ? 20 : 50,
+          height: height < 350 ? 20 : 50,
+        },
        month: {
          height: "100%",
        },
        weekday: {
-          fontSize: "5.5cqmin",
          padding: 0,
        },
      }}
@@ -122,7 +125,13 @@ const CalendarBase = ({ isEditMode, events, month, setMonth, options }: Calendar
          }))
          .filter((event): event is CalendarEvent => Boolean(event.date));
        return (
-          <CalendarDay date={tileDate} events={eventsForDate} disabled={isEditMode || eventsForDate.length === 0} />
+          <CalendarDay
+            date={tileDate}
+            events={eventsForDate}
+            disabled={isEditMode || eventsForDate.length === 0}
+            rootWidth={width}
+            rootHeight={height}
+          />
        );
      }}
    />
--- a/packages/widgets/src/clock/component.tsx
+++ b/packages/widgets/src/clock/component.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useEffect, useMemo, useRef, useState } from "react";
-import { Stack, Text } from "@mantine/core";
+import { Stack, Text, Title } from "@mantine/core";
 import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import timezones from "dayjs/plugin/timezone";
@@ -22,19 +22,19 @@ export default function ClockWidget({ options }: WidgetComponentProps<"clock">)
  const timezone = options.useCustomTimezone ? options.timezone : Intl.DateTimeFormat().resolvedOptions().timeZone;
  const time = useCurrentTime(options);
  return (
-    <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="10cqmin">
+    <Stack className="clock-text-stack" h="100%" align="center" justify="center" gap="sm">
      {options.customTitleToggle && (
-        <Text className="clock-customTitle-text" size="12.5cqmin" ta="center">
+        <Text className="clock-customTitle-text" size="md" ta="center">
          {options.customTitle}
        </Text>
      )}
-      <Text className="clock-time-text" fw={700} size="22.5cqmin" lh="1">
+      <Title className="clock-time-text" fw={700} order={1} lh="1">
        {options.customTimeFormat
          ? dayjs(time).tz(timezone).format(customTimeFormat)
          : dayjs(time).tz(timezone).format(timeFormat)}
-      </Text>
+      </Title>
      {options.showDate && (
-        <Text className="clock-date-text" size="12.5cqmin" p="1cqmin" lineClamp={1}>
+        <Text className="clock-date-text" size="md" p="sm" lineClamp={1}>
          {options.customDateFormat
            ? dayjs(time).tz(timezone).format(customDateFormat)
            : dayjs(time).tz(timezone).format(dateFormat)}
--- a/packages/widgets/src/dns-hole/controls/component.module.css
+++ b/packages/widgets/src/dns-hole/controls/component.module.css
@@ -0,0 +1,7 @@
+[data-mantine-color-scheme="light"] .card {
+  background-color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme="dark"] .card {
+  background-color: var(--mantine-color-dark-7);
+}
--- a/packages/widgets/src/dns-hole/controls/component.tsx
+++ b/packages/widgets/src/dns-hole/controls/component.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 import { ActionIcon, Badge, Button, Card, Flex, ScrollArea, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IconCircleFilled, IconClockPause, IconPlayerPlay, IconPlayerStop } from "@tabler/icons-react";
+import combineClasses from "clsx";

 import type { RouterOutputs } from "@homarr/api";
 import { clientApi } from "@homarr/api/client";
@@ -19,6 +20,7 @@ import { MaskedOrNormalImage } from "@homarr/ui";

 import type { widgetKind } from ".";
 import type { WidgetComponentProps } from "../../definition";
+import classes from "./component.module.css";
 import TimerModal from "./TimerModal";

 const dnsLightStatus = (enabled: boolean | undefined) =>
@@ -179,12 +181,12 @@ export default function DnsHoleControlsWidget({
      className="dns-hole-controls-stack"
      h="100%"
      direction="column"
-      p="2.5cqmin"
-      gap="2.5cqmin"
+      p="sm"
+      gap="sm"
      style={{ pointerEvents: isEditMode ? "none" : undefined }}
    >
      {controlAllButtonsVisible && (
-        <Flex className="dns-hole-controls-buttons" gap="2.5cqmin">
+        <Flex className="dns-hole-controls-buttons" gap="sm">
          <Tooltip label={t("widget.dnsHoleControls.controls.enableAll")}>
            <Button
              className="dns-hole-controls-enable-all-button"
@@ -193,15 +195,12 @@ export default function DnsHoleControlsWidget({
              variant="light"
              color="green"
              h="fit-content"
-              p="1.25cqmin"
+              p="xs"
              bd={0}
-              radius="2.5cqmin"
+              radius={board.itemRadius}
              flex={1}
            >
-              <IconPlayerPlay
-                className="dns-hole-controls-enable-all-icon"
-                style={{ height: "7.5cqmin", width: "7.5cqmin" }}
-              />
+              <IconPlayerPlay className="dns-hole-controls-enable-all-icon" size={24} />
            </Button>
          </Tooltip>

@@ -216,15 +215,12 @@ export default function DnsHoleControlsWidget({
              variant="light"
              color="yellow"
              h="fit-content"
-              p="1.25cqmin"
+              p="xs"
              bd={0}
-              radius="2.5cqmin"
+              radius={board.itemRadius}
              flex={1}
            >
-              <IconClockPause
-                className="dns-hole-controls-timer-all-icon"
-                style={{ height: "7.5cqmin", width: "7.5cqmin" }}
-              />
+              <IconClockPause className="dns-hole-controls-timer-all-icon" size={24} />
            </Button>
          </Tooltip>

@@ -236,15 +232,12 @@ export default function DnsHoleControlsWidget({
              variant="light"
              color="red"
              h="fit-content"
-              p="1.25cqmin"
+              p="xs"
              bd={0}
-              radius="2.5cqmin"
+              radius={board.itemRadius}
              flex={1}
            >
-              <IconPlayerStop
-                className="dns-hole-controls-disable-all-icon"
-                style={{ height: "7.5cqmin", width: "7.5cqmin" }}
-              />
+              <IconPlayerStop className="dns-hole-controls-disable-all-icon" size={24} />
            </Button>
          </Tooltip>
        </Flex>
@@ -253,7 +246,7 @@ export default function DnsHoleControlsWidget({
      <ScrollArea className="dns-hole-controls-integration-list-scroll-area flexed-scroll-area">
        <Stack
          className="dns-hole-controls-integration-list"
-          gap="2.5cqmin"
+          gap="sm"
          flex={1}
          justify={controlAllButtonsVisible ? "flex-end" : "space-evenly"}
        >
@@ -306,34 +299,40 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
  const isInteractPermitted = integrationsWithInteractions.includes(data.integration.id);
  // Use all factors to infer the state of the action buttons
  const controlEnabled = isInteractPermitted && isEnabled !== undefined && isConnected;
+  const board = useRequiredBoard();

  const iconUrl = integrationDefs[data.integration.kind].iconUrl;

  return (
    <Card
-      className={`dns-hole-controls-integration-item-outer-shell dns-hole-controls-integration-item-${data.integration.id} dns-hole-controls-integration-item-${data.integration.name}`}
+      className={combineClasses(
+        "dns-hole-controls-integration-item-outer-shell",
+        `dns-hole-controls-integration-item-${data.integration.id}`,
+        `dns-hole-controls-integration-item-${data.integration.name}`,
+        classes.card,
+      )}
      key={data.integration.id}
-      withBorder
-      p="2.5cqmin"
-      radius="2.5cqmin"
+      p="sm"
+      py={8}
+      radius={board.itemRadius}
    >
-      <Flex className="dns-hole-controls-item-container" gap="4cqmin" align="center" direction="row">
+      <Flex className="dns-hole-controls-item-container" gap="md" align="center" direction="row">
        <MaskedOrNormalImage
          imageUrl={iconUrl}
          hasColor={hasIconColor}
          alt={data.integration.name}
          className="dns-hole-controls-item-icon"
          style={{
-            height: "20cqmin",
-            width: "20cqmin",
+            height: 30,
+            width: 30,
            filter: !isConnected ? "grayscale(100%)" : undefined,
          }}
        />
-        <Flex className="dns-hole-controls-item-data-stack" direction="column" gap="1.5cqmin">
-          <Text className="dns-hole-controls-item-integration-name" fz="7cqmin">
+        <Flex className="dns-hole-controls-item-data-stack" direction="column" gap={5}>
+          <Text className="dns-hole-controls-item-integration-name" fz="md" fw={"bold"}>
            {data.integration.name}
          </Text>
-          <Flex className="dns-hole-controls-item-controls" direction="row" gap="1.5cqmin">
+          <Flex className="dns-hole-controls-item-controls" direction="row" gap="lg">
            <UnstyledButton
              className="dns-hole-controls-item-toggle-button"
              disabled={!controlEnabled}
@@ -343,20 +342,18 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
            >
              <Badge
                className={`dns-hole-controls-item-toggle-button-styling${controlEnabled ? " hoverable-component clickable-component" : ""}`}
-                bd="0.1cqmin solid var(--border-color)"
-                px="2.5cqmin"
-                h="7.5cqmin"
-                fz="4.5cqmin"
-                lts="0.1cqmin"
+                bd="1px solid var(--border-color)"
+                px="sm"
+                h="lg"
                color="var(--background-color)"
                c="var(--mantine-color-text)"
-                styles={{ section: { marginInlineEnd: "2.5cqmin" }, root: { cursor: "inherit" } }}
+                styles={{ section: { marginInlineEnd: "sm" }, root: { cursor: "inherit" } }}
                leftSection={
                  isConnected && (
                    <IconCircleFilled
                      className="dns-hole-controls-item-status-icon"
                      color={dnsLightStatus(isEnabled)}
-                      style={{ height: "3.5cqmin", width: "3.5cqmin" }}
+                      size={16}
                    />
                  )
                }
@@ -374,27 +371,25 @@ const ControlsCard: React.FC<ControlsCardProps> = ({
                )}
              </Badge>
            </UnstyledButton>
-            <ActionIcon
-              className="dns-hole-controls-item-timer-button"
-              display={isInteractPermitted ? undefined : "none"}
-              disabled={!controlEnabled || !isEnabled}
-              color="yellow"
-              size="fit-content"
-              radius="999px 999px 0px 999px"
-              bd={0}
-              variant="subtle"
-              onClick={() => {
-                setSelectedIntegrationIds([data.integration.id]);
-                open();
-              }}
-            >
-              <IconClockPause
-                className="dns-hole-controls-item-timer-icon"
-                style={{ height: "7.5cqmin", width: "7.5cqmin" }}
-              />
-            </ActionIcon>
          </Flex>
        </Flex>
+        <ActionIcon
+          className="dns-hole-controls-item-timer-button"
+          display={isInteractPermitted ? undefined : "none"}
+          disabled={!controlEnabled || !isEnabled}
+          color="yellow"
+          size={30}
+          radius={board.itemRadius}
+          bd={0}
+          ms={"auto"}
+          variant="subtle"
+          onClick={() => {
+            setSelectedIntegrationIds([data.integration.id]);
+            open();
+          }}
+        >
+          <IconClockPause className="dns-hole-controls-item-timer-icon" size={20} />
+        </ActionIcon>
      </Flex>
    </Card>
  );
--- a/packages/widgets/src/dns-hole/summary/component.tsx
+++ b/packages/widgets/src/dns-hole/summary/component.tsx
@@ -2,11 +2,12 @@

 import { useMemo } from "react";
 import type { BoxProps } from "@mantine/core";
-import { Avatar, AvatarGroup, Box, Card, Flex, Stack, Text, Tooltip, TooltipFloating } from "@mantine/core";
+import { Avatar, AvatarGroup, Card, Flex, SimpleGrid, Stack, Text, Tooltip, TooltipFloating } from "@mantine/core";
 import { useElementSize } from "@mantine/hooks";
 import { IconBarrierBlock, IconPercentage, IconSearch, IconWorldWww } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { formatNumber } from "@homarr/common";
 import { integrationDefs } from "@homarr/definitions";
 import type { DnsHoleSummary } from "@homarr/integrations/types";
@@ -62,26 +63,26 @@ export default function DnsHoleSummaryWidget({ options, integrationIds }: Widget
  const data = useMemo(() => summaries.flatMap(({ summary }) => summary), [summaries]);

  return (
-    <Box h="100%" {...boxPropsByLayout(options.layout)} p="2cqmin">
+    <SimpleGrid cols={2} h="100%" p={"xs"} {...boxPropsByLayout(options.layout)}>
      {data.length > 0 ? (
        stats.map((item) => (
          <StatCard key={item.color} item={item} usePiHoleColors={options.usePiHoleColors} data={data} t={t} />
        ))
      ) : (
-        <Stack h="100%" w="100%" justify="center" align="center" gap="2.5cqmin" p="2.5cqmin">
-          <AvatarGroup spacing="10cqmin">
+        <Stack h="100%" w="100%" justify="center" align="center" gap="sm" p="sm">
+          <AvatarGroup spacing="md">
            {summaries.map(({ integration }) => (
              <Tooltip key={integration.id} label={integration.name}>
-                <Avatar h="35cqmin" w="35cqmin" src={integrationDefs[integration.kind].iconUrl} />
+                <Avatar h={30} w={30} src={integrationDefs[integration.kind].iconUrl} />
              </Tooltip>
            ))}
          </AvatarGroup>
-          <Text fz="10cqmin" ta="center">
+          <Text fz="md" ta="center">
            {t("widget.dnsHoleSummary.error.integrationsDisconnected")}
          </Text>
        </Stack>
      )}
-    </Box>
+    </SimpleGrid>
  );
 }

@@ -152,30 +153,30 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
  const { ref, height, width } = useElementSize();
  const isLong = width > height + 20;
  const tooltip = item.tooltip?.(data, t);
+  const board = useRequiredBoard();

  return (
    <TooltipFloating label={tooltip} disabled={!tooltip} w={250} multiline>
      <Card
        ref={ref}
        className="summary-card"
-        m="2cqmin"
-        p="2.5cqmin"
+        p="sm"
+        radius={board.itemRadius}
        bg={usePiHoleColors ? item.color : "rgba(96, 96, 96, 0.1)"}
        style={{
          flex: 1,
        }}
-        withBorder
      >
        <Flex
          className="summary-card-elements"
          h="100%"
          w="100%"
          align="center"
-          justify="space-evenly"
+          justify="center"
          direction={isLong ? "row" : "column"}
          style={{ containerType: "size" }}
        >
-          <item.icon className="summary-card-icon" size="40cqmin" style={{ margin: "2.5cqmin" }} />
+          <item.icon className="summary-card-icon" size={50} />
          <Flex
            className="summary-card-texts"
            justify="center"
@@ -183,22 +184,15 @@ const StatCard = ({ item, data, usePiHoleColors, t }: StatCardProps) => {
            style={{
              flex: isLong ? 1 : undefined,
            }}
+            mt={"xs"}
            w="100%"
-            h="100%"
-            gap="1cqmin"
+            gap={0}
          >
-            <Text
-              key={item.value(data)}
-              className="summary-card-value text-flash"
-              ta="center"
-              size="20cqmin"
-              fw="bold"
-              style={{ "--glow-size": "2.5cqmin" }}
-            >
+            <Text key={item.value(data)} className="summary-card-value text-flash" ta="center" size="lg" fw="bold">
              {item.value(data)}
            </Text>
            {item.label && (
-              <Text className="summary-card-label" ta="center" size="15cqmin">
+              <Text className="summary-card-label" ta="center" size="md">
                {translateIfNecessary(t, item.label)}
              </Text>
            )}
--- a/packages/widgets/src/downloads/component.tsx
+++ b/packages/widgets/src/downloads/component.tsx
@@ -675,7 +675,7 @@ export default function DownloadClientsWidget({
    <Stack gap={0} h="100%" display="flex" style={baseStyle}>
      <MantineReactTable table={table} />
      <Group
-        h="var(--ratio-width)"
+        h={40}
        px="var(--space-size)"
        justify={integrationTypes.includes("torrent") ? "space-between" : "end"}
        style={{
@@ -690,7 +690,6 @@ export default function DownloadClientsWidget({
        )}
        <ClientsControl
          clients={clients}
-          style={editStyle}
          filters={quickFilters}
          setFilters={setQuickFilters}
          availableStatuses={availableStatuses}
@@ -785,10 +784,9 @@ interface ClientsControlProps {
  filters: QuickFilter;
  setFilters: (filters: QuickFilter) => void;
  availableStatuses: QuickFilter["statuses"];
-  style?: MantineStyleProp;
 }

-const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style }: ClientsControlProps) => {
+const ClientsControl = ({ clients, filters, setFilters, availableStatuses }: ClientsControlProps) => {
  const integrationsStatuses = clients.reduce(
    (acc, { status, integration: { id }, interact }) =>
      status && interact ? (acc[status.paused ? "paused" : "active"].push(id), acc) : acc,
@@ -799,33 +797,21 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style
    clients.reduce((count, { status }) => count + (status?.rates.down ?? 0), 0),
    "/s",
  );
-  const chipStyle = {
-    "--chip-fz": "var(--button-fz)",
-    "--chip-size": "calc(var(--ratio-width) * 0.9)",
-    "--chip-icon-size": "calc(var(--chip-fz)*2/3)",
-    "--chip-padding": "var(--chip-fz)",
-    "--chip-checked-padding": "var(--chip-icon-size)",
-    "--chip-spacing": "var(--space-size)",
-  };
+
  const { mutate: mutateResumeQueue } = clientApi.widget.downloads.resume.useMutation();
  const { mutate: mutatePauseQueue } = clientApi.widget.downloads.pause.useMutation();
  const [opened, { open, close }] = useDisclosure(false);
  const t = useScopedI18n("widget.downloads");
  return (
-    <Group gap="var(--space-size)" style={style}>
+    <Group gap={5}>
      <Popover withinPortal={false} offset={0}>
        <Popover.Target>
-          <ActionIcon size="var(--button-size)" radius={999} variant="light">
+          <ActionIcon size={30} radius={999} variant="light">
            <IconFilter style={actionIconIconStyle} />
          </ActionIcon>
        </Popover.Target>
-        <Popover.Dropdown
-          w="calc(var(--ratio-width)*4)"
-          p="var(--space-size)"
-          bg="var(--background-color)"
-          style={{ "--popover-border-color": "var(--border-color)" }}
-        >
-          <Stack gap="var(--space-size)" align="center" pb="var(--space-size)">
+        <Popover.Dropdown>
+          <Stack gap="md" align="center" pb="var(--space-size)">
            <Text fw="700">{t("items.integration.columnTitle")}</Text>
            <Chip.Group
              multiple
@@ -833,7 +819,7 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style
              onChange={(names) => setFilters({ ...filters, integrationKinds: names })}
            >
              {clients.map(({ integration }) => (
-                <Chip style={chipStyle} key={integration.id} value={integration.name}>
+                <Chip key={integration.id} value={integration.name}>
                  {integration.name}
                </Chip>
              ))}
@@ -845,7 +831,7 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style
              onChange={(statuses) => setFilters({ ...filters, statuses: statuses as typeof filters.statuses })}
            >
              {availableStatuses.map((status) => (
-                <Chip style={chipStyle} key={status} value={status}>
+                <Chip key={status} value={status}>
                  {t(`states.${status}`)}
                </Chip>
              ))}
@@ -861,7 +847,7 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style
      {someInteract && (
        <Tooltip label={t("actions.clients.resume")}>
          <ActionIcon
-            size="var(--button-size)"
+            size={30}
            radius={999}
            disabled={integrationsStatuses.paused.length === 0}
            variant="light"
@@ -885,7 +871,7 @@ const ClientsControl = ({ clients, filters, setFilters, availableStatuses, style
      {someInteract && (
        <Tooltip label={t("actions.clients.pause")}>
          <ActionIcon
-            size="var(--button-size)"
+            size={30}
            radius={999}
            disabled={integrationsStatuses.active.length === 0}
            variant="light"
@@ -981,8 +967,8 @@ const ClientAvatar = ({ client }: ClientAvatarProps) => {
      key={client.integration.id}
      src={getIconUrl(client.integration.kind)}
      style={{ filter: !isConnected ? "grayscale(100%)" : undefined }}
-      size="var(--image-size)"
-      p="calc(var(--space-size)*0.5)"
+      size={30}
+      p={5}
      bd={`calc(var(--space-size)*0.5) solid ${client.status ? "transparent" : "var(--mantine-color-red-filled)"}`}
    />
  );
--- a/packages/widgets/src/health-monitoring/rings/cpu-ring.tsx
+++ b/packages/widgets/src/health-monitoring/rings/cpu-ring.tsx
@@ -0,0 +1,33 @@
+import { Box, Center, RingProgress, Text } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { IconCpu } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
+  const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
+
+  return (
+    <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu">
+      <RingProgress
+        className="health-monitoring-cpu-utilization"
+        roundCaps
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
+        label={
+          <Center style={{ flexDirection: "column" }}>
+            <Text className="health-monitoring-cpu-utilization-value" size="sm">{`${cpuUtilization.toFixed(2)}%`}</Text>
+            <IconCpu className="health-monitoring-cpu-utilization-icon" size={30} />
+          </Center>
+        }
+        sections={[
+          {
+            value: Number(cpuUtilization.toFixed(2)),
+            color: progressColor(Number(cpuUtilization.toFixed(2))),
+          },
+        ]}
+      />
+    </Box>
+  );
+};
--- a/packages/widgets/src/health-monitoring/rings/cpu-temp-ring.tsx
+++ b/packages/widgets/src/health-monitoring/rings/cpu-temp-ring.tsx
@@ -0,0 +1,39 @@
+import { Box, Center, RingProgress, Text } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { IconCpu } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: number | undefined }) => {
+  const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
+
+  if (!cpuTemp) {
+    return null;
+  }
+
+  return (
+    <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu-temperature">
+      <RingProgress
+        className="health-monitoring-cpu-temp"
+        roundCaps
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
+        label={
+          <Center style={{ flexDirection: "column" }}>
+            <Text className="health-monitoring-cpu-temp-value" size="sm">
+              {fahrenheit ? `${(cpuTemp * 1.8 + 32).toFixed(1)}°F` : `${cpuTemp.toFixed(1)}°C`}
+            </Text>
+            <IconCpu className="health-monitoring-cpu-temp-icon" size={30} />
+          </Center>
+        }
+        sections={[
+          {
+            value: cpuTemp,
+            color: progressColor(cpuTemp),
+          },
+        ]}
+      />
+    </Box>
+  );
+};
--- a/packages/widgets/src/health-monitoring/rings/memory-ring.tsx
+++ b/packages/widgets/src/health-monitoring/rings/memory-ring.tsx
@@ -0,0 +1,54 @@
+import { Box, Center, RingProgress, Text } from "@mantine/core";
+import { useElementSize } from "@mantine/hooks";
+import { IconBrain } from "@tabler/icons-react";
+
+import { progressColor } from "../system-health";
+
+export const MemoryRing = ({ available, used }: { available: string; used: string }) => {
+  const { width, ref } = useElementSize();
+  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
+  const memoryUsage = formatMemoryUsage(available, used);
+
+  return (
+    <Box ref={ref} w="100%" h="100%" className="health-monitoring-memory">
+      <RingProgress
+        className="health-monitoring-memory-use"
+        roundCaps
+        size={fallbackWidth * 0.95}
+        thickness={fallbackWidth / 10}
+        label={
+          <Center style={{ flexDirection: "column" }}>
+            <Text className="health-monitoring-memory-value" size="sm">
+              {memoryUsage.memUsed.GB}GiB
+            </Text>
+            <IconBrain className="health-monitoring-memory-icon" size={30} />
+          </Center>
+        }
+        sections={[
+          {
+            value: Number(memoryUsage.memUsed.percent),
+            color: progressColor(Number(memoryUsage.memUsed.percent)),
+            tooltip: `${memoryUsage.memUsed.percent}%`,
+          },
+        ]}
+      />
+    </Box>
+  );
+};
+
+export const formatMemoryUsage = (memFree: string, memUsed: string) => {
+  const memFreeBytes = Number(memFree);
+  const memUsedBytes = Number(memUsed);
+  const totalMemory = memFreeBytes + memUsedBytes;
+  const memFreeGB = (memFreeBytes / 1024 ** 3).toFixed(2);
+  const memUsedGB = (memUsedBytes / 1024 ** 3).toFixed(2);
+  const memFreePercent = Math.round((memFreeBytes / totalMemory) * 100);
+  const memUsedPercent = Math.round((memUsedBytes / totalMemory) * 100);
+  const memTotalGB = (totalMemory / 1024 ** 3).toFixed(2);
+
+  return {
+    memFree: { percent: memFreePercent, GB: memFreeGB },
+    memUsed: { percent: memUsedPercent, GB: memUsedGB },
+    memTotal: { GB: memTotalGB },
+  };
+};
--- a/packages/widgets/src/health-monitoring/system-health.module.css
+++ b/packages/widgets/src/health-monitoring/system-health.module.css
@@ -0,0 +1,7 @@
+[data-mantine-color-scheme="light"] .card {
+  background-color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme="dark"] .card {
+  background-color: var(--mantine-color-dark-7);
+}
--- a/packages/widgets/src/health-monitoring/system-health.tsx
+++ b/packages/widgets/src/health-monitoring/system-health.tsx
@@ -1,10 +1,9 @@
 "use client";

 import {
-  Avatar,
+  ActionIcon,
  Box,
  Card,
-  Center,
  Divider,
  Flex,
  Group,
@@ -12,12 +11,11 @@ import {
  List,
  Modal,
  Progress,
-  RingProgress,
  Stack,
  Text,
  Tooltip,
 } from "@mantine/core";
-import { useDisclosure, useElementSize } from "@mantine/hooks";
+import { useDisclosure } from "@mantine/hooks";
 import {
  IconBrain,
  IconClock,
@@ -29,14 +27,20 @@ import {
  IconTemperature,
  IconVersions,
 } from "@tabler/icons-react";
+import combineClasses from "clsx";
 import dayjs from "dayjs";
 import duration from "dayjs/plugin/duration";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { TranslationFunction } from "@homarr/translation";
 import { useI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../definition";
+import { CpuRing } from "./rings/cpu-ring";
+import { CpuTempRing } from "./rings/cpu-temp-ring";
+import { formatMemoryUsage, MemoryRing } from "./rings/memory-ring";
+import classes from "./system-health.module.css";

 dayjs.extend(duration);

@@ -55,6 +59,7 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
  );
  const [opened, { open, close }] = useDisclosure(false);
  const utils = clientApi.useUtils();
+  const board = useRequiredBoard();

  clientApi.widget.healthMonitoring.subscribeSystemHealthStatus.useSubscription(
    { integrationIds },
@@ -75,23 +80,21 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
  );

  return (
-    <Stack h="100%" gap="2.5cqmin" className="health-monitoring">
+    <Stack h="100%" gap="sm" className="health-monitoring">
      {healthData.map(({ integrationId, integrationName, healthInfo, updatedAt }) => {
        const disksData = matchFileSystemAndSmart(healthInfo.fileSystem, healthInfo.smart);
        const memoryUsage = formatMemoryUsage(healthInfo.memAvailable, healthInfo.memUsed);
        return (
          <Stack
-            gap="2.5cqmin"
+            gap="sm"
            key={integrationId}
            h="100%"
            className={`health-monitoring-information health-monitoring-${integrationName}`}
-            p="2.5cqmin"
+            p="sm"
          >
-            <Card className="health-monitoring-information-card" p="2.5cqmin" withBorder>
+            <Box className="health-monitoring-information-card" p="sm">
              <Flex
                className="health-monitoring-information-card-elements"
-                h="100%"
-                w="100%"
                justify="space-between"
                align="center"
                key={integrationId}
@@ -103,13 +106,19 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
                    processing
                    color={healthInfo.rebootRequired ? "red" : healthInfo.availablePkgUpdates > 0 ? "blue" : "gray"}
                    position="top-end"
-                    size="4cqmin"
+                    size="md"
                    label={healthInfo.availablePkgUpdates > 0 ? healthInfo.availablePkgUpdates : undefined}
                    disabled={!healthInfo.rebootRequired && healthInfo.availablePkgUpdates === 0}
                  >
-                    <Avatar className="health-monitoring-information-icon-avatar" size="10cqmin" radius="sm">
-                      <IconInfoCircle className="health-monitoring-information-icon" size="8cqmin" onClick={open} />
-                    </Avatar>
+                    <ActionIcon
+                      className="health-monitoring-information-icon-avatar"
+                      variant={"light"}
+                      color="var(--mantine-color-text)"
+                      size={40}
+                      radius={board.itemRadius}
+                    >
+                      <IconInfoCircle className="health-monitoring-information-icon" size={30} onClick={open} />
+                    </ActionIcon>
                  </Indicator>
                  <Modal
                    opened={opened}
@@ -120,49 +129,31 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
                  >
                    <Stack gap="10px" className="health-monitoring-modal-stack">
                      <Divider />
-                      <List className="health-monitoring-information-list" center spacing="0.5cqmin">
-                        <List.Item
-                          className="health-monitoring-information-processor"
-                          icon={<IconCpu2 size="1.5cqmin" />}
-                        >
+                      <List className="health-monitoring-information-list" center spacing="xs">
+                        <List.Item className="health-monitoring-information-processor" icon={<IconCpu2 size={30} />}>
                          {t("widget.healthMonitoring.popover.processor", { cpuModelName: healthInfo.cpuModelName })}
                        </List.Item>
-                        <List.Item
-                          className="health-monitoring-information-memory"
-                          icon={<IconBrain size="1.5cqmin" />}
-                        >
+                        <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
                          {t("widget.healthMonitoring.popover.memory", { memory: memoryUsage.memTotal.GB })}
                        </List.Item>
-                        <List.Item
-                          className="health-monitoring-information-memory"
-                          icon={<IconBrain size="1.5cqmin" />}
-                        >
+                        <List.Item className="health-monitoring-information-memory" icon={<IconBrain size={30} />}>
                          {t("widget.healthMonitoring.popover.memoryAvailable", {
                            memoryAvailable: memoryUsage.memFree.GB,
                            percent: memoryUsage.memFree.percent,
                          })}
                        </List.Item>
-                        <List.Item
-                          className="health-monitoring-information-version"
-                          icon={<IconVersions size="1.5cqmin" />}
-                        >
+                        <List.Item className="health-monitoring-information-version" icon={<IconVersions size={30} />}>
                          {t("widget.healthMonitoring.popover.version", {
                            version: healthInfo.version,
                          })}
                        </List.Item>
-                        <List.Item
-                          className="health-monitoring-information-uptime"
-                          icon={<IconClock size="1.5cqmin" />}
-                        >
+                        <List.Item className="health-monitoring-information-uptime" icon={<IconClock size={30} />}>
                          {formatUptime(healthInfo.uptime, t)}
                        </List.Item>
-                        <List.Item
-                          className="health-monitoring-information-load-average"
-                          icon={<IconCpu size="1.5cqmin" />}
-                        >
+                        <List.Item className="health-monitoring-information-load-average" icon={<IconCpu size={30} />}>
                          {t("widget.healthMonitoring.popover.loadAverage")}
                        </List.Item>
-                        <List m="0.5cqmin" withPadding center spacing="0.5cqmin" icon={<IconCpu size="1cqmin" />}>
+                        <List m="xs" withPadding center spacing="xs" icon={<IconCpu size={30} />}>
                          <List.Item className="health-monitoring-information-load-average-1min">
                            {t("widget.healthMonitoring.popover.minute")} {healthInfo.loadAverage["1min"]}%
                          </List.Item>
@@ -184,56 +175,53 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
                {options.memory && <MemoryRing available={healthInfo.memAvailable} used={healthInfo.memUsed} />}
              </Flex>
              {
-                <Text
-                  className="health-monitoring-status-update-time"
-                  c="dimmed"
-                  size="3.5cqmin"
-                  ta="center"
-                  mb="2.5cqmin"
-                >
+                <Text className="health-monitoring-status-update-time" c="dimmed" size="sm" ta="center">
                  {t("widget.healthMonitoring.popover.lastSeen", { lastSeen: dayjs(updatedAt).fromNow() })}
                </Text>
              }
-            </Card>
+            </Box>
            {options.fileSystem &&
              disksData.map((disk) => {
                return (
                  <Card
-                    className={`health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`}
+                    className={combineClasses(
+                      `health-monitoring-disk-card health-monitoring-disk-card-${integrationName}`,
+                      classes.card,
+                    )}
                    key={disk.deviceName}
-                    p="2.5cqmin"
-                    withBorder
+                    radius={board.itemRadius}
+                    p="sm"
                  >
-                    <Flex className="health-monitoring-disk-status" justify="space-between" align="center" m="1.5cqmin">
-                      <Group gap="1cqmin">
-                        <IconServer className="health-monitoring-disk-icon" size="5cqmin" />
-                        <Text className="dihealth-monitoring-disk-name" size="4cqmin">
+                    <Flex className="health-monitoring-disk-status" justify="space-between" align="center" mb="sm">
+                      <Group gap="xs">
+                        <IconServer className="health-monitoring-disk-icon" size="1rem" />
+                        <Text className="dihealth-monitoring-disk-name" size={"md"}>
                          {disk.deviceName}
                        </Text>
                      </Group>
-                      <Group gap="1cqmin">
-                        <IconTemperature className="health-monitoring-disk-temperature-icon" size="5cqmin" />
-                        <Text className="health-monitoring-disk-temperature-value" size="4cqmin">
+                      <Group gap="xs">
+                        <IconTemperature className="health-monitoring-disk-temperature-icon" size="1rem" />
+                        <Text className="health-monitoring-disk-temperature-value" size="md">
                          {options.fahrenheit
                            ? `${(disk.temperature * 1.8 + 32).toFixed(1)}°F`
                            : `${disk.temperature}°C`}
                        </Text>
                      </Group>
-                      <Group gap="1cqmin">
-                        <IconFileReport className="health-monitoring-disk-status-icon" size="5cqmin" />
-                        <Text className="health-monitoring-disk-status-value" size="4cqmin">
+                      <Group gap="xs">
+                        <IconFileReport className="health-monitoring-disk-status-icon" size="1rem" />
+                        <Text className="health-monitoring-disk-status-value" size="md">
                          {disk.overallStatus ? disk.overallStatus : "N/A"}
                        </Text>
                      </Group>
                    </Flex>
-                    <Progress.Root className="health-monitoring-disk-use" h="6cqmin">
+                    <Progress.Root className="health-monitoring-disk-use" radius={board.itemRadius} h="md">
                      <Tooltip label={disk.used}>
                        <Progress.Section
                          value={disk.percentage}
                          color={progressColor(disk.percentage)}
                          className="health-monitoring-disk-use-percentage"
                        >
-                          <Progress.Label className="health-monitoring-disk-use-value" fz="2.5cqmin">
+                          <Progress.Label className="health-monitoring-disk-use-value" fz="xs">
                            {t("widget.healthMonitoring.popover.used")}
                          </Progress.Label>
                        </Progress.Section>
@@ -251,7 +239,7 @@ export const SystemHealthMonitoring = ({ options, integrationIds }: WidgetCompon
                          value={100 - disk.percentage}
                          color="default"
                        >
-                          <Progress.Label className="health-monitoring-disk-available-value" fz="2.5cqmin">
+                          <Progress.Label className="health-monitoring-disk-available-value" fz="xs">
                            {t("widget.healthMonitoring.popover.available")}
                          </Progress.Label>
                        </Progress.Section>
@@ -314,117 +302,3 @@ export const matchFileSystemAndSmart = (fileSystems: FileSystem[], smartData: Sm
    })
    .sort((fileSystemA, fileSystemB) => fileSystemA.deviceName.localeCompare(fileSystemB.deviceName));
 };
-
-const CpuRing = ({ cpuUtilization }: { cpuUtilization: number }) => {
-  const { width, ref } = useElementSize();
-  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
-
-  return (
-    <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu">
-      <RingProgress
-        className="health-monitoring-cpu-utilization"
-        roundCaps
-        size={fallbackWidth * 0.95}
-        thickness={fallbackWidth / 10}
-        label={
-          <Center style={{ flexDirection: "column" }}>
-            <Text
-              className="health-monitoring-cpu-utilization-value"
-              size="3cqmin"
-            >{`${cpuUtilization.toFixed(2)}%`}</Text>
-            <IconCpu className="health-monitoring-cpu-utilization-icon" size="7cqmin" />
-          </Center>
-        }
-        sections={[
-          {
-            value: Number(cpuUtilization.toFixed(2)),
-            color: progressColor(Number(cpuUtilization.toFixed(2))),
-          },
-        ]}
-      />
-    </Box>
-  );
-};
-
-const CpuTempRing = ({ fahrenheit, cpuTemp }: { fahrenheit: boolean; cpuTemp: number | undefined }) => {
-  const { width, ref } = useElementSize();
-  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
-
-  if (!cpuTemp) {
-    return null;
-  }
-
-  return (
-    <Box ref={ref} w="100%" h="100%" className="health-monitoring-cpu-temperature">
-      <RingProgress
-        className="health-monitoring-cpu-temp"
-        roundCaps
-        size={fallbackWidth * 0.95}
-        thickness={fallbackWidth / 10}
-        label={
-          <Center style={{ flexDirection: "column" }}>
-            <Text className="health-monitoring-cpu-temp-value" size="3cqmin">
-              {fahrenheit ? `${(cpuTemp * 1.8 + 32).toFixed(1)}°F` : `${cpuTemp.toFixed(1)}°C`}
-            </Text>
-            <IconCpu className="health-monitoring-cpu-temp-icon" size="7cqmin" />
-          </Center>
-        }
-        sections={[
-          {
-            value: cpuTemp,
-            color: progressColor(cpuTemp),
-          },
-        ]}
-      />
-    </Box>
-  );
-};
-
-const MemoryRing = ({ available, used }: { available: string; used: string }) => {
-  const { width, ref } = useElementSize();
-  const fallbackWidth = width || 1; // See https://github.com/homarr-labs/homarr/issues/2196
-  const memoryUsage = formatMemoryUsage(available, used);
-
-  return (
-    <Box ref={ref} w="100%" h="100%" className="health-monitoring-memory">
-      <RingProgress
-        className="health-monitoring-memory-use"
-        roundCaps
-        size={fallbackWidth * 0.95}
-        thickness={fallbackWidth / 10}
-        label={
-          <Center style={{ flexDirection: "column" }}>
-            <Text className="health-monitoring-memory-value" size="3cqmin">
-              {memoryUsage.memUsed.GB}GiB
-            </Text>
-            <IconBrain className="health-monitoring-memory-icon" size="7cqmin" />
-          </Center>
-        }
-        sections={[
-          {
-            value: Number(memoryUsage.memUsed.percent),
-            color: progressColor(Number(memoryUsage.memUsed.percent)),
-            tooltip: `${memoryUsage.memUsed.percent}%`,
-          },
-        ]}
-      />
-    </Box>
-  );
-};
-
-export const formatMemoryUsage = (memFree: string, memUsed: string) => {
-  const memFreeBytes = Number(memFree);
-  const memUsedBytes = Number(memUsed);
-  const totalMemory = memFreeBytes + memUsedBytes;
-  const memFreeGB = (memFreeBytes / 1024 ** 3).toFixed(2);
-  const memUsedGB = (memUsedBytes / 1024 ** 3).toFixed(2);
-  const memFreePercent = Math.round((memFreeBytes / totalMemory) * 100);
-  const memUsedPercent = Math.round((memUsedBytes / totalMemory) * 100);
-  const memTotalGB = (totalMemory / 1024 ** 3).toFixed(2);
-
-  return {
-    memFree: { percent: memFreePercent, GB: memFreeGB },
-    memUsed: { percent: memUsedPercent, GB: memUsedGB },
-    memTotal: { GB: memTotalGB },
-  };
-};
--- a/packages/widgets/src/indexer-manager/component.module.css
+++ b/packages/widgets/src/indexer-manager/component.module.css
@@ -0,0 +1,7 @@
+[data-mantine-color-scheme="light"] .card {
+  background-color: var(--mantine-color-gray-1);
+}
+
+[data-mantine-color-scheme="dark"] .card {
+  background-color: var(--mantine-color-dark-7);
+}
--- a/packages/widgets/src/indexer-manager/component.tsx
+++ b/packages/widgets/src/indexer-manager/component.tsx
@@ -2,11 +2,14 @@

 import { Anchor, Button, Card, Container, Flex, Group, ScrollArea, Text } from "@mantine/core";
 import { IconCircleCheck, IconCircleX, IconReportSearch, IconTestPipe } from "@tabler/icons-react";
+import combineClasses from "clsx";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { useI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../definition";
+import classes from "./component.module.css";

 export default function IndexerManagerWidget({ options, integrationIds }: WidgetComponentProps<"indexerManager">) {
  const t = useI18n();
@@ -22,6 +25,7 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
  const utils = clientApi.useUtils();

  const { mutate: testAll, isPending } = clientApi.widget.indexerManager.testAllIndexers.useMutation();
+  const board = useRequiredBoard();

  clientApi.widget.indexerManager.subscribeIndexersStatus.useSubscription(
    { integrationIds },
@@ -36,21 +40,28 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
    },
  );

-  const iconStyle = { height: "7.5cqmin", width: "7.5cqmin" };
-
  return (
-    <Flex className="indexer-manager-container" h="100%" direction="column" gap="2.5cqmin" p="2.5cqmin" align="center">
-      <Text className="indexer-manager-title" size="6.5cqmin">
-        <IconReportSearch className="indexer-manager-title-icon" size="7cqmin" /> {t("widget.indexerManager.title")}
-      </Text>
-      <Card className="indexer-manager-list-container" w="100%" p="2.5cqmin" radius="md" flex={1} withBorder>
+    <Flex className="indexer-manager-container" h="100%" direction="column" gap="sm" p="sm" align="center">
+      <Flex className="indexer-manager-title" align={"center"} gap={"xs"}>
+        <IconReportSearch className="indexer-manager-title-icon" size={30} />
+        <Text size="md" fw={"bold"}>
+          {t("widget.indexerManager.title")}
+        </Text>
+      </Flex>
+      <Card
+        className={combineClasses("indexer-manager-list-container", classes.card)}
+        w="100%"
+        p="sm"
+        radius={board.itemRadius}
+        flex={1}
+      >
        <ScrollArea className="indexer-manager-list-scroll-area" h="100%">
          {indexersData.map(({ integrationId, indexers }) => (
            <Container className={`indexer-manager-${integrationId}-list-container`} p={0} key={integrationId}>
              {indexers.map((indexer) => (
                <Group
                  className={`indexer-manager-line indexer-manager-${indexer.name}`}
-                  h="7.5cqmin"
+                  h={30}
                  key={indexer.id}
                  justify="space-between"
                >
@@ -59,7 +70,7 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
                    href={indexer.url}
                    target={options.openIndexerSiteInNewTab ? "_blank" : "_self"}
                  >
-                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size="5cqmin">
+                    <Text className="indexer-manager-line-anchor-text" c="dimmed" size="md">
                      {indexer.name}
                    </Text>
                  </Anchor>
@@ -67,13 +78,13 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
                    <IconCircleX
                      className="indexer-manager-line-status-icon indexer-manager-line-icon-disabled"
                      color="#d9534f"
-                      style={iconStyle}
+                      size={24}
                    />
                  ) : (
                    <IconCircleCheck
                      className="indexer-manager-line-status-icon indexer-manager-line-icon-enabled"
                      color="#2ecc71"
-                      style={iconStyle}
+                      size={24}
                    />
                  )}
                </Group>
@@ -85,11 +96,9 @@ export default function IndexerManagerWidget({ options, integrationIds }: Widget
      <Button
        className="indexer-manager-test-button"
        w="100%"
-        fz="5cqmin"
-        h="12.5cqmin"
-        radius="md"
+        radius={board.itemRadius}
        variant="light"
-        leftSection={<IconTestPipe style={iconStyle} />}
+        leftSection={<IconTestPipe size={"1rem"} />}
        loading={isPending}
        loaderProps={{ type: "dots" }}
        onClick={() => {
--- a/packages/widgets/src/media-requests/list/component.tsx
+++ b/packages/widgets/src/media-requests/list/component.tsx
@@ -4,6 +4,7 @@ import { ActionIcon, Anchor, Avatar, Badge, Card, Group, Image, ScrollArea, Stac
 import { IconThumbDown, IconThumbUp } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import { MediaAvailability, MediaRequestStatus } from "@homarr/integrations/types";
 import type { ScopedTranslationFunction } from "@homarr/translation";
 import { useScopedI18n } from "@homarr/translation/client";
@@ -54,23 +55,23 @@ export default function MediaServerWidget({
  );

  const { mutate: mutateRequestAnswer } = clientApi.widget.mediaRequests.answerRequest.useMutation();
+  const board = useRequiredBoard();

  if (mediaRequests.length === 0) throw new NoIntegrationDataError();

  return (
    <ScrollArea
      className="mediaRequests-list-scrollArea"
-      scrollbarSize="2cqmin"
+      scrollbarSize="md"
      style={{ pointerEvents: isEditMode ? "none" : undefined }}
    >
-      <Stack className="mediaRequests-list-list" gap="2cqmin" p="2cqmin">
+      <Stack className="mediaRequests-list-list" gap="sm" p="sm">
        {mediaRequests.map((mediaRequest) => (
          <Card
            className={`mediaRequests-list-item-wrapper mediaRequests-list-item-${mediaRequest.type} mediaRequests-list-item-${mediaRequest.status}`}
            key={`${mediaRequest.integrationId}-${mediaRequest.id}`}
-            h="20cqmin"
-            radius="2cqmin"
-            p="2cqmin"
+            radius={board.itemRadius}
+            p="sm"
            withBorder
          >
            <Image
@@ -93,28 +94,24 @@ export default function MediaServerWidget({
              wrap="nowrap"
              gap={0}
            >
-              <Group className="mediaRequests-list-item-left-side" h="100%" gap="4cqmin" wrap="nowrap" flex={1}>
+              <Group className="mediaRequests-list-item-left-side" h="100%" gap="md" wrap="nowrap" flex={1}>
                <Image
                  className="mediaRequests-list-item-poster"
                  src={mediaRequest.posterImagePath}
-                  h="100%"
-                  w="10cqmin"
-                  radius="1cqmin"
+                  h={60}
+                  w="auto"
+                  radius={"md"}
                />
-                <Stack className="mediaRequests-list-item-media-infos" gap="1cqmin">
-                  <Group className="mediaRequests-list-item-info-first-line" gap="2cqmin" wrap="nowrap">
-                    <Text className="mediaRequests-list-item-media-year" size="3.5cqmin" pt="0.75cqmin">
+                <Stack className="mediaRequests-list-item-media-infos" gap={0}>
+                  <Group className="mediaRequests-list-item-info-first-line" gap="sm" align={"end"} wrap="nowrap">
+                    <Text className="mediaRequests-list-item-media-year" size="md" pt="xs">
                      {mediaRequest.airDate?.getFullYear() ?? t("toBeDetermined")}
                    </Text>
                    <Badge
                      className="mediaRequests-list-item-media-status"
                      color={getAvailabilityProperties(mediaRequest.availability, t).color}
                      variant="light"
-                      fz="3.5cqmin"
-                      lh="4cqmin"
-                      size="5cqmin"
-                      pt="0.75cqmin"
-                      px="2cqmin"
+                      size="md"
                    >
                      {getAvailabilityProperties(mediaRequest.availability, t).label}
                    </Badge>
@@ -124,26 +121,27 @@ export default function MediaServerWidget({
                    href={mediaRequest.href}
                    c="var(--mantine-color-text)"
                    target={options.linksTargetNewTab ? "_blank" : "_self"}
-                    fz="5cqmin"
+                    fz="md"
+                    fw={"bold"}
                    lineClamp={1}
                  >
                    {mediaRequest.name || "unknown"}
                  </Anchor>
                </Stack>
              </Group>
-              <Stack className="mediaRequests-list-item-right-side" gap="1cqmin" align="end">
-                <Group className="mediaRequests-list-item-request-user" gap="2cqmin" wrap="nowrap">
+              <Stack className="mediaRequests-list-item-right-side" gap="xs" ms={"lg"} align="end">
+                <Group className="mediaRequests-list-item-request-user" gap="sm" wrap="nowrap">
                  <Avatar
                    className="mediaRequests-list-item-request-user-avatar"
                    src={mediaRequest.requestedBy?.avatar}
-                    size="6cqmin"
+                    size="sm"
                  />
                  <Anchor
                    className="mediaRequests-list-item-request-user-name"
                    href={mediaRequest.requestedBy?.link}
                    c="var(--mantine-color-text)"
                    target={options.linksTargetNewTab ? "_blank" : "_self"}
-                    fz="5cqmin"
+                    fz="md"
                    lineClamp={1}
                    style={{ wordBreak: "break-all" }}
                  >
@@ -151,13 +149,14 @@ export default function MediaServerWidget({
                  </Anchor>
                </Group>
                {mediaRequest.status === MediaRequestStatus.PendingApproval ? (
-                  <Group className="mediaRequests-list-item-pending-buttons" gap="2cqmin">
+                  <Group className="mediaRequests-list-item-pending-buttons" gap="sm">
                    <Tooltip label={t("pending.approve")}>
                      <ActionIcon
                        className="mediaRequests-list-item-pending-button-approve"
                        variant="light"
                        color="green"
-                        size="5cqmin"
+                        size="md"
+                        radius={"md"}
                        onClick={() => {
                          mutateRequestAnswer({
                            integrationId: mediaRequest.integrationId,
@@ -166,7 +165,7 @@ export default function MediaServerWidget({
                          });
                        }}
                      >
-                        <IconThumbUp size="4cqmin" />
+                        <IconThumbUp size={23} />
                      </ActionIcon>
                    </Tooltip>
                    <Tooltip label={t("pending.decline")}>
@@ -174,7 +173,8 @@ export default function MediaServerWidget({
                        className="mediaRequests-list-item-pending-button-decline"
                        variant="light"
                        color="red"
-                        size="5cqmin"
+                        size="md"
+                        radius={"md"}
                        onClick={() => {
                          mutateRequestAnswer({
                            integrationId: mediaRequest.integrationId,
@@ -183,7 +183,7 @@ export default function MediaServerWidget({
                          });
                        }}
                      >
-                        <IconThumbDown size="4cqmin" />
+                        <IconThumbDown size={23} />
                      </ActionIcon>
                    </Tooltip>
                  </Group>
--- a/packages/widgets/src/media-requests/stats/component.module.css
+++ b/packages/widgets/src/media-requests/stats/component.module.css
@@ -1,7 +1,7 @@
-.gridElement:not(:nth-child(8n)) {
-  border-right: 0.5cqmin solid var(--app-shell-border-color);
+[data-mantine-color-scheme="light"] .card {
+  background-color: var(--mantine-color-gray-1);
 }

-.gridElement:not(:nth-last-child(-n + 8)) {
-  border-bottom: 0.5cqmin solid var(--app-shell-border-color);
+[data-mantine-color-scheme="dark"] .card {
+  background-color: var(--mantine-color-dark-7);
 }
--- a/packages/widgets/src/media-requests/stats/component.tsx
+++ b/packages/widgets/src/media-requests/stats/component.tsx
@@ -17,6 +17,7 @@ import {
 import combineClasses from "clsx";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";
 import type { RequestStats } from "@homarr/integrations/types";
 import { useScopedI18n } from "@homarr/translation/client";

@@ -42,9 +43,10 @@ export default function MediaServerWidget({

  const { width, height, ref } = useElementSize();

+  const board = useRequiredBoard();
+
  if (requestStats.users.length === 0 && requestStats.stats.length === 0) throw new NoIntegrationDataError();

-  //Add processing and available
  const data = [
    {
      name: "approved",
@@ -93,37 +95,35 @@ export default function MediaServerWidget({
      className="mediaRequests-stats-layout"
      display="flex"
      h="100%"
-      gap="2cqmin"
-      p="2cqmin"
+      gap="sm"
+      p="sm"
      align="center"
      style={{ pointerEvents: isEditMode ? "none" : undefined }}
    >
-      <Text className="mediaRequests-stats-stats-title" size="6.5cqmin">
+      <Text className="mediaRequests-stats-stats-title" fw={"bold"} size="md">
        {t("titles.stats.main")}
      </Text>
-      <Grid className="mediaRequests-stats-stats-grid" gutter={0} w="100%">
+      <Grid className="mediaRequests-stats-stats-grid" gutter={10} w="100%">
        {data.map((stat) => (
          <Grid.Col
-            className={combineClasses(
-              classes.gridElement,
-              "mediaRequests-stats-stat-wrapper",
-              `mediaRequests-stats-stat-${stat.name}`,
-            )}
+            className={combineClasses("mediaRequests-stats-stat-wrapper", `mediaRequests-stats-stat-${stat.name}`)}
            key={stat.name}
            span={3}
          >
            <Tooltip label={t(`titles.stats.${stat.name}`)}>
-              <Stack className="mediaRequests-stats-stat-stack" align="center" gap="2cqmin" p="2cqmin">
-                <stat.icon className="mediaRequests-stats-stat-icon" size="7.5cqmin" />
-                <Text className="mediaRequests-stats-stat-value" size="5cqmin">
-                  {stat.number}
-                </Text>
-              </Stack>
+              <Card p={0} radius={board.itemRadius} className={classes.card}>
+                <Stack className="mediaRequests-stats-stat-stack" align="center" gap={0} p="xs">
+                  <stat.icon className="mediaRequests-stats-stat-icon" size={30} />
+                  <Text className="mediaRequests-stats-stat-value" size="md">
+                    {stat.number}
+                  </Text>
+                </Stack>
+              </Card>
            </Tooltip>
          </Grid.Col>
        ))}
      </Grid>
-      <Text className="mediaRequests-stats-users-title" size="6.5cqmin">
+      <Text className="mediaRequests-stats-users-title" fw={"bold"} size="md">
        {t("titles.users.main")}
      </Text>
      <Stack
@@ -132,36 +132,34 @@ export default function MediaServerWidget({
        w="100%"
        ref={ref}
        display="flex"
-        gap="2cqmin"
-        style={{ overflow: "hidden" }}
+        gap="sm"
+        style={{ overflow: "hidden", justifyContent: "end" }}
      >
        {requestStats.users.slice(0, Math.max(Math.floor((height / width) * 5), 1)).map((user) => (
          <Card
            className={combineClasses(
              "mediaRequests-stats-users-user-wrapper",
              `mediaRequests-stats-users-user-${user.id}`,
+              classes.card,
            )}
            key={user.id}
-            withBorder
-            p="2cqmin"
-            flex={1}
-            mah="38.5cqmin"
-            radius="2.5cqmin"
+            p="sm"
+            radius={board.itemRadius}
          >
-            <Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="2cqmin" display="flex">
+            <Group className="mediaRequests-stats-users-user-group" h="100%" p={0} gap="sm" display="flex">
              <Tooltip label={user.integration.name}>
                <Avatar
                  className="mediaRequests-stats-users-user-avatar"
-                  size="12.5cqmin"
+                  size="md"
                  src={user.avatar}
-                  bd={`0.5cqmin solid ${user.integration.kind === "overseerr" ? "#ECB000" : "#6677CC"}`}
+                  bd={`2px solid ${user.integration.kind === "overseerr" ? "#ECB000" : "#6677CC"}`}
                />
              </Tooltip>
-              <Stack className="mediaRequests-stats-users-user-infos" gap="2cqmin">
-                <Text className="mediaRequests-stats-users-user-userName" size="6cqmin">
+              <Stack className="mediaRequests-stats-users-user-infos" gap={0}>
+                <Text className="mediaRequests-stats-users-user-userName" fw={"bold"} size="md">
                  {user.displayName}
                </Text>
-                <Text className="mediaRequests-stats-users-user-request-count" size="4cqmin">
+                <Text className="mediaRequests-stats-users-user-request-count" size="md">
                  {`${t("titles.users.requests")}: ${user.requestCount}`}
                </Text>
              </Stack>
@@ -170,11 +168,12 @@ export default function MediaServerWidget({
                className="mediaRequests-stats-users-user-link-button"
                variant="light"
                color="var(--mantine-color-text)"
-                size="10cqmin"
+                size={40}
                component="a"
+                radius={board.itemRadius}
                href={user.link}
              >
-                <IconExternalLink className="mediaRequests-stats-users-user-link-icon" size="7.5cqmin" />
+                <IconExternalLink className="mediaRequests-stats-users-user-link-icon" size={25} />
              </ActionIcon>
            </Group>
          </Card>
--- a/packages/widgets/src/media-server/component.tsx
+++ b/packages/widgets/src/media-server/component.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { useMemo } from "react";
-import type { MantineStyleProp } from "@mantine/core";
 import { Avatar, Box, Flex, Group, Stack, Text, Title } from "@mantine/core";
 import { IconDeviceAudioTape, IconDeviceTv, IconMovie, IconVideo } from "@tabler/icons-react";
 import type { MRT_ColumnDef } from "mantine-react-table";
@@ -36,13 +35,11 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
        header: "Name",
        mantineTableHeadCellProps: {
          style: {
-            fontSize: "7cqmin",
-            padding: "2cqmin",
            width: "30%",
          },
        },
        Cell: ({ row }) => (
-          <Text size="7cqmin" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+          <Text size="md" style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
            {row.original.sessionName}
          </Text>
        ),
@@ -52,15 +49,13 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
        header: "User",
        mantineTableHeadCellProps: {
          style: {
-            fontSize: "7cqmin",
-            padding: "2cqmin",
            width: "25%",
          },
        },
        Cell: ({ row }) => (
-          <Group gap={"2cqmin"}>
-            <Avatar src={row.original.user.profilePictureUrl} size={"10cqmin"} />
-            <Text size="7cqmin">{row.original.user.username}</Text>
+          <Group gap={"sm"}>
+            <Avatar src={row.original.user.profilePictureUrl} size={30} />
+            <Text size="md">{row.original.user.username}</Text>
          </Group>
        ),
      },
@@ -69,8 +64,6 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
        header: "Currently playing",
        mantineTableHeadCellProps: {
          style: {
-            fontSize: "7cqmin",
-            padding: "2cqmin",
            width: "45%",
          },
        },
@@ -78,9 +71,7 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
          if (row.original.currentlyPlaying) {
            return (
              <Box>
-                <Text size="7cqmin" style={{ whiteSpace: "normal" }}>
-                  {row.original.currentlyPlaying.name}
-                </Text>
+                <Text lineClamp={1}>{row.original.currentlyPlaying.name}</Text>
              </Box>
            );
          }
@@ -129,14 +120,6 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
    [currentStreams],
  );

-  const baseStyle: MantineStyleProp = {
-    "--total-width": "calc(100cqw / var(--total-width))",
-    "--ratio-width": "calc(100cqw / var(--total-width))",
-    "--space-size": "calc(var(--ratio-width) * 0.1)", //Standard gap and spacing value
-    "--text-fz": "calc(var(--ratio-width) * 0.45)", //General Font Size
-    "--icon-size": "calc(var(--ratio-width) * 2 / 3)", //Normal icon size
-    "--mrt-base-background-color": "transparent",
-  };
  const { openModal } = useModalAction(itemInfoModal);
  const table = useTranslatedMantineReactTable({
    columns,
@@ -202,21 +185,21 @@ export default function MediaServerWidget({ integrationIds, isEditMode }: Widget
  });

  return (
-    <Stack gap={0} h="100%" display="flex" style={baseStyle}>
+    <Stack gap={0} h="100%" display="flex">
      <MantineReactTable table={table} />
      <Group
-        gap="1cqmin"
-        h="var(--ratio-width)"
-        px="var(--space-size)"
-        pr="5cqmin"
+        gap="xs"
+        h={30}
+        px="xs"
+        pr="md"
        justify="flex-end"
        style={{
-          borderTop: "0.0625rem solid var(--border-color)",
+          borderTop: "1px solid var(--border-color)",
        }}
      >
        {uniqueIntegrations.map((integration) => (
-          <Group key={integration.integrationKind} gap="1cqmin" align="center">
-            <Avatar className="media-server-icon" src={integration.integrationIcon} size="xs" />
+          <Group key={integration.integrationKind} gap="xs" align="center">
+            <Avatar className="media-server-icon" src={integration.integrationIcon} radius={"xs"} size="xs" />
            <Text className="media-server-name" size="sm">
              {integration.integrationName}
            </Text>
--- a/packages/widgets/src/minecraft/server-status/component.tsx
+++ b/packages/widgets/src/minecraft/server-status/component.tsx
@@ -4,6 +4,7 @@ import { Box, Flex, Group, Text, Tooltip } from "@mantine/core";
 import { IconUsersGroup } from "@tabler/icons-react";

 import { clientApi } from "@homarr/api/client";
+import { formatNumber } from "@homarr/common";
 import { useScopedI18n } from "@homarr/translation/client";

 import type { WidgetComponentProps } from "../../definition";
@@ -29,15 +30,15 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
      h="100%"
      w="100%"
      direction="column"
-      p="7.5cqmin"
+      p="sm"
      justify="center"
      align="center"
    >
-      <Group gap="5cqmin" wrap="nowrap" align="center">
+      <Group gap="xs" wrap="nowrap" align="center">
        <Tooltip label={data.online ? tStatus("online") : tStatus("offline")}>
-          <Box w="8cqmin" h="8cqmin" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
+          <Box w="md" h="md" bg={data.online ? "teal" : "red"} style={{ borderRadius: "100%" }}></Box>
        </Tooltip>
-        <Text size="10cqmin" fw="bold">
+        <Text size="md" fw="bold">
          {title}
        </Text>
      </Group>
@@ -48,10 +49,10 @@ export default function MinecraftServerStatusWidget({ options }: WidgetComponent
            alt={`minecraft icon ${options.domain}`}
            src={data.icon}
          />
-          <Group gap="2cqmin" c="gray.6" align="center">
-            <IconUsersGroup style={{ width: "10cqmin", height: "10cqmin" }} />
-            <Text size="10cqmin">
-              {data.players.online}/{data.players.max}
+          <Group gap={5} c="gray.6" align="center">
+            <IconUsersGroup size="1rem" />
+            <Text size="md">
+              {formatNumber(data.players.online, 1)} / {formatNumber(data.players.max, 1)}
            </Text>
          </Group>
        </>
--- a/packages/widgets/src/notebook/notebook.tsx
+++ b/packages/widgets/src/notebook/notebook.tsx
@@ -66,12 +66,12 @@ import type { TablerIcon } from "@homarr/ui";
 import type { WidgetComponentProps } from "../definition";

 const iconProps = {
-  size: "5cqmin",
+  size: 30,
  stroke: 1.5,
 };

 const controlIconProps = {
-  size: "5cqmin",
+  size: 20,
  stroke: 1.5,
 };

--- a/packages/widgets/src/rssFeed/component.tsx
+++ b/packages/widgets/src/rssFeed/component.tsx
@@ -5,6 +5,7 @@ import { IconClock } from "@tabler/icons-react";
 import dayjs from "dayjs";

 import { clientApi } from "@homarr/api/client";
+import { useRequiredBoard } from "@homarr/boards/context";

 import type { WidgetComponentProps } from "../definition";
 import classes from "./component.module.scss";
@@ -22,29 +23,30 @@ export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
      retry: false,
    },
  );
+  const board = useRequiredBoard();

  const languageDir = options.enableRtl ? "RTL" : "LTR";

  return (
-    <ScrollArea className="scroll-area-w100" w="100%" p="4cqmin">
-      <Stack w={"100%"} gap="4cqmin">
+    <ScrollArea className="scroll-area-w100" w="100%" p="sm">
+      <Stack w={"100%"} gap="sm">
        {feedEntries.map((feedEntry) => (
          <Card
            key={feedEntry.id}
            withBorder
            component={"a"}
            href={feedEntry.link}
-            radius="2.5cqmin"
+            radius={board.itemRadius}
            target="_blank"
            w="100%"
-            p="2.5cqmin"
+            p="sm"
          >
            {feedEntry.enclosure && (
              <Image className={classes.backgroundImage} src={feedEntry.enclosure} alt="backdrop" />
            )}

-            <Flex gap="2.5cqmin" direction="column" w="100%">
-              <Text dir={languageDir} fz="4cqmin" lh="5cqmin" lineClamp={2}>
+            <Flex gap="sm" direction="column" w="100%">
+              <Text dir={languageDir} fz="sm" lh="sm" lineClamp={2}>
                {feedEntry.title}
              </Text>
              {feedEntry.description && (
@@ -52,7 +54,7 @@ export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
                  className={feedEntry.description}
                  dir={languageDir}
                  c="dimmed"
-                  size="3.5cqmin"
+                  size="sm"
                  lineClamp={options.textLinesClamp as number}
                  dangerouslySetInnerHTML={{ __html: feedEntry.description }}
                />
@@ -68,9 +70,9 @@ export default function RssFeed({ options }: WidgetComponentProps<"rssFeed">) {
 }

 const InfoDisplay = ({ date }: { date: string }) => (
-  <Group gap="2.5cqmin">
-    <IconClock size="2.5cqmin" />
-    <Text size="2.5cqmin" c="dimmed" pt="1cqmin">
+  <Group gap={5} align={"center"}>
+    <IconClock size={"1rem"} color={"var(--mantine-color-dimmed)"} />
+    <Text size="sm" c="dimmed">
      {date}
    </Text>
  </Group>
--- a/packages/widgets/src/weather/component.tsx
+++ b/packages/widgets/src/weather/component.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { Box, Group, HoverCard, Space, Stack, Text } from "@mantine/core";
+import { Box, Group, HoverCard, Stack, Text } from "@mantine/core";
 import { IconArrowDownRight, IconArrowUpRight, IconMapPin, IconWind } from "@tabler/icons-react";
 import combineClasses from "clsx";
 import dayjs from "dayjs";
@@ -28,8 +28,8 @@ export default function WeatherWidget({ isEditMode, options }: WidgetComponentPr
  return (
    <Stack
      align="center"
+      gap="sm"
      justify="center"
-      gap="0"
      w="100%"
      h="100%"
      style={{ pointerEvents: isEditMode ? "none" : undefined }}
@@ -49,20 +49,21 @@ interface WeatherProps extends Pick<WidgetComponentProps<"weather">, "options">

 const DailyWeather = ({ options, weather }: WeatherProps) => {
  const t = useScopedI18n("widget.weather");
+
  return (
    <>
-      <Group className="weather-day-group" gap="1cqmin">
+      <Group className="weather-day-group" gap="sm">
        <HoverCard>
          <HoverCard.Target>
            <Box>
-              <WeatherIcon size="20cqmin" code={weather.current.weathercode} />
+              <WeatherIcon size={30} code={weather.current.weathercode} />
            </Box>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
          </HoverCard.Dropdown>
        </HoverCard>
-        <Text fz="17.5cqmin">
+        <Text fz={30}>
          {getPreferredUnit(
            weather.current.temperature,
            options.isFormatFahrenheit,
@@ -70,31 +71,41 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
          )}
        </Text>
      </Group>
-      <Space h="1cqmin" />
-      {options.showCurrentWindSpeed && (
-        <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="1cqmin">
-          <IconWind size="12.5cqmin" />
-          <Text fz="10cqmin">{t("currentWindSpeed", { currentWindSpeed: weather.current.windspeed })}</Text>
+      <Stack gap="xs" align="center">
+        {options.showCurrentWindSpeed && (
+          <Group className="weather-current-wind-speed-group" wrap="nowrap" gap="xs">
+            <IconWind size={16} />
+            <Text fz={16}>{t("currentWindSpeed", { currentWindSpeed: weather.current.windspeed })}</Text>
+          </Group>
+        )}
+        <Group className="weather-max-min-temp-group" wrap="nowrap" gap="sm">
+          <Group gap="xs" wrap="nowrap">
+            <IconArrowUpRight size={16} />
+            <Text fz={16}>
+              {getPreferredUnit(
+                weather.daily[0]?.maxTemp,
+                options.isFormatFahrenheit,
+                options.disableTemperatureDecimals,
+              )}
+            </Text>
+          </Group>
+          <Group gap="xs" wrap="nowrap">
+            <IconArrowDownRight size={16} />
+            <Text fz={16}>
+              {getPreferredUnit(
+                weather.daily[0]?.minTemp,
+                options.isFormatFahrenheit,
+                options.disableTemperatureDecimals,
+              )}
+            </Text>
+          </Group>
        </Group>
-      )}
-      <Space h="1cqmin" />
-      <Group className="weather-max-min-temp-group" wrap="nowrap" gap="1cqmin">
-        <IconArrowUpRight size="12.5cqmin" />
-        <Text fz="10cqmin">
-          {getPreferredUnit(weather.daily[0]?.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-        </Text>
-        <Space w="2.5cqmin" />
-        <IconArrowDownRight size="12.5cqmin" />
-        <Text fz="10cqmin">
-          {getPreferredUnit(weather.daily[0]?.minTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
-        </Text>
-      </Group>
+      </Stack>
      {options.showCity && (
        <>
-          <Space h="5cqmin" />
-          <Group className="weather-city-group" wrap="nowrap" gap="1cqmin">
-            <IconMapPin size="12.5cqmin" />
-            <Text size="12.5cqmin" style={{ whiteSpace: "nowrap" }}>
+          <Group className="weather-city-group" wrap="nowrap" gap="xs">
+            <IconMapPin size={16} />
+            <Text fz={16} style={{ whiteSpace: "nowrap" }}>
              {options.location.name}
            </Text>
          </Group>
@@ -107,35 +118,35 @@ const DailyWeather = ({ options, weather }: WeatherProps) => {
 const WeeklyForecast = ({ options, weather }: WeatherProps) => {
  return (
    <>
-      <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="5cqmin">
+      <Group className="weather-forecast-city-temp-group" wrap="nowrap" gap="md">
        {options.showCity && (
-          <>
-            <IconMapPin size="20cqmin" />
-            <Text size="15cqmin" style={{ whiteSpace: "nowrap" }}>
+          <Group gap="xs" wrap="nowrap">
+            <IconMapPin size={16} />
+            <Text fz={16} style={{ whiteSpace: "nowrap" }}>
              {options.location.name}
            </Text>
-            <Space w="20cqmin" />
-          </>
+          </Group>
        )}
-        <HoverCard>
-          <HoverCard.Target>
-            <Box>
-              <WeatherIcon size="20cqmin" code={weather.current.weathercode} />
-            </Box>
-          </HoverCard.Target>
-          <HoverCard.Dropdown>
-            <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
-          </HoverCard.Dropdown>
-        </HoverCard>
-        <Text fz="20cqmin">
-          {getPreferredUnit(
-            weather.current.temperature,
-            options.isFormatFahrenheit,
-            options.disableTemperatureDecimals,
-          )}
-        </Text>
+        <Group gap="xs" wrap="nowrap">
+          <HoverCard>
+            <HoverCard.Target>
+              <Box>
+                <WeatherIcon size={16} code={weather.current.weathercode} />
+              </Box>
+            </HoverCard.Target>
+            <HoverCard.Dropdown>
+              <WeatherDescription weatherOnly weatherCode={weather.current.weathercode} />
+            </HoverCard.Dropdown>
+          </HoverCard>
+          <Text fz={16}>
+            {getPreferredUnit(
+              weather.current.temperature,
+              options.isFormatFahrenheit,
+              options.disableTemperatureDecimals,
+            )}
+          </Text>
+        </Group>
      </Group>
-      <Space h="2.5cqmin" />
      <Forecast weather={weather} options={options} />
    </>
  );
@@ -144,7 +155,7 @@ const WeeklyForecast = ({ options, weather }: WeatherProps) => {
 function Forecast({ weather, options }: WeatherProps) {
  const dateFormat = options.dateFormat;
  return (
-    <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="2.5cqmin">
+    <Group className="weather-forecast-days-group" w="100%" justify="space-evenly" wrap="nowrap" pb="sm">
      {weather.daily.slice(0, options.forecastDayCount).map((dayWeather, index) => (
        <HoverCard key={dayWeather.time} withArrow shadow="md">
          <HoverCard.Target>
@@ -157,9 +168,9 @@ function Forecast({ weather, options }: WeatherProps) {
              gap="0"
              align="center"
            >
-              <Text fz="10cqmin">{dayjs(dayWeather.time).format("dd")}</Text>
-              <WeatherIcon size="15cqmin" code={dayWeather.weatherCode} />
-              <Text fz="10cqmin">
+              <Text fz="xl">{dayjs(dayWeather.time).format("dd")}</Text>
+              <WeatherIcon size={16} code={dayWeather.weatherCode} />
+              <Text fz={16}>
                {getPreferredUnit(dayWeather.maxTemp, options.isFormatFahrenheit, options.disableTemperatureDecimals)}
              </Text>
            </Stack>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,11 +44,11 @@ importers:
        specifier: ^4.3.4
        version: 4.3.4(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))
      '@vitest/coverage-v8':
-        specifier: ^3.0.7
-        version: 3.0.7(vitest@3.0.7)
+        specifier: ^3.0.8
+        version: 3.0.8(vitest@3.0.8)
      '@vitest/ui':
-        specifier: ^3.0.7
-        version: 3.0.7(vitest@3.0.7)
+        specifier: ^3.0.8
+        version: 3.0.8(vitest@3.0.8)
      conventional-changelog-conventionalcommits:
        specifier: ^8.0.0
        version: 8.0.0
@@ -77,8 +77,8 @@ importers:
        specifier: ^5.1.4
        version: 5.1.4(typescript@5.8.2)(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))
      vitest:
-        specifier: ^3.0.7
-        version: 3.0.7(@types/node@22.13.9)(@vitest/ui@3.0.7)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
+        specifier: ^3.0.8
+        version: 3.0.8(@types/node@22.13.9)(@vitest/ui@3.0.8)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)

  apps/nextjs:
    dependencies:
@@ -206,23 +206,23 @@ importers:
        specifier: ^3.31.0
        version: 3.31.0(react@19.0.0)
      '@tanstack/react-query':
-        specifier: ^5.67.1
-        version: 5.67.1(react@19.0.0)
+        specifier: ^5.67.2
+        version: 5.67.2(react@19.0.0)
      '@tanstack/react-query-devtools':
-        specifier: ^5.67.1
-        version: 5.67.1(@tanstack/react-query@5.67.1(react@19.0.0))(react@19.0.0)
+        specifier: ^5.67.2
+        version: 5.67.2(@tanstack/react-query@5.67.2(react@19.0.0))(react@19.0.0)
      '@tanstack/react-query-next-experimental':
-        specifier: ^5.67.1
-        version: 5.67.1(@tanstack/react-query@5.67.1(react@19.0.0))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react@19.0.0)
+        specifier: ^5.67.2
+        version: 5.67.2(@tanstack/react-query@5.67.2(react@19.0.0))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react@19.0.0)
      '@trpc/client':
        specifier: next
        version: 11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)
      '@trpc/next':
        specifier: next
-        version: 11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
+        version: 11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
      '@trpc/react-query':
        specifier: next
-        version: 11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
+        version: 11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
      '@trpc/server':
        specifier: next
        version: 11.0.0-rc.824(typescript@5.8.2)
@@ -583,7 +583,7 @@ importers:
        version: 11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)
      '@trpc/react-query':
        specifier: next
-        version: 11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
+        version: 11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
      '@trpc/server':
        specifier: next
        version: 11.0.0-rc.824(typescript@5.8.2)
@@ -1031,13 +1031,13 @@ importers:
        version: 0.30.5
      drizzle-orm:
        specifier: ^0.40.0
-        version: 0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.12.0)
+        version: 0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.13.0)
      drizzle-zod:
        specifier: ^0.7.0
-        version: 0.7.0(drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.12.0))(zod@3.24.2)
+        version: 0.7.0(drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.13.0))(zod@3.24.2)
      mysql2:
-        specifier: 3.12.0
-        version: 3.12.0
+        specifier: 3.13.0
+        version: 3.13.0
    devDependencies:
      '@homarr/eslint-config':
        specifier: workspace:^0.2.0
@@ -1332,8 +1332,8 @@ importers:
        specifier: workspace:^0.1.0
        version: link:../env
      ioredis:
-        specifier: 5.5.0
-        version: 5.5.0
+        specifier: 5.6.0
+        version: 5.6.0
      superjson:
        specifier: 2.2.2
        version: 2.2.2
@@ -1648,8 +1648,8 @@ importers:
        specifier: workspace:^
        version: link:../log
      ioredis:
-        specifier: 5.5.0
-        version: 5.5.0
+        specifier: 5.6.0
+        version: 5.6.0
      superjson:
        specifier: 2.2.2
        version: 2.2.2
@@ -2167,8 +2167,8 @@ importers:
        specifier: 15.1.7
        version: 15.1.7
      eslint-config-prettier:
-        specifier: ^10.0.2
-        version: 10.0.2(eslint@9.21.0)
+        specifier: ^10.1.1
+        version: 10.1.1(eslint@9.21.0)
      eslint-config-turbo:
        specifier: ^2.4.4
        version: 2.4.4(eslint@9.21.0)(turbo@2.4.4)
@@ -4256,27 +4256,27 @@ packages:
    resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
    engines: {node: '>=12'}

-  '@tanstack/query-core@5.67.1':
-    resolution: {integrity: sha512-AkFmuukVejyqVIjEQoFhLb3q+xHl7JG8G9cANWTMe3s8iKzD9j1VBSYXgCjy6vm6xM8cUCR9zP2yqWxY9pTWOA==}
+  '@tanstack/query-core@5.67.2':
+    resolution: {integrity: sha512-+iaFJ/pt8TaApCk6LuZ0WHS/ECVfTzrxDOEL9HH9Dayyb5OVuomLzDXeSaI2GlGT/8HN7bDGiRXDts3LV+u6ww==}

-  '@tanstack/query-devtools@5.65.0':
-    resolution: {integrity: sha512-g5y7zc07U9D3esMdqUfTEVu9kMHoIaVBsD0+M3LPdAdD710RpTcLiNvJY1JkYXqkq9+NV+CQoemVNpQPBXVsJg==}
+  '@tanstack/query-devtools@5.67.2':
+    resolution: {integrity: sha512-O4QXFFd7xqp6EX7sdvc9tsVO8nm4lpWBqwpgjpVLW5g7IeOY6VnS/xvs/YzbRhBVkKTMaJMOUGU7NhSX+YGoNg==}

-  '@tanstack/react-query-devtools@5.67.1':
-    resolution: {integrity: sha512-a/2I8ORNalh+ek6Nyb9mEiq2u7vydjVMvaQz5ZieGq7r7DxgIFcPiMs4Ay0qkQvHfptESgXR5nImGTHmmt19yQ==}
+  '@tanstack/react-query-devtools@5.67.2':
+    resolution: {integrity: sha512-cmj2DxBc+/9btQ66n5xI8wTtAma2BLVa403K7zIYiguzJ/kV201jnGensYqJeu1Rd8uRMLLRM74jLVMLDWNRJA==}
    peerDependencies:
-      '@tanstack/react-query': ^5.67.1
+      '@tanstack/react-query': ^5.67.2
      react: ^18 || ^19

-  '@tanstack/react-query-next-experimental@5.67.1':
-    resolution: {integrity: sha512-gNkIksA/jy5lLuAEzkn4aLLmGb1tPlJdbAgnm6GF29uVI4on6D0LfefenYz9Qv/Y8OfACx7XAjpRwisPJBooVQ==}
+  '@tanstack/react-query-next-experimental@5.67.2':
+    resolution: {integrity: sha512-KTYjhfx1BblTMOKQhmzdSMCkJdl8twtuDqaNeKR1KwU8qqsypXyk5lqfZ3bX5XtGOfAfrtINrVNACmE7vopDdw==}
    peerDependencies:
-      '@tanstack/react-query': ^5.67.1
+      '@tanstack/react-query': ^5.67.2
      next: ^13 || ^14 || ^15
      react: ^18 || ^19

-  '@tanstack/react-query@5.67.1':
-    resolution: {integrity: sha512-fH5u4JLwB6A+wLFdi8wWBWAYoJV5deYif2OveJ26ktAWjU499uvVFS1wPWnyEyq5LvZX1MZInvv9QRaIZANRaQ==}
+  '@tanstack/react-query@5.67.2':
+    resolution: {integrity: sha512-6Sa+BVNJWhAV4QHvIqM73norNeGRWGC3ftN0Ix87cmMvI215I1wyJ44KUTt/9a0V9YimfGcg25AITaYVel71Og==}
    peerDependencies:
      react: ^18 || ^19

@@ -4831,20 +4831,20 @@ packages:
    peerDependencies:
      vite: ^4.2.0 || ^5.0.0 || ^6.0.0

-  '@vitest/coverage-v8@3.0.7':
-    resolution: {integrity: sha512-Av8WgBJLTrfLOer0uy3CxjlVuWK4CzcLBndW1Nm2vI+3hZ2ozHututkfc7Blu1u6waeQ7J8gzPK/AsBRnWA5mQ==}
+  '@vitest/coverage-v8@3.0.8':
+    resolution: {integrity: sha512-y7SAKsQirsEJ2F8bulBck4DoluhI2EEgTimHd6EEUgJBGKy9tC25cpywh1MH4FvDGoG2Unt7+asVd1kj4qOSAw==}
    peerDependencies:
-      '@vitest/browser': 3.0.7
-      vitest: 3.0.7
+      '@vitest/browser': 3.0.8
+      vitest: 3.0.8
    peerDependenciesMeta:
      '@vitest/browser':
        optional: true

-  '@vitest/expect@3.0.7':
-    resolution: {integrity: sha512-QP25f+YJhzPfHrHfYHtvRn+uvkCFCqFtW9CktfBxmB+25QqWsx7VB2As6f4GmwllHLDhXNHvqedwhvMmSnNmjw==}
+  '@vitest/expect@3.0.8':
+    resolution: {integrity: sha512-Xu6TTIavTvSSS6LZaA3EebWFr6tsoXPetOWNMOlc7LO88QVVBwq2oQWBoDiLCN6YTvNYsGSjqOO8CAdjom5DCQ==}

-  '@vitest/mocker@3.0.7':
-    resolution: {integrity: sha512-qui+3BLz9Eonx4EAuR/i+QlCX6AUZ35taDQgwGkK/Tw6/WgwodSrjN1X2xf69IA/643ZX5zNKIn2svvtZDrs4w==}
+  '@vitest/mocker@3.0.8':
+    resolution: {integrity: sha512-n3LjS7fcW1BCoF+zWZxG7/5XvuYH+lsFg+BDwwAz0arIwHQJFUEsKBQ0BLU49fCxuM/2HSeBPHQD8WjgrxMfow==}
    peerDependencies:
      msw: ^2.4.9
      vite: ^5.0.0 || ^6.0.0
@@ -4854,25 +4854,25 @@ packages:
      vite:
        optional: true

-  '@vitest/pretty-format@3.0.7':
-    resolution: {integrity: sha512-CiRY0BViD/V8uwuEzz9Yapyao+M9M008/9oMOSQydwbwb+CMokEq3XVaF3XK/VWaOK0Jm9z7ENhybg70Gtxsmg==}
+  '@vitest/pretty-format@3.0.8':
+    resolution: {integrity: sha512-BNqwbEyitFhzYMYHUVbIvepOyeQOSFA/NeJMIP9enMntkkxLgOcgABH6fjyXG85ipTgvero6noreavGIqfJcIg==}

-  '@vitest/runner@3.0.7':
-    resolution: {integrity: sha512-WeEl38Z0S2ZcuRTeyYqaZtm4e26tq6ZFqh5y8YD9YxfWuu0OFiGFUbnxNynwLjNRHPsXyee2M9tV7YxOTPZl2g==}
+  '@vitest/runner@3.0.8':
+    resolution: {integrity: sha512-c7UUw6gEcOzI8fih+uaAXS5DwjlBaCJUo7KJ4VvJcjL95+DSR1kova2hFuRt3w41KZEFcOEiq098KkyrjXeM5w==}

-  '@vitest/snapshot@3.0.7':
-    resolution: {integrity: sha512-eqTUryJWQN0Rtf5yqCGTQWsCFOQe4eNz5Twsu21xYEcnFJtMU5XvmG0vgebhdLlrHQTSq5p8vWHJIeJQV8ovsA==}
+  '@vitest/snapshot@3.0.8':
+    resolution: {integrity: sha512-x8IlMGSEMugakInj44nUrLSILh/zy1f2/BgH0UeHpNyOocG18M9CWVIFBaXPt8TrqVZWmcPjwfG/ht5tnpba8A==}

-  '@vitest/spy@3.0.7':
-    resolution: {integrity: sha512-4T4WcsibB0B6hrKdAZTM37ekuyFZt2cGbEGd2+L0P8ov15J1/HUsUaqkXEQPNAWr4BtPPe1gI+FYfMHhEKfR8w==}
+  '@vitest/spy@3.0.8':
+    resolution: {integrity: sha512-MR+PzJa+22vFKYb934CejhR4BeRpMSoxkvNoDit68GQxRLSf11aT6CTj3XaqUU9rxgWJFnqicN/wxw6yBRkI1Q==}

-  '@vitest/ui@3.0.7':
-    resolution: {integrity: sha512-bogkkSaVdSTRj02TfypjrqrLCeEc/tA5V4gAVM843Rp5JtIub3xaij+qjsSnS6CseLQJUSdDCFaFqPMmymRJKQ==}
+  '@vitest/ui@3.0.8':
+    resolution: {integrity: sha512-MfTjaLU+Gw/lYorgwFZ06Cym+Mj9hPfZh/Q91d4JxyAHiicAakPTvS7zYCSHF+5cErwu2PVBe1alSjuh6L/UiA==}
    peerDependencies:
-      vitest: 3.0.7
+      vitest: 3.0.8

-  '@vitest/utils@3.0.7':
-    resolution: {integrity: sha512-xePVpCRfooFX3rANQjwoditoXgWb1MaFbzmGuPP59MK6i13mrnDw/yEIyJudLeW6/38mCNcwCiJIGmpDPibAIg==}
+  '@vitest/utils@3.0.8':
+    resolution: {integrity: sha512-nkBC3aEhfX2PdtQI/QwAWp8qZWwzASsU4Npbcd5RdMPBSSLCpkZp52P3xku3s3uA0HIEhGvEcF8rNkBsz9dQ4Q==}

  '@webassemblyjs/ast@1.12.1':
    resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==}
@@ -6177,8 +6177,8 @@ packages:
    engines: {node: '>=6.0'}
    hasBin: true

-  eslint-config-prettier@10.0.2:
-    resolution: {integrity: sha512-1105/17ZIMjmCOJOPNfVdbXafLCLj3hPmkmB7dLgt7XsQ/zkxSuDerE/xgO3RxoHysR1N1whmquY0lSn2O0VLg==}
+  eslint-config-prettier@10.1.1:
+    resolution: {integrity: sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==}
    hasBin: true
    peerDependencies:
      eslint: '>=7.0.0'
@@ -6448,9 +6448,6 @@ packages:
    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
    engines: {node: '>=16'}

-  flatted@3.3.2:
-    resolution: {integrity: sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==}
-
  flatted@3.3.3:
    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}

@@ -6914,8 +6911,8 @@ packages:
  invariant@2.2.4:
    resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}

-  ioredis@5.5.0:
-    resolution: {integrity: sha512-7CutT89g23FfSa8MDoIFs2GYYa0PaNiW/OrT+nRyjRXHDZd17HmIgy+reOQ/yhh72NznNjGuS8kbCAcA4Ro4mw==}
+  ioredis@5.6.0:
+    resolution: {integrity: sha512-tBZlIIWbndeWBWCXWZiqtOF/yxf6yZX3tAlTJ7nfo5jhd6dctNxF7QnYlZLZ1a0o0pDoen7CgZqO+zjNaFbJAg==}
    engines: {node: '>=12.22.0'}

  ip-address@9.0.5:
@@ -7653,8 +7650,8 @@ packages:
    engines: {node: '>=8', npm: '>=5'}
    hasBin: true

-  mysql2@3.12.0:
-    resolution: {integrity: sha512-C8fWhVysZoH63tJbX8d10IAoYCyXy4fdRFz2Ihrt9jtPILYynFEKUUzpp1U7qxzDc3tMbotvaBH+sl6bFnGZiw==}
+  mysql2@3.13.0:
+    resolution: {integrity: sha512-M6DIQjTqKeqXH5HLbLMxwcK5XfXHw30u5ap6EZmu7QVmcF/gnh2wS/EOiQ4MTbXz/vQeoXrmycPlVRM00WSslg==}
    engines: {node: '>= 8.0'}

  mz@2.7.0:
@@ -9884,8 +9881,8 @@ packages:
  videojs-vtt.js@0.15.5:
    resolution: {integrity: sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==}

-  vite-node@3.0.7:
-    resolution: {integrity: sha512-2fX0QwX4GkkkpULXdT1Pf4q0tC1i1lFOyseKoonavXUNlQ77KpW2XqBGGNIm/J4Ows4KxgGJzDguYVPKwG/n5A==}
+  vite-node@3.0.8:
+    resolution: {integrity: sha512-6PhR4H9VGlcwXZ+KWCdMqbtG649xCPZqfI9j2PsK1FcXgEzro5bGHcVKFCTqPLaNKZES8Evqv4LwvZARsq5qlg==}
    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
    hasBin: true

@@ -9928,16 +9925,16 @@ packages:
      terser:
        optional: true

-  vitest@3.0.7:
-    resolution: {integrity: sha512-IP7gPK3LS3Fvn44x30X1dM9vtawm0aesAa2yBIZ9vQf+qB69NXC5776+Qmcr7ohUXIQuLhk7xQR0aSUIDPqavg==}
+  vitest@3.0.8:
+    resolution: {integrity: sha512-dfqAsNqRGUc8hB9OVR2P0w8PZPEckti2+5rdZip0WIz9WW0MnImJ8XiR61QhqLa92EQzKP2uPkzenKOAHyEIbA==}
    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
    hasBin: true
    peerDependencies:
      '@edge-runtime/vm': '*'
      '@types/debug': ^4.1.12
      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
-      '@vitest/browser': 3.0.7
-      '@vitest/ui': 3.0.7
+      '@vitest/browser': 3.0.8
+      '@vitest/ui': 3.0.8
      happy-dom: '*'
      jsdom: '*'
    peerDependenciesMeta:
@@ -12323,25 +12320,25 @@ snapshots:
    dependencies:
      remove-accents: 0.5.0

-  '@tanstack/query-core@5.67.1': {}
+  '@tanstack/query-core@5.67.2': {}

-  '@tanstack/query-devtools@5.65.0': {}
+  '@tanstack/query-devtools@5.67.2': {}

-  '@tanstack/react-query-devtools@5.67.1(@tanstack/react-query@5.67.1(react@19.0.0))(react@19.0.0)':
+  '@tanstack/react-query-devtools@5.67.2(@tanstack/react-query@5.67.2(react@19.0.0))(react@19.0.0)':
    dependencies:
-      '@tanstack/query-devtools': 5.65.0
-      '@tanstack/react-query': 5.67.1(react@19.0.0)
+      '@tanstack/query-devtools': 5.67.2
+      '@tanstack/react-query': 5.67.2(react@19.0.0)
      react: 19.0.0

-  '@tanstack/react-query-next-experimental@5.67.1(@tanstack/react-query@5.67.1(react@19.0.0))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react@19.0.0)':
+  '@tanstack/react-query-next-experimental@5.67.2(@tanstack/react-query@5.67.2(react@19.0.0))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react@19.0.0)':
    dependencies:
-      '@tanstack/react-query': 5.67.1(react@19.0.0)
+      '@tanstack/react-query': 5.67.2(react@19.0.0)
      next: 15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1)
      react: 19.0.0

-  '@tanstack/react-query@5.67.1(react@19.0.0)':
+  '@tanstack/react-query@5.67.2(react@19.0.0)':
    dependencies:
-      '@tanstack/query-core': 5.67.1
+      '@tanstack/query-core': 5.67.2
      react: 19.0.0

  '@tanstack/react-table@8.20.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
@@ -12588,7 +12585,7 @@ snapshots:
      '@trpc/server': 11.0.0-rc.824(typescript@5.8.2)
      typescript: 5.8.2

-  '@trpc/next@11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)':
+  '@trpc/next@11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(next@15.1.7(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(sass@1.85.1))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)':
    dependencies:
      '@trpc/client': 11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)
      '@trpc/server': 11.0.0-rc.824(typescript@5.8.2)
@@ -12597,12 +12594,12 @@ snapshots:
      react-dom: 19.0.0(react@19.0.0)
      typescript: 5.8.2
    optionalDependencies:
-      '@tanstack/react-query': 5.67.1(react@19.0.0)
-      '@trpc/react-query': 11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)
+      '@tanstack/react-query': 5.67.2(react@19.0.0)
+      '@trpc/react-query': 11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)

-  '@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.1(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)':
+  '@trpc/react-query@11.0.0-rc.824(@tanstack/react-query@5.67.2(react@19.0.0))(@trpc/client@11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2))(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(typescript@5.8.2)':
    dependencies:
-      '@tanstack/react-query': 5.67.1(react@19.0.0)
+      '@tanstack/react-query': 5.67.2(react@19.0.0)
      '@trpc/client': 11.0.0-rc.824(@trpc/server@11.0.0-rc.824(typescript@5.8.2))(typescript@5.8.2)
      '@trpc/server': 11.0.0-rc.824(typescript@5.8.2)
      react: 19.0.0
@@ -12993,7 +12990,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@vitest/coverage-v8@3.0.7(vitest@3.0.7)':
+  '@vitest/coverage-v8@3.0.8(vitest@3.0.8)':
    dependencies:
      '@ampproject/remapping': 2.3.0
      '@bcoe/v8-coverage': 1.0.2
@@ -13007,58 +13004,58 @@ snapshots:
      std-env: 3.8.0
      test-exclude: 7.0.1
      tinyrainbow: 2.0.0
-      vitest: 3.0.7(@types/node@22.13.9)(@vitest/ui@3.0.7)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
+      vitest: 3.0.8(@types/node@22.13.9)(@vitest/ui@3.0.8)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
    transitivePeerDependencies:
      - supports-color

-  '@vitest/expect@3.0.7':
+  '@vitest/expect@3.0.8':
    dependencies:
-      '@vitest/spy': 3.0.7
-      '@vitest/utils': 3.0.7
+      '@vitest/spy': 3.0.8
+      '@vitest/utils': 3.0.8
      chai: 5.2.0
      tinyrainbow: 2.0.0

-  '@vitest/mocker@3.0.7(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))':
+  '@vitest/mocker@3.0.8(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))':
    dependencies:
-      '@vitest/spy': 3.0.7
+      '@vitest/spy': 3.0.8
      estree-walker: 3.0.3
      magic-string: 0.30.17
    optionalDependencies:
      vite: 5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)

-  '@vitest/pretty-format@3.0.7':
+  '@vitest/pretty-format@3.0.8':
    dependencies:
      tinyrainbow: 2.0.0

-  '@vitest/runner@3.0.7':
+  '@vitest/runner@3.0.8':
    dependencies:
-      '@vitest/utils': 3.0.7
+      '@vitest/utils': 3.0.8
      pathe: 2.0.3

-  '@vitest/snapshot@3.0.7':
+  '@vitest/snapshot@3.0.8':
    dependencies:
-      '@vitest/pretty-format': 3.0.7
+      '@vitest/pretty-format': 3.0.8
      magic-string: 0.30.17
      pathe: 2.0.3

-  '@vitest/spy@3.0.7':
+  '@vitest/spy@3.0.8':
    dependencies:
      tinyspy: 3.0.2

-  '@vitest/ui@3.0.7(vitest@3.0.7)':
+  '@vitest/ui@3.0.8(vitest@3.0.8)':
    dependencies:
-      '@vitest/utils': 3.0.7
+      '@vitest/utils': 3.0.8
      fflate: 0.8.2
      flatted: 3.3.3
      pathe: 2.0.3
      sirv: 3.0.1
      tinyglobby: 0.2.12
      tinyrainbow: 2.0.0
-      vitest: 3.0.7(@types/node@22.13.9)(@vitest/ui@3.0.7)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
+      vitest: 3.0.8(@types/node@22.13.9)(@vitest/ui@3.0.8)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)

-  '@vitest/utils@3.0.7':
+  '@vitest/utils@3.0.8':
    dependencies:
-      '@vitest/pretty-format': 3.0.7
+      '@vitest/pretty-format': 3.0.8
      loupe: 3.1.3
      tinyrainbow: 2.0.0

@@ -14194,17 +14191,17 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.12.0):
+  drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.13.0):
    optionalDependencies:
      '@libsql/client-wasm': 0.14.0
      '@types/better-sqlite3': 7.6.12
      better-sqlite3: 11.8.1
      gel: 2.0.0
-      mysql2: 3.12.0
+      mysql2: 3.13.0

-  drizzle-zod@0.7.0(drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.12.0))(zod@3.24.2):
+  drizzle-zod@0.7.0(drizzle-orm@0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.13.0))(zod@3.24.2):
    dependencies:
-      drizzle-orm: 0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.12.0)
+      drizzle-orm: 0.40.0(@libsql/client-wasm@0.14.0)(@types/better-sqlite3@7.6.12)(better-sqlite3@11.8.1)(gel@2.0.0)(mysql2@3.13.0)
      zod: 3.24.2

  dunder-proto@1.0.1:
@@ -14600,7 +14597,7 @@ snapshots:
    optionalDependencies:
      source-map: 0.6.1

-  eslint-config-prettier@10.0.2(eslint@9.21.0):
+  eslint-config-prettier@10.1.1(eslint@9.21.0):
    dependencies:
      eslint: 9.21.0

@@ -14940,11 +14937,9 @@ snapshots:

  flat-cache@4.0.1:
    dependencies:
-      flatted: 3.3.2
+      flatted: 3.3.3
      keyv: 4.5.4

-  flatted@3.3.2: {}
-
  flatted@3.3.3: {}

  fn.name@1.1.0: {}
@@ -15478,7 +15473,7 @@ snapshots:
    dependencies:
      loose-envify: 1.4.0

-  ioredis@5.5.0:
+  ioredis@5.6.0:
    dependencies:
      '@ioredis/commands': 1.2.0
      cluster-key-slot: 1.1.2
@@ -16191,7 +16186,7 @@ snapshots:
      '@babel/runtime': 7.25.6
      global: 4.4.0

-  mysql2@3.12.0:
+  mysql2@3.13.0:
    dependencies:
      aws-ssl-profiles: 1.1.2
      denque: 2.1.0
@@ -18687,7 +18682,7 @@ snapshots:
    dependencies:
      global: 4.4.0

-  vite-node@3.0.7(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0):
+  vite-node@3.0.8(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0):
    dependencies:
      cac: 6.7.14
      debug: 4.4.0
@@ -18728,15 +18723,15 @@ snapshots:
      sugarss: 4.0.1(postcss@8.4.47)
      terser: 5.32.0

-  vitest@3.0.7(@types/node@22.13.9)(@vitest/ui@3.0.7)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0):
+  vitest@3.0.8(@types/node@22.13.9)(@vitest/ui@3.0.8)(jsdom@26.0.0)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0):
    dependencies:
-      '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))
-      '@vitest/pretty-format': 3.0.7
-      '@vitest/runner': 3.0.7
-      '@vitest/snapshot': 3.0.7
-      '@vitest/spy': 3.0.7
-      '@vitest/utils': 3.0.7
+      '@vitest/expect': 3.0.8
+      '@vitest/mocker': 3.0.8(vite@5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0))
+      '@vitest/pretty-format': 3.0.8
+      '@vitest/runner': 3.0.8
+      '@vitest/snapshot': 3.0.8
+      '@vitest/spy': 3.0.8
+      '@vitest/utils': 3.0.8
      chai: 5.2.0
      debug: 4.4.0
      expect-type: 1.1.0
@@ -18748,11 +18743,11 @@ snapshots:
      tinypool: 1.0.2
      tinyrainbow: 2.0.0
      vite: 5.4.5(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
-      vite-node: 3.0.7(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
+      vite-node: 3.0.8(@types/node@22.13.9)(sass@1.85.1)(sugarss@4.0.1(postcss@8.4.47))(terser@5.32.0)
      why-is-node-running: 2.3.0
    optionalDependencies:
      '@types/node': 22.13.9
-      '@vitest/ui': 3.0.7(vitest@3.0.7)
+      '@vitest/ui': 3.0.8(vitest@3.0.8)
      jsdom: 26.0.0
    transitivePeerDependencies:
      - less
--- a/tooling/eslint/package.json
+++ b/tooling/eslint/package.json
@@ -18,7 +18,7 @@
  "prettier": "@homarr/prettier-config",
  "dependencies": {
    "@next/eslint-plugin-next": "15.1.7",
-    "eslint-config-prettier": "^10.0.2",
+    "eslint-config-prettier": "^10.1.1",
    "eslint-config-turbo": "^2.4.4",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",