diff --git a/x-pack/legacy/plugins/canvas/i18n/components.ts b/x-pack/legacy/plugins/canvas/i18n/components.ts
index 1736b98663315..de16bc2101e8c 100644
--- a/x-pack/legacy/plugins/canvas/i18n/components.ts
+++ b/x-pack/legacy/plugins/canvas/i18n/components.ts
@@ -1005,12 +1005,6 @@ export const ComponentStrings = {
         defaultMessage: 'Refresh elements',
       }),
   },
-  WorkpadHeaderControlSettings: {
-    getButtonLabel: () =>
-      i18n.translate('xpack.canvas.workpadHeaderControlSettings.buttonLabel', {
-        defaultMessage: 'Options',
-      }),
-  },
   WorkpadHeaderCustomInterval: {
     getButtonLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderCustomInterval.confirmButtonLabel', {
@@ -1319,6 +1313,18 @@ export const ComponentStrings = {
       }),
   },
   WorkpadHeaderViewMenu: {
+    getAutoplayOffMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplayOffMenuItemLabel', {
+        defaultMessage: 'Turn autoplay off',
+      }),
+    getAutoplayOnMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplayOnMenuItemLabel', {
+        defaultMessage: 'Turn autoplay on',
+      }),
+    getAutoplaySettingsMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.autoplaySettingsMenuItemLabel', {
+        defaultMessage: 'Autoplay settings',
+      }),
     getFullscreenMenuItemLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.fullscreenMenuLabel', {
         defaultMessage: 'Enter fullscreen mode',
@@ -1331,6 +1337,10 @@ export const ComponentStrings = {
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshMenuItemLabel', {
         defaultMessage: 'Refresh data',
       }),
+    getRefreshSettingsMenuItemLabel: () =>
+      i18n.translate('xpack.canvas.workpadHeaderViewMenu.refreshSettingsMenuItemLabel', {
+        defaultMessage: 'Auto refresh settings',
+      }),
     getShowEditModeLabel: () =>
       i18n.translate('xpack.canvas.workpadHeaderViewMenu.showEditModeLabel', {
         defaultMessage: 'Show editing controls',
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss
deleted file mode 100644
index 3d217dd1fc180..0000000000000
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.canvasControlSettings__popover {
-  width: 600px;
-}
-
-.canvasControlSettings__list {
-  columns: 2;
-}
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx
deleted file mode 100644
index adc57ff4f815a..0000000000000
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/control_settings.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React, { MouseEventHandler } from 'react';
-import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui';
-// @ts-ignore untyped local
-import { Popover } from '../../popover';
-import { AutoRefreshControls } from './auto_refresh_controls';
-import { KioskControls } from './kiosk_controls';
-
-import { ComponentStrings } from '../../../../i18n';
-const { WorkpadHeaderControlSettings: strings } = ComponentStrings;
-
-interface Props {
-  refreshInterval: number;
-  setRefreshInterval: (interval: number | undefined) => void;
-  autoplayEnabled: boolean;
-  autoplayInterval: number;
-  enableAutoplay: (enable: boolean) => void;
-  setAutoplayInterval: (interval: number | undefined) => void;
-}
-
-export const ControlSettings = ({
-  setRefreshInterval,
-  refreshInterval,
-  autoplayEnabled,
-  autoplayInterval,
-  enableAutoplay,
-  setAutoplayInterval,
-}: Props) => {
-  const setRefresh = (val: number | undefined) => setRefreshInterval(val);
-
-  const disableInterval = () => {
-    setRefresh(0);
-  };
-
-  const popoverButton = (handleClick: MouseEventHandler<HTMLButtonElement>) => (
-    <EuiButtonEmpty size="xs" aria-label={strings.getButtonLabel()} onClick={handleClick}>
-      {strings.getButtonLabel()}
-    </EuiButtonEmpty>
-  );
-
-  return (
-    <Popover
-      id="auto-refresh-popover"
-      button={popoverButton}
-      anchorPosition="downLeft"
-      panelClassName="canvasControlSettings__popover"
-    >
-      {() => (
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <AutoRefreshControls
-              refreshInterval={refreshInterval}
-              setRefresh={val => setRefresh(val)}
-              disableInterval={() => disableInterval()}
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <KioskControls
-              autoplayEnabled={autoplayEnabled}
-              autoplayInterval={autoplayInterval}
-              onSetInterval={setAutoplayInterval}
-              onSetEnabled={enableAutoplay}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      )}
-    </Popover>
-  );
-};
-
-ControlSettings.propTypes = {
-  refreshInterval: PropTypes.number,
-  setRefreshInterval: PropTypes.func.isRequired,
-  autoplayEnabled: PropTypes.bool,
-  autoplayInterval: PropTypes.number,
-  enableAutoplay: PropTypes.func.isRequired,
-  setAutoplayInterval: PropTypes.func.isRequired,
-};
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts
deleted file mode 100644
index 316a49c85c09d..0000000000000
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { connect } from 'react-redux';
-import {
-  setRefreshInterval,
-  enableAutoplay,
-  setAutoplayInterval,
-  // @ts-ignore untyped local
-} from '../../../state/actions/workpad';
-// @ts-ignore untyped local
-import { getRefreshInterval, getAutoplay } from '../../../state/selectors/workpad';
-import { State } from '../../../../types';
-import { ControlSettings as Component } from './control_settings';
-
-const mapStateToProps = (state: State) => {
-  const { enabled, interval } = getAutoplay(state);
-
-  return {
-    refreshInterval: getRefreshInterval(state),
-    autoplayEnabled: enabled,
-    autoplayInterval: interval,
-  };
-};
-
-const mapDispatchToProps = {
-  setRefreshInterval,
-  enableAutoplay,
-  setAutoplayInterval,
-};
-
-export const ControlSettings = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx
index 1768adf9be79d..d651e649128f9 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx
@@ -32,6 +32,7 @@ export const RefreshControl = ({ doRefresh, inFlight }: Props) => (
       iconType="refresh"
       aria-label={strings.getRefreshAriaLabel()}
       onClick={doRefresh}
+      data-test-subj="canvas-refresh-control"
     />
   </EuiToolTip>
 );
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
index e1ecee0e152be..eb45f97452ae1 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/__snapshots__/view_menu.stories.storyshot
@@ -65,3 +65,69 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
   </div>
 </div>
 `;
+
+exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownLeft"
+  container={null}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="euiPopover__anchor"
+  >
+    <button
+      aria-label="View options"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="euiButtonEmpty__content"
+      >
+        <span
+          className="euiButtonEmpty__text"
+        >
+          View
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] = `
+<div
+  className="euiPopover euiPopover--anchorDownLeft"
+  container={null}
+  onKeyDown={[Function]}
+  onMouseDown={[Function]}
+  onMouseUp={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <div
+    className="euiPopover__anchor"
+  >
+    <button
+      aria-label="View options"
+      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+      onClick={[Function]}
+      type="button"
+    >
+      <span
+        className="euiButtonEmpty__content"
+      >
+        <span
+          className="euiButtonEmpty__text"
+        >
+          View
+        </span>
+      </span>
+    </button>
+  </div>
+</div>
+`;
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
index 60837ac1218e6..5b4de05da3a3d 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/__examples__/view_menu.stories.tsx
@@ -8,32 +8,58 @@ import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ViewMenu } from '../view_menu';
 
+const handlers = {
+  setZoomScale: action('setZoomScale'),
+  zoomIn: action('zoomIn'),
+  zoomOut: action('zoomOut'),
+  toggleWriteable: action('toggleWriteable'),
+  resetZoom: action('resetZoom'),
+  enterFullscreen: action('enterFullscreen'),
+  doRefresh: action('doRefresh'),
+  fitToWindow: action('fitToWindow'),
+  setRefreshInterval: action('setRefreshInterval'),
+  setAutoplayInterval: action('setAutoplayInterval'),
+  enableAutoplay: action('enableAutoplay'),
+};
+
 storiesOf('components/WorkpadHeader/ViewMenu', module)
   .add('edit mode', () => (
     <ViewMenu
       isWriteable={true}
       zoomScale={1}
-      setZoomScale={action('setZoomScale')}
-      zoomIn={action('zoomIn')}
-      zoomOut={action('zoomOut')}
-      toggleWriteable={action('toggleWriteable')}
-      resetZoom={action('resetZoom')}
-      enterFullscreen={action('enterFullscreen')}
-      doRefresh={action('doRefresh')}
-      fitToWindow={action('fitToWindow')}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
     />
   ))
   .add('read only mode', () => (
     <ViewMenu
       isWriteable={false}
       zoomScale={1}
-      setZoomScale={action('setZoomScale')}
-      zoomIn={action('zoomIn')}
-      zoomOut={action('zoomOut')}
-      toggleWriteable={action('toggleWriteable')}
-      resetZoom={action('resetZoom')}
-      enterFullscreen={action('enterFullscreen')}
-      doRefresh={action('doRefresh')}
-      fitToWindow={action('fitToWindow')}
+      refreshInterval={0}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
+    />
+  ))
+  .add('with refresh enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={1000}
+      autoplayInterval={0}
+      autoplayEnabled={false}
+      {...handlers}
+    />
+  ))
+  .add('with autoplay enabled', () => (
+    <ViewMenu
+      isWriteable={false}
+      zoomScale={1}
+      refreshInterval={0}
+      autoplayInterval={5000}
+      autoplayEnabled={true}
+      {...handlers}
     />
   ));
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
similarity index 83%
rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
index 97d8920d50dd3..cfd599b1d9f3f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/auto_refresh_controls.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/auto_refresh_controls.tsx
@@ -22,7 +22,6 @@ import {
   htmlIdGenerator,
 } from '@elastic/eui';
 import { timeDuration } from '../../../lib/time_duration';
-import { RefreshControl } from '../refresh_control';
 import { CustomInterval } from './custom_interval';
 
 import { ComponentStrings, UnitStrings } from '../../../../i18n';
@@ -69,7 +68,11 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
   const intervalTitleId = generateId();
 
   return (
-    <EuiFlexGroup direction="column" justifyContent="spaceBetween">
+    <EuiFlexGroup
+      direction="column"
+      justifyContent="spaceBetween"
+      className="canvasViewMenu__kioskSettings"
+    >
       <EuiFlexItem grow={false}>
         <EuiFlexGroup alignItems="center" justifyContent="spaceAround" gutterSize="xs">
           <EuiFlexItem>
@@ -97,9 +100,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
                   </EuiToolTip>
                 </EuiFlexItem>
               ) : null}
-              <EuiFlexItem grow={false}>
-                <RefreshControl />
-              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
@@ -112,16 +112,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
         <EuiSpacer size="s" />
         <EuiText size="s">
           <ListGroup aria-labelledby={intervalTitleId} className="canvasControlSettings__list">
-            <RefreshItem
-              duration={5000}
-              label={getSecondsText(5)}
-              descriptionId={intervalTitleId}
-            />
-            <RefreshItem
-              duration={15000}
-              label={getSecondsText(15)}
-              descriptionId={intervalTitleId}
-            />
             <RefreshItem
               duration={30000}
               label={getSecondsText(30)}
@@ -137,11 +127,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
               label={getMinutesText(5)}
               descriptionId={intervalTitleId}
             />
-            <RefreshItem
-              duration={900000}
-              label={getMinutesText(15)}
-              descriptionId={intervalTitleId}
-            />
             <RefreshItem
               duration={1800000}
               label={getMinutesText(30)}
@@ -152,16 +137,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
               label={getHoursText(1)}
               descriptionId={intervalTitleId}
             />
-            <RefreshItem
-              duration={7200000}
-              label={getHoursText(2)}
-              descriptionId={intervalTitleId}
-            />
-            <RefreshItem
-              duration={21600000}
-              label={getHoursText(6)}
-              descriptionId={intervalTitleId}
-            />
             <RefreshItem
               duration={43200000}
               label={getHoursText(12)}
@@ -175,7 +150,6 @@ export const AutoRefreshControls = ({ refreshInterval, setRefresh, disableInterv
           </ListGroup>
         </EuiText>
       </EuiFlexItem>
-
       <EuiFlexItem grow={false}>
         <CustomInterval onSubmit={value => setRefresh(value)} />
       </EuiFlexItem>
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
similarity index 100%
rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.tsx
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/custom_interval.tsx
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/index.ts b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/index.ts
index eee613183639c..e1ad9782c8aef 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/index.ts
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/index.ts
@@ -15,13 +15,21 @@ import { fetchAllRenderables } from '../../../state/actions/elements';
 // @ts-ignore Untyped local
 import { setZoomScale, setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
 // @ts-ignore Untyped local
-import { setWriteable } from '../../../state/actions/workpad';
+import {
+  setWriteable,
+  setRefreshInterval,
+  enableAutoplay,
+  setAutoplayInterval,
+  // @ts-ignore Untyped local
+} from '../../../state/actions/workpad';
 import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
 import {
   getWorkpadBoundingBox,
   getWorkpadWidth,
   getWorkpadHeight,
   isWriteable,
+  getRefreshInterval,
+  getAutoplay,
 } from '../../../state/selectors/workpad';
 import { ViewMenu as Component, Props as ComponentProps } from './view_menu';
 import { getFitZoomScale } from './lib/get_fit_zoom_scale';
@@ -40,24 +48,35 @@ interface DispatchProps {
   setFullscreen: (showFullscreen: boolean) => void;
 }
 
-const mapStateToProps = (state: State) => ({
-  zoomScale: getZoomScale(state),
-  boundingBox: getWorkpadBoundingBox(state),
-  workpadWidth: getWorkpadWidth(state),
-  workpadHeight: getWorkpadHeight(state),
-  isWriteable: isWriteable(state) && canUserWrite(state),
-});
+const mapStateToProps = (state: State) => {
+  const { enabled, interval } = getAutoplay(state);
+
+  return {
+    zoomScale: getZoomScale(state),
+    boundingBox: getWorkpadBoundingBox(state),
+    workpadWidth: getWorkpadWidth(state),
+    workpadHeight: getWorkpadHeight(state),
+    isWriteable: isWriteable(state) && canUserWrite(state),
+    refreshInterval: getRefreshInterval(state),
+    autoplayEnabled: enabled,
+    autoplayInterval: interval,
+  };
+};
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
   setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
   setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
   setFullscreen: (value: boolean) => {
     dispatch(setFullscreen(value));
+
     if (value) {
       dispatch(selectToplevelNodes([]));
     }
   },
   doRefresh: () => dispatch(fetchAllRenderables()),
+  setRefreshInterval: (interval: number) => dispatch(setRefreshInterval(interval)),
+  enableAutoplay: (autoplay: number) => dispatch(enableAutoplay(autoplay)),
+  setAutoplayInterval: (interval: number) => dispatch(setAutoplayInterval(interval)),
 });
 
 const mergeProps = (
@@ -66,13 +85,15 @@ const mergeProps = (
   ownProps: ComponentProps
 ): ComponentProps => {
   const { boundingBox, workpadWidth, workpadHeight, ...remainingStateProps } = stateProps;
+
   return {
     ...remainingStateProps,
     ...dispatchProps,
     ...ownProps,
     toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
     enterFullscreen: () => dispatchProps.setFullscreen(true),
-    fitToWindow: () => getFitZoomScale(boundingBox, workpadWidth, workpadHeight),
+    fitToWindow: () =>
+      dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
   };
 };
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
similarity index 86%
rename from x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx
rename to x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
index 9e6f0a91c6120..e63eed9f9df53 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/kiosk_controls.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/kiosk_controls.tsx
@@ -14,7 +14,6 @@ import {
   EuiHorizontalRule,
   EuiLink,
   EuiSpacer,
-  EuiSwitch,
   EuiText,
   EuiFlexItem,
   EuiFlexGroup,
@@ -29,9 +28,7 @@ const { time: timeStrings } = UnitStrings;
 const { getSecondsText, getMinutesText } = timeStrings;
 
 interface Props {
-  autoplayEnabled: boolean;
   autoplayInterval: number;
-  onSetEnabled: (enabled: boolean) => void;
   onSetInterval: (interval: number | undefined) => void;
 }
 
@@ -54,12 +51,7 @@ const ListGroup = ({ children, ...rest }: ListGroupProps) => (
 
 const generateId = htmlIdGenerator();
 
-export const KioskControls = ({
-  autoplayEnabled,
-  autoplayInterval,
-  onSetEnabled,
-  onSetInterval,
-}: Props) => {
+export const KioskControls = ({ autoplayInterval, onSetInterval }: Props) => {
   const RefreshItem = ({ duration, label, descriptionId }: RefreshItemProps) => (
     <li>
       <EuiLink onClick={() => onSetInterval(duration)} aria-describedby={descriptionId}>
@@ -72,7 +64,11 @@ export const KioskControls = ({
   const intervalTitleId = generateId();
 
   return (
-    <EuiFlexGroup direction="column" justifyContent="spaceBetween">
+    <EuiFlexGroup
+      direction="column"
+      justifyContent="spaceBetween"
+      className="canvasViewMenu__kioskSettings"
+    >
       <EuiFlexItem grow={false}>
         <EuiDescriptionList textStyle="reverse">
           <EuiDescriptionListTitle>{strings.getTitle()}</EuiDescriptionListTitle>
@@ -81,14 +77,6 @@ export const KioskControls = ({
           </EuiDescriptionListDescription>
         </EuiDescriptionList>
         <EuiHorizontalRule margin="m" />
-
-        <EuiSwitch
-          checked={autoplayEnabled}
-          label={strings.getCycleToggleSwitch()}
-          onChange={ev => onSetEnabled(ev.target.checked)}
-        />
-        <EuiSpacer size="m" />
-
         <EuiTitle size="xxxs" id={intervalTitleId}>
           <p>{strings.getCycleFormLabel()}</p>
         </EuiTitle>
@@ -137,8 +125,6 @@ export const KioskControls = ({
 };
 
 KioskControls.propTypes = {
-  autoplayEnabled: PropTypes.bool.isRequired,
   autoplayInterval: PropTypes.number.isRequired,
-  onSetEnabled: PropTypes.func.isRequired,
   onSetInterval: PropTypes.func.isRequired,
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.scss
new file mode 100644
index 0000000000000..c4e06881981c7
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.scss
@@ -0,0 +1,4 @@
+.canvasViewMenu__kioskSettings,
+.canvasViewMenu__refreshSettings {
+  padding: $euiSize;
+}
\ No newline at end of file
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
index d1e08c5809579..b6f108cda37f6 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
@@ -12,10 +12,16 @@ import {
   EuiIcon,
   EuiContextMenuPanelItemDescriptor,
 } from '@elastic/eui';
-import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from '../../../../common/lib/constants';
+import {
+  MAX_ZOOM_LEVEL,
+  MIN_ZOOM_LEVEL,
+  CONTEXT_MENU_TOP_BORDER_CLASSNAME,
+} from '../../../../common/lib/constants';
 import { ComponentStrings } from '../../../../i18n/components';
 import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
 import { Popover, ClosePopoverFn } from '../../popover';
+import { AutoRefreshControls } from './auto_refresh_controls';
+import { KioskControls } from './kiosk_controls';
 
 const { WorkpadHeaderViewMenu: strings } = ComponentStrings;
 
@@ -62,10 +68,33 @@ export interface Props {
    * triggers a refresh of the workpad
    */
   doRefresh: () => void;
+  /**
+   * Current auto refresh interval
+   */
+  refreshInterval: number;
+  /**
+   * Sets auto refresh interval
+   */
+  setRefreshInterval: (interval?: number) => void;
+  /**
+   * Is autoplay enabled?
+   */
+  autoplayEnabled: boolean;
+  /**
+   * Current autoplay interval
+   */
+  autoplayInterval: number;
+  /**
+   * Enables autoplay
+   */
+  enableAutoplay: (autoplay: boolean) => void;
+  /**
+   * Sets autoplay interval
+   */
+  setAutoplayInterval: (interval?: number) => void;
 }
 
 export const ViewMenu: FunctionComponent<Props> = ({
-  doRefresh,
   enterFullscreen,
   fitToWindow,
   isWriteable,
@@ -75,7 +104,20 @@ export const ViewMenu: FunctionComponent<Props> = ({
   zoomIn,
   zoomOut,
   zoomScale,
+  doRefresh,
+  refreshInterval,
+  setRefreshInterval,
+  autoplayEnabled,
+  autoplayInterval,
+  enableAutoplay,
+  setAutoplayInterval,
 }) => {
+  const setRefresh = (val: number | undefined) => setRefreshInterval(val);
+
+  const disableInterval = () => {
+    setRefresh(0);
+  };
+
   const viewControl = (togglePopover: React.MouseEventHandler<any>) => (
     <EuiButtonEmpty size="xs" aria-label={strings.getViewMenuLabel()} onClick={togglePopover}>
       {strings.getViewMenuButtonLabel()}
@@ -121,36 +163,76 @@ export const ViewMenu: FunctionComponent<Props> = ({
 
   const getPanelTree = (closePopover: ClosePopoverFn) => ({
     id: 0,
-    title: strings.getViewMenuLabel(),
     items: [
+      {
+        name: strings.getRefreshMenuItemLabel(),
+        icon: 'refresh',
+        onClick: () => {
+          doRefresh();
+        },
+      },
+      {
+        name: strings.getRefreshSettingsMenuItemLabel(),
+        icon: 'empty',
+        panel: {
+          id: 1,
+          title: strings.getRefreshSettingsMenuItemLabel(),
+          content: (
+            <AutoRefreshControls
+              refreshInterval={refreshInterval}
+              setRefresh={val => setRefresh(val)}
+              disableInterval={() => disableInterval()}
+            />
+          ),
+        },
+      },
       {
         name: strings.getFullscreenMenuItemLabel(),
         icon: <EuiIcon type="fullScreen" size="m" />,
+        className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
         onClick: () => {
           enterFullscreen();
           closePopover();
         },
       },
       {
-        name: isWriteable ? strings.getHideEditModeLabel() : strings.getShowEditModeLabel(),
-        icon: <EuiIcon type={isWriteable ? 'eyeClosed' : 'eye'} size="m" />,
+        name: autoplayEnabled
+          ? strings.getAutoplayOffMenuItemLabel()
+          : strings.getAutoplayOnMenuItemLabel(),
+        icon: autoplayEnabled ? 'stop' : 'play',
         onClick: () => {
-          toggleWriteable();
+          enableAutoplay(!autoplayEnabled);
           closePopover();
         },
       },
       {
-        name: strings.getRefreshMenuItemLabel(),
-        icon: 'refresh',
+        name: strings.getAutoplaySettingsMenuItemLabel(),
+        icon: 'empty',
+        panel: {
+          id: 2,
+          title: strings.getAutoplaySettingsMenuItemLabel(),
+          content: (
+            <KioskControls
+              autoplayInterval={autoplayInterval}
+              onSetInterval={setAutoplayInterval}
+            />
+          ),
+        },
+      },
+      {
+        name: isWriteable ? strings.getHideEditModeLabel() : strings.getShowEditModeLabel(),
+        icon: <EuiIcon type={isWriteable ? 'eyeClosed' : 'eye'} size="m" />,
+        className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
         onClick: () => {
-          doRefresh();
+          toggleWriteable();
+          closePopover();
         },
       },
       {
         name: strings.getZoomMenuItemLabel(),
         icon: 'magnifyWithPlus',
         panel: {
-          id: 1,
+          id: 3,
           title: strings.getZoomMenuItemLabel(),
           items: getZoomMenuItems(),
         },
@@ -161,7 +243,11 @@ export const ViewMenu: FunctionComponent<Props> = ({
   return (
     <Popover button={viewControl} panelPaddingSize="none" anchorPosition="downLeft">
       {({ closePopover }: { closePopover: ClosePopoverFn }) => (
-        <EuiContextMenu initialPanelId={0} panels={flattenPanelTree(getPanelTree(closePopover))} />
+        <EuiContextMenu
+          initialPanelId={0}
+          panels={flattenPanelTree(getPanelTree(closePopover))}
+          className="canvasViewMenu"
+        />
       )}
     </Popover>
   );
@@ -169,4 +255,19 @@ export const ViewMenu: FunctionComponent<Props> = ({
 
 ViewMenu.propTypes = {
   isWriteable: PropTypes.bool.isRequired,
+  zoomScale: PropTypes.number.isRequired,
+  fitToWindow: PropTypes.func.isRequired,
+  setZoomScale: PropTypes.func.isRequired,
+  zoomIn: PropTypes.func.isRequired,
+  zoomOut: PropTypes.func.isRequired,
+  resetZoom: PropTypes.func.isRequired,
+  toggleWriteable: PropTypes.func.isRequired,
+  enterFullscreen: PropTypes.func.isRequired,
+  doRefresh: PropTypes.func.isRequired,
+  refreshInterval: PropTypes.number.isRequired,
+  setRefreshInterval: PropTypes.func.isRequired,
+  autoplayEnabled: PropTypes.bool.isRequired,
+  autoplayInterval: PropTypes.number.isRequired,
+  enableAutoplay: PropTypes.func.isRequired,
+  setAutoplayInterval: PropTypes.func.isRequired,
 };
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx
index 5ff3030af8ad0..4aab8280a9f24 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/workpad_header.tsx
@@ -11,7 +11,6 @@ import { Shortcuts } from 'react-shortcuts';
 import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { ComponentStrings } from '../../../i18n';
 import { ToolTipShortcut } from '../tool_tip_shortcut/';
-import { ControlSettings } from './control_settings';
 // @ts-ignore untyped local
 import { RefreshControl } from './refresh_control';
 // @ts-ignore untyped local
@@ -109,9 +108,6 @@ export const WorkpadHeader: FunctionComponent<Props> = ({
           <EuiFlexItem grow={false}>
             <ShareMenu />
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ControlSettings />
-          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
@@ -128,7 +124,7 @@ export const WorkpadHeader: FunctionComponent<Props> = ({
             )}
             <EuiToolTip position="bottom" content={getEditToggleToolTip()}>
               <EuiButtonIcon
-                iconType={isWriteable ? 'eye' : 'eyeClosed'}
+                iconType={isWriteable ? 'eyeClosed' : 'eye'}
                 onClick={toggleWriteable}
                 size="s"
                 aria-label={getEditToggleToolTipText()}
diff --git a/x-pack/legacy/plugins/canvas/public/style/index.scss b/x-pack/legacy/plugins/canvas/public/style/index.scss
index ba0845862368a..7b4e1271cca1d 100644
--- a/x-pack/legacy/plugins/canvas/public/style/index.scss
+++ b/x-pack/legacy/plugins/canvas/public/style/index.scss
@@ -51,9 +51,9 @@
 @import '../components/toolbar/tray/tray';
 @import '../components/tooltip_annotation/tooltip_annotation';
 @import '../components/workpad/workpad';
-@import '../components/workpad_header/control_settings/control_settings';
 @import '../components/workpad_header/element_menu/element_menu';
 @import '../components/workpad_header/share_menu/share_menu';
+@import '../components/workpad_header/view_menu/view_menu';
 @import '../components/workpad_loader/workpad_loader';
 @import '../components/workpad_loader/workpad_dropzone/workpad_dropzone';
 @import '../components/workpad_page/workpad_page';
diff --git a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/autoplay_settings.tsx b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/autoplay_settings.tsx
index 628632a753693..1650cbad3a237 100644
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/autoplay_settings.tsx
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/autoplay_settings.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../../context';
 import { createTimeInterval } from '../../../../public/lib/time_interval';
 // @ts-ignore Untyped local
-import { CustomInterval } from '../../../../public/components/workpad_header/control_settings/custom_interval';
+import { CustomInterval } from '../../../../public/components/workpad_header/view_menu/custom_interval';
 
 export type onSetAutoplayFn = (autoplay: boolean) => void;
 export type onSetIntervalFn = (interval: string) => void;
diff --git a/x-pack/test/functional/page_objects/canvas_page.ts b/x-pack/test/functional/page_objects/canvas_page.ts
index 94ad393ead3a3..ce36385a2f9df 100644
--- a/x-pack/test/functional/page_objects/canvas_page.ts
+++ b/x-pack/test/functional/page_objects/canvas_page.ts
@@ -65,14 +65,12 @@ export function CanvasPageProvider({ getService }: FtrProviderContext) {
 
     async expectNoAddElementButton() {
       // Ensure page is fully loaded first by waiting for the refresh button
-      const refreshPopoverExists = await find.existsByCssSelector('#auto-refresh-popover', 20000);
+      const refreshPopoverExists = await testSubjects.exists('canvas-refresh-control', {
+        timeout: 20000,
+      });
       expect(refreshPopoverExists).to.be(true);
 
-      const addElementButtonExists = await find.existsByCssSelector(
-        'button[data-test-subj=add-element-button]',
-        10 // don't need much of a wait at all here, because we already waited for refresh button above
-      );
-      expect(addElementButtonExists).to.be(false);
+      await testSubjects.missingOrFail('add-element-button');
     },
   };
 }