diff --git a/components/board/BoardAccess.tsx b/components/board/BoardAccess.tsx
index 3cb0e70..06df9d9 100644
--- a/components/board/BoardAccess.tsx
+++ b/components/board/BoardAccess.tsx
@@ -44,7 +44,10 @@ export default async function BoardAccess({ boardId, role }: BoardAccessProps) {
         )}
       </div>
       {role === Role.owner && (
-        <MemberManageModalComponent boardId={boardId} members={members} />
+        <MemberManageModalComponent
+          boardId={boardId}
+          initialMembers={members}
+        />
       )}
     </div>
   );
diff --git a/components/board/MemberList.tsx b/components/board/MemberList.tsx
index 14ac30f..1403ac6 100644
--- a/components/board/MemberList.tsx
+++ b/components/board/MemberList.tsx
@@ -25,6 +25,12 @@ export default function MemberList({
   handleRemoveMember,
   handleRoleChange,
 }: MemberListProps) {
+  const roles = {
+    Guest: Role.guest,
+    Member: Role.member,
+    Owner: Role.owner,
+  };
+
   return (
     <ul className="space-y-2">
       {members.map((member) => (
@@ -35,8 +41,8 @@ export default function MemberList({
             <p className="text-sm text-gray-500">{member.email}</p>
           </div>
           <Select
-            onValueChange={(value: MemberInfo["role"]) =>
-              handleRoleChange(member.id, value)
+            onValueChange={(value: keyof typeof roles) =>
+              handleRoleChange(member.id.toString(), roles[value])
             }
           >
             <SelectTrigger className="w-[110px]">
diff --git a/components/board/MemberManageModalComponent.tsx b/components/board/MemberManageModalComponent.tsx
index bcabb30..67f9ddb 100644
--- a/components/board/MemberManageModalComponent.tsx
+++ b/components/board/MemberManageModalComponent.tsx
@@ -12,18 +12,18 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import type { Role } from "@/db/schema";
+import { Role } from "@/db/schema";
 import { PlusCircleIcon } from "@heroicons/react/24/outline";
 import dynamic from "next/dynamic";
 import React, { useState } from "react";
 
 interface MemberManageProps {
   boardId: string;
-  members: MemberInfo[];
+  initialMembers: MemberInfo[];
 }
 
 export interface MemberInfo {
-  id: number;
+  id: string;
   userId: string;
   role: Role;
   username: string;
@@ -35,9 +35,10 @@ const MemberList = dynamic(() => import("@/components/board/MemberList"));
 
 export default function MemberManageModalComponent({
   boardId,
-  members,
+  initialMembers,
 }: MemberManageProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [members, setMembers] = useState<MemberInfo[]>(initialMembers);
   const [newMember, setNewMember] = useState({ username: "", email: "" });
   const [memberToRemove, setMemberToRemove] = useState<MemberInfo | null>(null);
 
@@ -46,7 +47,7 @@ export default function MemberManageModalComponent({
     if (newMember.username && newMember.email) {
       setMembers([
         ...members,
-        { ...newMember, id: Date.now().toString(), role: "Viewer" },
+        { ...newMember, id: Date.now().toString(), role: Role.member },
       ]);
       setNewMember({ username: "", email: "" });
     }