diff --git a/web/src/App.tsx b/web/src/App.tsx
index e17c501..dda663f 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -28,6 +28,7 @@ import VerifyReviewPage from "./pages/Verify/Review";
 import AdminUserSessionsPage from "./pages/Admin/UserSessions";
 import AdminServiceSessionsPage from "./pages/Admin/ServiceSessions";
 import AdminAppPermissionsPage from "./pages/Admin/AppPermissions";
+import AdminRolesGroupsPage from "./pages/Admin/RolesGroups";
 
 const router = createBrowserRouter([
   {
@@ -100,6 +101,10 @@ const router = createBrowserRouter([
                   { index: true, element: <AdminAppPermissionsPage /> },
                 ],
               },
+              {
+                path: "roles-groups",
+                children: [{ index: true, element: <AdminRolesGroupsPage /> }],
+              },
             ],
           },
         ],
diff --git a/web/src/hooks/barItems.tsx b/web/src/hooks/barItems.tsx
index a910823..f604635 100644
--- a/web/src/hooks/barItems.tsx
+++ b/web/src/hooks/barItems.tsx
@@ -1,6 +1,7 @@
 import { useAuth } from "@/store/auth";
 import {
   Blocks,
+  ContactRound,
   EarthLock,
   Home,
   KeyRound,
@@ -107,6 +108,12 @@ export const useBarItems = (): [Item[], (item: Item) => boolean] => {
               tab: "admin.app-permissions",
               pathname: "/admin/app-permissions",
             },
+            {
+              icon: <ContactRound />,
+              title: "Roles & Groups",
+              tab: "admin.roles-groups",
+              pathname: "/admin/roles-groups",
+            },
           ]
         : []),
     ],