diff --git a/src/components/CippProfile.js b/src/components/CippProfile.js
new file mode 100644
index 000000000000..d75ba9300f02
--- /dev/null
+++ b/src/components/CippProfile.js
@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  CRow,
+  CCol,
+  CCard,
+  CCardImage,
+  CCardTitle,
+  CCardBody,
+  CListGroup,
+  CListGroupItem,
+  CSpinner,
+} from '@coreui/react'
+import avatar0 from './../assets/images/avatars/0.jpg'
+import { useLoadClientPrincipalQuery } from '../store/api/auth'
+import ThemeSwitcher from 'src/components/cipp/ThemeSwitcher'
+
+const CippProfile = () => {
+  const { data: profile, isFetching, isLoading } = useLoadClientPrincipalQuery()
+
+  return (
+    <>
+      <CRow xs={{ gutter: 3 }}>
+        <CCol>
+          <CCard>
+            {(isFetching || isLoading) && <CSpinner />}
+            {!isLoading && (
+              <>
+                <CCardImage orientation="top" src={avatar0} />
+                <CCardBody>
+                  <CCardTitle>{profile.clientPrincipal.userDetails}</CCardTitle>
+                </CCardBody>
+                <CListGroup flush>
+                  <CListGroupItem>
+                    Identity Provider: {profile.clientPrincipal.identityProvider}
+                  </CListGroupItem>
+                  <CListGroupItem>User ID: {profile.clientPrincipal.userId}</CListGroupItem>
+                  <CListGroupItem>
+                    Roles ({profile.clientPrincipal.userRoles.length})
+                    <ul>
+                      {profile.clientPrincipal.userRoles.map((r, index) => (
+                        <li key={index}>{r}</li>
+                      ))}
+                    </ul>
+                  </CListGroupItem>
+                </CListGroup>
+              </>
+            )}
+          </CCard>
+        </CCol>
+        <CCol>
+          <ThemeSwitcher />
+        </CCol>
+      </CRow>
+    </>
+  )
+}
+
+export default CippProfile
diff --git a/src/components/header/AppHeaderDropdown.js b/src/components/header/AppHeaderDropdown.js
index 28b20c209ab0..748bd6c92a2a 100644
--- a/src/components/header/AppHeaderDropdown.js
+++ b/src/components/header/AppHeaderDropdown.js
@@ -1,31 +1,52 @@
-import React from 'react'
-import { CAvatar, CDropdown, CDropdownHeader, CDropdownMenu, CDropdownToggle } from '@coreui/react'
-import { faUser, faBook } from '@fortawesome/free-solid-svg-icons'
+import React, { useState } from 'react'
+import {
+  CAvatar,
+  CDropdown,
+  CDropdownHeader,
+  CDropdownMenu,
+  CDropdownToggle,
+  CLink,
+} from '@coreui/react'
+import { faUser, faBook, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Link } from 'react-router-dom'
 import { authApi } from '../../store/api/auth'
+import CippProfile from '../CippProfile'
+import CippOffcanvas from '../cipp/CippOffcanvas'
 
 const AppHeaderDropdown = () => {
+  const [profileVisible, setProfileVisible] = useState(false)
   const { data: profile } = authApi.endpoints.loadClientPrincipal.useQueryState()
+  const cippProfile = <CippProfile />
   return (
-    <CDropdown variant="nav-item">
-      <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
-        <CAvatar color="primary" textColor="white" size="md">
-          {profile.clientPrincipal.userDetails[0].toUpperCase()}
-        </CAvatar>
-      </CDropdownToggle>
-      <CDropdownMenu className="pt-0" placement="bottom-end">
-        <CDropdownHeader className="fw-semibold py-2">Settings</CDropdownHeader>
-        <Link className="dropdown-item" to="/profile/view">
-          <FontAwesomeIcon icon={faUser} className="me-2" />
-          Profile
-        </Link>
-        <Link className="dropdown-item" to="/cipp/logs">
-          <FontAwesomeIcon icon={faBook} className="me-2" />
-          Logbook
-        </Link>
-      </CDropdownMenu>
-    </CDropdown>
+    <>
+      <CDropdown variant="nav-item">
+        <CDropdownToggle placement="bottom-end" className="py-0" caret={false}>
+          <CAvatar color="primary" textColor="white" size="md">
+            {profile.clientPrincipal.userDetails[0].toUpperCase()}
+          </CAvatar>
+        </CDropdownToggle>
+        <CDropdownMenu className="pt-0" placement="bottom-end">
+          <CDropdownHeader className="fw-semibold py-2">Settings</CDropdownHeader>
+          <CLink className="dropdown-item" href="#" onClick={() => setProfileVisible(true)}>
+            <FontAwesomeIcon icon={faUser} className="me-2" />
+            Profile
+          </CLink>
+          <Link className="dropdown-item" to="/cipp/logs">
+            <FontAwesomeIcon icon={faBook} className="me-2" />
+            Logbook
+          </Link>
+        </CDropdownMenu>
+      </CDropdown>
+      <CippOffcanvas
+        id="cipp-profile"
+        visible={profileVisible}
+        hideFunction={() => setProfileVisible(false)}
+        title="Profile"
+        placement="end"
+        children={cippProfile}
+      />
+    </>
   )
 }
 
diff --git a/src/views/tenant/standards/DomainsAnalyser.js b/src/views/tenant/standards/DomainsAnalyser.js
index 797df763aada..da7e78ac5e08 100644
--- a/src/views/tenant/standards/DomainsAnalyser.js
+++ b/src/views/tenant/standards/DomainsAnalyser.js
@@ -1,9 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { CButton, CCard, CCardHeader, CCardTitle, CCardBody } from '@coreui/react'
-import { CellBadge, CippDatatable, cellProgressBarFormatter } from '../../../components/cipp'
-import { ModalService } from '../../../components'
+import {
+  CellBadge,
+  CippDatatable,
+  cellProgressBarFormatter,
+  CippOffcanvas,
+} from '../../../components/cipp'
+/*import { ModalService } from '../../../components'*/
 import cellGetProperty from '../../../components/cipp/cellGetProperty'
+import IndividualDomainCheck from './IndividualDomain'
 
 const MoreInfoCard = ({ row }) => {
   return (
@@ -48,12 +54,28 @@ MoreInfoCard.propTypes = {
   row: PropTypes.object.isRequired,
 }
 
+function checkDomain(tenantDomain) {
+  return (
+    <div key={tenantDomain}>
+      <IndividualDomainCheck initialDomain={tenantDomain} readOnly={true} isOffcanvas={true} />
+    </div>
+  )
+}
+checkDomain.propTypes = {
+  tenantDomain: PropTypes.string,
+}
+
 const DomainsAnalyser = () => {
+  const [individualDomainResults, setIndividualDomainResults] = useState()
+  const [domainCheckVisible, setDomainCheckVisible] = useState(false)
+
   const handleMoreInfo = ({ row }) => {
-    ModalService.open({
+    /*ModalService.open({
       body: <MoreInfoCard row={row} />,
       title: `${row.Tenant} More Information`,
-    })
+    })*/
+    setIndividualDomainResults(checkDomain(row.Domain))
+    setDomainCheckVisible(true)
   }
 
   const columns = [
@@ -226,6 +248,15 @@ const DomainsAnalyser = () => {
           />
         </CCardBody>
       </CCard>
+
+      <CippOffcanvas
+        id="individual-domain"
+        visible={domainCheckVisible}
+        hideFunction={() => setDomainCheckVisible(false)}
+        title="More Info"
+        placement="end"
+        children={individualDomainResults}
+      />
     </div>
   )
 }
diff --git a/src/views/tenant/standards/IndividualDomain.js b/src/views/tenant/standards/IndividualDomain.js
index 76568f284efc..7a739b184458 100644
--- a/src/views/tenant/standards/IndividualDomain.js
+++ b/src/views/tenant/standards/IndividualDomain.js
@@ -1,9 +1,10 @@
 import React, { useEffect, useState, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { Form } from 'react-final-form'
+import { Form, Field } from 'react-final-form'
 import { useSearchParams } from 'react-router-dom'
 import { useLazyListDomainTestsQuery, useListDomainTestsQuery } from '../../../store/api/domains'
 import StatusIcon from 'src/components/cipp/StatusIcon'
+import CippOffcanvas from 'src/components/cipp/CippOffcanvas'
 import {
   CAlert,
   CButton,
@@ -14,6 +15,8 @@ import {
   CCol,
   CCollapse,
   CForm,
+  CFormLabel,
+  CFormInput,
   CFormTextarea,
   CRow,
   CCardTitle,
@@ -27,6 +30,8 @@ import {
   CTableBody,
   CBadge,
   CTooltip,
+  COffcanvasTitle,
+  CInputGroup,
 } from '@coreui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -39,7 +44,6 @@ import {
   faCopy,
   faExternalLinkAlt,
 } from '@fortawesome/free-solid-svg-icons'
-import { RFFCFormInput } from '../../../components/RFFComponents'
 
 // const required = (value) => (value ? undefined : 'Required')
 
@@ -51,19 +55,42 @@ const IconWarning = () => (
 const IconExternalLink = () => <FontAwesomeIcon icon={faExternalLinkAlt} />
 const IconCopy = () => <FontAwesomeIcon icon={faCopy} />
 
-const IndividualDomainCheck = () => {
+const domainCheckProps = {
+  readOnly: PropTypes.bool,
+  isOffcanvas: PropTypes.bool,
+  initialDomain: PropTypes.string,
+}
+
+export default function IndividualDomainCheck({
+  initialDomain = '',
+  readOnly = false,
+  isOffcanvas = false,
+}) {
   const [searchParams, setSearchParams] = useSearchParams()
   const [domain, setDomain] = useState('')
+  const [rowXs, setRowXs] = useState()
+  const [rowXl, setRowXl] = useState()
   const [trigger, { data, isFetching, isSuccess, ...rest }] = useLazyListDomainTestsQuery()
 
   useEffect(() => {
+    if (initialDomain) {
+      searchParams.set('domain', initialDomain)
+    }
     // check if domain query is set
     const domainQuery = searchParams.get('domain')
     if (domainQuery) {
       setDomain(domainQuery)
       trigger({ domain: domainQuery })
     }
-  }, [searchParams, trigger])
+
+    if (isOffcanvas) {
+      setRowXs({ cols: 1, gutter: 3 })
+      setRowXl({ cols: 1, gutter: 3 })
+    } else {
+      setRowXs({ cols: 1, gutter: 4 })
+      setRowXl({ cols: 2, gutter: 4 })
+    }
+  }, [searchParams, trigger, isOffcanvas, initialDomain])
 
   const onSubmit = (values) => {
     setDomain(values.domain)
@@ -72,11 +99,11 @@ const IndividualDomainCheck = () => {
   }
 
   return (
-    <CRow xs={{ cols: 1, gutter: 4 }} xl={{ cols: 2, gutter: 4 }} className="mb-5">
+    <CRow xs={rowXs} xl={rowXl} className="mb-5">
       <CCol>
         <CCard className="page-card h-100">
           <CCardHeader>
-            <CCardTitle>Email Security Domain Checker</CCardTitle>
+            <CCardTitle className="text-primary">Email Security Domain Checker</CCardTitle>
           </CCardHeader>
           <CCardBody>
             <Form
@@ -85,18 +112,40 @@ const IndividualDomainCheck = () => {
               render={({ handleSubmit, submitting, pristine }) => {
                 return (
                   <CForm onSubmit={handleSubmit}>
-                    <RFFCFormInput spellCheck={false} name="domain" label="Domain Name" />
-                    <CButton
-                      type="submit"
-                      disabled={submitting || isFetching}
-                      className="mt-4"
-                      color="primary"
-                    >
-                      {isFetching && (
-                        <FontAwesomeIcon icon={faCircleNotch} spin size="1x" className="me-2" />
-                      )}
-                      Check Domain
-                    </CButton>
+                    <Field name="domain">
+                      {({ input, meta }) => {
+                        return (
+                          <CInputGroup className="mb-3">
+                            <CFormInput
+                              {...input}
+                              valid={!meta.error && meta.touched}
+                              invalid={meta.error && meta.touched}
+                              type="text"
+                              id="domain"
+                              disabled={readOnly}
+                              placeholder="Domain Name"
+                              area-describedby="domain"
+                            />
+
+                            <CButton
+                              type="submit"
+                              disabled={submitting || isFetching || readOnly}
+                              color="primary"
+                            >
+                              {isFetching && (
+                                <FontAwesomeIcon
+                                  icon={faCircleNotch}
+                                  spin
+                                  size="1x"
+                                  className="me-2"
+                                />
+                              )}
+                              Check
+                            </CButton>
+                          </CInputGroup>
+                        )
+                      }}
+                    </Field>
                   </CForm>
                 )
               }}
@@ -114,7 +163,9 @@ const IndividualDomainCheck = () => {
   )
 }
 
-export default IndividualDomainCheck
+IndividualDomainCheck.propTypes = domainCheckProps
+
+/*export default IndividualDomainCheck*/
 
 const sharedProps = {
   domain: PropTypes.string,
@@ -137,7 +188,7 @@ const ResultsCard = ({ children, data, type }) => {
   return (
     <CCard className="page-card h-100">
       <CCardHeader>
-        <CCardTitle>
+        <CCardTitle className="text-primary">
           <StatusIcon type="finalstate" finalState={finalState} />
           {type} Results
         </CCardTitle>
@@ -238,94 +289,103 @@ const SPFResultsCard = ({ domain }) => {
 
 SPFResultsCard.propTypes = sharedProps
 
-const MXResultsCard = ({ domain }) => {
-  const { data } = useListDomainTestsQuery({ domain })
-  const mailProviderName = data?.MXResults?.MailProvider?.Name
+const MXDetailView = (data) => {
   let records = data?.MXResults?.Records || []
 
   if (!Array.isArray(records)) {
     records = [records]
   }
+
+  return (
+    <>
+      {records.length > 0 && (
+        <div>
+          <COffcanvasTitle>MX Records</COffcanvasTitle>
+          <CTable striped small>
+            <CTableHead>
+              <CTableRow>
+                <CTableHeaderCell scope="col">Priority</CTableHeaderCell>
+                <CTableHeaderCell scope="col">Hostname</CTableHeaderCell>
+              </CTableRow>
+            </CTableHead>
+            <CTableBody>
+              {records.map((record, key) => (
+                <CTableRow key={`${key}-mx-record`}>
+                  <CTableDataCell>{record?.Priority}</CTableDataCell>
+                  <CTableDataCell>{record?.Hostname}</CTableDataCell>
+                </CTableRow>
+              ))}
+            </CTableBody>
+          </CTable>
+        </div>
+      )}
+      <COffcanvasTitle>Documentation</COffcanvasTitle>
+      <CListGroup>
+        {data?.MXResults?.MailProvider?._MxComment && (
+          <CListGroupItem
+            component="a"
+            target="_blank"
+            href={data?.MXResults?.MailProvider?._MxComment}
+          >
+            <IconExternalLink /> MX Record
+          </CListGroupItem>
+        )}
+        {data?.MXResults?.MailProvider?._SpfComment && (
+          <CListGroupItem
+            component="a"
+            target="_blank"
+            href={data?.MXResults?.MailProvider?._SpfComment}
+          >
+            <IconExternalLink /> SPF Record
+          </CListGroupItem>
+        )}
+        {data?.MXResults?.MailProvider?._DkimComment && (
+          <CListGroupItem
+            component="a"
+            target="_blank"
+            href={data?.MXResults?.MailProvider?._DkimComment}
+          >
+            <IconExternalLink /> DKIM Record
+          </CListGroupItem>
+        )}
+      </CListGroup>
+    </>
+  )
+}
+MXDetailView.propTypes = {
+  data: PropTypes.object,
+}
+
+const MXResultsCard = ({ domain }) => {
+  const { data } = useListDomainTestsQuery({ domain })
+  const mailProviderName = data?.MXResults?.MailProvider?.Name
+
   const [visible, setVisible] = useState(false)
   return (
     <ResultsCard data={data} type="MX">
       <div className="mb-2">
-        <CBadge
-          style={{ fontSize: 14, border: '1px solid var(--cui-btn-border-color, transparent)' }}
-          color="info"
-        >
+        <CBadge style={{ fontSize: 14 }} color="secondary">
           Mail Provider: {mailProviderName || 'Unknown'}
         </CBadge>
         <CTooltip content="Click to toggle mail provider/MX record details">
           <CBadge
             className="ms-1 btn"
-            onClick={() => setVisible(!visible)}
+            onClick={() => setVisible(true)}
             style={{ fontSize: 14 }}
             color="primary"
           >
-            {(visible && 'Hide') || 'Show'} Details
+            Details
           </CBadge>
         </CTooltip>
       </div>
-      <CCollapse visible={visible} className="mb-2">
-        <CRow lg={{ cols: 1, gutter: 2 }} xl={{ cols: 2, gutter: 4 }}>
-          <CCol xl={8}>
-            {records.length > 0 && (
-              <div>
-                <CCardTitle>MX Records</CCardTitle>
-                <CTable striped small>
-                  <CTableHead>
-                    <CTableRow>
-                      <CTableHeaderCell scope="col">Priority</CTableHeaderCell>
-                      <CTableHeaderCell scope="col">Hostname</CTableHeaderCell>
-                    </CTableRow>
-                  </CTableHead>
-                  <CTableBody>
-                    {records.map((record, key) => (
-                      <CTableRow key={`${key}-mx-record`}>
-                        <CTableDataCell>{record?.Priority}</CTableDataCell>
-                        <CTableDataCell>{record?.Hostname}</CTableDataCell>
-                      </CTableRow>
-                    ))}
-                  </CTableBody>
-                </CTable>
-              </div>
-            )}
-          </CCol>
-          <CCol xl={4}>
-            <CCardTitle>Mail Provider Info</CCardTitle>
-            <CListGroup>
-              {data?.MXResults?.MailProvider?._MxComment && (
-                <CListGroupItem
-                  component="a"
-                  target="_blank"
-                  href={data?.MXResults?.MailProvider?._MxComment}
-                >
-                  <IconExternalLink /> MX Record
-                </CListGroupItem>
-              )}
-              {data?.MXResults?.MailProvider?._SpfComment && (
-                <CListGroupItem
-                  component="a"
-                  target="_blank"
-                  href={data?.MXResults?.MailProvider?._SpfComment}
-                >
-                  <IconExternalLink /> SPF Record
-                </CListGroupItem>
-              )}
-              {data?.MXResults?.MailProvider?._DkimComment && (
-                <CListGroupItem
-                  component="a"
-                  target="_blank"
-                  href={data?.MXResults?.MailProvider?._DkimComment}
-                >
-                  <IconExternalLink /> DKIM Record
-                </CListGroupItem>
-              )}
-            </CListGroup>
-          </CCol>
-        </CRow>
-      </CCollapse>
+      <CippOffcanvas
+        visible={visible}
+        placement="end"
+        className="cipp-offcanvas"
+        hideFunction={() => setVisible(false)}
+        title="Mail Provider Info"
+        children={MXDetailView(data)}
+      />
     </ResultsCard>
   )
 }
@@ -461,8 +521,7 @@ const DKIMResultsCard = ({ domain }) => {
       <CCollapse visible={visible} className="mb-2">
         {records.map((record, idx) => (
           <div key={`${idx}-dkim-record`}>
-            {/*<CFormLabel>{record?.Selector}</CFormLabel>
-            # TODO: Update API to expose selector name */}
+            <CFormLabel>{record?.Selector}._domainkey</CFormLabel>
             <CFormTextarea
               className="bg-secondary text-white mb-2"
               value={record?.Record}