diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx
new file mode 100644
index 00000000000..29b3156af51
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/PaymentInfo.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { SubscribeForm } from 'app/components/SubscribeForm';
+import { useOvermind } from 'app/overmind';
+import { Card } from './Card';
+import { Title, Subheading } from '../elements';
+import { Container, CustomSubHeading } from './elements';
+
+export const PaymentInfo: React.FunctionComponent = () => {
+  const {
+    state: {
+      preferences: {
+        paymentDetailError,
+        paymentDetails: paymentDetailsFromHooks,
+        isLoadingPaymentDetails,
+      },
+    },
+    actions: {
+      preferences: { paymentDetailsRequested, paymentDetailsUpdated },
+    },
+  } = useOvermind();
+  useEffect(() => {
+    paymentDetailsRequested();
+  }, [paymentDetailsRequested]);
+
+  const updatePaymentDetails = ({ token }) => {
+    paymentDetailsUpdated({ token });
+  };
+
+  const paymentDetails = () => {
+    const { last4, name, brand } = paymentDetailsFromHooks;
+    if (paymentDetailError)
+      return <div>An error occurred: {paymentDetailError}</div>;
+
+    return (
+      <div>
+        <Subheading>Current card</Subheading>
+        <Card last4={last4} name={name} brand={brand} />
+
+        <CustomSubHeading>Update card info</CustomSubHeading>
+        <SubscribeForm
+          buttonName="Update"
+          loadingText="Updating Card Info..."
+          name={name}
+          subscribe={updatePaymentDetails}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <Container>
+      <Title>Payment Info</Title>
+      {isLoadingPaymentDetails ? (
+        <div>Loading payment details...</div>
+      ) : (
+        paymentDetails()
+      )}
+    </Container>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts
index 5902ceb40f1..bb3118b46e3 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/elements.ts
@@ -1,6 +1,11 @@
 import styled from 'styled-components';
+import { Subheading } from '../elements';
 
 export const Container = styled.div`
   font-weight: 400;
   color: rgba(255, 255, 255, 0.6);
 `;
+
+export const CustomSubHeading = styled(Subheading)`
+  margin-top: 2rem;
+`;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts
new file mode 100644
index 00000000000..fc6e6a17d3e
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.ts
@@ -0,0 +1,3 @@
+import { PaymentInfo } from './PaymentInfo';
+
+export default PaymentInfo;
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
deleted file mode 100644
index 44a1c2313c8..00000000000
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/PaymentInfo/index.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-import { SubscribeForm } from 'app/components/SubscribeForm';
-import { Card } from './Card';
-import { Title, Subheading } from '../elements';
-import { Container } from './elements';
-
-interface Props {
-  store: any;
-  signals: any;
-}
-
-class PaymentInfoComponent extends React.Component<Props> {
-  componentDidMount() {
-    this.props.signals.preferences.paymentDetailsRequested();
-  }
-
-  updatePaymentDetails = ({ token }) => {
-    this.props.signals.preferences.paymentDetailsUpdated({ token });
-  };
-
-  paymentDetails = () => {
-    const { preferences } = this.props.store;
-
-    if (preferences.paymentDetailError)
-      return <div>An error occurred: {preferences.paymentDetailError}</div>;
-
-    return (
-      <div>
-        <Subheading>Current card</Subheading>
-        <Card
-          last4={preferences.paymentDetails.last4}
-          name={preferences.paymentDetails.name}
-          brand={preferences.paymentDetails.brand}
-        />
-
-        <Subheading style={{ marginTop: '2rem' }}>Update card info</Subheading>
-        <SubscribeForm
-          buttonName="Update"
-          loadingText="Updating Card Info..."
-          name={preferences.paymentDetails.name}
-          subscribe={this.updatePaymentDetails}
-        />
-      </div>
-    );
-  };
-
-  render() {
-    const { preferences } = this.props.store;
-    return (
-      <Container>
-        <Title>Payment Info</Title>
-        {preferences.isLoadingPaymentDetails ? (
-          <div>Loading payment details...</div>
-        ) : (
-          this.paymentDetails()
-        )}
-      </Container>
-    );
-  }
-}
-
-export const PaymentInfo = inject('store', 'signals')(
-  observer(PaymentInfoComponent)
-);
diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
index 3eeb4096875..0b532081e94 100644
--- a/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/index.tsx
@@ -17,7 +17,7 @@ import { Appearance } from './Appearance';
 import { EditorSettings } from './EditorPageSettings/EditorSettings';
 import { PreviewSettings } from './EditorPageSettings/PreviewSettings';
 import { CodeFormatting } from './CodeFormatting';
-import { PaymentInfo } from './PaymentInfo';
+import PaymentInfo from './PaymentInfo';
 import { Integrations } from './Integrations';
 import { Badges } from './Badges';
 import { Experiments } from './Experiments';