diff --git a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
index 508074ead..493d368f1 100644
--- a/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
+++ b/apps/nextjs/src/app/[locale]/_client-providers/mantine.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorScheme, MantineColorSchemeManager } from "@mantine/core";
-import { DirectionProvider, MantineProvider } from "@mantine/core";
+import { DirectionProvider, MantineProvider, v8CssVariablesResolver } from "@mantine/core";
 import dayjs from "dayjs";
 
 import { clientApi } from "@homarr/api/client";
@@ -18,7 +18,12 @@ export const CustomMantineProvider = ({
   const manager = useColorSchemeManager();
   return (
     <DirectionProvider>
-      <MantineProvider defaultColorScheme={defaultColorScheme} colorSchemeManager={manager} theme={theme}>
+      <MantineProvider
+        defaultColorScheme={defaultColorScheme}
+        colorSchemeManager={manager}
+        theme={theme}
+        cssVariablesResolver={v8CssVariablesResolver}
+      >
         {children}
       </MantineProvider>
     </DirectionProvider>
diff --git a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
index 8fa031ad0..0ea5c9cf0 100644
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -2,7 +2,7 @@
 
 import type { PropsWithChildren } from "react";
 import type { MantineColorsTuple } from "@mantine/core";
-import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem } from "@mantine/core";
+import { colorsTuple, createTheme, darken, lighten, MantineProvider, rem, v8CssVariablesResolver } from "@mantine/core";
 
 import { useRequiredBoard } from "@homarr/boards/context";
 import type { ColorScheme } from "@homarr/definitions";
@@ -33,7 +33,12 @@ export const BoardMantineProvider = ({
   });
 
   return (
-    <MantineProvider defaultColorScheme={defaultColorScheme} theme={theme} colorSchemeManager={colorSchemeManager}>
+    <MantineProvider
+      defaultColorScheme={defaultColorScheme}
+      theme={theme}
+      colorSchemeManager={colorSchemeManager}
+      cssVariablesResolver={v8CssVariablesResolver}
+    >
       {children}
     </MantineProvider>
   );