diff --git a/console/src/formkit/formkit.config.ts b/console/src/formkit/formkit.config.ts
index 47f143593..58ea8869c 100644
--- a/console/src/formkit/formkit.config.ts
+++ b/console/src/formkit/formkit.config.ts
@@ -3,6 +3,7 @@ import theme from "./theme";
 import { zh, en } from "@formkit/i18n";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
+import { group } from "./inputs/group";
 import { attachment } from "./inputs/attachment";
 import { code } from "./inputs/code";
 import { repeater } from "./inputs/repeater";
@@ -28,6 +29,7 @@ const config: DefaultConfigOptions = {
   plugins: [radioAlt, stopImplicitSubmission, passwordPreventAutocomplete],
   inputs: {
     form,
+    group,
     attachment,
     code,
     repeater,
diff --git a/console/src/formkit/inputs/group.ts b/console/src/formkit/inputs/group.ts
new file mode 100644
index 000000000..a58dd8889
--- /dev/null
+++ b/console/src/formkit/inputs/group.ts
@@ -0,0 +1,29 @@
+import type { FormKitTypeDefinition } from "@formkit/core";
+
+import {
+  disablesChildren,
+  outer,
+  fieldset,
+  legend,
+  help,
+  inner,
+  message,
+  messages,
+} from "@formkit/inputs";
+
+export const group: FormKitTypeDefinition = {
+  schema: outer(
+    fieldset(
+      legend("$label"),
+      help("$help"),
+      inner("$slots.default"),
+      messages(message("$message.value"))
+    )
+  ),
+
+  type: "group",
+
+  props: [],
+
+  features: [disablesChildren],
+};
diff --git a/console/src/formkit/inputs/repeater/Repeater.vue b/console/src/formkit/inputs/repeater/Repeater.vue
index 0a8fd8abb..b289e6a7c 100644
--- a/console/src/formkit/inputs/repeater/Repeater.vue
+++ b/console/src/formkit/inputs/repeater/Repeater.vue
@@ -7,6 +7,7 @@ import {
   IconArrowDownCircleLine,
 } from "@halo-dev/components";
 import type { FormKitFrameworkContext } from "@formkit/core";
+import { group } from "@formkit/inputs";
 import type { PropType } from "vue";
 import cloneDeep from "lodash.clonedeep";
 
@@ -62,7 +63,7 @@ const handleMoveDown = (index: number) => {
           :id="`${context.node.name}-group-${index}`"
           :key="`${context.node.name}-group-${index}`"
           :model-value="item"
-          type="group"
+          :type="group"
         >
           <slot />
         </FormKit>
diff --git a/console/src/formkit/theme.ts b/console/src/formkit/theme.ts
index 3e7b386a9..c88655e0a 100644
--- a/console/src/formkit/theme.ts
+++ b/console/src/formkit/theme.ts
@@ -88,9 +88,17 @@ const theme: Record<string, Record<string, string>> = {
     inner: "flex flex-col gap-4",
     items: "flex flex-col w-full gap-2",
     item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-hidden focus-within:shadow-sm",
-    content: "flex-1 p-2 col-span-11",
+    content: "flex-1 p-2 col-span-11  divide-y divide-gray-100",
     controls: "bg-gray-200 col-span-1 flex items-center justify-center",
   },
+  group: {
+    label: textClassification.label,
+    legend: `${textClassification.label} px-2`,
+    fieldset: boxClassification.fieldset,
+    wrapper: boxClassification.wrapper,
+    help: boxClassification.wrapper,
+    inner: "flex flex-col px-2 divide-y divide-gray-100",
+  },
   tagSelect: {
     ...textClassification,
     inner: `${textClassification.inner} !overflow-visible !h-auto min-h-[2.25rem]`,