diff --git a/src/views/cipp/app-settings/SettingsSuperAdmin.jsx b/src/views/cipp/app-settings/SettingsSuperAdmin.jsx
index 8f1184eef32d..4e38038fb68c 100644
--- a/src/views/cipp/app-settings/SettingsSuperAdmin.jsx
+++ b/src/views/cipp/app-settings/SettingsSuperAdmin.jsx
@@ -6,6 +6,7 @@ import React from 'react'
 import { CippCallout } from 'src/components/layout/index.js'
 import CippAccordionItem from 'src/components/contentcards/CippAccordionItem'
 import SettingsCustomRoles from 'src/views/cipp/app-settings/components/SettingsCustomRoles'
+import CippButtonCard from 'src/components/contentcards/CippButtonCard'
 
 export function SettingsSuperAdmin() {
   const partnerConfig = useGenericGetRequestQuery({
@@ -39,8 +40,8 @@ export function SettingsSuperAdmin() {
   )
 
   return (
-    <CAccordion>
-      <CippAccordionItem
+    <>
+      <CippButtonCard
         title="Tenant Mode"
         titleType="big"
         isFetching={partnerConfig.isFetching}
@@ -102,10 +103,8 @@ export function SettingsSuperAdmin() {
             </CRow>
           </>
         </>
-      </CippAccordionItem>
-      <CippAccordionItem title="Custom Roles (beta)" titleType="big">
-        <SettingsCustomRoles />
-      </CippAccordionItem>
-    </CAccordion>
+      </CippButtonCard>
+      <SettingsCustomRoles />
+    </>
   )
 }
diff --git a/src/views/cipp/app-settings/components/SettingsCustomRoles.jsx b/src/views/cipp/app-settings/components/SettingsCustomRoles.jsx
index f45741bcabed..d4b8d240a668 100644
--- a/src/views/cipp/app-settings/components/SettingsCustomRoles.jsx
+++ b/src/views/cipp/app-settings/components/SettingsCustomRoles.jsx
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types'
 import { OnChange } from 'react-final-form-listeners'
 import { useListTenantsQuery } from 'src/store/api/tenants'
 import CippListOffcanvas, { OffcanvasListSection } from 'src/components/utilities/CippListOffcanvas'
+import CippButtonCard from 'src/components/contentcards/CippButtonCard'
 
 const SettingsCustomRoles = () => {
   const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery()
@@ -219,7 +220,7 @@ const SettingsCustomRoles = () => {
   }
 
   return (
-    <CippPage title="Custom Roles" tenantSelector={false}>
+    <CippButtonCard title="Custom Roles" titleType="big" isFetching={isFetching || tenantsFetching}>
       <>
         <p className="me-1">
           Custom roles can be used to restrict permissions for users with the 'editor' or 'readonly'
@@ -231,7 +232,6 @@ const SettingsCustomRoles = () => {
           beta and should be treated as such. The custom role must be added to the user in SWA in
           conjunction with the base role. (e.g. editor,mycustomrole)
         </p>
-        {(isFetching || tenantsFetching) && <Skeleton count={1} />}
         {isSuccess && !isFetching && !tenantsFetching && (
           <Form
             onSubmit={handleSubmit}
@@ -325,6 +325,7 @@ const SettingsCustomRoles = () => {
                         </>
                       </CAccordion>
                     </CCol>
+
                     <CCol xl={4} md={12}>
                       <FormSpy subscription={{ values: true }}>
                         {({ values }) => {
@@ -402,7 +403,7 @@ const SettingsCustomRoles = () => {
           />
         )}
       </>
-    </CippPage>
+    </CippButtonCard>
   )
 }