diff --git a/frontend/repositories/role/api.ts b/frontend/repositories/role/api.ts
new file mode 100644
index 00000000..63f8b433
--- /dev/null
+++ b/frontend/repositories/role/api.ts
@@ -0,0 +1,16 @@
+import ApiService from '@/services/api.service'
+import { RoleItem } from '@/models/role'
+import { RoleItemListRepository, RoleItemResponse } from './interface'
+
+export class FromApiRoleItemListRepository implements RoleItemListRepository {
+  constructor(
+    private readonly request = ApiService
+  ) {}
+
+  async list(): Promise<RoleItem[]> {
+    const url = `/roles`
+    const response = await this.request.get(url)
+    const responseItems: RoleItemResponse[] = response.data
+    return responseItems.map(item => RoleItem.valueOf(item))
+  }
+}
diff --git a/frontend/repositories/role/interface.ts b/frontend/repositories/role/interface.ts
new file mode 100644
index 00000000..9076706f
--- /dev/null
+++ b/frontend/repositories/role/interface.ts
@@ -0,0 +1,10 @@
+import { RoleItem } from '@/models/role'
+
+export interface RoleItemResponse {
+  id: number,
+  name: string
+}
+
+export interface RoleItemListRepository {
+  list(): Promise<RoleItem[]>
+}