diff --git a/src/views/tenant/administration/Tenants.js b/src/views/tenant/administration/Tenants.js
index 3c4f8633c09c..7ede1960a56c 100644
--- a/src/views/tenant/administration/Tenants.js
+++ b/src/views/tenant/administration/Tenants.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { CButton } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -6,11 +6,148 @@ import {
   faCheckCircle,
   faCog,
   faEdit,
+  faEllipsisV,
   faExclamationTriangle,
 } from '@fortawesome/free-solid-svg-icons'
 import { CippPageList } from 'src/components/layout'
-import { Link } from 'react-router-dom'
 import { CellTip, CellTipIcon } from 'src/components/tables'
+import { CippActionsOffcanvas } from 'src/components/utilities'
+import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
+import Skeleton from 'react-loading-skeleton'
+
+const Offcanvas = (row, rowIndex, formatExtraData) => {
+  const [getTenantDetails, tenantDetails] = useLazyGenericGetRequestQuery()
+  const [ocVisible, setOCVisible] = useState(false)
+
+  function loadOffCanvasDetails(domainName) {
+    setOCVisible(true)
+    getTenantDetails({ path: `api/ListTenantDetails?tenantfilter=${domainName}` })
+  }
+
+  function tenantProperty(tenantDetails, propertyName) {
+    return (
+      <>
+        {tenantDetails.isFetching && <Skeleton count={1} width={150} />}
+        {!tenantDetails.isFetching &&
+          tenantDetails.isSuccess &&
+          (tenantDetails.data[propertyName]?.toString() ?? ' ')}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <CButton size="sm" color="link" onClick={() => loadOffCanvasDetails(row.defaultDomainName)}>
+        <FontAwesomeIcon icon={faEllipsisV} />
+      </CButton>
+      <CippActionsOffcanvas
+        title="Tenant Information"
+        extendedInfo={[
+          {
+            label: 'Display Name',
+            value: tenantProperty(tenantDetails, 'displayName'),
+          },
+          {
+            label: 'Business Phones',
+            value: tenantProperty(tenantDetails, 'businessPhones'),
+          },
+          {
+            label: 'Technical Emails',
+            value: tenantProperty(tenantDetails, 'technicalNotificationMails'),
+          },
+          {
+            label: 'Tenant Type',
+            value: tenantProperty(tenantDetails, 'tenantType'),
+          },
+          {
+            label: 'Created',
+            value: tenantProperty(tenantDetails, 'createdDateTime'),
+          },
+          {
+            label: 'AD Connect Enabled',
+            value: tenantProperty(tenantDetails, 'onPremisesSyncEnabled'),
+          },
+          {
+            label: 'AD Connect Sync',
+            value: tenantProperty(tenantDetails, 'onPremisesLastSyncDateTime'),
+          },
+          {
+            label: 'AD Password Sync',
+            value: tenantProperty(tenantDetails, 'onPremisesLastPasswordSyncDateTime'),
+          },
+        ]}
+        actions={[
+          {
+            icon: <FontAwesomeIcon icon={faEdit} className="me-2" />,
+            label: 'Edit Tenant',
+            link: `/tenant/administration/tenants/Edit?tenantFilter=${row.defaultDomainName}&customerId=${row.customerId}`,
+            color: 'warning',
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'M365 Portal',
+            link: `https://portal.office.com/Partner/BeginClientSession.aspx?CTID=${row.customerId}&CSDEST=o365admincenter`,
+            external: true,
+            color: 'info',
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'Exchange Portal',
+            color: 'info',
+            external: true,
+            link: `https://outlook.office365.com/ecp/?rfr=Admin_o365&exsvurl=1&delegatedOrg=${row.defaultDomainName}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'AAD Portal',
+            color: 'info',
+            external: true,
+            link: `https://aad.portal.azure.com/${row.defaultDomainName}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'Teams Portal',
+            color: 'info',
+            external: true,
+            link: `https://admin.teams.microsoft.com/?delegatedOrg=${row.defaultDomainName}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'Azure Portal',
+            color: 'info',
+            external: true,
+            link: `https://portal.azure.com/${row.defaultDomainName}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'MEM (Intune) Portal',
+            color: 'info',
+            external: true,
+            link: `https://endpoint.microsoft.com/${row.defaultDomainName}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'Security Portal (GDAP)',
+            color: 'info',
+            external: true,
+            link: `https://security.microsoft.com/?tid=${row.customerId}`,
+          },
+          {
+            icon: <FontAwesomeIcon icon={faCog} className="me-2" />,
+            label: 'Sharepoint Admin',
+            color: 'info',
+            external: true,
+            link: `https://${row.defaultDomainName.split('.')[0]}-admin.sharepoint.com`,
+          },
+        ]}
+        placement="end"
+        visible={ocVisible}
+        id={row.id}
+        hideFunction={() => setOCVisible(false)}
+      />
+    </>
+  )
+}
 
 function StatusIcon(graphErrorCount) {
   if (graphErrorCount > 0) {
@@ -60,138 +197,10 @@ const columns = [
   {
     exportSelector: 'customerId',
   },
-  {
-    name: 'M365 Portal',
-    selector: (row) => row['customerId'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://portal.office.com/Partner/BeginClientSession.aspx?CTID=${row.customerId}&CSDEST=o365admincenter`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'Exchange Portal',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://outlook.office365.com/ecp/?rfr=Admin_o365&exsvurl=1&delegatedOrg=${row.defaultDomainName}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'AAD Portal',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://aad.portal.azure.com/${row.defaultDomainName}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'Teams Portal',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://admin.teams.microsoft.com/?delegatedOrg=${row.defaultDomainName}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'Azure Portal',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://portal.azure.com/${row.defaultDomainName}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'MEM (Intune) Portal',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://endpoint.microsoft.com/${row.defaultDomainName}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'Security Portal (GDAP)',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://security.microsoft.com/?tid=${row.customerId}`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
-  {
-    name: 'Sharepoint Admin',
-    selector: (row) => row['defaultDomainName'],
-    center: true,
-    cell: (row) => (
-      <a
-        href={`https://${row.defaultDomainName.split('.')[0]}-admin.sharepoint.com`}
-        target="_blank"
-        className="dlink"
-        rel="noreferrer"
-      >
-        <FontAwesomeIcon icon={faCog} className="me-2" />
-      </a>
-    ),
-  },
   {
     name: 'Actions',
     center: true,
-    cell: (row) => (
-      <Link
-        to={`/tenant/administration/tenants/Edit?tenantFilter=${row.defaultDomainName}&customerId=${row.customerId}`}
-      >
-        <CButton size="sm" variant="ghost" color="warning">
-          <FontAwesomeIcon icon={faEdit} />
-        </CButton>
-      </Link>
-    ),
+    cell: Offcanvas,
   },
 ]