diff --git a/frontend/web/src/components/setting/MemberSection.tsx b/frontend/web/src/components/setting/MemberSection.tsx
index c56efac..06d3d1f 100644
--- a/frontend/web/src/components/setting/MemberSection.tsx
+++ b/frontend/web/src/components/setting/MemberSection.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
 import { User } from "@/types/proto/api/v2/user_service";
+import { convertRoleFromPb } from "@/utils/user";
 import useUserStore from "../../stores/v1/user";
 import { showCommonDialog } from "../Alert";
 import CreateUserDialog from "../CreateUserDialog";
@@ -89,7 +90,7 @@ const MemberSection = () => {
                       <tr key={user.email}>
                         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 dark:text-gray-500">{user.nickname}</td>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.email}</td>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{user.role}</td>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{convertRoleFromPb(user.role)}</td>
                         <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
                           <IconButton
                             size="sm"
diff --git a/frontend/web/src/utils/user.ts b/frontend/web/src/utils/user.ts
new file mode 100644
index 0000000..08e592a
--- /dev/null
+++ b/frontend/web/src/utils/user.ts
@@ -0,0 +1,11 @@
+import { Role } from "@/types/proto/api/v2/user_service";
+
+export const convertRoleFromPb = (role: Role): string => {
+  if (role === Role.ADMIN) {
+    return "Admin";
+  } else if (role === Role.USER) {
+    return "User";
+  } else {
+    return "Unknown";
+  }
+};