diff --git a/package.json b/package.json
index a1b476c1cb58..1c7f891d6b9e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "start-api": "swa start --ssl --ssl-cert ./.vscode/cert.crt --ssl-key ./.vscode/key.key --swa-config-location . http://localhost:3000 --api-location http://localhost:7071"
   },
   "config": {
-    "coreui_library_short_version": "4.0"
+    "coreui_library_short_version": "4.1"
   },
   "dependencies": {
     "@coreui/chartjs": "^3.0.0",
diff --git a/src/components/cipp/CippGroupedOffcanvas.js b/src/components/cipp/CippActionsOffcanvas.js
similarity index 62%
rename from src/components/cipp/CippGroupedOffcanvas.js
rename to src/components/cipp/CippActionsOffcanvas.js
index eaf277483847..2346caa8bfc6 100644
--- a/src/components/cipp/CippGroupedOffcanvas.js
+++ b/src/components/cipp/CippActionsOffcanvas.js
@@ -1,25 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import {
-  CListGroup,
-  CListGroupItem,
-  COffcanvasTitle,
-  CTable,
-  CTableBody,
-  CTableDataCell,
-  CTableRow,
-} from '@coreui/react'
+import { CListGroup, CListGroupItem, COffcanvasTitle } from '@coreui/react'
 import CippOffcanvas, { CippOffcanvasPropTypes } from './CippOffcanvas'
+import CippOffcanvasTable from './CippOffcanvasTable'
 
-export default function CippGroupedOffcanvas(props) {
-  const extendedInfoContent = props.extendedInfo.map((info, index) => (
-    <>
-      <CTableRow key={index}>
-        <CTableDataCell className="cipp-extendedinfo-label">{info.label}</CTableDataCell>
-        <CTableDataCell>{info.value}</CTableDataCell>
-      </CTableRow>
-    </>
-  ))
+export default function CippActionsOffcanvas(props) {
+  const extendedInfoContent = <CippOffcanvasTable rows={props.extendedInfo} guid={props.id} />
   const actionsContent = props.actions.map((action, index) => (
     <CListGroup layout="horizontal-md" key={index}>
       <CListGroupItem
@@ -42,16 +28,14 @@ export default function CippGroupedOffcanvas(props) {
       hideFunction={props.hideFunction}
     >
       <COffcanvasTitle>Extended Information</COffcanvasTitle>
-      <CTable small borderless responsive align="top" style={{ fontSize: 'smaller' }}>
-        <CTableBody>{extendedInfoContent}</CTableBody>
-      </CTable>
+      {extendedInfoContent}
       {<COffcanvasTitle>Actions</COffcanvasTitle>}
       {actionsContent}
     </CippOffcanvas>
   )
 }
 
-const CippGroupedOffcanvasPropTypes = {
+const CippActionsOffcanvasPropTypes = {
   extendedInfo: PropTypes.arrayOf(
     PropTypes.shape({
       label: PropTypes.string,
@@ -66,7 +50,8 @@ const CippGroupedOffcanvasPropTypes = {
       color: PropTypes.string,
     }),
   ).isRequired,
+  rowIndex: PropTypes.number,
   ...CippOffcanvasPropTypes,
 }
 
-CippGroupedOffcanvas.propTypes = CippGroupedOffcanvasPropTypes
+CippActionsOffcanvas.propTypes = CippActionsOffcanvasPropTypes
diff --git a/src/components/cipp/CippOffcanvasListGroup.js b/src/components/cipp/CippOffcanvasListGroup.js
new file mode 100644
index 000000000000..ad1f33a9a7c2
--- /dev/null
+++ b/src/components/cipp/CippOffcanvasListGroup.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { useListDatatableQuery } from 'src/store/api/datatable'
+import PropTypes from 'prop-types'
+import { CListGroup, CListGroupItem } from '@coreui/react'
+
+export default function CippDatatable({ path, params, ...rest }) {}
+
+CippDatatable.propTypes = {
+  path: PropTypes.string.isRequired,
+  params: PropTypes.object,
+  ...CippTablePropTypes,
+}
diff --git a/src/components/cipp/CippOffcanvasTable.js b/src/components/cipp/CippOffcanvasTable.js
new file mode 100644
index 000000000000..0dbf984f721f
--- /dev/null
+++ b/src/components/cipp/CippOffcanvasTable.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { CTable, CTableBody, CTableRow, CTableDataCell } from '@coreui/react'
+
+export default function CippOffcanvasTable({ rows }) {
+  const tableRows = rows.map((row, index, guid) => (
+    <CTableRow className="cipp-offcanvastable-row" key={`${guid}-${index}`}>
+      <CTableDataCell className="cipp-offcanvastable-label">{row.label}</CTableDataCell>
+      <CTableDataCell className="cipp-offcanvastable-value">{row.value}</CTableDataCell>
+    </CTableRow>
+  ))
+  return (
+    <CTable small borderless responsive align="top" className="cipp-offcanvastable">
+      <CTableBody>{tableRows}</CTableBody>
+    </CTable>
+  )
+}
+
+CippOffcanvasTable.propTypes = {
+  rows: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string,
+      value: PropTypes.any,
+    }),
+  ).isRequired,
+  guid: PropTypes.string,
+}
diff --git a/src/components/cipp/CippTable.js b/src/components/cipp/CippTable.js
index 042dcf785c9f..693b6917fdca 100644
--- a/src/components/cipp/CippTable.js
+++ b/src/components/cipp/CippTable.js
@@ -139,7 +139,6 @@ export default function CippTable({
 
   return (
     <div className="ms-n3 me-n3 cipp-tablewrapper">
-      {isFetching && <CSpinner />}
       {!isFetching && error && <span>Error loading data</span>}
       {!isFetching && !error && (
         <div>
@@ -166,6 +165,8 @@ export default function CippTable({
             defaultSortAsc
             defaultSortFieldId={1}
             paginationPerPage={25}
+            loading={isFetching}
+            progressComponent={<CSpinner size="sm" color="info" component="div" />}
             paginationRowsPerPageOptions={[25, 50, 100, 200, 500]}
             {...rest}
           />
diff --git a/src/components/cipp/index.js b/src/components/cipp/index.js
index 325083c588a3..e0cc4d738717 100644
--- a/src/components/cipp/index.js
+++ b/src/components/cipp/index.js
@@ -12,7 +12,8 @@ import TenantSelectorMultiple from './TenantSelectorMultiple'
 import ThemeSwitcher from './ThemeSwitcher'
 import TitleButton from './TitleButton'
 import CippOffcanvas from './CippOffcanvas'
-import CippGroupedOffcanvas from './CippGroupedOffcanvas'
+import CippActionsOffcanvas from './CippActionsOffcanvas'
+import CippOffcanvasTable from './CippOffcanvasTable'
 
 export {
   CellBadge,
@@ -28,7 +29,8 @@ export {
   CippDatatable,
   CippTable,
   CippOffcanvas,
-  CippGroupedOffcanvas,
+  CippActionsOffcanvas,
+  CippOffcanvasTable,
   PdfButton,
   StatusIcon,
   TenantSelector,
diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
index 0e176cb22111..0c4d9139895b 100644
--- a/src/scss/_custom.scss
+++ b/src/scss/_custom.scss
@@ -145,6 +145,11 @@
   }
 }
 
+.cipp-offcanvastable {
+  font-size: smaller;
+}
+
+
 .dropdown-item {
   a {
     color: var(--cui-dropdown-link-color);
@@ -192,6 +197,30 @@
 
 /* CIPP Text */
 
+.bg-primary {
+  background-color: var(--cui-primary) !important;
+}
+
+.bg-secondary {
+  background-color: var(--cui-secondary) !important;
+}
+
+.bg-success {
+  background-color: var(--cui-success) !important;
+}
+
+.bg-info {
+  background-color: var(--cui-info) !important;
+}
+
+.bg-warning {
+  background-color: var(--cui-warning) !important;
+}
+
+.bg-danger {
+  background-color: var(--cui-danger) !important;
+}
+
 .text-primary {
   color: var(--cui-primary) !important;
 }
diff --git a/src/scss/_themes.scss b/src/scss/_themes.scss
index 46b95adc477a..832060849ab3 100644
--- a/src/scss/_themes.scss
+++ b/src/scss/_themes.scss
@@ -77,6 +77,7 @@
   --cui-card-cap-color: var(--cyberdrain-light);
   --cui-card-cap-bg: var(--cyberdrain-accent-blue);
   --cui-border-radius: ;
+  --cui-badge-color: var(--cyberdrain-dark);
   // CIPP theme-independent variables.
   --cipp-border-radius: 0;
   --cipp-offcanvas-header-bg: var(--cyberdrain-accent-green);
@@ -239,6 +240,7 @@
   --cui-modal-header-bg: var(--cyberdrain-light);
   --cui-modal-header-border-color: var(--cyberdrain-accent-green);
   --cui-modal-header-color: var(--cyberdrain-dark);
+  --cui-progress-bg: var(--cyberdrain-lighter);
   --cui-nav-link-color: var(--cyberdrain-dark);
   --cui-nav-tabs-link-active-bg: var(--cyberdrain-lighter);
   --cui-nav-tabs-link-active-color: var(--cyberdrain-dark);
@@ -328,6 +330,7 @@
   --cui-modal-header-bg: var(--cyberdrain-dark);
   --cui-modal-header-border-color: var(--cyberdrain-accent-green);
   --cui-modal-header-color: var(--cyberdrain-light);
+  --cui-progress-bg: var(--cyberdrain-darker);
   --cui-nav-link-color: var(--cyberdrain-light);
   --cui-nav-tabs-link-active-bg: var(--cyberdrain-darker);
   --cui-nav-tabs-link-active-color: var(--cyberdrain-light);
diff --git a/src/views/endpoint/applications/ApplicationsList.js b/src/views/endpoint/applications/ApplicationsList.js
index 7549692ccf96..0ed44a145d36 100644
--- a/src/views/endpoint/applications/ApplicationsList.js
+++ b/src/views/endpoint/applications/ApplicationsList.js
@@ -3,15 +3,8 @@ import { useSelector } from 'react-redux'
 import { CButton } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CippPageList } from 'src/components'
-import {
-  faCog,
-  faEllipsisV,
-  faGlobe,
-  faGlobeEurope,
-  faPager,
-  faUser,
-} from '@fortawesome/free-solid-svg-icons'
-import { CippOffcanvas } from 'src/components/cipp'
+import { faEllipsisV, faGlobeEurope, faPager, faUser } from '@fortawesome/free-solid-svg-icons'
+import { CippActionsOffcanvas } from 'src/components/cipp'
 
 const Offcanvas = (row, rowIndex, formatExtraData) => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -27,7 +20,7 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
       <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
         <FontAwesomeIcon icon={faEllipsisV} />
       </CButton>
-      <CippOffcanvas
+      <CippActionsOffcanvas
         title="User information"
         extendedInfo={[
           { label: 'Install as', value: `${row.installExperience.runAsAccount}` },
diff --git a/src/views/identity/administration/Groups.js b/src/views/identity/administration/Groups.js
index 7055ac650a62..ae68f61b5e1f 100644
--- a/src/views/identity/administration/Groups.js
+++ b/src/views/identity/administration/Groups.js
@@ -57,7 +57,7 @@ const columns = [
     sortable: true,
   },
   {
-    name: 'Action',
+    name: 'Actions',
     cell: Offcanvas,
   },
 ]
diff --git a/src/views/identity/administration/UserGroups.js b/src/views/identity/administration/UserGroups.js
index fb6e76fadf7e..a712f6f7f717 100644
--- a/src/views/identity/administration/UserGroups.js
+++ b/src/views/identity/administration/UserGroups.js
@@ -1,17 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { CCard, CCardBody, CCardHeader, CCardTitle, CLink, CSpinner } from '@coreui/react'
-import { CellBoolean, CippDatatable } from '../../../components/cipp'
+import { CellBoolean, CippDatatable } from 'src/components/cipp'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUsers } from '@fortawesome/free-solid-svg-icons'
-import { useListUserGroupsQuery } from '../../../store/api/groups'
+import { useListUserGroupsQuery } from 'src/store/api/groups'
 
 const formatter = (cell) => CellBoolean({ cell })
 
 const columns = [
   {
     name: 'Display Name',
-    selector: 'DisplayName',
+    selector: (row) => row['DisplayName'],
     formatter: (cell, row) => {
       return (
         <CLink
@@ -24,30 +24,30 @@ const columns = [
   },
   {
     name: 'Mail Enabled',
-    selector: 'MailEnabled',
+    selector: (row) => row['MailEnabled'],
     formatter,
   },
   {
     name: 'Email Address',
-    selector: 'Mail',
+    selector: (row) => row['Mail'],
   },
   {
     name: 'Security Group',
-    selector: 'SecurityGroup',
+    selector: (row) => row['SecurityGroup'],
     formatter,
   },
   {
     name: 'Group Types',
-    selector: 'GroupTypes',
+    selector: (row) => row['GroupTypes'],
   },
   {
     name: 'On Premises Sync',
-    selector: 'OnPremisesSync',
+    selector: (row) => row['OnPremisesSync'],
     formatter,
   },
   {
     name: 'Assignable To Role',
-    selector: 'IsAssignableToRole',
+    selector: (row) => row['IsAssignableToRole'],
     formatter,
   },
 ]
@@ -69,13 +69,16 @@ export default function UserGroups({ userId, tenantDomain }) {
         {!isFetching && error && <>Error loading groups</>}
         {!isFetching && !error && (
           <CippDatatable
+            path="/api/ListUserGroups"
+            params={{ tenantFilter: tenantDomain, userId }}
             keyField="id"
             columns={columns}
             data={mapped}
             striped
             bordered={false}
             dense
-            wrapperClasses="table-responsive"
+            responsive={true}
+            disablePDFExport={true}
           />
         )}
       </CCardBody>
diff --git a/src/views/identity/administration/Users.js b/src/views/identity/administration/Users.js
index 1930431f4e23..134cffa31fea 100644
--- a/src/views/identity/administration/Users.js
+++ b/src/views/identity/administration/Users.js
@@ -4,10 +4,10 @@ import { Link } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { faPlus, faEdit, faTrash, faEllipsisV, faEye } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { cellBooleanFormatter } from '../../../components/cipp'
-import { CippPageList } from '../../../components'
-import { TitleButton } from '../../../components/cipp'
-import CippGroupedOffcanvas from 'src/components/cipp/CippGroupedOffcanvas'
+import { cellBooleanFormatter } from 'src/components/cipp'
+import { CippPageList } from 'src/components'
+import { TitleButton } from 'src/components/cipp'
+import CippActionsOffcanvas from 'src/components/cipp/CippActionsOffcanvas'
 
 const Offcanvas = (row, rowIndex, formatExtraData) => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -32,7 +32,7 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
       <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
         <FontAwesomeIcon icon={faEllipsisV} />
       </CButton>
-      <CippGroupedOffcanvas
+      <CippActionsOffcanvas
         title="User Information"
         extendedInfo={[
           { label: 'Given Name', value: `${row.givenName}` },
@@ -45,13 +45,13 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
           {
             icon: <FontAwesomeIcon icon={faEye} className="me-2" />,
             label: 'View User',
-            link: { viewLink },
+            link: viewLink,
             color: 'success',
           },
           {
             icon: <FontAwesomeIcon icon={faEdit} className="me-2" />,
             label: 'Edit User',
-            link: { editLink },
+            link: editLink,
             color: 'info',
           },
           {
@@ -64,7 +64,12 @@ const Offcanvas = (row, rowIndex, formatExtraData) => {
           { label: 'Block Sign-in', link: 'dothis', color: 'info' },
           { label: 'Reset Password (Must Change)', link: 'dothis', color: 'info' },
           { label: 'Reset Password', link: 'dothis', color: 'info' },
-          { label: 'Delete User', link: 'dothis', color: 'info' },
+          {
+            icon: <FontAwesomeIcon icon={faTrash} className="me-2" />,
+            label: 'Delete User',
+            link: 'dothis',
+            color: 'danger',
+          },
         ]}
         placement="end"
         visible={ocVisible}
@@ -93,7 +98,8 @@ const columns = [
     selector: (row) => row['userType'],
     sortable: true,
     exportSelector: 'userType',
-    minWidth: '75px',
+    minWidth: '50px',
+    maxWidth: '140px',
   },
   {
     name: 'Enabled',
@@ -101,21 +107,23 @@ const columns = [
     cell: cellBooleanFormatter(),
     sortable: true,
     exportSelector: 'accountEnabled',
-    maxWidth: '100px',
+    minWidth: '50px',
+    maxWidth: '90px',
   },
   {
-    name: 'On Premise Sync',
+    name: 'AD Synced',
     selector: (row) => row['onPremisesSyncEnabled'],
     cell: cellBooleanFormatter(),
     sortable: true,
     exportSelector: 'onPremisesSyncEnabled',
-    maxWidth: '150px',
+    minWidth: '50px',
+    maxWidth: '110px',
   },
   {
     name: 'Licenses',
     selector: (row) => row['LicJoined'],
     exportSelector: 'LicJoined',
-    grow: 2,
+    grow: 5,
   },
   {
     name: 'id',
@@ -123,8 +131,7 @@ const columns = [
     omit: true,
   },
   {
-    name: 'Action',
-    button: true,
+    name: 'Actions',
     cell: Offcanvas,
   },
 ]
diff --git a/src/views/tenant/standards/DomainsAnalyser.js b/src/views/tenant/standards/DomainsAnalyser.js
index da7e78ac5e08..8292888e97bd 100644
--- a/src/views/tenant/standards/DomainsAnalyser.js
+++ b/src/views/tenant/standards/DomainsAnalyser.js
@@ -11,7 +11,7 @@ import {
 import cellGetProperty from '../../../components/cipp/cellGetProperty'
 import IndividualDomainCheck from './IndividualDomain'
 
-const MoreInfoCard = ({ row }) => {
+const MoreInfoContent = ({ row }) => {
   return (
     <>
       <strong>Score Explanation: </strong>
@@ -50,7 +50,7 @@ const MoreInfoCard = ({ row }) => {
     </>
   )
 }
-MoreInfoCard.propTypes = {
+MoreInfoContent.propTypes = {
   row: PropTypes.object.isRequired,
 }