diff --git a/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.js b/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.js
deleted file mode 100644
index aa4b7b48b17..00000000000
--- a/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.js
+++ /dev/null
@@ -1,153 +0,0 @@
-import * as React from 'react';
-import { inject, observer } from 'app/componentConnectors';
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { Button } from '@codesandbox/common/lib/components/Button';
-
-import AutosizeTextArea from '@codesandbox/common/lib/components/AutosizeTextArea';
-import Input from '@codesandbox/common/lib/components/Input';
-import pushToAirtable from 'app/store/utils/pushToAirtable';
-
-import { EmojiButton } from './elements';
-
-class Feedback extends React.Component {
-  state = {
-    feedback: '',
-    email: (this.props.user || {}).email,
-    emoji: null,
-    loading: false,
-  };
-
-  onChange = e => {
-    this.setState({ [e.target.name]: e.target.value });
-  };
-
-  onSubmit = evt => {
-    const { id, user, signals } = this.props;
-    const { feedback, emoji, email } = this.state;
-    evt.preventDefault();
-
-    this.setState({ loading: true }, () => {
-      pushToAirtable({
-        sandboxId: id,
-        feedback,
-        emoji,
-        username: (user || {}).username,
-        email,
-      })
-        .then(() => {
-          this.setState(
-            {
-              feedback: '',
-              emoji: null,
-              loading: false,
-            },
-            () => {
-              signals.modalClosed();
-
-              signals.notificationAdded({
-                message: `Thanks for your feedback!`,
-                type: 'success',
-              });
-            }
-          );
-        })
-        .catch(e => {
-          signals.notificationAdded({
-            message: `Something went wrong while sending feedback: ${
-              e.message
-            }`,
-            type: 'error',
-          });
-
-          this.setState({ loading: false });
-        });
-    });
-  };
-
-  setHappy = () => {
-    this.setState({ emoji: 'happy' });
-  };
-
-  setSad = () => {
-    this.setState({ emoji: 'sad' });
-  };
-
-  render() {
-    const { feedback, emoji, email } = this.state;
-    return (
-      <form onSubmit={this.onSubmit}>
-        <AutosizeTextArea
-          css={`
-            width: 100%;
-          `}
-          name="feedback"
-          value={feedback}
-          onChange={this.onChange}
-          placeholder="What are your thoughts?"
-          minRows={3}
-          required
-        />
-        {!this.props.user && (
-          <Margin top={0.5}>
-            <Input
-              css={`
-                width: 100%;
-              `}
-              type="email"
-              name="email"
-              value={email}
-              onChange={this.onChange}
-              placeholder="Email if you wish to be contacted"
-            />
-          </Margin>
-        )}
-
-        <Margin
-          top={0.5}
-          css={`
-            display: flex;
-            align-items: center;
-          `}
-        >
-          <EmojiButton
-            type="button"
-            active={emoji === 'happy'}
-            onClick={this.setHappy}
-          >
-            <span role="img" aria-label="happy">
-              😊
-            </span>
-          </EmojiButton>
-
-          <EmojiButton
-            type="button"
-            active={emoji === 'sad'}
-            onClick={this.setSad}
-          >
-            <span role="img" aria-label="sad">
-              😞
-            </span>
-          </EmojiButton>
-
-          <div
-            css={`
-              flex: 1;
-            `}
-          >
-            <Button
-              disabled={this.state.loading}
-              small
-              css={`
-                float: right;
-              `}
-            >
-              {this.state.loading ? 'Sending...' : 'Submit'}
-            </Button>
-          </div>
-        </Margin>
-      </form>
-    );
-  }
-}
-
-export default inject('signals')(observer(Feedback));
diff --git a/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx b/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx
new file mode 100644
index 00000000000..e084d4c1add
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/FeedbackModal/Feedback.tsx
@@ -0,0 +1,132 @@
+import * as React from 'react';
+import { useOvermind } from 'app/overmind';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { CurrentUser } from '@codesandbox/common/lib/types';
+
+import AutosizeTextArea from '@codesandbox/common/lib/components/AutosizeTextArea';
+import Input from '@codesandbox/common/lib/components/Input';
+import pushToAirtable from 'app/store/utils/pushToAirtable';
+
+import { EmojiButton } from './elements';
+
+interface ICollectionInfoProps {
+  id: string;
+  user: CurrentUser;
+}
+
+const Feedback: React.FC<ICollectionInfoProps> = ({ id, user }) => {
+  const {
+    actions: { modalClosed, notificationAdded },
+  } = useOvermind();
+
+  const [feedback, setFeedback] = React.useState('');
+  const [email, setEmail] = React.useState((user || {}).email);
+  const [emoji, setEmoji] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+
+  const setHappy = () => setEmoji('happy');
+
+  const setSad = () => setEmoji('sad');
+
+  const onSubmit = async evt => {
+    evt.preventDefault();
+    setLoading(true);
+    try {
+      await pushToAirtable({
+        sandboxId: id,
+        feedback,
+        emoji,
+        username: (user || {}).username,
+        email,
+      });
+      setFeedback('');
+      setEmoji(null);
+      setLoading(false);
+
+      modalClosed();
+      notificationAdded({
+        title: `Thanks for your feedback!`,
+        notificationType: 'success',
+      });
+    } catch (e) {
+      notificationAdded({
+        title: `Something went wrong while sending feedback: ${e.message}`,
+        notificationType: 'error',
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <AutosizeTextArea
+        css={`
+          width: 100%;
+        `}
+        name="feedback"
+        value={feedback}
+        onChange={e => setFeedback(e.target.value)}
+        placeholder="What are your thoughts?"
+        minRows={3}
+        required
+      />
+      {!user && (
+        <Margin top={0.5}>
+          <Input
+            css={`
+              width: 100%;
+            `}
+            type="email"
+            name="email"
+            value={email}
+            onChange={e => setEmail(e.target.value)}
+            placeholder="Email if you wish to be contacted"
+          />
+        </Margin>
+      )}
+
+      <Margin
+        top={0.5}
+        css={`
+          display: flex;
+          align-items: center;
+        `}
+      >
+        <EmojiButton
+          type="button"
+          active={emoji === 'happy'}
+          onClick={setHappy}
+        >
+          <span role="img" aria-label="happy">
+            😊
+          </span>
+        </EmojiButton>
+
+        <EmojiButton type="button" active={emoji === 'sad'} onClick={setSad}>
+          <span role="img" aria-label="sad">
+            😞
+          </span>
+        </EmojiButton>
+
+        <div
+          css={`
+            flex: 1;
+          `}
+        >
+          <Button
+            disabled={loading}
+            small
+            css={`
+              float: right;
+            `}
+          >
+            {loading ? 'Sending...' : 'Submit'}
+          </Button>
+        </div>
+      </Margin>
+    </form>
+  );
+};
+
+export default Feedback;
diff --git a/packages/app/src/app/pages/common/Modals/FeedbackModal/elements.js b/packages/app/src/app/pages/common/Modals/FeedbackModal/elements.ts
similarity index 89%
rename from packages/app/src/app/pages/common/Modals/FeedbackModal/elements.js
rename to packages/app/src/app/pages/common/Modals/FeedbackModal/elements.ts
index f04aa332146..12018954abb 100644
--- a/packages/app/src/app/pages/common/Modals/FeedbackModal/elements.js
+++ b/packages/app/src/app/pages/common/Modals/FeedbackModal/elements.ts
@@ -1,6 +1,10 @@
 import styled, { css } from 'styled-components';
 
-export const EmojiButton = styled.button`
+interface Props {
+  active: boolean;
+}
+
+export const EmojiButton = styled.button<Props>`
   transition: 0.3s ease all;
   border: 2px solid rgba(0, 0, 0, 0.2);
   background-color: rgba(0, 0, 0, 0.3);