diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx
index f173b595..d01e8eba 100644
--- a/src/app/features/common-settings/permissions/PermissionGroups.tsx
+++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx
@@ -4,9 +4,8 @@ import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } fr
 import { useTranslation } from 'react-i18next';
 import produce from 'immer';
 import type { StateEvents } from 'matrix-js-sdk';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
+import { SettingsSection } from '../../settings/SettingsSection';
 import {
   applyPermissionPower,
   getPermissionPower,
@@ -120,53 +119,43 @@ export function PermissionGroups({
     const powerChanges = value !== power;
 
     return (
-      <Box direction="Column" gap="100">
-        <Text size="L400">{t('RoomSettings.users')}</Text>
-        <SequenceCard
-          variant="SurfaceVariant"
-          className={SequenceCardStyle}
-          direction="Column"
-          gap="400"
-        >
-          <SettingTile
-            title={t('RoomSettings.default_power')}
-            description={t('RoomSettings.default_power_desc')}
-            after={
-              <PowerSwitcher
-                powerLevelTags={powerLevelTags}
-                value={value}
-                onChange={(v) => handleChangePermission(USER_DEFAULT_LOCATION, v, power)}
-              >
-                {(handleOpen, opened) => (
-                  <Chip
-                    variant={powerChanges ? 'Success' : 'Secondary'}
-                    outlined={powerChanges}
-                    fill="Soft"
-                    radii="Pill"
-                    aria-selected={opened}
-                    disabled={!canEdit || applyingChanges}
-                    after={
-                      powerChanges && (
-                        <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
-                      )
-                    }
-                    before={
-                      canEdit && (
-                        <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
-                      )
-                    }
-                    onClick={handleOpen}
-                  >
-                    <Text size="B300" truncate>
-                      {tag.name}
-                    </Text>
-                  </Chip>
-                )}
-              </PowerSwitcher>
-            }
-          />
-        </SequenceCard>
-      </Box>
+      <SettingsSection label={t('RoomSettings.users')}>
+        <SettingTile
+          title={t('RoomSettings.default_power')}
+          description={t('RoomSettings.default_power_desc')}
+          after={
+            <PowerSwitcher
+              powerLevelTags={powerLevelTags}
+              value={value}
+              onChange={(v) => handleChangePermission(USER_DEFAULT_LOCATION, v, power)}
+            >
+              {(handleOpen, opened) => (
+                <Chip
+                  variant={powerChanges ? 'Success' : 'Secondary'}
+                  outlined={powerChanges}
+                  fill="Soft"
+                  radii="Pill"
+                  aria-selected={opened}
+                  disabled={!canEdit || applyingChanges}
+                  after={
+                    powerChanges && <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
+                  }
+                  before={
+                    canEdit && (
+                      <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
+                    )
+                  }
+                  onClick={handleOpen}
+                >
+                  <Text size="B300" truncate>
+                    {tag.name}
+                  </Text>
+                </Chip>
+              )}
+            </PowerSwitcher>
+          }
+        />
+      </SettingsSection>
     );
   };
 
@@ -174,8 +163,7 @@ export function PermissionGroups({
     <>
       {renderUserGroup()}
       {permissionGroups.map((group, groupIndex) => (
-        <Box key={groupIndex} direction="Column" gap="100">
-          <Text size="L400">{group.name}</Text>
+        <SettingsSection key={groupIndex} label={group.name}>
           {group.items.map((item, itemIndex) => {
             const power = getPermissionPower(powerLevels, item.location);
             const powerUpdate = permissionUpdate.get(item.location);
@@ -185,60 +173,48 @@ export function PermissionGroups({
             const powerChanges = value !== power;
 
             return (
-              <SequenceCard
+              <SettingTile
                 key={itemIndex}
-                variant="SurfaceVariant"
-                className={SequenceCardStyle}
-                direction="Column"
-                gap="400"
-              >
-                <SettingTile
-                  title={item.name}
-                  description={item.description}
-                  after={
-                    <PowerSwitcher
-                      powerLevelTags={powerLevelTags}
-                      value={value}
-                      onChange={(v) => handleChangePermission(item.location, v, power)}
-                    >
-                      {(handleOpen, opened) => (
-                        <Chip
-                          variant={powerChanges ? 'Success' : 'Secondary'}
-                          outlined={powerChanges}
-                          fill="Soft"
-                          radii="Pill"
-                          aria-selected={opened}
-                          disabled={!canEdit || applyingChanges}
-                          after={
-                            powerChanges && (
-                              <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
-                            )
-                          }
-                          before={
-                            canEdit && (
-                              <Icon
-                                size="50"
-                                src={opened ? Icons.ChevronTop : Icons.ChevronBottom}
-                              />
-                            )
-                          }
-                          onClick={handleOpen}
-                        >
-                          <Text size="B300" truncate>
-                            {tag.name}
-                          </Text>
-                          {value < maxPower && (
-                            <Text size="T200">{t('RoomSettings.and_above')}</Text>
-                          )}
-                        </Chip>
-                      )}
-                    </PowerSwitcher>
-                  }
-                />
-              </SequenceCard>
+                title={item.name}
+                description={item.description}
+                after={
+                  <PowerSwitcher
+                    powerLevelTags={powerLevelTags}
+                    value={value}
+                    onChange={(v) => handleChangePermission(item.location, v, power)}
+                  >
+                    {(handleOpen, opened) => (
+                      <Chip
+                        variant={powerChanges ? 'Success' : 'Secondary'}
+                        outlined={powerChanges}
+                        fill="Soft"
+                        radii="Pill"
+                        aria-selected={opened}
+                        disabled={!canEdit || applyingChanges}
+                        after={
+                          powerChanges && (
+                            <Badge size="200" variant="Success" fill="Solid" radii="Pill" />
+                          )
+                        }
+                        before={
+                          canEdit && (
+                            <Icon size="50" src={opened ? Icons.ChevronTop : Icons.ChevronBottom} />
+                          )
+                        }
+                        onClick={handleOpen}
+                      >
+                        <Text size="B300" truncate>
+                          {tag.name}
+                        </Text>
+                        {value < maxPower && <Text size="T200">{t('RoomSettings.and_above')}</Text>}
+                      </Chip>
+                    )}
+                  </PowerSwitcher>
+                }
+              />
             );
           })}
-        </Box>
+        </SettingsSection>
       ))}
 
       {hasChanges && (
diff --git a/src/app/features/common-settings/permissions/Powers.tsx b/src/app/features/common-settings/permissions/Powers.tsx
index 72f16ae0..29487325 100644
--- a/src/app/features/common-settings/permissions/Powers.tsx
+++ b/src/app/features/common-settings/permissions/Powers.tsx
@@ -14,11 +14,12 @@ import {
   toRem,
   config,
   color,
+  Icon,
+  Icons,
 } from 'folds';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
 import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { SettingTile } from '../../../components/setting-tile';
+import { SettingsSection } from '../../settings/SettingsSection';
 import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import { PowerColorBadge, PowerIcon } from '../../../components/power';
@@ -77,15 +78,20 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
                           const hasPower = requiredPower <= power;
 
                           return (
-                            <Text
-                              key={itemIndex}
-                              size="T200"
-                              style={{
-                                color: hasPower ? undefined : color.Critical.Main,
-                              }}
-                            >
-                              {hasPower ? '✅' : '❌'} {item.name}
-                            </Text>
+                            <Box key={itemIndex} alignItems="Center" gap="200">
+                              <Icon
+                                size="50"
+                                src={hasPower ? Icons.Check : Icons.Cross}
+                                style={{
+                                  color: hasPower ? color.Success.Main : color.Surface.OnContainer,
+                                  opacity: hasPower ? 1 : 0.4,
+                                  flexShrink: 0,
+                                }}
+                              />
+                              <Text size="T200" style={{ opacity: hasPower ? 1 : 0.6 }}>
+                                {item.name}
+                              </Text>
+                            </Box>
                           );
                         })}
                       </div>
@@ -120,19 +126,12 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
     creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
 
   return (
-    <Box direction="Column" gap="100">
+    <Box direction="Column" gap="700">
       {creators.size > 0 && (
-        <SequenceCard
-          variant="SurfaceVariant"
-          className={SequenceCardStyle}
-          direction="Column"
-          gap="400"
+        <SettingsSection
+          label={t('RoomSettings.founders')}
+          footnote={t('RoomSettings.founders_desc')}
         >
-          <SettingTile
-            title={t('RoomSettings.founders')}
-            description={t('RoomSettings.founders_desc')}
-          />
-
           <SettingTile>
             <Box gap="200" wrap="Wrap">
               <Chip
@@ -148,17 +147,13 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
               </Chip>
             </Box>
           </SettingTile>
-        </SequenceCard>
+        </SettingsSection>
       )}
-      <SequenceCard
-        variant="SurfaceVariant"
-        className={SequenceCardStyle}
-        direction="Column"
-        gap="400"
+      <SettingsSection
+        label={t('RoomSettings.power_levels')}
+        footnote={t('RoomSettings.power_levels_desc')}
       >
         <SettingTile
-          title={t('RoomSettings.power_levels')}
-          description={t('RoomSettings.power_levels_desc')}
           after={
             onEdit && (
               <Box gap="200">
@@ -175,8 +170,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
               </Box>
             )
           }
-        />
-        <SettingTile>
+        >
           <Box gap="200" wrap="Wrap">
             {getPowers(powerLevelTags).map((power) => {
               const tag = powerLevelTags[power];
@@ -208,7 +202,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
             })}
           </Box>
         </SettingTile>
-      </SequenceCard>
+      </SettingsSection>
     </Box>
   );
 }