diff --git a/web/src/pages/Admin/RolesGroups/index.tsx b/web/src/pages/Admin/RolesGroups/index.tsx
index b867f22..6970113 100644
--- a/web/src/pages/Admin/RolesGroups/index.tsx
+++ b/web/src/pages/Admin/RolesGroups/index.tsx
@@ -1,10 +1,12 @@
 import { useEffect, type FC } from "react";
 import Breadcrumbs from "@/components/ui/breadcrumbs";
-import { getRolesApi } from "@/api/admin/roles";
+import { useRoles } from "@/store/admin/rolesGroups";
+import type { AppPermission } from "@/types";
 
 interface DisplayRole {
   name: string;
   description: string;
+  permissions: AppPermission[];
 }
 
 interface IPermissionGroupProps {
@@ -15,32 +17,51 @@ interface IPermissionGroupProps {
 const RolesGroup: FC<IPermissionGroupProps> = ({ scope, roles }) => {
   return (
     <div className="border dark:border-gray-800 border-gray-300 p-4 rounded mb-4">
-      <h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold">
-        {scope}
+      <h2 className="dark:text-gray-300 text-gray-800 text-lg font-semibold mb-4">
+        {scope.toUpperCase()} <span className="opacity-45">(scope)</span>
       </h2>
 
-      {(roles?.length ?? 0) > 0 && (
-        <ol className="grid gap-4 gap-y-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-gray-800 dark:text-gray-300 font-medium">
-          {roles!.map(({ name, description }) => (
-            <li className="before:w-2 before:h-2 before:block before:translate-y-2 before:bg-gray-400 dark:before:bg-gray-700 before:rounded-xs flex flex-row items-start gap-2">
-              <div className="flex flex-col gap-1">
-                <label>{name}</label>
-                <p className="text-xs text-gray-400 dark:text-gray-500">
-                  {description}
-                </p>
-              </div>
-            </li>
-          ))}
-        </ol>
-      )}
+      {roles?.map((role, index) => (
+        <div>
+          <h2 className="dark:text-gray-300 text-gray-800 text-md font-semibold">
+            {role.name.toUpperCase()} <span className="opacity-45">(role)</span>
+          </h2>
+
+          <p className="text-sm text-gray-400 dark:text-gray-500">
+            {role.description}
+          </p>
+
+          <ol className="grid gap-4 gap-y-3 grid-cols-1 my-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-gray-800 dark:text-gray-300 font-medium">
+            {role.permissions.map(({ name, description }) => (
+              <li className="before:w-2 before:h-2 before:block before:translate-y-2 before:bg-gray-400 dark:before:bg-gray-700 before:rounded-xs flex flex-row items-start gap-2">
+                <div className="flex flex-col gap-1">
+                  <label>{name}</label>
+                  <p className="text-xs text-gray-400 dark:text-gray-500">
+                    {description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ol>
+
+          {index + 1 < roles.length && (
+            <div className="h-0.5 bg-gray-700 w-full rounded my-6"></div>
+          )}
+        </div>
+      ))}
     </div>
   );
 };
 
 const AdminRolesGroupsPage: FC = () => {
+  const roles = useRoles((s) => s.roles);
+  const fetch = useRoles((s) => s.fetch);
+
   useEffect(() => {
-    getRolesApi().then((res) => console.log("roles:", res));
-  }, []);
+    fetch();
+  }, [fetch]);
+
+  console.log("roles:", roles);
 
   return (
     <div className="relative flex flex-col items-stretch w-full">
@@ -58,7 +79,11 @@ const AdminRolesGroupsPage: FC = () => {
           ]}
         />
       </div>
-      <div className="px-7"></div>
+      <div className="px-7">
+        {Object.keys(roles).map((scope) => (
+          <RolesGroup scope={scope} roles={roles[scope]} />
+        ))}
+      </div>
     </div>
   );
 };