diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/CreatePage.tsx b/plugins/plugin-api-permissions/admin/src/pages/Roles/CreatePage.tsx
index 7e4354c..7b0a40f 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/CreatePage.tsx
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/CreatePage.tsx
@@ -17,56 +17,51 @@ import {
   useNotification,
   useRBAC,
 } from "@strapi/strapi/admin";
-import type React from "react";
-import { useRef, useState } from "react";
+import type { FormEvent } from "react";
+import { useMemo, useState } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQuery } from "react-query";
+import { useNavigate } from "react-router-dom";
 import type { GenericResponse } from "../../types/content-api";
-import { Permissions, type PermissionsRef } from "./components/Permissions";
+import { Permissions } from "./components/Permissions";
 import { PERMISSIONS } from "./constants";
-import { PermissionsProvider } from "./contexts/PermissionsContext";
-import { ROLES_BASE } from "./paths";
+import {
+  PermissionsProvider,
+  usePermissions,
+} from "./contexts/PermissionsContext";
+import { ROLES_BASE, ROLES_ROUTE_BASE } from "./paths";
 import {
   createEmptyFormState,
   type PermissionsFormState,
   type PermissionsLayout,
 } from "./utils/transform";
 
-export const RolesCreatePage = () => {
+type RolesCreatePageContentProps = {
+  layout: PermissionsLayout;
+  permissions: PermissionsFormState;
+};
+
+const RolesCreatePageContent = ({
+  layout,
+  permissions,
+}: RolesCreatePageContentProps) => {
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
-  const { get, post } = useFetchClient();
-  const permissionsRef = useRef<PermissionsRef>(null);
-  const goBack = () => {
-    if (typeof window !== "undefined") window.location.href = ROLES_BASE;
-  };
-
-  const {
-    allowedActions: { canCreate },
-  } = useRBAC({
-    create: PERMISSIONS.createRole,
-  });
+  const { post } = useFetchClient();
+  const { modifiedData } = usePermissions();
+  const navigate = useNavigate();
+  const goBack = () => navigate(ROLES_ROUTE_BASE);
 
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [error, setError] = useState<string | null>(null);
 
-  const { data: layoutData, isLoading: isLoadingLayout } = useQuery(
-    ["api-permissions", "permissions", "layout"],
-    async () =>
-      get<GenericResponse<{ sections: PermissionsLayout }>>(
-        "/api-permissions/permissions/layout",
-      ),
-  );
-
-  const layout = layoutData?.data?.data?.sections ?? null;
-
-  const permissionsForm: PermissionsFormState = layout
-    ? createEmptyFormState(layout)
-    : { collectionTypes: {}, singleTypes: {}, plugins: {}, settings: {} };
-
   const createMutation = useMutation(
-    (body: { name: string; description: string }) =>
+    (body: {
+      name: string;
+      description: string;
+      permissions: PermissionsFormState;
+    }) =>
       post("/api-permissions/roles", {
         data: body,
       }),
@@ -93,7 +88,7 @@ export const RolesCreatePage = () => {
     },
   );
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     if (!name || name.length < 3) {
@@ -105,17 +100,9 @@ export const RolesCreatePage = () => {
       );
       return;
     }
-    createMutation.mutate({ name, description });
+    createMutation.mutate({ name, description, permissions: modifiedData });
   };
 
-  if (!canCreate) {
-    return <Page.NoPermissions />;
-  }
-
-  if (isLoadingLayout || !layout) {
-    return <Page.Loading />;
-  }
-
   return (
     <Page.Main>
       <Page.Title>
@@ -173,6 +160,7 @@ export const RolesCreatePage = () => {
                         defaultMessage: "Details",
                       })}
                     </Typography>
+                    <br />
                     <Typography variant="pi" textColor="neutral600">
                       {formatMessage({
                         id: "Settings.roles.form.description",
@@ -259,13 +247,7 @@ export const RolesCreatePage = () => {
               </Flex>
             </Box>
             <Box shadow="filterShadow" hasRadius>
-              <PermissionsProvider permissions={permissionsForm}>
-                <Permissions
-                  ref={permissionsRef}
-                  permissions={permissionsForm}
-                  layout={layout}
-                />
-              </PermissionsProvider>
+              <Permissions permissions={permissions} layout={layout} />
             </Box>
           </Flex>
         </Layouts.Content>
@@ -274,6 +256,49 @@ export const RolesCreatePage = () => {
   );
 };
 
+export const RolesCreatePage = () => {
+  const { get } = useFetchClient();
+
+  const {
+    isLoading: isLoadingForPermissions,
+    allowedActions: { canCreate },
+  } = useRBAC({
+    create: PERMISSIONS.createRole,
+  });
+
+  const { data: layoutData, isLoading: isLoadingLayout } = useQuery(
+    ["api-permissions", "permissions", "layout"],
+    async () =>
+      get<GenericResponse<{ sections: PermissionsLayout }>>(
+        "/api-permissions/permissions/layout",
+      ),
+  );
+
+  const layout = layoutData?.data?.data?.sections ?? null;
+  const permissions = useMemo(
+    () => (layout ? createEmptyFormState(layout) : null),
+    [layout],
+  );
+
+  if (isLoadingForPermissions) {
+    return <Page.Loading />;
+  }
+
+  if (!canCreate) {
+    return <Page.NoPermissions />;
+  }
+
+  if (isLoadingLayout || !layout || !permissions) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <PermissionsProvider permissions={permissions}>
+      <RolesCreatePageContent layout={layout} permissions={permissions} />
+    </PermissionsProvider>
+  );
+};
+
 export const ProtectedRolesCreatePage = () => (
   <Page.Protect permissions={PERMISSIONS.accessRoles}>
     <RolesCreatePage />
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/EditPage.tsx b/plugins/plugin-api-permissions/admin/src/pages/Roles/EditPage.tsx
index b161871..90072d7 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/EditPage.tsx
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/EditPage.tsx
@@ -17,83 +17,71 @@ import {
   useNotification,
   useRBAC,
 } from "@strapi/strapi/admin";
-import type React from "react";
+import type { FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQuery } from "react-query";
+import { useNavigate } from "react-router-dom";
 import type { GenericResponse } from "../../types/content-api";
 import { Permissions, type PermissionsRef } from "./components/Permissions";
 import { PERMISSIONS } from "./constants";
-import { PermissionsProvider } from "./contexts/PermissionsContext";
-import { ROLES_BASE } from "./paths";
-import { apiToFormState, type PermissionsLayout } from "./utils/transform";
+import {
+  PermissionsProvider,
+  usePermissions,
+} from "./contexts/PermissionsContext";
+import { ROLES_BASE, ROLES_ROUTE_BASE } from "./paths";
+import {
+  apiToFormState,
+  type PermissionEntry,
+  type PermissionsFormState,
+  type PermissionsLayout,
+} from "./utils/transform";
 
 type RoleData = {
   name?: string;
   description?: string;
   nb_users?: number;
-  permissions?: Record<
-    string,
-    { controllers: Record<string, Record<string, { enabled: boolean }>> }
-  >;
+  permissions?: PermissionEntry[];
+};
+
+type RolesEditPageProps = {
+  description?: string;
+  id: string;
+  layout: PermissionsLayout;
+  name: string;
+  permissions: PermissionsFormState;
+  usersCount: number;
 };
 
-export const RolesEditPage = ({ id }: { id: string }) => {
+export const RolesEditPage = ({
+  description,
+  id,
+  layout,
+  name,
+  permissions,
+  usersCount = 0,
+}: RolesEditPageProps) => {
   const { formatMessage } = useIntl();
   const { toggleNotification } = useNotification();
-  const { get, put } = useFetchClient();
+  const { put } = useFetchClient();
   const permissionsRef = useRef<PermissionsRef>(null);
-  const goBack = () => {
-    if (typeof window !== "undefined") window.location.href = ROLES_BASE;
-  };
+  const navigate = useNavigate();
+  const goBack = () => navigate(ROLES_ROUTE_BASE);
 
   const {
+    isLoading: isLoadingForPermissions,
     allowedActions: { canUpdate },
-  } = useRBAC({
-    update: PERMISSIONS.updateRole,
-  });
+  } = useRBAC({ update: PERMISSIONS.updateRole });
 
-  const [name, setName] = useState("");
-  const [description, setDescription] = useState("");
   const [error, setError] = useState<string | null>(null);
-  const [initialised, setInitialised] = useState(false);
-
-  const { data: layoutData, isLoading: isLoadingLayout } = useQuery(
-    ["api-permissions", "permissions", "layout"],
-    async () =>
-      get<GenericResponse<{ sections: PermissionsLayout }>>(
-        "/api-permissions/permissions/layout",
-      ),
-  );
-
-  const { data: roleData, isLoading: isLoadingRole } = useQuery(
-    ["api-permissions", "roles", id],
-    async () => get<GenericResponse<RoleData>>(`/api-permissions/roles/${id}`),
-    {
-      enabled: !!id,
-      onSuccess: (res) => {
-        if (!initialised) {
-          setName(res.data?.data?.name ?? "");
-          setDescription(res.data?.data?.description ?? "");
-          setInitialised(true);
-        }
-      },
-    },
-  );
-
-  const layout = layoutData?.data?.data?.sections ?? null;
-  const roleApiData = roleData?.data?.data ?? null;
-
-  const permissionsForm = useMemo(
-    () =>
-      layout && roleApiData
-        ? apiToFormState(roleApiData?.permissions ?? {}, layout)
-        : null,
-    [layout, roleApiData],
-  );
+  const { modifiedData } = usePermissions();
 
   const updateMutation = useMutation(
-    (body: { name: string; description: string }) =>
+    (body: {
+      name: string;
+      description: string;
+      permissions: PermissionsFormState;
+    }) =>
       put(`/api-permissions/roles/${id}`, {
         data: body,
       }),
@@ -120,8 +108,13 @@ export const RolesEditPage = ({ id }: { id: string }) => {
     },
   );
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
+
+    const { name = "", description = "" } = Object.fromEntries(
+      new FormData(e.currentTarget as HTMLFormElement).entries(),
+    ) as Record<string, string>;
+
     setError(null);
     if (!name || name.length < 3) {
       setError(
@@ -132,10 +125,10 @@ export const RolesEditPage = ({ id }: { id: string }) => {
       );
       return;
     }
-    updateMutation.mutate({ name, description });
+    updateMutation.mutate({ name, description, permissions: modifiedData });
   };
 
-  if (isLoadingLayout || isLoadingRole || !permissionsForm || !layout) {
+  if (isLoadingForPermissions) {
     return <Page.Loading />;
   }
 
@@ -143,8 +136,6 @@ export const RolesEditPage = ({ id }: { id: string }) => {
     return <Page.NoPermissions />;
   }
 
-  const usersCount = roleApiData?.nb_users ?? 0;
-
   return (
     <Page.Main>
       <Page.Title>
@@ -202,6 +193,7 @@ export const RolesEditPage = ({ id }: { id: string }) => {
                         defaultMessage: "Details",
                       })}
                     </Typography>
+                    <br />
                     <Typography variant="pi" textColor="neutral600">
                       {formatMessage({
                         id: "Settings.roles.form.description",
@@ -256,11 +248,7 @@ export const RolesEditPage = ({ id }: { id: string }) => {
                           defaultMessage: "Name",
                         })}
                       </Field.Label>
-                      <TextInput
-                        value={name}
-                        onChange={(e) => setName(e.target.value)}
-                        type="text"
-                      />
+                      <TextInput defaultValue={name} type="text" />
                       <Field.Error />
                     </Field.Root>
                   </Grid.Item>
@@ -277,10 +265,7 @@ export const RolesEditPage = ({ id }: { id: string }) => {
                           defaultMessage: "Description",
                         })}
                       </Field.Label>
-                      <Textarea
-                        value={description}
-                        onChange={(e) => setDescription(e.target.value)}
-                      />
+                      <Textarea defaultValue={description} />
                       <Field.Error />
                     </Field.Root>
                   </Grid.Item>
@@ -288,13 +273,11 @@ export const RolesEditPage = ({ id }: { id: string }) => {
               </Flex>
             </Box>
             <Box shadow="filterShadow" hasRadius>
-              <PermissionsProvider permissions={permissionsForm}>
-                <Permissions
-                  ref={permissionsRef}
-                  permissions={permissionsForm}
-                  layout={layout}
-                />
-              </PermissionsProvider>
+              <Permissions
+                ref={permissionsRef}
+                permissions={permissions}
+                layout={layout}
+              />
             </Box>
           </Flex>
         </Layouts.Content>
@@ -303,8 +286,70 @@ export const RolesEditPage = ({ id }: { id: string }) => {
   );
 };
 
+const RolesEditPageWithPermissions = ({ id }: { id: string }) => {
+  const { get } = useFetchClient();
+
+  const [initialised, setInitialised] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+
+  const { data: layoutData, isLoading: isLoadingLayout } = useQuery(
+    ["api-permissions", "permissions", "layout"],
+    async () =>
+      get<GenericResponse<{ sections: PermissionsLayout }>>(
+        "/api-permissions/permissions/layout",
+      ),
+  );
+
+  const { data: roleData, isLoading: isLoadingRole } = useQuery(
+    ["api-permissions", "roles", id],
+    async () =>
+      get<GenericResponse<RoleData>>(
+        `/api-permissions/roles/${id}?populate=permissions`,
+      ),
+    {
+      enabled: !!id,
+      onSuccess: (res) => {
+        if (!initialised) {
+          setName(res.data?.data?.name ?? "");
+          setDescription(res.data?.data?.description ?? "");
+          setInitialised(true);
+        }
+      },
+    },
+  );
+
+  const layout = layoutData?.data?.data?.sections ?? null;
+  const roleApiData = roleData?.data?.data ?? null;
+
+  const permissionsForm = useMemo(
+    () =>
+      layout && roleApiData
+        ? apiToFormState(roleApiData?.permissions ?? [], layout)
+        : null,
+    [layout, roleApiData],
+  );
+
+  if (isLoadingLayout || isLoadingRole || !permissionsForm || !layout) {
+    return <Page.Loading />;
+  }
+
+  return (
+    <PermissionsProvider permissions={permissionsForm}>
+      <RolesEditPage
+        id={id}
+        name={name}
+        description={description}
+        permissions={permissionsForm}
+        layout={layout}
+        usersCount={roleApiData?.nb_users ?? 0}
+      />
+    </PermissionsProvider>
+  );
+};
+
 export const ProtectedRolesEditPage = ({ id }: { id: string }) => (
   <Page.Protect permissions={PERMISSIONS.accessRoles}>
-    <RolesEditPage id={id} />
+    <RolesEditPageWithPermissions id={id} />
   </Page.Protect>
 );
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/ListPage.tsx b/plugins/plugin-api-permissions/admin/src/pages/Roles/ListPage.tsx
index 7bac9dc..e93265d 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/ListPage.tsx
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/ListPage.tsx
@@ -1,15 +1,19 @@
 import {
+  Button,
+  Dialog,
   EmptyStateLayout,
-  LinkButton,
   Table,
   Th,
   Thead,
   Tr,
   Typography,
+  useCollator,
+  useFilter,
   VisuallyHidden,
 } from "@strapi/design-system";
 import { Plus } from "@strapi/icons";
 import {
+  ConfirmDialog,
   Layouts,
   Page,
   SearchInput,
@@ -18,12 +22,14 @@ import {
   useQueryParams,
   useRBAC,
 } from "@strapi/strapi/admin";
+import { useState } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQuery, useQueryClient } from "react-query";
+import { useNavigate } from "react-router-dom";
 import type { GenericResponse } from "../../types/content-api";
 import TableBody from "./components/TableBody";
 import { PERMISSIONS } from "./constants";
-import { ROLES_NEW } from "./paths";
+import { ROLES_ROUTE_NEW } from "./paths";
 
 type Role = {
   documentId: string;
@@ -35,12 +41,17 @@ type Role = {
 };
 
 export const RolesListPage = () => {
-  const { formatMessage } = useIntl();
+  const { formatMessage, locale } = useIntl();
   const { toggleNotification } = useNotification();
   const { get, del } = useFetchClient();
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
   const [{ query }] = useQueryParams<{ _q?: string }>();
   const _q = query?._q || "";
+  const { contains } = useFilter(locale);
+  const formatter = useCollator(locale, { sensitivity: "base" });
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
+  const [roleToDelete, setRoleToDelete] = useState<string>();
 
   const {
     isLoading: isLoadingForPermissions,
@@ -78,28 +89,41 @@ export const RolesListPage = () => {
 
   const sortedRoles = roles
     .filter(
-      (role) =>
-        !_q ||
-        role.name.toLowerCase().includes(_q.toLowerCase()) ||
-        (role.description ?? "").toLowerCase().includes(_q.toLowerCase()),
+      (role) => contains(role.name, _q) || contains(role.description ?? "", _q),
     )
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-  const handleDeleteClick = async (id: string, name: string) => {
-    const confirmed = window.confirm(
-      formatMessage(
-        {
-          id: "app.components.ConfirmDialog.body",
-          defaultMessage: "Are you sure you want to delete {target}?",
-        },
-        { target: name },
-      ),
+    .sort(
+      (a, b) =>
+        formatter.compare(a.name, b.name) ||
+        formatter.compare(a.description ?? "", b.description ?? ""),
     );
-    if (!confirmed) return;
-    deleteMutation.mutate(id);
+
+  const handleDeleteClick = (id: string) => {
+    setRoleToDelete(id);
+    setShowConfirmDelete(true);
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!roleToDelete) return;
+
+    await deleteMutation.mutateAsync(roleToDelete);
+    setShowConfirmDelete(false);
+    setRoleToDelete(undefined);
   };
 
+  const goToCreate = () => navigate(ROLES_ROUTE_NEW);
+
   const isLoading = isLoadingData || isLoadingForPermissions;
+  const emptyLayout = {
+    roles: {
+      id: "api-permissions.Roles.empty",
+      defaultMessage: "You don't have any roles yet.",
+    },
+    search: {
+      id: "api-permissions.Roles.empty.search",
+      defaultMessage: "No roles match the search.",
+    },
+  };
+  const emptyContent = _q && !sortedRoles.length ? "search" : "roles";
 
   if (isLoading) {
     return <Page.Loading />;
@@ -126,12 +150,17 @@ export const RolesListPage = () => {
         })}
         primaryAction={
           canCreate ? (
-            <LinkButton href={ROLES_NEW} startIcon={<Plus />} size="S">
+            <Button
+              onClick={goToCreate}
+              startIcon={<Plus />}
+              size="S"
+              fullWidth
+            >
               {formatMessage({
                 id: "api-permissions.List.button.roles",
                 defaultMessage: "Add new role",
               })}
-            </LinkButton>
+            </Button>
           ) : null
         }
       />
@@ -194,13 +223,13 @@ export const RolesListPage = () => {
           </Table>
         ) : (
           <EmptyStateLayout
-            content={formatMessage({
-              id: "api-permissions.Roles.empty",
-              defaultMessage: "You don't have any roles yet.",
-            })}
+            content={formatMessage(emptyLayout[emptyContent])}
           />
         )}
       </Layouts.Content>
+      <Dialog.Root open={showConfirmDelete} onOpenChange={setShowConfirmDelete}>
+        <ConfirmDialog onConfirm={handleConfirmDelete} />
+      </Dialog.Root>
     </Page.Main>
   );
 };
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/components/TableBody.tsx b/plugins/plugin-api-permissions/admin/src/pages/Roles/components/TableBody.tsx
index 4c0faea..3bb65c7 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/components/TableBody.tsx
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/components/TableBody.tsx
@@ -1,7 +1,6 @@
 import {
   Flex,
   IconButton,
-  Link,
   Tbody,
   Td,
   Tr,
@@ -10,8 +9,9 @@ import {
 import { Pencil, Trash } from "@strapi/icons";
 import type React from "react";
 import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
 
-import { ROLES_BASE } from "../paths";
+import { ROLES_ROUTE_BASE } from "../paths";
 
 interface Role {
   documentId: string;
@@ -36,10 +36,8 @@ const TableBody = ({
   onDeleteClick,
 }: TableBodyProps) => {
   const { formatMessage } = useIntl();
-  const goToEdit = (id: string) => {
-    if (typeof window !== "undefined")
-      window.location.href = `${ROLES_BASE}/${id}`;
-  };
+  const navigate = useNavigate();
+  const goToEdit = (id: string) => navigate(`${ROLES_ROUTE_BASE}/${id}`);
 
   const checkCanDeleteRole = (role: Role) =>
     canDelete && !["public", "authenticated"].includes(role.type);
@@ -49,6 +47,11 @@ const TableBody = ({
     onDeleteClick(id, name);
   };
 
+  const handleClickEdit = (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    goToEdit(id);
+  };
+
   return (
     <Tbody>
       {sortedRoles.map((role) => (
@@ -78,19 +81,19 @@ const TableBody = ({
           <Td>
             <Flex justifyContent="end" onClick={(e) => e.stopPropagation()}>
               {canUpdate ? (
-                <Link
-                  href={`${ROLES_BASE}/${role.documentId}`}
-                  aria-label={formatMessage(
+                <IconButton
+                  onClick={(e) => handleClickEdit(e, role.documentId)}
+                  variant="ghost"
+                  label={formatMessage(
                     {
                       id: "app.component.table.edit",
                       defaultMessage: "Edit {target}",
                     },
                     { target: role.name },
                   )}
-                  onClick={(e) => e.stopPropagation()}
                 >
                   <Pencil />
-                </Link>
+                </IconButton>
               ) : null}
               {checkCanDeleteRole(role) && (
                 <IconButton
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/index.tsx b/plugins/plugin-api-permissions/admin/src/pages/Roles/index.tsx
index 597e76f..dc4f25c 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/index.tsx
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/index.tsx
@@ -1,4 +1,5 @@
 import { Page } from "@strapi/strapi/admin";
+import { useLocation } from "react-router-dom";
 import { ProtectedRolesCreatePage } from "./CreatePage";
 import { PERMISSIONS } from "./constants";
 import { ProtectedRolesEditPage } from "./EditPage";
@@ -6,11 +7,9 @@ import { ProtectedRolesListPage } from "./ListPage";
 import { ROLES_BASE } from "./paths";
 
 const Roles = () => {
-  const path = typeof window !== "undefined" ? window.location.pathname : "";
+  const { pathname: path } = useLocation();
   const isCreate = path === `${ROLES_BASE}/new` || path.endsWith("/roles/new");
-  const editMatch = path.match(
-    new RegExp(`${ROLES_BASE.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}/([^/]+)$`),
-  );
+  const editMatch = path.match(/\/settings\/api-permissions\/roles\/([^/]+)$/);
   const editId = editMatch && editMatch[1] !== "new" ? editMatch[1] : null;
 
   return (
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/paths.ts b/plugins/plugin-api-permissions/admin/src/pages/Roles/paths.ts
index 100f623..e668638 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/paths.ts
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/paths.ts
@@ -1,2 +1,4 @@
-export const ROLES_BASE = "/admin/settings/api-permissions/roles";
+export const ROLES_ROUTE_BASE = "/settings/api-permissions/roles";
+export const ROLES_BASE = `/admin${ROLES_ROUTE_BASE}`;
 export const ROLES_NEW = `${ROLES_BASE}/new`;
+export const ROLES_ROUTE_NEW = `${ROLES_ROUTE_BASE}/new`;
diff --git a/plugins/plugin-api-permissions/admin/src/pages/Roles/utils/transform.ts b/plugins/plugin-api-permissions/admin/src/pages/Roles/utils/transform.ts
index 3659f50..6daf454 100644
--- a/plugins/plugin-api-permissions/admin/src/pages/Roles/utils/transform.ts
+++ b/plugins/plugin-api-permissions/admin/src/pages/Roles/utils/transform.ts
@@ -45,6 +45,44 @@ export type ApiPermissionsFormat = Record<
   { controllers: Record<string, Record<string, { enabled: boolean }>> }
 >;
 
+export type PermissionEntry = {
+  id: number;
+  documentId: string;
+  action: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+};
+
+/**
+ * Transform array of permission entries to a matrix format for easier processing.
+ * @param permissions Array of permission entries from the API.
+ * @returns Matrix format of permissions.
+ */
+export function permissionsToMatrix(
+  permissions: PermissionEntry[],
+): ApiPermissionsFormat {
+  const matrix: ApiPermissionsFormat = {};
+
+  for (const entry of permissions) {
+    if (!entry?.action) continue;
+
+    // Splits "api::article.article.find" into ["api::article", "article", "find"]
+    const parts = entry.action.split(".");
+    if (parts.length < 3) continue;
+
+    const actionName = parts.pop()!;
+    const controllerName = parts.pop()!;
+    const apiKey = parts.join(".");
+
+    matrix[apiKey] ??= { controllers: {} };
+    matrix[apiKey].controllers[controllerName] ??= {};
+    matrix[apiKey].controllers[controllerName][actionName] = { enabled: true };
+  }
+
+  return matrix;
+}
+
 /**
  * Create empty form state from layout.
  */
@@ -115,23 +153,26 @@ export function createEmptyFormState(
  * Transform API format (from role.permissions) to form state.
  */
 export function apiToFormState(
-  api: ApiPermissionsFormat,
+  api: PermissionEntry[],
   layout: PermissionsLayout,
 ): PermissionsFormState {
   const form = createEmptyFormState(layout);
+  const matrix = permissionsToMatrix(api);
 
   const collectionUids = new Set(
     layout.collectionTypes.subjects.map((s) => s.uid),
   );
   const singleUids = new Set(layout.singleTypes.subjects.map((s) => s.uid));
 
-  for (const [typeKey, typeData] of Object.entries(api)) {
+  for (const [typeKey, typeData] of Object.entries(matrix)) {
     if (!typeData?.controllers) continue;
+
     for (const [controllerName, controllerData] of Object.entries(
       typeData.controllers,
     )) {
       for (const [actionName, actionData] of Object.entries(controllerData)) {
         if (!actionData?.enabled) continue;
+
         if (typeKey.startsWith("api::")) {
           const ctUid = `${typeKey}.${controllerName}`;
           if (
diff --git a/plugins/plugin-api-permissions/admin/test/e2e/roles.spec.ts b/plugins/plugin-api-permissions/admin/test/e2e/roles.spec.ts
index 771775b..1eba10c 100644
--- a/plugins/plugin-api-permissions/admin/test/e2e/roles.spec.ts
+++ b/plugins/plugin-api-permissions/admin/test/e2e/roles.spec.ts
@@ -38,7 +38,7 @@ test.describe("Roles list page", () => {
     await page.goto(ROLES_URL);
 
     await expect(
-      page.getByRole("link", { name: /add new role/i }),
+      page.getByRole("button", { name: /add new role/i }),
     ).toBeVisible();
   });
 
@@ -53,7 +53,7 @@ test.describe("Roles list page", () => {
 test.describe("Create role", () => {
   test("navigates to create page from list", async ({ page }) => {
     await page.goto(ROLES_URL);
-    await page.getByRole("link", { name: /add new role/i }).click();
+    await page.getByRole("button", { name: /add new role/i }).click();
 
     await expect(page).toHaveURL(ROLES_NEW_URL);
     await expect(
@@ -107,6 +107,28 @@ test.describe("Edit role", () => {
     );
   });
 
+  test("saves and reloads selected permissions", async ({ page }) => {
+    await page.goto(ROLES_URL);
+
+    await getRoleCell(page, TEST_ROLE_NAME).click();
+
+    const findTestPermission = page.getByRole("checkbox", {
+      name: /select find test permission/i,
+    });
+    await findTestPermission.click();
+    await expect(findTestPermission).toBeChecked();
+
+    await page.getByRole("button", { name: /save/i }).click();
+    await expect(page).toHaveURL(ROLES_URL);
+
+    await getRoleCell(page, TEST_ROLE_NAME).click();
+    await expect(
+      page.getByRole("checkbox", {
+        name: /select find test permission/i,
+      }),
+    ).toBeChecked();
+  });
+
   test("updates the role name and redirects to list", async ({ page }) => {
     await page.goto(ROLES_URL);
 
@@ -180,9 +202,12 @@ test.describe("Delete role", () => {
       .filter({ has: page.locator("td", { hasText: UPDATED_ROLE_NAME }) });
     const deleteButton = roleRow.getByRole("button", { name: /^delete/i });
 
-    page.once("dialog", (dialog) => dialog.accept());
     await deleteButton.click();
 
+    const confirmDialog = page.getByRole("alertdialog");
+    await expect(confirmDialog).toBeVisible();
+    await confirmDialog.getByRole("button", { name: /^confirm$/i }).click();
+
     await expect(getRoleCell(page, UPDATED_ROLE_NAME)).not.toBeVisible();
   });
 });
diff --git a/plugins/plugin-api-permissions/package.json b/plugins/plugin-api-permissions/package.json
index 34149af..4dd2630 100644
--- a/plugins/plugin-api-permissions/package.json
+++ b/plugins/plugin-api-permissions/package.json
@@ -80,6 +80,7 @@
     "@strapi/utils": "^5.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-query": "^3.0.0",
+    "react-router-dom": "^6.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-intl": "^6.0.0 || ^7.0.0",
     "styled-components": "^5.0.0 || ^6.0.0"
diff --git a/plugins/plugin-api-permissions/server/src/controllers/role.ts b/plugins/plugin-api-permissions/server/src/controllers/role.ts
index 6d3806f..886911b 100644
--- a/plugins/plugin-api-permissions/server/src/controllers/role.ts
+++ b/plugins/plugin-api-permissions/server/src/controllers/role.ts
@@ -1,4 +1,49 @@
 import { factories } from "@strapi/strapi";
 import { ROLE_UID } from "../utils";
 
-export default factories.createCoreController(ROLE_UID);
+export default factories.createCoreController(ROLE_UID, ({ strapi }) => {
+  const service = strapi.plugin("api-permissions").service("permission");
+
+  return {
+    async create(ctx) {
+      const body = (ctx.request.body as { data: Record<string, unknown> }) || {
+        data: {},
+      };
+
+      if (!body) return super.create(ctx);
+
+      const { permissions = {}, ...rest } = body.data;
+      body.data = rest;
+
+      const result = await super.create(ctx);
+
+      const actions = service.extractActionsFromPermissions(permissions);
+      await service.connectRolesToPermissions(
+        result.data.documentId,
+        actions || [],
+      );
+
+      return result;
+    },
+
+    async update(ctx) {
+      const body = (ctx.request.body as { data: Record<string, unknown> }) || {
+        data: {},
+      };
+
+      if (!body) return super.update(ctx);
+
+      const { permissions, ...rest } = body.data;
+      body.data = rest;
+
+      const result = await super.update(ctx);
+
+      if (permissions !== undefined) {
+        const actions = service.extractActionsFromPermissions(permissions);
+        await service.connectRolesToPermissions(ctx.params.id, actions);
+      }
+
+      return result;
+    },
+  };
+});
diff --git a/plugins/plugin-api-permissions/server/src/services/permission.ts b/plugins/plugin-api-permissions/server/src/services/permission.ts
index 50ec1ba..e338bb4 100644
--- a/plugins/plugin-api-permissions/server/src/services/permission.ts
+++ b/plugins/plugin-api-permissions/server/src/services/permission.ts
@@ -128,10 +128,129 @@ function buildPermissionsLayout(strapi: Core.Strapi): {
   };
 }
 
+interface PermissionProperty {
+  properties: {
+    enabled: boolean;
+  };
+}
+
+type PermissionsPayload = {
+  collectionTypes?: Record<string, Record<string, PermissionProperty>>;
+  singleTypes?: Record<string, Record<string, PermissionProperty>>;
+  plugins?: Record<string, Record<string, Record<string, PermissionProperty>>>;
+  settings?: Record<string, Record<string, Record<string, PermissionProperty>>>;
+};
+
+/**
+ * Extracts enabled actions from the permissions payload.
+ * @param payload The permissions payload containing collection types, single types, plugins, and settings.
+ * @returns An array of strings representing the enabled actions in the format:
+ *          - For collection and single types: "api::\<uid\>.\<action\>"
+ *          - For plugins: "plugin::\<plugin-name\>.\<controller\>.\<action\>"
+ *          - For settings: "plugin::\<setting-name\>.\<controller\>.\<action\>"
+ */
+function extractActionsFromPermissions(payload: PermissionsPayload): string[] {
+  const actions: Set<string> = new Set();
+
+  const contentTypes = { ...payload.collectionTypes, ...payload.singleTypes };
+  for (const [uid, controllerActions] of Object.entries(contentTypes)) {
+    for (const [actionName, config] of Object.entries(controllerActions)) {
+      if (config?.properties?.enabled) {
+        actions.add(`${uid}.${actionName}`);
+      }
+    }
+  }
+
+  if (payload.plugins) {
+    for (const [pluginName, controllers] of Object.entries(payload.plugins)) {
+      for (const [controllerName, controllerActions] of Object.entries(
+        controllers,
+      )) {
+        for (const [actionName, config] of Object.entries(controllerActions)) {
+          if (config?.properties?.enabled) {
+            actions.add(
+              `plugin::${pluginName}.${controllerName}.${actionName}`,
+            );
+          }
+        }
+      }
+    }
+  }
+
+  if (payload.settings) {
+    for (const [settingName, controllers] of Object.entries(payload.settings)) {
+      for (const [controllerName, controllerActions] of Object.entries(
+        controllers,
+      )) {
+        for (const [actionName, config] of Object.entries(controllerActions)) {
+          if (config?.properties?.enabled) {
+            actions.add(
+              `plugin::${settingName}.${controllerName}.${actionName}`,
+            );
+          }
+        }
+      }
+    }
+  }
+
+  return Array.from(actions);
+}
+
+export async function connectRolesToPermissions(
+  roleID: string,
+  actionList: string[] = [],
+  strapi: Core.Strapi,
+) {
+  return strapi.db.transaction(async () => {
+    const existing = await strapi
+      .documents("plugin::api-permissions.permission")
+      .findMany({
+        populate: ["role"],
+        filters: {
+          action: { $in: actionList },
+          $or: [
+            { role: { documentId: { $eq: roleID } } },
+            { role: { documentId: { $null: true } } },
+          ],
+        },
+        fields: ["documentId", "action"],
+      });
+
+    const permissionMap = new Map(
+      existing.map((p) => [p.action, p.documentId]),
+    );
+
+    const targetDocumentIds = await Promise.all(
+      actionList.map(async (action) => {
+        if (permissionMap.has(action)) return permissionMap.get(action)!;
+
+        const newPermission = await strapi
+          .documents("plugin::api-permissions.permission")
+          .create({ data: { action } });
+
+        return newPermission.documentId;
+      }),
+    );
+
+    await strapi.documents("plugin::api-permissions.role").update({
+      documentId: roleID,
+      data: { permissions: { set: targetDocumentIds } },
+    });
+
+    await strapi.db.query("plugin::api-permissions.permission").deleteMany({
+      where: { role: { $null: true } },
+    });
+  });
+}
+
 export default ({ strapi }: { strapi: Core.Strapi }) => {
   return {
     getPermissionsLayout() {
       return buildPermissionsLayout(strapi);
     },
+    extractActionsFromPermissions,
+    connectRolesToPermissions(id: string, actions: string[]) {
+      return connectRolesToPermissions(id, actions, strapi);
+    },
   };
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99c5845..379c3c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -192,6 +192,9 @@ importers:
       react-query:
         specifier: ^3.0.0
         version: 3.39.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-router-dom:
+        specifier: ^6.0.0
+        version: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       styled-components:
         specifier: ^5.0.0 || ^6.0.0
         version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -4546,6 +4549,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@vercel/oidc@3.0.5':
     resolution: {integrity: sha512-fnYhv671l+eTTp48gB4zEsTW/YtRgRPnkI2nT7x6qw5rkI1Lq2hTmQIpHPgyThI0znLK+vX2n9XxKdXZ7BUbbw==}