diff --git a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx
index a777ce73d..07d5dd55f 100644
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/_reserved-group-alert.tsx
@@ -1,12 +1,14 @@
+"use client";
+
 import Link from "next/link";
 import { Alert, Anchor } from "@mantine/core";
 import { IconExclamationCircle } from "@tabler/icons-react";
 
 import { createDocumentationLink } from "@homarr/definitions";
-import { getI18n } from "@homarr/translation/server";
+import { useI18n } from "@homarr/translation/client";
 
-export const ReservedGroupAlert = async () => {
-  const t = await getI18n();
+export const ReservedGroupAlert = () => {
+  const t = useI18n();
 
   return (
     <Alert variant="light" color="yellow" icon={<IconExclamationCircle size="1rem" stroke={1.5} />}>
diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json
index 849a8f662..c10f45d8f 100644
--- a/packages/translation/src/lang/en.json
+++ b/packages/translation/src/lang/en.json
@@ -244,7 +244,7 @@
       "external": "All members are from external providers and cannot be managed here"
     },
     "reservedNotice": {
-      "message": "This group is reserved for system use and restricts some actions. {checkoutDocs}"
+      "message": "This group is reserved for system use and restricts some actions. <checkoutDocs></checkoutDocs>"
     },
     "action": {
       "create": {