diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx
similarity index 86%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.js
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx
index 45b83b9e626..7b332ad33a6 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.js
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/Prettier/index.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import React, { FunctionComponent } from 'react';
+import { useOvermind } from 'app/overmind';
 
 import {
   SubContainer,
@@ -9,16 +9,28 @@ import {
   Rule,
 } from '../../elements';
 
-function PrettierComponent({ store, signals }) {
+const PrettierComponent: FunctionComponent = () => {
+  const {
+    state: {
+      preferences: {
+        settings: { prettierConfig },
+      },
+    },
+    actions: {
+      preferences: { settingChanged },
+    },
+  } = useOvermind();
+
   const bindValue = name => ({
-    value: store.preferences.settings.prettierConfig[name],
+    value: prettierConfig[name],
     setValue: value =>
-      signals.preferences.settingChanged({
+      settingChanged({
         name: `prettierConfig.${name}`,
         value,
       }),
   });
 
+  const { fluid } = prettierConfig;
   return (
     <SubContainer>
       <PreferenceContainer>
@@ -45,7 +57,7 @@ function PrettierComponent({ store, signals }) {
         <Rule />
         <PaddedPreference
           style={{
-            opacity: store.preferences.settings.prettierConfig.fluid ? 0.5 : 1,
+            opacity: fluid ? 0.5 : 1,
           }}
           title="Print width"
           type="number"
@@ -53,7 +65,7 @@ function PrettierComponent({ store, signals }) {
         />
         <SubDescription
           style={{
-            opacity: store.preferences.settings.prettierConfig.fluid ? 0.5 : 1,
+            opacity: fluid ? 0.5 : 1,
           }}
         >
           Specify the line length that the printer will wrap on.
@@ -143,6 +155,6 @@ function PrettierComponent({ store, signals }) {
       </PreferenceContainer>
     </SubContainer>
   );
-}
+};
 
-export const Prettier = inject('store', 'signals')(observer(PrettierComponent));
+export const Prettier = PrettierComponent;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.js
deleted file mode 100644
index b609e4e79fb..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-import Question from 'react-icons/lib/go/question';
-
-import { Prettier } from './Prettier';
-import { Title } from '../elements';
-
-export function CodeFormatting() {
-  return (
-    <div>
-      <Title>
-        Prettier Settings{' '}
-        <a
-          href="https://prettier.io/docs/en/options.html"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Question style={{ marginBottom: '3px' }} />
-        </a>
-      </Title>
-
-      <Prettier />
-    </div>
-  );
-}
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
new file mode 100644
index 00000000000..f772626680d
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx
@@ -0,0 +1,23 @@
+import React, { FunctionComponent } from 'react';
+
+import Question from 'react-icons/lib/go/question';
+
+import { Prettier } from './Prettier';
+import { Title } from '../elements';
+
+export const CodeFormatting: FunctionComponent = () => (
+  <div>
+    <Title>
+      Prettier Settings{' '}
+      <a
+        href="https://prettier.io/docs/en/options.html"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Question style={{ marginBottom: '3px' }} />
+      </a>
+    </Title>
+
+    <Prettier />
+  </div>
+);