diff --git a/apps/backend/schema.gql b/apps/backend/schema.gql
index 0694809c4..81b005c66 100644
--- a/apps/backend/schema.gql
+++ b/apps/backend/schema.gql
@@ -227,7 +227,6 @@ type Mutation {
   admin__core_languages__delete(code: String!): String!
   admin__core_languages__download(code: String!, plugins: [String!]!): String!
   admin__core_languages__edit(allow_in_input: Boolean!, default: Boolean!, enabled: Boolean!, id: Int!, locale: String!, name: String!, time_24: Boolean!, timezone: String!): ShowCoreLanguages!
-  admin__core_languages__update(code: String!, file: Upload!): String!
   admin__core_main_settings__edit(site_copyright: [TextLanguageInput!]!, site_description: [TextLanguageInput!]!, site_name: String!, site_short_name: String!): EditAdminSettingsObj!
   admin__core_manifest_metadata__edit(background_color: String!, display: String!, start_url: String!, theme_color: String!): ShowAdminManifestMetadataObj!
   admin__core_members__create(email: String!, name: String!, password: String!): SignUpCoreSessionsObj!
diff --git a/apps/docs/assets/ui/components/tags-input.png b/apps/docs/assets/ui/components/tag-input.png
similarity index 100%
rename from apps/docs/assets/ui/components/tags-input.png
rename to apps/docs/assets/ui/components/tag-input.png
diff --git a/apps/docs/content/docs/ui/forms/auto-form.mdx b/apps/docs/content/docs/ui/forms/auto-form.mdx
index 243a035fa..5246af1ed 100644
--- a/apps/docs/content/docs/ui/forms/auto-form.mdx
+++ b/apps/docs/content/docs/ui/forms/auto-form.mdx
@@ -3,8 +3,6 @@ title: Auto Form
 description: Automatically generate form fields based on a schema.
 ---
 
-Component created based on [Auto Form by vantezzen](https://github.com/vantezzen/auto-form).
-
 ## Support Fileds
 
 - [Color Picker](/docs/ui/forms/color-picker)
@@ -17,7 +15,7 @@ Component created based on [Auto Form by vantezzen](https://github.com/vantezzen
 - [Switch](/docs/ui/forms/switch)
 - [Text Language Input](/docs/ui/forms/text-language-input)
 - [Icon Picker](/docs/ui/forms/icon-picker)
-- [Tags Input](/docs/ui/forms/tags-input)
+- [Tag Input](/docs/ui/forms/tag-input)
 - [Combobox](/docs/ui/forms/combobox)
 - [Date Picker](/docs/ui/forms/date-picker)
 
@@ -56,57 +54,80 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    name: {
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
     },
-  }}
+  ]}
 />
 ```
 
-## Zod Configuration
-
-### Validators
-
-Our component is smart and well integrated with Zod, so you can use all the validators that Zod provides. For exampele if you use `zod.string().min(8)`, the input will automatically have a minlength="8" attribute.
+## Component Props
 
-Validation methods not supported by HTML will automatically be checked when the form is submitted.
+Each field has a set of props with `Props` surfix that can be passed to the component. For example, for the `AutoFormInput` component, you can pass the `AutoFormInputProps` props using the `componentProps` prop.
 
-### Descriptions
-
-You can add a description to your schema fields by using the `description` method.
+```tsx
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from 'vitnode-frontend/components/auto-form/fields/input';
 
-```ts
-const formSchema = z.object({
-  username: z.string().describe('Your username'),
-});
+<AutoForm
+  formSchema={formSchema}
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
+      componentProps: {
+        type: 'password',
+      } as AutoFormInputProps,
+    },
+  ]}
+/>;
 ```
 
-or using the `description` method in the `fieldConfig` object.
+<Callout title="Avoid function for component argument!" type="error">
+ Do not use function for component argument like this:
 
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    name: {
-      fieldType: AutoFormInput
-      description: 'Test description',
+  fields={[
+    {
+      id: 'username',
+      component: props => <AutoFormInput {...props} />, // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
-You can also use the `description` as function to get the current value of the field.
+This will cause the component to re-render on every change.
+
+</Callout>
+
+## Zod Configuration
+
+### Validators
+
+Our component is smart and well integrated with Zod, so you can use all the validators that Zod provides. For exampele if you use `zod.string().min(8)`, the input will automatically have a minlength="8" attribute.
+
+Validation methods not supported by HTML will automatically be checked when the form is submitted.
+
+### Descriptions
+
+You can add a description to your field by passing the `description` prop.
 
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    name: {
-      fieldType: AutoFormInput
-      description: value => `The current value is ${value}`,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
+      description: 'Test description', // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
@@ -137,12 +158,13 @@ You can set a label for a field by using the `label` method.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      label: 'Your username',
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
+      label: 'Your username', // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
@@ -210,31 +232,31 @@ const formSchema = z.object({
 />
 ```
 
-### Render Parent
-
-You can render the parent object by using the `renderParent` prop.
-
-Avaliable props:
+### Child Component
 
-- `children`: The children of the parent object.
-- `field`: The field object `ControllerRenderProps` from `react-hook-form`.
+If you want to render something below the field, you can use the `childComponent` prop.
 
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    start_url: {
-      label: t('start_url.label'),
-      description: t('start_url.desc'),
-      fieldType: props => <AutoFormInput className="w-64" {...props} />,
-      renderParent: ({ children, field }: FieldRenderParentProps) => (
-        <div className="flex flex-wrap items-center gap-1">
-          <span>Something</span>
-          {children} // Here is the input
-        </div>
-      ),
+  fields={[
+    {
+      id: 'name',
+      label: t('sign_up.form.name.label'),
+      description: t('sign_up.form.name.desc'),
+      component: AutoFormInput,
+      childComponent: ({ field }) => {
+        const value: string = field.value ?? '';
+        if (!value.length) return null;
+
+        return (
+          <span className="text-muted-foreground mt-1 block max-w-md truncate text-sm">
+            {value}
+          </span>
+        );
+      },
     },
-  }}
+  ]}
 />
 ```
 
@@ -245,11 +267,12 @@ You can use the `onSubmit` prop to get the form data.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
     },
-  }}
+  ]}
   onSubmit={data => {
     console.log(data);
   }}
@@ -261,15 +284,17 @@ You can get access to the `form` from `react-hook-form` by using the `form` prop
 ```tsx
 <AutoForm
   formSchema={formSchema}
-    fieldConfig={{
-    username: {
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
     },
-  }}
+  ]}
   onSubmit={(data, form) => {
     console.log(data);
-    form.setError("username", { type: "manual", message: "This is an error" });
+    form.setError('username', { type: 'manual', message: 'This is an error' });
   }}
+/>
 ```
 
 You can also move `onSubmit` to a separate function.
@@ -315,11 +340,12 @@ Component has a submit button by default with the text `Save` include translatio
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
     },
-  }}
+  ]}
   submitButton={props => (
     <Button {...props} className="w-full">
       {t('sign_in.form.submit')}
@@ -337,16 +363,17 @@ You can change the theme of the form by using the `theme` prop and passing `hori
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      fieldType: AutoFormInput,
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput,
     },
-  }}
+  ]}
   theme="horizontal" // [!code highlight]
 />
 ```
 
-### Get Values from Form
+## Get Values from Form
 
 You can get the values from the form by using the `onValuesChange` prop.
 
@@ -371,7 +398,7 @@ For example if `provider` is not `smtp`, the field `smtp` will be hidden.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{}}
+  fields={[]}
   dependencies={[
     {
       sourceField: 'provider',
@@ -390,7 +417,7 @@ For example if `provider` is `resend`, the field `resend_key` will be required.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{}}
+  fields={[]}
   dependencies={[
     {
       sourceField: 'email.provider',
@@ -409,7 +436,7 @@ For example if `provider` is not `smtp`, the field `smtp` will be disabled.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{}}
+  fields={[]}
   dependencies={[
     {
       sourceField: 'email.provider',
@@ -428,7 +455,7 @@ For example if `vegetarian` checkbox hides the `Beef Wellington` option from `me
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{}}
+  fields={[]}
   dependencies={[
     {
       sourceField: 'vegetarian',
diff --git a/apps/docs/content/docs/ui/forms/checkbox.mdx b/apps/docs/content/docs/ui/forms/checkbox.mdx
index 0ac0fed97..cc906784d 100644
--- a/apps/docs/content/docs/ui/forms/checkbox.mdx
+++ b/apps/docs/content/docs/ui/forms/checkbox.mdx
@@ -34,12 +34,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    allow_files: {
-      label: 'Allow Files',
-      fieldType: AutoFormCheckbox, // [!code highlight]
+  fields={[
+    {
+      id: 'allow_files',
+      component: AutoFormCheckbox, // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/color-picker.mdx b/apps/docs/content/docs/ui/forms/color-picker.mdx
index ae5110d8f..22ffcac62 100644
--- a/apps/docs/content/docs/ui/forms/color-picker.mdx
+++ b/apps/docs/content/docs/ui/forms/color-picker.mdx
@@ -29,12 +29,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    color_primary: {
-      label: 'Color picker',
-      fieldType: AutoFormColor, // [!code highlight]
+  fields={[
+    {
+      id: 'color_primary',
+      component: AutoFormColor, // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/combobox.mdx b/apps/docs/content/docs/ui/forms/combobox.mdx
index aee7104ff..1bddc6187 100644
--- a/apps/docs/content/docs/ui/forms/combobox.mdx
+++ b/apps/docs/content/docs/ui/forms/combobox.mdx
@@ -40,21 +40,19 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    type: {
-      label: 'Combobox Example',
-      fieldType: props => (
-        <AutoFormCombobox
-          {...props}
-          placeholderSearchInput="Search options..."
-          labels={{
-            ['option-one']: 'Option One',
-            ['option-two']: 'Option Two',
-          }}
-        />
-      ),
+  fields={[
+    {
+      id: 'type',
+      component: AutoFormCombobox,
+      props: {
+        placeholderSearchInput: 'Search options...',
+        labels: {
+          ['option-one']: 'Option One',
+          ['option-two']: 'Option Two',
+        },
+      },
     },
-  }}
+  ]}
 />
 ```
 
@@ -173,24 +171,20 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    type: {
-      label: 'Combobox Example',
-      fieldType: (
-        props: AutoFormInputComponentProps, // [!code highlight]
-      ) => (
-        <AutoFormCombobox
-          {...props}
-          placeholderSearchInput="Search options..."
-          labels={{
-            ['option-one']: 'Option One',
-            ['option-two']: 'Option Two',
-          }}
-          multiple // [!code highlight]
-        />
-      ),
+  fields={[
+    {
+      id: 'type',
+      component: AutoFormCombobox,
+      props: {
+        placeholderSearchInput: 'Search options...',
+        labels: {
+          ['option-one']: 'Option One',
+          ['option-two']: 'Option Two',
+        },
+        multiple: true, // [!code highlight]
+      },
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/date-picker.mdx b/apps/docs/content/docs/ui/forms/date-picker.mdx
index 693ea1b31..9ecfd64cd 100644
--- a/apps/docs/content/docs/ui/forms/date-picker.mdx
+++ b/apps/docs/content/docs/ui/forms/date-picker.mdx
@@ -17,7 +17,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormDate } from 'vitnode-frontend/form/fields/date';
+import { AutoFormDatePicker } from 'vitnode-frontend/form/fields/date';
 ```
 
 ```ts
@@ -29,12 +29,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    birthday: {
-      label: 'Birthday',
-      fieldType: AutoFormDate,
+  fields={[
+    {
+      id: 'birthday',
+      component: AutoFormDatePicker,
     },
-  }}
+  ]}
 />
 ```
 
@@ -67,20 +67,18 @@ Enable dropdown for month and year.
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    birthday: {
-      label: 'Birthday',
-      fieldType: (props: AutoFormInputComponentProps) => (
-        <AutoFormDate
-          {...props}
-          controlledMouthAndYear={{
-            fromYear: 1900, // [!code highlight]
-            toYear: new Date().getFullYear(), // [!code highlight]
-          }}
-        />
-      ),
+  fields={[
+    {
+      id: 'birthday',
+      component: AutoFormDatePicker,
+      componentProps: {
+        controlledMouthAndYear: {
+          fromYear: 1900,
+          toYear: new Date().getFullYear(),
+        },
+      } as AutoFormDatePickerProps,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/file-input.mdx b/apps/docs/content/docs/ui/forms/file-input.mdx
index 8d4a296b6..faf29ba9f 100644
--- a/apps/docs/content/docs/ui/forms/file-input.mdx
+++ b/apps/docs/content/docs/ui/forms/file-input.mdx
@@ -12,7 +12,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormFile } from 'vitnode-frontend/form/fields/file';
+import { AutoFormFileInput } from 'vitnode-frontend/form/fields/file';
 import { zodFile } from 'vitnode-frontend/helpers/zod';
 ```
 
@@ -25,19 +25,15 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    logo: {
-      label: 'Logo',
-      fieldType: props => (
-        <AutoFormFile
-          acceptExtensions={['png', 'jpg', 'gif']}
-          maxFileSizeInMb={2}
-          accept="image/png, image/gif, image/jpeg"
-          showInfo
-          {...props}
-        />
-      ),
-    },
+  fields={{
+    id: 'logo',
+    component: AutoFormFileInput,
+    componentProps: {
+      acceptExtensions: ['png', 'jpg', 'gif'],
+      maxFileSizeInMb: 2,
+      accept: 'image/png, image/gif, image/jpeg',
+      showInfo: true,
+    } as AutoFormFileInputProps,
   }}
 />
 ```
@@ -75,21 +71,19 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    logo: {
-      label: 'Logo',
-      fieldType: props => (
-        <AutoFormFile
-          acceptExtensions={['png', 'jpg', 'gif']}
-          maxFileSizeInMb={2}
-          accept="image/png, image/gif, image/jpeg"
-          showInfo
-          multiple // [!code highlight]
-          {...props}
-        />
-      ),
+  fields={[
+    {
+      id: 'logo',
+      component: AutoFormFileInput,
+      componentProps: {
+        acceptExtensions: ['png', 'jpg', 'gif'],
+        maxFileSizeInMb: 2,
+        accept: 'image/png, image/gif, image/jpeg',
+        showInfo: true,
+        multiple: true, // [!code highlight]
+      } as AutoFormFileInputProps,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/icon-picker.mdx b/apps/docs/content/docs/ui/forms/icon-picker.mdx
index 5c1b9d67d..8cd8043e2 100644
--- a/apps/docs/content/docs/ui/forms/icon-picker.mdx
+++ b/apps/docs/content/docs/ui/forms/icon-picker.mdx
@@ -12,7 +12,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormIcon } from 'vitnode-frontend/form/fields/icon';
+import { AutoFormIconPicker } from 'vitnode-frontend/form/fields/icon';
 ```
 
 ```ts
@@ -24,12 +24,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    icon: {
-      label: 'Prefix Icon',
-      fieldType: AutoFormIcon, // [!code highlight]
+  fields={[
+    {
+      id: 'icon',
+      component: AutoFormIconPicker, // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/input.mdx b/apps/docs/content/docs/ui/forms/input.mdx
index 60ac08d5a..904646b7f 100644
--- a/apps/docs/content/docs/ui/forms/input.mdx
+++ b/apps/docs/content/docs/ui/forms/input.mdx
@@ -34,12 +34,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      label: 'Username',
-      fieldType: AutoFormInput, // [!code highlight]
+  fields={[
+    {
+      id: 'username',
+      component: AutoFormInput, // [!code highlight]
     },
-  }}
+  ]}
 />
 ```
 
@@ -65,14 +65,15 @@ import { Input } from 'vitnode-frontend/components/ui/input';
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    username: {
-      label: 'Username',
-      fieldType: props => (
-        <AutoFormInput placeholder="Type username" {...props} /> // [!code highlight]
-      ),
+  fields={[
+    {
+      id: 'name',
+      component: AutoFormInput,
+      componentProps: {
+        placeholder: 'Type your name', // [!code highlight]
+      } as AutoFormInputProps,
     },
-  }}
+  ]}
 />
 ```
 
@@ -101,12 +102,15 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    count: {
-      label: 'Count',
-      fieldType: props => <AutoFormInput type="number" {...props} />, // [!code highlight]
+  fields={[
+    {
+      id: 'count',
+      component: AutoFormInput,
+      componentProps: {
+        type: 'number', // [!code highlight]
+      } as AutoFormInputProps,
     },
-  }}
+  ]}
 />
 ```
 
@@ -135,12 +139,15 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    start_day: {
-      label: 'Start Date',
-      fieldType: props => <AutoFormInput type="date" {...props} />, // [!code highlight]
+  fields={[
+    {
+      id: 'start_day',
+      component: AutoFormInput,
+      componentProps: {
+        type: 'date', // [!code highlight]
+      } as AutoFormInputProps,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/radio-group.mdx b/apps/docs/content/docs/ui/forms/radio-group.mdx
index 54a05cc0a..d18c204a5 100644
--- a/apps/docs/content/docs/ui/forms/radio-group.mdx
+++ b/apps/docs/content/docs/ui/forms/radio-group.mdx
@@ -22,7 +22,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormRadioGroup } from 'vitnode-frontend/form/fields/radio-group';
+import { AutoFormRadioGroup, AutoFormRadioGroupProps } from 'vitnode-frontend/form/fields/radio-group';
 ````
 
 ```ts
@@ -40,26 +40,24 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    type: {
-      label: 'Radio Group Example',
-      fieldType: props => (
-        <AutoFormRadioGroup
-          {...props}
-          labels={{
-            ['option-one']: {
-              title: 'Option One',
-              description: 'Option One Description',
-            },
-            ['option-two']: {
-              title: 'Option Two',
-              description: 'Option Two Description',
-            },
-          }}
-        />
-      ),
+  fields={[
+    {
+      id: 'type',
+      component: AutoFormRadioGroup,
+      componentProps: {
+        labels: {
+          ['option-one']: {
+            title: 'Option One',
+            description: 'Option One Description',
+          },
+          ['option-two']: {
+            title: 'Option Two',
+            description: 'Option Two Description',
+          },
+        },
+      } as AutoFormRadioGroupProps,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/select.mdx b/apps/docs/content/docs/ui/forms/select.mdx
index 444f8556f..3070a3511 100644
--- a/apps/docs/content/docs/ui/forms/select.mdx
+++ b/apps/docs/content/docs/ui/forms/select.mdx
@@ -22,7 +22,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormSelect } from 'vitnode-frontend/form/fields/select';
+import { AutoFormSelect, AutoFormSelectProps } from 'vitnode-frontend/form/fields/select';
 ```
 
 ```ts
@@ -40,21 +40,19 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    type: {
-      label: 'Select Example',
-      fieldType: props => (
-        <AutoFormSelect
-          {...props}
-          placeholder="Select example"
-          labels={{
-            ['option-one']: 'Option One',
-            ['option-two']: 'Option Two',
-          }}
-        />
-      ),
+  filds={[
+    {
+      id: 'type',
+      component: AutoFormSelect,
+      componentProps: {
+        placeholder: 'Select example',
+        labels: {
+          ['option-one']: 'Option One',
+          ['option-two']: 'Option Two',
+        },
+      } as AutoFormSelectProps,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/switch.mdx b/apps/docs/content/docs/ui/forms/switch.mdx
index ff7dfd8ce..3eb1fe4c8 100644
--- a/apps/docs/content/docs/ui/forms/switch.mdx
+++ b/apps/docs/content/docs/ui/forms/switch.mdx
@@ -34,12 +34,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    allow_files: {
-      label: 'Allow Files',
-      fieldType: AutoFormSwitch,
+  fields={[
+    {
+      id: 'allow_files',
+      component: AutoFormSwitch,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/docs/content/docs/ui/forms/tags-input.mdx b/apps/docs/content/docs/ui/forms/tag-input.mdx
similarity index 68%
rename from apps/docs/content/docs/ui/forms/tags-input.mdx
rename to apps/docs/content/docs/ui/forms/tag-input.mdx
index 136bee56b..f5551716b 100644
--- a/apps/docs/content/docs/ui/forms/tags-input.mdx
+++ b/apps/docs/content/docs/ui/forms/tag-input.mdx
@@ -4,7 +4,7 @@ description: Tag Input is a component that allows users to input tags.
 ---
 
 import { ImageZoom } from 'fumadocs-ui/components/image-zoom';
-import img from '@/assets/ui/components/tags-input.png';
+import img from '@/assets/ui/components/tag-input.png';
 
 <ImageZoom src={img} className="max-w-xs" alt="Tags Input" />
 
@@ -17,7 +17,7 @@ import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
 ```ts
 import * as z from 'zod';
 import { AutoForm } from 'vitnode-frontend/form/auto-form';
-import { AutoFormTags } from 'vitnode-frontend/form/fields/tags';
+import { AutoFormTagInput } from 'vitnode-frontend/form/fields/tags';
 import { zodTag } from 'vitnode-frontend/helpers/zod';
 ```
 
@@ -30,12 +30,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    keywords: {
-      label: 'Keywords',
-      fieldType: AutoFormTags,
+  fields={[
+    {
+      id: 'keywords',
+      component: AutoFormTagInput,
     },
-  }}
+  ]}
 />
 ```
 
@@ -43,11 +43,11 @@ const formSchema = z.object({
 
   <Tab value="Manual">
 ```ts
-import { TagsInput } from 'vitnode-frontend/components/ui/tags-input';
+import { TagInput } from 'vitnode-frontend/components/ui/tag-input';
 ```
 
 ```tsx
-<TagsInput onChange={onChange} value={value} />
+<TagInput onChange={onChange} value={value} />
 ```
 
   </Tab>
@@ -58,12 +58,15 @@ import { TagsInput } from 'vitnode-frontend/components/ui/tags-input';
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    keyworlds: {
-      label: 'Keywords',
-      fieldType: props => <AutoFormTags {...props} multiple />, // [!code highlight]
+  fields={[
+    {
+      id: 'keywords',
+      component: AutoFormTagInput,
+      componentProps: {
+        multiple: true,
+      } as AutoFormTagsProps,
     },
-  }}
+  ]}
 />
 ```
 
@@ -75,11 +78,11 @@ import { TypeTable } from 'fumadocs-ui/components/type-table';
   type={{
     onChange: {
       description: 'Callback when the value changes.',
-      type: 'TagsInputItemProps | TagsInputItemProps[] | undefined',
+      type: 'TagInputItemProps | TagInputItemProps[] | undefined',
     },
     value: {
       description: 'Value of the input.',
-      type: 'TagsInputItemProps | TagsInputItemProps[]',
+      type: 'TagInputItemProps | TagInputItemProps[]',
     },
     placeholder: {
       description: 'Placeholder text.',
diff --git a/apps/docs/content/docs/ui/forms/text-language-input.mdx b/apps/docs/content/docs/ui/forms/text-language-input.mdx
index 3817e70c6..b3d50f417 100644
--- a/apps/docs/content/docs/ui/forms/text-language-input.mdx
+++ b/apps/docs/content/docs/ui/forms/text-language-input.mdx
@@ -30,12 +30,12 @@ const formSchema = z.object({
 ```tsx
 <AutoForm
   formSchema={formSchema}
-  fieldConfig={{
-    description: {
-      label: 'Description',
-      fieldType: AutoFormTextLanguageInput,
+  fields={[
+    {
+      id: 'description',
+      component: AutoFormTextLanguageInput,
     },
-  }}
+  ]}
 />
 ```
 
diff --git a/apps/frontend/src/plugins/admin/langs/en.json b/apps/frontend/src/plugins/admin/langs/en.json
index 9bff79c87..85d9611e5 100644
--- a/apps/frontend/src/plugins/admin/langs/en.json
+++ b/apps/frontend/src/plugins/admin/langs/en.json
@@ -252,10 +252,12 @@
             "desc": "URL to the support page for this plugin."
           },
           "author": {
-            "label": "Author"
+            "label": "Author",
+            "desc": "Name of the author."
           },
           "author_url": {
-            "label": "Author URL"
+            "label": "Author URL",
+            "desc": "URL to the author's website."
           }
         },
         "edit": {
diff --git a/packages/backend/src/core/admin/languages/languages.module.ts b/packages/backend/src/core/admin/languages/languages.module.ts
index b21fa755d..2f46626d7 100644
--- a/packages/backend/src/core/admin/languages/languages.module.ts
+++ b/packages/backend/src/core/admin/languages/languages.module.ts
@@ -8,8 +8,6 @@ import { DownloadAdminCoreLanguagesResolver } from './download/download.resolver
 import { DownloadAdminCoreLanguageService } from './download/download.service';
 import { EditAdminCoreLanguagesResolver } from './edit/edit.resolver';
 import { EditAdminCoreLanguagesService } from './edit/edit.service';
-import { UpdateAdminCoreLanguagesResolver } from './update/update.resolver';
-import { UpdateAdminCoreLanguageService } from './update/update.service';
 
 @Module({
   providers: [
@@ -21,8 +19,6 @@ import { UpdateAdminCoreLanguageService } from './update/update.service';
     DeleteAdminCoreLanguageService,
     DownloadAdminCoreLanguageService,
     DownloadAdminCoreLanguagesResolver,
-    UpdateAdminCoreLanguageService,
-    UpdateAdminCoreLanguagesResolver,
   ],
 })
 export class AdminLanguagesModule {}
diff --git a/packages/backend/src/core/admin/languages/update/dto/update.args.ts b/packages/backend/src/core/admin/languages/update/dto/update.args.ts
deleted file mode 100644
index e74bf857b..000000000
--- a/packages/backend/src/core/admin/languages/update/dto/update.args.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FileUpload, GraphQLUpload } from '@/graphql-upload';
-import { ArgsType, Field } from '@nestjs/graphql';
-
-@ArgsType()
-export class UpdateCoreAdminLanguagesArgs {
-  @Field(() => String)
-  code: string;
-
-  @Field(() => GraphQLUpload)
-  file: Promise<FileUpload>;
-}
diff --git a/packages/backend/src/core/admin/languages/update/update.resolver.ts b/packages/backend/src/core/admin/languages/update/update.resolver.ts
deleted file mode 100644
index d68fe8d5f..000000000
--- a/packages/backend/src/core/admin/languages/update/update.resolver.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { AdminAuthGuards } from '@/utils';
-import { UseGuards } from '@nestjs/common';
-import { Args, Mutation, Resolver } from '@nestjs/graphql';
-
-import { UpdateCoreAdminLanguagesArgs } from './dto/update.args';
-import { UpdateAdminCoreLanguageService } from './update.service';
-
-@Resolver()
-export class UpdateAdminCoreLanguagesResolver {
-  constructor(private readonly service: UpdateAdminCoreLanguageService) {}
-
-  @Mutation(() => String)
-  @UseGuards(AdminAuthGuards)
-  async admin__core_languages__update(
-    @Args() args: UpdateCoreAdminLanguagesArgs,
-  ): Promise<string> {
-    return this.service.update(args);
-  }
-}
diff --git a/packages/backend/src/core/admin/languages/update/update.service.ts b/packages/backend/src/core/admin/languages/update/update.service.ts
deleted file mode 100644
index 6f3dbafdf..000000000
--- a/packages/backend/src/core/admin/languages/update/update.service.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { core_languages } from '@/database/schema/languages';
-import { NotFoundError } from '@/errors';
-import { generateRandomString } from '@/functions/generate-random-string';
-import { InternalDatabaseService } from '@/utils/database/internal_database.service';
-import { Injectable } from '@nestjs/common';
-import { eq } from 'drizzle-orm';
-import * as fs from 'fs';
-import { join } from 'path';
-import * as tar from 'tar';
-
-import { ABSOLUTE_PATHS_BACKEND, currentUnixDate } from '../../../..';
-import { UpdateCoreAdminLanguagesArgs } from './dto/update.args';
-
-@Injectable()
-export class UpdateAdminCoreLanguageService {
-  constructor(private readonly databaseService: InternalDatabaseService) {}
-
-  async update({ code, file }: UpdateCoreAdminLanguagesArgs): Promise<string> {
-    const lang = await this.databaseService.db.query.core_languages.findFirst({
-      where: (table, { eq }) => eq(table.code, code),
-    });
-
-    if (!lang) {
-      throw new NotFoundError('Language');
-    }
-
-    // Unpack the file to the temp folder
-    const tgz = await file;
-    const tempNameFolder = `${code}-update--${generateRandomString(5)}-${currentUnixDate()}`;
-    const pathTemp = join(
-      ABSOLUTE_PATHS_BACKEND.uploads.temp,
-      'langs',
-      tempNameFolder,
-    );
-    if (!fs.existsSync(pathTemp)) {
-      fs.mkdirSync(pathTemp, { recursive: true });
-    }
-
-    await new Promise((resolve, reject) => {
-      tgz
-        .createReadStream()
-        .pipe(tar.extract({ C: pathTemp, strip: 1 }))
-        .on('error', function (err) {
-          throw new reject(err.message);
-        })
-        .on('finish', function () {
-          const plugins = fs
-            .readdirSync(pathTemp)
-            .map(fileName => fileName.replace('.json', ''));
-
-          plugins.forEach(plugin => {
-            // Check if the plugin exists
-            const path = ABSOLUTE_PATHS_BACKEND.plugin({ code: plugin })
-              .frontend.language;
-
-            if (!fs.existsSync(path)) {
-              return;
-            }
-
-            // Copy the file to the plugin folder
-            fs.copyFileSync(
-              join(pathTemp, `${plugin}.json`),
-              join(path, `${code}.json`),
-            );
-          });
-
-          // Remove the temp folder
-          fs.rmdirSync(pathTemp, { recursive: true });
-
-          resolve('success');
-        });
-    });
-
-    await this.databaseService.db
-      .update(core_languages)
-      .set({ updated: new Date() })
-      .where(eq(core_languages.code, code));
-
-    return 'Success!';
-  }
-}
diff --git a/packages/eslint-config-typescript-vitnode/eslint.shared.mjs b/packages/eslint-config-typescript-vitnode/eslint.shared.mjs
index e0e421999..d3819f089 100644
--- a/packages/eslint-config-typescript-vitnode/eslint.shared.mjs
+++ b/packages/eslint-config-typescript-vitnode/eslint.shared.mjs
@@ -23,6 +23,9 @@ export default [
   },
   {
     rules: {
+      'perfectionist/sort-intersection-types': 'warn',
+      'perfectionist/sort-interfaces': 'warn',
+      'perfectionist/sort-union-types': 'warn',
       'perfectionist/sort-object-types': 'warn',
       'perfectionist/sort-jsx-props': 'warn',
       'perfectionist/sort-imports': 'warn',
diff --git a/packages/frontend/src/components/form/auto-form.tsx b/packages/frontend/src/components/form/auto-form.tsx
index def10a353..8340feed3 100644
--- a/packages/frontend/src/components/form/auto-form.tsx
+++ b/packages/frontend/src/components/form/auto-form.tsx
@@ -1,33 +1,98 @@
 'use client';
 
-import { AutoFormObject } from '@/components/form/object';
 import { cn } from '@/helpers/classnames';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslations } from 'next-intl';
 import React from 'react';
-import { DefaultValues, useForm, UseFormReturn } from 'react-hook-form';
+import {
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+  useForm,
+  UseFormReturn,
+} from 'react-hook-form';
 import * as z from 'zod';
 
 import { Button } from '../ui/button';
-import { Form } from '../ui/form';
-import { Dependency, FieldConfig, ZodObjectOrWrapped } from './type';
-import { getDefaultValues, getObjectFormSchema } from './utils';
+import { Form, FormField } from '../ui/form';
+import resolveDependencies, {
+  Dependency,
+  getDefaultValues,
+  getObjectFormSchema,
+  zodToHtmlInputProps,
+} from './utils';
 
-export function AutoForm<T extends ZodObjectOrWrapped>({
-  formSchema,
-  fieldConfig,
-  dependencies,
+type Theme = 'horizontal' | 'vertical';
+
+export enum DependencyType {
+  DISABLES,
+  REQUIRES,
+  HIDES,
+  SETS_OPTIONS,
+}
+
+export interface AutoFormItemProps<T extends FieldValues> {
+  childComponent?: (props: {
+    field: ControllerRenderProps<T>;
+  }) => React.ReactNode;
+  className?: string;
+  componentProps?: Record<string, unknown>;
+  description: React.ReactNode | string | undefined;
+  field: ControllerRenderProps<T>;
+  isDisabled: boolean;
+  isRequired: boolean;
+  label: string | undefined;
+  overrideOptions: undefined | z.EnumValues;
+  shape: z.ZodAny;
+  theme: Theme;
+  zodInputProps: React.InputHTMLAttributes<
+    HTMLInputElement | HTMLTextAreaElement
+  >;
+}
+
+export const getShapeFromSchema = (
+  schema: z.ZodEffects<z.ZodObject<z.ZodRawShape>> | z.ZodObject<z.ZodRawShape>,
+  id: string,
+): null | z.ZodAny => {
+  if (schema._def.typeName === z.ZodFirstPartyTypeKind.ZodEffects) {
+    return schema._def.schema.shape[id] as z.ZodAny;
+  }
+
+  return (schema as z.ZodObject<z.ZodRawShape>).shape[id] as z.ZodAny;
+};
+
+export function AutoForm<
+  T extends
+    | z.ZodEffects<z.ZodObject<z.ZodRawShape>>
+    | z.ZodObject<z.ZodRawShape>,
+>({
   onSubmit: onSubmitProp,
-  submitButton,
-  children,
+  formSchema,
   className,
   theme = 'vertical',
+  fields,
+  dependencies = [],
+  submitButton,
+  children,
   onValuesChange,
 }: {
   children?: React.ReactNode;
   className?: string;
   dependencies?: Dependency<z.infer<T>>[];
-  fieldConfig: FieldConfig<z.infer<T>>;
+  fields: {
+    childComponent?: (props: {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      field: ControllerRenderProps<Record<string, any>>;
+    }) => React.ReactNode;
+    className?: string;
+    component: (
+      props: AutoFormItemProps<Record<string, unknown>>,
+    ) => JSX.Element;
+    componentProps?: Record<string, unknown>;
+    description?: React.ReactNode | string;
+    id: FieldPath<z.infer<T>>;
+    label?: string;
+  }[];
   formSchema: T;
   onSubmit?: (
     values: z.infer<T>,
@@ -43,8 +108,7 @@ export function AutoForm<T extends ZodObjectOrWrapped>({
 }) {
   const t = useTranslations('core');
   const objectFormSchema = getObjectFormSchema(formSchema);
-  const defaultValues: DefaultValues<z.infer<typeof objectFormSchema>> | null =
-    getDefaultValues(objectFormSchema, fieldConfig);
+  const defaultValues = getDefaultValues(objectFormSchema);
 
   const form = useForm<z.infer<typeof objectFormSchema>>({
     resolver: zodResolver(formSchema),
@@ -54,6 +118,10 @@ export function AutoForm<T extends ZodObjectOrWrapped>({
   // valuesString is needed because form.watch() returns a new object every time
   const valuesString = JSON.stringify(values);
 
+  React.useEffect(() => {
+    onValuesChange?.(values);
+  }, [valuesString]);
+
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
     const parsedValues = formSchema.safeParse(values);
     if (parsedValues.success) {
@@ -61,13 +129,6 @@ export function AutoForm<T extends ZodObjectOrWrapped>({
     }
   };
 
-  React.useEffect(() => {
-    const parsedValues = formSchema.safeParse(values);
-    if (parsedValues.success) {
-      onValuesChange?.(parsedValues.data as z.infer<T>);
-    }
-  }, [valuesString]);
-
   return (
     <Form {...form}>
       <form
@@ -77,13 +138,53 @@ export function AutoForm<T extends ZodObjectOrWrapped>({
         })}
         onSubmit={form.handleSubmit(onSubmit)}
       >
-        <AutoFormObject
-          dependencies={dependencies}
-          fieldConfig={fieldConfig}
-          form={form}
-          schema={objectFormSchema}
-          theme={theme}
-        />
+        {fields.map(item => {
+          const { isHidden, isDisabled, isRequired, overrideOptions } =
+            resolveDependencies(dependencies, item.id, form.watch);
+          if (isHidden) return null;
+
+          let shape: null | z.ZodAny = null;
+          const ids = item.id.split('.');
+          for (const id of ids) {
+            shape = getShapeFromSchema(
+              shape
+                ? (shape as unknown as z.ZodObject<z.ZodRawShape>)
+                : formSchema,
+              id,
+            );
+          }
+
+          if (!shape) return null;
+          const zodInputProps = zodToHtmlInputProps(shape);
+
+          const Component = item.component;
+
+          return (
+            <FormField
+              control={form.control}
+              key={item.id}
+              name={item.id}
+              render={({ field }) => {
+                return (
+                  <Component
+                    childComponent={item.childComponent}
+                    className={item.className}
+                    componentProps={item.componentProps}
+                    description={item.description}
+                    field={field}
+                    isDisabled={isDisabled}
+                    isRequired={(isRequired || zodInputProps.required) ?? false}
+                    label={item.label}
+                    overrideOptions={overrideOptions}
+                    shape={shape}
+                    theme={theme}
+                    zodInputProps={zodInputProps}
+                  />
+                );
+              }}
+            />
+          );
+        })}
         {children}
         {submitButton ? (
           submitButton({
diff --git a/packages/frontend/src/components/form/fields/checkbox.tsx b/packages/frontend/src/components/form/fields/checkbox.tsx
index f7417a864..2b48bf35a 100644
--- a/packages/frontend/src/components/form/fields/checkbox.tsx
+++ b/packages/frontend/src/components/form/fields/checkbox.tsx
@@ -1,56 +1,75 @@
+'use client';
+
+import { Checkbox } from '@/components/ui/checkbox';
+import { FormControl, FormMessage } from '@/components/ui/form';
 import { cn } from '@/helpers/classnames';
+import { FieldValues } from 'react-hook-form';
 
-import { Checkbox } from '../../ui/checkbox';
-import { FormControl, FormMessage } from '../../ui/form';
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormCheckbox = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'value'>) => {
+export type AutoFormCheckboxProps = Omit<
+  React.ComponentProps<typeof Checkbox>,
+  'onChange' | 'value'
+>;
+
+export function AutoFormCheckbox<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormCheckboxProps;
+} & AutoFormItemProps<T>) {
   const value: boolean = field.value || false;
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
 
   return (
     <AutoFormWrapper
-      className={cn('flex items-start space-x-3 space-y-0', {
-        'rounded-md border p-4':
-          fieldConfigItem.label && fieldConfigItem.description,
-      })}
+      className={cn(
+        'flex items-start space-x-3 space-y-0',
+        {
+          'rounded-md border p-4': label && description,
+        },
+        className,
+      )}
       theme={theme}
     >
-      <ParentWrapper field={field}>
+      <AutoFormInputWrapper withChildren={!!ChildComponent}>
         <FormControl>
           <Checkbox
             checked={value}
-            disabled={isDisabled || props.disabled}
+            disabled={isDisabled || componentProps?.disabled}
             onCheckedChange={field.onChange}
-            {...props}
+            {...componentProps}
           />
         </FormControl>
-      </ParentWrapper>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
 
-      {(fieldConfigItem.label ?? fieldConfigItem.description) && (
+      {(label ?? description) && (
         <div className="space-y-1 leading-none">
-          {fieldConfigItem.label && (
+          {label && (
             <AutoFormLabel
-              description={fieldConfigItem.description}
+              description={description}
               isRequired={isRequired}
-              label={fieldConfigItem.label}
+              label={label}
               theme={theme}
             />
           )}
-          {fieldConfigItem.description && theme === 'vertical' && (
-            <AutoFormTooltip description={fieldConfigItem.description} />
+          {description && theme === 'vertical' && (
+            <AutoFormTooltip description={description} />
           )}
         </div>
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/color-picker.tsx b/packages/frontend/src/components/form/fields/color-picker.tsx
new file mode 100644
index 000000000..08a954a23
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/color-picker.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { ColorPicker } from '@/components/ui/color-picker';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { FieldValues } from 'react-hook-form';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
+import { AutoFormWrapper } from './common/wrapper';
+
+export type AutoFormColorPickerProps = Omit<
+  React.ComponentProps<typeof ColorPicker>,
+  'onChange' | 'required' | 'value'
+>;
+
+export function AutoFormColorPicker<T extends FieldValues>({
+  field,
+  zodInputProps,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormColorPickerProps;
+} & AutoFormItemProps<T>) {
+  const value = field.value || '';
+
+  return (
+    <AutoFormWrapper theme={theme}>
+      {label && (
+        <AutoFormLabel
+          description={description}
+          isRequired={isRequired}
+          label={label}
+          theme={theme}
+        />
+      )}
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
+        <FormControl>
+          <ColorPicker
+            required={isRequired}
+            {...field}
+            {...zodInputProps}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
+            onChange={field.onChange as (value: null | string) => void}
+            value={value}
+          />
+        </FormControl>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
+      )}
+      <FormMessage />
+    </AutoFormWrapper>
+  );
+}
diff --git a/packages/frontend/src/components/form/fields/color.tsx b/packages/frontend/src/components/form/fields/color.tsx
deleted file mode 100644
index c50eaa956..000000000
--- a/packages/frontend/src/components/form/fields/color.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { ColorPicker } from '@/components/ui/color-picker';
-import { FormControl, FormMessage } from '@/components/ui/form';
-
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-
-export const AutoFormColor = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<
-    React.ComponentProps<typeof ColorPicker>,
-    'onChange' | 'required' | 'value'
-  >) => {
-  const value = field.value || '';
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
-  return (
-    <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
-        <AutoFormLabel
-          description={fieldConfigItem.description}
-          isRequired={isRequired}
-          label={fieldConfigItem.label}
-          theme={theme}
-        />
-      )}
-      <ParentWrapper field={field}>
-        <FormControl>
-          <ColorPicker
-            required={isRequired}
-            {...field}
-            {...props}
-            disabled={isDisabled || props.disabled}
-            value={value}
-          />
-        </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
-      )}
-      <FormMessage />
-    </AutoFormWrapper>
-  );
-};
diff --git a/packages/frontend/src/components/form/fields/combobox.tsx b/packages/frontend/src/components/form/fields/combobox.tsx
index e9e1747b4..379a75544 100644
--- a/packages/frontend/src/components/form/fields/combobox.tsx
+++ b/packages/frontend/src/components/form/fields/combobox.tsx
@@ -1,10 +1,7 @@
-import { cn } from '@/helpers/classnames';
-import { Check, ChevronsUpDown } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import React from 'react';
-import * as z from 'zod';
+'use client';
 
-import { Button } from '../../ui/button';
+import { getBaseSchema } from '@/components/form/utils';
+import { Button } from '@/components/ui/button';
 import {
   Command,
   CommandEmpty,
@@ -12,41 +9,52 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-} from '../../ui/command';
-import { FormControl, FormMessage } from '../../ui/form';
-import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
-import { AutoFormInputComponentProps } from '../type';
-import { getBaseSchema } from '../utils';
-import { DefaultParent } from './common/children';
+} from '@/components/ui/command';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { cn } from '@/helpers/classnames';
+import { Check, ChevronsUpDownIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
+import * as z from 'zod';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormCombobox = ({
-  autoFormProps: {
-    isRequired,
-    fieldConfigItem,
-    zodItem,
-    field,
-    theme,
-    isDisabled,
-  },
-  labels,
-  placeholderSearchInput,
-  multiple,
-  ...props
-}: {
+export type AutoFormComboboxProps = {
   labels?: Record<string, JSX.Element | string>;
   multiple?: boolean;
   placeholderSearchInput?: string;
-} & AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof Button>, 'role' | 'variant'>) => {
+} & Omit<React.ComponentProps<typeof Button>, 'role' | 'variant'>;
+
+export function AutoFormCombobox<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  shape,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormComboboxProps;
+} & AutoFormItemProps<T>) {
   const t = useTranslations('core');
   const [open, setOpen] = React.useState(false);
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const baseValues = (getBaseSchema(zodItem, true) as unknown as z.ZodEnum<any>)
-    ._def.values;
+  const value: string | string[] | undefined = field.value;
+  const baseValues = (
+    getBaseSchema(shape, true) as unknown as z.ZodEnum<[string, ...string[]]>
+  )._def.values;
 
   let values: [string, string][] = [];
   if (!Array.isArray(baseValues)) {
@@ -56,15 +64,15 @@ export const AutoFormCombobox = ({
   }
 
   const buttonPlaceholder = () => {
-    if (multiple && Array.isArray(field.value)) {
-      return t('selected', { count: field.value.length });
+    if (componentProps?.multiple && Array.isArray(value)) {
+      return t('selected', { count: value.length });
     }
 
-    const current = values.find(item => item[0] === field.value);
+    const current = values.find(item => item[0] === value);
     const item = current?.[1];
 
     if (current) {
-      return labels?.[current[0]] ?? item;
+      return componentProps?.labels?.[current[0]] ?? item;
     }
 
     return item ?? t('select_option');
@@ -72,96 +80,108 @@ export const AutoFormCombobox = ({
 
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
-        <Popover modal onOpenChange={setOpen} open={open}>
+
+      <Popover modal onOpenChange={setOpen} open={open}>
+        <AutoFormInputWrapper
+          className={className}
+          withChildren={!!ChildComponent}
+        >
           <PopoverTrigger asChild>
             <FormControl>
               <Button
-                ariaLabel={fieldConfigItem.label ?? ''}
-                className={cn('w-full justify-start', props.className)}
-                disabled={isDisabled || props.disabled}
+                ariaLabel={label ?? ''}
+                className={cn(
+                  'w-full justify-start',
+                  componentProps?.className,
+                )}
+                disabled={isDisabled || componentProps?.disabled}
                 role="combobox"
                 variant="outline"
-                {...props}
+                {...componentProps}
               >
                 {buttonPlaceholder()}
-                <ChevronsUpDown className="ml-auto size-4 shrink-0 opacity-50" />
+                <ChevronsUpDownIcon className="ml-auto size-4 shrink-0 opacity-50" />
               </Button>
             </FormControl>
           </PopoverTrigger>
-          <PopoverContent className="p-0">
-            <Command>
-              <CommandInput
-                placeholder={
-                  placeholderSearchInput
-                    ? placeholderSearchInput
-                    : t('search_placeholder')
-                }
-              />
-              <CommandList>
-                <CommandEmpty>{t('no_results')}</CommandEmpty>
-                <CommandGroup>
-                  {values.map(([value, labelFromProps]) => {
-                    const label = labels?.[value] ?? labelFromProps;
-                    const currentArrayValues = Array.isArray(field.value)
-                      ? field.value
-                      : field.value
-                        ? [field.value]
-                        : [];
+          {ChildComponent && <ChildComponent field={field} />}
+        </AutoFormInputWrapper>
+        <PopoverContent className="p-0">
+          <Command>
+            <CommandInput
+              placeholder={
+                componentProps?.placeholderSearchInput
+                  ? componentProps.placeholderSearchInput
+                  : t('search_placeholder')
+              }
+            />
+            <CommandList>
+              <CommandEmpty>{t('no_results')}</CommandEmpty>
+              <CommandGroup>
+                {values.map(([valueItem, labelFromProps]) => {
+                  const label =
+                    componentProps?.labels?.[valueItem] ?? labelFromProps;
+                  const currentArrayValues = Array.isArray(value)
+                    ? value
+                    : value
+                      ? [value]
+                      : [];
+
+                  return (
+                    <CommandItem
+                      key={valueItem}
+                      onSelect={() => {
+                        if (componentProps?.multiple) {
+                          field.onChange(
+                            currentArrayValues.includes(valueItem)
+                              ? currentArrayValues.filter(
+                                  el => el !== valueItem,
+                                )
+                              : [...currentArrayValues, valueItem],
+                          );
 
-                    return (
-                      <CommandItem
-                        key={value}
-                        onSelect={() => {
-                          if (multiple) {
-                            field.onChange(
-                              currentArrayValues.includes(value)
-                                ? currentArrayValues.filter(el => el !== value)
-                                : [...currentArrayValues, value],
-                            );
+                          return;
+                        }
 
-                            return;
-                          }
+                        field.onChange(valueItem);
+                        setOpen(false);
+                      }}
+                      value={labelFromProps}
+                    >
+                      <Check
+                        className={cn(
+                          'mr-2 size-4',
+                          (
+                            componentProps?.multiple
+                              ? currentArrayValues.includes(valueItem)
+                              : value === valueItem
+                          )
+                            ? 'opacity-100'
+                            : 'opacity-0',
+                        )}
+                      />
+                      {label}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
 
-                          field.onChange(value);
-                          setOpen(false);
-                        }}
-                        value={labelFromProps}
-                      >
-                        <Check
-                          className={cn(
-                            'mr-2 size-4',
-                            (
-                              multiple
-                                ? currentArrayValues.includes(value)
-                                : value === field.value
-                            )
-                              ? 'opacity-100'
-                              : 'opacity-0',
-                          )}
-                        />
-                        {label}
-                      </CommandItem>
-                    );
-                  })}
-                </CommandGroup>
-              </CommandList>
-            </Command>
-          </PopoverContent>
-        </Popover>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/common/children.tsx b/packages/frontend/src/components/form/fields/common/children.tsx
deleted file mode 100644
index cb3a4f315..000000000
--- a/packages/frontend/src/components/form/fields/common/children.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const DefaultParent = ({ children }: { children: React.ReactNode }) => {
-  return <>{children}</>;
-};
diff --git a/packages/frontend/src/components/form/fields/common/input-wrapper.tsx b/packages/frontend/src/components/form/fields/common/input-wrapper.tsx
new file mode 100644
index 000000000..828df2b80
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/common/input-wrapper.tsx
@@ -0,0 +1,15 @@
+export const AutoFormInputWrapper = ({
+  withChildren,
+  className,
+  children,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  withChildren: boolean;
+}) => {
+  if (className || withChildren) {
+    return <div className={className}>{children}</div>;
+  }
+
+  return <>{children}</>;
+};
diff --git a/packages/frontend/src/components/form/fields/common/label.tsx b/packages/frontend/src/components/form/fields/common/label.tsx
index e6723451c..8e79e6977 100644
--- a/packages/frontend/src/components/form/fields/common/label.tsx
+++ b/packages/frontend/src/components/form/fields/common/label.tsx
@@ -1,8 +1,6 @@
 import { FormLabel } from '@/components/ui/form';
 import { cn } from '@/helpers/classnames';
 
-import { AutoFormInputComponentProps } from '../../type';
-
 export const AutoFormLabel = ({
   label,
   isRequired,
@@ -14,7 +12,7 @@ export const AutoFormLabel = ({
   description: React.ReactNode | undefined;
   isRequired: boolean;
   label: string;
-  theme: AutoFormInputComponentProps['autoFormProps']['theme'];
+  theme: 'horizontal' | 'vertical';
 }) => {
   return (
     <FormLabel
diff --git a/packages/frontend/src/components/form/fields/common/wrapper.tsx b/packages/frontend/src/components/form/fields/common/wrapper.tsx
index 96b799b77..d0b99497c 100644
--- a/packages/frontend/src/components/form/fields/common/wrapper.tsx
+++ b/packages/frontend/src/components/form/fields/common/wrapper.tsx
@@ -1,8 +1,6 @@
 import { FormItem } from '@/components/ui/form';
 import { cn } from '@/helpers/classnames';
 
-import { AutoFormInputComponentProps } from '../../type';
-
 export const AutoFormWrapper = ({
   children,
   className,
@@ -10,7 +8,7 @@ export const AutoFormWrapper = ({
 }: {
   children: React.ReactNode;
   className?: string;
-  theme: AutoFormInputComponentProps['autoFormProps']['theme'];
+  theme: 'horizontal' | 'vertical';
 }) => {
   return (
     <FormItem
diff --git a/packages/frontend/src/components/form/fields/date-picker.tsx b/packages/frontend/src/components/form/fields/date-picker.tsx
new file mode 100644
index 000000000..54b008268
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/date-picker.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import { DatePicker } from '@/components/ui/date-picker';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { FieldValues } from 'react-hook-form';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
+import { AutoFormWrapper } from './common/wrapper';
+
+export type AutoFormDatePickerProps = Omit<
+  React.ComponentProps<typeof DatePicker>,
+  'onChange' | 'value'
+>;
+
+export function AutoFormDatePicker<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormDatePickerProps;
+} & AutoFormItemProps<T>) {
+  return (
+    <AutoFormWrapper theme={theme}>
+      {label && (
+        <AutoFormLabel
+          description={description}
+          isRequired={isRequired}
+          label={label}
+          theme={theme}
+        />
+      )}
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
+        <FormControl>
+          <DatePicker
+            {...field}
+            {...componentProps}
+            className="flex"
+            disabled={isDisabled || componentProps?.disabled}
+          />
+        </FormControl>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
+      )}
+      <FormMessage />
+    </AutoFormWrapper>
+  );
+}
diff --git a/packages/frontend/src/components/form/fields/date.tsx b/packages/frontend/src/components/form/fields/date.tsx
deleted file mode 100644
index dc16ae1d8..000000000
--- a/packages/frontend/src/components/form/fields/date.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { DatePicker } from '@/components/ui/date-picker';
-import { FormControl, FormMessage } from '@/components/ui/form';
-
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-
-export const AutoFormDate = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof DatePicker>, 'onChange' | 'value'>) => {
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
-  return (
-    <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
-        <AutoFormLabel
-          description={fieldConfigItem.description}
-          isRequired={isRequired}
-          label={fieldConfigItem.label}
-          theme={theme}
-        />
-      )}
-      <ParentWrapper field={field}>
-        <FormControl>
-          <DatePicker
-            {...props}
-            {...field}
-            className="flex"
-            disabled={isDisabled || props.disabled}
-            value={field.value}
-          />
-        </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
-      )}
-      <FormMessage />
-    </AutoFormWrapper>
-  );
-};
diff --git a/packages/frontend/src/components/form/fields/file-input.tsx b/packages/frontend/src/components/form/fields/file-input.tsx
new file mode 100644
index 000000000..4b365366c
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/file-input.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import { FileInput } from '@/components/ui/file-input';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { FieldValues } from 'react-hook-form';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
+import { AutoFormWrapper } from './common/wrapper';
+
+export type AutoFormFileInputProps = Omit<
+  React.ComponentProps<typeof FileInput>,
+  'onChange' | 'value'
+>;
+
+export function AutoFormFileInput<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormFileInputProps;
+} & AutoFormItemProps<T>) {
+  return (
+    <AutoFormWrapper theme={theme}>
+      {label && (
+        <AutoFormLabel
+          description={description}
+          isRequired={isRequired}
+          label={label}
+          theme={theme}
+        />
+      )}
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
+        <FormControl>
+          <FileInput
+            required={isRequired}
+            {...field}
+            {...componentProps}
+            className="w-full"
+            disabled={isDisabled || componentProps?.disabled}
+          />
+        </FormControl>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
+      )}
+      <FormMessage />
+    </AutoFormWrapper>
+  );
+}
diff --git a/packages/frontend/src/components/form/fields/file.tsx b/packages/frontend/src/components/form/fields/file.tsx
deleted file mode 100644
index b6233cc4d..000000000
--- a/packages/frontend/src/components/form/fields/file.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { FileInput } from '@/components/ui/file-input';
-import { FormControl, FormMessage } from '@/components/ui/form';
-
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-
-export const AutoFormFile = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof FileInput>, 'onChange' | 'value'>) => {
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
-  return (
-    <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
-        <AutoFormLabel
-          description={fieldConfigItem.description}
-          isRequired={isRequired}
-          label={fieldConfigItem.label}
-          theme={theme}
-        />
-      )}
-      <ParentWrapper field={field}>
-        <FormControl>
-          <FileInput
-            {...field}
-            {...props}
-            disabled={isDisabled || props.disabled}
-          />
-        </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
-      )}
-      <FormMessage />
-    </AutoFormWrapper>
-  );
-};
diff --git a/packages/frontend/src/components/form/fields/icon-picker.tsx b/packages/frontend/src/components/form/fields/icon-picker.tsx
new file mode 100644
index 000000000..9e84445ea
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/icon-picker.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import { IconPicker } from '@/components/icon/picker/icon-picker';
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { FieldValues } from 'react-hook-form';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
+import { AutoFormWrapper } from './common/wrapper';
+
+export type AutoFormIconPickerProps = Omit<
+  React.ComponentProps<typeof IconPicker>,
+  'onChange' | 'value'
+>;
+
+export function AutoFormIconPicker<T extends FieldValues>({
+  field,
+  zodInputProps,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormIconPickerProps;
+} & AutoFormItemProps<T>) {
+  const value = field.value || '';
+
+  return (
+    <AutoFormWrapper theme={theme}>
+      {label && (
+        <AutoFormLabel
+          description={description}
+          isRequired={isRequired}
+          label={label}
+          theme={theme}
+        />
+      )}
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
+        <FormControl>
+          <IconPicker
+            required={isRequired}
+            {...field}
+            {...zodInputProps}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
+            onChange={field.onChange as (value?: string) => void}
+            value={value}
+          />
+        </FormControl>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
+      )}
+      <FormMessage />
+    </AutoFormWrapper>
+  );
+}
diff --git a/packages/frontend/src/components/form/fields/icon.tsx b/packages/frontend/src/components/form/fields/icon.tsx
deleted file mode 100644
index dd8020e57..000000000
--- a/packages/frontend/src/components/form/fields/icon.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { IconPicker } from '@/components/icon/picker/icon-picker';
-import { FormControl, FormMessage } from '@/components/ui/form';
-
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-
-export const AutoFormIcon = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof IconPicker>, 'onChange' | 'value'>) => {
-  const value = field.value || '';
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
-  return (
-    <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
-        <AutoFormLabel
-          description={fieldConfigItem.description}
-          isRequired={isRequired}
-          label={fieldConfigItem.label}
-          theme={theme}
-        />
-      )}
-      <ParentWrapper field={field}>
-        <FormControl>
-          <IconPicker
-            {...props}
-            {...field}
-            disabled={isDisabled || props.disabled}
-            value={value}
-          />
-        </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
-      )}
-      <FormMessage />
-    </AutoFormWrapper>
-  );
-};
diff --git a/packages/frontend/src/components/form/fields/input.tsx b/packages/frontend/src/components/form/fields/input.tsx
index 19bee81b0..1fc231ef9 100644
--- a/packages/frontend/src/components/form/fields/input.tsx
+++ b/packages/frontend/src/components/form/fields/input.tsx
@@ -1,44 +1,64 @@
+'use client';
+
 import { FormControl, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { FieldValues } from 'react-hook-form';
 
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormInput = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  React.InputHTMLAttributes<HTMLInputElement>) => {
-  const value = field.value || '';
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
+export type AutoFormInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'onChange' | 'value'
+>;
 
+export function AutoFormInput<T extends FieldValues>({
+  field,
+  zodInputProps,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormInputProps;
+} & AutoFormItemProps<T>) {
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <Input
-            {...props}
             {...field}
-            disabled={isDisabled || props.disabled}
-            value={props.value ?? value}
+            {...zodInputProps}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
           />
         </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/radio-group.tsx b/packages/frontend/src/components/form/fields/radio-group.tsx
index 5a5c5edbd..e4cfb5967 100644
--- a/packages/frontend/src/components/form/fields/radio-group.tsx
+++ b/packages/frontend/src/components/form/fields/radio-group.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { getBaseSchema } from '@/components/form/utils';
 import {
   FormControl,
   FormItem,
@@ -5,27 +8,17 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
 import * as z from 'zod';
 
-import { AutoFormInputComponentProps } from '../type';
-import { getBaseSchema } from '../utils';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormRadioGroup = ({
-  autoFormProps: {
-    isRequired,
-    fieldConfigItem,
-    zodItem,
-    field,
-    theme,
-    isDisabled,
-  },
-  labels,
-  ...props
-}: {
+export type AutoFormRadioGroupProps = {
   labels?: Record<
     string,
     {
@@ -33,11 +26,25 @@ export const AutoFormRadioGroup = ({
       title: string;
     }
   >;
-} & AutoFormInputComponentProps &
-  React.ComponentProps<typeof RadioGroup>) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def
-    .values;
+} & Omit<React.ComponentProps<typeof RadioGroup>, 'role' | 'variant'>;
+
+export function AutoFormRadioGroup<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  shape,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormRadioGroupProps;
+} & AutoFormItemProps<T>) {
+  const baseValues = (
+    getBaseSchema(shape, true) as unknown as z.ZodEnum<[string, ...string[]]>
+  )._def.values;
 
   let values: [string, string][] = [];
   if (!Array.isArray(baseValues)) {
@@ -46,30 +53,34 @@ export const AutoFormRadioGroup = ({
     values = baseValues.map(value => [value, value]);
   }
 
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <RadioGroup
             defaultValue={field.value}
-            disabled={isDisabled || props.disabled}
+            disabled={isDisabled || componentProps?.disabled}
             onValueChange={field.onChange}
-            {...props}
+            {...componentProps}
           >
             {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
             {values.map((value: any) => {
-              const label = labels?.[value[0]]?.title ?? value[1];
-              const description = labels?.[value[0]]?.description;
+              const label =
+                componentProps?.labels?.[value[0]]?.title ?? value[1];
+              const description =
+                componentProps?.labels?.[value[0]]?.description;
 
               return (
                 <FormItem
@@ -93,11 +104,13 @@ export const AutoFormRadioGroup = ({
             })}
           </RadioGroup>
         </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/select.tsx b/packages/frontend/src/components/form/fields/select.tsx
index 686a35f8d..efde663d6 100644
--- a/packages/frontend/src/components/form/fields/select.tsx
+++ b/packages/frontend/src/components/form/fields/select.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { getBaseSchema } from '@/components/form/utils';
 import { FormControl, FormMessage } from '@/components/ui/form';
 import {
   Select,
@@ -7,37 +10,39 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useTranslations } from 'next-intl';
+import React from 'react';
+import { FieldValues } from 'react-hook-form';
 import * as z from 'zod';
 
-import { AutoFormInputComponentProps } from '../type';
-import { getBaseSchema } from '../utils';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormSelect = ({
-  autoFormProps: {
-    isRequired,
-    fieldConfigItem,
-    zodItem,
-    field,
-    theme,
-    isDisabled,
-  },
-  labels,
-  placeholder,
-  ...props
-}: {
+export type AutoFormSelectProps = {
   labels?: Record<string, JSX.Element | string>;
   placeholder?: string;
-} & AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof Select>, 'onValueChange'>) => {
+} & Omit<React.ComponentProps<typeof Select>, 'onValueChange' | 'value'>;
+
+export function AutoFormSelect<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  shape,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormSelectProps;
+} & AutoFormItemProps<T>) {
   const t = useTranslations('core');
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const baseValues = (getBaseSchema(zodItem) as unknown as z.ZodEnum<any>)._def
-    .values;
+  const baseValues = (
+    getBaseSchema(shape, true) as unknown as z.ZodEnum<[string, ...string[]]>
+  )._def.values;
 
   let values: [string, string][] = [];
   if (!Array.isArray(baseValues)) {
@@ -51,7 +56,7 @@ export const AutoFormSelect = ({
     const item = current?.[1];
 
     if (current) {
-      return labels?.[current[0]] ?? item;
+      return componentProps?.labels?.[current[0]] ?? item;
     }
 
     return item ?? t('select_option');
@@ -59,30 +64,33 @@ export const AutoFormSelect = ({
 
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <Select
-            defaultValue={props.value ?? field.value}
-            disabled={isDisabled || props.disabled}
+            defaultValue={field.value}
+            disabled={isDisabled || componentProps?.disabled}
             onValueChange={field.onChange}
-            {...props}
           >
-            <SelectTrigger {...props}>
-              <SelectValue placeholder={placeholder}>
+            <SelectTrigger {...componentProps}>
+              <SelectValue placeholder={componentProps?.placeholder}>
                 {buttonPlaceholder()}
               </SelectValue>
             </SelectTrigger>
             <SelectContent>
               {values.map(([value, labelFromProps]) => {
-                const label = labels?.[value] ?? labelFromProps;
+                const label = componentProps?.labels?.[value] ?? labelFromProps;
 
                 return (
                   <SelectItem key={value} value={labelFromProps}>
@@ -93,11 +101,13 @@ export const AutoFormSelect = ({
             </SelectContent>
           </Select>
         </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/switch.tsx b/packages/frontend/src/components/form/fields/switch.tsx
index c99d13d1c..34bd20868 100644
--- a/packages/frontend/src/components/form/fields/switch.tsx
+++ b/packages/frontend/src/components/form/fields/switch.tsx
@@ -1,18 +1,35 @@
+'use client';
+
 import { FormControl, FormMessage } from '@/components/ui/form';
 import { Switch } from '@/components/ui/switch';
 import { cn } from '@/helpers/classnames';
+import { FieldValues } from 'react-hook-form';
 
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormSwitch = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps & React.ComponentProps<typeof Switch>) => {
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
+export type AutoFormSwitchProps = Omit<
+  React.ComponentProps<typeof Switch>,
+  'checked'
+>;
+
+export function AutoFormSwitch<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormSwitchProps;
+} & AutoFormItemProps<T>) {
+  const value: boolean = field.value || false;
 
   return (
     <AutoFormWrapper
@@ -23,32 +40,37 @@ export const AutoFormSwitch = ({
       theme={theme}
     >
       <div>
-        {fieldConfigItem.label && (
+        {label && (
           <AutoFormLabel
-            description={fieldConfigItem.description}
+            description={description}
             isRequired={isRequired}
-            label={fieldConfigItem.label}
+            label={label}
             theme={theme}
           />
         )}
-        {fieldConfigItem.description && theme === 'vertical' && (
-          <AutoFormTooltip description={fieldConfigItem.description} />
+        {description && theme === 'vertical' && (
+          <AutoFormTooltip description={description} />
         )}
         <FormMessage />
       </div>
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <Switch
-            checked={props.value ?? field.value}
+            checked={value}
             onCheckedChange={e => {
               field.onChange(e);
-              props.onCheckedChange?.(e);
+              componentProps?.onCheckedChange?.(e);
             }}
-            {...props}
-            disabled={isDisabled || props.disabled}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
           />
         </FormControl>
-      </ParentWrapper>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/tags-input.tsx b/packages/frontend/src/components/form/fields/tags-input.tsx
new file mode 100644
index 000000000..b4546e5df
--- /dev/null
+++ b/packages/frontend/src/components/form/fields/tags-input.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { FormControl, FormMessage } from '@/components/ui/form';
+import { TagInput } from '@/components/ui/tag-input';
+import { FieldValues } from 'react-hook-form';
+
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
+import { AutoFormLabel } from './common/label';
+import { AutoFormTooltip } from './common/tooltip';
+import { AutoFormWrapper } from './common/wrapper';
+
+export type AutoFormTagInputProps = Omit<
+  React.ComponentProps<typeof TagInput>,
+  'onChange' | 'value'
+>;
+
+export function AutoFormTagInput<T extends FieldValues>({
+  field,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormTagInputProps;
+} & AutoFormItemProps<T>) {
+  return (
+    <AutoFormWrapper theme={theme}>
+      {label && (
+        <AutoFormLabel
+          description={description}
+          isRequired={isRequired}
+          label={label}
+          theme={theme}
+        />
+      )}
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
+        <FormControl>
+          <TagInput
+            {...field}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
+          />
+        </FormControl>
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
+      )}
+      <FormMessage />
+    </AutoFormWrapper>
+  );
+}
diff --git a/packages/frontend/src/components/form/fields/tags.tsx b/packages/frontend/src/components/form/fields/tags.tsx
deleted file mode 100644
index dc1e1c601..000000000
--- a/packages/frontend/src/components/form/fields/tags.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { FormControl, FormMessage } from '@/components/ui/form';
-import { TagsInput } from '@/components/ui/tags-input';
-
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
-import { AutoFormLabel } from './common/label';
-import { AutoFormTooltip } from './common/tooltip';
-import { AutoFormWrapper } from './common/wrapper';
-
-export const AutoFormTags = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<React.ComponentProps<typeof TagsInput>, 'onChange'>) => {
-  const value = field.value || '';
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
-
-  return (
-    <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
-        <AutoFormLabel
-          description={fieldConfigItem.description}
-          isRequired={isRequired}
-          label={fieldConfigItem.label}
-          theme={theme}
-        />
-      )}
-      <ParentWrapper field={field}>
-        <FormControl>
-          <TagsInput
-            {...props}
-            {...field}
-            disabled={isDisabled || props.disabled}
-            value={props.value ?? value}
-          />
-        </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
-      )}
-      <FormMessage />
-    </AutoFormWrapper>
-  );
-};
diff --git a/packages/frontend/src/components/form/fields/text-language-input.tsx b/packages/frontend/src/components/form/fields/text-language-input.tsx
index 22a1905fe..83e396044 100644
--- a/packages/frontend/src/components/form/fields/text-language-input.tsx
+++ b/packages/frontend/src/components/form/fields/text-language-input.tsx
@@ -1,45 +1,67 @@
+'use client';
+
 import { FormControl, FormMessage } from '@/components/ui/form';
 import { TextLanguageInput } from '@/components/ui/text-language-input';
+import { TextLanguage } from '@/graphql/types';
+import { FieldValues } from 'react-hook-form';
 
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormTextLanguageInput = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  Omit<
-    React.ComponentProps<typeof TextLanguageInput>,
-    'onChange' | 'value'
-  >) => {
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
+export type AutoFormTextLanguageInputProps = Omit<
+  React.ComponentProps<typeof TextLanguageInput>,
+  'onChange' | 'value'
+>;
 
+export function AutoFormTextLanguageInput<T extends FieldValues>({
+  field,
+  zodInputProps,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormTextLanguageInputProps;
+} & AutoFormItemProps<T>) {
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <TextLanguageInput
             {...field}
-            {...props}
-            disabled={isDisabled || props.disabled}
+            {...zodInputProps}
+            {...componentProps}
+            disabled={isDisabled || componentProps?.disabled}
+            onChange={field.onChange as (value: TextLanguage[]) => void}
+            value={field.value as TextLanguage[]}
           />
         </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/fields/textarea.tsx b/packages/frontend/src/components/form/fields/textarea.tsx
index 908f20b55..a2b9d4ccb 100644
--- a/packages/frontend/src/components/form/fields/textarea.tsx
+++ b/packages/frontend/src/components/form/fields/textarea.tsx
@@ -1,45 +1,67 @@
+'use client';
+
 import { FormControl, FormMessage } from '@/components/ui/form';
 import { Textarea } from '@/components/ui/textarea';
+import { FieldValues } from 'react-hook-form';
 
-import { AutoFormInputComponentProps } from '../type';
-import { DefaultParent } from './common/children';
+import { AutoFormItemProps } from '../auto-form';
+import { AutoFormInputWrapper } from './common/input-wrapper';
 import { AutoFormLabel } from './common/label';
 import { AutoFormTooltip } from './common/tooltip';
 import { AutoFormWrapper } from './common/wrapper';
 
-export const AutoFormTextArea = ({
-  autoFormProps: { isRequired, fieldConfigItem, field, theme, isDisabled },
-  ...props
-}: AutoFormInputComponentProps &
-  React.InputHTMLAttributes<HTMLTextAreaElement>) => {
-  const value = field.value || '';
+export type AutoFormTextAreaProps = Omit<
+  React.InputHTMLAttributes<HTMLTextAreaElement>,
+  'onChange' | 'value'
+>;
 
-  const ParentWrapper = fieldConfigItem.renderParent ?? DefaultParent;
+export function AutoTextArea<T extends FieldValues>({
+  field,
+  zodInputProps,
+  label,
+  description,
+  isRequired,
+  theme,
+  isDisabled,
+  componentProps,
+  className,
+  childComponent: ChildComponent,
+}: {
+  componentProps?: AutoFormTextAreaProps;
+} & AutoFormItemProps<T>) {
+  const value = field.value || '';
 
   return (
     <AutoFormWrapper theme={theme}>
-      {fieldConfigItem.label && (
+      {label && (
         <AutoFormLabel
-          description={fieldConfigItem.description}
+          description={description}
           isRequired={isRequired}
-          label={fieldConfigItem.label}
+          label={label}
           theme={theme}
         />
       )}
-      <ParentWrapper field={field}>
+
+      <AutoFormInputWrapper
+        className={className}
+        withChildren={!!ChildComponent}
+      >
         <FormControl>
           <Textarea
             {...field}
-            value={props.value ?? value}
-            {...props}
-            disabled={isDisabled || props.disabled}
+            value={value}
+            {...componentProps}
+            {...zodInputProps}
+            disabled={isDisabled || componentProps?.disabled}
           />
         </FormControl>
-      </ParentWrapper>
-      {fieldConfigItem.description && theme === 'vertical' && (
-        <AutoFormTooltip description={fieldConfigItem.description} />
+        {ChildComponent && <ChildComponent field={field} />}
+      </AutoFormInputWrapper>
+
+      {description && theme === 'vertical' && (
+        <AutoFormTooltip description={description} />
       )}
       <FormMessage />
     </AutoFormWrapper>
   );
-};
+}
diff --git a/packages/frontend/src/components/form/object.tsx b/packages/frontend/src/components/form/object.tsx
deleted file mode 100644
index 6fc6874b9..000000000
--- a/packages/frontend/src/components/form/object.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useForm, useFormContext } from 'react-hook-form';
-import * as z from 'zod';
-
-import { FormField } from '../ui/form';
-import { Dependency, FieldConfig } from './type';
-import resolveDependencies, {
-  getBaseSchema,
-  getBaseType,
-  zodToHtmlInputProps,
-} from './utils';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function AutoFormObject<T extends z.ZodObject<any, any>>({
-  schema,
-  form,
-  fieldConfig,
-  path = [],
-  dependencies = [],
-  theme,
-}: {
-  dependencies?: Dependency<z.infer<T>>[];
-  fieldConfig: FieldConfig<z.infer<T>>;
-  form: ReturnType<typeof useForm>;
-  path?: string[];
-  schema: T | z.ZodEffects<T>;
-  theme: 'horizontal' | 'vertical';
-}) {
-  const { watch } = useFormContext();
-  const { shape } = getBaseSchema<T>(schema) ?? {};
-  if (!shape) return null;
-
-  return (
-    <>
-      {Object.keys(shape as object).map(name => {
-        let item = shape[name] as z.ZodAny;
-        const zodBaseType = getBaseType(item);
-        const key = [...path, name].join('.');
-
-        const {
-          isHidden,
-          isDisabled,
-          isRequired: isRequiredByDependency,
-          overrideOptions,
-        } = resolveDependencies(dependencies, key, watch);
-        if (isHidden) return null;
-
-        // Zod array or object
-        if (zodBaseType === 'ZodObject') {
-          return (
-            <AutoFormObject
-              dependencies={dependencies}
-              fieldConfig={
-                (fieldConfig[name] ?? {}) as FieldConfig<z.infer<typeof item>>
-              }
-              form={form}
-              key={name}
-              path={[...path, name]}
-              schema={item as unknown as T}
-              theme={theme}
-            />
-          );
-        }
-
-        const fieldConfigItem = fieldConfig[name];
-        if (!fieldConfigItem) return;
-
-        const zodInputProps = zodToHtmlInputProps(item);
-
-        if (overrideOptions) {
-          item = z.enum(overrideOptions) as unknown as z.ZodAny;
-        }
-
-        return (
-          <FormField
-            control={form.control}
-            key={name}
-            name={key}
-            render={({ field }) => {
-              const InputComponent = fieldConfigItem.fieldType;
-
-              if (
-                InputComponent === undefined ||
-                typeof InputComponent !== 'function'
-              ) {
-                return <></>;
-              }
-
-              return (
-                <InputComponent
-                  autoFormProps={{
-                    field,
-                    fieldConfigItem,
-                    isRequired:
-                      (isRequiredByDependency || zodInputProps.required) ??
-                      false,
-                    zodItem: item,
-                    theme,
-                    isDisabled,
-                  }}
-                  key={key}
-                  {...zodToHtmlInputProps(item)}
-                />
-              );
-            }}
-          />
-        );
-      })}
-    </>
-  );
-}
diff --git a/packages/frontend/src/components/form/type.ts b/packages/frontend/src/components/form/type.ts
deleted file mode 100644
index 7b858eff1..000000000
--- a/packages/frontend/src/components/form/type.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { ControllerRenderProps, FieldValues } from 'react-hook-form';
-import * as z from 'zod';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type ZodObjectOrWrapped = z.Schema<any, any>;
-
-export interface FieldRenderParentProps {
-  children: React.ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  field: ControllerRenderProps<FieldValues, any>;
-}
-
-export interface FieldConfigItem {
-  description?: React.ReactNode;
-  fieldType: (props: AutoFormInputComponentProps) => React.ReactNode;
-  label?: string;
-
-  renderParent?: (props: FieldRenderParentProps) => null | React.ReactElement;
-}
-
-export type FieldConfig<T extends FieldValues> = {
-  // If SchemaType.key is an object or array, create a nested FieldConfig, otherwise
-  [Key in keyof T]?: T[Key] extends object
-    ? FieldConfig<z.infer<T[Key]>>
-    : FieldConfigItem;
-};
-
-export enum DependencyType {
-  DISABLES,
-  REQUIRES,
-  HIDES,
-  SETS_OPTIONS,
-}
-
-interface BaseDependency<T extends FieldValues> {
-  sourceField: keyof T | string;
-  targetField: keyof T | string;
-  type: DependencyType;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  when: (sourceFieldValue: any, targetFieldValue: unknown) => boolean;
-}
-
-export type ValueDependency<T extends FieldValues> = {
-  type:
-    | DependencyType.DISABLES
-    | DependencyType.HIDES
-    | DependencyType.REQUIRES;
-} & BaseDependency<T>;
-
-export type EnumValues = readonly [string, ...string[]];
-
-export type OptionsDependency<T extends FieldValues> = {
-  // Partial array of values from sourceField that will trigger the dependency
-  options: EnumValues;
-
-  type: DependencyType.SETS_OPTIONS;
-} & BaseDependency<T>;
-
-export type Dependency<T extends FieldValues> =
-  | OptionsDependency<T>
-  | ValueDependency<T>;
-
-/**
- * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
- */
-export interface AutoFormInputComponentProps {
-  autoFormProps: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    field: ControllerRenderProps<FieldValues, any>;
-    fieldConfigItem: Omit<FieldConfigItem, 'fieldType'>;
-    isDisabled: boolean;
-    isRequired: boolean;
-    theme: 'horizontal' | 'vertical';
-    zodItem: z.ZodAny;
-  };
-}
diff --git a/packages/frontend/src/components/form/utils.ts b/packages/frontend/src/components/form/utils.ts
index 16fecbf42..29ab4ce66 100644
--- a/packages/frontend/src/components/form/utils.ts
+++ b/packages/frontend/src/components/form/utils.ts
@@ -1,13 +1,36 @@
 import { DefaultValues, FieldValues, UseFormWatch } from 'react-hook-form';
 import * as z from 'zod';
 
-import {
-  Dependency,
-  DependencyType,
-  EnumValues,
-  FieldConfig,
-  ZodObjectOrWrapped,
-} from './type';
+import { DependencyType } from './auto-form';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ZodObjectOrWrapped = z.Schema<any, any>;
+
+interface BaseDependency<T extends FieldValues> {
+  sourceField: keyof T | string;
+  targetField: keyof T | string;
+  type: DependencyType;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  when: (sourceFieldValue: any, targetFieldValue: unknown) => boolean;
+}
+
+export type ValueDependency<T extends FieldValues> = {
+  type:
+    | DependencyType.DISABLES
+    | DependencyType.HIDES
+    | DependencyType.REQUIRES;
+} & BaseDependency<T>;
+
+export type OptionsDependency<T extends FieldValues> = {
+  // Partial array of values from sourceField that will trigger the dependency
+  options: z.EnumValues;
+
+  type: DependencyType.SETS_OPTIONS;
+} & BaseDependency<T>;
+
+export type Dependency<T extends FieldValues> =
+  | OptionsDependency<T>
+  | ValueDependency<T>;
 
 export function getObjectFormSchema(
   schema: ZodObjectOrWrapped,
@@ -28,24 +51,22 @@ export function getObjectFormSchema(
  * Get the lowest level Zod type.
  * This will unpack optionals, refinements, etc.
  */
-export function getBaseSchema<
-  ChildType extends z.AnyZodObject | z.ZodAny = z.ZodAny,
->(
-  schema: ChildType | z.ZodEffects<ChildType>,
+export function getBaseSchema<T extends z.AnyZodObject | z.ZodAny = z.ZodAny>(
+  schema: T | z.ZodEffects<T>,
   isArray?: boolean,
-): ChildType | null {
+): null | T {
   if ('innerType' in schema._def) {
-    return getBaseSchema(schema._def.innerType as ChildType);
+    return getBaseSchema(schema._def.innerType as T, isArray);
   }
   if ('schema' in schema._def) {
-    return getBaseSchema(schema._def.schema);
+    return getBaseSchema(schema._def.schema, isArray);
   }
 
   if ('type' in schema._def && isArray) {
-    return getBaseSchema(schema._def.type as ChildType);
+    return getBaseSchema(schema._def.type as T, isArray);
   }
 
-  return schema as ChildType;
+  return schema as T;
 }
 
 /**
@@ -68,7 +89,7 @@ export function zodToHtmlInputProps(
     | z.ZodNumber
     | z.ZodOptional<z.ZodNumber | z.ZodString>
     | z.ZodString,
-): React.InputHTMLAttributes<HTMLInputElement> {
+): React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
   if (['ZodNullable', 'ZodOptional'].includes(schema._def.typeName as string)) {
     const typedSchema = schema as z.ZodOptional<z.ZodNumber | z.ZodString>;
 
@@ -122,17 +143,34 @@ export default function resolveDependencies<
   let isDisabled = false;
   let isHidden = false;
   let isRequired = false;
-  let overrideOptions: EnumValues | undefined;
-
-  const currentFieldValue = watch(currentFieldName as string);
+  let overrideOptions: undefined | z.EnumValues;
 
-  const currentFieldDependencies = dependencies.filter(
+  const currentFieldValue = watch(currentFieldName.toString());
+  let currentFieldDependencies: Dependency<SchemaType>[] = dependencies.filter(
     dependency => dependency.targetField === currentFieldName,
   );
 
+  // If the field has no dependencies, it's a top-level field. We need to check for nested dependencies.
+  if (!currentFieldDependencies.length) {
+    currentFieldName
+      .toString()
+      .split('.')
+      .reduce((acc, key) => {
+        const nextAcc = acc ? `${acc}.${key}` : key;
+        const nextFieldDependencies = dependencies.filter(
+          dependency => dependency.targetField === nextAcc,
+        );
+
+        if (nextFieldDependencies.length) {
+          currentFieldDependencies = nextFieldDependencies;
+        }
+
+        return nextAcc;
+      }, '');
+  }
+
   for (const dependency of currentFieldDependencies) {
     const watchedValue = watch(dependency.sourceField as string);
-
     const conditionMet = dependency.when(watchedValue, currentFieldValue);
 
     switch (dependency.type) {
@@ -205,7 +243,6 @@ export function getDefaultValueInZodStack(schema: z.ZodAny): any {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function getDefaultValues<Schema extends z.ZodObject<any, any>>(
   schema: Schema,
-  fieldConfig?: FieldConfig<z.infer<Schema>>,
 ) {
   const { shape } = schema;
   type DefaultValuesType = DefaultValues<Partial<z.infer<Schema>>>;
@@ -219,7 +256,6 @@ export function getDefaultValues<Schema extends z.ZodObject<any, any>>(
       const defaultItems = getDefaultValues(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         getBaseSchema(item) as unknown as z.ZodObject<any, any>,
-        fieldConfig?.[key] as FieldConfig<z.infer<Schema>>,
       );
 
       // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -234,14 +270,8 @@ export function getDefaultValues<Schema extends z.ZodObject<any, any>>(
         }
       }
     } else {
-      let defaultValue = getDefaultValueInZodStack(item);
-      if (
-        (defaultValue === null || defaultValue === '') &&
-        fieldConfig?.[key]
-      ) {
-        defaultValue = (fieldConfig[key] as unknown as { defaultValue: string })
-          .defaultValue;
-      }
+      const defaultValue = getDefaultValueInZodStack(item);
+
       if (defaultValue !== undefined) {
         defaultValues[key as keyof DefaultValuesType] = defaultValue;
       }
diff --git a/packages/frontend/src/components/ui/tags-input.tsx b/packages/frontend/src/components/ui/tag-input.tsx
similarity index 91%
rename from packages/frontend/src/components/ui/tags-input.tsx
rename to packages/frontend/src/components/ui/tag-input.tsx
index 72b7e53f9..da7b5b55a 100644
--- a/packages/frontend/src/components/ui/tags-input.tsx
+++ b/packages/frontend/src/components/ui/tag-input.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { badgeVariants } from './badge';
 import { Input } from './input';
 
-interface TagsInputItemProps {
+interface TagInputItemProps {
   id: number | string;
   value: string;
 }
@@ -17,28 +17,28 @@ interface Props
   className?: string;
   disabled?: boolean;
   onChange: (
-    value?: TagsInputItemProps | TagsInputItemProps[] | undefined,
+    value?: TagInputItemProps | TagInputItemProps[] | undefined,
   ) => void;
 }
 
 interface MultiProps extends Props {
   multiple?: true;
-  value?: TagsInputItemProps[] | undefined;
+  value?: TagInputItemProps[] | undefined;
 }
 
 interface SingleProps extends Props {
   multiple?: never;
-  value?: TagsInputItemProps | undefined;
+  value?: TagInputItemProps | undefined;
 }
 
-export const TagsInput = ({
+export const TagInput = ({
   multiple,
   onChange,
   value: valueFromProps,
   disabled,
   ...rest
 }: MultiProps | SingleProps) => {
-  const values: TagsInputItemProps[] = Array.isArray(valueFromProps)
+  const values: TagInputItemProps[] = Array.isArray(valueFromProps)
     ? valueFromProps
     : valueFromProps
       ? [valueFromProps]
diff --git a/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.generated.ts b/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.generated.ts
deleted file mode 100644
index adb7587ef..000000000
--- a/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.generated.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as Types from '../../../types';
-
-import gql from 'graphql-tag';
-export type Admin__Core_Languages__UpdateMutationVariables = Types.Exact<{
-  code: Types.Scalars['String']['input'];
-  file: Types.Scalars['Upload']['input'];
-}>;
-
-
-export type Admin__Core_Languages__UpdateMutation = { __typename?: 'Mutation', admin__core_languages__update: string };
-
-
-export const Admin__Core_Languages__Update = gql`
-    mutation Admin__core_languages__update($code: String!, $file: Upload!) {
-  admin__core_languages__update(code: $code, file: $file)
-}
-    `;
\ No newline at end of file
diff --git a/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.gql b/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.gql
deleted file mode 100644
index 1187372c0..000000000
--- a/packages/frontend/src/graphql/mutations/admin/languages/admin__core_languages__update.gql
+++ /dev/null
@@ -1,3 +0,0 @@
-mutation Admin__core_languages__update($code: String!, $file: Upload!) {
-  admin__core_languages__update(code: $code, file: $file)
-}
diff --git a/packages/frontend/src/graphql/types.ts b/packages/frontend/src/graphql/types.ts
index a51c740f2..390a34f02 100644
--- a/packages/frontend/src/graphql/types.ts
+++ b/packages/frontend/src/graphql/types.ts
@@ -260,7 +260,6 @@ export type Mutation = {
   admin__core_languages__delete: Scalars['String']['output'];
   admin__core_languages__download: Scalars['String']['output'];
   admin__core_languages__edit: ShowCoreLanguages;
-  admin__core_languages__update: Scalars['String']['output'];
   admin__core_main_settings__edit: EditAdminSettingsObj;
   admin__core_manifest_metadata__edit: ShowAdminManifestMetadataObj;
   admin__core_members__create: SignUpCoreSessionsObj;
@@ -382,12 +381,6 @@ export type MutationAdmin__Core_Languages__EditArgs = {
 };
 
 
-export type MutationAdmin__Core_Languages__UpdateArgs = {
-  code: Scalars['String']['input'];
-  file: Scalars['Upload']['input'];
-};
-
-
 export type MutationAdmin__Core_Main_Settings__EditArgs = {
   site_copyright: Array<TextLanguageInput>;
   site_description: Array<TextLanguageInput>;
diff --git a/packages/frontend/src/views/admin/views/core/langs/create-edit/create-edit.tsx b/packages/frontend/src/views/admin/views/core/langs/create-edit/create-edit.tsx
index 53af3e846..516ddaf1b 100644
--- a/packages/frontend/src/views/admin/views/core/langs/create-edit/create-edit.tsx
+++ b/packages/frontend/src/views/admin/views/core/langs/create-edit/create-edit.tsx
@@ -1,8 +1,10 @@
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormCombobox } from '@/components/form/fields/combobox';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
+import {
+  AutoFormCombobox,
+  AutoFormComboboxProps,
+} from '@/components/form/fields/combobox';
 import { AutoFormInput } from '@/components/form/fields/input';
 import { AutoFormSwitch } from '@/components/form/fields/switch';
-import { DependencyType } from '@/components/form/type';
 import { Button } from '@/components/ui/button';
 import {
   DialogDescription,
@@ -41,55 +43,62 @@ export const CreateEditLangAdmin = ({ data }: { data?: ShowCoreLanguages }) => {
             when: () => !!data,
           },
         ]}
-        fieldConfig={{
-          name: {
+        fields={[
+          {
+            id: 'name',
+            component: AutoFormInput,
             label: t('create.name.label'),
-            fieldType: props => (
-              <AutoFormInput
-                placeholder={t('create.name.placeholder')}
-                {...props}
-              />
-            ),
           },
-          timezone: {
+          {
+            id: 'timezone',
             label: t('create.timezone.label'),
-            fieldType: AutoFormCombobox,
+            component: AutoFormCombobox,
+            componentProps: {
+              labels: Object.fromEntries(
+                locales.map(item => [
+                  item.locale,
+                  `${item.name} - ${item.locale}`,
+                ]),
+              ),
+            } as AutoFormComboboxProps,
           },
-          locale: {
+          {
+            id: 'locale',
+            component: AutoFormCombobox,
             label: t('create.locale.label'),
-            fieldType: props => (
-              <AutoFormCombobox
-                {...props}
-                labels={Object.fromEntries(
-                  locales.map(item => [
-                    item.locale,
-                    `${item.name} - ${item.locale}`,
-                  ]),
-                )}
-              />
-            ),
+            componentProps: {
+              labels: Object.fromEntries(
+                locales.map(item => [
+                  item.locale,
+                  `${item.name} - ${item.locale}`,
+                ]),
+              ),
+            } as AutoFormComboboxProps,
           },
-          code: {
+          {
+            id: 'code',
+            component: AutoFormInput,
             label: t('create.code.label'),
-            fieldType: props => <AutoFormInput {...props} />,
-            description: t('create.code.desc'),
           },
-          time_24: {
+          {
+            id: 'time_24',
+            component: AutoFormSwitch,
             label: t('create.time_24.label'),
-            fieldType: props => <AutoFormSwitch {...props} />,
             description: t('create.time_24.desc'),
           },
-          allow_in_input: {
+          {
+            id: 'allow_in_input',
+            component: AutoFormSwitch,
             label: t('create.allow_in_input.label'),
-            fieldType: props => <AutoFormSwitch {...props} />,
             description: t('create.allow_in_input.desc'),
           },
-          default: {
+          {
+            id: 'default',
+            component: AutoFormSwitch,
             label: t('edit.default.label'),
-            fieldType: props => <AutoFormSwitch {...props} />,
             description: t('edit.default.desc'),
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/actions.tsx b/packages/frontend/src/views/admin/views/core/langs/table/actions/actions.tsx
index 164ba82fc..9fd3f90bb 100644
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/actions.tsx
+++ b/packages/frontend/src/views/admin/views/core/langs/table/actions/actions.tsx
@@ -6,20 +6,18 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { ShowCoreLanguages } from '@/graphql/types';
-import { ChevronDown, Trash2, Upload } from 'lucide-react';
+import { ChevronDown, Trash2 } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
 import React from 'react';
 
 import { DeleteActionsTableLangsCoreAdmin } from './delete/delete';
 import { DownloadActionsTableLangsCoreAdmin } from './download/download';
 import { EditActionsTableLangsCoreAdmin } from './edit';
-import { UpdateActionsTableLangsCoreAdmin } from './update/update';
 
 export const ActionsTableLangsCoreAdmin = (data: ShowCoreLanguages) => {
   const t = useTranslations('core');
   const locale = useLocale();
   const [isOpenDeleteDialog, setIsOpenDeleteDialog] = React.useState(false);
-  const [isOpenUploadDialog, setIsOpenUploadDialog] = React.useState(false);
 
   return (
     <>
@@ -34,13 +32,6 @@ export const ActionsTableLangsCoreAdmin = (data: ShowCoreLanguages) => {
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuItem
-              onClick={() => {
-                setIsOpenUploadDialog(true);
-              }}
-            >
-              <Upload /> {t('upload_new_version')}
-            </DropdownMenuItem>
             {!data.default && (
               <DropdownMenuItem
                 destructive
@@ -61,13 +52,6 @@ export const ActionsTableLangsCoreAdmin = (data: ShowCoreLanguages) => {
         setOpen={setIsOpenDeleteDialog}
         {...data}
       />
-      {!data.protected && (
-        <UpdateActionsTableLangsCoreAdmin
-          open={isOpenUploadDialog}
-          setOpen={setIsOpenUploadDialog}
-          {...data}
-        />
-      )}
     </>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/delete/content.tsx b/packages/frontend/src/views/admin/views/core/langs/table/actions/delete/content.tsx
index 5a8f831ce..6d340335f 100644
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/delete/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/langs/table/actions/delete/content.tsx
@@ -36,11 +36,12 @@ export const ContentDeleteActionsTableLangsCoreAdmin = ({
       </AlertDialogDescription>
 
       <AutoForm
-        fieldConfig={{
-          name: {
-            fieldType: AutoFormInput,
+        fields={[
+          {
+            id: 'name',
+            component: AutoFormInput,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/download/content.tsx b/packages/frontend/src/views/admin/views/core/langs/table/actions/download/content.tsx
index e99900ff5..1384be71d 100644
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/download/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/langs/table/actions/download/content.tsx
@@ -1,10 +1,9 @@
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormCombobox } from '@/components/form/fields/combobox';
-import { AutoFormSwitch } from '@/components/form/fields/switch';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
 import {
-  AutoFormInputComponentProps,
-  DependencyType,
-} from '@/components/form/type';
+  AutoFormCombobox,
+  AutoFormComboboxProps,
+} from '@/components/form/fields/combobox';
+import { AutoFormSwitch } from '@/components/form/fields/switch';
 import { Button } from '@/components/ui/button';
 import {
   DialogDescription,
@@ -47,31 +46,31 @@ export const ContentDownloadActionsTableLangsCoreAdmin = ({
             when: (provider: boolean) => !!provider,
           },
         ]}
-        fieldConfig={{
-          all: {
+        fields={[
+          {
+            id: 'all',
+            component: AutoFormSwitch,
             label: t('all.label'),
             description: t('all.desc'),
-            fieldType: AutoFormSwitch,
           },
-          plugins: {
+          {
+            id: 'plugins',
             label: t('plugins'),
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormCombobox
-                {...props}
-                labels={Object.fromEntries(
-                  plugins.map(plugin => [
-                    plugin.code,
-                    <div className="flex flex-wrap gap-2" key={plugin.code}>
-                      <span className="font-semibold">{plugin.name}</span>
-                      <span>{plugin.version}</span>
-                    </div>,
-                  ]),
-                )}
-                multiple
-              />
-            ),
+            component: AutoFormCombobox,
+            componentProps: {
+              labels: Object.fromEntries(
+                plugins.map(plugin => [
+                  plugin.code,
+                  <div className="flex flex-wrap gap-2" key={plugin.code}>
+                    <span className="font-semibold">{plugin.name}</span>
+                    <span>{plugin.version}</span>
+                  </div>,
+                ]),
+              ),
+              multiple: true,
+            } as AutoFormComboboxProps,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/content.tsx b/packages/frontend/src/views/admin/views/core/langs/table/actions/update/content.tsx
deleted file mode 100644
index 0478dc6fe..000000000
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/content.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormFile } from '@/components/form/fields/file';
-import { AutoFormInputComponentProps } from '@/components/form/type';
-import { Button } from '@/components/ui/button';
-import {
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { ShowCoreLanguages } from '@/graphql/types';
-import { useTranslations } from 'next-intl';
-
-import { useUpdateLangAdmin } from './hooks/use-update-lang-admin';
-
-export const ContentUpdateActionsTableLangsCoreAdmin = ({
-  code,
-  name,
-}: Pick<ShowCoreLanguages, 'code' | 'name'>) => {
-  const t = useTranslations('admin.core.langs.actions.update');
-  const { onSubmit, formSchema } = useUpdateLangAdmin({ code, name });
-
-  return (
-    <>
-      <DialogHeader>
-        <DialogTitle>{t('title', { code })}</DialogTitle>
-      </DialogHeader>
-
-      <AutoForm
-        fieldConfig={{
-          lang_file: {
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormFile
-                acceptExtensions={['tgz']}
-                className="mt-5"
-                maxFileSizeInMb={0}
-                showInfo
-                {...props}
-              />
-            ),
-          },
-        }}
-        formSchema={formSchema}
-        onSubmit={onSubmit}
-        submitButton={props => (
-          <DialogFooter>
-            <Button {...props}>{t('submit')}</Button>
-          </DialogFooter>
-        )}
-      />
-    </>
-  );
-};
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/mutation-api.ts b/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/mutation-api.ts
deleted file mode 100644
index 886051a08..000000000
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/mutation-api.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-'use server';
-
-import { fetcher } from '@/graphql/fetcher';
-import {
-  Admin__Core_Languages__Update,
-  Admin__Core_Languages__UpdateMutation,
-  Admin__Core_Languages__UpdateMutationVariables,
-} from '@/graphql/mutations/admin/languages/admin__core_languages__update.generated';
-import { revalidatePath } from 'next/cache';
-
-export const mutationApi = async (formData: FormData) => {
-  const files = formData.get('file') as File;
-  const code = formData.get('code') as string;
-
-  try {
-    await fetcher<
-      Admin__Core_Languages__UpdateMutation,
-      Omit<Admin__Core_Languages__UpdateMutationVariables, 'file'>
-    >({
-      query: Admin__Core_Languages__Update,
-      files: [
-        {
-          files,
-          variable: 'file',
-        },
-      ],
-      variables: {
-        code,
-      },
-    });
-  } catch (error) {
-    const e = error as Error;
-
-    return { error: e.message };
-  }
-
-  revalidatePath('/', 'layout');
-};
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/use-update-lang-admin.ts b/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/use-update-lang-admin.ts
deleted file mode 100644
index e0e14081a..000000000
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/hooks/use-update-lang-admin.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useDialog } from '@/components/ui/dialog';
-import { ShowCoreLanguages } from '@/graphql/types';
-import { zodFile } from '@/helpers/zod';
-import { useTranslations } from 'next-intl';
-import { toast } from 'sonner';
-import * as z from 'zod';
-
-import { mutationApi } from './mutation-api';
-
-export const useUpdateLangAdmin = ({
-  code,
-  name,
-}: Pick<ShowCoreLanguages, 'code' | 'name'>) => {
-  const t = useTranslations('admin.core.langs.actions.update');
-  const tCore = useTranslations('core');
-  const { setOpen } = useDialog();
-  const formSchema = z.object({
-    lang_file: zodFile,
-  });
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    if (!(values.lang_file instanceof File)) return;
-
-    const formData = new FormData();
-    formData.append('file', values.lang_file);
-    formData.append('code', code);
-    const mutation = await mutationApi(formData);
-    if (mutation?.error) {
-      toast.error(tCore('errors.title'), {
-        description: tCore('errors.internal_server_error'),
-      });
-
-      return;
-    }
-
-    setOpen?.(false);
-    toast.success(t('success'), {
-      description: name,
-    });
-  };
-
-  return { onSubmit, formSchema };
-};
diff --git a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/update.tsx b/packages/frontend/src/views/admin/views/core/langs/table/actions/update/update.tsx
deleted file mode 100644
index 640c2e332..000000000
--- a/packages/frontend/src/views/admin/views/core/langs/table/actions/update/update.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Dialog, DialogContent } from '@/components/ui/dialog';
-import { Loader } from '@/components/ui/loader';
-import { ShowCoreLanguages } from '@/graphql/types';
-import React from 'react';
-
-const Content = React.lazy(async () =>
-  import('./content').then(module => ({
-    default: module.ContentUpdateActionsTableLangsCoreAdmin,
-  })),
-);
-
-interface Props extends Pick<ShowCoreLanguages, 'code' | 'name'> {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-}
-
-export const UpdateActionsTableLangsCoreAdmin = ({
-  open,
-  setOpen,
-  ...props
-}: Props) => {
-  return (
-    <Dialog onOpenChange={setOpen} open={open}>
-      <DialogContent>
-        <React.Suspense fallback={<Loader />}>
-          <Content {...props} />
-        </React.Suspense>
-      </DialogContent>
-    </Dialog>
-  );
-};
diff --git a/packages/frontend/src/views/admin/views/core/plugins/actions/create/form.tsx b/packages/frontend/src/views/admin/views/core/plugins/actions/create/form.tsx
index 44b9a06c6..4dfea984f 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/actions/create/form.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/actions/create/form.tsx
@@ -1,5 +1,8 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormInput } from '@/components/form/fields/input';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { ShowAdminPlugins } from '@/graphql/types';
 import { useTranslations } from 'next-intl';
 
@@ -20,39 +23,51 @@ export const FormCreateEditPluginAdmin = ({
   return (
     <AutoForm
       className={className}
-      fieldConfig={{
-        name: {
+      fields={[
+        {
+          id: 'name',
+          component: AutoFormInput,
           label: t('create.name.label'),
-          description: t('create.name.desc'),
-          fieldType: AutoFormInput,
         },
-        description: {
+        {
+          id: 'description',
+          component: AutoFormInput,
           label: t('create.description.label'),
-          fieldType: AutoFormInput,
         },
-        code: {
+        {
+          id: 'code',
+          component: AutoFormInput,
+          componentProps: {
+            placeholder: 'vitnode-plugin-example',
+          } as AutoFormInputProps,
           label: t('create.code.label'),
           description: t('create.code.desc'),
-          fieldType: props => (
-            <AutoFormInput placeholder="vitnode-plugin-example" {...props} />
-          ),
         },
-        support_url: {
+        {
+          id: 'support_url',
+          component: AutoFormInput,
+          componentProps: {
+            type: 'url',
+          } as AutoFormInputProps,
           label: t('create.support_url.label'),
           description: t('create.support_url.desc'),
-          fieldType: props => <AutoFormInput type="url" {...props} />,
         },
-        author: {
-          label: 'Author',
-          description: 'The author of the plugin',
-          fieldType: AutoFormInput,
+        {
+          id: 'author',
+          component: AutoFormInput,
+          label: t('create.author.label'),
+          description: t('create.author.desc'),
         },
-        author_url: {
-          label: 'Author URL',
-          description: 'The URL of the author',
-          fieldType: props => <AutoFormInput type="url" {...props} />,
+        {
+          id: 'author_url',
+          component: AutoFormInput,
+          componentProps: {
+            type: 'url',
+          } as AutoFormInputProps,
+          label: t('create.author_url.label'),
+          description: t('create.author_url.desc'),
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       submitButton={submitButton}
diff --git a/packages/frontend/src/views/admin/views/core/plugins/upload/upload.tsx b/packages/frontend/src/views/admin/views/core/plugins/upload/upload.tsx
index 6f33f16b5..88fb463d4 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/upload/upload.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/upload/upload.tsx
@@ -1,6 +1,8 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormFile } from '@/components/form/fields/file';
-import { AutoFormInputComponentProps } from '@/components/form/type';
+import {
+  AutoFormFileInput,
+  AutoFormFileInputProps,
+} from '@/components/form/fields/file-input';
 import { Button } from '@/components/ui/button';
 import {
   DialogDescription,
@@ -29,18 +31,17 @@ export const UploadPluginAdmin = ({ data }: UploadPluginAdminProps) => {
       </DialogHeader>
 
       <AutoForm
-        fieldConfig={{
-          file: {
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormFile
-                acceptExtensions={['tgz']}
-                maxFileSizeInMb={0}
-                showInfo
-                {...props}
-              />
-            ),
+        fields={[
+          {
+            id: 'file',
+            component: AutoFormFileInput,
+            componentProps: {
+              acceptExtensions: ['tgz'],
+              maxFileSizeInMb: 0,
+              showInfo: true,
+            } as AutoFormFileInputProps,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/actions/download/content.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/actions/download/content.tsx
index cd267a31d..7c090219a 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/actions/download/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/layout/actions/download/content.tsx
@@ -1,7 +1,12 @@
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { AutoFormRadioGroup } from '@/components/form/fields/radio-group';
-import { DependencyType } from '@/components/form/type';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
+import {
+  AutoFormRadioGroup,
+  AutoFormRadioGroupProps,
+} from '@/components/form/fields/radio-group';
 import { Button } from '@/components/ui/button';
 import {
   DialogDescription,
@@ -58,33 +63,37 @@ export const ContentDownloadActionDevPluginAdmin = ({
             options: ['new_version'],
           },
         ]}
-        fieldConfig={{
-          type: {
-            fieldType: props => (
-              <AutoFormRadioGroup
-                {...props}
-                labels={{
-                  rebuild: {
-                    title: t('type.rebuild', {
-                      version: `${version} (${version_code})`,
-                    }),
-                  },
-                  new_version: {
-                    title: t('type.new_version'),
-                  },
-                }}
-              />
-            ),
+        fields={[
+          {
+            id: 'type',
+            component: AutoFormRadioGroup,
+            componentProps: {
+              labels: {
+                rebuild: {
+                  title: t('type.rebuild', {
+                    version: `${version} (${version_code})`,
+                  }),
+                },
+                new_version: {
+                  title: t('type.new_version'),
+                },
+              },
+            } as AutoFormRadioGroupProps,
           },
-          version: {
+          {
+            id: 'version',
             label: t('version.label'),
-            fieldType: AutoFormInput,
+            component: AutoFormInput,
           },
-          version_code: {
+          {
+            id: 'version_code',
             label: t('version_code.label'),
-            fieldType: props => <AutoFormInput type="number" {...props} />,
+            component: AutoFormInput,
+            componentProps: {
+              type: 'number',
+            } as AutoFormInputProps,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
index 68723cd6f..f181d3857 100644
--- a/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
+++ b/packages/frontend/src/views/admin/views/core/plugins/views/dev/nav/create-edit/create-edit.tsx
@@ -1,8 +1,11 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormIcon } from '@/components/form/fields/icon';
-import { AutoFormInput } from '@/components/form/fields/input';
+import { AutoFormIconPicker } from '@/components/form/fields/icon-picker';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { AutoFormSelect } from '@/components/form/fields/select';
-import { AutoFormTags } from '@/components/form/fields/tags';
+import { AutoFormTagInput } from '@/components/form/fields/tags-input';
 import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Admin__Core_Plugins__Nav__ShowQuery } from '@/graphql/queries/admin/plugins/dev/nav/admin__core_plugins__nav__show.generated';
 import { ShowAdminNavPluginsObj } from '@/graphql/types';
@@ -46,63 +49,69 @@ export const CreateEditNavDevPluginAdmin = ({
       </DialogHeader>
 
       <AutoForm
-        fieldConfig={{
-          code: {
+        fields={[
+          {
+            id: 'code',
             label: t('create.code.label'),
             description: t('create.code.desc'),
-            fieldType: AutoFormInput,
+            component: AutoFormInput,
           },
-          href: {
+          {
+            id: 'href',
             label: t('create.href.label'),
             description: t.rich('create.href.desc', {
               link: () => (
                 <span className="text-foreground font-bold">{`${code}/${values.parent_code !== 'null' ? `${values.parent_code}/` : ''}${removeSpecialCharacters(values.href ?? '')}`}</span>
               ),
             }),
-            fieldType: AutoFormInput,
+            component: AutoFormInput,
           },
-          parent_code: {
+          {
+            id: 'parent_code',
             label: t('create.parent.label'),
-            fieldType: props => (
-              <AutoFormSelect
-                {...props}
-                labels={{
-                  null: (
-                    <div className="flex flex-wrap items-center gap-2">
-                      <Ban className="text-muted-foreground size-4" />
-                      <span>{t('create.parent.null')}</span>
-                    </div>
-                  ),
-                  ...Object.fromEntries(
-                    dataFromSSR.map(nav => [
-                      nav.code,
-                      <div
-                        className="flex flex-wrap items-center gap-2"
-                        key={nav.code}
-                      >
-                        {nav.icon
-                          ? icons.find(icon => icon.id === nav.code)?.icon
-                          : null}
-                        {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
-                        {/* @ts-expect-error */}
-                        <span>{tPlugin(nav.code)}</span>
-                      </div>,
-                    ]),
-                  ),
-                }}
-              />
-            ),
+            component: AutoFormSelect,
+            componentProps: {
+              labels: {
+                null: (
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Ban className="text-muted-foreground size-4" />
+                    <span>{t('create.parent.null')}</span>
+                  </div>
+                ),
+                ...Object.fromEntries(
+                  dataFromSSR.map(nav => [
+                    nav.code,
+                    <div
+                      className="flex flex-wrap items-center gap-2"
+                      key={nav.code}
+                    >
+                      {nav.icon
+                        ? icons.find(icon => icon.id === nav.code)?.icon
+                        : null}
+                      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+                      {/* @ts-expect-error */}
+                      <span>{tPlugin(nav.code)}</span>
+                    </div>,
+                  ]),
+                ),
+              },
+            } as AutoFormInputProps,
           },
-          icon: {
+          {
+            id: 'icon',
             label: t('create.icon.label'),
-            fieldType: AutoFormIcon,
+            component: AutoFormIconPicker,
           },
-          keywords: {
+          {
+            id: 'keywords',
             label: t('create.keywords.label'),
             description: t('create.keywords.desc'),
-            fieldType: props => <AutoFormTags {...props} multiple />,
+            component: AutoFormTagInput,
+            componentProps: {
+              multiple: true,
+            } as AutoFormInputProps,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         onValuesChange={setValues}
diff --git a/packages/frontend/src/views/admin/views/core/settings/authorization/content.tsx b/packages/frontend/src/views/admin/views/core/settings/authorization/content.tsx
index 3622fcdde..6fe2c22c8 100644
--- a/packages/frontend/src/views/admin/views/core/settings/authorization/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/authorization/content.tsx
@@ -15,13 +15,14 @@ export const ContentAuthorizationSettingsCoreAdmin = (
 
   return (
     <AutoForm
-      fieldConfig={{
-        force_login: {
+      fields={[
+        {
+          id: 'force_login',
+          component: AutoFormSwitch,
           label: t('force_login.title'),
-          fieldType: AutoFormSwitch,
           description: t('force_login.desc'),
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       theme="horizontal"
diff --git a/packages/frontend/src/views/admin/views/core/settings/email/actions/testing/content.tsx b/packages/frontend/src/views/admin/views/core/settings/email/actions/testing/content.tsx
index 97075864c..2e7648134 100644
--- a/packages/frontend/src/views/admin/views/core/settings/email/actions/testing/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/email/actions/testing/content.tsx
@@ -1,6 +1,9 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { AutoFormTextArea } from '@/components/form/fields/textarea';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
+import { AutoTextArea } from '@/components/form/fields/textarea';
 import { Button } from '@/components/ui/button';
 import {
   DialogFooter,
@@ -22,24 +25,30 @@ export const ContentTestingActionEmailSettingsAdmin = () => {
       </DialogHeader>
 
       <AutoForm
-        fieldConfig={{
-          from: {
-            label: t('from'),
-            fieldType: props => <AutoFormInput type="email" {...props} />,
+        fields={[
+          {
+            id: 'from',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'email',
+            } as AutoFormInputProps,
           },
-          to: {
-            label: t('to'),
-            fieldType: props => <AutoFormInput type="email" {...props} />,
+          {
+            id: 'to',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'email',
+            } as AutoFormInputProps,
           },
-          subject: {
-            label: t('subject'),
-            fieldType: AutoFormInput,
+          {
+            id: 'subject',
+            component: AutoFormInput,
           },
-          message: {
-            label: t('message'),
-            fieldType: AutoFormTextArea,
+          {
+            id: 'message',
+            component: AutoTextArea,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/core/settings/email/content.tsx b/packages/frontend/src/views/admin/views/core/settings/email/content.tsx
index 7b8390c18..b3cdc5769 100644
--- a/packages/frontend/src/views/admin/views/core/settings/email/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/email/content.tsx
@@ -1,16 +1,20 @@
 'use client';
 
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormColor } from '@/components/form/fields/color';
-import { AutoFormFile } from '@/components/form/fields/file';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { AutoFormRadioGroup } from '@/components/form/fields/radio-group';
-import { AutoFormSwitch } from '@/components/form/fields/switch';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
+import { AutoFormColorPicker } from '@/components/form/fields/color-picker';
+import {
+  AutoFormFileInput,
+  AutoFormFileInputProps,
+} from '@/components/form/fields/file-input';
 import {
-  AutoFormInputComponentProps,
-  DependencyType,
-} from '@/components/form/type';
-import { Separator } from '@/components/ui/separator';
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
+import {
+  AutoFormRadioGroup,
+  AutoFormRadioGroupProps,
+} from '@/components/form/fields/radio-group';
+import { AutoFormSwitch } from '@/components/form/fields/switch';
 import { Admin__Core_Email_Settings__ShowQuery } from '@/graphql/queries/admin/settings/admin__core_email_settings__show.generated';
 import { Link } from '@/navigation';
 import { SquareArrowOutUpRight } from 'lucide-react';
@@ -25,92 +29,200 @@ export const ContentEmailSettingsAdmin = (
   const { onSubmit, formSchema } = useEmailSettingsFormAdmin(props);
 
   return (
-    <AutoForm
-      dependencies={[
-        {
-          sourceField: 'provider',
-          type: DependencyType.HIDES,
-          targetField: 'smtp',
-          when: (provider: string) => provider !== 'smtp',
-        },
-        {
-          sourceField: 'provider',
-          type: DependencyType.HIDES,
-          targetField: 'resend_key',
-          when: (provider: string) => provider !== 'resend',
-        },
-      ]}
-      fieldConfig={{
-        color_primary: {
-          label: t('color_primary'),
-          fieldType: AutoFormColor,
-        },
-        logo: {
-          label: t('logo'),
-          fieldType: props => (
-            <AutoFormFile
-              accept="image/png, image/gif, image/jpeg"
-              acceptExtensions={['png', 'jpg', 'gif']}
-              maxFileSizeInMb={2}
-              showInfo
-              {...props}
-            />
-          ),
-        },
-        provider: {
-          label: t('provider.title'),
-          fieldType: props => (
-            <>
-              <div className="w-full space-y-2">
-                <Separator />
-              </div>
-
-              <AutoFormRadioGroup
-                labels={{
-                  none: {
-                    title: t('provider.none'),
-                  },
-                  smtp: {
-                    title: t('provider.smtp'),
-                  },
-                  resend: {
-                    title: t('provider.resend'),
-                    description: t.rich('provider.resend_desc', {
-                      link: text => (
-                        <Link
-                          className="flex items-center gap-1"
-                          href="https://resend.com/"
-                          rel="noopener noreferrer"
-                          target="_blank"
-                        >
-                          {text}
-                          <SquareArrowOutUpRight className="size-3" />
-                        </Link>
-                      ),
-                    }),
-                  },
-                }}
-                {...props}
-              />
-            </>
-          ),
-        },
-        smtp: {
-          host: {
+    <>
+      <AutoForm
+        dependencies={[
+          {
+            sourceField: 'provider',
+            type: DependencyType.HIDES,
+            targetField: 'smtp',
+            when: (provider: string) => provider !== 'smtp',
+          },
+          {
+            sourceField: 'provider',
+            type: DependencyType.HIDES,
+            targetField: 'resend_key',
+            when: (provider: string) => provider !== 'resend',
+          },
+        ]}
+        fields={[
+          {
+            id: 'color_primary',
+            component: AutoFormColorPicker,
+            label: t('color_primary'),
+          },
+          {
+            id: 'logo',
+            label: t('logo'),
+            component: AutoFormFileInput,
+            componentProps: {
+              accept: 'image/png, image/gif, image/jpeg',
+              acceptExtensions: ['png', 'jpg', 'gif'],
+              maxFileSizeInMb: 2,
+              showInfo: true,
+            } as AutoFormFileInputProps,
+          },
+          {
+            id: 'provider',
+            label: t('provider.title'),
+            component: AutoFormRadioGroup,
+            componentProps: {
+              labels: {
+                none: {
+                  title: t('provider.none'),
+                },
+                smtp: {
+                  title: t('provider.smtp'),
+                },
+                resend: {
+                  title: t('provider.resend'),
+                  description: t.rich('provider.resend_desc', {
+                    link: text => (
+                      <Link
+                        className="flex items-center gap-1"
+                        href="https://resend.com/"
+                        rel="noopener noreferrer"
+                        target="_blank"
+                      >
+                        {text}
+                        <SquareArrowOutUpRight className="size-3" />
+                      </Link>
+                    ),
+                  }),
+                },
+              },
+            } as AutoFormRadioGroupProps,
+          },
+          {
+            id: 'smtp.host',
+            component: AutoFormInput,
             label: t('smtp_host'),
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormInput placeholder="smtp.gmail.com" {...props} />
-            ),
+            componentProps: {
+              placeholder: 'smtp.gmail.com',
+            } as AutoFormInputProps,
           },
-          user: {
+          {
+            id: 'smtp.user',
+            component: AutoFormInput,
             label: t('smtp_user'),
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormInput placeholder="user" {...props} />
-            ),
+            componentProps: {
+              placeholder: 'user',
+            } as AutoFormInputProps,
           },
-          password: {
+          {
+            id: 'smtp.password',
+            component: AutoFormInput,
             label: t('smtp_password'),
-            fieldType: (props: AutoFormInputComponentProps) => (
+            componentProps: {
+              placeholder: '**********',
+              type: 'password',
+            } as AutoFormInputProps,
+          },
+          {
+            id: 'smtp.secure',
+            component: AutoFormSwitch,
+            label: t('smtp_secure'),
+          },
+          {
+            id: 'smtp.port',
+            component: AutoFormInput,
+            label: t('smtp_port'),
+            componentProps: {
+              type: 'number',
+            } as AutoFormInputProps,
+          },
+          {
+            id: 'resend_key',
+            component: AutoFormInput,
+            label: t('resend_key'),
+            componentProps: {
+              placeholder: '**********',
+              type: 'password',
+            } as AutoFormInputProps,
+          },
+        ]}
+        formSchema={formSchema}
+        onSubmit={onSubmit}
+        theme="horizontal"
+      />
+
+      {/* <AutoForm
+        fieldConfig={{
+          provider: {
+            label: t('provider.title'),
+            fieldType: props => (
+              <>
+                <div className="w-full space-y-2">
+                  <Separator />
+                </div>
+
+                <AutoFormRadioGroup
+                  labels={{
+                    none: {
+                      title: t('provider.none'),
+                    },
+                    smtp: {
+                      title: t('provider.smtp'),
+                    },
+                    resend: {
+                      title: t('provider.resend'),
+                      description: t.rich('provider.resend_desc', {
+                        link: text => (
+                          <Link
+                            className="flex items-center gap-1"
+                            href="https://resend.com/"
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            {text}
+                            <SquareArrowOutUpRight className="size-3" />
+                          </Link>
+                        ),
+                      }),
+                    },
+                  }}
+                  {...props}
+                />
+              </>
+            ),
+          },
+          smtp: {
+            host: {
+              label: t('smtp_host'),
+              fieldType: (props: AutoFormInputComponentProps) => (
+                <AutoFormInput placeholder="smtp.gmail.com" {...props} />
+              ),
+            },
+            user: {
+              label: t('smtp_user'),
+              fieldType: (props: AutoFormInputComponentProps) => (
+                <AutoFormInput placeholder="user" {...props} />
+              ),
+            },
+            password: {
+              label: t('smtp_password'),
+              fieldType: (props: AutoFormInputComponentProps) => (
+                <AutoFormInput
+                  placeholder="**********"
+                  type="password"
+                  {...props}
+                />
+              ),
+            },
+            secure: {
+              label: t('smtp_secure'),
+              fieldType: AutoFormSwitch,
+            },
+            port: {
+              label: t('smtp_port'),
+              fieldType: (props: AutoFormInputComponentProps) => (
+                <AutoFormInput type="number" {...props} />
+              ),
+            },
+          },
+          resend_key: {
+            label: t('resend_key'),
+            fieldType: props => (
               <AutoFormInput
                 placeholder="**********"
                 type="password"
@@ -118,31 +230,11 @@ export const ContentEmailSettingsAdmin = (
               />
             ),
           },
-          secure: {
-            label: t('smtp_secure'),
-            fieldType: AutoFormSwitch,
-          },
-          port: {
-            label: t('smtp_port'),
-            fieldType: (props: AutoFormInputComponentProps) => (
-              <AutoFormInput type="number" {...props} />
-            ),
-          },
-        },
-        resend_key: {
-          label: t('resend_key'),
-          fieldType: props => (
-            <AutoFormInput
-              placeholder="**********"
-              type="password"
-              {...props}
-            />
-          ),
-        },
-      }}
-      formSchema={formSchema}
-      onSubmit={onSubmit}
-      theme="horizontal"
-    />
+        }}
+        formSchema={formSchema}
+        onSubmit={onSubmit}
+        theme="horizontal"
+      /> */}
+    </>
   );
 };
diff --git a/packages/frontend/src/views/admin/views/core/settings/main/content.tsx b/packages/frontend/src/views/admin/views/core/settings/main/content.tsx
index 8726e74fe..9a16c0390 100644
--- a/packages/frontend/src/views/admin/views/core/settings/main/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/main/content.tsx
@@ -16,24 +16,28 @@ export const ContentMainSettingsCoreAdmin = (
 
   return (
     <AutoForm
-      fieldConfig={{
-        name: {
+      fields={[
+        {
+          id: 'name',
+          component: AutoFormInput,
           label: t('name.label'),
-          fieldType: AutoFormInput,
         },
-        short_name: {
+        {
+          id: 'short_name',
+          component: AutoFormInput,
           label: t('short_name.label'),
-          fieldType: AutoFormInput,
         },
-        description: {
+        {
+          id: 'description',
+          component: AutoFormTextLanguageInput,
           label: t('description.label'),
-          fieldType: AutoFormTextLanguageInput,
         },
-        copyright: {
+        {
+          id: 'copyright',
+          component: AutoFormTextLanguageInput,
           label: t('copyright.label'),
-          fieldType: AutoFormTextLanguageInput,
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       theme="horizontal"
diff --git a/packages/frontend/src/views/admin/views/core/settings/metadata/manifest/content.tsx b/packages/frontend/src/views/admin/views/core/settings/metadata/manifest/content.tsx
index ed6f32bb5..2df602f7a 100644
--- a/packages/frontend/src/views/admin/views/core/settings/metadata/manifest/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/metadata/manifest/content.tsx
@@ -1,10 +1,15 @@
 'use client';
 
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormColor } from '@/components/form/fields/color';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { AutoFormRadioGroup } from '@/components/form/fields/radio-group';
-import { FieldRenderParentProps } from '@/components/form/type';
+import { AutoFormColorPicker } from '@/components/form/fields/color-picker';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
+import {
+  AutoFormRadioGroup,
+  AutoFormRadioGroupProps,
+} from '@/components/form/fields/radio-group';
 import { Admin__Core_Manifest_Metadata__ShowQuery } from '@/graphql/queries/admin/settings/admin__core_manifest_metadata__show.generated';
 import { CONFIG } from '@/helpers/config-with-env';
 import { useTranslations } from 'next-intl';
@@ -19,54 +24,57 @@ export const ContentManifestMetadataCoreAdmin = (
 
   return (
     <AutoForm
-      fieldConfig={{
-        display: {
+      fields={[
+        {
+          id: 'display',
           label: t('display.label'),
-          fieldType: props => (
-            <AutoFormRadioGroup
-              {...props}
-              labels={{
-                fullscreen: {
-                  title: t('display.fullscreen.title'),
-                  description: t('display.fullscreen.desc'),
-                },
-                standalone: {
-                  title: t('display.standalone.title'),
-                  description: t('display.standalone.desc'),
-                },
-                'minimal-ui': {
-                  title: t('display.minimal-ui.title'),
-                  description: t('display.minimal-ui.desc'),
-                },
-                browser: {
-                  title: t('display.browser.title'),
-                  description: t('display.browser.desc'),
-                },
-              }}
-            />
-          ),
           description: t('display.desc'),
+          component: AutoFormRadioGroup,
+          componentProps: {
+            labels: {
+              fullscreen: {
+                title: t('display.fullscreen.title'),
+                description: t('display.fullscreen.desc'),
+              },
+              standalone: {
+                title: t('display.standalone.title'),
+                description: t('display.standalone.desc'),
+              },
+              'minimal-ui': {
+                title: t('display.minimal-ui.title'),
+                description: t('display.minimal-ui.desc'),
+              },
+              browser: {
+                title: t('display.browser.title'),
+                description: t('display.browser.desc'),
+              },
+            },
+          } as AutoFormRadioGroupProps,
         },
-        start_url: {
+        {
+          id: 'start_url',
+          component: AutoFormInput,
+          componentProps: {
+            className: 'w-64 order-2',
+          } as AutoFormInputProps,
           label: t('start_url.label'),
           description: t('start_url.desc'),
-          fieldType: props => <AutoFormInput className="w-64" {...props} />,
-          renderParent: ({ children }: FieldRenderParentProps) => (
-            <div className="flex flex-wrap items-center gap-1">
-              <span>{CONFIG.frontend_url}</span>
-              {children}
-            </div>
+          className: 'flex flex-wrap items-center gap-1',
+          childComponent: () => (
+            <span className="order-1">{CONFIG.frontend_url}</span>
           ),
         },
-        theme_color: {
+        {
+          id: 'theme_color',
           label: t('theme_color.label'),
-          fieldType: AutoFormColor,
+          component: AutoFormColorPicker,
         },
-        background_color: {
+        {
+          id: 'background_color',
           label: t('background_color.label'),
-          fieldType: AutoFormColor,
+          component: AutoFormColorPicker,
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       theme="horizontal"
diff --git a/packages/frontend/src/views/admin/views/core/settings/security/captcha/content.tsx b/packages/frontend/src/views/admin/views/core/settings/security/captcha/content.tsx
index b1b23efa0..25af8220e 100644
--- a/packages/frontend/src/views/admin/views/core/settings/security/captcha/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/settings/security/captcha/content.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { AutoForm } from '@/components/form/auto-form';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
 import { AutoFormInput } from '@/components/form/fields/input';
-import { AutoFormRadioGroup } from '@/components/form/fields/radio-group';
-import { DependencyType } from '@/components/form/type';
+import {
+  AutoFormRadioGroup,
+  AutoFormRadioGroupProps,
+} from '@/components/form/fields/radio-group';
 import { Admin__Core_Security__Captcha__ShowQuery } from '@/graphql/queries/admin/security/admin__core_security__captcha__show.generated';
 import { Link } from '@/navigation';
 import { SquareArrowOutUpRight } from 'lucide-react';
@@ -45,93 +47,94 @@ export const ContentCaptchaSecurityAdmin = (
           when: (type: string) => type !== 'none',
         },
       ]}
-      fieldConfig={{
-        type: {
+      fields={[
+        {
+          id: 'type',
           label: t('type.title'),
-          fieldType: props => (
-            <AutoFormRadioGroup
-              {...props}
-              labels={{
-                none: {
-                  title: t('type.none.title'),
-                },
-                cloudflare_turnstile: {
-                  title: t('type.cloudflare_turnstile.title'),
-                  description: t.rich(`type.cloudflare_turnstile.desc`, {
-                    link: text => (
-                      <Link
-                        className="flex items-center gap-1"
-                        href="https://www.cloudflare.com/products/turnstile/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {text}
-                        <SquareArrowOutUpRight className="size-3" />
-                      </Link>
-                    ),
-                  }),
-                },
-                recaptcha_v3: {
-                  title: t('type.recaptcha_v3'),
-                  description: t.rich(`type.recaptcha_desc`, {
-                    link: text => (
-                      <Link
-                        className="flex items-center gap-1"
-                        href="https://www.google.com/recaptcha/about/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {text}
-                        <SquareArrowOutUpRight className="size-3" />
-                      </Link>
-                    ),
-                  }),
-                },
-                recaptcha_v2_invisible: {
-                  title: t('type.recaptcha_v2_invisible'),
-                  description: t.rich(`type.recaptcha_desc`, {
-                    link: text => (
-                      <Link
-                        className="flex items-center gap-1"
-                        href="https://www.google.com/recaptcha/about/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {text}
-                        <SquareArrowOutUpRight className="size-3" />
-                      </Link>
-                    ),
-                  }),
-                },
-                recaptcha_v2_checkbox: {
-                  title: t('type.recaptcha_v2_checkbox'),
-                  description: t.rich(`type.recaptcha_desc`, {
-                    link: text => (
-                      <Link
-                        className="flex items-center gap-1"
-                        href="https://www.google.com/recaptcha/about/"
-                        rel="noopener noreferrer"
-                        target="_blank"
-                      >
-                        {text}
-                        <SquareArrowOutUpRight className="size-3" />
-                      </Link>
-                    ),
-                  }),
-                },
-              }}
-            />
-          ),
+          component: AutoFormRadioGroup,
+          componentProps: {
+            labels: {
+              none: {
+                title: t('type.none.title'),
+              },
+              cloudflare_turnstile: {
+                title: t('type.cloudflare_turnstile.title'),
+                description: t.rich(`type.cloudflare_turnstile.desc`, {
+                  link: text => (
+                    <Link
+                      className="flex items-center gap-1"
+                      href="https://www.cloudflare.com/products/turnstile/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {text}
+                      <SquareArrowOutUpRight className="size-3" />
+                    </Link>
+                  ),
+                }),
+              },
+              recaptcha_v3: {
+                title: t('type.recaptcha_v3'),
+                description: t.rich(`type.recaptcha_desc`, {
+                  link: text => (
+                    <Link
+                      className="flex items-center gap-1"
+                      href="https://www.google.com/recaptcha/about/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {text}
+                      <SquareArrowOutUpRight className="size-3" />
+                    </Link>
+                  ),
+                }),
+              },
+              recaptcha_v2_invisible: {
+                title: t('type.recaptcha_v2_invisible'),
+                description: t.rich(`type.recaptcha_desc`, {
+                  link: text => (
+                    <Link
+                      className="flex items-center gap-1"
+                      href="https://www.google.com/recaptcha/about/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {text}
+                      <SquareArrowOutUpRight className="size-3" />
+                    </Link>
+                  ),
+                }),
+              },
+              recaptcha_v2_checkbox: {
+                title: t('type.recaptcha_v2_checkbox'),
+                description: t.rich(`type.recaptcha_desc`, {
+                  link: text => (
+                    <Link
+                      className="flex items-center gap-1"
+                      href="https://www.google.com/recaptcha/about/"
+                      rel="noopener noreferrer"
+                      target="_blank"
+                    >
+                      {text}
+                      <SquareArrowOutUpRight className="size-3" />
+                    </Link>
+                  ),
+                }),
+              },
+            },
+          } as AutoFormRadioGroupProps,
         },
-        site_key: {
+        {
+          id: 'site_key',
           label: t('site_key'),
-          fieldType: AutoFormInput,
+          component: AutoFormInput,
         },
-        secret_key: {
+        {
+          id: 'secret_key',
           label: t('secret_key'),
-          fieldType: AutoFormInput,
+          component: AutoFormInput,
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       theme="horizontal"
diff --git a/packages/frontend/src/views/admin/views/core/styles/editor/content.tsx b/packages/frontend/src/views/admin/views/core/styles/editor/content.tsx
index 19840a751..0a7db4706 100644
--- a/packages/frontend/src/views/admin/views/core/styles/editor/content.tsx
+++ b/packages/frontend/src/views/admin/views/core/styles/editor/content.tsx
@@ -1,9 +1,11 @@
 'use client';
 
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormRadioGroup } from '@/components/form/fields/radio-group';
+import {
+  AutoFormRadioGroup,
+  AutoFormRadioGroupProps,
+} from '@/components/form/fields/radio-group';
 import { AutoFormSwitch } from '@/components/form/fields/switch';
-import { AutoFormInputComponentProps } from '@/components/form/type';
 import { Card } from '@/components/ui/card';
 import { Core_GlobalQuery } from '@/graphql/queries/core_global.generated';
 import { useTranslations } from 'next-intl';
@@ -19,37 +21,35 @@ export const ContentEditorAdmin = (
   return (
     <Card className="p-6">
       <AutoForm
-        fieldConfig={{
-          sticky: {
+        fields={[
+          {
+            id: 'sticky',
             label: t('sticky.label'),
             description: t('sticky.desc'),
-            fieldType: AutoFormSwitch,
+            component: AutoFormSwitch,
           },
-          files: {
-            allow_type: {
-              label: t('files.allow_type.title'),
-              fieldType: (props: AutoFormInputComponentProps) => (
-                <AutoFormRadioGroup
-                  labels={{
-                    all: {
-                      title: t('files.allow_type.all'),
-                    },
-                    images_videos: {
-                      title: t('files.allow_type.images_videos'),
-                    },
-                    images: {
-                      title: t('files.allow_type.images'),
-                    },
-                    none: {
-                      title: t('files.allow_type.none'),
-                    },
-                  }}
-                  {...props}
-                />
-              ),
-            },
+          {
+            id: 'files.allow_type',
+            label: t('files.allow_type.title'),
+            component: AutoFormRadioGroup,
+            componentProps: {
+              labels: {
+                all: {
+                  title: t('files.allow_type.all'),
+                },
+                images_videos: {
+                  title: t('files.allow_type.images_videos'),
+                },
+                images: {
+                  title: t('files.allow_type.images'),
+                },
+                none: {
+                  title: t('files.allow_type.none'),
+                },
+              },
+            } as AutoFormRadioGroupProps,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         theme="horizontal"
diff --git a/packages/frontend/src/views/admin/views/core/styles/nav/create-edit/create-edit.tsx b/packages/frontend/src/views/admin/views/core/styles/nav/create-edit/create-edit.tsx
index 776b53c29..ba3057850 100644
--- a/packages/frontend/src/views/admin/views/core/styles/nav/create-edit/create-edit.tsx
+++ b/packages/frontend/src/views/admin/views/core/styles/nav/create-edit/create-edit.tsx
@@ -1,5 +1,5 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormIcon } from '@/components/form/fields/icon';
+import { AutoFormIconPicker } from '@/components/form/fields/icon-picker';
 import { AutoFormInput } from '@/components/form/fields/input';
 import { AutoFormSwitch } from '@/components/form/fields/switch';
 import { AutoFormTextLanguageInput } from '@/components/form/fields/text-language-input';
@@ -28,30 +28,35 @@ export const ContentCreateEditNavAdmin = ({ data }: CreateEditNavAdminArgs) => {
       </DialogHeader>
 
       <AutoForm
-        fieldConfig={{
-          name: {
+        fields={[
+          {
+            id: 'name',
+            component: AutoFormTextLanguageInput,
             label: t('create.name.label'),
-            fieldType: AutoFormTextLanguageInput,
           },
-          description: {
+          {
+            id: 'description',
+            component: AutoFormTextLanguageInput,
             label: t('create.description.label'),
-            fieldType: AutoFormTextLanguageInput,
           },
-          href: {
+          {
+            id: 'href',
+            component: AutoFormInput,
             label: t('create.href.label'),
             description: t('create.href.desc'),
-            fieldType: AutoFormInput,
           },
-          icon: {
+          {
+            id: 'icon',
+            component: AutoFormIconPicker,
             label: t('create.icon.label'),
-            fieldType: AutoFormIcon,
           },
-          external: {
+          {
+            id: 'external',
+            component: AutoFormSwitch,
             label: t('create.external.label'),
             description: t('create.external.desc'),
-            fieldType: AutoFormSwitch,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/install/content/steps/account/account-install-configs-view.tsx b/packages/frontend/src/views/admin/views/install/content/steps/account/account-install-configs-view.tsx
index 60ea931f4..cb3cdbfcd 100644
--- a/packages/frontend/src/views/admin/views/install/content/steps/account/account-install-configs-view.tsx
+++ b/packages/frontend/src/views/admin/views/install/content/steps/account/account-install-configs-view.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormCheckbox } from '@/components/form/fields/checkbox';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { FieldRenderParentProps } from '@/components/form/type';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { removeSpecialCharacters } from '@/helpers/special-characters';
@@ -20,41 +21,46 @@ export const AccountInstallConfigsView = () => {
   return (
     <AutoForm
       className="max-w-2xl p-6 pt-0"
-      fieldConfig={{
-        name: {
+      fields={[
+        {
+          id: 'name',
           label: t('sign_up.form.name.label'),
-          fieldType: props => <AutoFormInput max={32} min={3} {...props} />,
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+          description: t('sign_up.form.name.desc'),
+          component: AutoFormInput,
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
+            if (!value.length) return null;
 
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <span className="text-muted-foreground mt-1 block text-sm">
-                    {t.rich('sign_up.form.name.your_id', {
-                      id: () => (
-                        <span className="text-foreground font-medium">
-                          {removeSpecialCharacters(value)}
-                        </span>
-                      ),
-                    })}
-                  </span>
-                )}
-              </>
+              <span className="text-muted-foreground mt-1 block max-w-md truncate text-sm">
+                {t.rich('sign_up.form.name.your_id', {
+                  id: () => (
+                    <span className="text-foreground font-medium">
+                      {removeSpecialCharacters(value)}
+                    </span>
+                  ),
+                })}
+              </span>
             );
           },
-          description: t('sign_up.form.name.desc'),
         },
-        email: {
+        {
+          id: 'email',
+          component: AutoFormInput,
+          componentProps: {
+            type: 'email',
+          } as AutoFormInputProps,
           label: t('sign_up.form.email.label'),
-          fieldType: props => <AutoFormInput type="email" {...props} />,
         },
-        password: {
+        {
+          id: 'password',
           label: t('sign_up.form.password.label'),
-          fieldType: props => <AutoFormInput type="password" {...props} />,
           description: t('sign_up.form.password.desc'),
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+          component: AutoFormInput,
+          componentProps: {
+            type: 'password',
+          } as AutoFormInputProps,
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
             const regexArray = [
               /^.{8,}$/, // Min 8 characters
@@ -68,35 +74,22 @@ export const AccountInstallConfigsView = () => {
               return acc + Number(regex.test(value));
             }, 0);
 
+            if (!value.length) return null;
+
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <div className="mt-1">
-                    <div className="mb-2 flex justify-between text-xs font-semibold">
-                      <span>{t('week')}</span>
-                      <span>{t('strong')}</span>
-                    </div>
-                    <Progress
-                      value={(100 / regexArray.length) * passRegexPassword}
-                    />
-                  </div>
-                )}
-              </>
+              <div className="mt-1">
+                <div className="mb-2 flex justify-between text-xs font-semibold">
+                  <span>{t('week')}</span>
+                  <span>{t('strong')}</span>
+                </div>
+                <Progress
+                  value={(100 / regexArray.length) * passRegexPassword}
+                />
+              </div>
             );
           },
         },
-        terms: {
-          label: t('sign_up.form.terms.label'),
-          description: t('sign_up.form.terms.desc'),
-          fieldType: AutoFormCheckbox,
-        },
-        newsletter: {
-          label: t('sign_up.form.newsletter.label'),
-          description: t('sign_up.form.newsletter.desc'),
-          fieldType: AutoFormCheckbox,
-        },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={async (val, form) => {
         await onSubmit(val, form);
diff --git a/packages/frontend/src/views/admin/views/install/content/steps/license/form-license-install-configs.tsx b/packages/frontend/src/views/admin/views/install/content/steps/license/form-license-install-configs.tsx
index 394160dcd..bdb3a1440 100644
--- a/packages/frontend/src/views/admin/views/install/content/steps/license/form-license-install-configs.tsx
+++ b/packages/frontend/src/views/admin/views/install/content/steps/license/form-license-install-configs.tsx
@@ -23,12 +23,12 @@ export const FormLicenseInstallConfigs = () => {
 
   return (
     <AutoForm
-      fieldConfig={{
-        agree: {
-          label: 'I agree to the terms of the license agreement.',
-          fieldType: AutoFormCheckbox,
+      fields={[
+        {
+          id: 'agree',
+          component: AutoFormCheckbox,
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       submitButton={props => <Button {...props}>Next step</Button>}
diff --git a/packages/frontend/src/views/admin/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx b/packages/frontend/src/views/admin/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
index f26da6f14..1c877fe61 100644
--- a/packages/frontend/src/views/admin/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
+++ b/packages/frontend/src/views/admin/views/members/groups/create-edit-form/create-edit-form-groups-members-admin.tsx
@@ -1,13 +1,11 @@
-import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormColor } from '@/components/form/fields/color';
-import { AutoFormInput } from '@/components/form/fields/input';
+import { AutoForm, DependencyType } from '@/components/form/auto-form';
+import { AutoFormColorPicker } from '@/components/form/fields/color-picker';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { AutoFormSwitch } from '@/components/form/fields/switch';
 import { AutoFormTextLanguageInput } from '@/components/form/fields/text-language-input';
-import {
-  AutoFormInputComponentProps,
-  DependencyType,
-  FieldRenderParentProps,
-} from '@/components/form/type';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import {
@@ -38,9 +36,10 @@ export const CreateEditFormGroupsMembersAdmin = ({
   const t = useTranslations('admin.members.groups');
   const tCore = useTranslations('core');
   const [activeTab, setActiveTab] = React.useState<TabsEnum>(TabsEnum.MAIN);
-  const { onSubmit, formSchema } = useCreateEditFormGroupsMembersAdmin({
-    data,
-  });
+  const { onSubmit, formSchema, setValues, values } =
+    useCreateEditFormGroupsMembersAdmin({
+      data,
+    });
   const { convertText } = useTextLang();
 
   return (
@@ -88,40 +87,36 @@ export const CreateEditFormGroupsMembersAdmin = ({
             when: () => activeTab !== TabsEnum.CONTENT,
           },
         ]}
-        fieldConfig={{
-          main: {
-            name: {
-              label: t('create_edit.name'),
-              fieldType: AutoFormTextLanguageInput,
-            },
-            color: {
-              label: t('create_edit.color'),
-              fieldType: AutoFormColor,
-            },
+        fields={[
+          {
+            id: 'main.name',
+            component: AutoFormTextLanguageInput,
+            label: t('create_edit.name'),
           },
-          content: {
-            files_allow_upload: {
-              label: t('create_edit.files.allow_upload'),
-              fieldType: AutoFormSwitch,
-            },
-            files_total_max_storage: {
-              label: t('create_edit.files.total_max_storage'),
-              fieldType: (props: AutoFormInputComponentProps) => {
-                const value = props.autoFormProps.field.value;
-
-                return (
-                  <AutoFormInput
-                    className="max-w-32"
-                    disabled={value === -1}
-                    type="number"
-                    value={value === -1 ? '' : value}
-                    {...props}
-                  />
-                );
-              },
-              renderParent: ({ children, field }: FieldRenderParentProps) => (
-                <div className="flex flex-wrap items-center gap-2">
-                  {children}
+          {
+            id: 'main.color',
+            component: AutoFormColorPicker,
+            label: t('create_edit.color'),
+          },
+          {
+            id: 'content.files_allow_upload',
+            component: AutoFormSwitch,
+            label: t('create_edit.files.allow_upload'),
+          },
+          {
+            id: 'content.files_total_max_storage',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'number',
+              className: 'max-w-32',
+              min: 0,
+              disabled: values.content?.files_total_max_storage === -1,
+            } as AutoFormInputProps,
+            label: t('create_edit.files.total_max_storage'),
+            className: 'flex flex-wrap items-center gap-2',
+            childComponent: ({ field }) => {
+              return (
+                <>
                   <span>{t('create_edit.in_kb')}</span>
                   <div className="flex shrink-0 items-center gap-2">
                     <span>{tCore('or')}</span>
@@ -130,7 +125,7 @@ export const CreateEditFormGroupsMembersAdmin = ({
                       id="content.files_total_max_storage.unlimited"
                       onClick={() => {
                         if (field.value === -1) {
-                          field.onChange(10000);
+                          field.onChange(0);
 
                           return;
                         }
@@ -142,14 +137,24 @@ export const CreateEditFormGroupsMembersAdmin = ({
                       {tCore('unlimited')}
                     </Label>
                   </div>
-                </div>
-              ),
+                </>
+              );
             },
-            files_max_storage_for_submit: {
-              label: t('create_edit.files.max_storage_for_submit.label'),
-              renderParent: ({ children, field }: FieldRenderParentProps) => (
-                <div className="flex flex-wrap items-center gap-2">
-                  {children}
+          },
+          {
+            id: 'content.files_max_storage_for_submit',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'number',
+              className: 'max-w-32',
+              min: 0,
+              disabled: values.content?.files_max_storage_for_submit === -1,
+            } as AutoFormInputProps,
+            label: t('create_edit.files.max_storage_for_submit.label'),
+            className: 'flex flex-wrap items-center gap-2',
+            childComponent: ({ field }) => {
+              return (
+                <>
                   <span>{t('create_edit.in_kb')}</span>
                   <div className="flex shrink-0 items-center gap-2">
                     <span>{tCore('or')}</span>
@@ -158,7 +163,7 @@ export const CreateEditFormGroupsMembersAdmin = ({
                       id="content.files_max_storage_for_submit.unlimited"
                       onClick={() => {
                         if (field.value === -1) {
-                          field.onChange(10000);
+                          field.onChange(0);
 
                           return;
                         }
@@ -170,26 +175,14 @@ export const CreateEditFormGroupsMembersAdmin = ({
                       {tCore('unlimited')}
                     </Label>
                   </div>
-                </div>
-              ),
-              fieldType: (props: AutoFormInputComponentProps) => {
-                const value = props.autoFormProps.field.value;
-
-                return (
-                  <AutoFormInput
-                    className="max-w-32"
-                    disabled={value === -1}
-                    type="number"
-                    value={value === -1 ? '' : value}
-                    {...props}
-                  />
-                );
-              },
+                </>
+              );
             },
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
+        onValuesChange={setValues}
         submitButton={props => (
           <DialogFooter>
             <Button {...props}>{tCore('save')}</Button>
diff --git a/packages/frontend/src/views/admin/views/members/groups/create-edit-form/hooks/use-create-edit-form-groups-members-admin.ts b/packages/frontend/src/views/admin/views/members/groups/create-edit-form/hooks/use-create-edit-form-groups-members-admin.ts
index 1dd1f4720..2e262bac5 100644
--- a/packages/frontend/src/views/admin/views/members/groups/create-edit-form/hooks/use-create-edit-form-groups-members-admin.ts
+++ b/packages/frontend/src/views/admin/views/members/groups/create-edit-form/hooks/use-create-edit-form-groups-members-admin.ts
@@ -5,6 +5,7 @@ import { zodLanguageInput } from '@/helpers/zod';
 import { useTextLang } from '@/hooks/use-text-lang';
 import { usePathname, useRouter } from '@/navigation';
 import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import * as z from 'zod';
 
@@ -18,6 +19,7 @@ export interface CreateEditFormGroupsMembersAdminArgs {
 export const useCreateEditFormGroupsMembersAdmin = ({
   data,
 }: CreateEditFormGroupsMembersAdminArgs) => {
+  const [values, setValues] = useState<Partial<z.infer<typeof formSchema>>>({});
   const t = useTranslations('admin.members.groups');
   const tCore = useTranslations('core');
   const { setOpen } = useDialog();
@@ -95,5 +97,5 @@ export const useCreateEditFormGroupsMembersAdmin = ({
     setOpen?.(false);
   };
 
-  return { formSchema, onSubmit };
+  return { formSchema, onSubmit, setValues, values };
 };
diff --git a/packages/frontend/src/views/admin/views/members/groups/table/actions/delete/content.tsx b/packages/frontend/src/views/admin/views/members/groups/table/actions/delete/content.tsx
index 9e3cff2e2..f77a01b72 100644
--- a/packages/frontend/src/views/admin/views/members/groups/table/actions/delete/content.tsx
+++ b/packages/frontend/src/views/admin/views/members/groups/table/actions/delete/content.tsx
@@ -26,25 +26,6 @@ export const ContentDeleteGroupsMembersDialogAdmin = ({
 
   return (
     <>
-      <AutoForm
-        fieldConfig={{
-          name: {
-            fieldType: AutoFormInput,
-          },
-        }}
-        formSchema={formSchema}
-        submitButton={props => (
-          <AlertDialogFooter className="mt-6">
-            <AlertDialogCancel asChild>
-              <Button type="button" variant="outline">
-                {tCore('cancel')}
-              </Button>
-            </AlertDialogCancel>
-            <Button {...props}>{t('submit')}</Button>
-          </AlertDialogFooter>
-        )}
-      />
-
       <AlertDialogHeader>
         <AlertDialogTitle>{tCore('are_you_absolutely_sure')}</AlertDialogTitle>
         <AlertDialogDescription className="flex flex-col gap-4">
@@ -62,17 +43,23 @@ export const ContentDeleteGroupsMembersDialogAdmin = ({
       </AlertDialogHeader>
 
       <AutoForm
-        fieldConfig={{
-          name: {
-            fieldType: AutoFormInput,
+        fields={[
+          {
+            id: 'name',
+            component: AutoFormInput,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
-          <Button {...props} variant="destructive">
-            {t('submit')}
-          </Button>
+          <AlertDialogFooter className="mt-6">
+            <AlertDialogCancel asChild>
+              <Button type="button" variant="outline">
+                {tCore('cancel')}
+              </Button>
+            </AlertDialogCancel>
+            <Button {...props}>{t('submit')}</Button>
+          </AlertDialogFooter>
         )}
       />
     </>
diff --git a/packages/frontend/src/views/admin/views/members/users/create/content.tsx b/packages/frontend/src/views/admin/views/members/users/create/content.tsx
index a204522d6..543dcc4d5 100644
--- a/packages/frontend/src/views/admin/views/members/users/create/content.tsx
+++ b/packages/frontend/src/views/admin/views/members/users/create/content.tsx
@@ -1,6 +1,8 @@
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { FieldRenderParentProps } from '@/components/form/type';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { removeSpecialCharacters } from '@/helpers/special-characters';
@@ -10,46 +12,50 @@ import { useCreateUserAdmin } from './hooks/use-create-user-admin';
 
 export const ContentCreateUserUsersMembersAdmin = () => {
   const { formSchema, onSubmit } = useCreateUserAdmin();
-
   const t = useTranslations('core');
 
   return (
     <AutoForm
-      fieldConfig={{
-        name: {
+      fields={[
+        {
+          id: 'name',
           label: t('sign_up.form.name.label'),
-          fieldType: props => <AutoFormInput max={32} min={3} {...props} />,
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+          description: t('sign_up.form.name.desc'),
+          component: AutoFormInput,
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
+            if (!value.length) return null;
 
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <span className="text-muted-foreground mt-1 block max-w-md truncate text-sm">
-                    {t.rich('sign_up.form.name.your_id', {
-                      id: () => (
-                        <span className="text-foreground font-medium">
-                          {removeSpecialCharacters(value)}
-                        </span>
-                      ),
-                    })}
-                  </span>
-                )}
-              </>
+              <span className="text-muted-foreground mt-1 block max-w-md truncate text-sm">
+                {t.rich('sign_up.form.name.your_id', {
+                  id: () => (
+                    <span className="text-foreground font-medium">
+                      {removeSpecialCharacters(value)}
+                    </span>
+                  ),
+                })}
+              </span>
             );
           },
-          description: t('sign_up.form.name.desc'),
         },
-        email: {
+        {
+          id: 'email',
+          component: AutoFormInput,
+          componentProps: {
+            type: 'email',
+          } as AutoFormInputProps,
           label: t('sign_up.form.email.label'),
-          fieldType: props => <AutoFormInput type="email" {...props} />,
         },
-        password: {
+        {
+          id: 'password',
           label: t('sign_up.form.password.label'),
-          fieldType: props => <AutoFormInput type="password" {...props} />,
           description: t('sign_up.form.password.desc'),
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+          component: AutoFormInput,
+          componentProps: {
+            type: 'password',
+          } as AutoFormInputProps,
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
             const regexArray = [
               /^.{8,}$/, // Min 8 characters
@@ -63,25 +69,22 @@ export const ContentCreateUserUsersMembersAdmin = () => {
               return acc + Number(regex.test(value));
             }, 0);
 
+            if (!value.length) return null;
+
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <div className="mt-1">
-                    <div className="mb-2 flex justify-between text-xs font-semibold">
-                      <span>{t('week')}</span>
-                      <span>{t('strong')}</span>
-                    </div>
-                    <Progress
-                      value={(100 / regexArray.length) * passRegexPassword}
-                    />
-                  </div>
-                )}
-              </>
+              <div className="mt-1">
+                <div className="mb-2 flex justify-between text-xs font-semibold">
+                  <span>{t('week')}</span>
+                  <span>{t('strong')}</span>
+                </div>
+                <Progress
+                  value={(100 / regexArray.length) * passRegexPassword}
+                />
+              </div>
             );
           },
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       submitButton={props => (
diff --git a/packages/frontend/src/views/admin/views/members/users/create/hooks/use-create-user-admin.ts b/packages/frontend/src/views/admin/views/members/users/create/hooks/use-create-user-admin.ts
index 10b3167a2..48f16f504 100644
--- a/packages/frontend/src/views/admin/views/members/users/create/hooks/use-create-user-admin.ts
+++ b/packages/frontend/src/views/admin/views/members/users/create/hooks/use-create-user-admin.ts
@@ -1,6 +1,7 @@
 import { useDialog } from '@/components/ui/dialog';
 import { nameRegex } from '@/hooks/core/sign/up/use-sign-up-view';
 import { useTranslations } from 'next-intl';
+import React from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { toast } from 'sonner';
 import * as z from 'zod';
@@ -9,6 +10,9 @@ import { mutationApi } from './mutation-api';
 
 export const useCreateUserAdmin = () => {
   const t = useTranslations('admin.members.users.create');
+  const [values, setValues] = React.useState<
+    Partial<z.infer<typeof formSchema>>
+  >({});
   const tCore = useTranslations('core');
   const { setOpen } = useDialog();
 
@@ -84,5 +88,5 @@ export const useCreateUserAdmin = () => {
     });
   };
 
-  return { formSchema, onSubmit };
+  return { formSchema, onSubmit, values, setValues };
 };
diff --git a/packages/frontend/src/views/admin/views/sign-in/form-sign-in-admin.tsx b/packages/frontend/src/views/admin/views/sign-in/form-sign-in-admin.tsx
index 18a50d724..7693c352b 100644
--- a/packages/frontend/src/views/admin/views/sign-in/form-sign-in-admin.tsx
+++ b/packages/frontend/src/views/admin/views/sign-in/form-sign-in-admin.tsx
@@ -1,7 +1,10 @@
 'use client';
 
 import { AutoForm } from '@/components/form/auto-form';
-import { AutoFormInput } from '@/components/form/fields/input';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { CardContent } from '@/components/ui/card';
@@ -24,16 +27,24 @@ export const FormSignInAdmin = () => {
       )}
 
       <AutoForm
-        fieldConfig={{
-          email: {
+        fields={[
+          {
+            id: 'email',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'email',
+            } as AutoFormInputProps,
             label: t('sign_in.form.email.label'),
-            fieldType: props => <AutoFormInput type="email" {...props} />,
           },
-          password: {
+          {
+            id: 'password',
+            component: AutoFormInput,
+            componentProps: {
+              type: 'password',
+            } as AutoFormInputProps,
             label: t('sign_in.form.password.label'),
-            fieldType: props => <AutoFormInput type="password" {...props} />,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/theme/views/auth/sign/in/form/form-sign-in.tsx b/packages/frontend/src/views/theme/views/auth/sign/in/form/form-sign-in.tsx
index 15dc33b8f..dfcdc1aa2 100644
--- a/packages/frontend/src/views/theme/views/auth/sign/in/form/form-sign-in.tsx
+++ b/packages/frontend/src/views/theme/views/auth/sign/in/form/form-sign-in.tsx
@@ -1,8 +1,13 @@
 'use client';
 
+// import { AutoFormCheckbox } from '@/components/form/fields/checkbox';
 import { AutoForm } from '@/components/form/auto-form';
 import { AutoFormCheckbox } from '@/components/form/fields/checkbox';
-import { AutoFormInput } from '@/components/form/fields/input';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
+// import { AutoFormInput } from '@/components/form/fields/input';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { useSignInView } from '@/hooks/core/sign/in/use-sign-in-view';
@@ -39,21 +44,30 @@ export const FormSignIn = () => {
       )}
 
       <AutoForm
-        fieldConfig={{
-          email: {
-            fieldType: props => <AutoFormInput type="email" {...props} />,
+        fields={[
+          {
+            id: 'email',
             label: t('sign_in.form.email.label'),
+            component: AutoFormInput,
+            componentProps: {
+              type: 'email',
+            } as AutoFormInputProps,
           },
-          password: {
-            fieldType: props => <AutoFormInput type="password" {...props} />,
+          {
+            id: 'password',
             label: t('sign_in.form.password.label'),
+            component: AutoFormInput,
+            componentProps: {
+              type: 'password',
+            } as AutoFormInputProps,
           },
-          remember: {
-            fieldType: AutoFormCheckbox,
+          {
+            id: 'remember',
             label: t('sign_in.form.remember.label'),
             description: t('sign_in.form.remember.desc'),
+            component: AutoFormCheckbox,
           },
-        }}
+        ]}
         formSchema={formSchema}
         onSubmit={onSubmit}
         submitButton={props => (
diff --git a/packages/frontend/src/views/theme/views/auth/sign/up/form/form-sign-up.tsx b/packages/frontend/src/views/theme/views/auth/sign/up/form/form-sign-up.tsx
index 9c85368f6..ceac94075 100644
--- a/packages/frontend/src/views/theme/views/auth/sign/up/form/form-sign-up.tsx
+++ b/packages/frontend/src/views/theme/views/auth/sign/up/form/form-sign-up.tsx
@@ -2,8 +2,10 @@
 
 import { AutoForm } from '@/components/form/auto-form';
 import { AutoFormCheckbox } from '@/components/form/fields/checkbox';
-import { AutoFormInput } from '@/components/form/fields/input';
-import { FieldRenderParentProps } from '@/components/form/type';
+import {
+  AutoFormInput,
+  AutoFormInputProps,
+} from '@/components/form/fields/input';
 import { Button } from '@/components/ui/button';
 import { Progress } from '@/components/ui/progress';
 import { removeSpecialCharacters } from '@/helpers/special-characters';
@@ -22,41 +24,45 @@ export const FormSignUp = () => {
 
   return (
     <AutoForm
-      fieldConfig={{
-        name: {
-          label: t('sign_up.form.name.label'),
-          fieldType: props => <AutoFormInput max={32} min={3} {...props} />,
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+      fields={[
+        {
+          id: 'name',
+          component: AutoFormInput,
+          description: t('sign_up.form.name.desc'),
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
+            if (!value.length) return null;
 
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <span className="text-muted-foreground mt-1 block text-sm">
-                    {t.rich('sign_up.form.name.your_id', {
-                      id: () => (
-                        <span className="text-foreground font-medium">
-                          {removeSpecialCharacters(value)}
-                        </span>
-                      ),
-                    })}
-                  </span>
-                )}
-              </>
+              <span className="text-muted-foreground mt-1 block max-w-md truncate text-sm">
+                {t.rich('sign_up.form.name.your_id', {
+                  id: () => (
+                    <span className="text-foreground font-medium">
+                      {removeSpecialCharacters(value)}
+                    </span>
+                  ),
+                })}
+              </span>
             );
           },
-          description: t('sign_up.form.name.desc'),
         },
-        email: {
+        {
+          id: 'email',
+          component: AutoFormInput,
+          componentProps: {
+            type: 'email',
+          } as AutoFormInputProps,
           label: t('sign_up.form.email.label'),
-          fieldType: props => <AutoFormInput type="email" {...props} />,
         },
-        password: {
+        {
+          id: 'password',
           label: t('sign_up.form.password.label'),
-          fieldType: props => <AutoFormInput type="password" {...props} />,
           description: t('sign_up.form.password.desc'),
-          renderParent: ({ children, field }: FieldRenderParentProps) => {
+          component: AutoFormInput,
+          componentProps: {
+            type: 'password',
+          } as AutoFormInputProps,
+          childComponent: ({ field }) => {
             const value: string = field.value ?? '';
             const regexArray = [
               /^.{8,}$/, // Min 8 characters
@@ -70,35 +76,34 @@ export const FormSignUp = () => {
               return acc + Number(regex.test(value));
             }, 0);
 
+            if (!value.length) return null;
+
             return (
-              <>
-                {children}
-                {value.length > 0 && (
-                  <div className="mt-1">
-                    <div className="mb-2 flex justify-between text-xs font-semibold">
-                      <span>{t('week')}</span>
-                      <span>{t('strong')}</span>
-                    </div>
-                    <Progress
-                      value={(100 / regexArray.length) * passRegexPassword}
-                    />
-                  </div>
-                )}
-              </>
+              <div className="mt-1">
+                <div className="mb-2 flex justify-between text-xs font-semibold">
+                  <span>{t('week')}</span>
+                  <span>{t('strong')}</span>
+                </div>
+                <Progress
+                  value={(100 / regexArray.length) * passRegexPassword}
+                />
+              </div>
             );
           },
         },
-        terms: {
+        {
+          id: 'terms',
           label: t('sign_up.form.terms.label'),
           description: t('sign_up.form.terms.desc'),
-          fieldType: AutoFormCheckbox,
+          component: AutoFormCheckbox,
         },
-        newsletter: {
+        {
+          id: 'newsletter',
           label: t('sign_up.form.newsletter.label'),
           description: t('sign_up.form.newsletter.desc'),
-          fieldType: AutoFormCheckbox,
+          component: AutoFormCheckbox,
         },
-      }}
+      ]}
       formSchema={formSchema}
       onSubmit={onSubmit}
       submitButton={props => (