diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
index 6d741b37e2..b332a4eeb3 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
@@ -1,16 +1,76 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, MenuItem, Button } from 'patternfly-react';
 import { CogIcon } from '@patternfly/react-icons';
 import {
+  Button,
+  Checkbox,
   Icon,
+  MenuToggle,
   Popover,
   PopoverPosition,
+  Select,
+  SelectList,
+  SelectOption,
   Tooltip,
   TooltipPosition,
 } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
 
+const SettingsSelect = ({ id, disabled, options, selected, onSelect }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="cog-popover-select">
+      <Select
+        id={id}
+        ouiaId={id}
+        isOpen={isOpen}
+        selected={selected}
+        onSelect={(_event, selection) => {
+          onSelect(selection);
+          setIsOpen(false);
+        }}
+        onOpenChange={setIsOpen}
+        toggle={toggleRef => (
+          <MenuToggle
+            ref={toggleRef}
+            onClick={() => {
+              if (!disabled) {
+                setIsOpen(!isOpen);
+              }
+            }}
+            isExpanded={isOpen}
+            isDisabled={disabled}
+            className="cog-popover-select-toggle"
+          >
+            {selected}
+          </MenuToggle>
+        )}
+      >
+        <SelectList id="settings-dropdown">
+          {options.map(option => (
+            <SelectOption key={option} value={option}>
+              {option}
+            </SelectOption>
+          ))}
+        </SelectList>
+      </Select>
+    </div>
+  );
+};
+
+SettingsSelect.propTypes = {
+  id: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  options: PropTypes.arrayOf(PropTypes.string).isRequired,
+  selected: PropTypes.string.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+SettingsSelect.defaultProps = {
+  disabled: false,
+};
+
 const EditorSettings = ({
   selectedView,
   changeSetting,
@@ -34,94 +94,74 @@ const EditorSettings = ({
         <div>
           <div className="cog-popover-dropdown">
             <div className="cog-popover-dropdown-title">{__('Syntax')}</div>
-            <Dropdown disabled={selectedView === 'preview'} id="mode-dropdown">
-              <Dropdown.Toggle>{mode}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {modes.map((aceMode, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ mode: aceMode })}
-                  >
-                    {aceMode}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
+            <SettingsSelect
+              id="mode-dropdown"
+              disabled={selectedView === 'preview'}
+              options={modes}
+              selected={mode}
+              onSelect={selection => changeSetting({ mode: selection })}
+            />
           </div>
           <div className="cog-popover-dropdown">
             <div className="cog-popover-dropdown-title">{__('Keybind')}</div>
-            <Dropdown
-              disabled={selectedView === 'preview'}
+            <SettingsSelect
               id="keybindings-dropdown"
-            >
-              <Dropdown.Toggle>{keyBinding}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {keyBindings.map((keyBind, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ keyBinding: keyBind })}
-                  >
-                    {keyBind}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
+              disabled={selectedView === 'preview'}
+              options={keyBindings}
+              selected={keyBinding}
+              onSelect={selection => changeSetting({ keyBinding: selection })}
+            />
           </div>
           <div className="cog-popover-dropdown">
             <div className="cog-popover-dropdown-title">{__('Theme')}</div>
-            <Dropdown id="themes-dropdown">
-              <Dropdown.Toggle>{theme}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {themes.map((themeKey, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ theme: themeKey })}
-                  >
-                    {themeKey}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
+            <SettingsSelect
+              id="themes-dropdown"
+              options={themes}
+              selected={theme}
+              onSelect={selection => changeSetting({ theme: selection })}
+            />
           </div>
           <div className="cog-popover-dropdown">
             <div className="cog-popover-dropdown-title">
               {__('Autocompletion')}
             </div>
-            <div className="dropdown btn-group">
-              <input
-                id="autocompletion-checkbox"
-                name="autocompletion"
-                type="checkbox"
-                checked={autocompletion}
-                onChange={e =>
-                  changeSetting({ autocompletion: !autocompletion })
-                }
-              />
-            </div>
+            <Checkbox
+              id="autocompletion-checkbox"
+              ouiaId="autocompletion-checkbox"
+              aria-label={__('Autocompletion')}
+              isChecked={autocompletion}
+              onChange={() =>
+                changeSetting({ autocompletion: !autocompletion })
+              }
+            />
           </div>
           <div className="cog-popover-dropdown">
             <div className="cog-popover-dropdown-title">
               {__('Live Autocompletion')}
             </div>
-            <div className="dropdown btn-group">
-              <input
-                id="live-autocompletion-checkbox"
-                name="liveAutocompletion"
-                type="checkbox"
-                checked={liveAutocompletion}
-                disabled={!autocompletion}
-                onChange={e =>
-                  changeSetting({ liveAutocompletion: !liveAutocompletion })
-                }
-              />
-            </div>
+            <Checkbox
+              id="live-autocompletion-checkbox"
+              ouiaId="live-autocompletion-checkbox"
+              aria-label={__('Live Autocompletion')}
+              isChecked={liveAutocompletion}
+              isDisabled={!autocompletion}
+              onChange={() =>
+                changeSetting({ liveAutocompletion: !liveAutocompletion })
+              }
+            />
           </div>
         </div>
       }
       triggerRef={() => document.getElementById('cog-btn')}
     />
     <Tooltip content={__('Settings')} position={TooltipPosition.top}>
-      <Button className="editor-button" id="cog-btn" bsStyle="link">
+      <Button
+        variant="plain"
+        className="editor-button"
+        id="cog-btn"
+        ouiaId="cog-btn"
+        aria-label={__('Settings')}
+      >
         <Icon size="md">
           <CogIcon />
         </Icon>
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
index 740c57ee85..f5c194181a 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
@@ -1,31 +1,163 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
-import { noop } from '../../../../common/helpers';
+import React from 'react';
+import { act, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
 
+import { rtlHelpers } from '../../../../common/rtlTestHelpers';
 import EditorSettings from '../EditorSettings';
 import { dropdowns } from '../../Editor.fixtures';
 
-const fixtures = {
-  'renders EditorSettings': {
-    ...dropdowns,
-    mode: 'Ruby',
-    selectedView: 'input',
-    theme: 'Github',
-    autocompletion: true,
-    liveAutocompletion: false,
-    keyBinding: 'vim',
-    changeSetting: noop,
-  },
-  'renders EditorSettings w/preview': {
-    ...dropdowns,
-    mode: 'Ruby',
-    selectedView: 'preview',
-    theme: 'Github',
-    autocompletion: true,
-    liveAutocompletion: false,
-    keyBinding: 'vim',
-    changeSetting: noop,
-  },
+const { renderWithI18n } = rtlHelpers;
+
+const defaultProps = {
+  ...dropdowns,
+  mode: 'Ruby',
+  selectedView: 'input',
+  theme: 'Github',
+  autocompletion: true,
+  liveAutocompletion: false,
+  keyBinding: 'vim',
+  changeSetting: jest.fn(),
+};
+
+const renderEditorSettings = (props = {}) => {
+  const changeSetting = props.changeSetting ?? jest.fn();
+
+  renderWithI18n(
+    <EditorSettings {...defaultProps} {...props} changeSetting={changeSetting} />
+  );
+
+  return { changeSetting };
+};
+
+const getSettingsButton = () =>
+  screen.getByRole('button', { name: 'Settings' });
+
+const openSettingsPopover = async () => {
+  await screen.findByRole('button', { name: 'Settings' });
+
+  await act(async () => {
+    userEvent.click(getSettingsButton());
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  await screen.findByText('Syntax');
+};
+
+const selectDropdownOption = async (currentValue, optionName) => {
+  await act(async () => {
+    userEvent.click(screen.getByRole('button', { name: currentValue }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  await act(async () => {
+    userEvent.click(screen.getByRole('option', { name: optionName }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
 };
 
-describe('EditorSettings', () =>
-  testComponentSnapshotsWithFixtures(EditorSettings, fixtures));
+describe('EditorSettings', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the settings button', async () => {
+    renderEditorSettings();
+
+    expect(
+      await screen.findByRole('button', { name: 'Settings' })
+    ).toBeInTheDocument();
+  });
+
+  it('shows editor settings in the popover', async () => {
+    renderEditorSettings();
+
+    await openSettingsPopover();
+
+    expect(
+      screen.getByRole('heading', { name: 'Settings' })
+    ).toBeInTheDocument();
+    expect(screen.getByText('Syntax')).toBeInTheDocument();
+    expect(screen.getByText('Keybind')).toBeInTheDocument();
+    expect(screen.getByText('Theme')).toBeInTheDocument();
+    expect(screen.getByText('Autocompletion')).toBeInTheDocument();
+    expect(screen.getByText('Live Autocompletion')).toBeInTheDocument();
+    expect(screen.getByText('Ruby')).toBeInTheDocument();
+    expect(screen.getByText('vim')).toBeInTheDocument();
+    expect(screen.getByText('Github')).toBeInTheDocument();
+  });
+
+  it('calls changeSetting when syntax is changed', async () => {
+    const { changeSetting } = renderEditorSettings();
+
+    await openSettingsPopover();
+
+    await selectDropdownOption('Ruby', 'Json');
+
+    expect(changeSetting).toHaveBeenCalledWith({ mode: 'Json' });
+  });
+
+  it('calls changeSetting when key binding is changed', async () => {
+    const { changeSetting } = renderEditorSettings();
+
+    await openSettingsPopover();
+
+    await selectDropdownOption('vim', 'Emacs');
+
+    expect(changeSetting).toHaveBeenCalledWith({ keyBinding: 'Emacs' });
+  });
+
+  it('calls changeSetting when theme is changed', async () => {
+    const { changeSetting } = renderEditorSettings();
+
+    await openSettingsPopover();
+
+    await selectDropdownOption('Github', 'Monokai');
+
+    expect(changeSetting).toHaveBeenCalledWith({ theme: 'Monokai' });
+  });
+
+  it('calls changeSetting when autocompletion is toggled', async () => {
+    const { changeSetting } = renderEditorSettings();
+
+    await openSettingsPopover();
+
+    userEvent.click(screen.getByRole('checkbox', { name: 'Autocompletion' }));
+
+    expect(changeSetting).toHaveBeenCalledWith({ autocompletion: false });
+  });
+
+  it('calls changeSetting when live autocompletion is toggled', async () => {
+    const { changeSetting } = renderEditorSettings();
+
+    await openSettingsPopover();
+
+    userEvent.click(
+      screen.getByRole('checkbox', { name: 'Live Autocompletion' })
+    );
+
+    expect(changeSetting).toHaveBeenCalledWith({ liveAutocompletion: true });
+  });
+
+  it('disables live autocompletion when autocompletion is off', async () => {
+    renderEditorSettings({ autocompletion: false });
+
+    await openSettingsPopover();
+
+    expect(
+      screen.getByRole('checkbox', { name: 'Live Autocompletion' })
+    ).toBeDisabled();
+  });
+
+  describe('preview view', () => {
+    it('disables syntax and keybind selects but keeps theme enabled', async () => {
+      renderEditorSettings({ selectedView: 'preview' });
+
+      await openSettingsPopover();
+
+      expect(screen.getByRole('button', { name: 'Ruby' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'vim' })).toBeDisabled();
+      expect(screen.getByRole('button', { name: 'Github' })).toBeEnabled();
+    });
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap
deleted file mode 100644
index aa97510bb3..0000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap
+++ /dev/null
@@ -1,545 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorSettings renders EditorSettings 1`] = `
-<Fragment>
-  <Popover
-    bodyContent={
-      <div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Syntax
-          </div>
-          <ForwardRef
-            disabled={false}
-            id="mode-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Ruby
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Text
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Json
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Html_ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Sh
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Xml
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Yaml
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Keybind
-          </div>
-          <ForwardRef
-            disabled={false}
-            id="keybindings-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              vim
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Default
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Emacs
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Vim
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Theme
-          </div>
-          <ForwardRef
-            id="themes-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Github
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Github
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Monokai
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={true}
-              id="autocompletion-checkbox"
-              name="autocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Live Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={false}
-              disabled={false}
-              id="live-autocompletion-checkbox"
-              name="liveAutocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-      </div>
-    }
-    enableFlip={false}
-    hasAutoWidth={true}
-    headerContent="Settings"
-    id="cog-popover"
-    position="bottom"
-    triggerRef={[Function]}
-  />
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        size="md"
-      >
-        <CogIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-</Fragment>
-`;
-
-exports[`EditorSettings renders EditorSettings w/preview 1`] = `
-<Fragment>
-  <Popover
-    bodyContent={
-      <div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Syntax
-          </div>
-          <ForwardRef
-            disabled={true}
-            id="mode-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Ruby
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Text
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Json
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Html_ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Sh
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Xml
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Yaml
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Keybind
-          </div>
-          <ForwardRef
-            disabled={true}
-            id="keybindings-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              vim
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Default
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Emacs
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Vim
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Theme
-          </div>
-          <ForwardRef
-            id="themes-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Github
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Github
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Monokai
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={true}
-              id="autocompletion-checkbox"
-              name="autocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Live Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={false}
-              disabled={false}
-              id="live-autocompletion-checkbox"
-              name="liveAutocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-      </div>
-    }
-    enableFlip={false}
-    hasAutoWidth={true}
-    headerContent="Settings"
-    id="cog-popover"
-    position="bottom"
-    triggerRef={[Function]}
-  />
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        size="md"
-      >
-        <CogIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-</Fragment>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/editor.scss b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
index 5c53958928..4a050acd9e 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/editor.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
@@ -186,6 +186,8 @@
   width: 40px !important;
   font-size: 16px;
   margin-bottom: 2px;
+  vertical-align: middle;
+  padding: 4px;
 }
 
 #import-btn,
@@ -258,24 +260,15 @@
       font-weight: 600;
     }
 
-    .dropdown {
+    .cog-popover-select {
       margin-left: auto;
 
-      .dropdown-menu {
+      .pf-v5-c-menu {
         min-width: 80px;
       }
 
-      #mode-dropdown,
-      #keybindings-dropdown,
-      #themes-dropdown {
+      .cog-popover-select-toggle {
         width: 80px;
-        text-align: left;
-
-        .caret {
-          position: absolute;
-          right: 2px;
-          top: 7px;
-        }
       }
     }
   }