From b26a4fe66b066bf1bbb932c3395796fd579156a7 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 21 Oct 2021 15:50:17 +0200
Subject: [PATCH 1/3] Add back button to roles pages

Signed-off-by: soupette <cyril@strapi.io>
---
 .../pages/Roles/EditPage/index.js             |  12 +-
 .../tests/__snapshots__/index.test.js.snap    | 654 ++++++++++-------
 .../pages/Roles/CreatePage/index.js           |  10 +
 .../tests/__snapshots__/index.test.js.snap    | 690 ++++++++++--------
 4 files changed, 813 insertions(+), 553 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
index a07e3635b7..d5009b1454 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/index.js
@@ -1,3 +1,4 @@
+import React, { useRef, useState } from 'react';
 import {
   request,
   useNotification,
@@ -12,8 +13,9 @@ import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { Main } from '@strapi/parts/Main';
 import { Stack } from '@strapi/parts/Stack';
 import { Formik } from 'formik';
+import { Link } from '@strapi/parts/Link';
+import BackIcon from '@strapi/icons/BackIcon';
 import get from 'lodash/get';
-import React, { useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useRouteMatch } from 'react-router-dom';
 import { Permissions, RoleForm } from './components';
@@ -129,6 +131,14 @@ const EditPage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
+                navigationAction={
+                  <Link startIcon={<BackIcon />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 <Stack size={6}>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index ad500f3ae4..721b0dc54a 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<EditPage /> renders and matches the snapshot 1`] = `
-.c41 {
+.c48 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,33 +13,33 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c16 {
+.c23 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c10 {
+.c17 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c22 {
+.c29 {
   font-weight: 500;
   font-size: 0.75rem;
   line-height: 1.33;
   color: #32324d;
 }
 
-.c11 {
+.c18 {
   font-weight: 600;
   line-height: 1.14;
 }
 
-.c7 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -53,21 +53,21 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c7 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c7 svg > g,
-.c7 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c7[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c7:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -82,11 +82,11 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c7:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c7:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -97,7 +97,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c8 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -109,7 +109,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   background: #4945ff;
 }
 
-.c8 .sc-dwfUuu {
+.c15 .sc-dwfUuu {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -120,49 +120,49 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c8 .c9 {
+.c15 .c16 {
   color: #ffffff;
 }
 
-.c8[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c8[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c8[aria-disabled='true'] svg > g,
-.c8[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,
+.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c8[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c8[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c8[aria-disabled='true']:active svg > g,
-.c8[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,
+.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c8:hover {
+.c15:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c8:active {
+.c15:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c21 {
+.c28 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -174,7 +174,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c21 .sc-dwfUuu {
+.c28 .sc-dwfUuu {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -185,66 +185,66 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c21 .c9 {
+.c28 .c16 {
   color: #ffffff;
 }
 
-.c21[aria-disabled='true'] {
+.c28[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c21[aria-disabled='true'] .c9 {
+.c28[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c21[aria-disabled='true'] svg > g,
-.c21[aria-disabled='true'] svg path {
+.c28[aria-disabled='true'] svg > g,
+.c28[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c21[aria-disabled='true']:active {
+.c28[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c21[aria-disabled='true']:active .c9 {
+.c28[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c21[aria-disabled='true']:active svg > g,
-.c21[aria-disabled='true']:active svg path {
+.c28[aria-disabled='true']:active svg > g,
+.c28[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c21:hover {
+.c28:hover {
   background-color: #ffffff;
 }
 
-.c21:active {
+.c28:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c21:active .c9 {
+.c28:active .c16 {
   color: #4945ff;
 }
 
-.c21:active svg > g,
-.c21:active svg path {
+.c28:active svg > g,
+.c28:active svg path {
   fill: #4945ff;
 }
 
-.c21 .c9 {
+.c28 .c16 {
   color: #271fe0;
 }
 
-.c21 svg > g,
-.c21 svg path {
+.c28 svg > g,
+.c28 svg path {
   fill: #271fe0;
 }
 
-.c39 {
+.c46 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -256,12 +256,12 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c40 {
+.c47 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
 }
 
-.c18 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -279,7 +279,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c37 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -297,7 +297,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c5 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -311,7 +311,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c15 {
+.c22 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -321,16 +321,16 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c15 > * {
+.c22 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c15 > * + * {
+.c22 > * + * {
   margin-top: 24px;
 }
 
-.c17 {
+.c24 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -340,154 +340,36 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c17 > * {
+.c24 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c17 > * + * {
+.c24 > * + * {
   margin-top: 16px;
 }
 
-.c6 > * {
+.c13 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c6 > * + * {
+.c13 > * + * {
   margin-left: 8px;
 }
 
-.c19 {
+.c26 {
   font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c20 {
-  font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #8e8ea9;
-}
-
 .c27 {
-  font-weight: 500;
+  font-weight: 400;
   font-size: 0.75rem;
   line-height: 1.33;
-  color: #32324d;
-}
-
-.c26 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c28 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c30 {
-  border: none;
-  border-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-}
-
-.c30::-webkit-input-placeholder {
   color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30[aria-disabled='true'] {
-  background: inherit;
-  color: inherit;
-}
-
-.c30:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c29 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
-  background: #ffffff;
-  height: 2.5rem;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c29:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
-.c25 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c25 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c25 > * + * {
-  margin-top: 4px;
 }
 
 .c34 {
@@ -512,13 +394,70 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
 }
 
 .c35 {
-  border: 1px solid #dcdce4;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c37 {
+  border: none;
   border-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+}
+
+.c37::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37[aria-disabled='true'] {
+  background: inherit;
+  color: inherit;
+}
+
+.c37:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.c36 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
   background: #ffffff;
+  height: 2.5rem;
   outline: none;
   box-shadow: 0;
   -webkit-transition-property: border-color,box-shadow,fill;
@@ -527,45 +466,11 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c35:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c36 {
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: 0.875rem;
-  border: none;
-  color: #32324d;
-  resize: none;
-}
-
-.c36::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36:focus-within {
-  outline: none;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -585,12 +490,107 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   margin-top: 4px;
 }
 
-.c31 textarea {
+.c41 {
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #32324d;
+}
+
+.c40 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c42 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background: #ffffff;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c42:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c43 {
+  display: block;
+  width: 100%;
+  font-weight: 400;
+  font-size: 0.875rem;
+  border: none;
+  color: #32324d;
+  resize: none;
+}
+
+.c43::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43:focus-within {
+  outline: none;
+}
+
+.c39 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c39 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c39 > * + * {
+  margin-top: 4px;
+}
+
+.c38 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c31 textarea::-webkit-input-placeholder {
+.c38 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -598,7 +598,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea::-moz-placeholder {
+.c38 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -606,7 +606,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea:-ms-input-placeholder {
+.c38 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -614,7 +614,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea::placeholder {
+.c38 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -622,24 +622,28 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c38 {
+.c45 {
   height: 100vh;
 }
 
 .c1 {
   background: #f6f6f9;
-  padding-top: 56px;
+  padding-top: 24px;
   padding-right: 56px;
   padding-bottom: 56px;
   padding-left: 56px;
 }
 
-.c14 {
+.c2 {
+  padding-bottom: 12px;
+}
+
+.c21 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c2 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -657,7 +661,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c3 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -671,21 +675,21 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c12 {
+.c19 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c13 {
+.c20 {
   font-size: 1rem;
   line-height: 1.5;
 }
@@ -694,24 +698,108 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c23 {
+.c6 {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #4945ff;
+}
+
+.c7 {
+  font-weight: 600;
+  line-height: 1.14;
+}
+
+.c8 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+}
+
+.c4 {
+  padding-right: 8px;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-transform: uppercase;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  outline: none;
+}
+
+.c3 svg path {
+  fill: #4945ff;
+}
+
+.c3 svg {
+  font-size: 0.625rem;
+}
+
+.c3:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c3:focus-visible {
+  outline: none;
+}
+
+.c3:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c30 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c24 {
+.c31 {
   grid-column: span 6;
 }
 
 @media (max-width:68.75rem) {
-  .c24 {
+  .c31 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c24 {
+  .c31 {
     grid-column: span;
   }
 }
@@ -731,27 +819,59 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
         >
           <div
             class="c2"
+          >
+            <a
+              aria-current="page"
+              class="c3 active"
+              href="/settings/roles"
+            >
+              <span
+                aria-hidden="true"
+                class="c4 c5"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M24 13.3a.2.2 0 01-.2.2H5.74l8.239 8.239a.2.2 0 010 .282L12.14 23.86a.2.2 0 01-.282 0L.14 12.14a.2.2 0 010-.282L11.86.14a.2.2 0 01.282 0L13.98 1.98a.2.2 0 010 .282L5.74 10.5H23.8c.11 0 .2.09.2.2v2.6z"
+                    fill="#212134"
+                  />
+                </svg>
+              </span>
+              <span
+                class="c6 c7 c8"
+              >
+                Go back
+              </span>
+            </a>
+          </div>
+          <div
+            class="c9"
           >
             <div
-              class="c3"
+              class="c10"
             >
               <h1
-                class="c4"
+                class="c11"
                 id="main-content-title"
               >
                 Edit a role
               </h1>
             </div>
             <div
-              class="c5 c6"
+              class="c12 c13"
             >
               <button
                 aria-disabled="false"
-                class="c7 c8"
+                class="c14 c15"
                 type="button"
               >
                 <span
-                  class="c9 c10 c11"
+                  class="c16 c17 c18"
                 >
                   Save
                 </span>
@@ -759,26 +879,26 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <p
-            class="c12 c13"
+            class="c19 c20"
           >
             Define the rights given to the role
           </p>
         </div>
       </div>
       <div
-        class="c14"
+        class="c21"
       >
         <div
-          class="c15"
+          class="c22"
         >
           <div
-            class="c16"
+            class="c23"
           >
             <div
-              class="c17"
+              class="c24"
             >
               <div
-                class="c18"
+                class="c25"
               >
                 <div
                   class=""
@@ -787,35 +907,35 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c19"
+                      class="c26"
                     />
                   </div>
                   <div
                     class=""
                   >
                     <span
-                      class="c20"
+                      class="c27"
                     />
                   </div>
                 </div>
                 <button
                   aria-disabled="true"
-                  class="c7 c21"
+                  class="c14 c28"
                   disabled=""
                   type="button"
                 >
                   <span
-                    class="c9 c22"
+                    class="c16 c29"
                   >
                     NaN users with this role
                   </span>
                 </button>
               </div>
               <div
-                class="c23"
+                class="c30"
               >
                 <div
-                  class="c24"
+                  class="c31"
                 >
                   <div
                     class=""
@@ -823,25 +943,25 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c25"
+                          class="c32"
                         >
                           <div
-                            class="c26"
+                            class="c33"
                           >
                             <label
-                              class="c27"
+                              class="c34"
                               for="textinput-1"
                             >
                               Name
                             </label>
                           </div>
                           <div
-                            class="c28 c29"
+                            class="c35 c36"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c37"
                               id="textinput-1"
                               name="name"
                               value=""
@@ -853,34 +973,34 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c24"
+                  class="c31"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c31"
+                      class="c38"
                     >
                       <div>
                         <div
-                          class="c32"
+                          class="c39"
                         >
                           <div
-                            class="c33"
+                            class="c40"
                           >
                             <label
-                              class="c34"
+                              class="c41"
                               for="textarea-1"
                             >
                               Description
                             </label>
                           </div>
                           <div
-                            class="c35"
+                            class="c42"
                           >
                             <textarea
                               aria-invalid="false"
-                              class="c36"
+                              class="c43"
                               id="textarea-1"
                               name="description"
                             />
@@ -894,10 +1014,10 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c16"
+            class="c23"
           >
             <div
-              class="c37 c38"
+              class="c44 c45"
               data-testid="loader"
             >
               <div
@@ -905,13 +1025,13 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
                 role="alert"
               >
                 <div
-                  class="c39"
+                  class="c46"
                 >
                   Loading content.
                 </div>
                 <img
                   aria-hidden="true"
-                  class="c40"
+                  class="c47"
                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                 />
               </div>
@@ -922,7 +1042,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
     </form>
   </main>
   <div
-    class="c41"
+    class="c48"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
index eb5f87bc59..f4c53ccb20 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/index.js
@@ -15,11 +15,13 @@ import { Button } from '@strapi/parts/Button';
 import { ContentLayout, HeaderLayout } from '@strapi/parts/Layout';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { Main } from '@strapi/parts/Main';
+import { Link } from '@strapi/parts/Link';
 import { Row } from '@strapi/parts/Row';
 import { Stack } from '@strapi/parts/Stack';
 import { Text } from '@strapi/parts/Text';
 import { TextInput } from '@strapi/parts/TextInput';
 import { Textarea } from '@strapi/parts/Textarea';
+import BackIcon from '@strapi/icons/BackIcon';
 import { Formik } from 'formik';
 import get from 'lodash/get';
 import isEmpty from 'lodash/isEmpty';
@@ -158,6 +160,14 @@ const CreatePage = () => {
                   id: 'Settings.roles.create.description',
                   defaultMessage: 'Define the rights given to the role',
                 })}
+                navigationAction={
+                  <Link startIcon={<BackIcon />} to="/settings/roles">
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 <Stack size={6}>
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index 55966c9c24..25654cf9fd 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CreatePage /> renders and matches the snapshot 1`] = `
-.c41 {
+.c48 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,26 +13,26 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c17 {
+.c24 {
   background: #ffffff;
   padding: 24px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c10 {
+.c17 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #32324d;
 }
 
-.c11 {
+.c18 {
   font-weight: 600;
   line-height: 1.14;
 }
 
-.c7 {
+.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -46,21 +46,21 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c7 svg {
+.c14 svg {
   height: 12px;
   width: 12px;
 }
 
-.c7 svg > g,
-.c7 svg path {
+.c14 svg > g,
+.c14 svg path {
   fill: #ffffff;
 }
 
-.c7[aria-disabled='true'] {
+.c14[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c7:after {
+.c14:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -75,11 +75,11 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c7:focus-visible {
+.c14:focus-visible {
   outline: none;
 }
 
-.c7:focus-visible:after {
+.c14:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -90,7 +90,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c8 {
+.c15 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -102,7 +102,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c8 .sc-dwfUuu {
+.c15 .sc-dwfUuu {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -113,66 +113,66 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c8 .c9 {
+.c15 .c16 {
   color: #ffffff;
 }
 
-.c8[aria-disabled='true'] {
+.c15[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c8[aria-disabled='true'] .c9 {
+.c15[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c8[aria-disabled='true'] svg > g,
-.c8[aria-disabled='true'] svg path {
+.c15[aria-disabled='true'] svg > g,
+.c15[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c8[aria-disabled='true']:active {
+.c15[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c8[aria-disabled='true']:active .c9 {
+.c15[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c8[aria-disabled='true']:active svg > g,
-.c8[aria-disabled='true']:active svg path {
+.c15[aria-disabled='true']:active svg > g,
+.c15[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c8:hover {
+.c15:hover {
   background-color: #ffffff;
 }
 
-.c8:active {
+.c15:active {
   background-color: #ffffff;
   border: 1px solid #4945ff;
 }
 
-.c8:active .c9 {
+.c15:active .c16 {
   color: #4945ff;
 }
 
-.c8:active svg > g,
-.c8:active svg path {
+.c15:active svg > g,
+.c15:active svg path {
   fill: #4945ff;
 }
 
-.c8 .c9 {
+.c15 .c16 {
   color: #271fe0;
 }
 
-.c8 svg > g,
-.c8 svg path {
+.c15 svg > g,
+.c15 svg path {
   fill: #271fe0;
 }
 
-.c12 {
+.c19 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -184,7 +184,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   background: #4945ff;
 }
 
-.c12 .sc-dwfUuu {
+.c19 .sc-dwfUuu {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -195,49 +195,49 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c12 .c9 {
+.c19 .c16 {
   color: #ffffff;
 }
 
-.c12[aria-disabled='true'] {
+.c19[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c12[aria-disabled='true'] .c9 {
+.c19[aria-disabled='true'] .c16 {
   color: #666687;
 }
 
-.c12[aria-disabled='true'] svg > g,
-.c12[aria-disabled='true'] svg path {
+.c19[aria-disabled='true'] svg > g,
+.c19[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c12[aria-disabled='true']:active {
+.c19[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c12[aria-disabled='true']:active .c9 {
+.c19[aria-disabled='true']:active .c16 {
   color: #666687;
 }
 
-.c12[aria-disabled='true']:active svg > g,
-.c12[aria-disabled='true']:active svg path {
+.c19[aria-disabled='true']:active svg > g,
+.c19[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c12:hover {
+.c19:hover {
   border: 1px solid #7b79ff;
   background: #7b79ff;
 }
 
-.c12:active {
+.c19:active {
   border: 1px solid #4945ff;
   background: #4945ff;
 }
 
-.c39 {
+.c46 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -249,12 +249,12 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   width: 1px;
 }
 
-.c40 {
+.c47 {
   -webkit-animation: gzYjWD 1s infinite linear;
   animation: gzYjWD 1s infinite linear;
 }
 
-.c19 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -272,7 +272,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c37 {
+.c44 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -290,7 +290,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c5 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -304,7 +304,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c16 {
+.c23 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -314,156 +314,15 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c16 > * {
+.c23 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c16 > * + * {
+.c23 > * + * {
   margin-top: 24px;
 }
 
-.c18 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c18 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c18 > * + * {
-  margin-top: 16px;
-}
-
-.c6 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c6 > * + * {
-  margin-left: 8px;
-}
-
-.c20 {
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.43;
-  color: #32324d;
-}
-
-.c21 {
-  font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #666687;
-}
-
-.c27 {
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1.33;
-  color: #32324d;
-}
-
-.c26 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c28 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c30 {
-  border: none;
-  border-radius: 4px;
-  padding-left: 16px;
-  padding-right: 16px;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-}
-
-.c30::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c30[aria-disabled='true'] {
-  background: inherit;
-  color: inherit;
-}
-
-.c30:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c29 {
-  border: 1px solid #dcdce4;
-  border-radius: 4px;
-  background: #ffffff;
-  height: 2.5rem;
-  outline: none;
-  box-shadow: 0;
-  -webkit-transition-property: border-color,box-shadow,fill;
-  transition-property: border-color,box-shadow,fill;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-}
-
-.c29:focus-within {
-  border: 1px solid #4945ff;
-  box-shadow: #4945ff 0px 0px 0px 2px;
-}
-
 .c25 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -480,7 +339,30 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 }
 
 .c25 > * + * {
-  margin-top: 4px;
+  margin-top: 16px;
+}
+
+.c13 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c13 > * + * {
+  margin-left: 8px;
+}
+
+.c27 {
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #32324d;
+}
+
+.c28 {
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #666687;
 }
 
 .c34 {
@@ -505,13 +387,70 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 }
 
 .c35 {
-  border: 1px solid #dcdce4;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c37 {
+  border: none;
   border-radius: 4px;
   padding-left: 16px;
   padding-right: 16px;
-  padding-top: 12px;
-  padding-bottom: 12px;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+}
+
+.c37::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c37[aria-disabled='true'] {
+  background: inherit;
+  color: inherit;
+}
+
+.c37:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.c36 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
   background: #ffffff;
+  height: 2.5rem;
   outline: none;
   box-shadow: 0;
   -webkit-transition-property: border-color,box-shadow,fill;
@@ -520,45 +459,11 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c35:focus-within {
+.c36:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c36 {
-  display: block;
-  width: 100%;
-  font-weight: 400;
-  font-size: 0.875rem;
-  border: none;
-  color: #32324d;
-  resize: none;
-}
-
-.c36::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c36:focus-within {
-  outline: none;
-}
-
 .c32 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -578,12 +483,107 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   margin-top: 4px;
 }
 
-.c31 textarea {
+.c41 {
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1.33;
+  color: #32324d;
+}
+
+.c40 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c42 {
+  border: 1px solid #dcdce4;
+  border-radius: 4px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background: #ffffff;
+  outline: none;
+  box-shadow: 0;
+  -webkit-transition-property: border-color,box-shadow,fill;
+  transition-property: border-color,box-shadow,fill;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+}
+
+.c42:focus-within {
+  border: 1px solid #4945ff;
+  box-shadow: #4945ff 0px 0px 0px 2px;
+}
+
+.c43 {
+  display: block;
+  width: 100%;
+  font-weight: 400;
+  font-size: 0.875rem;
+  border: none;
+  color: #32324d;
+  resize: none;
+}
+
+.c43::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c43:focus-within {
+  outline: none;
+}
+
+.c39 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c39 > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.c39 > * + * {
+  margin-top: 4px;
+}
+
+.c38 textarea {
   height: 5rem;
   line-height: 1.25rem;
 }
 
-.c31 textarea::-webkit-input-placeholder {
+.c38 textarea::-webkit-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -591,7 +591,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea::-moz-placeholder {
+.c38 textarea::-moz-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -599,7 +599,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea:-ms-input-placeholder {
+.c38 textarea:-ms-input-placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -607,7 +607,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c31 textarea::placeholder {
+.c38 textarea::placeholder {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -615,24 +615,28 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   opacity: 1;
 }
 
-.c38 {
+.c45 {
   height: 100vh;
 }
 
 .c1 {
   background: #f6f6f9;
-  padding-top: 56px;
+  padding-top: 24px;
   padding-right: 56px;
   padding-bottom: 56px;
   padding-left: 56px;
 }
 
-.c15 {
+.c2 {
+  padding-bottom: 12px;
+}
+
+.c22 {
   padding-right: 56px;
   padding-left: 56px;
 }
 
-.c2 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -650,7 +654,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c3 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -664,32 +668,32 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c4 {
+.c11 {
   font-weight: 600;
   font-size: 2rem;
   line-height: 1.25;
   color: #32324d;
 }
 
-.c13 {
+.c20 {
   font-weight: 400;
   font-size: 0.875rem;
   line-height: 1.43;
   color: #666687;
 }
 
-.c14 {
+.c21 {
   font-size: 1rem;
   line-height: 1.5;
 }
 
-.c23 {
+.c30 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c24 {
+.c31 {
   grid-column: span 6;
 }
 
@@ -697,7 +701,91 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   outline: none;
 }
 
-.c22 {
+.c6 {
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: #4945ff;
+}
+
+.c7 {
+  font-weight: 600;
+  line-height: 1.14;
+}
+
+.c8 {
+  font-weight: 600;
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  text-transform: uppercase;
+}
+
+.c4 {
+  padding-right: 8px;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-transform: uppercase;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  position: relative;
+  outline: none;
+}
+
+.c3 svg path {
+  fill: #4945ff;
+}
+
+.c3 svg {
+  font-size: 0.625rem;
+}
+
+.c3:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c3:focus-visible {
+  outline: none;
+}
+
+.c3:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c5 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.c29 {
   border: 1px solid #d9d8ff;
   background: #f0f0ff;
   padding: 8px 16px;
@@ -708,13 +796,13 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
 }
 
 @media (max-width:68.75rem) {
-  .c24 {
+  .c31 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c24 {
+  .c31 {
     grid-column: span;
   }
 }
@@ -737,38 +825,70 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
         >
           <div
             class="c2"
+          >
+            <a
+              aria-current="page"
+              class="c3 active"
+              href="/settings/roles"
+            >
+              <span
+                aria-hidden="true"
+                class="c4 c5"
+              >
+                <svg
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M24 13.3a.2.2 0 01-.2.2H5.74l8.239 8.239a.2.2 0 010 .282L12.14 23.86a.2.2 0 01-.282 0L.14 12.14a.2.2 0 010-.282L11.86.14a.2.2 0 01.282 0L13.98 1.98a.2.2 0 010 .282L5.74 10.5H23.8c.11 0 .2.09.2.2v2.6z"
+                    fill="#212134"
+                  />
+                </svg>
+              </span>
+              <span
+                class="c6 c7 c8"
+              >
+                Go back
+              </span>
+            </a>
+          </div>
+          <div
+            class="c9"
           >
             <div
-              class="c3"
+              class="c10"
             >
               <h1
-                class="c4"
+                class="c11"
                 id="main-content-title"
               >
                 Create a role
               </h1>
             </div>
             <div
-              class="c5 c6"
+              class="c12 c13"
             >
               <button
                 aria-disabled="false"
-                class="c7 c8"
+                class="c14 c15"
                 type="button"
               >
                 <span
-                  class="c9 c10 c11"
+                  class="c16 c17 c18"
                 >
                   Reset
                 </span>
               </button>
               <button
                 aria-disabled="false"
-                class="c7 c12"
+                class="c14 c19"
                 type="button"
               >
                 <span
-                  class="c9 c10 c11"
+                  class="c16 c17 c18"
                 >
                   Save
                 </span>
@@ -776,26 +896,26 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <p
-            class="c13 c14"
+            class="c20 c21"
           >
             Define the rights given to the role
           </p>
         </div>
       </div>
       <div
-        class="c15"
+        class="c22"
       >
         <div
-          class="c16"
+          class="c23"
         >
           <div
-            class="c17"
+            class="c24"
           >
             <div
-              class="c18"
+              class="c25"
             >
               <div
-                class="c19"
+                class="c26"
               >
                 <div
                   class=""
@@ -804,7 +924,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c20"
+                      class="c27"
                     >
                       Details
                     </span>
@@ -813,23 +933,23 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     class=""
                   >
                     <span
-                      class="c21"
+                      class="c28"
                     >
                       Name and description of the role
                     </span>
                   </div>
                 </div>
                 <div
-                  class="c22"
+                  class="c29"
                 >
                   0 users with this role
                 </div>
               </div>
               <div
-                class="c23"
+                class="c30"
               >
                 <div
-                  class="c24"
+                  class="c31"
                 >
                   <div
                     class=""
@@ -837,25 +957,25 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c25"
+                          class="c32"
                         >
                           <div
-                            class="c26"
+                            class="c33"
                           >
                             <label
-                              class="c27"
+                              class="c34"
                               for="textinput-1"
                             >
                               Name
                             </label>
                           </div>
                           <div
-                            class="c28 c29"
+                            class="c35 c36"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c37"
                               id="textinput-1"
                               name="name"
                               value=""
@@ -867,34 +987,34 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c24"
+                  class="c31"
                 >
                   <div
                     class=""
                   >
                     <div
-                      class="c31"
+                      class="c38"
                     >
                       <div>
                         <div
-                          class="c32"
+                          class="c39"
                         >
                           <div
-                            class="c33"
+                            class="c40"
                           >
                             <label
-                              class="c34"
+                              class="c41"
                               for="textarea-1"
                             >
                               Description
                             </label>
                           </div>
                           <div
-                            class="c35"
+                            class="c42"
                           >
                             <textarea
                               aria-invalid="false"
-                              class="c36"
+                              class="c43"
                               id="textarea-1"
                               name="description"
                             >
@@ -910,10 +1030,10 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c17"
+            class="c24"
           >
             <div
-              class="c37 c38"
+              class="c44 c45"
               data-testid="loader"
             >
               <div
@@ -921,13 +1041,13 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
                 role="alert"
               >
                 <div
-                  class="c39"
+                  class="c46"
                 >
                   Loading content.
                 </div>
                 <img
                   aria-hidden="true"
-                  class="c40"
+                  class="c47"
                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                 />
               </div>
@@ -938,7 +1058,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
     </form>
   </main>
   <div
-    class="c41"
+    class="c48"
   >
     <p
       aria-live="polite"

From e1678fa3cd0c8f34d1ac1c41e581d8201d980016 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 21 Oct 2021 15:53:28 +0200
Subject: [PATCH 2/3] Add back button to users

Signed-off-by: soupette <cyril@strapi.io>
---
 .../pages/Users/EditPage/index.js             | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
index d38715dd3e..8e7fc385c5 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/EditPage/index.js
@@ -22,9 +22,11 @@ import { Box } from '@strapi/parts/Box';
 import { Button } from '@strapi/parts/Button';
 import { Grid, GridItem } from '@strapi/parts/Grid';
 import { HeaderLayout, ContentLayout } from '@strapi/parts/Layout';
+import { Link } from '@strapi/parts/Link';
 import { H3 } from '@strapi/parts/Text';
 import { Main } from '@strapi/parts/Main';
 import { Stack } from '@strapi/parts/Stack';
+import BackIcon from '@strapi/icons/BackIcon';
 import CheckIcon from '@strapi/icons/CheckIcon';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
 import { formatAPIErrors } from '../../../../../utils';
@@ -144,6 +146,14 @@ const EditPage = ({ canUpdate }) => {
             </Button>
           }
           title={title}
+          navigationAction={
+            <Link startIcon={<BackIcon />} to="/settings/users?pageSize=10&page=1&sort=firstname">
+              {formatMessage({
+                id: 'app.components.go-back',
+                defaultMessage: 'Go back',
+              })}
+            </Link>
+          }
         />
         <ContentLayout>
           <LoadingIndicatorPage />
@@ -177,6 +187,17 @@ const EditPage = ({ canUpdate }) => {
                   </Button>
                 }
                 title={title}
+                navigationAction={
+                  <Link
+                    startIcon={<BackIcon />}
+                    to="/settings/users?pageSize=10&page=1&sort=firstname"
+                  >
+                    {formatMessage({
+                      id: 'app.components.go-back',
+                      defaultMessage: 'Go back',
+                    })}
+                  </Link>
+                }
               />
               <ContentLayout>
                 {data?.registrationToken && (

From 1e85b9761b9ec5f3c527ae01635f989075c22ae8 Mon Sep 17 00:00:00 2001
From: soupette <cyril@strapi.io>
Date: Thu, 21 Oct 2021 15:57:01 +0200
Subject: [PATCH 3/3] Add back button to user-permissions => roles => editview

Signed-off-by: soupette <cyril@strapi.io>
---
 .../admin/src/pages/Roles/EditPage/index.js   |  10 +
 .../pages/Roles/EditPage/tests/index.test.js  | 750 ++++++++++--------
 2 files changed, 445 insertions(+), 315 deletions(-)

diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
index 41e757fbf6..17624e048b 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/index.js
@@ -7,7 +7,9 @@ import { Box } from '@strapi/parts/Box';
 import { TextInput } from '@strapi/parts/TextInput';
 import { Textarea } from '@strapi/parts/Textarea';
 import { H3 } from '@strapi/parts/Text';
+import BackIcon from '@strapi/icons/BackIcon';
 import CheckIcon from '@strapi/icons/CheckIcon';
+import { Link } from '@strapi/parts/Link';
 import { GridItem, Grid } from '@strapi/parts/Grid';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
@@ -103,6 +105,14 @@ const EditPage = () => {
               }
               title={role.name}
               subtitle={role.description}
+              navigationAction={
+                <Link startIcon={<BackIcon />} to="/settings/users-permissions/roles">
+                  {formatMessage({
+                    id: 'app.components.go-back',
+                    defaultMessage: 'Go back',
+                  })}
+                </Link>
+              }
             />
             <ContentLayout>
               <Stack size={7}>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index fc5656ac71..5223d99aea 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -59,18 +59,22 @@ describe('Admin | containers | RoleEditPage', () => {
     expect(container.firstChild).toMatchInlineSnapshot(`
       .c1 {
         background: #f6f6f9;
-        padding-top: 56px;
+        padding-top: 24px;
         padding-right: 56px;
         padding-bottom: 56px;
         padding-left: 56px;
       }
 
-      .c14 {
+      .c2 {
+        padding-bottom: 12px;
+      }
+
+      .c21 {
         padding-right: 56px;
         padding-left: 56px;
       }
 
-      .c2 {
+      .c9 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -88,7 +92,7 @@ describe('Admin | containers | RoleEditPage', () => {
         align-items: center;
       }
 
-      .c3 {
+      .c10 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -102,21 +106,21 @@ describe('Admin | containers | RoleEditPage', () => {
         align-items: center;
       }
 
-      .c4 {
+      .c11 {
         font-weight: 600;
         font-size: 2rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c12 {
+      .c19 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c13 {
+      .c20 {
         font-size: 1rem;
         line-height: 1.5;
       }
@@ -125,18 +129,18 @@ describe('Admin | containers | RoleEditPage', () => {
         outline: none;
       }
 
-      .c11 {
+      .c18 {
         font-weight: 500;
         font-size: 0.75rem;
         line-height: 1.33;
         color: #32324d;
       }
 
-      .c8 {
+      .c15 {
         padding-right: 8px;
       }
 
-      .c5 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -150,21 +154,21 @@ describe('Admin | containers | RoleEditPage', () => {
         outline: none;
       }
 
-      .c5 svg {
+      .c12 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c5 svg > g,
-      .c5 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
-      .c5[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c5:after {
+      .c12:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -179,11 +183,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid transparent;
       }
 
-      .c5:focus-visible {
+      .c12:focus-visible {
         outline: none;
       }
 
-      .c5:focus-visible:after {
+      .c12:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -194,11 +198,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c9 {
+      .c16 {
         height: 100%;
       }
 
-      .c6 {
+      .c13 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -210,7 +214,7 @@ describe('Admin | containers | RoleEditPage', () => {
         background: #4945ff;
       }
 
-      .c6 .c7 {
+      .c13 .c14 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -221,215 +225,68 @@ describe('Admin | containers | RoleEditPage', () => {
         align-items: center;
       }
 
-      .c6 .c10 {
+      .c13 .c17 {
         color: #ffffff;
       }
 
-      .c6[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c6[aria-disabled='true'] .c10 {
+      .c13[aria-disabled='true'] .c17 {
         color: #666687;
       }
 
-      .c6[aria-disabled='true'] svg > g,
-      .c6[aria-disabled='true'] svg path {
+      .c13[aria-disabled='true'] svg > g,
+      .c13[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c6[aria-disabled='true']:active {
+      .c13[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c6[aria-disabled='true']:active .c10 {
+      .c13[aria-disabled='true']:active .c17 {
         color: #666687;
       }
 
-      .c6[aria-disabled='true']:active svg > g,
-      .c6[aria-disabled='true']:active svg path {
+      .c13[aria-disabled='true']:active svg > g,
+      .c13[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c6:hover {
+      .c13:hover {
         border: 1px solid #7b79ff;
         background: #7b79ff;
       }
 
-      .c6:active {
+      .c13:active {
         border: 1px solid #4945ff;
         background: #4945ff;
       }
 
-      .c15 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c15 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c15 > * + * {
-        margin-top: 32px;
-      }
-
-      .c17 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c17 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c17 > * + * {
-        margin-top: 16px;
-      }
-
-      .c37 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
-      }
-
-      .c37 > * {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .c37 > * + * {
-        margin-top: 8px;
-      }
-
-      .c16 {
-        background: #ffffff;
-        padding-top: 24px;
-        padding-right: 32px;
-        padding-bottom: 24px;
-        padding-left: 32px;
-        border-radius: 4px;
-        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-      }
-
-      .c23 {
-        font-weight: 500;
-        font-size: 0.75rem;
-        line-height: 1.33;
-        color: #32324d;
-      }
-
       .c22 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c22 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c22 > * + * {
+        margin-top: 32px;
       }
 
       .c24 {
-        display: -webkit-box;
-        display: -webkit-flex;
-        display: -ms-flexbox;
-        display: flex;
-        -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-        flex-direction: row;
-        -webkit-box-pack: justify;
-        -webkit-justify-content: space-between;
-        -ms-flex-pack: justify;
-        justify-content: space-between;
-        -webkit-align-items: center;
-        -webkit-box-align: center;
-        -ms-flex-align: center;
-        align-items: center;
-      }
-
-      .c26 {
-        border: none;
-        border-radius: 4px;
-        padding-left: 16px;
-        padding-right: 16px;
-        color: #32324d;
-        font-weight: 400;
-        font-size: 0.875rem;
-        display: block;
-        width: 100%;
-      }
-
-      .c26::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c26::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c26:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c26::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c26[aria-disabled='true'] {
-        background: inherit;
-        color: inherit;
-      }
-
-      .c26:focus {
-        outline: none;
-        box-shadow: none;
-      }
-
-      .c25 {
-        border: 1px solid #dcdce4;
-        border-radius: 4px;
-        background: #ffffff;
-        height: 2.5rem;
-        outline: none;
-        box-shadow: 0;
-        -webkit-transition-property: border-color,box-shadow,fill;
-        transition-property: border-color,box-shadow,fill;
-        -webkit-transition-duration: 0.2s;
-        transition-duration: 0.2s;
-      }
-
-      .c25:focus-within {
-        border: 1px solid #4945ff;
-        box-shadow: #4945ff 0px 0px 0px 2px;
-      }
-
-      .c21 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -439,13 +296,42 @@ describe('Admin | containers | RoleEditPage', () => {
         flex-direction: column;
       }
 
-      .c21 > * {
+      .c24 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c21 > * + * {
-        margin-top: 4px;
+      .c24 > * + * {
+        margin-top: 16px;
+      }
+
+      .c44 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c44 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c44 > * + * {
+        margin-top: 8px;
+      }
+
+      .c23 {
+        background: #ffffff;
+        padding-top: 24px;
+        padding-right: 32px;
+        padding-bottom: 24px;
+        padding-left: 32px;
+        border-radius: 4px;
+        box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
       .c30 {
@@ -470,13 +356,70 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       .c31 {
-        border: 1px solid #dcdce4;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-box-pack: justify;
+        -webkit-justify-content: space-between;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c33 {
+        border: none;
         border-radius: 4px;
         padding-left: 16px;
         padding-right: 16px;
-        padding-top: 12px;
-        padding-bottom: 12px;
+        color: #32324d;
+        font-weight: 400;
+        font-size: 0.875rem;
+        display: block;
+        width: 100%;
+      }
+
+      .c33::-webkit-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c33::-moz-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c33:-ms-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c33::placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c33[aria-disabled='true'] {
+        background: inherit;
+        color: inherit;
+      }
+
+      .c33:focus {
+        outline: none;
+        box-shadow: none;
+      }
+
+      .c32 {
+        border: 1px solid #dcdce4;
+        border-radius: 4px;
         background: #ffffff;
+        height: 2.5rem;
         outline: none;
         box-shadow: 0;
         -webkit-transition-property: border-color,box-shadow,fill;
@@ -485,45 +428,11 @@ describe('Admin | containers | RoleEditPage', () => {
         transition-duration: 0.2s;
       }
 
-      .c31:focus-within {
+      .c32:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c32 {
-        display: block;
-        width: 100%;
-        font-weight: 400;
-        font-size: 0.875rem;
-        border: none;
-        color: #32324d;
-        resize: none;
-      }
-
-      .c32::-webkit-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::-moz-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32:-ms-input-placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32::placeholder {
-        color: #8e8ea9;
-        opacity: 1;
-      }
-
-      .c32:focus-within {
-        outline: none;
-      }
-
       .c28 {
         display: -webkit-box;
         display: -webkit-flex;
@@ -543,12 +452,107 @@ describe('Admin | containers | RoleEditPage', () => {
         margin-top: 4px;
       }
 
-      .c27 textarea {
+      .c37 {
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 1.33;
+        color: #32324d;
+      }
+
+      .c36 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: row;
+        -ms-flex-direction: row;
+        flex-direction: row;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+      }
+
+      .c38 {
+        border: 1px solid #dcdce4;
+        border-radius: 4px;
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        background: #ffffff;
+        outline: none;
+        box-shadow: 0;
+        -webkit-transition-property: border-color,box-shadow,fill;
+        transition-property: border-color,box-shadow,fill;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+      }
+
+      .c38:focus-within {
+        border: 1px solid #4945ff;
+        box-shadow: #4945ff 0px 0px 0px 2px;
+      }
+
+      .c39 {
+        display: block;
+        width: 100%;
+        font-weight: 400;
+        font-size: 0.875rem;
+        border: none;
+        color: #32324d;
+        resize: none;
+      }
+
+      .c39::-webkit-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c39::-moz-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c39:-ms-input-placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c39::placeholder {
+        color: #8e8ea9;
+        opacity: 1;
+      }
+
+      .c39:focus-within {
+        outline: none;
+      }
+
+      .c35 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c35 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c35 > * + * {
+        margin-top: 4px;
+      }
+
+      .c34 textarea {
         height: 5rem;
         line-height: 1.25rem;
       }
 
-      .c27 textarea::-webkit-input-placeholder {
+      .c34 textarea::-webkit-input-placeholder {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -556,7 +560,7 @@ describe('Admin | containers | RoleEditPage', () => {
         opacity: 1;
       }
 
-      .c27 textarea::-moz-placeholder {
+      .c34 textarea::-moz-placeholder {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -564,7 +568,7 @@ describe('Admin | containers | RoleEditPage', () => {
         opacity: 1;
       }
 
-      .c27 textarea:-ms-input-placeholder {
+      .c34 textarea:-ms-input-placeholder {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -572,7 +576,7 @@ describe('Admin | containers | RoleEditPage', () => {
         opacity: 1;
       }
 
-      .c27 textarea::placeholder {
+      .c34 textarea::placeholder {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -580,34 +584,118 @@ describe('Admin | containers | RoleEditPage', () => {
         opacity: 1;
       }
 
-      .c18 {
+      .c25 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #32324d;
       }
 
-      .c38 {
+      .c45 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c33 {
+      .c6 {
+        font-weight: 400;
+        font-size: 0.875rem;
+        line-height: 1.43;
+        color: #4945ff;
+      }
+
+      .c7 {
+        font-weight: 600;
+        line-height: 1.14;
+      }
+
+      .c8 {
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+      }
+
+      .c4 {
+        padding-right: 8px;
+      }
+
+      .c3 {
+        display: -webkit-inline-box;
+        display: -webkit-inline-flex;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        -webkit-align-items: center;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        text-transform: uppercase;
+        -webkit-text-decoration: none;
+        text-decoration: none;
+        position: relative;
+        outline: none;
+      }
+
+      .c3 svg path {
+        fill: #4945ff;
+      }
+
+      .c3 svg {
+        font-size: 0.625rem;
+      }
+
+      .c3:after {
+        -webkit-transition-property: all;
+        transition-property: all;
+        -webkit-transition-duration: 0.2s;
+        transition-duration: 0.2s;
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -4px;
+        bottom: -4px;
+        left: -4px;
+        right: -4px;
+        border: 2px solid transparent;
+      }
+
+      .c3:focus-visible {
+        outline: none;
+      }
+
+      .c3:focus-visible:after {
+        border-radius: 8px;
+        content: '';
+        position: absolute;
+        top: -5px;
+        bottom: -5px;
+        left: -5px;
+        right: -5px;
+        border: 2px solid #4945ff;
+      }
+
+      .c5 {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+      }
+
+      .c40 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c36 {
+      .c43 {
         padding-top: 24px;
         padding-right: 32px;
         padding-bottom: 24px;
         padding-left: 32px;
       }
 
-      .c54 {
+      .c61 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -615,63 +703,63 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-left: 32px;
       }
 
-      .c19 {
+      .c26 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 16px;
       }
 
-      .c34 {
+      .c41 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 0px;
       }
 
-      .c20 {
+      .c27 {
         grid-column: span 6;
       }
 
-      .c35 {
+      .c42 {
         grid-column: span 7;
       }
 
-      .c53 {
+      .c60 {
         grid-column: span 5;
       }
 
-      .c47 {
+      .c54 {
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
         color: #4a4a6a;
       }
 
-      .c49 {
+      .c56 {
         font-weight: 400;
         font-size: 0.875rem;
         line-height: 1.43;
         color: #666687;
       }
 
-      .c40 {
+      .c47 {
         border-radius: 4px;
       }
 
-      .c42 {
+      .c49 {
         background: #f6f6f9;
         padding: 24px;
         border-radius: 4px;
       }
 
-      .c45 {
+      .c52 {
         padding-right: 24px;
       }
 
-      .c51 {
+      .c58 {
         background: #dcdce4;
       }
 
-      .c52 {
+      .c59 {
         height: 2rem;
         width: 2rem;
         border-radius: 50%;
@@ -689,45 +777,45 @@ describe('Admin | containers | RoleEditPage', () => {
         justify-content: center;
       }
 
-      .c52 svg {
+      .c59 svg {
         height: 0.375rem;
         width: 0.6875rem;
       }
 
-      .c52 svg path {
+      .c59 svg path {
         fill: #666687;
       }
 
-      .c41 {
+      .c48 {
         border: 1px solid transparent;
         overflow: hidden;
       }
 
-      .c41:hover {
+      .c48:hover {
         border: 1px solid #4945ff;
       }
 
-      .c41:hover .c46 {
+      .c48:hover .c53 {
         color: #271fe0;
       }
 
-      .c41:hover .c48 {
+      .c48:hover .c55 {
         color: #4945ff;
       }
 
-      .c41:hover > .c39 {
+      .c48:hover > .c46 {
         background: #f0f0ff;
       }
 
-      .c41:hover .c50 {
+      .c48:hover .c57 {
         background: #d9d8ff;
       }
 
-      .c41:hover .c50 svg path {
+      .c48:hover .c57 svg path {
         fill: #4945ff;
       }
 
-      .c44 {
+      .c51 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -745,7 +833,7 @@ describe('Admin | containers | RoleEditPage', () => {
         align-items: center;
       }
 
-      .c43 {
+      .c50 {
         border: none;
         background: transparent;
         display: block;
@@ -755,37 +843,37 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c20 {
+        .c27 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c20 {
+        .c27 {
           grid-column: span;
         }
       }
 
       @media (max-width:68.75rem) {
-        .c35 {
+        .c42 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c35 {
+        .c42 {
           grid-column: span;
         }
       }
 
       @media (max-width:68.75rem) {
-        .c53 {
+        .c60 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c53 {
+        .c60 {
           grid-column: span;
         }
       }
@@ -809,12 +897,44 @@ describe('Admin | containers | RoleEditPage', () => {
             >
               <div
                 class="c2"
+              >
+                <a
+                  aria-current="page"
+                  class="c3 active"
+                  href="/settings/users-permissions/roles"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="c4 c5"
+                  >
+                    <svg
+                      fill="none"
+                      height="1em"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M24 13.3a.2.2 0 01-.2.2H5.74l8.239 8.239a.2.2 0 010 .282L12.14 23.86a.2.2 0 01-.282 0L.14 12.14a.2.2 0 010-.282L11.86.14a.2.2 0 01.282 0L13.98 1.98a.2.2 0 010 .282L5.74 10.5H23.8c.11 0 .2.09.2.2v2.6z"
+                        fill="#212134"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="c6 c7 c8"
+                  >
+                    Go back
+                  </span>
+                </a>
+              </div>
+              <div
+                class="c9"
               >
                 <div
-                  class="c3"
+                  class="c10"
                 >
                   <h1
-                    class="c4"
+                    class="c11"
                     id="main-content-title"
                   >
                     Authenticated
@@ -822,12 +942,12 @@ describe('Admin | containers | RoleEditPage', () => {
                 </div>
                 <button
                   aria-disabled="false"
-                  class="c5 c6"
+                  class="c12 c13"
                   type="submit"
                 >
                   <div
                     aria-hidden="true"
-                    class="c7 c8 c9"
+                    class="c14 c15 c16"
                   >
                     <svg
                       fill="none"
@@ -843,41 +963,41 @@ describe('Admin | containers | RoleEditPage', () => {
                     </svg>
                   </div>
                   <span
-                    class="c10 c11"
+                    class="c17 c18"
                   >
                     Save
                   </span>
                 </button>
               </div>
               <p
-                class="c12 c13"
+                class="c19 c20"
               >
                 Default role given to authenticated user.
               </p>
             </div>
           </div>
           <div
-            class="c14"
+            class="c21"
           >
             <div
-              class="c15"
+              class="c22"
             >
               <div
-                class="c16"
+                class="c23"
               >
                 <div
-                  class="c17"
+                  class="c24"
                 >
                   <h2
-                    class="c18"
+                    class="c25"
                   >
                     Role details
                   </h2>
                   <div
-                    class="c19"
+                    class="c26"
                   >
                     <div
-                      class="c20"
+                      class="c27"
                     >
                       <div
                         class=""
@@ -885,25 +1005,25 @@ describe('Admin | containers | RoleEditPage', () => {
                         <div>
                           <div>
                             <div
-                              class="c21"
+                              class="c28"
                             >
                               <div
-                                class="c22"
+                                class="c29"
                               >
                                 <label
-                                  class="c23"
+                                  class="c30"
                                   for="textinput-1"
                                 >
                                   Name
                                 </label>
                               </div>
                               <div
-                                class="c24 c25"
+                                class="c31 c32"
                               >
                                 <input
                                   aria-disabled="false"
                                   aria-invalid="false"
-                                  class="c26"
+                                  class="c33"
                                   id="textinput-1"
                                   name="name"
                                   value="Authenticated"
@@ -915,34 +1035,34 @@ describe('Admin | containers | RoleEditPage', () => {
                       </div>
                     </div>
                     <div
-                      class="c20"
+                      class="c27"
                     >
                       <div
                         class=""
                       >
                         <div
-                          class="c27"
+                          class="c34"
                         >
                           <div>
                             <div
-                              class="c28"
+                              class="c35"
                             >
                               <div
-                                class="c29"
+                                class="c36"
                               >
                                 <label
-                                  class="c30"
+                                  class="c37"
                                   for="textarea-1"
                                 >
                                   Description
                                 </label>
                               </div>
                               <div
-                                class="c31"
+                                class="c38"
                               >
                                 <textarea
                                   aria-invalid="false"
-                                  class="c32"
+                                  class="c39"
                                   id="textarea-1"
                                   name="description"
                                 >
@@ -958,59 +1078,59 @@ describe('Admin | containers | RoleEditPage', () => {
                 </div>
               </div>
               <div
-                class="c33 c34"
+                class="c40 c41"
               >
                 <div
-                  class="c35"
+                  class="c42"
                 >
                   <div
-                    class="c36"
+                    class="c43"
                   >
                     <div
-                      class="c17"
+                      class="c24"
                     >
                       <div
-                        class="c37"
+                        class="c44"
                       >
                         <h2
-                          class="c18"
+                          class="c25"
                         >
                           Permissions
                         </h2>
                         <p
-                          class="c38"
+                          class="c45"
                         >
                           Only actions bound by a route are listed below.
                         </p>
                       </div>
                       <div
-                        class="c39 c40 c41"
+                        class="c46 c47 c48"
                       >
                         <div
-                          class="c39 c42"
+                          class="c46 c49"
                         >
                           <button
                             aria-controls="accordion-content-accordion-1"
                             aria-expanded="false"
                             aria-labelledby="accordion-label-accordion-1"
-                            class="c43"
+                            class="c50"
                             data-strapi-accordion-toggle="true"
                             type="button"
                           >
                             <div
-                              class="c39 c44"
+                              class="c46 c51"
                             >
                               <div
-                                class="c39 c45"
+                                class="c46 c52"
                               >
                                 <span
-                                  class="c46 c47"
+                                  class="c53 c54"
                                   id="accordion-label-accordion-1"
                                 >
                                   Address
                                 </span>
                                 <p
-                                  class="c48 c49"
+                                  class="c55 c56"
                                   id="accordion-desc-accordion-1"
                                 >
                                   Define all allowed actions for the api::address plugin.
@@ -1018,7 +1138,7 @@ describe('Admin | containers | RoleEditPage', () => {
                               </div>
                               <span
                                 aria-hidden="true"
-                                class="c39 c50 c51 c52"
+                                class="c46 c57 c58 c59"
                               >
                                 <svg
                                   fill="none"
@@ -1043,22 +1163,22 @@ describe('Admin | containers | RoleEditPage', () => {
                   </div>
                 </div>
                 <div
-                  class="c53"
+                  class="c60"
                 >
                   <div
-                    class="c54"
+                    class="c61"
                     style="min-height: 100%;"
                   >
                     <div
-                      class="c37"
+                      class="c44"
                     >
                       <h3
-                        class="c18"
+                        class="c25"
                       >
                         Advanced settings
                       </h3>
                       <p
-                        class="c38"
+                        class="c45"
                       >
                         Select the application's actions or the plugin's actions and click on the cog icon to display the bound route
                       </p>