diff --git a/web/src/store/admin/rolesGroups.ts b/web/src/store/admin/rolesGroups.ts
new file mode 100644
index 0000000..760aa8f
--- /dev/null
+++ b/web/src/store/admin/rolesGroups.ts
@@ -0,0 +1,36 @@
+import { getRolesApi } from "@/api/admin/roles";
+import type { AppPermission, AppRole } from "@/types";
+import { create } from "zustand";
+
+export type RolesMap = Record<
+  string,
+  (AppRole & { permissions: AppPermission[] })[]
+>;
+
+export interface IRolesGroups {
+  roles: RolesMap;
+
+  fetching: boolean;
+
+  fetch: () => Promise<void>;
+}
+
+export const useRoles = create<IRolesGroups>((set) => ({
+  roles: {},
+  fetching: false,
+
+  fetch: async () => {
+    set({ fetching: true });
+
+    try {
+      const response = await getRolesApi();
+      set({
+        roles: Object.fromEntries(response.map((r) => [r.scope, r.roles])),
+      });
+    } catch (err) {
+      console.log("ERR: Failed to fetch admin roles:", err);
+    } finally {
+      set({ fetching: false });
+    }
+  },
+}));