diff --git a/webpack/assets/javascripts/react_app/components/Editor/Editor.js b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
index 62268efa96..a183d65289 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/Editor.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
@@ -1,8 +1,10 @@
-import React from 'react';
+/* eslint-disable max-lines */
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton, Button } from '@patternfly/react-core';
 
 import { noop } from '../../common/helpers';
+import { translate as __ } from '../../common/I18n';
 import DiffView from '../DiffView/DiffView';
 import EditorView from './components/EditorView';
 import EditorNavbar from './components/EditorNavbar';
@@ -14,20 +16,65 @@ import {
 } from './EditorConstants';
 import './editor.scss';
 
-class Editor extends React.Component {
-  componentDidMount() {
-    const {
-      data: { hosts, templateClass, locked, template, type, dslCache },
-      initializeEditor,
-      isMasked,
-      isRendering,
-      readOnly,
-      previewResult,
-      selectedView,
-      showError,
-    } = this.props;
+const Editor = ({
+  data: {
+    name,
+    hosts,
+    isSafemodeEnabled,
+    locked,
+    renderPath,
+    safemodeRenderPath,
+    showImport,
+    showPreview,
+    showHostSelector,
+    template,
+    templateClass,
+    title,
+    type,
+    dslCache,
+  },
+  changeDiffViewType,
+  changeEditorValue,
+  changeSetting,
+  changeTab,
+  diffViewType,
+  dismissErrorToast,
+  editorName,
+  errorText,
+  fetchAndPreview,
+  filteredHosts,
+  hosts: componentHosts,
+  importFile,
+  initializeEditor,
+  isFetchingHosts,
+  isLoading,
+  isMasked,
+  isMaximized,
+  isRendering,
+  isSearchingHosts,
+  keyBinding,
+  mode,
+  onHostSearch,
+  previewResult,
+  previewTemplate,
+  readOnly,
+  renderedEditorValue,
+  revertChanges,
+  selectedHost,
+  selectedView,
+  showError,
+  theme,
+  autocompletion,
+  liveAutocompletion,
+  toggleModal,
+  toggleRenderView,
+  value,
+  templateKindId,
+}) => {
+  const [safemode, setSafemode] = useState(isSafemodeEnabled);
 
-    const initializeData = {
+  useEffect(() => {
+    initializeEditor({
       hosts,
       isMasked,
       templateClass,
@@ -40,195 +87,170 @@ class Editor extends React.Component {
       template,
       type,
       dslCache,
-    };
-    initializeEditor(initializeData);
-  }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  render() {
-    const {
-      data: {
-        name,
-        isSafemodeEnabled,
-        renderPath,
-        safemodeRenderPath,
-        showImport,
-        showPreview,
-        showHostSelector,
-        template,
-        title,
-      },
-      changeDiffViewType,
-      changeEditorValue,
-      changeSetting,
-      changeTab,
-      diffViewType,
-      dismissErrorToast,
-      editorName,
-      errorText,
-      fetchAndPreview,
-      filteredHosts,
-      hosts,
-      importFile,
-      isFetchingHosts,
-      isLoading,
-      isMasked,
-      isMaximized,
-      isRendering,
-      isSearchingHosts,
-      isSelectOpen,
-      keyBinding,
-      mode,
-      onHostSearch,
-      onHostSelectToggle,
-      onSearchClear,
-      previewResult,
-      previewTemplate,
-      readOnly,
-      renderedEditorValue,
-      revertChanges,
-      searchQuery,
-      selectedHost,
-      selectedView,
-      showError,
-      theme,
-      autocompletion,
-      liveAutocompletion,
-      toggleModal,
-      toggleRenderView,
-      value,
+  const handleSafeModeChange = ({ currentTarget: { checked } }) => {
+    const newRenderPath = checked ? safemodeRenderPath : renderPath;
+
+    setSafemode(checked);
+    previewTemplate({
+      host: selectedHost,
+      renderPath: newRenderPath,
       templateKindId,
-    } = this.props;
+    });
+  };
 
-    const editorViewProps = {
-      value: isRendering ? previewResult : value,
-      mode: isRendering ? 'Text' : mode,
-      theme,
-      autocompletion,
-      liveAutocompletion,
-      keyBinding,
-      onChange: isRendering ? noop : changeEditorValue,
-      readOnly: readOnly || isRendering,
-      isMasked,
-    };
-    const editorNameTab = {
-      input: `${editorName}Code`,
-      preview: `${editorName}Preview`,
-    };
+  const editorViewProps = {
+    value: isRendering ? previewResult : value,
+    mode: isRendering ? 'Text' : mode,
+    theme,
+    autocompletion,
+    liveAutocompletion,
+    keyBinding,
+    onChange: isRendering ? noop : changeEditorValue,
+    readOnly: readOnly || isRendering,
+    isMasked,
+  };
+  const editorNameTab = {
+    input: `${editorName}Code`,
+    preview: `${editorName}Preview`,
+  };
+  const selectedRenderPath = safemode ? safemodeRenderPath : renderPath;
 
-    return (
-      <div id="editor-container">
-        <Alert
-          id="preview_error_toast"
-          ouiaId="preview_error_toast"
-          variant="danger"
-          className={showError ? '' : 'hidden'}
-          actionClose={
-            <AlertActionCloseButton
-              className="close"
-              onClose={() => dismissErrorToast()}
-            />
-          }
-          title={errorText}
-        />
-        <EditorNavbar
-          changeDiffViewType={changeDiffViewType}
-          changeTab={changeTab}
-          changeSetting={changeSetting}
-          modes={EDITOR_MODES}
-          themes={EDITOR_THEMES}
-          keyBindings={EDITOR_KEYBINDINGS}
-          mode={isRendering ? 'Text' : mode}
-          theme={theme}
-          keyBinding={keyBinding}
-          autocompletion={autocompletion}
-          liveAutocompletion={liveAutocompletion}
-          value={value}
-          templateKindId={templateKindId}
-          renderedEditorValue={renderedEditorValue}
-          diffViewType={diffViewType}
-          template={template}
-          selectedView={selectedView}
-          isDiff={template ? value !== template : false}
-          isRendering={isRendering}
-          isLoading={isLoading}
-          isFetchingHosts={isFetchingHosts}
-          isSearchingHosts={isSearchingHosts}
-          importFile={importFile}
-          showImport={showImport}
-          showPreview={showPreview}
-          showHostSelector={showHostSelector}
-          revertChanges={revertChanges}
-          previewTemplate={previewTemplate}
-          hosts={hosts}
-          filteredHosts={filteredHosts}
-          selectedHost={selectedHost}
-          isSafemodeEnabled={isSafemodeEnabled}
-          renderPath={renderPath}
-          safemodeRenderPath={safemodeRenderPath}
-          toggleRenderView={toggleRenderView}
-          toggleModal={toggleModal}
-          previewResult={previewResult}
-          searchQuery={searchQuery}
-          onHostSelectToggle={onHostSelectToggle}
-          onHostSearch={onHostSearch}
-          onSearchClear={onSearchClear}
-          isSelectOpen={isSelectOpen}
-          showError={showError}
-          fetchAndPreview={fetchAndPreview}
-        />
-        <EditorView
-          {...editorViewProps}
-          key="editorPreview"
-          name={editorNameTab.preview}
-          isSelected={selectedView === 'preview'}
-          className="ace_editor_form ace_preview"
-        />
-        <EditorView
-          {...editorViewProps}
-          key="editorCode"
-          name={editorNameTab.input}
-          isSelected={selectedView === 'input'}
-          className="ace_editor_form ace_input"
-        />
-        <div
-          id="diff-table"
-          className={selectedView === 'diff' ? '' : 'hidden'}
-        >
-          <DiffView
-            oldText={template || ''}
-            newText={value}
-            viewType={diffViewType}
+  return (
+    <div id="editor-container">
+      <Alert
+        id="preview_error_toast"
+        ouiaId="preview_error_toast"
+        variant="danger"
+        className={showError ? '' : 'hidden'}
+        actionClose={
+          <AlertActionCloseButton
+            className="close"
+            onClose={() => dismissErrorToast()}
+          />
+        }
+        title={errorText}
+      />
+      {selectedView === 'preview' &&
+        previewResult !== '' &&
+        renderedEditorValue !== value && (
+          <Alert
+            variant="warning"
+            ouiaId="editor-outdated-preview-alert"
+            title={
+              <>
+                {__('Preview is outdated.')}
+                <Button
+                  variant="link"
+                  isInline
+                  ouiaId="editor-refresh-preview-btn"
+                  onClick={() =>
+                    previewTemplate({
+                      host: selectedHost,
+                      renderPath: selectedRenderPath,
+                      templateKindId,
+                    })
+                  }
+                >
+                  {__('Preview')}
+                </Button>
+              </>
+            }
           />
-        </div>
-        <EditorModal
-          key="editorModal"
-          changeEditorValue={changeEditorValue}
-          changeDiffViewType={changeDiffViewType}
-          name={editorName}
-          title={title}
-          toggleModal={toggleModal}
-          diffViewType={diffViewType}
-          mode={mode}
-          theme={theme}
-          autocompletion={autocompletion}
-          liveAutocompletion={liveAutocompletion}
-          keyBinding={keyBinding}
-          readOnly={readOnly}
-          isMaximized={isMaximized}
-          template={template || ''}
-          editorValue={value}
-          previewValue={previewResult}
-          selectedView={selectedView}
-          isMasked={isMasked}
-          isRendering={isRendering}
-        />
-        {!readOnly && (
-          <textarea className="hidden" name={name} value={value} readOnly />
         )}
+      <EditorNavbar
+        changeDiffViewType={changeDiffViewType}
+        changeTab={changeTab}
+        changeSetting={changeSetting}
+        modes={EDITOR_MODES}
+        themes={EDITOR_THEMES}
+        keyBindings={EDITOR_KEYBINDINGS}
+        mode={isRendering ? 'Text' : mode}
+        theme={theme}
+        keyBinding={keyBinding}
+        autocompletion={autocompletion}
+        liveAutocompletion={liveAutocompletion}
+        value={value}
+        templateKindId={templateKindId}
+        diffViewType={diffViewType}
+        template={template}
+        selectedView={selectedView}
+        isDiff={template ? value !== template : false}
+        isRendering={isRendering}
+        isLoading={isLoading}
+        isFetchingHosts={isFetchingHosts}
+        isSearchingHosts={isSearchingHosts}
+        importFile={importFile}
+        showImport={showImport}
+        showPreview={showPreview}
+        showHostSelector={showHostSelector}
+        revertChanges={revertChanges}
+        previewTemplate={previewTemplate}
+        hosts={componentHosts}
+        filteredHosts={filteredHosts}
+        selectedHost={selectedHost}
+        isSafemodeEnabled={isSafemodeEnabled}
+        renderPath={renderPath}
+        toggleRenderView={toggleRenderView}
+        toggleModal={toggleModal}
+        safemode={safemode}
+        selectedRenderPath={selectedRenderPath}
+        handleSafeModeChange={handleSafeModeChange}
+        onHostSearch={onHostSearch}
+        fetchAndPreview={fetchAndPreview}
+      />
+      <EditorView
+        {...editorViewProps}
+        key="editorPreview"
+        name={editorNameTab.preview}
+        isSelected={selectedView === 'preview'}
+        className="ace_editor_form ace_preview"
+      />
+      <EditorView
+        {...editorViewProps}
+        key="editorCode"
+        name={editorNameTab.input}
+        isSelected={selectedView === 'input'}
+        className="ace_editor_form ace_input"
+      />
+      <div id="diff-table" className={selectedView === 'diff' ? '' : 'hidden'}>
+        <DiffView
+          oldText={template || ''}
+          newText={value}
+          viewType={diffViewType}
+        />
       </div>
-    );
-  }
-}
+      <EditorModal
+        key="editorModal"
+        changeEditorValue={changeEditorValue}
+        changeDiffViewType={changeDiffViewType}
+        name={editorName}
+        title={title}
+        toggleModal={toggleModal}
+        diffViewType={diffViewType}
+        mode={mode}
+        theme={theme}
+        autocompletion={autocompletion}
+        liveAutocompletion={liveAutocompletion}
+        keyBinding={keyBinding}
+        readOnly={readOnly}
+        isMaximized={isMaximized}
+        template={template || ''}
+        editorValue={value}
+        previewValue={previewResult}
+        selectedView={selectedView}
+        isMasked={isMasked}
+        isRendering={isRendering}
+      />
+      {!readOnly && (
+        <textarea className="hidden" name={name} value={value} readOnly />
+      )}
+    </div>
+  );
+};
 
 Editor.propTypes = {
   data: PropTypes.shape({
@@ -284,11 +306,7 @@ Editor.propTypes = {
   value: PropTypes.string.isRequired,
   templateKindId: PropTypes.string,
   renderedEditorValue: PropTypes.string.isRequired,
-  isSelectOpen: PropTypes.bool.isRequired,
-  searchQuery: PropTypes.string.isRequired,
-  onHostSelectToggle: PropTypes.func.isRequired,
   onHostSearch: PropTypes.func.isRequired,
-  onSearchClear: PropTypes.func.isRequired,
   isSearchingHosts: PropTypes.bool.isRequired,
   fetchAndPreview: PropTypes.func.isRequired,
 };
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
index 2a741625fc..08cd490388 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
@@ -1,107 +1,172 @@
 import React from 'react';
-import { act } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { rtlHelpers } from '../../../common/rtlTestHelpers';
+
 import Editor from '../Editor';
 import { editorOptions } from '../Editor.fixtures';
 
-const didMountStubs = () => ({
-  changeState: jest.fn(),
-  importFile: jest.fn(),
-  revertChanges: jest.fn(),
-  previewTemplate: jest.fn(),
-  initializeEditor: jest.fn(),
-});
+const { renderWithI18n } = rtlHelpers;
+
+const renderEditor = (props = {}) => {
+  const initializeEditor = jest.fn();
 
-const fixtures = {
-  'renders editor': editorOptions,
+  return {
+    initializeEditor,
+    ...renderWithI18n(
+      <Editor {...editorOptions} initializeEditor={initializeEditor} {...props} />
+    ),
+  };
 };
 
 describe('Editor', () => {
-  jest.useFakeTimers();
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(Editor, fixtures));
-
-  describe('triggering', () => {
-    it('should trigger input view', async () => {
-      const props = { ...editorOptions, ...didMountStubs() };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(0)
-          .hasClass('active')
-      ).toBe(true);
+  it('renders editor tabs', async () => {
+    renderEditor();
+
+    expect(await screen.findByRole('tab', { name: 'Editor' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Changes' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Preview' })).toBeInTheDocument();
+  });
+
+  it('calls initializeEditor on mount', async () => {
+    const { initializeEditor } = renderEditor();
+
+    await screen.findByRole('tab', { name: 'Editor' });
+
+    expect(initializeEditor).toHaveBeenCalledTimes(1);
+    expect(initializeEditor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        selectedView: editorOptions.selectedView,
+        template: editorOptions.data.template,
+      })
+    );
+  });
+
+  it('selects the input tab by default', async () => {
+    renderEditor({ selectedView: 'input' });
+
+    expect(await screen.findByRole('tab', { name: 'Editor' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+  });
+
+  it('selects the diff tab when diff view is active', async () => {
+    renderEditor({ selectedView: 'diff' });
+
+    expect(await screen.findByRole('tab', { name: 'Changes' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+  });
+
+  it('selects the preview tab when preview view is active', async () => {
+    renderEditor({ selectedView: 'preview', isRendering: true });
+
+    expect(await screen.findByRole('tab', { name: 'Preview' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+  });
+
+  it('shows the diff table when diff view is active', async () => {
+    renderEditor({
+      selectedView: 'diff',
+      data: { ...editorOptions.data, template: 'old template' },
+      value: 'new value',
     });
-    it('should trigger input view with no template', async () => {
-      const props = {
-        ...editorOptions,
-        ...didMountStubs(),
-        data: { ...editorOptions.data, template: null },
-      };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(component.props().template).toBe('<? />');
+
+    expect(await screen.findByRole('tab', { name: 'Changes' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    expect(screen.getByText('old template')).toBeInTheDocument();
+    expect(screen.getAllByText('new value').length).toBeGreaterThan(0);
+  });
+
+  it('shows outdated preview warning', async () => {
+    renderEditor({
+      selectedView: 'preview',
+      previewResult: 'rendered preview',
+      renderedEditorValue: 'old rendered value',
+      value: 'current value',
     });
-    it('should trigger diff view', async () => {
-      const props = {
-        ...editorOptions,
-        ...didMountStubs(),
-        selectedView: 'diff',
-      };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(1)
-          .hasClass('active')
-      ).toBe(true);
+
+    expect(await screen.findByText('Preview is outdated.')).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: 'Preview' })
+    ).toBeInTheDocument();
+  });
+
+  it('refreshes preview when outdated preview link is clicked', async () => {
+    const previewTemplate = jest.fn();
+
+    renderEditor({
+      previewTemplate,
+      selectedView: 'preview',
+      previewResult: 'rendered preview',
+      renderedEditorValue: 'old rendered value',
+      value: 'current value',
+      selectedHost: { id: '1', name: 'host1' },
+      data: {
+        ...editorOptions.data,
+        safemodeRenderPath: '/safemode/path',
+      },
     });
-    it('should trigger preview view', async () => {
-      const props = {
-        ...editorOptions,
-        ...didMountStubs(),
-        selectedView: 'preview',
-        isRendering: true,
-      };
-      const wrapper = mount(<Editor {...props} />);
-      wrapper.find('button.close').simulate('click');
-      await act(async () => jest.advanceTimersByTime(1000));
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(2)
-          .hasClass('active')
-      ).toBe(true);
+
+    userEvent.click(
+      await screen.findByRole('button', { name: 'Preview' })
+    );
+
+    expect(previewTemplate).toHaveBeenCalledWith({
+      host: { id: '1', name: 'host1' },
+      renderPath: '/safemode/path',
+      templateKindId: '',
     });
   });
-  it('should trigger hidden value editor', async () => {
-    const props = {
-      ...editorOptions,
-      ...didMountStubs(),
-      selectedView: 'preview',
-      isRendering: true,
-      isMasked: true,
-    };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('.mask-editor').exists()).toBe(true);
+
+  it('dismisses the preview error toast', async () => {
+    const dismissErrorToast = jest.fn();
+
+    renderEditor({ dismissErrorToast, showError: true, errorText: 'Preview failed' });
+
+    userEvent.click(await screen.findByRole('button', { name: /Close/i }));
+
+    expect(dismissErrorToast).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders the hidden value textarea when editable', async () => {
+    renderEditor({ readOnly: false, value: 'editor value' });
+
+    await screen.findByRole('tab', { name: 'Editor' });
+
+    expect(screen.getByDisplayValue('editor value')).toBeInTheDocument();
   });
-  it('textarea disappears if readOnly', async () => {
-    const props = {
-      ...editorOptions,
-      ...didMountStubs(),
-      selectedView: 'input',
-    };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('textarea.hidden').exists()).toBe(true);
-    wrapper.setProps({ readOnly: true });
-    expect(wrapper.find('textarea.hidden').exists()).toBe(false);
+
+  it('hides the value textarea when read only', async () => {
+    const initializeEditor = jest.fn();
+    const { rerender } = renderWithI18n(
+      <Editor
+        {...editorOptions}
+        initializeEditor={initializeEditor}
+        readOnly={false}
+        value="editor value"
+      />
+    );
+
+    await screen.findByRole('tab', { name: 'Editor' });
+    expect(screen.getByDisplayValue('editor value')).toBeInTheDocument();
+
+    rerender(
+      <Editor
+        {...editorOptions}
+        initializeEditor={initializeEditor}
+        readOnly
+        value="editor value"
+      />
+    );
+
+    expect(screen.queryByDisplayValue('editor value')).not.toBeInTheDocument();
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap
deleted file mode 100644
index 8ca4bdb24e..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap
+++ /dev/null
@@ -1,173 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor rendering renders editor 1`] = `
-<div
-  id="editor-container"
->
-  <Alert
-    actionClose={
-      <AlertActionCloseButton
-        className="close"
-        onClose={[Function]}
-      />
-    }
-    className=""
-    id="preview_error_toast"
-    ouiaId="preview_error_toast"
-    title=""
-    variant="danger"
-  />
-  <EditorNavbar
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeSetting={[Function]}
-    changeTab={[Function]}
-    diffViewType="split"
-    fetchAndPreview={[Function]}
-    filteredHosts={Array []}
-    hosts={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    importFile={[Function]}
-    isDiff={true}
-    isFetchingHosts={false}
-    isLoading={false}
-    isRendering={false}
-    isSafemodeEnabled={true}
-    isSearchingHosts={false}
-    isSelectOpen={false}
-    keyBinding="Default"
-    keyBindings={
-      Array [
-        "Default",
-        "Emacs",
-        "Vim",
-      ]
-    }
-    liveAutocompletion={false}
-    mode="Ruby"
-    modes={
-      Array [
-        "Text",
-        "Json",
-        "Ruby",
-        "Html_ruby",
-        "Sh",
-        "Xml",
-        "Yaml",
-      ]
-    }
-    onHostSearch={[Function]}
-    onHostSelectToggle={[Function]}
-    onSearchClear={[Function]}
-    previewResult="previewResult"
-    previewTemplate={[Function]}
-    renderPath="/render/path"
-    renderedEditorValue="renderedEditorValue"
-    revertChanges={[Function]}
-    safemodeRenderPath="/safemoderender/path"
-    searchQuery=""
-    selectedHost={
-      Object {
-        "id": "",
-        "name": "",
-      }
-    }
-    selectedView="input"
-    showError={true}
-    showHostSelector={true}
-    showImport={true}
-    showPreview={true}
-    template="<? />"
-    templateKindId=""
-    theme="Monokai"
-    themes={
-      Array [
-        "Github",
-        "Monokai",
-      ]
-    }
-    toggleModal={[Function]}
-    toggleRenderView={[Function]}
-    value="value"
-  />
-  <EditorView
-    autocompletion={true}
-    className="ace_editor_form ace_preview"
-    isMasked={false}
-    isSelected={false}
-    key="editorPreview"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editorPreview"
-    onChange={[Function]}
-    readOnly={false}
-    theme="Monokai"
-    value="value"
-  />
-  <EditorView
-    autocompletion={true}
-    className="ace_editor_form ace_input"
-    isMasked={false}
-    isSelected={true}
-    key="editorCode"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editorCode"
-    onChange={[Function]}
-    readOnly={false}
-    theme="Monokai"
-    value="value"
-  />
-  <div
-    className="hidden"
-    id="diff-table"
-  >
-    <DiffView
-      newText="value"
-      oldText="<? />"
-      patch=""
-      viewType="split"
-    />
-  </div>
-  <EditorModal
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeEditorValue={[Function]}
-    diffViewType="split"
-    editorValue="value"
-    isMasked={false}
-    isMaximized={false}
-    isRendering={false}
-    key="editorModal"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editor"
-    previewValue="previewResult"
-    readOnly={false}
-    selectedView="input"
-    template="<? />"
-    theme="Monokai"
-    title="title"
-    toggleModal={[Function]}
-  />
-  <textarea
-    className="hidden"
-    name="editor"
-    readOnly={true}
-    value="value"
-  />
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
index bc30f74c52..6bacf8842d 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
@@ -8,6 +8,12 @@ import * as EditorActions from '../EditorActions'
 
 jest.mock('../../../redux/API');
 
+const expectTabSelected = (component, ouiaId) => {
+  expect(
+    component.find(`[data-ouia-component-id="${ouiaId}"]`).prop('aria-selected')
+  ).toBe(true);
+};
+
 describe('Editor integration test', () => {
   it('should flow', () => {
     jest
@@ -21,18 +27,14 @@ describe('Editor integration test', () => {
     );
     integrationTestHelper.takeStoreSnapshot('initial state');
 
-    const previewBtn = component.find('#preview-navitem').at(1);
+    const previewBtn = component.find('[data-ouia-component-id="preview-navitem"]');
     previewBtn.simulate('click');
+    component.update();
 
     integrationTestHelper.takeStoreAndLastActionSnapshot(
       'switched to preview view'
     );
-    expect(
-      component
-        .find('li[role="presentation"]')
-        .at(2)
-        .hasClass('active')
-    ).toBe(true);
+    expectTabSelected(component, 'preview-navitem');
 
     IntegrationTestHelper.flushAllPromises();
     component.update();
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
index e17fa975f3..e533960a3a 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
@@ -1,10 +1,9 @@
 /* eslint-disable max-lines */
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Nav, Spinner, Alert, Button } from 'patternfly-react';
+import { Spinner, Tab, Tabs, TabTitleText } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
 import AutocompleteInput from '../../common/AutocompleteInput/AutocompleteInput';
-import EditorRadioButton from './EditorRadioButton';
 import EditorOptions from './EditorOptions';
 import EditorSafemodeCheckbox from './EditorSafemodeCheckbox';
 
@@ -28,7 +27,6 @@ const EditorNavbar = ({
   previewTemplate,
   isSafemodeEnabled,
   renderPath,
-  safemodeRenderPath,
   revertChanges,
   selectedHost,
   selectedView,
@@ -44,28 +42,12 @@ const EditorNavbar = ({
   toggleRenderView,
   value,
   templateKindId,
-  renderedEditorValue,
-  previewResult,
-  searchQuery,
-  onHostSelectToggle,
   onHostSearch,
-  onSearchClear,
-  isSelectOpen,
-  showError,
   fetchAndPreview,
+  safemode,
+  selectedRenderPath,
+  handleSafeModeChange,
 }) => {
-  const [safemode, setSafemode] = useState(isSafemodeEnabled);
-  const handleSafeModeChange = ({ currentTarget: { checked: newChecked } }) => {
-    setSafemode(newChecked);
-    const newRenderPath = newChecked ? safemodeRenderPath : renderPath;
-    previewTemplate({
-      host: selectedHost,
-      renderPath: newRenderPath,
-      templateKindId,
-    });
-  };
-  const selectedRenderPath = safemode ? safemodeRenderPath : renderPath;
-
   const hostOptions = useMemo(() => {
     const pool = isSearchingHosts ? filteredHosts : hosts;
     const mapped = Array.from(pool, h => ({
@@ -107,50 +89,63 @@ const EditorNavbar = ({
     }
   };
 
+  const handleTabSelect = (event, tabKey) => {
+    if (tabKey === selectedView) {
+      return;
+    }
+
+    if (tabKey === 'input') {
+      if (isRendering) toggleRenderView();
+      changeTab('input');
+      return;
+    }
+
+    if (tabKey === 'diff') {
+      changeTab('diff');
+      return;
+    }
+
+    if (tabKey === 'preview') {
+      if (!isRendering) toggleRenderView();
+      changeTab('preview');
+      if (selectedHost.id === '') {
+        fetchAndPreview(selectedRenderPath, templateKindId, !showHostSelector);
+      }
+    }
+  };
+
   return (
     <div className="navbar navbar-form navbar-full-width navbar-editor">
-      <Nav className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
-        <EditorRadioButton
-          stateView={selectedView}
-          btnView="input"
-          title={__('Editor')}
-          onClick={() => {
-            if (selectedView !== 'input') {
-              if (isRendering) toggleRenderView();
-              changeTab('input');
-            }
-          }}
-        />
-        <EditorRadioButton
-          stateView={selectedView}
-          disabled={!isDiff}
-          btnView="diff"
-          title={__('Changes')}
-          onClick={() => {
-            if (selectedView !== 'diff') {
-              changeTab('diff');
-            }
-          }}
-        />
+      <div className="editor-navbar-tabs-row">
+        <Tabs
+          activeKey={selectedView}
+          onSelect={handleTabSelect}
+          ouiaId="editor-navbar-tabs"
+        >
+          <Tab
+            eventKey="input"
+            title={<TabTitleText>{__('Editor')}</TabTitleText>}
+            id="input-navitem"
+            ouiaId="input-navitem"
+          />
+          <Tab
+            eventKey="diff"
+            title={<TabTitleText>{__('Changes')}</TabTitleText>}
+            isDisabled={!isDiff}
+            id="diff-navitem"
+            ouiaId="diff-navitem"
+          />
+          {showPreview && (
+            <Tab
+              eventKey="preview"
+              title={<TabTitleText>{__('Preview')}</TabTitleText>}
+              id="preview-navitem"
+              ouiaId="preview-navitem"
+            />
+          )}
+        </Tabs>
         {showPreview && (
           <>
-            <EditorRadioButton
-              stateView={selectedView}
-              btnView="preview"
-              title={__('Preview')}
-              onClick={() => {
-                if (selectedView !== 'preview') {
-                  if (!isRendering) toggleRenderView();
-                  changeTab('preview');
-                  if (selectedHost.id === '')
-                    fetchAndPreview(
-                      selectedRenderPath,
-                      templateKindId,
-                      !showHostSelector
-                    );
-                }
-              }}
-            />
             {showHostSelector && selectedView === 'preview' && (
               <>
                 <AutocompleteInput
@@ -170,9 +165,7 @@ const EditorNavbar = ({
                   allowClear={false}
                 />
                 {isFetchingHosts && (
-                  <div id="editor-host-fetch-spinner">
-                    <Spinner size="sm" loading />
-                  </div>
+                  <Spinner size="sm" aria-label={__('Loading')} isInline />
                 )}
               </>
             )}
@@ -182,35 +175,12 @@ const EditorNavbar = ({
               disabled={isSafemodeEnabled}
               handleSafeModeChange={handleSafeModeChange}
             />
-            {selectedView === 'preview' &&
-              previewResult !== '' &&
-              renderedEditorValue !== value && (
-                <div id="outdated-preview-alert">
-                  <Alert type="warning">
-                    {__('Preview is outdated.')}
-                    <Button
-                      bsStyle="link"
-                      onClick={() =>
-                        previewTemplate({
-                          host: selectedHost,
-                          renderPath: selectedRenderPath,
-                          templateKindId,
-                        })
-                      }
-                    >
-                      {__('Preview')}
-                    </Button>
-                  </Alert>
-                </div>
-              )}
             {isLoading && (
-              <div id="preview-spinner">
-                <Spinner size="sm" loading />
-              </div>
+              <Spinner size="sm" aria-label={__('Loading')} isInline />
             )}
           </>
         )}
-      </Nav>
+      </div>
       <EditorOptions
         hosts={hosts}
         value={value}
@@ -256,7 +226,6 @@ EditorNavbar.propTypes = {
   isLoading: PropTypes.bool.isRequired,
   isRendering: PropTypes.bool.isRequired,
   isSearchingHosts: PropTypes.bool.isRequired,
-  isSelectOpen: PropTypes.bool.isRequired,
   keyBinding: PropTypes.string.isRequired,
   keyBindings: PropTypes.array.isRequired,
   autocompletion: PropTypes.bool.isRequired,
@@ -264,22 +233,18 @@ EditorNavbar.propTypes = {
   mode: PropTypes.string.isRequired,
   modes: PropTypes.array.isRequired,
   onHostSearch: PropTypes.func.isRequired,
-  onHostSelectToggle: PropTypes.func.isRequired,
-  onSearchClear: PropTypes.func.isRequired,
-  previewResult: PropTypes.string.isRequired,
   previewTemplate: PropTypes.func.isRequired,
-  renderedEditorValue: PropTypes.string.isRequired,
+  safemode: PropTypes.bool.isRequired,
+  selectedRenderPath: PropTypes.string.isRequired,
+  handleSafeModeChange: PropTypes.func.isRequired,
   isSafemodeEnabled: PropTypes.bool.isRequired,
   renderPath: PropTypes.string,
-  safemodeRenderPath: PropTypes.string,
   revertChanges: PropTypes.func.isRequired,
-  searchQuery: PropTypes.string.isRequired,
   selectedHost: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     name: PropTypes.string,
   }).isRequired,
   selectedView: PropTypes.string.isRequired,
-  showError: PropTypes.bool.isRequired,
   showImport: PropTypes.bool.isRequired,
   showPreview: PropTypes.bool.isRequired,
   showHostSelector: PropTypes.bool,
@@ -296,7 +261,6 @@ EditorNavbar.defaultProps = {
   hosts: [],
   filteredHosts: [],
   renderPath: '',
-  safemodeRenderPath: '',
   template: '',
   showHostSelector: true,
   templateKindId: '',
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
deleted file mode 100644
index 9d67ea08c8..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { NavItem } from 'patternfly-react';
-
-const EditorRadioButton = ({
-  btnView,
-  disabled,
-  icon,
-  onClick,
-  stateView,
-  title,
-}) => (
-  <NavItem
-    disabled={disabled}
-    active={stateView === btnView}
-    id={`${btnView}-navitem`}
-    onClick={onClick}
-  >
-    {icon}
-    {icon ? ` ${title}` : title}
-  </NavItem>
-);
-
-EditorRadioButton.propTypes = {
-  btnView: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  icon: PropTypes.node,
-  onClick: PropTypes.func.isRequired,
-  stateView: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-EditorRadioButton.defaultProps = {
-  icon: null,
-  disabled: false,
-};
-
-export default EditorRadioButton;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
index cf31ddd9b8..2f52e68fda 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { translate as __ } from '../../../common/I18n';
-import './editorsafemodecheckbox.scss';
 
 const EditorSafemodeCheckbox = ({
   show,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
index 04ca650440..47530395d7 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
@@ -1,54 +1,84 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { rtlHelpers } from '../../../../common/rtlTestHelpers';
 
 import EditorNavbar from '../EditorNavbar';
 import { editorOptions, showBooleans } from '../../Editor.fixtures';
 
+const { renderWithI18n } = rtlHelpers;
+
 const { data: editorOptionsData, ...restEditorOptions } = editorOptions;
 
-const props = {
+const defaultProps = {
   ...editorOptionsData,
   ...restEditorOptions,
   ...showBooleans,
   isDiff: true,
+  safemode: editorOptionsData.isSafemodeEnabled,
+  selectedRenderPath: editorOptionsData.safemodeRenderPath,
+  handleSafeModeChange: jest.fn(),
 };
 
-const fixtures = {
-  'renders EditorNavbar': props,
-};
+const renderNavbar = (props = {}) =>
+  renderWithI18n(<EditorNavbar {...defaultProps} {...props} />);
 
 describe('EditorNavbar', () => {
-  describe('rendring', () =>
-    testComponentSnapshotsWithFixtures(EditorNavbar, fixtures));
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
-  describe('simulate onClick', () => {
-    const changeTab = jest.fn();
+  it('renders editor tabs', async () => {
+    renderNavbar();
+
+    expect(await screen.findByRole('tab', { name: 'Editor' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Changes' })).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Preview' })).toBeInTheDocument();
+  });
+
+  it('disables changes tab when there is no diff', async () => {
+    renderNavbar({ isDiff: false });
 
-    const wrapper = mount(
-      <EditorNavbar
-        {...props}
-        changeTab={changeTab}
-        isDiff
-        isRendering
-        selectedView="preview"
-      />
+    expect(await screen.findByRole('tab', { name: 'Changes' })).toHaveAttribute(
+      'aria-disabled',
+      'true'
     );
-    wrapper
-      .find('#input-navitem')
-      .at(1)
-      .simulate('click');
-    wrapper
-      .find('#diff-navitem')
-      .at(1)
-      .simulate('click');
-
-    wrapper.setProps({ ...props, isRendering: false, selectedView: 'input' });
-    wrapper.update();
-    wrapper
-      .find('#preview-navitem')
-      .at(1)
-      .simulate('click');
+  });
+
+  it('switches tabs on click', async () => {
+    const changeTab = jest.fn();
+    const toggleRenderView = jest.fn();
+
+    renderNavbar({
+      changeTab,
+      toggleRenderView,
+      selectedView: 'preview',
+      isRendering: true,
+    });
+
+    userEvent.click(await screen.findByRole('tab', { name: 'Editor' }));
+    userEvent.click(screen.getByRole('tab', { name: 'Changes' }));
+
     expect(changeTab).toHaveBeenCalledTimes(2);
+    expect(changeTab).toHaveBeenNthCalledWith(1, 'input');
+    expect(changeTab).toHaveBeenNthCalledWith(2, 'diff');
+    expect(toggleRenderView).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows host filter on preview tab', async () => {
+    renderNavbar({ selectedView: 'preview' });
+
+    expect(
+      await screen.findByPlaceholderText('Filter Host...')
+    ).toBeInTheDocument();
+  });
+
+  it('shows preview loading spinner', async () => {
+    renderNavbar({ selectedView: 'preview', isLoading: true });
+
+    await screen.findByRole('tab', { name: 'Preview' });
+
+    expect(screen.getAllByLabelText('Loading')).not.toHaveLength(0);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
deleted file mode 100644
index a10b0dc25c..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
-import { noop } from '../../../../common/helpers';
-
-import EditorRadioButton from '../EditorRadioButton';
-import { editor } from '../../Editor.fixtures';
-
-const fixtures = {
-  'renders EditorRadioButton': {
-    stateView: editor.selectedView,
-    btnView: editor.selectedView,
-    title: 'Editor',
-    onClick: noop,
-  },
-};
-
-describe('EditorRadioButton', () =>
-  testComponentSnapshotsWithFixtures(EditorRadioButton, fixtures));
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
deleted file mode 100644
index 344dc3fa56..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
+++ /dev/null
@@ -1,106 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorNavbar rendring renders EditorNavbar 1`] = `
-<div
-  className="navbar navbar-form navbar-full-width navbar-editor"
->
-  <Nav
-    bsClass="nav"
-    className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary"
-    justified={false}
-    pullLeft={false}
-    pullRight={false}
-    stacked={false}
-  >
-    <EditorRadioButton
-      btnView="input"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Editor"
-    />
-    <EditorRadioButton
-      btnView="diff"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Changes"
-    />
-    <EditorRadioButton
-      btnView="preview"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Preview"
-    />
-    <EditorSafemodeCheckbox
-      checked={true}
-      disabled={true}
-      handleSafeModeChange={[Function]}
-      show={false}
-    />
-  </Nav>
-  <EditorOptions
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeSetting={[Function]}
-    changeTab={[Function]}
-    diffViewType="split"
-    hosts={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    importFile={[Function]}
-    isDiff={true}
-    isRendering={false}
-    keyBinding="Default"
-    keyBindings={
-      Array [
-        "Default",
-        "Emacs",
-        "Vim",
-      ]
-    }
-    liveAutocompletion={false}
-    mode="Ruby"
-    modes={
-      Array [
-        "Text",
-        "Json",
-        "Ruby",
-        "Html_ruby",
-        "Sh",
-        "Xml",
-        "Yaml",
-      ]
-    }
-    renderPath="/render/path"
-    revertChanges={[Function]}
-    selectedView="input"
-    showHostSelector={true}
-    showImport={true}
-    showPreview={true}
-    template="<? />"
-    theme="Monokai"
-    themes={
-      Array [
-        "Github",
-        "Monokai",
-      ]
-    }
-    toggleModal={[Function]}
-    value="value"
-  />
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap
deleted file mode 100644
index b308cb378d..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorRadioButton renders EditorRadioButton 1`] = `
-<NavItem
-  active={true}
-  disabled={false}
-  id="input-navitem"
-  onClick={[Function]}
->
-  Editor
-</NavItem>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss b/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
deleted file mode 100644
index 19a62f09e4..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-label.safemode-rendering-checkbox {
-  font-size: 14px;
-  font-weight: var(--pf-v5-global--link--FontWeight);
-  margin: 5px;
-  cursor: pointer;
-}
-
-input#safemode-rendering-checkbox {
-  margin: 10px 5px 10px 0;
-}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/editor.scss b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
index 220d4a2c61..47a5148d97 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/editor.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
@@ -62,22 +62,14 @@
 .navbar-editor {
   padding: 2px 2px 0 2px !important;
   margin: 10px 0 0 !important;
-  height: 40px;
+  height: 45px;
   min-height: unset !important;
 
-  .nav-tabs-pf-secondary {
+  .editor-navbar-tabs-row {
     float: left;
-    background: unset !important;
-    border-bottom: unset;
     display: flex;
-
-    a {
-      background: unset !important;
-    }
-
-    .dropdown-menu > li > a:hover {
-      background-color: #08c !important;
-    }
+    align-items: center;
+    height: 45px;
 
     #editor-select-container.autocomplete-input-wrapper {
       display: flex;
@@ -88,32 +80,15 @@
       min-width: 0;
     }
 
-    #outdated-preview-alert {
-      display: flex;
-      align-items: center;
-
-      .alert {
-        padding: 0;
-        display: flex;
-        margin: 0 5px;
-        height: 24px;
-        align-items: center;
-        border-radius: 2px;
-
-        .pficon-warning-triangle-o {
-          position: inherit;
-          font-size: 15px;
-          top: 0;
-          left: 0;
-          margin: 0 5px;
-        }
-      }
+    label.safemode-rendering-checkbox {
+      font-size: 14px;
+      font-weight: var(--pf-v5-global--link--FontWeight);
+      margin: 5px;
+      cursor: pointer;
     }
 
-    #preview-spinner {
-      align-items: center;
-      display: flex;
-      margin-left: 10px;
+    input#safemode-rendering-checkbox {
+      margin: 10px 5px 10px 0;
     }
   }
 
@@ -127,6 +102,9 @@
 
   #editor-dropdowns {
     float: right;
+    display: flex;
+    align-items: center;
+    height: 100%;
 
     #diff-toggle-buttons {
       float: left;