diff --git a/packages/app/src/app/overmind/actions.ts b/packages/app/src/app/overmind/actions.ts
index ccde4076e8d..094526df2ec 100755
--- a/packages/app/src/app/overmind/actions.ts
+++ b/packages/app/src/app/overmind/actions.ts
@@ -225,23 +225,26 @@ export const track: Action<{ name: string; data: any }> = (
 };
 
 export const refetchSandboxInfo: AsyncAction = async ({
-  state,
-  effects,
   actions,
+  effects,
+  state,
 }) => {
   const sandbox = state.editor.currentSandbox;
-  if (sandbox && sandbox.id) {
-    const updatedSandbox = await effects.api.getSandbox(sandbox.id);
 
-    sandbox.collection = updatedSandbox.collection;
-    sandbox.owned = updatedSandbox.owned;
-    sandbox.userLiked = updatedSandbox.userLiked;
-    sandbox.title = updatedSandbox.title;
-    sandbox.team = updatedSandbox.team;
-    sandbox.roomId = updatedSandbox.roomId;
-
-    await actions.editor.internal.initializeLiveSandbox(sandbox);
+  if (!sandbox?.id) {
+    return;
   }
+
+  const updatedSandbox = await effects.api.getSandbox(sandbox.id);
+
+  sandbox.collection = updatedSandbox.collection;
+  sandbox.owned = updatedSandbox.owned;
+  sandbox.userLiked = updatedSandbox.userLiked;
+  sandbox.title = updatedSandbox.title;
+  sandbox.team = updatedSandbox.team;
+  sandbox.roomId = updatedSandbox.roomId;
+
+  await actions.editor.internal.initializeLiveSandbox(sandbox);
 };
 
 export const acceptTeamInvitation: Action<{ teamName: string }> = (
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js
deleted file mode 100644
index 6adcecd00e8..00000000000
--- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { Query } from 'react-apollo';
-import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
-
-import { TEAMS_QUERY } from '../../../Dashboard/queries';
-import { TeamContainer, TeamName } from './elements';
-
-export default ({ onSelect, currentPath, currentTeamId }) => (
-  <div css={{ margin: '0 -1rem' }}>
-    <SandboxesItem
-      openByDefault
-      onSelect={onSelect}
-      currentPath={currentPath}
-      currentTeamId={currentTeamId}
-      teamId={undefined}
-    />
-
-    <Query query={TEAMS_QUERY}>
-      {({ loading, data, error }) => {
-        if (loading) {
-          return null;
-        }
-
-        if (error) {
-          return null;
-        }
-
-        const { teams } = data.me;
-
-        return teams.map(team => (
-          <TeamContainer key={team.id}>
-            <TeamName>{team.name}</TeamName>
-            <SandboxesItem
-              currentPath={currentPath}
-              currentTeamId={currentTeamId}
-              openByDefault
-              teamId={team.id}
-              onSelect={onSelect}
-            />
-          </TeamContainer>
-        ));
-      }}
-    </Query>
-  </div>
-);
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts
new file mode 100644
index 00000000000..b61d2c814b1
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/elements.ts
@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const TeamContainer = styled.div`
+  border-top: 2px solid rgba(0, 0, 0, 0.1);
+  padding-top: 0;
+  margin-top: 1rem;
+`;
+
+export const TeamName = styled.div`
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  margin: 1rem 1rem;
+`;
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx
new file mode 100644
index 00000000000..719ee0df0b1
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/TeamsPicker/index.tsx
@@ -0,0 +1,41 @@
+import { useQuery } from '@apollo/react-hooks';
+import React, { ComponentProps, FunctionComponent } from 'react';
+
+import { TEAMS_QUERY } from 'app/pages/Dashboard/queries';
+import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
+
+import { TeamContainer, TeamName } from './elements';
+
+type Props = Pick<
+  ComponentProps<typeof SandboxesItem>,
+  'currentPath' | 'currentTeamId' | 'onSelect'
+>;
+export const TeamsPicker: FunctionComponent<Props> = ({
+  currentPath,
+  currentTeamId,
+  onSelect,
+}) => {
+  const { loading, error, data } = useQuery(TEAMS_QUERY);
+
+  if (loading || error) {
+    return null;
+  }
+
+  return (
+    <>
+      {data.me.teams.map(({ id, name }) => (
+        <TeamContainer key={id}>
+          <TeamName>{name}</TeamName>
+
+          <SandboxesItem
+            currentPath={currentPath}
+            currentTeamId={currentTeamId}
+            openByDefault
+            teamId={id}
+            onSelect={onSelect}
+          />
+        </TeamContainer>
+      ))}
+    </>
+  );
+};
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts
new file mode 100644
index 00000000000..5fd5172342c
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/elements.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  margin: 0 -1rem;
+`;
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx
new file mode 100644
index 00000000000..713af11c86e
--- /dev/null
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/DirectoryPicker/index.tsx
@@ -0,0 +1,32 @@
+import React, { ComponentProps, FunctionComponent } from 'react';
+
+import { SandboxesItem } from 'app/pages/Dashboard/Sidebar/SandboxesItem';
+
+import { Container } from './elements';
+import { TeamsPicker } from './TeamsPicker';
+
+type Props = Pick<
+  ComponentProps<typeof TeamsPicker>,
+  'currentPath' | 'currentTeamId' | 'onSelect'
+>;
+export const DirectoryPicker: FunctionComponent<Props> = ({
+  currentPath,
+  currentTeamId,
+  onSelect,
+}) => (
+  <Container>
+    <SandboxesItem
+      currentPath={currentPath}
+      currentTeamId={currentTeamId}
+      onSelect={onSelect}
+      openByDefault
+      teamId={undefined}
+    />
+
+    <TeamsPicker
+      currentPath={currentPath}
+      currentTeamId={currentTeamId}
+      onSelect={onSelect}
+    />
+  </Container>
+);
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts
index 0074229cbed..f1b270af2b1 100644
--- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/elements.ts
@@ -1,46 +1,54 @@
+import { Button as ButtonBase } from '@codesandbox/common/lib/components/Button';
+import ChevronRightBase from 'react-icons/lib/md/chevron-right';
 import styled, { css } from 'styled-components';
 
+import { Container as ContainerBase } from '../elements';
+
 export const Block = styled.div<{ right?: boolean }>`
-  background-color: ${props => props.theme.background2};
-  color: rgba(255, 255, 255, 0.9);
-  padding: 1rem 1.5rem;
-
-  font-size: 0.875rem;
-  font-weight: 600;
-
-  ${props =>
-    props.right &&
-    css`
-      text-align: right;
-    `};
-`;
+  ${({ right, theme }) => css`
+    background-color: ${theme.background2};
+    color: rgba(255, 255, 255, 0.9);
+    padding: 1rem 1.5rem;
 
-export const TeamContainer = styled.div`
-  border-top: 2px solid rgba(0, 0, 0, 0.1);
-  padding-top: 0;
-  margin-top: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+
+    ${right &&
+      css`
+        text-align: right;
+      `};
+  `};
 `;
 
-export const TeamName = styled.div`
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.5);
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  margin: 1rem 1rem;
+export const Button = styled(ButtonBase)`
+  display: inline-flex;
+  align-items: center;
 `;
 
 export const CancelButton = styled.button`
-  transition: 0.3s ease color;
-  font-size: 0.875rem;
-  margin-right: 1.5rem;
-  font-weight: 600;
-  color: rgba(255, 255, 255, 0.8);
-  outline: 0;
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-
-  &:hover {
-    color: ${props => props.theme.secondary};
-  }
+  ${({ theme }) => css`
+    transition: 0.3s ease color;
+    font-size: 0.875rem;
+    margin-right: 1.5rem;
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.8);
+    outline: 0;
+    border: 0;
+    background-color: transparent;
+    cursor: pointer;
+
+    &:hover {
+      color: ${theme.secondary};
+    }
+  `};
+`;
+
+export const ChevronRight = styled(ChevronRightBase)`
+  margin-right: -0.25rem;
+  margin-left: 0.25rem;
+`;
+
+export const Container = styled(ContainerBase)`
+  max-height: 400px;
+  overflow: auto;
 `;
diff --git a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
index b3a6229cf3a..1aad8b24f77 100644
--- a/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx
@@ -1,45 +1,51 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useOvermind } from 'app/overmind';
-import { basename } from 'path';
 import track from '@codesandbox/common/lib/utils/analytics';
-import { Button } from '@codesandbox/common/lib/components/Button';
-import ChevronRight from 'react-icons/lib/md/chevron-right';
+import { basename } from 'path';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 
-import DirectoryPicker from './DirectoryPicker';
-import { Container } from '../elements';
+import { useOvermind } from 'app/overmind';
 
-import { Block, CancelButton } from './elements';
 import { addSandboxesToFolder } from '../../../Dashboard/queries';
 
-const MoveSandboxFolderModal = () => {
+import { DirectoryPicker } from './DirectoryPicker';
+import {
+  Block,
+  Button,
+  CancelButton,
+  ChevronRight,
+  Container,
+} from './elements';
+
+export const MoveSandboxFolderModal: FunctionComponent = () => {
   const {
+    actions: { modalClosed, refetchSandboxInfo },
     state: {
-      editor: { currentSandbox: sandbox },
+      editor: {
+        currentSandbox: { collection, id, team },
+      },
     },
-    actions: { refetchSandboxInfo, modalClosed },
   } = useOvermind();
-  const { collection } = sandbox;
-
-  const [loading, setLoading] = useState(false);
   const [error, setError] = useState(undefined);
-  const [teamId, setTeamId] = useState(
-    sandbox.team ? sandbox.team.id || undefined : undefined
-  );
-  const [path, setPath] = useState(collection ? collection.path : '/');
-
-  const onSelect = useCallback(({ teamId: newTeamId, path: newPath }) => {
-    setTeamId(newTeamId);
-    setPath(newPath);
-  }, []);
+  const [loading, setLoading] = useState(false);
+  const [path, setPath] = useState(collection?.path || '/');
+  const [teamId, setTeamId] = useState(team?.id);
 
-  const handleMove = useCallback(() => {
+  const handleMove = () => {
     setLoading(true);
+
     setError(undefined);
-  }, []);
+  };
+  const onSelect = ({ teamId: newTeamId, path: newPath }) => {
+    setTeamId(newTeamId);
+
+    setPath(newPath);
+  };
 
   useEffect(() => {
-    if (!loading) return;
-    addSandboxesToFolder([sandbox.id], path, teamId)
+    if (!loading) {
+      return;
+    }
+
+    addSandboxesToFolder([id], path, teamId)
       .then(() => {
         refetchSandboxInfo();
 
@@ -48,45 +54,42 @@ const MoveSandboxFolderModal = () => {
 
         track('Move Sandbox From Editor');
       })
-      .catch(e => {
-        setError(e.message);
+      .catch(({ message }) => {
+        setError(message);
+
         setLoading(false);
       });
-  }, [loading, path, teamId, sandbox, refetchSandboxInfo, modalClosed]);
+  }, [id, loading, modalClosed, path, refetchSandboxInfo, teamId]);
 
   return (
     <div>
       <Block>Move to Folder</Block>
-      <Container style={{ maxHeight: 400, overflow: 'auto' }}>
+
+      <Container>
         <DirectoryPicker
-          onSelect={onSelect}
-          currentTeamId={teamId}
           currentPath={path}
+          currentTeamId={teamId}
+          onSelect={onSelect}
         />
       </Container>
 
       {error}
 
       <Block right>
-        <CancelButton onClick={modalClosed}>Cancel</CancelButton>
-
-        <Button
-          onClick={handleMove}
-          style={{ display: 'inline-flex', alignItems: 'center' }}
-          small
-          disabled={loading}
-        >
+        <CancelButton onClick={() => modalClosed()}>Cancel</CancelButton>
+
+        <Button disabled={loading} onClick={handleMove} small>
           {loading ? (
             'Moving Sandbox...'
           ) : (
             <>
-              Move to{' '}
-              {path !== '/'
-                ? basename(path)
-                : `${teamId ? 'Our' : 'My'} Sandboxes`}
-              <ChevronRight
-                style={{ marginRight: '-.25rem', marginLeft: '.25rem' }}
-              />
+              {`Move to ${
+                path !== '/'
+                  ? basename(path)
+                  : `${teamId ? 'Our' : 'My'} Sandboxes`
+              }`}
+
+              <ChevronRight />
             </>
           )}
         </Button>
@@ -94,6 +97,3 @@ const MoveSandboxFolderModal = () => {
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default MoveSandboxFolderModal;
diff --git a/packages/app/src/app/pages/common/Modals/index.tsx b/packages/app/src/app/pages/common/Modals/index.tsx
index 9cbbc7199fc..2d031426f62 100644
--- a/packages/app/src/app/pages/common/Modals/index.tsx
+++ b/packages/app/src/app/pages/common/Modals/index.tsx
@@ -36,7 +36,9 @@ import { SurveyModal } from './SurveyModal';
 import UploadModal from './UploadModal';
 
 const MoveSandboxFolderModal = Loadable(() =>
-  import('./MoveSandboxFolderModal')
+  import('./MoveSandboxFolderModal').then(module => ({
+    default: module.MoveSandboxFolderModal,
+  }))
 );
 
 const modals = {