diff --git a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
index 7789db8cc..247dc329e 100644
--- a/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
+++ b/public/pages/CreatePolicy/components/DefinePolicy/DefinePolicy.tsx
@@ -26,10 +26,11 @@ interface DefinePolicyProps {
   hasJSONError: boolean;
   onChange: (value: string) => void;
   onAutoIndent: () => void;
+  useNewUx?: boolean;
 }
 
 // TODO: Add custom autocomplete for Policy syntax
-const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: DefinePolicyProps) => (
+const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError, useNewUx }: DefinePolicyProps) => (
   <ContentPanel
     bodyStyles={{ padding: "initial" }}
     title="Define policy"
@@ -37,12 +38,12 @@ const DefinePolicy = ({ jsonString, onChange, onAutoIndent, hasJSONError }: Defi
     actions={[
       <EuiCopy textToCopy={jsonString}>
         {(copy: () => void) => (
-          <EuiButton iconType="copyClipboard" onClick={copy}>
+          <EuiButton iconType="copyClipboard" onClick={copy} size={useNewUx ? "s" : undefined}>
             Copy
           </EuiButton>
         )}
       </EuiCopy>,
-      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError}>
+      <EuiButton iconType="editorAlignLeft" onClick={onAutoIndent} disabled={hasJSONError} size={useNewUx ? "s" : undefined}>
         Auto indent
       </EuiButton>,
     ]}
diff --git a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
index 855e6acfb..1fba864d7 100644
--- a/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
+++ b/public/pages/CreatePolicy/containers/CreatePolicy/CreatePolicy.tsx
@@ -286,7 +286,13 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
         {this.renderEditCallOut()}
         <ConfigurePolicy policyId={policyId} policyIdError={policyIdError} isEdit={isEdit} onChange={this.onChange} useNewUx={useNewUX} />
         <EuiSpacer />
-        <DefinePolicy jsonString={jsonString} onChange={this.onChangeJSON} onAutoIndent={this.onAutoIndent} hasJSONError={hasJSONError} />
+        <DefinePolicy
+          jsonString={jsonString}
+          onChange={this.onChangeJSON}
+          onAutoIndent={this.onAutoIndent}
+          hasJSONError={hasJSONError}
+          useNewUx={useNewUX}
+        />
         <EuiSpacer />
         {submitError && (
           <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
@@ -296,12 +302,18 @@ export class CreatePolicy extends Component<CreatePolicyProps, CreatePolicyState
         <EuiSpacer />
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton">
+            <EuiButtonEmpty onClick={this.onCancel} data-test-subj="createPolicyCancelButton" size={useNewUX ? "s" : undefined}>
               Cancel
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit} isLoading={isSubmitting} data-test-subj="createPolicyCreateButton">
+            <EuiButton
+              fill
+              onClick={this.onSubmit}
+              isLoading={isSubmitting}
+              data-test-subj="createPolicyCreateButton"
+              size={useNewUX ? "s" : undefined}
+            >
               {isEdit ? "Update" : "Create"}
             </EuiButton>
           </EuiFlexItem>
diff --git a/public/pages/Policies/containers/Policies/Policies.tsx b/public/pages/Policies/containers/Policies/Policies.tsx
index 5d3640827..24960f203 100644
--- a/public/pages/Policies/containers/Policies/Policies.tsx
+++ b/public/pages/Policies/containers/Policies/Policies.tsx
@@ -26,6 +26,8 @@ import {
   EuiCompressedFieldSearch,
   EuiPopover,
   EuiContextMenuPanel,
+  EuiContextMenu,
+  EuiIcon,
 } from "@elastic/eui";
 import _ from "lodash";
 import { ContentPanel, ContentPanelActions } from "../../../../components/ContentPanel";
@@ -442,33 +444,31 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
       </EuiButton>
     );
 
-    const popoverActionItems = [
-      <EuiContextMenuItem
-        key="Edit"
-        icon="pencil"
-        disabled={selectedItems.length != 1}
-        data-test-subj="editButton"
-        size="s"
-        onClick={() => {
-          this.closePopover();
-          this.onShowEditModal();
-        }}
-      >
-        Edit
-      </EuiContextMenuItem>,
-      <EuiContextMenuItem
-        key="Delete"
-        icon="trash"
-        disabled={!selectedItems.length}
-        data-test-subj="deleteButton"
-        size="s"
-        onClick={() => {
-          this.closePopover();
-          this.onShowDeleteModal();
-        }}
-      >
-        <EuiTextColor color="danger">Delete</EuiTextColor>
-      </EuiContextMenuItem>,
+    const popoverItems = [
+      {
+        id: 0,
+        width: 159,
+        items: [
+          {
+            name: "Edit",
+            icon: "pencil",
+            disabled: selectedItems.length != 1,
+            onClick: () => {
+              this.closePopover();
+              this.onShowEditModal();
+            },
+          },
+          {
+            name: "Delete",
+            icon: <EuiIcon type="trash" size="m" color="danger" />,
+            disabled: !selectedItems.length,
+            onClick: () => {
+              this.closePopover();
+              this.onShowDeleteModal();
+            },
+          },
+        ],
+      },
     ];
 
     return !useNewUX ? (
@@ -543,8 +543,9 @@ export class Policies extends MDSEnabledComponent<PoliciesProps, PoliciesState>
                 isOpen={isPopoverOpen}
                 closePopover={this.closePopover}
                 anchorPosition="downRight"
+                panelPaddingSize="none"
               >
-                <EuiContextMenuPanel items={popoverActionItems} />
+                <EuiContextMenu initialPanelId={0} panels={popoverItems} size="s" />
               </EuiPopover>
             </EuiFlexItem>
           </EuiFlexGroup>
diff --git a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
index 0f8dc80e4..286284da7 100644
--- a/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
+++ b/public/pages/VisualCreatePolicy/components/ChannelNotification/ChannelNotification.tsx
@@ -18,6 +18,7 @@ interface ChannelNotificationProps {
   onChangeChannelId: (value: ChangeEvent<HTMLSelectElement>) => void;
   onChangeMessage?: (value: ChangeEvent<HTMLTextAreaElement>) => void;
   getChannels: () => void;
+  useNewUx?: boolean;
   actionNotification?: boolean; // to tell if this is rendering in actions or in error notification as they both show up on page together
 }
 
@@ -29,6 +30,7 @@ const ChannelNotification = ({
   onChangeChannelId,
   onChangeMessage,
   getChannels,
+  useNewUx,
   actionNotification = false,
 }: ChannelNotificationProps) => {
   return (
@@ -38,6 +40,7 @@ const ChannelNotification = ({
         <EuiFlexItem>
           <EuiFormRow>
             <EuiSelect
+              compressed={useNewUx}
               id={actionNotification ? "action-channel-id" : "channel-id"}
               placeholder="Select channel ID"
               hasNoInitialSelection
@@ -56,10 +59,11 @@ const ChannelNotification = ({
             disabled={loadingChannels}
             className="refresh-button"
             data-test-subj="channel-notification-refresh"
+            size={useNewUx ? "s" : undefined}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank">
+          <EuiButton iconType="popout" href="notifications-dashboards#/channels" target="_blank" size={useNewUx ? "s" : undefined}>
             Manage channels
           </EuiButton>
         </EuiFlexItem>
diff --git a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
index 48ea74ad9..db823e6bd 100644
--- a/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
+++ b/public/pages/VisualCreatePolicy/components/FlyoutFooter/FlyoutFooter.tsx
@@ -15,17 +15,34 @@ interface FlyoutFooterProps {
   save?: boolean;
   restore?: boolean;
   text?: string;
+  useNewUx?: boolean;
 }
 
-const FlyoutFooter = ({ edit, action, disabledAction = false, onClickCancel, onClickAction, save, restore, text }: FlyoutFooterProps) => (
+const FlyoutFooter = ({
+  edit,
+  action,
+  disabledAction = false,
+  onClickCancel,
+  onClickAction,
+  save,
+  restore,
+  text,
+  useNewUx,
+}: FlyoutFooterProps) => (
   <EuiFlexGroup justifyContent="flexEnd">
     <EuiFlexItem grow={false}>
-      <EuiButtonEmpty onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
+      <EuiButtonEmpty size={useNewUx ? "s" : undefined} onClick={onClickCancel} flush="left" data-test-subj="flyout-footer-cancel-button">
         Cancel
       </EuiButtonEmpty>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>
-      <EuiButton disabled={disabledAction} onClick={onClickAction} fill data-test-subj="flyout-footer-action-button">
+      <EuiButton
+        size={useNewUx ? "s" : undefined}
+        disabled={disabledAction}
+        onClick={onClickAction}
+        fill
+        data-test-subj="flyout-footer-action-button"
+      >
         {text ? text : restore ? "Restore snapshot" : !save ? `${edit ? "Edit" : "Add"} ${action}` : save ? "Save" : "Create"}
       </EuiButton>
     </EuiFlexItem>
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
index 714429b9e..f07e94e0d 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplate/ISMTemplate.tsx
@@ -15,9 +15,10 @@ interface ISMTemplateProps {
   onUpdateTemplate: (template: ISMTemplateData) => void;
   onRemoveTemplate: () => void;
   isFirst: boolean;
+  useNewUx?: boolean;
 }
 
-const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }: ISMTemplateProps) => {
+const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst, useNewUx }: ISMTemplateProps) => {
   // TODO: Move this top top of form submition
   const [isInvalid, setInvalid] = useState(false);
   return (
@@ -25,6 +26,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
       <EuiFlexItem style={{ maxWidth: ISM_TEMPLATE_INPUT_MAX_WIDTH }}>
         <EuiFormRow isInvalid={false} error={null}>
           <EuiComboBox
+            compressed={useNewUx}
             isClearable={false}
             placeholder="Add index patterns"
             noSuggestions
@@ -67,6 +69,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
       <EuiFlexItem grow={false}>
         <EuiFormRow error={null} isInvalid={false}>
           <EuiFieldNumber
+            compressed={useNewUx}
             value={template.priority}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
               const priority = e.target.valueAsNumber;
@@ -78,7 +81,7 @@ const ISMTemplate = ({ template, onUpdateTemplate, onRemoveTemplate, isFirst }:
         </EuiFormRow>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button">
+        <EuiButton color="danger" onClick={onRemoveTemplate} data-test-subj="ism-template-remove-button" size={useNewUx ? "s" : undefined}>
           Remove
         </EuiButton>
       </EuiFlexItem>
diff --git a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
index 223ea6e63..e196ba1a2 100644
--- a/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
+++ b/public/pages/VisualCreatePolicy/components/ISMTemplates/ISMTemplates.tsx
@@ -18,12 +18,14 @@ import { makeId } from "../../../../utils/helpers";
 interface ISMTemplatesProps {
   policy: Policy;
   onChangePolicy: (policy: Policy) => void;
+  useNewUx?: boolean;
 }
 
-const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
+const ISMTemplates = ({ policy, onChangePolicy, useNewUx }: ISMTemplatesProps) => {
   const templates = convertTemplatesToArray(policy.ism_template);
   const addTemplateButton = (
     <EuiButton
+      size={useNewUx ? "s" : undefined}
       onClick={() => {
         onChangePolicy({ ...policy, ism_template: [...templates, { index_patterns: [], priority: 1 }] });
       }}
@@ -32,6 +34,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
       Add template
     </EuiButton>
   );
+  const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
   return (
     <ContentPanel
       bodyStyles={{ padding: "initial" }}
@@ -51,7 +54,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
       }
       titleSize="s"
       subTitleText={
-        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+        <EuiText color="subdued" size="s" style={paddingStyle}>
           <p style={{ fontWeight: 200 }}>
             Specify ISM template patterns that match the index to apply the policy.{" "}
             <EuiLink href={DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
@@ -97,6 +100,7 @@ const ISMTemplates = ({ policy, onChangePolicy }: ISMTemplatesProps) => {
                 ism_template: templates.slice(0, idx).concat(templates.slice(idx + 1)),
               });
             }}
+            useNewUx={useNewUx}
           />
         ))}
 
diff --git a/public/pages/VisualCreatePolicy/components/States/States.tsx b/public/pages/VisualCreatePolicy/components/States/States.tsx
index 086b71e67..11a130ba6 100644
--- a/public/pages/VisualCreatePolicy/components/States/States.tsx
+++ b/public/pages/VisualCreatePolicy/components/States/States.tsx
@@ -31,16 +31,26 @@ interface StatesProps {
   onClickDeleteState: (idx: number) => void;
   onChangeDefaultState: (event: ChangeEvent<HTMLSelectElement>) => void;
   isReadOnly: boolean;
+  useNewUx?: boolean;
 }
 
-const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, onChangeDefaultState, isReadOnly = false }: StatesProps) => {
+const States = ({
+  onOpenFlyout,
+  policy,
+  onClickEditState,
+  onClickDeleteState,
+  onChangeDefaultState,
+  isReadOnly = false,
+  useNewUx,
+}: StatesProps) => {
+  const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
   return (
     <ContentPanel
       bodyStyles={{ padding: "initial" }}
       title={`States (${policy.states.length})`}
       titleSize="s"
       subTitleText={
-        <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+        <EuiText color="subdued" size="s" style={paddingStyle}>
           <p style={{ fontWeight: 200 }}>
             You can think of policies as state machines. "Actions" are the operations ISM performs when an index is in a certain state.
             <br />
@@ -89,7 +99,7 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
           (!!policy.states.length ? (
             <>
               <EuiSpacer />
-              <EuiButton onClick={onOpenFlyout} data-test-subj="states-add-state-button">
+              <EuiButton onClick={onOpenFlyout} data-test-subj="states-add-state-button" size={useNewUx ? "s" : undefined}>
                 Add state
               </EuiButton>
             </>
@@ -99,7 +109,12 @@ const States = ({ onOpenFlyout, policy, onClickEditState, onClickDeleteState, on
               titleSize="s"
               body={<p>Your policy currently has no states defined. Add states to manage your index lifecycle.</p>}
               actions={
-                <EuiButton color="primary" onClick={onOpenFlyout} data-test-subj="states-add-state-button">
+                <EuiButton
+                  color="primary"
+                  onClick={onOpenFlyout}
+                  data-test-subj="states-add-state-button"
+                  size={useNewUx ? "s" : undefined}
+                >
                   Add state
                 </EuiButton>
               }
diff --git a/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx b/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
index 7d209e5cc..e2e878cc9 100644
--- a/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
+++ b/public/pages/VisualCreatePolicy/components/Transition/Transition.tsx
@@ -24,9 +24,10 @@ const conditionTypeOptions = [
 interface TransitionProps {
   uiTransition: UITransition;
   onChangeTransition: (transition: UITransition) => void;
+  useNewUx?: boolean;
 }
 
-const Transition = ({ uiTransition, onChangeTransition }: TransitionProps) => {
+const Transition = ({ uiTransition, onChangeTransition, useNewUx }: TransitionProps) => {
   // We currently only support one transition condition
   const conditionType = Object.keys(uiTransition.transition.conditions || []).pop() || "none";
   const conditions = uiTransition.transition.conditions;
@@ -35,6 +36,7 @@ const Transition = ({ uiTransition, onChangeTransition }: TransitionProps) => {
       <EuiFormCustomLabel title="Condition" helpText="Specify the condition needed to be met to transition to the destination state." />
       <EuiFormRow fullWidth isInvalid={false} error={null}>
         <EuiSelect
+          compressed={useNewUx}
           fullWidth
           id="condition-type"
           options={conditionTypeOptions}
diff --git a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
index 3bc647ea1..36ba9e4e1 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateAction/CreateAction.tsx
@@ -18,6 +18,7 @@ interface CreateActionProps {
   editAction: UIAction<Action> | null;
   onClickCancelAction: () => void;
   onClickSaveAction: (action: UIAction<Action>) => void;
+  useNewUx?: boolean;
 }
 
 interface CreateActionState {
@@ -53,7 +54,7 @@ export default class CreateAction extends Component<CreateActionProps, CreateAct
 
   render() {
     const { action } = this.state;
-    const { editAction } = this.props;
+    const { editAction, useNewUx } = this.props;
 
     const actionOptions = getActionOptions(actionRepoSingleton);
 
@@ -79,6 +80,7 @@ export default class CreateAction extends Component<CreateActionProps, CreateAct
           <EuiFormCustomLabel title="Action type" helpText="Select the action you want to add to this state." />
           <EuiFormRow fullWidth isInvalid={false} error={null}>
             <EuiSelect
+              compressed={useNewUx}
               fullWidth
               placeholder="Select action type"
               id="action-type"
@@ -104,6 +106,7 @@ export default class CreateAction extends Component<CreateActionProps, CreateAct
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <FlyoutFooter
+            useNewUx={useNewUx}
             edit={!!editAction}
             action="action"
             disabledAction={!action || !action.isValid()}
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
index d637221ae..f17233237 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/Actions.tsx
@@ -15,9 +15,10 @@ interface ActionsProps {
   onClickEditAction: (action: UIAction<Action>) => void;
   onDragEndActions: (dropResult: DropResult) => void;
   onClickAddAction: () => void;
+  useNewUx?: boolean;
 }
 
-const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndActions, onClickAddAction }: ActionsProps) => {
+const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndActions, onClickAddAction, useNewUx }: ActionsProps) => {
   return (
     <>
       <EuiFormCustomLabel title="Actions" helpText="Actions are the operations ISM performs when an index is in a certain state." />
@@ -55,7 +56,9 @@ const Actions = ({ actions, onClickDeleteAction, onClickEditAction, onDragEndAct
 
       <EuiSpacer />
 
-      <EuiButton onClick={onClickAddAction}>+ Add action</EuiButton>
+      <EuiButton onClick={onClickAddAction} size={useNewUx ? "s" : undefined}>
+        + Add action
+      </EuiButton>
     </>
   );
 };
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
index 5bb97e203..9b3594c89 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/CreateState.tsx
@@ -37,6 +37,7 @@ interface CreateStateProps {
   onSaveState: (state: State, states: State[], order: string, afterBeforeState: string) => void;
   onCloseFlyout: () => void;
   state: State | null;
+  useNewUx?: boolean;
 }
 
 interface CreateStateState {
@@ -190,7 +191,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
   };
 
   renderDefault = () => {
-    const { policy, state } = this.props;
+    const { policy, state, useNewUx } = this.props;
     const { actions, name, nameError, afterBeforeState, order, disableOrderSelections } = this.state;
     // If we are editing a state filter it out from the selectable options
     const stateOptions = policy.states.map((state) => ({ value: state.name, text: state.name })).filter((s) => s.value !== state?.name);
@@ -203,6 +204,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
 
         <EuiFormRow fullWidth isInvalid={!!nameError} error={nameError}>
           <EuiFieldText
+            compressed={useNewUx}
             fullWidth
             isInvalid={!!nameError}
             placeholder="sample_hot_state"
@@ -224,6 +226,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           <EuiFlexItem>
             <EuiFormRow>
               <EuiSelect
+                compressed={useNewUx}
                 disabled={disableOrderSelections}
                 options={[
                   { value: "after", text: "Add after" },
@@ -238,6 +241,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           <EuiFlexItem>
             <EuiFormRow>
               <EuiSelect
+                compressed={useNewUx}
                 disabled={disableOrderSelections}
                 options={stateOptions}
                 value={afterBeforeState}
@@ -256,6 +260,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           onClickEditAction={this.onClickEditAction}
           onDragEndActions={this.onDragEndActions}
           onClickAddAction={this.onClickAddAction}
+          useNewUx={useNewUx}
         />
 
         <EuiHorizontalRule />
@@ -266,24 +271,25 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           onClickDeleteTransition={this.onClickDeleteTransition}
           onClickEditTransition={this.onClickEditTransition}
           onClickAddTransition={this.onClickAddTransition}
+          useNewUx={useNewUx}
         />
       </>
     );
   };
 
   renderDefaultFooter = () => {
-    const { onCloseFlyout, state } = this.props;
+    const { onCloseFlyout, state, useNewUx } = this.props;
     const { name, nameError } = this.state;
     const isEditing = !!state;
     return (
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButtonEmpty iconType="cross" onClick={onCloseFlyout} flush="left">
+          <EuiButtonEmpty size={useNewUx ? "s" : undefined} iconType="cross" onClick={onCloseFlyout} flush="left">
             Cancel
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill disabled={!name.trim().length || !!nameError} onClick={this.onClickSaveState}>
+          <EuiButton size={useNewUx ? "s" : undefined} fill disabled={!name.trim().length || !!nameError} onClick={this.onClickSaveState}>
             {isEditing ? "Update state" : "Save state"}
           </EuiButton>
         </EuiFlexItem>
@@ -292,7 +298,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
   };
 
   render() {
-    const { onCloseFlyout, policy, state } = this.props;
+    const { onCloseFlyout, policy, state, useNewUx } = this.props;
     const { name, createAction, editAction, createTransition, editTransition, actions } = this.state;
     const isEditing = !!state;
 
@@ -312,6 +318,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           stateName={name}
           onClickCancelAction={this.onClickCancelAction}
           onClickSaveAction={this.onClickSaveAction}
+          useNewUx={useNewUx}
         />
       );
     if (createTransition || editTransition)
@@ -321,6 +328,7 @@ export default class CreateState extends Component<CreateStateProps, CreateState
           editTransition={editTransition}
           onCloseCreateTransition={() => this.setState({ createTransition: false, editTransition: null })}
           onClickSaveTransition={this.onClickSaveTransition}
+          useNewUx={useNewUx}
         />
       );
     if (!flyoutContent)
diff --git a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
index de09d619d..d8700a733 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateState/Transitions.tsx
@@ -16,6 +16,7 @@ interface TransitionsProps {
   onClickEditTransition: (transition: UITransition) => void;
   onDragEndTransitions: (dropResult: DropResult) => void;
   onClickAddTransition: () => void;
+  useNewUx?: boolean;
 }
 
 const Transitions = ({
@@ -24,6 +25,7 @@ const Transitions = ({
   onClickEditTransition,
   onDragEndTransitions,
   onClickAddTransition,
+  useNewUx,
 }: TransitionsProps) => {
   return (
     <>
@@ -64,7 +66,9 @@ const Transitions = ({
 
       <EuiSpacer />
 
-      <EuiButton onClick={onClickAddTransition}>+ Add Transition</EuiButton>
+      <EuiButton onClick={onClickAddTransition} size={useNewUx ? "s" : undefined}>
+        + Add Transition
+      </EuiButton>
     </>
   );
 };
diff --git a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
index 1972d3209..542ba9635 100644
--- a/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
+++ b/public/pages/VisualCreatePolicy/containers/CreateTransition/CreateTransition.tsx
@@ -17,6 +17,7 @@ interface CreateTransitionProps {
   onCloseCreateTransition: () => void;
   onClickSaveTransition: (uiTransition: UITransition) => void;
   stateOptions: string[];
+  useNewUx?: boolean;
 }
 
 interface CreateTransitionState {
@@ -76,7 +77,7 @@ export default class CreateTransition extends Component<CreateTransitionProps, C
   };
 
   render() {
-    const { editTransition, onCloseCreateTransition, stateOptions } = this.props;
+    const { editTransition, onCloseCreateTransition, stateOptions, useNewUx } = this.props;
     const { uiTransition } = this.state;
     let title = "Add transition";
     if (!!editTransition) title = "Edit transition";
@@ -104,6 +105,7 @@ export default class CreateTransition extends Component<CreateTransitionProps, C
 
           <EuiFormRow fullWidth isInvalid={false} error={null}>
             <EuiComboBox
+              compressed={useNewUx}
               fullWidth
               isClearable={false}
               placeholder="Select a single option"
@@ -118,10 +120,11 @@ export default class CreateTransition extends Component<CreateTransitionProps, C
 
           <EuiSpacer />
 
-          {!!uiTransition && <Transition uiTransition={uiTransition} onChangeTransition={this.onChangeTransition} />}
+          {!!uiTransition && <Transition uiTransition={uiTransition} onChangeTransition={this.onChangeTransition} useNewUx={useNewUx} />}
         </EuiFlyoutBody>
         <EuiFlyoutFooter>
           <FlyoutFooter
+            useNewUx={useNewUx}
             edit={!!editTransition}
             action="transition"
             onClickCancel={onCloseCreateTransition}
diff --git a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
index 289f8638a..654b05bfe 100644
--- a/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
+++ b/public/pages/VisualCreatePolicy/containers/ErrorNotification/ErrorNotification.tsx
@@ -25,6 +25,7 @@ export interface ErrorNotificationProps {
   onChangeErrorNotificationJsonString: (str: string) => void;
   onSwitchToChannels: () => void;
   notificationService: NotificationService;
+  useNewUx?: boolean;
 }
 
 interface ErrorNotificationState {
@@ -71,6 +72,7 @@ export default class ErrorNotification extends Component<ErrorNotificationProps,
       onChangeMessage,
       onChangeErrorNotificationJsonString,
       onSwitchToChannels,
+      useNewUx,
     } = this.props;
     const { channels, loadingChannels } = this.state;
     const hasDestination = !!errorNotification?.destination;
@@ -84,6 +86,7 @@ export default class ErrorNotification extends Component<ErrorNotificationProps,
         onChangeChannelId={onChangeChannelId}
         onChangeMessage={onChangeMessage}
         getChannels={this.getChannels}
+        useNewUx={useNewUx}
       />
     );
 
@@ -97,7 +100,7 @@ export default class ErrorNotification extends Component<ErrorNotificationProps,
         />
       );
     }
-
+    const paddingStyle = useNewUx ? { padding: "0px 0px" } : { padding: "5px 0px" };
     return (
       <ContentPanel
         bodyStyles={{ padding: "initial" }}
@@ -117,7 +120,7 @@ export default class ErrorNotification extends Component<ErrorNotificationProps,
         }
         titleSize="s"
         subTitleText={
-          <EuiText color="subdued" size="s" style={{ padding: "5px 0px" }}>
+          <EuiText color="subdued" size="s" style={paddingStyle}>
             <p style={{ fontWeight: 200 }}>
               You can set up an error notification for when a policy execution fails.{" "}
               <EuiLink href={ERROR_NOTIFICATION_DOCUMENTATION_URL} target="_blank" rel="noopener noreferrer">
diff --git a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
index db528c814..8532b6a9f 100644
--- a/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
+++ b/public/pages/VisualCreatePolicy/containers/VisualCreatePolicy/VisualCreatePolicy.tsx
@@ -345,9 +345,10 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
           onChangeErrorNotificationJsonString={this.onChangeErrorNotificationJsonString}
           onSwitchToChannels={this.onSwitchToChannels}
           notificationService={notificationService}
+          useNewUx={useNewUX}
         />
         <EuiSpacer size="m" />
-        <ISMTemplates policy={policy} onChangePolicy={this.onChangePolicy} />
+        <ISMTemplates policy={policy} onChangePolicy={this.onChangePolicy} useNewUx={useNewUX} />
         <EuiSpacer size="m" />
         <States
           policy={policy}
@@ -355,19 +356,28 @@ export class VisualCreatePolicy extends Component<VisualCreatePolicyProps, Visua
           onClickEditState={this.onClickEditState}
           onClickDeleteState={this.onClickDeleteState}
           onChangeDefaultState={this.onChangeDefaultState}
+          useNewUx={useNewUX}
         />
         <EuiSpacer size="m" />
 
         {showFlyout && (
-          <CreateState state={editingState} policy={policy} onSaveState={this.onSaveState} onCloseFlyout={this.onCloseFlyout} />
+          <CreateState
+            state={editingState}
+            policy={policy}
+            onSaveState={this.onSaveState}
+            onCloseFlyout={this.onCloseFlyout}
+            useNewUx={useNewUX}
+          />
         )}
 
         <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={this.onCancel}>Cancel</EuiButton>
+            <EuiButton onClick={this.onCancel} size={useNewUX ? "s" : undefined}>
+              Cancel
+            </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill onClick={this.onSubmit}>
+            <EuiButton fill onClick={this.onSubmit} size={useNewUX ? "s" : undefined}>
               {isEdit ? "Update" : "Create"}
             </EuiButton>
           </EuiFlexItem>