diff --git a/web/src/components/overlay/RoleChangeDialog.tsx b/web/src/components/overlay/RoleChangeDialog.tsx
index ed9e73436..c8b356665 100644
--- a/web/src/components/overlay/RoleChangeDialog.tsx
+++ b/web/src/components/overlay/RoleChangeDialog.tsx
@@ -1,5 +1,5 @@
 import { Trans, useTranslation } from "react-i18next";
-import { Button } from "../ui/button";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -7,22 +7,23 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "../ui/dialog";
+} from "@/components/ui/dialog";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "../ui/select";
+} from "@/components/ui/select";
 import { useState } from "react";
 import { LuShield, LuUser } from "react-icons/lu";
 
 type RoleChangeDialogProps = {
   show: boolean;
   username: string;
-  currentRole: "admin" | "viewer";
-  onSave: (role: "admin" | "viewer") => void;
+  currentRole: string;
+  availableRoles: string[];
+  onSave: (role: string) => void;
   onCancel: () => void;
 };
 
@@ -30,13 +31,12 @@ export default function RoleChangeDialog({
   show,
   username,
   currentRole,
+  availableRoles,
   onSave,
   onCancel,
 }: RoleChangeDialogProps) {
   const { t } = useTranslation(["views/settings"]);
-  const [selectedRole, setSelectedRole] = useState<"admin" | "viewer">(
-    currentRole,
-  );
+  const [selectedRole, setSelectedRole] = useState<string>(currentRole);
 
   return (
     <Dialog open={show} onOpenChange={onCancel}>
@@ -73,31 +73,46 @@ export default function RoleChangeDialog({
                 </span>
                 : {t("users.dialog.changeRole.roleInfo.viewerDesc")}
               </li>
+              {availableRoles
+                .filter((role) => role !== "admin" && role !== "viewer")
+                .map((role) => (
+                  <li key={role}>
+                    <span className="font-medium">{role}</span>:{" "}
+                    {t("users.dialog.changeRole.roleInfo.customDesc")}
+                  </li>
+                ))}
             </ul>
           </div>
 
-          <Select
-            value={selectedRole}
-            onValueChange={(value) =>
-              setSelectedRole(value as "admin" | "viewer")
-            }
-          >
+          <Select value={selectedRole} onValueChange={setSelectedRole}>
             <SelectTrigger className="w-full">
               <SelectValue placeholder={t("users.dialog.changeRole.select")} />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="admin" className="flex items-center gap-2">
-                <div className="flex items-center gap-2">
-                  <LuShield className="size-4 text-primary" />
-                  <span>{t("role.admin", { ns: "common" })}</span>
-                </div>
-              </SelectItem>
-              <SelectItem value="viewer" className="flex items-center gap-2">
-                <div className="flex items-center gap-2">
-                  <LuUser className="size-4 text-primary" />
-                  <span>{t("role.viewer", { ns: "common" })}</span>
-                </div>
-              </SelectItem>
+              {availableRoles.map((role) => (
+                <SelectItem
+                  key={role}
+                  value={role}
+                  className="flex items-center gap-2"
+                >
+                  <div className="flex items-center gap-2">
+                    {role === "admin" ? (
+                      <LuShield className="size-4 text-primary" />
+                    ) : role === "viewer" ? (
+                      <LuUser className="size-4 text-primary" />
+                    ) : (
+                      <LuUser className="size-4 text-muted-foreground" />
+                    )}
+                    <span>
+                      {role === "admin"
+                        ? t("role.admin", { ns: "common" })
+                        : role === "viewer"
+                          ? t("role.viewer", { ns: "common" })
+                          : role}
+                    </span>
+                  </div>
+                </SelectItem>
+              ))}
             </SelectContent>
           </Select>
         </div>
@@ -108,6 +123,7 @@ export default function RoleChangeDialog({
               <Button
                 className="flex flex-1"
                 aria-label={t("button.cancel", { ns: "common" })}
+                variant="outline"
                 onClick={onCancel}
                 type="button"
               >
@@ -118,6 +134,7 @@ export default function RoleChangeDialog({
                 aria-label={t("button.save", { ns: "common" })}
                 className="flex flex-1"
                 onClick={() => onSave(selectedRole)}
+                type="button"
                 disabled={selectedRole === currentRole}
               >
                 {t("button.save", { ns: "common" })}