diff --git a/public/components/CustomLabel/CustomLabel.tsx b/public/components/CustomLabel/CustomLabel.tsx
index 61f52bd24..64bd235b3 100644
--- a/public/components/CustomLabel/CustomLabel.tsx
+++ b/public/components/CustomLabel/CustomLabel.tsx
@@ -7,28 +7,30 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui";
 import React from "react";
 
 interface CustomLabelProps {
-  title: string;
+  title: string | JSX.Element;
   isOptional?: boolean;
   helpText?: string | JSX.Element;
 }
 
 const CustomLabel = ({ title, isOptional = false, helpText }: CustomLabelProps) => (
   <>
-    <EuiFlexGroup gutterSize="xs">
-      <EuiFlexItem grow={false}>
-        <EuiText size="xs">
-          <h4>{title}</h4>
-        </EuiText>
-      </EuiFlexItem>
-
-      {isOptional ? (
-        <EuiFlexItem>
-          <EuiText size="xs" color="subdued">
-            <i> – optional</i>
-          </EuiText>
+    {title && typeof title == "string" ? (
+      <EuiFlexGroup gutterSize="xs" alignItems="center">
+        <EuiFlexItem grow={false}>
+          <EuiText size="s">{<h3>{title}</h3>}</EuiText>
         </EuiFlexItem>
-      ) : null}
-    </EuiFlexGroup>
+
+        {isOptional ? (
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              x<i> – optional</i>
+            </EuiText>
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
+    ) : (
+      title
+    )}
 
     {helpText && typeof helpText === "string" ? <span style={{ fontWeight: 200, fontSize: "12px" }}>{helpText}</span> : helpText}
 
diff --git a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
index a67bf9683..eebd7696b 100644
--- a/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
+++ b/public/pages/CreateSnapshotPolicy/components/SnapshotAdvancedSettings/SnapshotAdvancedSettings.tsx
@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiCompressedCheckbox, EuiSpacer } from "@elastic/eui";
+import { EuiCompressedCheckbox, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import React, { ChangeEvent } from "react";
+import { CheckBoxLabel } from "../../../Snapshots/helper";
 
 interface SnapshotAdvancedSettingsProps {
   includeGlobalState: boolean;
@@ -17,6 +18,18 @@ interface SnapshotAdvancedSettingsProps {
   width?: string;
 }
 
+const lableTitle = (titleText: string) => {
+  return (
+    <EuiFlexGroup gutterSize="xs" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiText size="s">
+          <h4>{titleText}</h4>
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
 const SnapshotAdvancedSettings = ({
   includeGlobalState,
   onIncludeGlobalStateToggle,
@@ -26,10 +39,10 @@ const SnapshotAdvancedSettings = ({
   onPartialToggle,
   width,
 }: SnapshotAdvancedSettingsProps) => (
-  <div style={{ padding: "10px 10px", width: width }}>
+  <div>
     <EuiCompressedCheckbox
       id="include_global_state"
-      label={<CustomLabel title="Include cluster state in snapshots" />}
+      label={<CheckBoxLabel title="Include cluster state in snapshots" />}
       checked={includeGlobalState}
       onChange={onIncludeGlobalStateToggle}
     />
@@ -39,7 +52,7 @@ const SnapshotAdvancedSettings = ({
     <EuiCompressedCheckbox
       id="ignore_unavailable"
       label={
-        <CustomLabel
+        <CheckBoxLabel
           title="Ignore unavailable indices"
           helpText="Instead of failing snapshot, ignore any indexes that are unavailable or do not exist."
         />
@@ -52,7 +65,7 @@ const SnapshotAdvancedSettings = ({
 
     <EuiCompressedCheckbox
       id="partial"
-      label={<CustomLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
+      label={<CheckBoxLabel title="Allow partial snapshots" helpText="Allow partial snapshots if one or more shards failed to store." />}
       checked={partial}
       onChange={onPartialToggle}
     />
diff --git a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
index 7b4a9e6cb..6c2bed828 100644
--- a/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
+++ b/public/pages/CreateSnapshotPolicy/containers/CreateSnapshotPolicy/CreateSnapshotPolicy.tsx
@@ -57,6 +57,7 @@ import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 import { ExternalLink } from "../../../utils/display-utils";
+import { TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public";
 
 interface CreateSMPolicyProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -559,13 +560,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
     const descriptionData = [
       {
-        renderComponent: (
-          <EuiText size="s" color="subdued">
-            Snapshot policies allow you to define an automated snapshot schedule and retention period.{" "}
-            <ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
-          </EuiText>
-        ),
-      },
+        description: "Snapshot policies allow you to define an automated snapshot schedule and retention period.",
+        links: {
+          label: "Learn more",
+          href: SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL,
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+          target: "_blank",
+          flush: "both",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
     ];
     const padding_style = this.state.useNewUX ? { padding: "0px 0px" } : { padding: "5px 50px" };
     return (
@@ -574,15 +579,21 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
           <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
         ) : (
           <>
-            <EuiTitle size="l">
+            <EuiText size="s">
               <h1>{isEdit ? "Edit" : "Create"} policy</h1>
-            </EuiTitle>
+            </EuiText>
             {subTitleText}
             <EuiSpacer />
           </>
         )}
 
-        <ContentPanel title="Policy settings" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Policy settings</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <CustomLabel title="Policy name" />
           <EuiCompressedFormRow isInvalid={!!policyIdError} error={policyIdError}>
             <EuiCompressedFieldText
@@ -605,11 +616,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               data-test-subj="description"
             />
           </EuiCompressedFormRow>
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Source and destination" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Source and destination</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <SnapshotIndicesRepoInput
             indexOptions={indexOptions}
             selectedIndexOptions={selectedIndexOptions}
@@ -630,11 +647,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
             snapshotManagementService={this.props.snapshotManagementService}
             repoError={repoError}
           />
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Snapshot schedule" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Snapshot schedule</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <CronSchedule
             frequencyTitle="Snapshot frequency"
             frequencyType={creationScheduleFrequencyType}
@@ -657,11 +680,17 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               this.setState({ policy: this.setPolicyHelper("creation.schedule.cron.expression", expression) });
             }}
           />
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Retention period" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Retention period</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiCompressedRadioGroup
             options={rententionEnableRadios}
             idSelected={deleteConditionEnabled ? "retention_enabled" : "retention_disabled"}
@@ -759,62 +788,71 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               </EuiAccordion>
             </>
           ) : null}
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Notifications" titleSize="s">
-          <div style={{ padding: "10px 10px" }}>
-            <EuiText>Notify on snapshot activities</EuiText>
-
-            <EuiSpacer size="s" />
-            <EuiCompressedCheckbox
-              id="notification-creation"
-              label="When a snapshot has been created."
-              checked={getNotifyCreation(policy)}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
-              }}
-            />
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Notifications</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
+          <EuiText size="s">
+            <h3>Notify on snapshot activities</h3>
+          </EuiText>
 
-            <EuiSpacer size="s" />
+          <EuiSpacer size="s" />
+          <EuiCompressedCheckbox
+            id="notification-creation"
+            label="When a snapshot has been created."
+            checked={getNotifyCreation(policy)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              this.setState({ policy: this.setPolicyHelper("notification.conditions.creation", e.target.checked) });
+            }}
+          />
 
-            <EuiCompressedCheckbox
-              id="notification-deletion"
-              label="When a snapshots has been deleted."
-              checked={getNotifyDeletion(policy)}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
-              }}
-            />
+          <EuiSpacer size="s" />
 
-            <EuiSpacer size="s" />
+          <EuiCompressedCheckbox
+            id="notification-deletion"
+            label="When a snapshots has been deleted."
+            checked={getNotifyDeletion(policy)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              this.setState({ policy: this.setPolicyHelper("notification.conditions.deletion", e.target.checked) });
+            }}
+          />
 
-            <EuiCompressedCheckbox
-              id="notification-failure"
-              label="When a snapshot has failed."
-              checked={getNotifyFailure(policy)}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
-              }}
-            />
-          </div>
+          <EuiSpacer size="s" />
+
+          <EuiCompressedCheckbox
+            id="notification-failure"
+            label="When a snapshot has failed."
+            checked={getNotifyFailure(policy)}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              this.setState({ policy: this.setPolicyHelper("notification.conditions.failure", e.target.checked) });
+            }}
+          />
           {showNotificationChannel ? (
-            <Notification
-              channelId={_.get(policy, "notification.channel.id") || ""}
-              channels={channels}
-              loadingChannels={loadingChannels}
-              onChangeChannelId={this.onChangeChannelId}
-              getChannels={this.getChannels}
-            />
+            <>
+              <EuiSpacer size="s" />
+              <Notification
+                channelId={_.get(policy, "notification.channel.id") || ""}
+                channels={channels}
+                loadingChannels={loadingChannels}
+                onChangeChannelId={this.onChangeChannelId}
+                getChannels={this.getChannels}
+              />
+            </>
           ) : null}
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
         {/* Advanced settings */}
-        <EuiPanel style={{ paddingLeft: "0px", paddingRight: "0px" }}>
-          <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="flexStart" alignItems="center" gutterSize="none">
+        <EuiPanel>
+          <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="none">
             <EuiFlexItem grow={false}>
               <EuiSmallButtonIcon
                 iconType={advancedSettingsOpen ? "arrowDown" : "arrowRight"}
@@ -826,11 +864,11 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
               />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiTitle size="s">
-                <h1>
+              <EuiText size="s">
+                <h2>
                   Advanced settings <i>– optional</i>
-                </h1>
-              </EuiTitle>
+                </h2>
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
 
@@ -890,7 +928,7 @@ export class CreateSnapshotPolicy extends MDSEnabledComponent<CreateSMPolicyProp
 
         <EuiSpacer />
 
-        <EuiFlexGroup justifyContent="flexEnd">
+        <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
           <EuiFlexItem grow={false}>
             <EuiSmallButtonEmpty onClick={this.onClickCancel}>Cancel</EuiSmallButtonEmpty>
           </EuiFlexItem>
diff --git a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
index 5ff8cf96a..65b709610 100644
--- a/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
+++ b/public/pages/Reindex/components/CreateIndexFlyout/__snapshots__/CreateIndexFlyout.test.tsx.snap
@@ -821,7 +821,7 @@ Object {
             class="euiFlyoutFooter"
           >
             <div
-              class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+              class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
             >
               <div
                 class="euiFlexItem euiFlexItem--flexGrowZero"
diff --git a/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx b/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
index 1da2857f7..4c5f3a77c 100644
--- a/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
+++ b/public/pages/Repositories/components/CreateRepositoryFlyout/CreateRepositoryFlyout.tsx
@@ -202,7 +202,14 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
 
           <EuiSpacer size="l" />
 
-          <EuiAccordion id="repo_advanced_settings" buttonContent="Advanced settings">
+          <EuiAccordion
+            id="repo_advanced_settings"
+            buttonContent={
+              <EuiText size="s">
+                <h3>Advanced settings</h3>
+              </EuiText>
+            }
+          >
             <EuiSpacer size="s" />
 
             <EuiText color="subdued" size="xs" style={{ padding: "5px 0px" }}>
@@ -274,9 +281,11 @@ export class CreateRepositoryFlyout extends MDSEnabledComponent<CreateRepository
     return (
       <EuiFlyout ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" hideCloseButton>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
-            <h2 id="flyoutTitle">{!!editRepo ? "Edit" : "Create"} repository</h2>
-          </EuiTitle>
+          <EuiText size="s">
+            <EuiTitle size="m">
+              <h2 id="flyoutTitle">{!!editRepo ? "Edit" : "Create"} repository</h2>
+            </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody>
diff --git a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
index c848665da..2a4ca9a69 100644
--- a/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
+++ b/public/pages/Repositories/components/DeleteModal/DeleteModal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { ChangeEvent, Component } from "react";
-import { EuiConfirmModal, EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiOverlayMask, EuiSpacer } from "@elastic/eui";
+import { EuiConfirmModal, EuiCompressedFieldText, EuiForm, EuiCompressedFormRow, EuiOverlayMask, EuiSpacer, EuiText } from "@elastic/eui";
 
 interface DeleteModalProps {
   closeDeleteModal: (event?: any) => void;
@@ -41,7 +41,11 @@ export default class DeleteModal extends Component<DeleteModalProps, DeleteModal
     return (
       <EuiOverlayMask>
         <EuiConfirmModal
-          title={`Delete ${type}`}
+          title={
+            <EuiText size="s">
+              <h2>Delete {type}</h2>
+            </EuiText>
+          }
           onCancel={closeDeleteModal}
           onConfirm={() => {
             onClickDelete();
diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx
index c7142b4b4..9927d5775 100644
--- a/public/pages/Repositories/containers/Repositories/Repositories.tsx
+++ b/public/pages/Repositories/containers/Repositories/Repositories.tsx
@@ -12,6 +12,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiButtonIcon,
+  EuiPanel,
 } from "@elastic/eui";
 import { getErrorMessage } from "../../../../utils/helpers";
 import React, { Component, useContext } from "react";
@@ -29,6 +30,7 @@ import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../ser
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlDescriptionData } from "src/plugins/navigation/public";
 
 interface RepositoriesProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -289,7 +291,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       toolsLeft: useNewUX ? renderToolsLeft() : undefined,
       box: {
         placeholder: "Search repository",
-        compressed: useNewUX ? true : false,
+        compressed: true,
         increamental: true,
       },
       compressed: true,
@@ -319,12 +321,8 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
 
     const descriptionData = [
       {
-        renderComponent: (
-          <EuiText size="s" color="subdued">
-            Repositories are remote storage locations used to store snapshots.
-          </EuiText>
-        ),
-      },
+        description: "Repositories are remote storage locations used to store snapshots.",
+      } as TopNavControlDescriptionData,
     ];
 
     const controlControlsData = [
@@ -339,6 +337,36 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
       },
     ];
 
+    const repositoriesTable = () => {
+      return !useNewUX ? (
+        <ContentPanel title={useTitle} actions={useActions} subTitleText={useSubTitleText}>
+          <EuiInMemoryTable
+            items={repositories}
+            itemId="id"
+            columns={this.columns}
+            pagination={true}
+            isSelectable={true}
+            selection={{ onSelectionChange: (selectedItems) => this.setState({ selectedItems }) }}
+            search={search}
+            loading={loading}
+          />
+        </ContentPanel>
+      ) : (
+        <EuiPanel>
+          <EuiInMemoryTable
+            items={repositories}
+            itemId="id"
+            columns={this.columns}
+            pagination={true}
+            isSelectable={true}
+            selection={{ onSelectionChange: (selectedItems) => this.setState({ selectedItems }) }}
+            search={search}
+            loading={loading}
+          />
+        </EuiPanel>
+      );
+    };
+
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls, setAppDescriptionControls } = getApplication();
     const useTitle = useNewUX 
@@ -359,18 +387,7 @@ export class Repositories extends MDSEnabledComponent<RepositoriesProps, Reposit
             <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
           </>
         ) : null}
-        <ContentPanel title={useTitle} actions={useActions} subTitleText={useSubTitleText}>
-          <EuiInMemoryTable
-            items={repositories}
-            itemId="id"
-            columns={this.columns}
-            pagination={true}
-            isSelectable={true}
-            selection={{ onSelectionChange: (selectedItems) => this.setState({ selectedItems }) }}
-            search={search}
-            loading={loading}
-          />
-        </ContentPanel>
+        {repositoriesTable()}
 
         {showFlyout && (
           <CreateRepositoryFlyout
diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
index 02be57f04..fc0fcf57d 100644
--- a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
+++ b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
@@ -31,6 +31,8 @@ import {
   EuiFlexGroup,
   EuiButtonIcon,
   EuiCompressedFieldSearch,
+  EuiPanel,
+  EuiSpacer,
 } from "@elastic/eui";
 import { BREADCRUMBS, PLUGIN_NAME, ROUTES, SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL } from "../../../../utils/constants";
 import { getMessagePrompt, getSMPoliciesQueryParamsFromURL, renderTimestampMillis } from "../../helpers";
@@ -48,6 +50,7 @@ import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
 import { ExternalLink } from "../../../utils/display-utils";
+import { TopNavControlData, TopNavControlDescriptionData, TopNavControlLinkData } from "src/plugins/navigation/public";
 
 interface SnapshotPoliciesProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -520,13 +523,17 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
 
     const descriptionData = [
       {
-        renderComponent: (
-          <EuiText size="s" color="subdued">
-            Define an automated snapshot schedule and retention period with a snapshot policy.{" "}
-            <ExternalLink href={SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL} />
-          </EuiText>
-        ),
-      },
+        description: "Define an automated snapshot schedule and retention period with a snapshot policy.",
+        links: {
+          label: "Learn more",
+          href: SNAPSHOT_MANAGEMENT_DOCUMENTATION_URL,
+          iconType: "popout",
+          iconSide: "right",
+          controlType: "link",
+          target: "_blank",
+          flush: "both",
+        } as TopNavControlLinkData,
+      } as TopNavControlDescriptionData,
     ];
 
     const controlControlsData = [
@@ -538,11 +545,9 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
         href: `${PLUGIN_NAME}#${ROUTES.CREATE_SNAPSHOT_POLICY}`,
         testId: "createButton",
         controlType: "button",
-      },
+      } as TopNavControlData,
     ];
 
-    const searchbar_padding = { padding: "0px 0px 16px 0px" };
-
     const CommonTable = () => {
       return (
         <EuiBasicTable
@@ -578,13 +583,7 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
           actions={actions} 
           subTitleText={subTitleText}
         >
-          <EuiSearchBar
-            box={{
-              placeholder: "Search snapshot policies",
-              incremental: false,
-            }}
-            onChange={this.onSearchChange}
-          />
+          <EuiCompressedFieldSearch placeholder="Search snapshot policies" incremental={false} fullWidth onChange={this.onSearchChange} />
           {CommonTable()}
         </ContentPanel>
         {CommonModal()}
@@ -593,8 +592,8 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
       <>
         <HeaderControl setMountPoint={setAppRightControls} controls={controlControlsData} />
         <HeaderControl setMountPoint={setAppDescriptionControls} controls={descriptionData} />
-        <ContentPanel>
-          <EuiFlexGroup gutterSize="s" alignItems="center" style={searchbar_padding}>
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="s" alignItems="center">
             <EuiFlexItem grow={true}>
               <EuiCompressedFieldSearch
                 autoFocus
@@ -621,8 +620,9 @@ export class SnapshotPolicies extends MDSEnabledComponent<SnapshotPoliciesProps,
               </EuiPopover>
             </EuiFlexItem>
           </EuiFlexGroup>
+          <EuiSpacer size="m" />
           {CommonTable()}
-        </ContentPanel>
+        </EuiPanel>
         {CommonModal()}
       </>
     );
diff --git a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
index d5031c7d0..eedef193d 100644
--- a/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
+++ b/public/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
@@ -21,6 +21,8 @@ import {
   EuiText,
   EuiTitle,
   EuiHealth,
+  EuiHorizontalRule,
+  EuiPanel,
 } from "@elastic/eui";
 import { NotificationService, SnapshotManagementService } from "../../../../services";
 import { SMMetadata, SMPolicy } from "../../../../../models/interfaces";
@@ -424,9 +426,9 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
           <>
             <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiTitle size="m">
-                  <span title={policyId}>{_.truncate(policyId)}</span>
-                </EuiTitle>
+                <EuiText size="s">
+                  <h1>{_.truncate(policyId)}</h1>
+                </EuiText>
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
@@ -446,7 +448,13 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
           </>
         )}
 
-        <ContentPanel title="Policy settings" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Policy settings</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
             {policySettingItems.map((item) => (
               <EuiFlexItem key={`${item.term}`}>
@@ -473,11 +481,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
               ))}
             </EuiFlexGrid>
           </EuiAccordion>
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Snapshot schedule" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Snapshot schedule</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
             {snapshotScheduleItems.map((item) => (
               <EuiFlexItem key={`${item.term}`}>
@@ -488,11 +502,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
               </EuiFlexItem>
             ))}
           </EuiFlexGrid>
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Snapshot retention period" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Snapshot retention period</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={3}>
             {retentionItems.map((item) => (
               <EuiFlexItem key={`${item.term}`}>
@@ -516,11 +536,17 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
               ))}
             </EuiFlexGrid>
           )}
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel title="Notifications" titleSize="s">
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiText size="s">
+              <h2>Notifications</h2>
+            </EuiText>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiFlexGrid columns={2}>
             {notificationItems.map((item) => (
               <EuiFlexItem key={`${item.term}`}>
@@ -531,21 +557,26 @@ export class SnapshotPolicyDetails extends MDSEnabledComponent<SnapshotPolicyDet
               </EuiFlexItem>
             ))}
           </EuiFlexGrid>
-        </ContentPanel>
+        </EuiPanel>
 
         <EuiSpacer />
 
-        <ContentPanel
-          title="Last creation/deletion"
-          titleSize="s"
-          actions={
-            <EuiSmallButton iconType="refresh" onClick={() => this.getPolicy(policyId)} data-test-subj="refreshButton">
-              Refresh
-            </EuiSmallButton>
-          }
-        >
+        <EuiPanel>
+          <EuiFlexGroup gutterSize="xs" alignItems="center">
+            <EuiFlexItem>
+              <EuiText size="s">
+                <h2>Last creation/deletion</h2>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiSmallButton iconType="refresh" onClick={() => this.getPolicy(policyId)} data-test-subj="refreshButton">
+                Refresh
+              </EuiSmallButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiHorizontalRule margin={"xs"} />
           <EuiBasicTable items={latestActivities} itemId="name" columns={this.columns} />
-        </ContentPanel>
+        </EuiPanel>
 
         {isDeleteModalVisible && (
           <DeleteModal policyId={policyId} closeDeleteModal={this.closeDeleteModal} onClickDelete={this.onClickDelete} />
diff --git a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
index 651c664a3..1cd699546 100644
--- a/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
+++ b/public/pages/Snapshots/components/AddPrefixInput/__snapshots__/AddPrefixInput.test.tsx.snap
@@ -6,17 +6,17 @@ exports[`AddPrefixInput component renders without error 1`] = `
     class="euiSpacer euiSpacer--l"
   />
   <div
-    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
   >
     <div
       class="euiFlexItem euiFlexItem--flexGrowZero"
     >
       <div
-        class="euiText euiText--extraSmall"
+        class="euiText euiText--small"
       >
-        <h4>
+        <h3>
           Specify prefix for restored index names
-        </h4>
+        </h3>
       </div>
     </div>
   </div>
diff --git a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
index 63b2b6545..78e46619d 100644
--- a/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/CreateSnapshotFlyout/CreateSnapshotFlyout.tsx
@@ -213,15 +213,16 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
     } = this.state;
 
     const repoOptions = repositories.map((r) => ({ value: r.id, text: r.id }));
+    const invalidChar = ["\\", "/", "*", "?", '"', "<", ">", "|", " ", ",", " ", "#"];
 
     return (
       <EuiFlyout ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" hideCloseButton>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <EuiText size="s">
+          <EuiText size="s">
+            <EuiTitle size="m">
               <h2 id="flyoutTitle"> Create snapshot</h2>
-            </EuiText>
-          </EuiTitle>
+            </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody>
@@ -236,7 +237,11 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
               placeholder="Enter snapshot name"
             />
           </EuiCompressedFormRow>
-          <EuiFormHelpText>A valid snapshot name can not contain upper case characters. </EuiFormHelpText>
+          <EuiFormHelpText>
+            {" "}
+            A valid snapshot name must not start with _ and must be lowercase. It must not contain any of the following characters:{" "}
+            {invalidChar.map((char) => `[${char}]`).join(" ")}{" "}
+          </EuiFormHelpText>
 
           <EuiSpacer size="m" />
 
@@ -254,7 +259,14 @@ export class CreateSnapshotFlyout extends MDSEnabledComponent<CreateSnapshotProp
 
           <EuiSpacer size="l" />
 
-          <EuiAccordion id="advanced_settings_accordian" buttonContent="Advanced options">
+          <EuiAccordion
+            id="advanced_settings_accordian"
+            buttonContent={
+              <EuiText size="s">
+                <h3>Advanced options</h3>
+              </EuiText>
+            }
+          >
             <EuiSpacer size="m" />
 
             <SnapshotAdvancedSettings
diff --git a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
index 1e38cb97c..94c7dade8 100644
--- a/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
+++ b/public/pages/Snapshots/components/RenameInput/RenameInput.tsx
@@ -30,7 +30,7 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError,
 
   const patternLabel = (
     <>
-      <EuiText size="xs">
+      <EuiText size="s">
         <h4>Rename Pattern</h4>
       </EuiText>
       <EuiText size="xs" style={{ padding: "0px 0px 5px 0px", fontWeight: "200" }}>
@@ -44,7 +44,7 @@ const RenameInput = ({ getRenamePattern, getRenameReplacement, showPatternError,
 
   const renameLabel = (
     <>
-      <EuiText size="xs">
+      <EuiText size="s">
         <h4>Rename Replacement</h4>
       </EuiText>
       <EuiText size="xs" style={{ padding: "0px 0px 5px 0px", fontWeight: "200" }}>
diff --git a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
index 7c8a2da7e..be4eafba8 100644
--- a/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
+++ b/public/pages/Snapshots/components/RenameInput/__snapshots__/RenameInput.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`RenameInput component renders without error 1`] = `
         for="rename_pattern"
       >
         <div
-          class="euiText euiText--extraSmall"
+          class="euiText euiText--small"
         >
           <h4>
             Rename Pattern
@@ -84,7 +84,7 @@ exports[`RenameInput component renders without error 1`] = `
         for="rename_replacement"
       >
         <div
-          class="euiText euiText--extraSmall"
+          class="euiText euiText--small"
         >
           <h4>
             Rename Replacement
diff --git a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
index 596203268..007b62962 100644
--- a/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
+++ b/public/pages/Snapshots/components/RestoreActivitiesPanel/RestoreActivitiesPanel.tsx
@@ -3,7 +3,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiInMemoryTable, EuiSpacer, EuiLink, EuiFlyout, EuiSmallButton, EuiButtonIcon, EuiEmptyPrompt, EuiHealth } from "@elastic/eui";
+import {
+  EuiInMemoryTable,
+  EuiSpacer,
+  EuiLink,
+  EuiFlyout,
+  EuiSmallButton,
+  EuiButtonIcon,
+  EuiEmptyPrompt,
+  EuiHealth,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiText,
+  EuiFlexItem,
+  EuiHorizontalRule,
+} from "@elastic/eui";
 import _ from "lodash";
 import React, { useEffect, useContext, useState, useMemo } from "react";
 import { SnapshotManagementService } from "../../../../services";
@@ -252,6 +266,39 @@ export const RestoreActivitiesPanel = ({
       incremental: true,
       compressed: true,
     },
+    compressed: true,
+  };
+
+  const restoreActivityTable = () => {
+    return !useNewUX ? (
+      <ContentPanel title={title} actions={useActions}>
+        <EuiInMemoryTable
+          items={snapshotId && restoreCount ? restoreStatus : []}
+          columns={columns}
+          pagination={false}
+          message={message}
+          search={useSearch}
+        />
+      </ContentPanel>
+    ) : (
+      <EuiPanel>
+        <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexItem>
+            <EuiText size="s">
+              <h2>{title}</h2>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>{useActions}</EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiInMemoryTable
+          items={snapshotId && restoreCount ? restoreStatus : []}
+          columns={columns}
+          pagination={false}
+          message={message}
+          search={useSearch}
+        />
+      </EuiPanel>
+    );
   };
 
   const oldMessage = <EuiEmptyPrompt body={<p>There are no restore activities.</p>} titleSize="s"></EuiEmptyPrompt>;
@@ -283,23 +330,7 @@ export const RestoreActivitiesPanel = ({
           />
         </EuiFlyout>
       )}
-      <ContentPanel title={title} actions={useActions}>
-        <EuiInMemoryTable
-          items={snapshotId && restoreCount ? restoreStatus : []}
-          columns={columns}
-          pagination={false}
-          message={message}
-          search={useSearch}
-        />
-        {useNewUX ? null : (
-          <>
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xxl" />
-            <EuiSpacer size="xxl" />
-          </>
-        )}
-      </ContentPanel>
+      {restoreActivityTable()}
     </>
   );
 };
diff --git a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
index 89ef017f2..b29ae9cf1 100644
--- a/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/RestoreSnapshotFlyout/RestoreSnapshotFlyout.tsx
@@ -386,9 +386,11 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent<RestoreSnapshotPr
         ) : (
           <>
             <EuiFlyoutHeader hasBorder>
-              <EuiTitle size="m">
-                <h2 id="flyoutTitle">Restore snapshot</h2>
-              </EuiTitle>
+              <EuiText size="s">
+                <EuiTitle size="m">
+                  <h2 id="flyoutTitle">Restore snapshot</h2>
+                </EuiTitle>
+              </EuiText>
             </EuiFlyoutHeader>
 
             <EuiFlyoutBody>
@@ -396,20 +398,26 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent<RestoreSnapshotPr
                 <EuiFlexItem>
                   <CustomLabel title="Snapshot name" />
                   <EuiSpacer size="xs" />
-                  <h3 style={{ fontSize: "1.1rem" }}>{snapshot?.snapshot}</h3>
+                  <EuiText size="s">
+                    <p>{snapshot?.snapshot}</p>
+                  </EuiText>
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <CustomLabel title="Status" />
                   <EuiHealth textSize="m" color={`${status?.toLowerCase()}`} title={`${status} indicator icon`}>
                     {" "}
-                    {status}
+                    <EuiText size="s">
+                      <p> {status}</p>
+                    </EuiText>
                   </EuiHealth>
                 </EuiFlexItem>
                 <EuiFlexItem>
                   <CustomLabel title="Indices" />
                   <EuiSpacer size="xs" />
-                  <a onClick={this.onClickIndices} style={{ fontSize: "1.1rem" }}>
-                    {snapshot?.indices.length}
+                  <a onClick={this.onClickIndices}>
+                    <EuiText size="s">
+                      <p> {snapshot?.indices.length}</p>
+                    </EuiText>
                   </a>
                 </EuiFlexItem>
               </EuiFlexGroup>
@@ -462,7 +470,14 @@ export class RestoreSnapshotFlyout extends MDSEnabledComponent<RestoreSnapshotPr
               )}
 
               <EuiSpacer size="xxl" />
-              <EuiAccordion id="advanced_restore_options" buttonContent="Advanced options">
+              <EuiAccordion
+                id="advanced_restore_options"
+                buttonContent={
+                  <EuiText size="s">
+                    <h3>Advanced options</h3>
+                  </EuiText>
+                }
+              >
                 <EuiSpacer size="m" />
 
                 <SnapshotRestoreAdvancedOptions
diff --git a/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx b/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
index 74cb867c7..623fa65d5 100644
--- a/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
+++ b/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
@@ -102,7 +102,7 @@ export class SnapshotFlyout extends MDSEnabledComponent<SnapshotFlyoutProps, Sna
     let error;
     if (snapshot?.failures != null) {
       error = (
-        <EuiText size="xs">
+        <EuiText size="s">
           <dt>Error details</dt>
           <dd>
             <ModalConsumer>
@@ -116,16 +116,18 @@ export class SnapshotFlyout extends MDSEnabledComponent<SnapshotFlyoutProps, Sna
     return (
       <EuiFlyout ownFocus={false} onClose={onCloseFlyout} maxWidth={600} size="m" hideCloseButton>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="m">
-            <h2 id="flyoutTitle">{snapshot?.snapshot}</h2>
-          </EuiTitle>
+          <EuiText size="s">
+            <EuiTitle size="m">
+              <h2 id="flyoutTitle">{snapshot?.snapshot}</h2>
+            </EuiTitle>
+          </EuiText>
         </EuiFlyoutHeader>
 
         <EuiFlyoutBody>
           <EuiFlexGrid columns={2}>
             {items1.map((item) => (
               <EuiFlexItem key={`${item.term}#${item.value}`}>
-                <EuiText size="xs">
+                <EuiText size="s">
                   <dt>{item.term}</dt>
                   <dd>{item.value}</dd>
                 </EuiText>
@@ -140,7 +142,7 @@ export class SnapshotFlyout extends MDSEnabledComponent<SnapshotFlyoutProps, Sna
           <EuiFlexGrid columns={2}>
             {items2.map((item) => (
               <EuiFlexItem key={`${item.term}#${item.value}`}>
-                <EuiText size="xs">
+                <EuiText size="s">
                   <dt>{item.term}</dt>
                   <dd>{item.value}</dd>
                 </EuiText>
@@ -150,7 +152,7 @@ export class SnapshotFlyout extends MDSEnabledComponent<SnapshotFlyoutProps, Sna
 
           <EuiSpacer size="l" />
 
-          <EuiText size="xs">
+          <EuiText size="s">
             <dt>Indices</dt>
             <dd>{snapshot?.indices.join(", ")}</dd>
           </EuiText>
diff --git a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
index 5d850272f..ea3b53ff1 100644
--- a/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
+++ b/public/pages/Snapshots/components/SnapshotRenameOptions/SnapshotRenameOptions.tsx
@@ -29,11 +29,8 @@ const SnapshotRenameOptions = ({
   const { do_not_rename, add_prefix, rename_indices } = RESTORE_OPTIONS;
 
   return (
-    <div style={{ width: width }}>
-      <h5>Rename restored indices</h5>
-
-      <EuiSpacer size="m" />
-
+    <div>
+      <CustomLabel title={"Rename restored indices"} />
       <EuiCompressedRadio
         id={do_not_rename}
         name="rename_option"
diff --git a/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap b/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
index 7c56ad84b..b6d2694a9 100644
--- a/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
+++ b/public/pages/Snapshots/components/SnapshotRenameOptions/__snapshots__/SnapshotRenameOptions.test.tsx.snap
@@ -3,11 +3,23 @@
 exports[`SnapshotRenameOptions component renders without error 1`] = `
 <div>
   <div>
-    <h5>
-      Rename restored indices
-    </h5>
     <div
-      class="euiSpacer euiSpacer--m"
+      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="euiText euiText--small"
+        >
+          <h3>
+            Rename restored indices
+          </h3>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--s"
     />
     <div
       class="euiRadio euiRadio--compressed"
diff --git a/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx b/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
index 490dff0fa..907ea4a9e 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
+++ b/public/pages/Snapshots/components/SnapshotRestoreAdvancedOptions/SnapshotRestoreAdvancedOptions.tsx
@@ -80,7 +80,9 @@ const SnapshotRestoreAdvancedOptions = ({
 
       <EuiSpacer size="l" />
 
-      <h5>Custom index settings</h5>
+      <EuiText size="s">
+        <h5>Custom index settings</h5>
+      </EuiText>
       <EuiText size="xs" style={{ padding: "5px 0px" }}>
         <p style={{ fontWeight: 200 }}>
           By default, index settings are restored from indices in snapshots. You can choose to
diff --git a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
index d8b4390f2..8248cc25a 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
+++ b/public/pages/Snapshots/components/SnapshotRestoreOption/SnapshotRestoreOption.tsx
@@ -7,6 +7,7 @@ import React, { ChangeEvent } from "react";
 import { EuiCompressedRadio, EuiSpacer } from "@elastic/eui";
 import CustomLabel from "../../../../components/CustomLabel";
 import { RESTORE_OPTIONS } from "../../../../models/interfaces";
+import { EuiText } from "@opensearch-project/oui";
 
 interface SnapshotRestoreOptionProps {
   restoreAllIndices: boolean;
@@ -26,11 +27,8 @@ const SnapshotRestoreOption = ({
   const { restore_all_indices, restore_specific_indices } = RESTORE_OPTIONS;
 
   return (
-    <div style={{ width: width }}>
-      <h5>Specify restore option</h5>
-
-      <EuiSpacer size="m" />
-
+    <div>
+      <CustomLabel title={"Specify restore option"} />
       <EuiCompressedRadio
         id={restore_all_indices}
         name="restore_option"
diff --git a/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap b/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
index b4d9ae44a..4aa352abf 100644
--- a/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
+++ b/public/pages/Snapshots/components/SnapshotRestoreOption/__snapshots__/SnapshotRestoreOption.test.tsx.snap
@@ -3,11 +3,23 @@
 exports[`SnapshotRestoreOption component renders without error 1`] = `
 <div>
   <div>
-    <h5>
-      Specify restore option
-    </h5>
     <div
-      class="euiSpacer euiSpacer--m"
+      class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+    >
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="euiText euiText--small"
+        >
+          <h3>
+            Specify restore option
+          </h3>
+        </div>
+      </div>
+    </div>
+    <div
+      class="euiSpacer euiSpacer--s"
     />
     <div
       class="euiRadio euiRadio--compressed"
diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
index a8ad4f79c..17bd808e0 100644
--- a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
+++ b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -22,6 +22,7 @@ import {
   EuiContextMenuItem,
   EuiButtonIcon,
   EuiButton,
+  EuiPanel,
 } from "@elastic/eui";
 import { FieldValueSelectionFilterConfigType } from "@elastic/eui/src/components/search_bar/filters/field_value_selection_filter";
 import { CoreServicesContext } from "../../../../components/core_services";
@@ -45,6 +46,7 @@ import { DataSourceMenuContext, DataSourceMenuProperties } from "../../../../ser
 import MDSEnabledComponent from "../../../../components/MDSEnabledComponent";
 import { useUpdateUrlWithDataSourceProperties } from "../../../../components/MDSEnabledComponent";
 import { getApplication, getNavigationUI, getUISettings } from "../../../../services/Services";
+import { TopNavControlDescriptionData } from "src/plugins/navigation/public";
 
 interface SnapshotsProps extends RouteComponentProps, DataSourceMenuProperties {
   snapshotManagementService: SnapshotManagementService;
@@ -271,12 +273,11 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
         this.context.notifications.toasts.addSuccess(`Created snapshot ${snapshotId} in repository ${repository}.`);
         await this.getSnapshots();
       } else {
-        const message = JSON.parse(response.error).error.root_cause[0].reason;
-        const trimmedMessage = message.slice(message.indexOf("]") + 1, message.indexOf(".") + 1);
+        const message = response.error;
 
         this.context.notifications.toasts.addError(response.error, {
           title: `There was a problem creating the snapshot.`,
-          toastMessage: `${trimmedMessage} Open browser console & click below for details.`,
+          toastMessage: `${message} Open browser console & click below for details.`,
         });
       }
     } catch (err) {
@@ -293,29 +294,30 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
       if (response.ok) {
         this.onRestore(true, response);
       } else {
-        this.onRestore(false, JSON.parse(response.error).error);
+        this.onRestore(false, response);
       }
     } catch (err) {
       this.context.notifications.toasts.addDanger(getErrorMessage(err, "There was a problem restoring the snapshot."));
     }
   };
 
-  onRestore = (success: boolean, error: object = {}) => {
+  onRestore = (success: boolean, response: object = {}) => {
     const { selectedItems } = this.state;
     let errorMessage: string | undefined;
     if (!success) {
       let optionalMessage = "";
+      const errorString = response.error || JSON.stringify(response);
 
-      if (error.reason.indexOf("open index with same name") >= 0) {
+      if (errorString.indexOf("open index with same name") >= 0) {
         optionalMessage = "You have an index with the same name. Try a different prefix.";
       }
-      errorMessage = `${optionalMessage}`;
+      errorMessage = `${optionalMessage} ${errorString}`;
     }
 
     const toasts = success
-      ? getToasts("success_restore_toast", errorMessage, selectedItems[0].id, this.onClickTab)
+      ? getToasts("success_restore_toast", undefined, selectedItems[0].id, this.onClickTab)
       : getToasts("error_restore_toast", errorMessage, selectedItems[0].id, this.onOpenError);
-    this.setState({ toasts, error: error });
+    this.setState({ toasts, error: response.error });
   };
 
   onOpenError = () => {
@@ -495,7 +497,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
       box: {
         placeholder: "Search snapshot",
         incremental: true,
-        compressed: useNewUX ? true : false,
+        compressed: true,
       },
       compressed: true,
       filters: [
@@ -533,7 +535,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
       <EuiSmallButton disabled={selectedItems.length !== 1} onClick={this.onClickRestore} color="primary" data-test-subj="restoreButton">
         Restore
       </EuiSmallButton>,
-      <EuiSmallButton onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
+      <EuiSmallButton iconType="plus" onClick={this.onClickCreate} fill={true} data-test-subj="takeSnapshotButton">
         Take snapshot
       </EuiSmallButton>,
     ];
@@ -554,6 +556,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
         id: "Take snapshot",
         label: "Take snapshot",
         fill: true,
+        iconType: "plus",
         run: this.onClickCreate,
         testId: "takeSnapshot",
         controlType: "button",
@@ -562,25 +565,60 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
 
     const descriptionData = [
       {
-        renderComponent: (
-          <EuiText size="s" color="subdued">
-            Index snapshots are taken automatically from snapshot policies, or you can initiate manual snapshots to save to a repository.{" "}
-            <br></br>
-            You can restore indices by selecting a snapshot.
-          </EuiText>
-        ),
-      },
+        description:
+          "Index snapshots are taken automatically from snapshot policies, or you can initiate manual snapshots to save to a repository. You can restore indices by selecting a snapshot.",
+      } as TopNavControlDescriptionData,
     ];
 
+    const snapshotTable = () => {
+      return !useNewUX ? (
+        <ContentPanel title={showTitle} actions={useActions} subTitleText={useSubTitle}>
+          <EuiInMemoryTable
+            items={snapshots}
+            itemId={(item) => `${item.repository}:${item.id}`}
+            columns={this.columns}
+            pagination={true}
+            sorting={{
+              sort: {
+                field: "end_epoch",
+                direction: "desc",
+              },
+            }}
+            isSelectable={true}
+            selection={{ onSelectionChange: this.onSelectionChange }}
+            search={search}
+            loading={loadingSnapshots}
+          />
+        </ContentPanel>
+      ) : (
+        <EuiPanel>
+          <EuiInMemoryTable
+            items={snapshots}
+            itemId={(item) => `${item.repository}:${item.id}`}
+            columns={this.columns}
+            pagination={true}
+            sorting={{
+              sort: {
+                field: "end_epoch",
+                direction: "desc",
+              },
+            }}
+            isSelectable={true}
+            selection={{ onSelectionChange: this.onSelectionChange }}
+            search={search}
+            loading={loadingSnapshots}
+          />
+        </EuiPanel>
+      );
+    };
+
     const { HeaderControl } = getNavigationUI();
     const { setAppRightControls, setAppDescriptionControls } = getApplication();
-    const showTitle = useNewUX 
-      ? undefined 
-      : (
-        <EuiText size="s">
-          <h1>Snapshots</h1>
-        </EuiText>
-      );
+    const showTitle = useNewUX ? undefined : (
+      <EuiText size="s">
+        <h1>Snapshots</h1>
+      </EuiText>
+    );
     const SnapshotTabName = useNewUX ? "Index snapshots" : "Snapshots";
     const useActions = useNewUX ? undefined : actions;
     const useSubTitle = useNewUX ? undefined : subTitleText;
@@ -614,26 +652,7 @@ export class Snapshots extends MDSEnabledComponent<SnapshotsProps, SnapshotsStat
           />
         )}
 
-        {snapshotPanel && (
-          <ContentPanel title={showTitle} actions={useActions} subTitleText={useSubTitle}>
-            <EuiInMemoryTable
-              items={snapshots}
-              itemId={(item) => `${item.repository}:${item.id}`}
-              columns={this.columns}
-              pagination={true}
-              sorting={{
-                sort: {
-                  field: "end_epoch",
-                  direction: "desc",
-                },
-              }}
-              isSelectable={true}
-              selection={{ onSelectionChange: this.onSelectionChange }}
-              search={search}
-              loading={loadingSnapshots}
-            />
-          </ContentPanel>
-        )}
+        {snapshotPanel && snapshotTable()}
 
         {showFlyout && (
           <SnapshotFlyout
diff --git a/public/pages/Snapshots/helper.tsx b/public/pages/Snapshots/helper.tsx
index cd9eda19a..311b53d06 100644
--- a/public/pages/Snapshots/helper.tsx
+++ b/public/pages/Snapshots/helper.tsx
@@ -71,15 +71,17 @@ export const getToasts = (id: string, message: string | undefined, snapshotId: s
 
 interface CheckboxLabelProps {
   title: string;
-  helpText: string;
+  helpText?: string;
 }
 
 export const CheckBoxLabel = ({ title, helpText }: CheckboxLabelProps) => (
   <>
     <EuiText size="s">{title}</EuiText>
-    <EuiText size="xs" style={{ fontWeight: "200" }}>
-      {helpText}
-    </EuiText>
+    {helpText ? (
+      <EuiText size="xs" style={{ fontWeight: "200" }}>
+        {helpText}
+      </EuiText>
+    ) : null}
   </>
 );
 
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
index 227479a1f..8b0de80a1 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -18,14 +18,20 @@ interface FlyoutFooterProps {
 }
 
 const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => (
-  <EuiFlexGroup justifyContent="flexEnd">
+  <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
     <EuiFlexItem grow={false}>
       <EuiSmallButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
         Cancel
       </EuiSmallButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiSmallButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button" iconType={"Add" ? "plusInCircle" : "plus"}>
+      <EuiSmallButton
+        disabled={disabledAction}
+        onClick={onClickAction}
+        fill
+        data-test-subj="flyout-footer-action-button"
+        iconType={"Add" ? "plusInCircle" : "plus"}
+      >
         {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
       </EuiSmallButton>
     </EuiFlexItem>
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
index 4e160c81a..c227dabf4 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/__snapshots__/FlyoutFooter.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<FlyoutFooter /> spec renders the component 1`] = `
 <div
-  class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+  class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
 >
   <div
     class="euiFlexItem euiFlexItem--flexGrowZero"