diff --git a/public/apps/account/password-reset-panel.tsx b/public/apps/account/password-reset-panel.tsx
index 5ca0f44dd..a35b2b466 100644
--- a/public/apps/account/password-reset-panel.tsx
+++ b/public/apps/account/password-reset-panel.tsx
@@ -27,7 +27,7 @@ import {
   EuiModalFooter,
   EuiOverlayMask,
   EuiSpacer,
-  EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { FormRow } from '../configuration/utils/form-row';
@@ -104,9 +104,9 @@ export function PasswordResetPanel(props: PasswordResetPanelProps) {
       <EuiModal data-test-subj="reset-password-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Reset password for &quot;{props.username}&quot;</h4>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>Reset password for &quot;{props.username}&quot;</h2>
+          </EuiText>
 
           <EuiSpacer />
 
diff --git a/public/apps/account/role-info-panel.tsx b/public/apps/account/role-info-panel.tsx
index ce19c8188..2ba848655 100644
--- a/public/apps/account/role-info-panel.tsx
+++ b/public/apps/account/role-info-panel.tsx
@@ -17,7 +17,6 @@ import {
   EuiModalBody,
   EuiOverlayMask,
   EuiText,
-  EuiTitle,
   EuiHorizontalRule,
   EuiSpacer,
 } from '@elastic/eui';
@@ -48,29 +47,29 @@ export function RoleInfoPanel(props: { coreStart: CoreStart; handleClose: () =>
       <EuiModal data-test-subj="role-info-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Roles ({roles.length})</h4>
-          </EuiTitle>
-          <EuiText color="subdued">
+          <EuiText size="s">
+            <h2>Roles ({roles.length})</h2>
+          </EuiText>
+          <EuiText color="subdued" size="s">
             Roles you are currently mapped to by your administrator.
           </EuiText>
           <EuiSpacer />
           {roles.map((item) => (
-            <EuiText key={item}>
+            <EuiText key={item} size="s">
               {item}
               <br />
             </EuiText>
           ))}
           <EuiHorizontalRule />
-          <EuiTitle>
-            <h4>Backend roles ({backendRoles.length})</h4>
-          </EuiTitle>
-          <EuiText color="subdued">
+          <EuiText size="s">
+            <h2>Backend roles ({backendRoles.length})</h2>
+          </EuiText>
+          <EuiText color="subdued" size="s">
             Backend roles you are currently mapped to by your administrator.
           </EuiText>
           <EuiSpacer />
           {backendRoles.map((item) => (
-            <EuiText key={item}>
+            <EuiText key={item} size="s">
               {item}
               <br />
             </EuiText>
diff --git a/public/apps/account/tenant-switch-panel.tsx b/public/apps/account/tenant-switch-panel.tsx
index cff48b27e..103c7a845 100755
--- a/public/apps/account/tenant-switch-panel.tsx
+++ b/public/apps/account/tenant-switch-panel.tsx
@@ -26,7 +26,6 @@ import {
   EuiCompressedRadioGroup,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import { CoreStart } from 'opensearch-dashboards/public';
 import { keys } from 'lodash';
@@ -286,9 +285,9 @@ export function TenantSwitchPanel(props: TenantSwitchPanelProps) {
       <EuiModal data-test-subj="tenant-switch-modal" onClose={props.handleClose}>
         <EuiSpacer />
         <EuiModalBody>
-          <EuiTitle>
-            <h4>Select your tenant</h4>
-          </EuiTitle>
+          <EuiText size="s">
+            <h2>Select your tenant</h2>
+          </EuiText>
 
           <EuiSpacer />
 
diff --git a/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap
index 69b211b62..6fee461be 100644
--- a/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap
+++ b/public/apps/account/test/__snapshots__/role-info-panel.test.tsx.snap
@@ -8,53 +8,63 @@ exports[`Account menu - Role info panel renders 1`] = `
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Roles (
           2
           )
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiText
         color="subdued"
+        size="s"
       >
         Roles you are currently mapped to by your administrator.
       </EuiText>
       <EuiSpacer />
       <EuiText
         key="role1"
+        size="s"
       >
         role1
         <br />
       </EuiText>
       <EuiText
         key="role2"
+        size="s"
       >
         role2
         <br />
       </EuiText>
       <EuiHorizontalRule />
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Backend roles (
           2
           )
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiText
         color="subdued"
+        size="s"
       >
         Backend roles you are currently mapped to by your administrator.
       </EuiText>
       <EuiSpacer />
       <EuiText
         key="backend_role1"
+        size="s"
       >
         backend_role1
         <br />
       </EuiText>
       <EuiText
         key="backend_role2"
+        size="s"
       >
         backend_role2
         <br />
diff --git a/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap b/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
index 0ee1048a2..38433d575 100644
--- a/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
+++ b/public/apps/account/test/__snapshots__/tenant-switch-panel.test.tsx.snap
@@ -8,11 +8,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -120,11 +122,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -235,11 +239,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -350,11 +356,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
@@ -465,11 +473,13 @@ exports[`Account menu -tenant switch panel confirm button and renders renders wh
   >
     <EuiSpacer />
     <EuiModalBody>
-      <EuiTitle>
-        <h4>
+      <EuiText
+        size="s"
+      >
+        <h2>
           Select your tenant
-        </h4>
-      </EuiTitle>
+        </h2>
+      </EuiText>
       <EuiSpacer />
       <EuiText
         color="subdued"
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
index 4de73094c..a150525c9 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -23,6 +23,7 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiTitle,
+  EuiText,
 } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import { cloneDeep, set, without } from 'lodash';
@@ -221,9 +222,9 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
           coreStart={props.coreStart}
           fallBackComponent={
             <EuiPageHeader>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>General settings</h1>
-              </EuiTitle>
+              </EuiText>
             </EuiPageHeader>
           }
           resourceType={ResourceType.auditLogging}
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index efaa13d15..1b05e42d7 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -61,7 +61,7 @@ function renderStatusPanel(onSwitchChange: () => void, auditLoggingEnabled: bool
       <EuiForm>
         <EuiDescribedFormGroup title={<h3>Storage location</h3>} className="described-form-group">
           <EuiCompressedFormRow className="form-row">
-            <EuiText color="subdued" grow={false}>
+            <EuiText color="subdued" grow={false} size="s">
               <FormattedMessage
                 id="audit.logs.storageInstruction"
                 defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
@@ -264,9 +264,9 @@ export function AuditLogging(props: AuditLoggingProps) {
         navigation={props.depsStart.navigation}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
-              <h3>Audit logging</h3>
-            </EuiTitle>
+            <EuiText size="s">
+              <h1>Audit logging</h1>
+            </EuiText>
           </EuiPageHeader>
         }
         resourceType={ResourceType.auditLogging}
diff --git a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
index fa1575630..e22e59560 100644
--- a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
+++ b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -274,13 +274,13 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
-          <h3>
+          <h1>
             Audit logging
-          </h3>
-        </EuiTitle>
+          </h1>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}
@@ -309,6 +309,7 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
           <EuiText
             color="subdued"
             grow={false}
+            size="s"
           >
             <FormattedMessage
               defaultMessage="Configure the output location and storage types in {opensearchCode}. The default storage location is {internalOpenSearchCode}, which stores the logs in an index on this cluster."
@@ -705,13 +706,13 @@ exports[`Audit logs should load access error component 1`] = `
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
-          <h3>
+          <h1>
             Audit logging
-          </h3>
-        </EuiTitle>
+          </h1>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index 6c19a9814..2b39851aa 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -14,7 +14,7 @@
  */
 
 import React, { useContext } from 'react';
-import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { EuiLoadingContent, EuiPageHeader, EuiSpacer, EuiText } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { AuthenticationSequencePanel } from './authentication-sequence-panel';
 import { AuthorizationPanel } from './authorization-panel';
@@ -87,9 +87,9 @@ export function AuthView(props: AppDependencies) {
           navigation={props.depsStart.navigation}
           coreStart={props.coreStart}
           fallBackComponent={
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Authentication and authorization</h1>
-            </EuiTitle>
+            </EuiText>
           }
         />
         {accessErrorFlag ? (
@@ -118,9 +118,9 @@ export function AuthView(props: AppDependencies) {
         appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Authentication and authorization</h1>
-            </EuiTitle>
+            </EuiText>
             {!loading && !errorFlag && props.config.ui.backend_configurable && (
               <ExternalLinkButton
                 href={DocLinks.BackendConfigurationDoc}
diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
index 6ede754fb..b7678aef7 100644
--- a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
+++ b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -28,13 +28,13 @@ exports[`Auth view should load access error component 1`] = `
       }
     }
     fallBackComponent={
-      <EuiTitle
-        size="l"
+      <EuiText
+        size="s"
       >
         <h1>
           Authentication and authorization
         </h1>
-      </EuiTitle>
+      </EuiText>
     }
     navigation={Object {}}
   />
diff --git a/public/apps/configuration/panels/expression-modal.tsx b/public/apps/configuration/panels/expression-modal.tsx
index 1f501612a..8d47cb7fe 100644
--- a/public/apps/configuration/panels/expression-modal.tsx
+++ b/public/apps/configuration/panels/expression-modal.tsx
@@ -22,6 +22,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiOverlayMask,
+  EuiText,
 } from '@elastic/eui';
 
 export function ExpressionModal(props: { title: string; expression: object }) {
@@ -38,7 +39,11 @@ export function ExpressionModal(props: { title: string; expression: object }) {
       <EuiOverlayMask>
         <EuiModal data-test-subj="expression-modal" onClose={closeModal}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>{props.title}</EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>
+              <EuiText size="s">
+                <h2>{props.title}</h2>
+              </EuiText>
+            </EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index d1a1fa722..47a7b3a30 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -98,7 +98,6 @@ const setOfSteps = [
           <EuiFlexItem grow={false}>
             <EuiSmallButton
               data-test-subj="explore-existing-roles"
-              fill
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.roles);
               }}
@@ -138,7 +137,6 @@ const setOfSteps = [
           <EuiFlexItem grow={false}>
             <EuiSmallButton
               data-test-subj="map-users-to-role"
-              fill
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.users);
               }}
@@ -200,9 +198,9 @@ export function GetStarted(props: AppDependencies) {
           appRightControls={buttonData}
           fallBackComponent={
             <EuiPageHeader>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Get started</h1>
-              </EuiTitle>
+              </EuiText>
               <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
             </EuiPageHeader>
           }
@@ -240,7 +238,6 @@ export function GetStarted(props: AppDependencies) {
             </p>
             <EuiSmallButton
               data-test-subj="review-audit-log-configuration"
-              fill
               onClick={() => {
                 window.location.href = buildHashUrl(ResourceType.auditLogging);
               }}
@@ -263,7 +260,6 @@ export function GetStarted(props: AppDependencies) {
             </p>
             <EuiSmallButton
               iconType="refresh"
-              fill
               data-test-subj="purge-cache"
               onClick={async () => {
                 try {
@@ -309,7 +305,6 @@ export function GetStarted(props: AppDependencies) {
               <EuiFlexGroup gutterSize="s">
                 <EuiFlexItem grow={false}>
                   <EuiSmallButton
-                    fill
                     onClick={() => {
                       window.location.href = buildHashUrl(ResourceType.tenants);
                     }}
diff --git a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
index 6546978c3..6b5c7aa99 100644
--- a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
+++ b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
@@ -22,7 +22,6 @@ import {
   EuiPageHeader,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import React, { useContext, useState } from 'react';
 import { BreadcrumbsPageDependencies } from '../../../types';
@@ -151,7 +150,7 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
   const descriptionData = [
     {
       renderComponent: (
-        <EuiText size="xs" color="subdued">
+        <EuiText size="s" color="subdued">
           The security plugin includes an internal user database. Use this database in place of, or
           in addition to, an external <br /> authentication system such as LDAP or Active Directory.{' '}
           <ExternalLink href={DocLinks.UsersAndRolesDoc} />
@@ -178,12 +177,12 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
             <EuiPageHeader>
               <EuiFlexGroup direction="column" gutterSize="xs">
                 <EuiFlexItem>
-                  <EuiTitle size="l">
+                  <EuiText size="s">
                     <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-                  </EuiTitle>
+                  </EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem>
-                  <EuiText size="xs" color="subdued">
+                  <EuiText size="s" color="subdued">
                     The security plugin includes an internal user database. Use this database in
                     place of, or in addition to, an external authentication system such as LDAP or
                     Active Directory. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
diff --git a/public/apps/configuration/panels/permission-list/edit-modal.tsx b/public/apps/configuration/panels/permission-list/edit-modal.tsx
index 1086dc982..d39f39fa1 100644
--- a/public/apps/configuration/panels/permission-list/edit-modal.tsx
+++ b/public/apps/configuration/panels/permission-list/edit-modal.tsx
@@ -24,6 +24,7 @@ import {
   EuiOverlayMask,
   EuiForm,
   EuiCompressedComboBox,
+  EuiText,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { ComboBoxOptions, Action } from '../../types';
@@ -61,7 +62,11 @@ export function PermissionEditModal(props: PermissionEditModalDeps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.handleClose}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{TITLE_DICT[props.action]}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{TITLE_DICT[props.action]}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 7981abb24..dd2e16ca9 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -405,9 +405,9 @@ export function PermissionList(props: AppDependencies) {
         appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Permissions</h1>
-            </EuiTitle>
+            </EuiText>
           </EuiPageHeader>
         }
         resourceType={ResourceType.permissions}
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 2dc58bac1..32dbd03a8 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -157,13 +157,13 @@ exports[`Permission list page  AccessError component should load access error co
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
           <h1>
             Permissions
           </h1>
-        </EuiTitle>
+        </EuiText>
       </EuiPageHeader>
     }
     resourceType="permissions"
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index 6006600fc..ef4a104fa 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -22,7 +22,6 @@ import {
   EuiPageHeader,
   EuiSpacer,
   EuiText,
-  EuiTitle,
 } from '@elastic/eui';
 import React, { useState, useContext } from 'react';
 import { isEmpty } from 'lodash';
@@ -237,7 +236,7 @@ export function RoleEdit(props: RoleEditDeps) {
   const descriptionData = [
     {
       renderComponent: (
-        <EuiText size="xs" color="subdued">
+        <EuiText size="s" color="subdued">
           Roles are the core way of controlling access to your cluster. Roles contain any
           combination of cluster-wide permission, index-
           <br />
@@ -262,15 +261,17 @@ export function RoleEdit(props: RoleEditDeps) {
           <>
             {' '}
             <EuiPageHeader>
-              <EuiText size="xs" color="subdued" className="panel-header-subtext">
-                <EuiTitle size="m">
+              <EuiText className="panel-header-subtext">
+                <EuiText size="s">
                   <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-                </EuiTitle>
-                Roles are the core way of controlling access to your cluster. Roles contain any
-                combination of cluster-wide permission, index-specific permissions, document- and
-                field-level security, and tenants. Once you&apos;ve created the role, you can map
-                users to the roles so that users gain those permissions.{' '}
-                <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                </EuiText>
+                <EuiText size="s" color="subdued">
+                  Roles are the core way of controlling access to your cluster. Roles contain any
+                  combination of cluster-wide permission, index-specific permissions, document- and
+                  field-level security, and tenants. Once you&apos;ve created the role, you can map
+                  users to the roles so that users gain those permissions.{' '}
+                  <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                </EuiText>
               </EuiText>
             </EuiPageHeader>
           </>
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index af640bf1f..a3f280d92 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -308,9 +308,9 @@ export function RoleList(props: AppDependencies) {
         appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Roles</h1>
-            </EuiTitle>
+            </EuiText>
           </EuiPageHeader>
         }
         resourceType={ResourceType.roles}
diff --git a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
index 956f9ebe4..61746bfdf 100644
--- a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
+++ b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
@@ -20,7 +20,6 @@ import {
   EuiPageHeader,
   EuiSpacer,
   EuiText,
-  EuiTitle,
   EuiGlobalToastList,
 } from '@elastic/eui';
 import React, { useState, useContext } from 'react';
@@ -59,7 +58,7 @@ const TITLE_TEXT_DICT = {
 const descriptionData = [
   {
     renderComponent: (
-      <EuiText size="xs" color="subdued">
+      <EuiText size="s" color="subdued">
         Map users to this role to inherit role permissions. Two types of users are supported: user,
         and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
       </EuiText>
@@ -167,12 +166,15 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
         coreStart={props.coreStart}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiText size="xs" color="subdued">
-              <EuiTitle size="m">
+            <EuiText color="subdued">
+              <EuiText size="s">
                 <h1>Map user</h1>
-              </EuiTitle>
-              Map users to this role to inherit role permissions. Two types of users are supported:
-              user, and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+              </EuiText>
+              <EuiText size="s">
+                Map users to this role to inherit role permissions. Two types of users are
+                supported: user, and backend role.{' '}
+                <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+              </EuiText>
             </EuiText>
           </EuiPageHeader>
         }
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 1c04351c2..1072b0ec9 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -460,9 +460,9 @@ export function RoleView(props: RoleViewProps) {
           <>
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
-                <EuiTitle size="l">
+                <EuiText size="s">
                   <h1>{props.roleName}</h1>
-                </EuiTitle>
+                </EuiText>
               </EuiPageContentHeaderSection>
 
               <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
@@ -479,6 +479,7 @@ export function RoleView(props: RoleViewProps) {
             ? tabs[MAP_USER_TAB_INDEX]
             : tabs[PERMISSIONS_TAB_INDEX]
         }
+        size="s"
       />
 
       <EuiSpacer />
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index 2f557ebd8..37b927fa0 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -99,13 +99,13 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
       <React.Fragment>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>
-            <EuiTitle
-              size="l"
+            <EuiText
+              size="s"
             >
               <h1>
                 role
               </h1>
-            </EuiTitle>
+            </EuiText>
           </EuiPageContentHeaderSection>
           <EuiPageContentHeaderSection>
             <EuiFlexGroup
@@ -212,6 +212,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
         "name": "Permissions",
       }
     }
+    size="s"
     tabs={
       Array [
         Object {
@@ -532,13 +533,13 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
       <React.Fragment>
         <EuiPageContentHeader>
           <EuiPageContentHeaderSection>
-            <EuiTitle
-              size="l"
+            <EuiText
+              size="s"
             >
               <h1>
                 role
               </h1>
-            </EuiTitle>
+            </EuiText>
           </EuiPageContentHeaderSection>
           <EuiPageContentHeaderSection>
             <EuiFlexGroup
@@ -715,6 +716,7 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
         "name": "Mapped users",
       }
     }
+    size="s"
     tabs={
       Array [
         Object {
diff --git a/public/apps/configuration/panels/tenant-list/edit-modal.tsx b/public/apps/configuration/panels/tenant-list/edit-modal.tsx
index eb7a244a2..8605e372d 100644
--- a/public/apps/configuration/panels/tenant-list/edit-modal.tsx
+++ b/public/apps/configuration/panels/tenant-list/edit-modal.tsx
@@ -25,6 +25,7 @@ import {
   EuiForm,
   EuiCompressedTextArea,
   EuiHorizontalRule,
+  EuiText,
 } from '@elastic/eui';
 import React, { useState } from 'react';
 import { Action } from '../../types';
@@ -59,7 +60,11 @@ export function TenantEditModal(props: TenantEditModalDeps) {
     <EuiOverlayMask>
       <EuiModal onClose={props.handleClose}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>{TITLE_DICT[props.action]}</EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>
+            <EuiText size="s">
+              <h2>{TITLE_DICT[props.action]}</h2>
+            </EuiText>
+          </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/public/apps/configuration/panels/tenant-list/save_changes_modal.tsx b/public/apps/configuration/panels/tenant-list/save_changes_modal.tsx
index 8395f4dfb..7ce35bb38 100644
--- a/public/apps/configuration/panels/tenant-list/save_changes_modal.tsx
+++ b/public/apps/configuration/panels/tenant-list/save_changes_modal.tsx
@@ -18,6 +18,7 @@ import {
   EuiHorizontalRule,
   EuiCompressedCheckbox,
   EuiConfirmModal,
+  EuiText,
 } from '@elastic/eui';
 import React from 'react';
 import { ExternalLink } from '../../utils/display-utils';
@@ -55,12 +56,14 @@ export function SaveChangesModalGenerator(props: SaveChangesModalDeps) {
         confirmButtonText="Change Default Tenant"
         defaultFocusedButton="confirm"
       >
-        <p>
-          Users will load into {props.updatedTenancyConfig.default_tenant} tenant when they log into
-          Dashboards if they have the appropriate permissions. If users don’t have permissions to a
-          custom tenant they will load into the global tenant.{' '}
-          <ExternalLink href={DocLinks.MultiTenancyDoc} />
-        </p>
+        <EuiText size="s">
+          <p>
+            Users will load into {props.updatedTenancyConfig.default_tenant} tenant when they log
+            into Dashboards if they have the appropriate permissions. If users don’t have
+            permissions to a custom tenant they will load into the global tenant.{' '}
+            <ExternalLink href={DocLinks.MultiTenancyDoc} />
+          </p>
+        </EuiText>
       </EuiConfirmModal>
     );
     return globalDefaultModal;
@@ -168,11 +171,13 @@ export function SaveChangesModalGenerator(props: SaveChangesModalDeps) {
         )
       }
     >
-      <p>
-        The changes you are about to make can break large portions of OpenSearch Dashboards. You
-        might be able to revert some of these changes.{' '}
-        <ExternalLink href={DocLinks.MultiTenancyDoc} />
-      </p>
+      <EuiText size="s">
+        <p>
+          The changes you are about to make can break large portions of OpenSearch Dashboards. You
+          might be able to revert some of these changes.{' '}
+          <ExternalLink href={DocLinks.MultiTenancyDoc} />
+        </p>
+      </EuiText>
 
       <EuiHorizontalRule />
 
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index aa5ee9e40..f12aa69f2 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -13,15 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import {
-  EuiPageHeader,
-  EuiText,
-  EuiTitle,
-  EuiTabs,
-  EuiTab,
-  EuiCallOut,
-  EuiSmallButton,
-} from '@elastic/eui';
+import { EuiPageHeader, EuiText, EuiTabs, EuiTab, EuiCallOut, EuiSmallButton } from '@elastic/eui';
 import { Route } from 'react-router-dom';
 import React, { useState, useMemo } from 'react';
 import { ManageTab } from './manage_tab';
@@ -159,9 +151,9 @@ export function TenantList(props: TenantListProps) {
         fallBackComponent={
           <>
             <EuiPageHeader>
-              <EuiTitle size="l">
+              <EuiText size="s">
                 <h1>Dashboards multi-tenancy</h1>
-              </EuiTitle>
+              </EuiText>
             </EuiPageHeader>
             <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
               Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
@@ -175,7 +167,7 @@ export function TenantList(props: TenantListProps) {
         resourceType={ResourceType.tenants}
       />
 
-      <EuiTabs>{renderTabs()}</EuiTabs>
+      <EuiTabs size="s">{renderTabs()}</EuiTabs>
       {!isMultiTenancyEnabled && selectedTabId === 'Manage' && tenancyDisabledWarning}
       {selectedTabContent}
     </>
diff --git a/public/apps/configuration/panels/test/__snapshots__/expression-modal.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/expression-modal.test.tsx.snap
index c7bf22c8e..1da4fd901 100644
--- a/public/apps/configuration/panels/test/__snapshots__/expression-modal.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/expression-modal.test.tsx.snap
@@ -15,7 +15,13 @@ exports[`Expression modal renders when isModalVisible = True 1`] = `
     >
       <EuiModalHeader>
         <EuiModalHeaderTitle>
-          Title
+          <EuiText
+            size="s"
+          >
+            <h2>
+              Title
+            </h2>
+          </EuiText>
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index 33a5d8009..001b3b6c9 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -52,13 +52,13 @@ exports[`Get started (landing page) renders when backend configuration is disabl
       }
       fallBackComponent={
         <EuiPageHeader>
-          <EuiTitle
-            size="l"
+          <EuiText
+            size="s"
           >
             <h1>
               Get started
             </h1>
-          </EuiTitle>
+          </EuiText>
           <ExternalLinkButton
             href="#/"
             text="Open in new window"
@@ -110,7 +110,6 @@ exports[`Get started (landing page) renders when backend configuration is disabl
                   >
                     <EuiSmallButton
                       data-test-subj="explore-existing-roles"
-                      fill={true}
                       onClick={[Function]}
                     >
                       Explore existing roles
@@ -156,7 +155,6 @@ exports[`Get started (landing page) renders when backend configuration is disabl
                   >
                     <EuiSmallButton
                       data-test-subj="map-users-to-role"
-                      fill={true}
                       onClick={[Function]}
                     >
                       Map users to a role
@@ -210,7 +208,6 @@ exports[`Get started (landing page) renders when backend configuration is disabl
         </p>
         <EuiSmallButton
           data-test-subj="review-audit-log-configuration"
-          fill={true}
           onClick={[Function]}
         >
           Review Audit Log Configuration
@@ -239,7 +236,6 @@ exports[`Get started (landing page) renders when backend configuration is disabl
         </p>
         <EuiSmallButton
           data-test-subj="purge-cache"
-          fill={true}
           iconType="refresh"
           onClick={[Function]}
         >
@@ -274,7 +270,6 @@ exports[`Get started (landing page) renders when backend configuration is disabl
             grow={false}
           >
             <EuiSmallButton
-              fill={true}
               onClick={[Function]}
             >
               Manage Multi-tenancy
@@ -354,13 +349,13 @@ exports[`Get started (landing page) renders when backend configuration is enable
       }
       fallBackComponent={
         <EuiPageHeader>
-          <EuiTitle
-            size="l"
+          <EuiText
+            size="s"
           >
             <h1>
               Get started
             </h1>
-          </EuiTitle>
+          </EuiText>
           <ExternalLinkButton
             href="#/"
             text="Open in new window"
@@ -479,7 +474,6 @@ exports[`Get started (landing page) renders when backend configuration is enable
                   >
                     <EuiSmallButton
                       data-test-subj="explore-existing-roles"
-                      fill={true}
                       onClick={[Function]}
                     >
                       Explore existing roles
@@ -525,7 +519,6 @@ exports[`Get started (landing page) renders when backend configuration is enable
                   >
                     <EuiSmallButton
                       data-test-subj="map-users-to-role"
-                      fill={true}
                       onClick={[Function]}
                     >
                       Map users to a role
@@ -579,7 +572,6 @@ exports[`Get started (landing page) renders when backend configuration is enable
         </p>
         <EuiSmallButton
           data-test-subj="review-audit-log-configuration"
-          fill={true}
           onClick={[Function]}
         >
           Review Audit Log Configuration
@@ -608,7 +600,6 @@ exports[`Get started (landing page) renders when backend configuration is enable
         </p>
         <EuiSmallButton
           data-test-subj="purge-cache"
-          fill={true}
           iconType="refresh"
           onClick={[Function]}
         >
@@ -643,7 +634,6 @@ exports[`Get started (landing page) renders when backend configuration is enable
             grow={false}
           >
             <EuiSmallButton
-              fill={true}
               onClick={[Function]}
             >
               Manage Multi-tenancy
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index cdc9a6f17..bbab64088 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -96,13 +96,13 @@ exports[`Role list AccessError component should load access error component 1`]
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
           <h1>
             Roles
           </h1>
-        </EuiTitle>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index 105e6dd38..8b3e0feb4 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -111,13 +111,13 @@ exports[`User list AccessError component should load access error component 1`]
     }
     fallBackComponent={
       <EuiPageHeader>
-        <EuiTitle
-          size="l"
+        <EuiText
+          size="s"
         >
           <h1>
             Internal users
           </h1>
-        </EuiTitle>
+        </EuiText>
       </EuiPageHeader>
     }
     navigation={Object {}}
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 545f9071b..ffeba204a 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -250,9 +250,9 @@ export function UserList(props: AppDependencies) {
         appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>Internal users</h1>
-            </EuiTitle>
+            </EuiText>
           </EuiPageHeader>
         }
         resourceType={ResourceType.users}
diff --git a/public/apps/configuration/utils/context-menu.tsx b/public/apps/configuration/utils/context-menu.tsx
index aea6ae5a8..328eff0c8 100644
--- a/public/apps/configuration/utils/context-menu.tsx
+++ b/public/apps/configuration/utils/context-menu.tsx
@@ -60,9 +60,9 @@ export function useContextMenuState(
       button={button}
       isOpen={isContextMenuOpen}
       closePopover={closeContextMenu}
-      panelPaddingSize="s"
+      panelPaddingSize="none"
     >
-      <EuiContextMenuPanel items={items} hasFocus={false} />
+      <EuiContextMenuPanel items={items} hasFocus={false} size="s" />
     </EuiPopover>
   );
 
diff --git a/public/apps/configuration/utils/delete-confirm-modal-utils.tsx b/public/apps/configuration/utils/delete-confirm-modal-utils.tsx
index ec0c5ee0d..fffd202ca 100644
--- a/public/apps/configuration/utils/delete-confirm-modal-utils.tsx
+++ b/public/apps/configuration/utils/delete-confirm-modal-utils.tsx
@@ -14,7 +14,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiOverlayMask, EuiConfirmModal } from '@elastic/eui';
+import { EuiOverlayMask, EuiConfirmModal, EuiText } from '@elastic/eui';
 
 /**
  *
@@ -51,7 +51,9 @@ export function useDeleteConfirmState(
           {customConfirmationText ? (
             customConfirmationText
           ) : (
-            <p>Do you really want to delete selected {entity}?</p>
+            <EuiText size="s">
+              <p>Do you really want to delete selected {entity}?</p>
+            </EuiText>
           )}
         </EuiConfirmModal>
       </EuiOverlayMask>
diff --git a/test/cypress/e2e/oidc/oidc_auth_test.spec.js b/test/cypress/e2e/oidc/oidc_auth_test.spec.js
index 2228d2fbf..79a41807d 100644
--- a/test/cypress/e2e/oidc/oidc_auth_test.spec.js
+++ b/test/cypress/e2e/oidc/oidc_auth_test.spec.js
@@ -88,7 +88,7 @@ describe('Log in via OIDC', () => {
     localStorage.setItem('opendistro::security::tenant::saved', '""');
     localStorage.setItem('home:newThemeModal:show', 'false');
 
-    cy.get('h1.euiTitle--large').contains('Get started');
+    cy.get('h1').contains('Get started');
   });
 
   it('Tenancy persisted after logout in OIDC', () => {
diff --git a/test/cypress/e2e/saml/saml_auth_test.spec.js b/test/cypress/e2e/saml/saml_auth_test.spec.js
index 34f58da2b..fc6c6934c 100644
--- a/test/cypress/e2e/saml/saml_auth_test.spec.js
+++ b/test/cypress/e2e/saml/saml_auth_test.spec.js
@@ -90,7 +90,7 @@ describe('Log in via SAML', () => {
 
     samlLogin();
 
-    cy.get('h1.euiTitle--large').contains('Get started');
+    cy.get('h1').contains('Get started');
     cy.getCookie('security_authentication').should('exist');
   });