diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/CreatePage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/CreatePage/index.js
new file mode 100644
index 0000000000..4a2297cfdf
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/CreatePage/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const RolesCreatePage = () => <div>Role create</div>;
+
+export default RolesCreatePage;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/EditPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/EditPage/index.js
new file mode 100644
index 0000000000..1ee7c75e7b
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/EditPage/index.js
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const RolesEditPage = () => <div>Role edit</div>;
+
+export default RolesEditPage;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedCreatePage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedCreatePage/index.js
new file mode 100644
index 0000000000..bce451f817
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedCreatePage/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../../permissions';
+import RolesCreatePage from '../CreatePage';
+
+const ProtectedRolesCreatePage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.createRole}>
+    <RolesCreatePage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesCreatePage;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedEditPage/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedEditPage/index.js
new file mode 100644
index 0000000000..568dbc612b
--- /dev/null
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/ProtectedEditPage/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { CheckPagePermissions } from 'strapi-helper-plugin';
+import pluginPermissions from '../../../permissions';
+import RolesEditPage from '../EditPage';
+
+const ProtectedRolesEditPage = () => (
+  <CheckPagePermissions permissions={pluginPermissions.updateRole}>
+    <RolesEditPage />
+  </CheckPagePermissions>
+);
+
+export default ProtectedRolesEditPage;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/index.js b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/index.js
index 479352e3ee..9aed208f5b 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/containers/Roles/index.js
@@ -1,7 +1,45 @@
 import React from 'react';
+import { Switch, Route, Link } from 'react-router-dom';
+import { useGlobalContext, CheckPagePermissions, NotFound } from 'strapi-helper-plugin';
+import pluginId from '../../pluginId';
+import pluginPermissions from '../../permissions';
 
-const RolesPage = () => {
-  return <div>Roles</div>;
+import ProtectedRolesEditPage from './ProtectedEditPage';
+import ProtectedRolesCreatePage from './ProtectedCreatePage';
+
+const RolesListPage = () => {
+  return (
+    <CheckPagePermissions permissions={pluginPermissions.accessRoles}>
+      <div>Role list</div>
+      <div>
+        <Link to="/settings/users-permissions/roles/1">Edit Role</Link>
+      </div>
+      <div>
+        <Link to="/settings/users-permissions/roles/new">Create Role</Link>
+      </div>
+    </CheckPagePermissions>
+  );
 };
 
-export default RolesPage;
+const Roles = () => {
+  const { settingsBaseURL } = useGlobalContext();
+
+  return (
+    <Switch>
+      <Route
+        path={`${settingsBaseURL}/${pluginId}/roles/new`}
+        component={ProtectedRolesCreatePage}
+        exact
+      />
+      <Route
+        path={`${settingsBaseURL}/${pluginId}/roles/:id`}
+        component={ProtectedRolesEditPage}
+        exact
+      />
+      <Route path={`${settingsBaseURL}/${pluginId}/roles`} component={RolesListPage} exact />
+      <Route path="" component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Roles;
diff --git a/packages/strapi-plugin-users-permissions/admin/src/index.js b/packages/strapi-plugin-users-permissions/admin/src/index.js
index 4ec95e99d0..a8390cb286 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/index.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/index.js
@@ -53,12 +53,8 @@ export default strapi => {
             },
             name: 'roles',
             to: `${strapi.settingsBaseURL}/${pluginId}/roles`,
-            Component: () => (
-              <CheckPagePermissions permissions={pluginPermissions.settings}>
-                <RolesPage />
-              </CheckPagePermissions>
-            ),
-            permissions: pluginPermissions.settings,
+            Component: () => <RolesPage />,
+            permissions: pluginPermissions.accessRoles,
           },
           {
             title: {
@@ -68,11 +64,11 @@ export default strapi => {
             name: 'providers',
             to: `${strapi.settingsBaseURL}/${pluginId}/providers`,
             Component: () => (
-              <CheckPagePermissions permissions={pluginPermissions.settings}>
+              <CheckPagePermissions permissions={pluginPermissions.readProviders}>
                 <ProvidersPage />
               </CheckPagePermissions>
             ),
-            permissions: pluginPermissions.settings,
+            permissions: pluginPermissions.readProviders,
           },
           {
             title: {
@@ -82,11 +78,11 @@ export default strapi => {
             name: 'email-templates',
             to: `${strapi.settingsBaseURL}/${pluginId}/email-templates`,
             Component: () => (
-              <CheckPagePermissions permissions={pluginPermissions.settings}>
+              <CheckPagePermissions permissions={pluginPermissions.readEmailTemplates}>
                 <EmailTemplatesPage />
               </CheckPagePermissions>
             ),
-            permissions: pluginPermissions.settings,
+            permissions: pluginPermissions.readEmailTemplates,
           },
           {
             title: {
@@ -96,11 +92,11 @@ export default strapi => {
             name: 'advanced-settings',
             to: `${strapi.settingsBaseURL}/${pluginId}/advanced-settings`,
             Component: () => (
-              <CheckPagePermissions permissions={pluginPermissions.settings}>
+              <CheckPagePermissions permissions={pluginPermissions.readAdvancedSettings}>
                 <AdvancedSettingsPage />
               </CheckPagePermissions>
             ),
-            permissions: pluginPermissions.settings,
+            permissions: pluginPermissions.readAdvancedSettings,
           },
         ],
       },
diff --git a/packages/strapi-plugin-users-permissions/admin/src/permissions.js b/packages/strapi-plugin-users-permissions/admin/src/permissions.js
index 0785b716a8..7f90c70854 100644
--- a/packages/strapi-plugin-users-permissions/admin/src/permissions.js
+++ b/packages/strapi-plugin-users-permissions/admin/src/permissions.js
@@ -1,15 +1,16 @@
 const pluginPermissions = {
-  // This permission regards the main component (App) and is used to tell
-  // If the plugin link should be displayed in the menu
-  // And also if the plugin is accessible. This use case is found when a user types the url of the
-  // plugin directly in the browser
-  main: [
-    { action: 'plugins::users-permissions.advanced-settings.read', subject: null },
-    { action: 'plugins::users-permissions.email-templates.read', subject: null },
-    { action: 'plugins::users-permissions.providers.read', subject: null },
+  // Roles
+  accessRoles: [
+    { action: 'plugins::users-permissions.roles.create', subject: null },
     { action: 'plugins::users-permissions.roles.read', subject: null },
+    { action: 'plugins::users-permissions.roles.update', subject: null },
   ],
   createRole: [{ action: 'plugins::users-permissions.roles.create', subject: null }],
+  deleteRole: [{ action: 'plugins::users-permissions.roles.delete', subject: null }],
+  readRoles: [{ action: 'plugins::users-permissions.roles.read', subject: null }],
+  updateRole: [{ action: 'plugins::users-permissions.roles.update', subject: null }],
+
+  // AdvancedSettings
   readAdvancedSettings: [
     { action: 'plugins::users-permissions.advanced-settings.read', subject: null },
     { action: 'plugins::users-permissions.advanced-settings.update', subject: null },
@@ -17,6 +18,8 @@ const pluginPermissions = {
   updateAdvancedSettings: [
     { action: 'plugins::users-permissions.advanced-settings.update', subject: null },
   ],
+
+  // Emails
   readEmailTemplates: [
     { action: 'plugins::users-permissions.email-templates.read', subject: null },
     { action: 'plugins::users-permissions.email-templates.update', subject: null },
@@ -24,17 +27,13 @@ const pluginPermissions = {
   updateEmailTemplates: [
     { action: 'plugins::users-permissions.email-templates.update', subject: null },
   ],
+
+  // Providers
   readProviders: [
     { action: 'plugins::users-permissions.providers.read', subject: null },
     { action: 'plugins::users-permissions.providers.update', subject: null },
   ],
   updateProviders: [{ action: 'plugins::users-permissions.providers.update', subject: null }],
-  readRoles: [
-    { action: 'plugins::users-permissions.roles.read', subject: null },
-    { action: 'plugins::users-permissions.roles.update', subject: null },
-  ],
-  updateRole: [{ action: 'plugins::users-permissions.roles.update', subject: null }],
-  deleteRole: [{ action: 'plugins::users-permissions.roles.delete', subject: null }],
 };
 
 export default pluginPermissions;