diff --git a/web/src/api/admin/roles.ts b/web/src/api/admin/roles.ts
new file mode 100644
index 0000000..1a8def8
--- /dev/null
+++ b/web/src/api/admin/roles.ts
@@ -0,0 +1,20 @@
+import type { AppPermission, AppRole } from "@/types";
+import { axios, handleApiError } from "..";
+
+export type FetchGroupedRolesResponse = {
+  scope: string;
+  roles: (AppRole & {
+    permissions: AppPermission[];
+  })[];
+}[];
+
+export const getRolesApi = async (): Promise<FetchGroupedRolesResponse> => {
+  const response = await axios.get<FetchGroupedRolesResponse>(
+    "/api/v1/admin/roles",
+  );
+
+  if (response.status !== 200 && response.status !== 201)
+    throw await handleApiError(response);
+
+  return response.data;
+};
diff --git a/web/src/types/index.ts b/web/src/types/index.ts
index 7f8aed4..67e56f8 100644
--- a/web/src/types/index.ts
+++ b/web/src/types/index.ts
@@ -85,3 +85,10 @@ export interface AppPermission {
   scope: string;
   description: string;
 }
+
+export interface AppRole {
+  id: string;
+  name: string;
+  scope: string;
+  description: string;
+}