diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js
deleted file mode 100644
index 10bb80df324..00000000000
--- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { inject, hooksObserver } from 'app/componentConnectors';
-import styled from 'styled-components';
-
-import { Mutation } from 'react-apollo';
-
-import Input from '@codesandbox/common/lib/components/Input';
-import { Button } from '@codesandbox/common/lib/components/Button';
-import track from '@codesandbox/common/lib/utils/analytics';
-
-import { INVITE_TO_TEAM } from '../../../../queries';
-
-const ErrorMessage = styled.div`
-  color: ${props => props.theme.red};
-  font-weight: 600;
-  font-size: 0.875rem;
-  margin-bottom: 0.5rem;
-`;
-
-const AddTeamMember = ({ teamId, signals }) => (
-  <Mutation mutation={INVITE_TO_TEAM}>
-    {(mutate, { loading, error }) => {
-      let input = null;
-
-      const submit = e => {
-        e.preventDefault();
-        e.stopPropagation();
-
-        let isEmail = input.value.includes('@');
-
-        track('Team - Add Member', { email: isEmail });
-
-        isEmail = false;
-
-        // We don't enable email for now for privacy reasons
-
-        const variables = { teamId };
-
-        const { value } = input;
-        if (isEmail) {
-          variables.email = value;
-        } else {
-          variables.username = value;
-        }
-
-        mutate({
-          variables,
-        }).then(() => {
-          signals.notificationAdded({
-            message: `${value} has been invited!`,
-            type: 'success',
-          });
-        });
-
-        input.value = '';
-      };
-
-      const errorMessage =
-        error && error.graphQLErrors && error.graphQLErrors[0].message;
-
-      return (
-        <>
-          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
-          <form
-            style={{ display: 'flex' }}
-            onSubmit={loading ? undefined : submit}
-          >
-            <Input
-              ref={node => {
-                input = node;
-              }}
-              placeholder="Add member by username"
-              block
-            />
-            <Button disabled={loading} style={{ width: 200 }} small>
-              {loading ? 'Adding Member...' : 'Add Member'}
-            </Button>
-          </form>
-        </>
-      );
-    }}
-  </Mutation>
-);
-
-export default inject('signals')(hooksObserver(AddTeamMember));
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx
new file mode 100644
index 00000000000..66d6201abae
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/index.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { useMutation } from '@apollo/react-hooks';
+
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import track from '@codesandbox/common/lib/utils/analytics';
+
+import { useOvermind } from 'app/overmind';
+import { INVITE_TO_TEAM } from '../../../../queries';
+import { IAddTeamMemberProps, IMutationVariables } from './types';
+
+const ErrorMessage = styled.div`
+  color: ${props => props.theme.red};
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 0.5rem;
+`;
+
+export const AddTeamMember: React.FC<IAddTeamMemberProps> = ({ teamId }) => {
+  const { actions } = useOvermind();
+  const [inviteToTeam, { loading, error }] = useMutation(INVITE_TO_TEAM);
+  let input: HTMLInputElement = null;
+
+  const submit: React.FormEventHandler = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    let isEmail = input.value.includes('@');
+
+    track('Team - Add Member', { email: isEmail });
+
+    isEmail = false;
+
+    // We don't enable email for now for privacy reasons
+
+    const variables: IMutationVariables = { teamId };
+
+    const { value } = input;
+    if (isEmail) {
+      variables.email = value;
+    } else {
+      variables.username = value;
+    }
+
+    inviteToTeam({
+      variables,
+    }).then(() => {
+      actions.notificationAdded({
+        title: `${value} has been invited!`,
+        notificationType: 'success',
+      });
+    });
+
+    input.value = '';
+  };
+
+  const errorMessage =
+    error && error.graphQLErrors && error.graphQLErrors[0].message;
+
+  return (
+    <>
+      {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+      <form style={{ display: 'flex' }} onSubmit={loading ? undefined : submit}>
+        <Input
+          ref={node => {
+            input = node;
+          }}
+          placeholder="Add member by username"
+          block
+        />
+        <Button disabled={loading} style={{ width: 200 }} small>
+          {loading ? 'Adding Member...' : 'Add Member'}
+        </Button>
+      </form>
+    </>
+  );
+};
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts
new file mode 100644
index 00000000000..f7664a9e328
--- /dev/null
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/AddTeamMember/types.ts
@@ -0,0 +1,11 @@
+type TeamId = string;
+
+export interface IAddTeamMemberProps {
+  teamId: TeamId;
+}
+
+export interface IMutationVariables {
+  teamId: TeamId;
+  email?: string;
+  username?: string;
+}
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js
index 5e52a4a3970..cba30552388 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/RemoveTeamMember/index.js
@@ -11,7 +11,7 @@ import { REMOVE_FROM_TEAM, LEAVE_TEAM } from '../../../../queries';
 
 import { StyledCrossIcon } from '../elements';
 
-export default ({
+export const RemoveTeamMember = ({
   creatorId,
   currentUserId,
   userId,
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
index 93968c2224e..5e53359c67d 100644
--- a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
+++ b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
@@ -24,8 +24,8 @@ import {
   SET_TEAM_DESCRIPTION,
 } from '../../../queries';
 
-import AddTeamMember from './AddTeamMember';
-import RemoveTeamMember from './RemoveTeamMember';
+import { AddTeamMember } from './AddTeamMember';
+import { RemoveTeamMember } from './RemoveTeamMember';
 
 const User = ({ user, rightElement }) => (
   <div