diff --git a/frontend/repositories/member/api.ts b/frontend/repositories/member/api.ts
new file mode 100644
index 00000000..269db0f8
--- /dev/null
+++ b/frontend/repositories/member/api.ts
@@ -0,0 +1,36 @@
+import ApiService from '@/services/api.service'
+import { MemberItem } from '@/models/member'
+import { MemberItemListRepository, MemberItemResponse } from './interface'
+
+
+export class FromApiMemberItemListRepository implements MemberItemListRepository {
+  constructor(
+    private readonly request = ApiService
+  ) {}
+
+  async list(projectId: string): Promise<MemberItem[]> {
+    const url = `/projects/${projectId}/roles`
+    const response = await this.request.get(url)
+    const responseItems: MemberItemResponse[] = response.data
+    return responseItems.map(item => MemberItem.valueOf(item))
+  }
+
+  async create(projectId: string, item: MemberItem): Promise<MemberItem> {
+    const url = `/projects/${projectId}/roles`
+    const response = await this.request.post(url, item.toObject())
+    const responseItem: MemberItemResponse = response.data
+    return MemberItem.valueOf(responseItem)
+  }
+
+  async update(projectId: string, item: MemberItem): Promise<MemberItem> {
+    const url = `/projects/${projectId}/roles/${item.id}`
+    const response = await this.request.patch(url, item.toObject())
+    const responseItem: MemberItemResponse = response.data
+    return MemberItem.valueOf(responseItem)
+  }
+
+  async bulkDelete(projectId: string, labelIds: number[]): Promise<void> {
+    const url = `/projects/${projectId}/roles`
+    await this.request.delete(url, { ids: labelIds })
+  }
+}
diff --git a/frontend/repositories/member/interface.ts b/frontend/repositories/member/interface.ts
new file mode 100644
index 00000000..1f5b0f63
--- /dev/null
+++ b/frontend/repositories/member/interface.ts
@@ -0,0 +1,19 @@
+import { MemberItem } from '@/models/member'
+
+export interface MemberItemResponse {
+  id: number,
+  user: number,
+  role: number,
+  username: string,
+  rolename: string
+}
+
+export interface MemberItemListRepository {
+  list(projectId: string): Promise<MemberItem[]>
+
+  create(projectId: string, item: MemberItem): Promise<MemberItem>
+
+  update(projectId: string, item: MemberItem): Promise<MemberItem>
+
+  bulkDelete(projectId: string, memberIds: number[]): Promise<void>
+}