diff --git a/client/modules/IDE/components/Preferences/Preferences.unit.test.jsx b/client/modules/IDE/components/Preferences/Preferences.unit.test.jsx
index fe414ffb58..7f13eb4bad 100644
--- a/client/modules/IDE/components/Preferences/Preferences.unit.test.jsx
+++ b/client/modules/IDE/components/Preferences/Preferences.unit.test.jsx
@@ -1,63 +1,23 @@
 import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { fireEvent, render, screen } from '../../../../test-utils';
+import { act, fireEvent, reduxRender, screen } from '../../../../test-utils';
 import Preferences from './index';
-
-/* props to pass in:
- * - this.props.fontSize : number
- * - this.props.autosave : bool
- * - this.props.autocloseBracketsQuotes : bool
- * - this.props.autocompleteHinter : bool
- * - this.props.linewrap : bool
- * - this.props.lineNumbers : bool
- * - this.props.theme : string
- * - this.props.lintWarning : bool
- * - this.props.textOutput : bool
- * - this.props.gridOutput : bool
- * - this.props.soundOutput : bool
- * - t from internationalization
- *
- * - this.props.setFontSize(fontsize : number)
- * - this.props.setAutosave(value : bool)
- * - this.props.setAutocloseBracketsQuotes(value: bool)
- * - this.props.setLinewrap(value : bool)
- * - this.props.setLineNumbers(value : bool)
- * - this.props.setTheme(color : string) -> can be {"light", "dark", "contrast"}
- * - this.props.setLintWarning(value : bool)
- * - this.props.setTextOutput(value : bool)
- * - this.props.setGridOutput(value : bool)
- * - this.props.setSoundOutput(value : bool)
- * -
- */
+import * as PreferencesActions from '../../actions/preferences';
 
 describe('<Preferences />', () => {
-  let props = {
-    t: jest.fn(),
-    fontSize: 12,
-    autosave: false,
-    autocloseBracketsQuotes: false,
-    autocompleteHinter: false,
-    linewrap: false,
-    lineNumbers: false,
-    theme: 'contrast',
-    lintWarning: false,
-    textOutput: false,
-    gridOutput: false,
-    soundOutput: false,
-    setFontSize: jest.fn(),
-    setAutosave: jest.fn(),
-    setAutocloseBracketsQuotes: jest.fn(),
-    setAutocompleteHinter: jest.fn(),
-    setLinewrap: jest.fn(),
-    setLineNumbers: jest.fn(),
-    setTheme: jest.fn(),
-    setLintWarning: jest.fn(),
-    setTextOutput: jest.fn(),
-    setGridOutput: jest.fn(),
-    setSoundOutput: jest.fn()
-  };
-
-  const subject = () => render(<Preferences {...props} />);
+  // For backwards compatibility, spy on each action creator to see when it was dispatched.
+  const props = Object.fromEntries(
+    Object.keys(PreferencesActions).map((name) => {
+      const spied = jest.spyOn(PreferencesActions, name);
+      return [name, spied];
+    })
+  );
+
+  const subject = (initialPreferences = {}) =>
+    reduxRender(<Preferences />, {
+      initialState: {
+        preferences: initialPreferences
+      }
+    });
 
   afterEach(() => {
     jest.clearAllMocks();
@@ -66,9 +26,7 @@ describe('<Preferences />', () => {
   describe('font tests', () => {
     it('font size increase button says increase', () => {
       // render the component
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the button for increasing text size
       const fontPlusButton = screen.getByRole('button', {
@@ -81,9 +39,7 @@ describe('<Preferences />', () => {
 
     it('increase font size by 2 when clicking plus button', () => {
       // render the component with font size set to 12
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the button for increasing text size
       const fontPlusButton = screen.getByRole('button', {
@@ -102,9 +58,7 @@ describe('<Preferences />', () => {
 
     it('font size decrease button says decrease', () => {
       // render the component with font size set to 12
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the button for decreasing font size
       const fontPlusButton = screen.getByRole('button', {
@@ -117,9 +71,7 @@ describe('<Preferences />', () => {
 
     it('decrease font size by 2 when clicking minus button', () => {
       // render the component with font size set to 12
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the button for decreasing text size
       const fontMinusButton = screen.getByRole('button', {
@@ -138,9 +90,7 @@ describe('<Preferences />', () => {
 
     it('font text field changes on manual text input', () => {
       // render the component with font size set to 12
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the text field
       const input = screen.getByRole('textbox', { name: /font size/i });
@@ -166,9 +116,7 @@ describe('<Preferences />', () => {
 
     it('font size CAN NOT go over 36', () => {
       // render the component
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the text field
       const input = screen.getByRole('textbox', { name: /font size/i });
@@ -193,9 +141,7 @@ describe('<Preferences />', () => {
 
     it('font size CAN NOT go under 8', () => {
       // render the component
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the text field
       const input = screen.getByRole('textbox', { name: /font size/i });
@@ -222,9 +168,7 @@ describe('<Preferences />', () => {
     // h and then i, but it tests the same idea
     it('font size input field does NOT take non-integers', () => {
       // render the component
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the text field
       const input = screen.getByRole('textbox', { name: /font size/i });
@@ -252,9 +196,7 @@ describe('<Preferences />', () => {
 
     it('font size input field does NOT take "-"', () => {
       // render the component
-      act(() => {
-        subject();
-      });
+      subject({ fontSize: 12 });
 
       // get ahold of the text field
       const input = screen.getByRole('textbox', { name: /font size/i });
@@ -311,14 +253,8 @@ describe('<Preferences />', () => {
 
   describe('testing theme switching', () => {
     describe('dark mode', () => {
-      beforeAll(() => {
-        props.theme = 'dark';
-      });
-
       it('switch to light', () => {
-        act(() => {
-          subject();
-        });
+        subject({ theme: 'dark' });
 
         const themeRadioCurrent = screen.getByRole('radio', {
           name: /dark theme on/i
@@ -338,14 +274,8 @@ describe('<Preferences />', () => {
     });
 
     describe('light mode', () => {
-      beforeAll(() => {
-        props.theme = 'light';
-      });
-
       it('switch to dark', () => {
-        act(() => {
-          subject();
-        });
+        subject({ theme: 'light' });
 
         const themeRadioCurrent = screen.getByRole('radio', {
           name: /light theme on/i
@@ -364,9 +294,8 @@ describe('<Preferences />', () => {
       });
 
       it('switch to contrast', () => {
-        act(() => {
-          subject();
-        });
+        subject({ theme: 'light' });
+
         const themeRadioCurrent = screen.getByRole('radio', {
           name: /light theme on/i
         });
@@ -387,9 +316,7 @@ describe('<Preferences />', () => {
 
   describe('testing toggle UI elements on starting tab', () => {
     it('autosave toggle, starting at false', () => {
-      act(() => {
-        subject();
-      });
+      subject({ autosave: false });
 
       // get ahold of the radio buttons for toggling autosave
       const autosaveRadioFalse = screen.getByRole('radio', {
@@ -409,9 +336,7 @@ describe('<Preferences />', () => {
 
     it('autocloseBracketsQuotes toggle, starting at false', () => {
       // render the component with autocloseBracketsQuotes prop set to false
-      act(() => {
-        subject();
-      });
+      subject({ autocloseBracketsQuotes: false });
 
       // get ahold of the radio buttons for toggling autocloseBracketsQuotes
       const autocloseRadioFalse = screen.getByRole('radio', {
@@ -431,9 +356,7 @@ describe('<Preferences />', () => {
 
     it('autocompleteHinter toggle, starting at false', () => {
       // render the component with autocompleteHinter prop set to false
-      act(() => {
-        subject();
-      });
+      subject({ autocompleteHinter: false });
 
       // get ahold of the radio buttons for toggling autocompleteHinter
       const autocompleteRadioFalse = screen.getByRole('radio', {
@@ -452,15 +375,9 @@ describe('<Preferences />', () => {
     });
 
     describe('start autosave value at true', () => {
-      beforeAll(() => {
-        props.autosave = true;
-      });
-
       it('autosave toggle, starting at true', () => {
         // render the component with autosave prop set to true
-        act(() => {
-          subject();
-        });
+        subject({ autosave: true });
 
         // get ahold of the radio buttons for toggling autosave
         const autosaveRadioFalse = screen.getByRole('radio', {
@@ -480,14 +397,8 @@ describe('<Preferences />', () => {
     });
 
     describe('start autoclose brackets value at true', () => {
-      beforeAll(() => {
-        props.autocloseBracketsQuotes = true;
-      });
-
       it('autocloseBracketsQuotes toggle, starting at true', () => {
-        act(() => {
-          subject();
-        });
+        subject({ autocloseBracketsQuotes: true });
 
         // get ahold of the radio buttons for toggling autocloseBracketsQuotes
         const autocloseRadioFalse = screen.getByRole('radio', {
@@ -507,15 +418,9 @@ describe('<Preferences />', () => {
     });
 
     describe('start autocomplete hinter value at true', () => {
-      beforeAll(() => {
-        props.autocompleteHinter = true;
-      });
-
       it('autocompleteHinter toggle, starting at true', () => {
         // render the component with autocompleteHinter prop set to true
-        act(() => {
-          subject();
-        });
+        subject({ autocompleteHinter: true });
 
         // get ahold of the radio buttons for toggling autocompleteHinter
         const autocompleteRadioFalse = screen.getByRole('radio', {
@@ -535,15 +440,9 @@ describe('<Preferences />', () => {
     });
 
     describe('start linewrap at false', () => {
-      beforeAll(() => {
-        props.linewrap = false;
-      });
-
       it('linewrap toggle, starting at false', () => {
         // render the component with linewrap prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ linewrap: false });
 
         // get ahold of the radio buttons for toggling linewrap
         const linewrapRadioFalse = screen.getByRole('radio', {
@@ -563,15 +462,9 @@ describe('<Preferences />', () => {
     });
 
     describe('start linewrap at true', () => {
-      beforeAll(() => {
-        props.linewrap = true;
-      });
-
       it('linewrap toggle, starting at true', () => {
         // render the component with linewrap prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ linewrap: true });
 
         // get ahold of the radio buttons for toggling linewrap
         const linewrapRadioFalse = screen.getByRole('radio', {
@@ -594,9 +487,7 @@ describe('<Preferences />', () => {
   describe('can toggle between general settings and accessibility tabs successfully', () => {
     it('can toggle sucessfully', () => {
       // render the component with lineNumbers prop set to false
-      act(() => {
-        subject();
-      });
+      subject({ lineNumbers: false });
 
       // switch to accessibility
       act(() => {
@@ -626,15 +517,9 @@ describe('<Preferences />', () => {
 
   describe('testing toggle UI elements on accessibility tab', () => {
     describe('starting linenumbers at false', () => {
-      beforeAll(() => {
-        props.lineNumbers = false;
-      });
-
       it('lineNumbers toggle, starting at false', () => {
         // render the component with lineNumbers prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ lineNumbers: false });
 
         // switch tabs
         act(() => {
@@ -661,15 +546,9 @@ describe('<Preferences />', () => {
     });
 
     describe('starting linenumbers at true', () => {
-      beforeAll(() => {
-        props.lineNumbers = true;
-      });
-
       it('lineNumbers toggle, starting at true', () => {
         // render the component with lineNumbers prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ lineNumbers: true });
 
         // switch tabs
         act(() => {
@@ -696,15 +575,9 @@ describe('<Preferences />', () => {
     });
 
     describe('starting lintWarning at false', () => {
-      beforeAll(() => {
-        props.lintWarning = false;
-      });
-
       it('lintWarning toggle, starting at false', () => {
         // render the component with lintWarning prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ lintWarning: false });
 
         // switch tabs
         act(() => {
@@ -731,15 +604,9 @@ describe('<Preferences />', () => {
     });
 
     describe('starting lintWarning at true', () => {
-      beforeAll(() => {
-        props.lintWarning = true;
-      });
-
       it('lintWarning toggle, starting at true', () => {
         // render the component with lintWarning prop set to false
-        act(() => {
-          subject();
-        });
+        subject({ lintWarning: true });
 
         // switch tabs
         act(() => {
@@ -766,15 +633,10 @@ describe('<Preferences />', () => {
     });
 
     const testCheckbox = (arialabel, startState, setter) => {
-      props = {
-        ...props,
+      subject({
         textOutput: startState && arialabel === 'text output on',
         soundOutput: startState && arialabel === 'sound output on',
         gridOutput: startState && arialabel === 'table output on'
-      };
-
-      act(() => {
-        subject();
       });
 
       // switch tabs
@@ -817,17 +679,10 @@ describe('<Preferences />', () => {
     });
 
     describe('multiple checkboxes can be selected', () => {
-      beforeAll(() => {
-        props = {
-          ...props,
+      it('multiple checkboxes can be selected', () => {
+        subject({
           textOutput: true,
           gridOutput: true
-        };
-      });
-
-      it('multiple checkboxes can be selected', () => {
-        act(() => {
-          subject();
         });
 
         // switch tabs
@@ -850,16 +705,10 @@ describe('<Preferences />', () => {
     });
 
     describe('none of the checkboxes can be selected', () => {
-      beforeAll(() => {
-        props = {
-          ...props,
+      it('none of the checkboxes can be selected', () => {
+        subject({
           textOutput: false,
           gridOutput: false
-        };
-      });
-      it('none of the checkboxes can be selected', () => {
-        act(() => {
-          subject();
         });
 
         // switch tabs
diff --git a/client/modules/IDE/components/Preferences/index.jsx b/client/modules/IDE/components/Preferences/index.jsx
index 87d0a28b9d..fa5859400e 100644
--- a/client/modules/IDE/components/Preferences/index.jsx
+++ b/client/modules/IDE/components/Preferences/index.jsx
@@ -1,46 +1,61 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { Helmet } from 'react-helmet';
+import { useDispatch, useSelector } from 'react-redux';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { withTranslation } from 'react-i18next';
-// import { bindActionCreators } from 'redux';
-// import { connect } from 'react-redux';
-// import * as PreferencesActions from '../actions/preferences';
-
+import { useTranslation } from 'react-i18next';
 import PlusIcon from '../../../../images/plus.svg';
 import MinusIcon from '../../../../images/minus.svg';
 import beepUrl from '../../../../sounds/audioAlert.mp3';
+import {
+  setTheme,
+  setAutosave,
+  setTextOutput,
+  setGridOutput,
+  setFontSize,
+  setLineNumbers,
+  setLintWarning,
+  setAutocloseBracketsQuotes,
+  setAutocompleteHinter,
+  setLinewrap
+} from '../../actions/preferences';
 
-class Preferences extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleUpdateAutosave = this.handleUpdateAutosave.bind(this);
-    this.handleUpdateLinewrap = this.handleUpdateLinewrap.bind(this);
-    this.handleLintWarning = this.handleLintWarning.bind(this);
-    this.handleLineNumbers = this.handleLineNumbers.bind(this);
-    this.onFontInputChange = this.onFontInputChange.bind(this);
-    this.onFontInputSubmit = this.onFontInputSubmit.bind(this);
-    this.increaseFontSize = this.increaseFontSize.bind(this);
-    this.decreaseFontSize = this.decreaseFontSize.bind(this);
-    this.setFontSize = this.setFontSize.bind(this);
+export default function Preferences() {
+  const { t } = useTranslation();
 
-    this.state = {
-      fontSize: props.fontSize
-    };
-  }
+  const dispatch = useDispatch();
+
+  const {
+    fontSize,
+    autosave,
+    linewrap,
+    lineNumbers,
+    lintWarning,
+    textOutput,
+    gridOutput,
+    theme,
+    autocloseBracketsQuotes,
+    autocompleteHinter
+  } = useSelector((state) => state.preferences);
 
-  onFontInputChange(event) {
+  const [state, setState] = useState({ fontSize });
+
+  function onFontInputChange(event) {
     const INTEGER_REGEX = /^[0-9\b]+$/;
     if (event.target.value === '' || INTEGER_REGEX.test(event.target.value)) {
-      this.setState({
+      setState({
         fontSize: event.target.value
       });
     }
   }
 
-  onFontInputSubmit(event) {
+  function handleFontSize(value) {
+    setState({ fontSize: value });
+    dispatch(setFontSize(value));
+  }
+
+  function onFontInputSubmit(event) {
     event.preventDefault();
-    let value = parseInt(this.state.fontSize, 10);
+    let value = parseInt(state.fontSize, 10);
     if (Number.isNaN(value)) {
       value = 16;
     }
@@ -50,476 +65,397 @@ class Preferences extends React.Component {
     if (value < 8) {
       value = 8;
     }
-    this.setFontSize(value);
-  }
-
-  setFontSize(value) {
-    this.setState({ fontSize: value });
-    this.props.setFontSize(value);
-  }
-
-  decreaseFontSize() {
-    const newValue = Number(this.state.fontSize) - 2;
-    this.setFontSize(newValue);
-  }
-
-  increaseFontSize() {
-    const newValue = Number(this.state.fontSize) + 2;
-    this.setFontSize(newValue);
+    handleFontSize(value);
   }
 
-  handleUpdateAutosave(event) {
-    const value = event.target.value === 'true';
-    this.props.setAutosave(value);
+  function decreaseFontSize() {
+    const newValue = Number(state.fontSize) - 2;
+    handleFontSize(newValue);
   }
 
-  handleUpdateLinewrap(event) {
-    const value = event.target.value === 'true';
-    this.props.setLinewrap(value);
+  function increaseFontSize() {
+    const newValue = Number(state.fontSize) + 2;
+    handleFontSize(newValue);
   }
 
-  handleLintWarning(event) {
-    const value = event.target.value === 'true';
-    this.props.setLintWarning(value);
-  }
-
-  handleLineNumbers(event) {
-    const value = event.target.value === 'true';
-    this.props.setLineNumbers(value);
-  }
+  const fontSizeInputRef = useRef(null);
 
-  render() {
-    const beep = new Audio(beepUrl);
-
-    return (
-      <section className="preferences">
-        <Helmet>
-          <title>p5.js Web Editor | Preferences</title>
-        </Helmet>
-        <Tabs>
-          <TabList>
-            <div className="tabs__titles">
-              <Tab>
-                <h4 className="tabs__title">
-                  {this.props.t('Preferences.GeneralSettings')}
-                </h4>
-              </Tab>
-              <Tab>
-                <h4 className="tabs__title">
-                  {this.props.t('Preferences.Accessibility')}
-                </h4>
-              </Tab>
-            </div>
-          </TabList>
-          <TabPanel>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.Theme')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setTheme('light')}
-                  aria-label={this.props.t('Preferences.LightThemeARIA')}
-                  name="light theme"
-                  id="light-theme-on"
-                  className="preference__radio-button"
-                  value="light"
-                  checked={this.props.theme === 'light'}
-                />
-                <label htmlFor="light-theme-on" className="preference__option">
-                  {this.props.t('Preferences.LightTheme')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setTheme('dark')}
-                  aria-label={this.props.t('Preferences.DarkThemeARIA')}
-                  name="dark theme"
-                  id="dark-theme-on"
-                  className="preference__radio-button"
-                  value="dark"
-                  checked={this.props.theme === 'dark'}
-                />
-                <label htmlFor="dark-theme-on" className="preference__option">
-                  {this.props.t('Preferences.DarkTheme')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setTheme('contrast')}
-                  aria-label={this.props.t('Preferences.HighContrastThemeARIA')}
-                  name="high contrast theme"
-                  id="high-contrast-theme-on"
-                  className="preference__radio-button"
-                  value="contrast"
-                  checked={this.props.theme === 'contrast'}
-                />
-                <label
-                  htmlFor="high-contrast-theme-on"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.HighContrastTheme')}
-                </label>
-              </div>
-            </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.TextSize')}
+  return (
+    <section className="preferences">
+      <Helmet>
+        <title>p5.js Web Editor | Preferences</title>
+      </Helmet>
+      <Tabs>
+        <TabList>
+          <div className="tabs__titles">
+            <Tab>
+              <h4 className="tabs__title">
+                {t('Preferences.GeneralSettings')}
               </h4>
-              <button
-                className="preference__minus-button"
-                onClick={this.decreaseFontSize}
-                aria-label={this.props.t('Preferences.DecreaseFontARIA')}
-                title={this.props.t('Preferences.DecreaseFontARIA')}
-                disabled={this.state.fontSize <= 8}
-              >
-                <MinusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">
-                  {this.props.t('Preferences.DecreaseFont')}
-                </h6>
-              </button>
-              <form
-                onSubmit={this.onFontInputSubmit}
-                aria-label={this.props.t('Preferences.SetFontSize')}
-              >
-                <label htmlFor="font-size-value" className="preference--hidden">
-                  {this.props.t('Preferences.FontSize')}
-                </label>
-                <input
-                  className="preference__value"
-                  aria-live="polite"
-                  aria-atomic="true"
-                  value={this.state.fontSize}
-                  id="font-size-value"
-                  onChange={this.onFontInputChange}
-                  type="text"
-                  ref={(element) => {
-                    this.fontSizeInput = element;
-                  }}
-                  onClick={() => {
-                    this.fontSizeInput.select();
-                  }}
-                />
-              </form>
-              <button
-                className="preference__plus-button"
-                onClick={this.increaseFontSize}
-                aria-label={this.props.t('Preferences.IncreaseFontARIA')}
-                title={this.props.t('Preferences.IncreaseFontARIA')}
-                disabled={this.state.fontSize >= 36}
+            </Tab>
+            <Tab>
+              <h4 className="tabs__title">{t('Preferences.Accessibility')}</h4>
+            </Tab>
+          </div>
+        </TabList>
+        <TabPanel>
+          <div className="preference">
+            <h4 className="preference__title">{t('Preferences.Theme')}</h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setTheme('light'))}
+                aria-label={t('Preferences.LightThemeARIA')}
+                name="light theme"
+                id="light-theme-on"
+                className="preference__radio-button"
+                value="light"
+                checked={theme === 'light'}
+              />
+              <label htmlFor="light-theme-on" className="preference__option">
+                {t('Preferences.LightTheme')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setTheme('dark'))}
+                aria-label={t('Preferences.DarkThemeARIA')}
+                name="dark theme"
+                id="dark-theme-on"
+                className="preference__radio-button"
+                value="dark"
+                checked={theme === 'dark'}
+              />
+              <label htmlFor="dark-theme-on" className="preference__option">
+                {t('Preferences.DarkTheme')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setTheme('contrast'))}
+                aria-label={t('Preferences.HighContrastThemeARIA')}
+                name="high contrast theme"
+                id="high-contrast-theme-on"
+                className="preference__radio-button"
+                value="contrast"
+                checked={theme === 'contrast'}
+              />
+              <label
+                htmlFor="high-contrast-theme-on"
+                className="preference__option"
               >
-                <PlusIcon focusable="false" aria-hidden="true" />
-                <h6 className="preference__label">
-                  {this.props.t('Preferences.IncreaseFont')}
-                </h6>
-              </button>
+                {t('Preferences.HighContrastTheme')}
+              </label>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.Autosave')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutosave(true)}
-                  aria-label={this.props.t('Preferences.AutosaveOnARIA')}
-                  name="autosave"
-                  id="autosave-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.autosave}
-                />
-                <label htmlFor="autosave-on" className="preference__option">
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutosave(false)}
-                  aria-label={this.props.t('Preferences.AutosaveOffARIA')}
-                  name="autosave"
-                  id="autosave-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.autosave}
-                />
-                <label htmlFor="autosave-off" className="preference__option">
-                  {this.props.t('Preferences.Off')}
-                </label>
-              </div>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">{t('Preferences.TextSize')}</h4>
+            <button
+              className="preference__minus-button"
+              onClick={decreaseFontSize}
+              aria-label={t('Preferences.DecreaseFontARIA')}
+              title={t('Preferences.DecreaseFontARIA')}
+              disabled={fontSize <= 8}
+            >
+              <MinusIcon focusable="false" aria-hidden="true" />
+              <h6 className="preference__label">
+                {t('Preferences.DecreaseFont')}
+              </h6>
+            </button>
+            <form
+              onSubmit={onFontInputSubmit}
+              aria-label={t('Preferences.SetFontSize')}
+            >
+              <label htmlFor="font-size-value" className="preference--hidden">
+                {t('Preferences.FontSize')}
+              </label>
+              <input
+                className="preference__value"
+                aria-live="polite"
+                aria-atomic="true"
+                value={state.fontSize}
+                id="font-size-value"
+                onChange={onFontInputChange}
+                type="text"
+                ref={fontSizeInputRef}
+                onClick={() => {
+                  fontSizeInputRef.current?.select();
+                }}
+              />
+            </form>
+            <button
+              className="preference__plus-button"
+              onClick={increaseFontSize}
+              aria-label={t('Preferences.IncreaseFontARIA')}
+              title={t('Preferences.IncreaseFontARIA')}
+              disabled={fontSize >= 36}
+            >
+              <PlusIcon focusable="false" aria-hidden="true" />
+              <h6 className="preference__label">
+                {t('Preferences.IncreaseFont')}
+              </h6>
+            </button>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">{t('Preferences.Autosave')}</h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutosave(true))}
+                aria-label={t('Preferences.AutosaveOnARIA')}
+                name="autosave"
+                id="autosave-on"
+                className="preference__radio-button"
+                value="On"
+                checked={autosave}
+              />
+              <label htmlFor="autosave-on" className="preference__option">
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutosave(false))}
+                aria-label={t('Preferences.AutosaveOffARIA')}
+                name="autosave"
+                id="autosave-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!autosave}
+              />
+              <label htmlFor="autosave-off" className="preference__option">
+                {t('Preferences.Off')}
+              </label>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.AutocloseBracketsQuotes')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutocloseBracketsQuotes(true)}
-                  aria-label={this.props.t(
-                    'Preferences.AutocloseBracketsQuotesOnARIA'
-                  )}
-                  name="autoclosebracketsquotes"
-                  id="autoclosebracketsquotes-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.autocloseBracketsQuotes}
-                />
-                <label
-                  htmlFor="autoclosebracketsquotes-on"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutocloseBracketsQuotes(false)}
-                  aria-label={this.props.t(
-                    'Preferences.AutocloseBracketsQuotesOffARIA'
-                  )}
-                  name="autoclosebracketsquotes"
-                  id="autoclosebracketsquotes-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.autocloseBracketsQuotes}
-                />
-                <label
-                  htmlFor="autoclosebracketsquotes-off"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.Off')}
-                </label>
-              </div>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.AutocloseBracketsQuotes')}
+            </h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutocloseBracketsQuotes(true))}
+                aria-label={t('Preferences.AutocloseBracketsQuotesOnARIA')}
+                name="autoclosebracketsquotes"
+                id="autoclosebracketsquotes-on"
+                className="preference__radio-button"
+                value="On"
+                checked={autocloseBracketsQuotes}
+              />
+              <label
+                htmlFor="autoclosebracketsquotes-on"
+                className="preference__option"
+              >
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutocloseBracketsQuotes(false))}
+                aria-label={t('Preferences.AutocloseBracketsQuotesOffARIA')}
+                name="autoclosebracketsquotes"
+                id="autoclosebracketsquotes-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!autocloseBracketsQuotes}
+              />
+              <label
+                htmlFor="autoclosebracketsquotes-off"
+                className="preference__option"
+              >
+                {t('Preferences.Off')}
+              </label>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.AutocompleteHinter')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutocompleteHinter(true)}
-                  aria-label={this.props.t(
-                    'Preferences.AutocompleteHinterOnARIA'
-                  )}
-                  name="autocompletehinter"
-                  id="autocompletehinter-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.autocompleteHinter}
-                />
-                <label
-                  htmlFor="autocompletehinter-on"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setAutocompleteHinter(false)}
-                  aria-label={this.props.t(
-                    'Preferences.AutocompleteHinterOffARIA'
-                  )}
-                  name="autocompletehinter"
-                  id="autocompletehinter-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.autocompleteHinter}
-                />
-                <label
-                  htmlFor="autocompletehinter-off"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.Off')}
-                </label>
-              </div>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.AutocompleteHinter')}
+            </h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutocompleteHinter(true))}
+                aria-label={t('Preferences.AutocompleteHinterOnARIA')}
+                name="autocompletehinter"
+                id="autocompletehinter-on"
+                className="preference__radio-button"
+                value="On"
+                checked={autocompleteHinter}
+              />
+              <label
+                htmlFor="autocompletehinter-on"
+                className="preference__option"
+              >
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setAutocompleteHinter(false))}
+                aria-label={t('Preferences.AutocompleteHinterOffARIA')}
+                name="autocompletehinter"
+                id="autocompletehinter-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!autocompleteHinter}
+              />
+              <label
+                htmlFor="autocompletehinter-off"
+                className="preference__option"
+              >
+                {t('Preferences.Off')}
+              </label>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.WordWrap')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLinewrap(true)}
-                  aria-label={this.props.t('Preferences.LineWrapOnARIA')}
-                  name="linewrap"
-                  id="linewrap-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.linewrap}
-                />
-                <label htmlFor="linewrap-on" className="preference__option">
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLinewrap(false)}
-                  aria-label={this.props.t('Preferences.LineWrapOffARIA')}
-                  name="linewrap"
-                  id="linewrap-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.linewrap}
-                />
-                <label htmlFor="linewrap-off" className="preference__option">
-                  {this.props.t('Preferences.Off')}
-                </label>
-              </div>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">{t('Preferences.WordWrap')}</h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setLinewrap(true))}
+                aria-label={t('Preferences.LineWrapOnARIA')}
+                name="linewrap"
+                id="linewrap-on"
+                className="preference__radio-button"
+                value="On"
+                checked={linewrap}
+              />
+              <label htmlFor="linewrap-on" className="preference__option">
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setLinewrap(false))}
+                aria-label={t('Preferences.LineWrapOffARIA')}
+                name="linewrap"
+                id="linewrap-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!linewrap}
+              />
+              <label htmlFor="linewrap-off" className="preference__option">
+                {t('Preferences.Off')}
+              </label>
             </div>
-          </TabPanel>
-          <TabPanel>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.LineNumbers')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLineNumbers(true)}
-                  aria-label={this.props.t('Preferences.LineNumbersOnARIA')}
-                  name="line numbers"
-                  id="line-numbers-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.lineNumbers}
-                />
-                <label htmlFor="line-numbers-on" className="preference__option">
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLineNumbers(false)}
-                  aria-label={this.props.t('Preferences.LineNumbersOffARIA')}
-                  name="line numbers"
-                  id="line-numbers-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.lineNumbers}
-                />
-                <label
-                  htmlFor="line-numbers-off"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.Off')}
-                </label>
-              </div>
+          </div>
+        </TabPanel>
+        <TabPanel>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.LineNumbers')}
+            </h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setLineNumbers(true))}
+                aria-label={t('Preferences.LineNumbersOnARIA')}
+                name="line numbers"
+                id="line-numbers-on"
+                className="preference__radio-button"
+                value="On"
+                checked={lineNumbers}
+              />
+              <label htmlFor="line-numbers-on" className="preference__option">
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setLineNumbers(false))}
+                aria-label={t('Preferences.LineNumbersOffARIA')}
+                name="line numbers"
+                id="line-numbers-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!lineNumbers}
+              />
+              <label htmlFor="line-numbers-off" className="preference__option">
+                {t('Preferences.Off')}
+              </label>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.LintWarningSound')}
-              </h4>
-              <div className="preference__options">
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLintWarning(true)}
-                  aria-label={this.props.t('Preferences.LintWarningOnARIA')}
-                  name="lint warning"
-                  id="lint-warning-on"
-                  className="preference__radio-button"
-                  value="On"
-                  checked={this.props.lintWarning}
-                />
-                <label htmlFor="lint-warning-on" className="preference__option">
-                  {this.props.t('Preferences.On')}
-                </label>
-                <input
-                  type="radio"
-                  onChange={() => this.props.setLintWarning(false)}
-                  aria-label={this.props.t('Preferences.LintWarningOffARIA')}
-                  name="lint warning"
-                  id="lint-warning-off"
-                  className="preference__radio-button"
-                  value="Off"
-                  checked={!this.props.lintWarning}
-                />
-                <label
-                  htmlFor="lint-warning-off"
-                  className="preference__option"
-                >
-                  {this.props.t('Preferences.Off')}
-                </label>
-                <button
-                  className="preference__preview-button"
-                  onClick={() => beep.play()}
-                  aria-label={this.props.t('Preferences.PreviewSoundARIA')}
-                >
-                  {this.props.t('Preferences.PreviewSound')}
-                </button>
-              </div>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.LintWarningSound')}
+            </h4>
+            <div className="preference__options">
+              <input
+                type="radio"
+                onChange={() => dispatch(setLintWarning(true))}
+                aria-label={t('Preferences.LintWarningOnARIA')}
+                name="lint warning"
+                id="lint-warning-on"
+                className="preference__radio-button"
+                value="On"
+                checked={lintWarning}
+              />
+              <label htmlFor="lint-warning-on" className="preference__option">
+                {t('Preferences.On')}
+              </label>
+              <input
+                type="radio"
+                onChange={() => dispatch(setLintWarning(false))}
+                aria-label={t('Preferences.LintWarningOffARIA')}
+                name="lint warning"
+                id="lint-warning-off"
+                className="preference__radio-button"
+                value="Off"
+                checked={!lintWarning}
+              />
+              <label htmlFor="lint-warning-off" className="preference__option">
+                {t('Preferences.Off')}
+              </label>
+              <button
+                className="preference__preview-button"
+                onClick={() => new Audio(beepUrl).play()}
+                aria-label={t('Preferences.PreviewSoundARIA')}
+              >
+                {t('Preferences.PreviewSound')}
+              </button>
             </div>
-            <div className="preference">
-              <h4 className="preference__title">
-                {this.props.t('Preferences.AccessibleTextBasedCanvas')}
-              </h4>
-              <h6 className="preference__subtitle">
-                {this.props.t('Preferences.UsedScreenReader')}
-              </h6>
+          </div>
+          <div className="preference">
+            <h4 className="preference__title">
+              {t('Preferences.AccessibleTextBasedCanvas')}
+            </h4>
+            <h6 className="preference__subtitle">
+              {t('Preferences.UsedScreenReader')}
+            </h6>
 
-              <div className="preference__options">
-                <input
-                  type="checkbox"
-                  onChange={(event) => {
-                    this.props.setTextOutput(event.target.checked);
-                  }}
-                  aria-label={this.props.t('Preferences.TextOutputARIA')}
-                  name="text output"
-                  id="text-output-on"
-                  value="On"
-                  checked={this.props.textOutput}
-                />
-                <label
-                  htmlFor="text-output-on"
-                  className="preference__option preference__canvas"
-                >
-                  {this.props.t('Preferences.PlainText')}
-                </label>
-                <input
-                  type="checkbox"
-                  onChange={(event) => {
-                    this.props.setGridOutput(event.target.checked);
-                  }}
-                  aria-label={this.props.t('Preferences.TableOutputARIA')}
-                  name="table output"
-                  id="table-output-on"
-                  value="On"
-                  checked={this.props.gridOutput}
-                />
-                <label
-                  htmlFor="table-output-on"
-                  className="preference__option preference__canvas"
-                >
-                  {this.props.t('Preferences.TableText')}
-                </label>
-              </div>
+            <div className="preference__options">
+              <input
+                type="checkbox"
+                onChange={(event) => {
+                  dispatch(setTextOutput(event.target.checked));
+                }}
+                aria-label={t('Preferences.TextOutputARIA')}
+                name="text output"
+                id="text-output-on"
+                value="On"
+                checked={textOutput}
+              />
+              <label
+                htmlFor="text-output-on"
+                className="preference__option preference__canvas"
+              >
+                {t('Preferences.PlainText')}
+              </label>
+              <input
+                type="checkbox"
+                onChange={(event) => {
+                  dispatch(setGridOutput(event.target.checked));
+                }}
+                aria-label={t('Preferences.TableOutputARIA')}
+                name="table output"
+                id="table-output-on"
+                value="On"
+                checked={gridOutput}
+              />
+              <label
+                htmlFor="table-output-on"
+                className="preference__option preference__canvas"
+              >
+                {t('Preferences.TableText')}
+              </label>
             </div>
-          </TabPanel>
-        </Tabs>
-      </section>
-    );
-  }
+          </div>
+        </TabPanel>
+      </Tabs>
+    </section>
+  );
 }
-
-Preferences.propTypes = {
-  fontSize: PropTypes.number.isRequired,
-  lineNumbers: PropTypes.bool.isRequired,
-  setFontSize: PropTypes.func.isRequired,
-  autosave: PropTypes.bool.isRequired,
-  linewrap: PropTypes.bool.isRequired,
-  setLineNumbers: PropTypes.func.isRequired,
-  setAutosave: PropTypes.func.isRequired,
-  setLinewrap: PropTypes.func.isRequired,
-  textOutput: PropTypes.bool.isRequired,
-  gridOutput: PropTypes.bool.isRequired,
-  setTextOutput: PropTypes.func.isRequired,
-  setGridOutput: PropTypes.func.isRequired,
-  lintWarning: PropTypes.bool.isRequired,
-  setLintWarning: PropTypes.func.isRequired,
-  theme: PropTypes.string.isRequired,
-  setTheme: PropTypes.func.isRequired,
-  autocloseBracketsQuotes: PropTypes.bool.isRequired,
-  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
-  autocompleteHinter: PropTypes.bool.isRequired,
-  setAutocompleteHinter: PropTypes.func.isRequired,
-  t: PropTypes.func.isRequired
-};
-
-export default withTranslation()(Preferences);
diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx
index ba5aa2cab2..19b1da2ce2 100644
--- a/client/modules/IDE/pages/IDEView.jsx
+++ b/client/modules/IDE/pages/IDEView.jsx
@@ -273,30 +273,7 @@ class IDEView extends React.Component {
             ariaLabel={this.props.t('Preferences.Settings')}
             closeOverlay={this.props.closePreferences}
           >
-            <Preferences
-              fontSize={this.props.preferences.fontSize}
-              setFontSize={this.props.setFontSize}
-              autosave={this.props.preferences.autosave}
-              linewrap={this.props.preferences.linewrap}
-              lineNumbers={this.props.preferences.lineNumbers}
-              setLineNumbers={this.props.setLineNumbers}
-              setAutosave={this.props.setAutosave}
-              setLinewrap={this.props.setLinewrap}
-              lintWarning={this.props.preferences.lintWarning}
-              setLintWarning={this.props.setLintWarning}
-              textOutput={this.props.preferences.textOutput}
-              gridOutput={this.props.preferences.gridOutput}
-              setTextOutput={this.props.setTextOutput}
-              setGridOutput={this.props.setGridOutput}
-              theme={this.props.preferences.theme}
-              setTheme={this.props.setTheme}
-              autocloseBracketsQuotes={
-                this.props.preferences.autocloseBracketsQuotes
-              }
-              setAutocloseBracketsQuotes={this.props.setAutocloseBracketsQuotes}
-              autocompleteHinter={this.props.preferences.autocompleteHinter}
-              setAutocompleteHinter={this.props.setAutocompleteHinter}
-            />
+            <Preferences />
           </Overlay>
         )}
         <main className="editor-preview-container">
@@ -505,15 +482,6 @@ IDEView.propTypes = {
     autocompleteHinter: PropTypes.bool.isRequired
   }).isRequired,
   closePreferences: PropTypes.func.isRequired,
-  setAutocloseBracketsQuotes: PropTypes.func.isRequired,
-  setAutocompleteHinter: PropTypes.func.isRequired,
-  setFontSize: PropTypes.func.isRequired,
-  setAutosave: PropTypes.func.isRequired,
-  setLineNumbers: PropTypes.func.isRequired,
-  setLinewrap: PropTypes.func.isRequired,
-  setLintWarning: PropTypes.func.isRequired,
-  setTextOutput: PropTypes.func.isRequired,
-  setGridOutput: PropTypes.func.isRequired,
   setAllAccessibleOutput: PropTypes.func.isRequired,
   selectedFile: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -536,7 +504,6 @@ IDEView.propTypes = {
   closeShareModal: PropTypes.func.isRequired,
   closeKeyboardShortcutModal: PropTypes.func.isRequired,
   autosaveProject: PropTypes.func.isRequired,
-  setTheme: PropTypes.func.isRequired,
   setPreviousPath: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
   hideErrorModal: PropTypes.func.isRequired,