diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.js b/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx
similarity index 70%
rename from packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.js
rename to packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx
index b31fbcfdb7f..a123bd7a987 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.js
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Badges/index.tsx
@@ -1,12 +1,21 @@
 import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
+import { useOvermind } from 'app/overmind';
 
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Badge from '@codesandbox/common/lib/utils/badges/Badge';
 import { Title } from '../elements';
 
-function BadgesComponent({ store, signals }) {
-  const badgesCount = store.user.badges.length;
+export const Badges = () => {
+  const {
+    state: {
+      user: { badges },
+    },
+    actions: {
+      preferences: { setBadgeVisibility },
+    },
+  } = useOvermind();
+
+  const badgesCount = badges.length;
 
   return (
     <div>
@@ -17,12 +26,12 @@ function BadgesComponent({ store, signals }) {
         visibility.
       </strong>
       <Margin top={2}>
-        {store.user.badges.map(badge => (
+        {badges.map(badge => (
           <Badge
             key={badge.id}
             tooltip={false}
             onClick={b =>
-              signals.preferences.setBadgeVisibility({
+              setBadgeVisibility({
                 ...b,
                 visible: !b.visible,
               })
@@ -35,6 +44,4 @@ function BadgesComponent({ store, signals }) {
       </Margin>
     </div>
   );
-}
-
-export const Badges = inject('store', 'signals')(observer(BadgesComponent));
+};