diff --git a/src/authz-module/authz-home/index.tsx b/src/authz-module/authz-home/index.tsx
index 5310bb7f..759c56ff 100644
--- a/src/authz-module/authz-home/index.tsx
+++ b/src/authz-module/authz-home/index.tsx
@@ -59,7 +59,7 @@ const AuthzHome = () => {
         <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="page-band py-3">
           <TeamMembersTable presetScope={presetScope} />
         </Tab>
-        <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])} className="page-band py-5">
+        <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])} className="page-band py-3">
           <RolesPermissions />
         </Tab>
       </Tabs>
diff --git a/src/authz-module/components/PermissionTable.tsx b/src/authz-module/components/PermissionTable.tsx
index 4f1bb859..ab65df17 100644
--- a/src/authz-module/components/PermissionTable.tsx
+++ b/src/authz-module/components/PermissionTable.tsx
@@ -61,7 +61,7 @@ const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProp
                 <td colSpan={roles.length + 1} className="text-start py-3 px-4">
                   <div className="d-flex align-items-center">
                     {resourceGroup.icon && <Icon className="d-inline-block mr-2" size="xs" src={resourceGroup.icon} />}
-                    <strong>{resourceGroup.label}</strong>
+                    <span className="small"> <strong>{resourceGroup.label}</strong></span>
                     <ResourceTooltip resourceGroup={resourceGroup} />
                   </div>
                 </td>
diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index ea04cbbd..982cf7b4 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -53,9 +53,23 @@
   }
 
   .permission-table {
+    border-collapse: separate;
+    border-spacing: 0;
+
     td {
       line-height: 24px;
     }
+    
+    thead th::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      height: 6px;
+      background: linear-gradient(rgba(0, 0, 0, 0.15), transparent);
+      pointer-events: none;
+    }
   }
 
   // Paragon's `.overflow-auto` lives in the `paragon` cascade layer, where its `!important`
diff --git a/src/authz-module/roles-permissions/RolesPermissions.tsx b/src/authz-module/roles-permissions/RolesPermissions.tsx
index e72a373d..812f1e17 100644
--- a/src/authz-module/roles-permissions/RolesPermissions.tsx
+++ b/src/authz-module/roles-permissions/RolesPermissions.tsx
@@ -4,7 +4,8 @@ import {
   Alert,
   Button,
   ButtonGroup,
-  Container, Hyperlink,
+  Card,
+  Hyperlink,
 } from '@openedx/paragon';
 
 import {
@@ -52,58 +53,62 @@ const RolesPermissions = () => {
 
   return (
     <>
-      <Container className="pb-5">
-        <ButtonGroup size="lg" className="mb-2">
-          <Button
-            onClick={() => setActive('courses')}
-            variant={`${active === 'courses' ? 'primary' : 'outline-primary'}`}
-          >
-            {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.tab']) }
-          </Button>
-          <Button
-            onClick={() => setActive('libraries')}
-            variant={`${active === 'libraries' ? 'primary' : 'outline-primary'}`}
-          >
-            {intl.formatMessage(messages['authz.tabs.permissionsRoles.libraries.tab']) }
-          </Button>
-        </ButtonGroup>
-      </Container>
-      {/* Courses */}
-      { active === 'courses' && (
-        <div className="position-relative">
+      <Card className="bg-light-200">
+        <div className="px-3 py-4">
+          <ButtonGroup size="md">
+            <Button
+              onClick={() => setActive('courses')}
+              variant={`${active === 'courses' ? 'primary' : 'outline-primary'}`}
+            >
+              {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.tab'])}
+            </Button>
+            <Button
+              onClick={() => setActive('libraries')}
+              variant={`${active === 'libraries' ? 'primary' : 'outline-primary'}`}
+            >
+              {intl.formatMessage(messages['authz.tabs.permissionsRoles.libraries.tab'])}
+            </Button>
+          </ButtonGroup>
+        </div>
+        {/* Courses */}
+        {active === 'courses' && (
+          <div className="position-relative">
+            <PermissionTable
+              permissionsTable={coursePermissionsByResource}
+              roles={courseRolesWithPermissions}
+              title={intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.tab.title'])}
+            />
+          </div>
+        )}
+        {/*  Libraries */}
+        {active === 'libraries' && (
           <PermissionTable
-            permissionsTable={coursePermissionsByResource}
-            roles={courseRolesWithPermissions}
-            title={intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.tab.title'])}
+            permissionsTable={libraryPermissionsByResource}
+            roles={libraryRolesWithPermissions}
+            title={intl.formatMessage(messages['authz.tabs.permissionsRoles.libraries.tab.title'])}
           />
-          <Alert
-            variant="info"
-            className="mt-5"
-          >
-            <div className="row align-items-center">
-              <div className="col-12 col-md-7">
-                <p className="text-primary font-weight-bold h4">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.title'])}</p>
-                <span>
-                  <span className="font-weight-bold">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.note'])}</span>
-                  {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.description'])}
-                </span>
-              </div>
-              <div className="col-12 col-md-5 mt-3 mt-md-0">
-                <Hyperlink className="d-block text-right h5 font-weight-normal" destination="https://docs.openedx.org/en/latest/educators/references/course_development/course_team_roles.html" target="_blank" showLaunchIcon={false} isInline>
-                  {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.link'])}
-                </Hyperlink>
-              </div>
+        )}
+      </Card>
+      {active === 'courses' && (
+        <Alert
+          variant="info"
+          className="mt-5"
+        >
+          <div className="row align-items-center">
+            <div className="col-12 col-md-7">
+              <p className="text-primary font-weight-bold h4">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.title'])}</p>
+              <span>
+                <span className="font-weight-bold">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.note'])}</span>
+                {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.description'])}
+              </span>
             </div>
-          </Alert>
-        </div>
-      )}
-      {/*  Libraries */}
-      { active === 'libraries' && (
-        <PermissionTable
-          permissionsTable={libraryPermissionsByResource}
-          roles={libraryRolesWithPermissions}
-          title={intl.formatMessage(messages['authz.tabs.permissionsRoles.libraries.tab.title'])}
-        />
+            <div className="col-12 col-md-5 mt-3 mt-md-0">
+              <Hyperlink className="d-block text-right h5 font-weight-normal" destination="https://docs.openedx.org/en/latest/educators/references/course_development/course_team_roles.html" target="_blank" showLaunchIcon={false} isInline>
+                {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.link'])}
+              </Hyperlink>
+            </div>
+          </div>
+        </Alert>
       )}
       <AnchorButton />
     </>