diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx
similarity index 75%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.js
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx
index 2952d2b7eed..99a4c722bde 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.js
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/EditorPageSettings/PreviewSettings/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 
 import {
   Title,
@@ -10,14 +10,19 @@ import {
   Rule,
 } from '../../elements';
 
-function PreviewSettingsComponent({ store, signals }) {
-  const bindValue = name => ({
-    value: store.preferences.settings[name],
-    setValue: value =>
-      signals.preferences.settingChanged({
-        name,
-        value,
-      }),
+export const PreviewSettings: React.FC = () => {
+  const {
+    state: {
+      preferences: { settings },
+    },
+    actions: {
+      preferences: { settingChanged },
+    },
+  } = useOvermind();
+
+  const bindValue = (name: string) => ({
+    value: settings[name],
+    setValue: (value: any) => settingChanged({ name, value }),
   });
 
   return (
@@ -56,8 +61,4 @@ function PreviewSettingsComponent({ store, signals }) {
       </SubContainer>
     </div>
   );
-}
-
-export const PreviewSettings = inject('store', 'signals')(
-  observer(PreviewSettingsComponent)
-);
+};