diff --git a/web/src/components/overlay/SetPasswordDialog.tsx b/web/src/components/overlay/SetPasswordDialog.tsx
index b66a5fa97..8d8ce37f3 100644
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import {
   Dialog,
   DialogContent,
@@ -9,14 +9,23 @@ import {
   DialogHeader,
   DialogTitle,
 } from "../ui/dialog";
-
-import { Label } from "../ui/label";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../ui/form";
 import { LuCheck, LuX, LuEye, LuEyeOff, LuExternalLink } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { useDocDomain } from "@/hooks/use-doc-domain";
 import useSWR from "swr";
 import { formatSecondsToDuration } from "@/utils/dateUtil";
 import ActivityIndicator from "../indicators/activity-indicator";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
 
 type SetPasswordProps = {
   show: boolean;
@@ -44,11 +53,6 @@ export default function SetPasswordDialog({
   const refreshTimeLabel = refreshSeconds
     ? formatSecondsToDuration(refreshSeconds)
     : "30 minutes";
-  const [oldPassword, setOldPassword] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [confirmPassword, setConfirmPassword] = useState<string>("");
-  const [passwordStrength, setPasswordStrength] = useState<number>(0);
-  const [error, setError] = useState<string | null>(null);
 
   // visibility toggles for password fields
   const [showOldPassword, setShowOldPassword] = useState<boolean>(false);
@@ -56,92 +60,136 @@ export default function SetPasswordDialog({
     useState<boolean>(false);
   const [showConfirmPassword, setShowConfirmPassword] =
     useState<boolean>(false);
-  const [hasInitialized, setHasInitialized] = useState<boolean>(false);
 
-  // Password strength requirements
+  // Create form schema with conditional old password requirement
+  const formSchema = useMemo(() => {
+    const baseSchema = {
+      password: z
+        .string()
+        .min(8, t("users.dialog.form.password.requirements.length"))
+        .regex(/[A-Z]/, t("users.dialog.form.password.requirements.uppercase"))
+        .regex(/\d/, t("users.dialog.form.password.requirements.digit"))
+        .regex(
+          /[!@#$%^&*(),.?":{}|<>]/,
+          t("users.dialog.form.password.requirements.special"),
+        ),
+      confirmPassword: z.string(),
+    };
 
-  const requirements = {
-    length: password.length >= 8,
-    uppercase: /[A-Z]/.test(password),
-    digit: /\d/.test(password),
-    special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
-  };
-
-  useEffect(() => {
-    if (show) {
-      if (!hasInitialized) {
-        setOldPassword("");
-        setPassword("");
-        setConfirmPassword("");
-        setError(null);
-        setHasInitialized(true);
-      }
+    if (username) {
+      return z
+        .object({
+          oldPassword: z
+            .string()
+            .min(1, t("users.dialog.passwordSetting.currentPasswordRequired")),
+          ...baseSchema,
+        })
+        .refine((data) => data.password === data.confirmPassword, {
+          message: t("users.dialog.passwordSetting.doNotMatch"),
+          path: ["confirmPassword"],
+        });
     } else {
-      setHasInitialized(false);
+      return z
+        .object(baseSchema)
+        .refine((data) => data.password === data.confirmPassword, {
+          message: t("users.dialog.passwordSetting.doNotMatch"),
+          path: ["confirmPassword"],
+        });
     }
-  }, [show, hasInitialized]);
+  }, [username, t]);
 
-  useEffect(() => {
-    if (show && initialError) {
-      setError(initialError);
-    }
-  }, [show, initialError]);
+  type FormValues = z.infer<typeof formSchema>;
+
+  const defaultValues = username
+    ? {
+        oldPassword: "",
+        password: "",
+        confirmPassword: "",
+      }
+    : {
+        password: "",
+        confirmPassword: "",
+      };
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    mode: "onChange",
+    defaultValues: defaultValues as FormValues,
+  });
+
+  const password = form.watch("password");
+  const confirmPassword = form.watch("confirmPassword");
 
   // Password strength calculation
-
-  useEffect(() => {
-    if (!password) {
-      setPasswordStrength(0);
-      return;
-    }
+  const passwordStrength = useMemo(() => {
+    if (!password) return 0;
 
     let strength = 0;
-    if (requirements.length) strength += 1;
-    if (requirements.digit) strength += 1;
-    if (requirements.special) strength += 1;
-    if (requirements.uppercase) strength += 1;
+    if (password.length >= 8) strength += 1;
+    if (/\d/.test(password)) strength += 1;
+    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
+    if (/[A-Z]/.test(password)) strength += 1;
 
-    setPasswordStrength(strength);
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return strength;
   }, [password]);
 
-  const handleSave = async () => {
-    if (!password) {
-      setError(t("users.dialog.passwordSetting.cannotBeEmpty"));
-      return;
-    }
+  const requirements = useMemo(
+    () => ({
+      length: password?.length >= 8,
+      uppercase: /[A-Z]/.test(password || ""),
+      digit: /\d/.test(password || ""),
+      special: /[!@#$%^&*(),.?":{}|<>]/.test(password || ""),
+    }),
+    [password],
+  );
 
-    // Validate all requirements
-    if (!requirements.length) {
-      setError(t("users.dialog.form.password.requirements.length"));
-      return;
-    }
-    if (!requirements.uppercase) {
-      setError(t("users.dialog.form.password.requirements.uppercase"));
-      return;
-    }
-    if (!requirements.digit) {
-      setError(t("users.dialog.form.password.requirements.digit"));
-      return;
-    }
-    if (!requirements.special) {
-      setError(t("users.dialog.form.password.requirements.special"));
-      return;
+  // Reset form and visibility toggles when dialog opens/closes
+  useEffect(() => {
+    if (show) {
+      form.reset();
+      setShowOldPassword(false);
+      setShowPasswordVisible(false);
+      setShowConfirmPassword(false);
     }
+  }, [show, form]);
 
-    if (password !== confirmPassword) {
-      setError(t("users.dialog.passwordSetting.doNotMatch"));
-      return;
+  // Handle backend errors
+  useEffect(() => {
+    if (show && initialError) {
+      const errorMsg = String(initialError);
+      // Check if the error is about incorrect current password
+      if (
+        errorMsg.toLowerCase().includes("current password is incorrect") ||
+        errorMsg.toLowerCase().includes("current password incorrect")
+      ) {
+        if (username) {
+          form.setError("oldPassword" as keyof FormValues, {
+            type: "manual",
+            message: t("users.dialog.passwordSetting.incorrectCurrentPassword"),
+          });
+        }
+      } else {
+        // For other errors, show as form-level error
+        form.setError("root", {
+          type: "manual",
+          message: errorMsg,
+        });
+      }
     }
+  }, [show, initialError, form, t, username]);
 
-    // Require old password when changing own password (username is provided)
-    if (username && !oldPassword) {
-      setError(t("users.dialog.passwordSetting.currentPasswordRequired"));
-      return;
-    }
-
-    onSave(password, oldPassword || undefined);
+  const onSubmit = async (values: FormValues) => {
+    const oldPassword =
+      "oldPassword" in values
+        ? (
+            values as {
+              oldPassword: string;
+              password: string;
+              confirmPassword: string;
+            }
+          ).oldPassword
+        : undefined;
+    onSave(values.password, oldPassword);
   };
 
   const getStrengthLabel = () => {
@@ -200,293 +248,311 @@ export default function SetPasswordDialog({
           </p>
         </DialogHeader>
 
-        <div className="space-y-4 pt-4">
-          {username && (
-            <div className="space-y-2">
-              <Label htmlFor="old-password">
-                {t("users.dialog.form.currentPassword.title")}
-              </Label>
-              <div className="relative">
-                <Input
-                  id="old-password"
-                  className="h-10 pr-10"
-                  type={showOldPassword ? "text" : "password"}
-                  value={oldPassword}
-                  onChange={(event) => {
-                    setOldPassword(event.target.value);
-                    setError(null);
-                  }}
-                  placeholder={t(
-                    "users.dialog.form.currentPassword.placeholder",
-                  )}
-                />
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  tabIndex={-1}
-                  aria-label={
-                    showOldPassword
-                      ? t("users.dialog.form.password.hide", {
-                          ns: "views/settings",
-                        })
-                      : t("users.dialog.form.password.show", {
-                          ns: "views/settings",
-                        })
-                  }
-                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                  onClick={() => setShowOldPassword(!showOldPassword)}
-                >
-                  {showOldPassword ? (
-                    <LuEyeOff className="size-4" />
-                  ) : (
-                    <LuEye className="size-4" />
-                  )}
-                </Button>
-              </div>
-            </div>
-          )}
-
-          <div className="space-y-2">
-            <Label htmlFor="password">
-              {t("users.dialog.form.newPassword.title")}
-            </Label>
-            <div className="relative">
-              <Input
-                id="password"
-                className="h-10 pr-10"
-                type={showPasswordVisible ? "text" : "password"}
-                value={password}
-                onChange={(event) => {
-                  setPassword(event.target.value);
-                  setError(null);
-                }}
-                placeholder={t("users.dialog.form.newPassword.placeholder")}
-                autoFocus
-              />
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                tabIndex={-1}
-                aria-label={
-                  showPasswordVisible
-                    ? t("users.dialog.form.password.hide", {
-                        ns: "views/settings",
-                      })
-                    : t("users.dialog.form.password.show", {
-                        ns: "views/settings",
-                      })
-                }
-                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                onClick={() => setShowPasswordVisible(!showPasswordVisible)}
-              >
-                {showPasswordVisible ? (
-                  <LuEyeOff className="size-4" />
-                ) : (
-                  <LuEye className="size-4" />
-                )}
-              </Button>
-            </div>
-
-            {password && (
-              <div className="mt-2 space-y-2">
-                <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
-                  <div
-                    className={`${getStrengthColor()} transition-all duration-300`}
-                    style={{ width: `${(passwordStrength / 4) * 100}%` }}
-                  />
-                </div>
-                <p className="text-xs text-muted-foreground">
-                  {t("users.dialog.form.password.strength.title")}
-                  <span className="font-medium">{getStrengthLabel()}</span>
-                </p>
-
-                <div className="space-y-1 rounded-md bg-muted/50 p-2">
-                  <p className="text-xs font-medium text-muted-foreground">
-                    {t("users.dialog.form.password.requirements.title")}
-                  </p>
-                  <ul className="space-y-1">
-                    <li className="flex items-center gap-2 text-xs">
-                      {requirements.length ? (
-                        <LuCheck className="size-3.5 text-green-500" />
-                      ) : (
-                        <LuX className="size-3.5 text-red-500" />
-                      )}
-                      <span
-                        className={
-                          requirements.length
-                            ? "text-green-600"
-                            : "text-red-600"
-                        }
-                      >
-                        {t("users.dialog.form.password.requirements.length")}
-                      </span>
-                    </li>
-                    <li className="flex items-center gap-2 text-xs">
-                      {requirements.uppercase ? (
-                        <LuCheck className="size-3.5 text-green-500" />
-                      ) : (
-                        <LuX className="size-3.5 text-red-500" />
-                      )}
-                      <span
-                        className={
-                          requirements.uppercase
-                            ? "text-green-600"
-                            : "text-red-600"
-                        }
-                      >
-                        {t("users.dialog.form.password.requirements.uppercase")}
-                      </span>
-                    </li>
-                    <li className="flex items-center gap-2 text-xs">
-                      {requirements.digit ? (
-                        <LuCheck className="size-3.5 text-green-500" />
-                      ) : (
-                        <LuX className="size-3.5 text-red-500" />
-                      )}
-                      <span
-                        className={
-                          requirements.digit ? "text-green-600" : "text-red-600"
-                        }
-                      >
-                        {t("users.dialog.form.password.requirements.digit")}
-                      </span>
-                    </li>
-                    <li className="flex items-center gap-2 text-xs">
-                      {requirements.special ? (
-                        <LuCheck className="size-3.5 text-green-500" />
-                      ) : (
-                        <LuX className="size-3.5 text-red-500" />
-                      )}
-                      <span
-                        className={
-                          requirements.special
-                            ? "text-green-600"
-                            : "text-red-600"
-                        }
-                      >
-                        {t("users.dialog.form.password.requirements.special")}
-                      </span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            )}
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="confirm-password">
-              {t("users.dialog.form.password.confirm.title")}
-            </Label>
-            <div className="relative">
-              <Input
-                id="confirm-password"
-                className="h-10 pr-10"
-                type={showConfirmPassword ? "text" : "password"}
-                value={confirmPassword}
-                onChange={(event) => {
-                  setConfirmPassword(event.target.value);
-                  setError(null);
-                }}
-                placeholder={t(
-                  "users.dialog.form.newPassword.confirm.placeholder",
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="space-y-4 pt-4"
+          >
+            {username && (
+              <FormField
+                control={form.control}
+                name={"oldPassword" as keyof FormValues}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t("users.dialog.form.currentPassword.title")}
+                    </FormLabel>
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          {...field}
+                          type={showOldPassword ? "text" : "password"}
+                          placeholder={t(
+                            "users.dialog.form.currentPassword.placeholder",
+                          )}
+                          className="h-10 pr-10"
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          tabIndex={-1}
+                          aria-label={
+                            showOldPassword
+                              ? t("users.dialog.form.password.hide", {
+                                  ns: "views/settings",
+                                })
+                              : t("users.dialog.form.password.show", {
+                                  ns: "views/settings",
+                                })
+                          }
+                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                          onClick={() => setShowOldPassword(!showOldPassword)}
+                        >
+                          {showOldPassword ? (
+                            <LuEyeOff className="size-4" />
+                          ) : (
+                            <LuEye className="size-4" />
+                          )}
+                        </Button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
                 )}
               />
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                tabIndex={-1}
-                aria-label={
-                  showConfirmPassword
-                    ? t("users.dialog.form.password.hide", {
-                        ns: "views/settings",
-                      })
-                    : t("users.dialog.form.password.show", {
-                        ns: "views/settings",
-                      })
-                }
-                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              >
-                {showConfirmPassword ? (
-                  <LuEyeOff className="size-4" />
-                ) : (
-                  <LuEye className="size-4" />
-                )}
-              </Button>
-            </div>
+            )}
 
-            {/* Password match indicator */}
-            {password && confirmPassword && (
-              <div className="mt-1 flex items-center gap-1.5 text-xs">
-                {password === confirmPassword ? (
-                  <>
-                    <LuCheck className="size-3.5 text-green-500" />
-                    <span className="text-green-600">
-                      {t("users.dialog.form.password.match")}
-                    </span>
-                  </>
-                ) : (
-                  <>
-                    <LuX className="size-3.5 text-red-500" />
-                    <span className="text-red-600">
-                      {t("users.dialog.form.password.notMatch")}
-                    </span>
-                  </>
-                )}
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("users.dialog.form.newPassword.title")}
+                  </FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Input
+                        {...field}
+                        type={showPasswordVisible ? "text" : "password"}
+                        placeholder={t(
+                          "users.dialog.form.newPassword.placeholder",
+                        )}
+                        className="h-10 pr-10"
+                        autoFocus
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        tabIndex={-1}
+                        aria-label={
+                          showPasswordVisible
+                            ? t("users.dialog.form.password.hide", {
+                                ns: "views/settings",
+                              })
+                            : t("users.dialog.form.password.show", {
+                                ns: "views/settings",
+                              })
+                        }
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() =>
+                          setShowPasswordVisible(!showPasswordVisible)
+                        }
+                      >
+                        {showPasswordVisible ? (
+                          <LuEyeOff className="size-4" />
+                        ) : (
+                          <LuEye className="size-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </FormControl>
+
+                  {password && (
+                    <div className="mt-2 space-y-2">
+                      <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
+                        <div
+                          className={`${getStrengthColor()} transition-all duration-300`}
+                          style={{ width: `${(passwordStrength / 4) * 100}%` }}
+                        />
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {t("users.dialog.form.password.strength.title")}
+                        <span className="font-medium">
+                          {getStrengthLabel()}
+                        </span>
+                      </p>
+
+                      <div className="space-y-1 rounded-md bg-muted/50 p-2">
+                        <p className="text-xs font-medium text-muted-foreground">
+                          {t("users.dialog.form.password.requirements.title")}
+                        </p>
+                        <ul className="space-y-1">
+                          <li className="flex items-center gap-2 text-xs">
+                            {requirements.length ? (
+                              <LuCheck className="size-3.5 text-green-500" />
+                            ) : (
+                              <LuX className="size-3.5 text-red-500" />
+                            )}
+                            <span
+                              className={
+                                requirements.length
+                                  ? "text-green-600"
+                                  : "text-red-600"
+                              }
+                            >
+                              {t(
+                                "users.dialog.form.password.requirements.length",
+                              )}
+                            </span>
+                          </li>
+                          <li className="flex items-center gap-2 text-xs">
+                            {requirements.uppercase ? (
+                              <LuCheck className="size-3.5 text-green-500" />
+                            ) : (
+                              <LuX className="size-3.5 text-red-500" />
+                            )}
+                            <span
+                              className={
+                                requirements.uppercase
+                                  ? "text-green-600"
+                                  : "text-red-600"
+                              }
+                            >
+                              {t(
+                                "users.dialog.form.password.requirements.uppercase",
+                              )}
+                            </span>
+                          </li>
+                          <li className="flex items-center gap-2 text-xs">
+                            {requirements.digit ? (
+                              <LuCheck className="size-3.5 text-green-500" />
+                            ) : (
+                              <LuX className="size-3.5 text-red-500" />
+                            )}
+                            <span
+                              className={
+                                requirements.digit
+                                  ? "text-green-600"
+                                  : "text-red-600"
+                              }
+                            >
+                              {t(
+                                "users.dialog.form.password.requirements.digit",
+                              )}
+                            </span>
+                          </li>
+                          <li className="flex items-center gap-2 text-xs">
+                            {requirements.special ? (
+                              <LuCheck className="size-3.5 text-green-500" />
+                            ) : (
+                              <LuX className="size-3.5 text-red-500" />
+                            )}
+                            <span
+                              className={
+                                requirements.special
+                                  ? "text-green-600"
+                                  : "text-red-600"
+                              }
+                            >
+                              {t(
+                                "users.dialog.form.password.requirements.special",
+                              )}
+                            </span>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="confirmPassword"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t("users.dialog.form.password.confirm.title")}
+                  </FormLabel>
+                  <FormControl>
+                    <div className="relative">
+                      <Input
+                        {...field}
+                        type={showConfirmPassword ? "text" : "password"}
+                        placeholder={t(
+                          "users.dialog.form.newPassword.confirm.placeholder",
+                        )}
+                        className="h-10 pr-10"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="sm"
+                        tabIndex={-1}
+                        aria-label={
+                          showConfirmPassword
+                            ? t("users.dialog.form.password.hide", {
+                                ns: "views/settings",
+                              })
+                            : t("users.dialog.form.password.show", {
+                                ns: "views/settings",
+                              })
+                        }
+                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        onClick={() =>
+                          setShowConfirmPassword(!showConfirmPassword)
+                        }
+                      >
+                        {showConfirmPassword ? (
+                          <LuEyeOff className="size-4" />
+                        ) : (
+                          <LuEye className="size-4" />
+                        )}
+                      </Button>
+                    </div>
+                  </FormControl>
+
+                  {password &&
+                    confirmPassword &&
+                    password === confirmPassword && (
+                      <div className="mt-1 flex items-center gap-1.5 text-xs">
+                        <LuCheck className="size-3.5 text-green-500" />
+                        <span className="text-green-600">
+                          {t("users.dialog.form.password.match")}
+                        </span>
+                      </div>
+                    )}
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {form.formState.errors.root && (
+              <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                {form.formState.errors.root.message}
               </div>
             )}
-          </div>
 
-          {error && (
-            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
-              {error}
-            </div>
-          )}
-        </div>
-
-        <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
-          <div className="flex flex-1 flex-col justify-end">
-            <div className="flex flex-row gap-2 pt-5">
-              <Button
-                className="flex flex-1"
-                aria-label={t("button.cancel", { ns: "common" })}
-                onClick={onCancel}
-                type="button"
-                disabled={isLoading}
-              >
-                {t("button.cancel", { ns: "common" })}
-              </Button>
-              <Button
-                variant="select"
-                aria-label={t("button.save", { ns: "common" })}
-                className="flex flex-1"
-                onClick={handleSave}
-                disabled={
-                  isLoading ||
-                  !password ||
-                  password !== confirmPassword ||
-                  (username && !oldPassword) ||
-                  !requirements.length ||
-                  !requirements.uppercase ||
-                  !requirements.digit ||
-                  !requirements.special
-                }
-              >
-                {isLoading ? (
-                  <div className="flex flex-row items-center gap-2">
-                    <ActivityIndicator />
-                    <span>{t("button.saving", { ns: "common" })}</span>
-                  </div>
-                ) : (
-                  t("button.save", { ns: "common" })
-                )}
-              </Button>
-            </div>
-          </div>
-        </DialogFooter>
+            <DialogFooter className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+              <div className="flex flex-1 flex-col justify-end">
+                <div className="flex flex-row gap-2 pt-5">
+                  <Button
+                    className="flex flex-1"
+                    aria-label={t("button.cancel", { ns: "common" })}
+                    onClick={onCancel}
+                    type="button"
+                    disabled={isLoading}
+                  >
+                    {t("button.cancel", { ns: "common" })}
+                  </Button>
+                  <Button
+                    variant="select"
+                    aria-label={t("button.save", { ns: "common" })}
+                    className="flex flex-1"
+                    type="submit"
+                    disabled={isLoading || !form.formState.isValid}
+                  >
+                    {isLoading ? (
+                      <div className="flex flex-row items-center gap-2">
+                        <ActivityIndicator />
+                        <span>{t("button.saving", { ns: "common" })}</span>
+                      </div>
+                    ) : (
+                      t("button.save", { ns: "common" })
+                    )}
+                  </Button>
+                </div>
+              </div>
+            </DialogFooter>
+          </form>
+        </Form>
       </DialogContent>
     </Dialog>
   );