diff --git a/.gitignore b/.gitignore
index add8286e..3781e718 100644
--- a/.gitignore
+++ b/.gitignore
@@ -186,6 +186,8 @@ apps/mobile/assets/fonts/satoshi-variable.woff2
 apps/mobile/assets/fonts/satoshi-variable-italic.woff2
 apps/mobile/assets/fonts/antonio.ttf
 
+apps/server/data/
+
 .expo
 web-build/
 expo-env.d.ts
diff --git a/apps/server/src/lib/config/storage.ts b/apps/server/src/lib/config/storage.ts
index ed073a27..4658497c 100644
--- a/apps/server/src/lib/config/storage.ts
+++ b/apps/server/src/lib/config/storage.ts
@@ -24,7 +24,7 @@ const fileStorageProviderConfigSchema = z.object({
   type: z.literal('file'),
   directory: z
     .string({ error: 'Storage file directory is required' })
-    .default('./colanode')
+    .default('./data')
     .transform(resolveConfigReference),
 });
 
diff --git a/package-lock.json b/package-lock.json
index 722b88a1..565b3b8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10329,21 +10329,6 @@
         "node": ">= 20.19.4"
       }
     },
-    "node_modules/@react-native/community-cli-plugin/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/@react-native/community-cli-plugin/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -23544,21 +23529,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/metro/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/metro/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -26014,21 +25984,6 @@
         "ws": "^7"
       }
     },
-    "node_modules/react-devtools-core/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/react-devtools-core/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
@@ -26328,21 +26283,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-native/node_modules/utf-8-validate": {
-      "version": "5.0.10",
-      "resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz",
-      "integrity": "sha512-Z6czzLq4u8fPOyx7TU6X3dvUZVvoJmxSQ+IcrlmagKhilxlhZgxPK6C5Jqbkw1IDUmFTM+cz9QDnnLTwDz/2gQ==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "node-gyp-build": "^4.3.0"
-      },
-      "engines": {
-        "node": ">=6.14.2"
-      }
-    },
     "node_modules/react-native/node_modules/ws": {
       "version": "7.5.10",
       "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz",
diff --git a/packages/ui/src/components/auth/email-login-form.tsx b/packages/ui/src/components/auth/email-login-form.tsx
index d377cfdc..5428e359 100644
--- a/packages/ui/src/components/auth/email-login-form.tsx
+++ b/packages/ui/src/components/auth/email-login-form.tsx
@@ -7,7 +7,6 @@ import { Button } from '@colanode/ui/components/ui/button';
 import {
   Field,
   FieldError,
-  FieldGroup,
   FieldLabel,
 } from '@colanode/ui/components/ui/field';
 import { Input } from '@colanode/ui/components/ui/input';
@@ -46,65 +45,63 @@ export const LoginForm = ({ isPending, onSubmit }: LoginFormProps) => {
       }}
       className="space-y-4"
     >
-      <FieldGroup>
-        <form.Field
-          name="email"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="hi@example.com"
-                  autoComplete="email"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="password"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <div className="flex flex-row gap-2 items-center">
-                  <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                  <p
-                    className="text-xs text-muted-foreground cursor-pointer hover:underline w-full text-right"
-                    onClick={() => {
-                      navigate({ to: '/auth/reset' });
-                    }}
-                  >
-                    Forgot password?
-                  </p>
-                </div>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  autoComplete="current-password"
-                  placeholder="********"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-      </FieldGroup>
+      <form.Field
+        name="email"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="hi@example.com"
+                autoComplete="email"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="password"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <div className="flex flex-row gap-2 items-center">
+                <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                <p
+                  className="text-xs text-muted-foreground cursor-pointer hover:underline w-full text-right"
+                  onClick={() => {
+                    navigate({ to: '/auth/reset' });
+                  }}
+                >
+                  Forgot password?
+                </p>
+              </div>
+              <Input
+                id={field.name}
+                name={field.name}
+                type="password"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                autoComplete="current-password"
+                placeholder="********"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
       <Button
         type="submit"
         variant="outline"
diff --git a/packages/ui/src/components/auth/email-password-reset-complete-form.tsx b/packages/ui/src/components/auth/email-password-reset-complete-form.tsx
index af97e37e..e3c1bd17 100644
--- a/packages/ui/src/components/auth/email-password-reset-complete-form.tsx
+++ b/packages/ui/src/components/auth/email-password-reset-complete-form.tsx
@@ -6,7 +6,6 @@ import { Button } from '@colanode/ui/components/ui/button';
 import {
   Field,
   FieldError,
-  FieldGroup,
   FieldLabel,
 } from '@colanode/ui/components/ui/field';
 import { Input } from '@colanode/ui/components/ui/input';
@@ -67,83 +66,79 @@ export const PasswordResetCompleteForm = ({
       }}
       className="space-y-3"
     >
-      <FieldGroup>
-        <form.Field
-          name="password"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>New Password</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  autoComplete="new-password"
-                  placeholder="********"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="confirmPassword"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>
-                  Confirm New Password
-                </FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  autoComplete="new-password"
-                  placeholder="********"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="otp"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Code</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="123456"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                <p className="text-xs text-muted-foreground w-full text-center">
-                  {formattedTime}
-                </p>
-              </Field>
-            );
-          }}
-        />
-      </FieldGroup>
+      <form.Field
+        name="password"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>New Password</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                type="password"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                autoComplete="new-password"
+                placeholder="********"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="confirmPassword"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Confirm New Password</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                type="password"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                autoComplete="new-password"
+                placeholder="********"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="otp"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Code</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="123456"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+              <p className="text-xs text-muted-foreground w-full text-center">
+                {formattedTime}
+              </p>
+            </Field>
+          );
+        }}
+      />
       <Button
         type="submit"
         variant="outline"
diff --git a/packages/ui/src/components/auth/email-password-reset-init-form.tsx b/packages/ui/src/components/auth/email-password-reset-init-form.tsx
index 4bc46121..ebf7f90e 100644
--- a/packages/ui/src/components/auth/email-password-reset-init-form.tsx
+++ b/packages/ui/src/components/auth/email-password-reset-init-form.tsx
@@ -6,7 +6,6 @@ import { Button } from '@colanode/ui/components/ui/button';
 import {
   Field,
   FieldError,
-  FieldGroup,
   FieldLabel,
 } from '@colanode/ui/components/ui/field';
 import { Input } from '@colanode/ui/components/ui/input';
@@ -45,30 +44,28 @@ export const PasswordResetInitForm = ({
       }}
       className="space-y-3"
     >
-      <FieldGroup>
-        <form.Field
-          name="email"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="hi@example.com"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-      </FieldGroup>
+      <form.Field
+        name="email"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="hi@example.com"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
       <Button
         type="submit"
         variant="outline"
diff --git a/packages/ui/src/components/auth/email-register-form.tsx b/packages/ui/src/components/auth/email-register-form.tsx
index f1cc012e..4a4c5ae9 100644
--- a/packages/ui/src/components/auth/email-register-form.tsx
+++ b/packages/ui/src/components/auth/email-register-form.tsx
@@ -6,7 +6,6 @@ import { Button } from '@colanode/ui/components/ui/button';
 import {
   Field,
   FieldError,
-  FieldGroup,
   FieldLabel,
 } from '@colanode/ui/components/ui/field';
 import { Input } from '@colanode/ui/components/ui/input';
@@ -61,102 +60,100 @@ export const RegisterForm = ({ isPending, onSubmit }: RegisterFormProps) => {
       }}
       className="space-y-4"
     >
-      <FieldGroup>
-        <form.Field
-          name="name"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Name</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="John Doe"
-                  autoComplete="name"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="email"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Email</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="hi@example.com"
-                  autoComplete="email"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="password"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Password</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  autoComplete="new-password"
-                  placeholder="********"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-        <form.Field
-          name="confirmPassword"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Confirm Password</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  type="password"
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  autoComplete="new-password"
-                  placeholder="********"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-              </Field>
-            );
-          }}
-        />
-      </FieldGroup>
+      <form.Field
+        name="name"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Name</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="John Doe"
+                autoComplete="name"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="email"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="hi@example.com"
+                autoComplete="email"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="password"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                type="password"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                autoComplete="new-password"
+                placeholder="********"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
+      <form.Field
+        name="confirmPassword"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Confirm Password</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                type="password"
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                autoComplete="new-password"
+                placeholder="********"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+            </Field>
+          );
+        }}
+      />
       <Button
         type="submit"
         variant="outline"
diff --git a/packages/ui/src/components/auth/email-verify-form.tsx b/packages/ui/src/components/auth/email-verify-form.tsx
index b8ba3929..dc2d0547 100644
--- a/packages/ui/src/components/auth/email-verify-form.tsx
+++ b/packages/ui/src/components/auth/email-verify-form.tsx
@@ -6,7 +6,6 @@ import { Button } from '@colanode/ui/components/ui/button';
 import {
   Field,
   FieldError,
-  FieldGroup,
   FieldLabel,
 } from '@colanode/ui/components/ui/field';
 import { Input } from '@colanode/ui/components/ui/input';
@@ -50,38 +49,36 @@ export const EmailVerifyForm = ({
       }}
       className="space-y-4"
     >
-      <FieldGroup>
-        <form.Field
-          name="otp"
-          children={(field) => {
-            const isInvalid =
-              field.state.meta.isTouched && !field.state.meta.isValid;
-            return (
-              <Field data-invalid={isInvalid}>
-                <FieldLabel htmlFor={field.name}>Code</FieldLabel>
-                <Input
-                  id={field.name}
-                  name={field.name}
-                  value={field.state.value}
-                  onBlur={field.handleBlur}
-                  onChange={(e) => field.handleChange(e.target.value)}
-                  aria-invalid={isInvalid}
-                  placeholder="123456"
-                />
-                {isInvalid && <FieldError errors={field.state.meta.errors} />}
-                <div className="flex flex-col items-center gap-1">
-                  <p className="text-sm text-muted-foreground w-full text-center">
-                    We sent a verification code to your email.
-                  </p>
-                  <p className="text-xs text-muted-foreground w-full text-center">
-                    {formattedTime}
-                  </p>
-                </div>
-              </Field>
-            );
-          }}
-        />
-      </FieldGroup>
+      <form.Field
+        name="otp"
+        children={(field) => {
+          const isInvalid =
+            field.state.meta.isTouched && !field.state.meta.isValid;
+          return (
+            <Field data-invalid={isInvalid}>
+              <FieldLabel htmlFor={field.name}>Code</FieldLabel>
+              <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                aria-invalid={isInvalid}
+                placeholder="123456"
+              />
+              {isInvalid && <FieldError errors={field.state.meta.errors} />}
+              <div className="flex flex-col items-center gap-1">
+                <p className="text-sm text-muted-foreground w-full text-center">
+                  We sent a verification code to your email.
+                </p>
+                <p className="text-xs text-muted-foreground w-full text-center">
+                  {formattedTime}
+                </p>
+              </div>
+            </Field>
+          );
+        }}
+      />
       <Button
         type="submit"
         variant="outline"