diff --git a/packages/app/src/app/graphql/types.ts b/packages/app/src/app/graphql/types.ts
index 983f021e210..506efa19fe5 100644
--- a/packages/app/src/app/graphql/types.ts
+++ b/packages/app/src/app/graphql/types.ts
@@ -4678,6 +4678,45 @@ export type RecentlyDeletedTeamSandboxesQuery = {
   } | null;
 };
 
+export type SandboxByPathFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  title: string | null;
+  insertedAt: string;
+  updatedAt: string;
+  screenshotUrl: string | null;
+  isV2: boolean;
+  isFrozen: boolean;
+  privacy: number;
+  restricted: boolean;
+  draft: boolean;
+  viewCount: number;
+  teamId: any | null;
+  source: { __typename?: 'Source'; template: string | null };
+  customTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  forkedTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  collection: {
+    __typename?: 'Collection';
+    path: string;
+    id: any | null;
+  } | null;
+  author: { __typename?: 'User'; username: string } | null;
+  permissions: {
+    __typename?: 'SandboxProtectionSettings';
+    preventSandboxLeaving: boolean;
+    preventSandboxExport: boolean;
+  } | null;
+};
+
 export type SandboxesByPathQueryVariables = Exact<{
   path: Scalars['String'];
   teamId: InputMaybe<Scalars['ID']>;
@@ -4703,20 +4742,15 @@ export type SandboxesByPathQuery = {
         id: string;
         alias: string | null;
         title: string | null;
-        description: string | null;
-        lastAccessedAt: any;
         insertedAt: string;
         updatedAt: string;
-        removedAt: string | null;
-        privacy: number;
-        isFrozen: boolean;
         screenshotUrl: string | null;
-        viewCount: number;
-        likeCount: number;
         isV2: boolean;
-        draft: boolean;
+        isFrozen: boolean;
+        privacy: number;
         restricted: boolean;
-        authorId: any | null;
+        draft: boolean;
+        viewCount: number;
         teamId: any | null;
         source: { __typename?: 'Source'; template: string | null };
         customTemplate: {
@@ -4727,7 +4761,6 @@ export type SandboxesByPathQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {
@@ -4746,6 +4779,47 @@ export type SandboxesByPathQuery = {
   } | null;
 };
 
+export type DraftSandboxFragment = {
+  __typename?: 'Sandbox';
+  id: string;
+  alias: string | null;
+  title: string | null;
+  insertedAt: string;
+  updatedAt: string;
+  screenshotUrl: string | null;
+  isV2: boolean;
+  isFrozen: boolean;
+  privacy: number;
+  restricted: boolean;
+  draft: boolean;
+  viewCount: number;
+  authorId: any | null;
+  lastAccessedAt: any;
+  teamId: any | null;
+  source: { __typename?: 'Source'; template: string | null };
+  customTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  forkedTemplate: {
+    __typename?: 'Template';
+    id: any | null;
+    iconUrl: string | null;
+  } | null;
+  collection: {
+    __typename?: 'Collection';
+    path: string;
+    id: any | null;
+  } | null;
+  author: { __typename?: 'User'; username: string } | null;
+  permissions: {
+    __typename?: 'SandboxProtectionSettings';
+    preventSandboxLeaving: boolean;
+    preventSandboxExport: boolean;
+  } | null;
+};
+
 export type TeamDraftsQueryVariables = Exact<{
   teamId: Scalars['UUID4'];
   authorId: InputMaybe<Scalars['UUID4']>;
@@ -4763,20 +4837,17 @@ export type TeamDraftsQuery = {
         id: string;
         alias: string | null;
         title: string | null;
-        description: string | null;
-        lastAccessedAt: any;
         insertedAt: string;
         updatedAt: string;
-        removedAt: string | null;
-        privacy: number;
-        isFrozen: boolean;
         screenshotUrl: string | null;
-        viewCount: number;
-        likeCount: number;
         isV2: boolean;
-        draft: boolean;
+        isFrozen: boolean;
+        privacy: number;
         restricted: boolean;
+        draft: boolean;
+        viewCount: number;
         authorId: any | null;
+        lastAccessedAt: any;
         teamId: any | null;
         source: { __typename?: 'Source'; template: string | null };
         customTemplate: {
@@ -4787,7 +4858,6 @@ export type TeamDraftsQuery = {
         forkedTemplate: {
           __typename?: 'Template';
           id: any | null;
-          color: string | null;
           iconUrl: string | null;
         } | null;
         collection: {
diff --git a/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts b/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts
index bb428410c0e..441a9a24fe7 100644
--- a/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts
+++ b/packages/app/src/app/overmind/effects/gql/dashboard/queries.ts
@@ -98,6 +98,52 @@ export const deletedTeamSandboxes: Query<
   ${RECENTLY_DELETED_TEAM_SANDBOXES_FRAGMENT}
 `;
 
+const SANDBOX_BY_PATH_FRAGMENT = gql`
+  fragment sandboxByPath on Sandbox {
+    id
+    alias
+    title
+    insertedAt
+    updatedAt
+    screenshotUrl
+    isV2
+    isFrozen
+    privacy
+    restricted
+    draft
+    viewCount
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    forkedTemplate {
+      id
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const sandboxesByPath: Query<
   SandboxesByPathQuery,
   SandboxesByPathQueryVariables
@@ -113,15 +159,63 @@ export const sandboxesByPath: Query<
         id
         path
         sandboxes {
-          ...sandboxFragmentDashboard
+          ...sandboxByPath
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${SANDBOX_BY_PATH_FRAGMENT}
   ${sidebarCollectionDashboard}
 `;
 
+const DRAFT_SANDBOX_FRAGMENT = gql`
+  fragment draftSandbox on Sandbox {
+    id
+    alias
+    title
+    insertedAt
+    updatedAt
+    screenshotUrl
+    isV2
+    isFrozen
+    privacy
+    restricted
+    draft
+    viewCount
+    authorId
+    lastAccessedAt
+
+    source {
+      template
+    }
+
+    customTemplate {
+      id
+      iconUrl
+    }
+
+    forkedTemplate {
+      id
+      iconUrl
+    }
+
+    collection {
+      path
+      id
+    }
+
+    author {
+      username
+    }
+    teamId
+
+    permissions {
+      preventSandboxLeaving
+      preventSandboxExport
+    }
+  }
+`;
+
 export const getTeamDrafts: Query<
   TeamDraftsQuery,
   TeamDraftsQueryVariables
@@ -132,12 +226,12 @@ export const getTeamDrafts: Query<
       
       team(id: $teamId) {
         drafts(authorId: $authorId) {
-          ...sandboxFragmentDashboard
+          ...draftSandbox
         }
       }
     }
   }
-  ${sandboxFragmentDashboard}
+  ${DRAFT_SANDBOX_FRAGMENT}
 `;
 
 export const getCollections: Query<
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
index 83013d19dd5..5eb692d6e22 100755
--- a/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/actions.ts
@@ -6,6 +6,7 @@ import { uniq } from 'lodash-es';
 import {
   TemplateFragmentDashboardFragment,
   SandboxFragmentDashboardFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment,
   ProjectFragment,
 } from 'app/graphql/types';
@@ -192,7 +193,7 @@ export const createFolder = async (
 export const getDrafts = async ({ state, effects }: Context) => {
   const { dashboard, activeTeam } = state;
   try {
-    let sandboxes: SandboxFragmentDashboardFragment[] = [];
+    let sandboxes: (SandboxFragmentDashboardFragment | DraftSandboxFragment)[] = [];
 
     if (activeTeam) {
       const data = await effects.gql.queries.getTeamDrafts({
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts b/packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts
index b81167d8124..8e282535f81 100644
--- a/packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/internalActions.ts
@@ -1,5 +1,9 @@
 import { Context } from 'app/overmind';
-import { SandboxFragmentDashboardFragment } from 'app/graphql/types';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+  DraftSandboxFragment,
+} from 'app/graphql/types';
 
 /**
  * Change sandbox frozen in state and returns the sandboxes that have changed in their old state
@@ -15,14 +19,14 @@ export const changeSandboxesInState = (
      * The mutation that happens on the sandbox, make sure to return a *new* sandbox here, to make sure
      * that we can still rollback easily in the future.
      */
-    sandboxMutation: <T extends SandboxFragmentDashboardFragment>(
+    sandboxMutation: <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
       sandbox: T
     ) => T;
   }
 ) => {
   const changedSandboxes: Set<ReturnType<typeof sandboxMutation>> = new Set();
 
-  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment>(
+  const doMutateSandbox = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): T => {
     changedSandboxes.add(sandbox);
@@ -106,7 +110,7 @@ export const deleteSandboxesFromState = (
     ids: string[];
   }
 ) => {
-  const sandboxFilter = <T extends SandboxFragmentDashboardFragment>(
+  const sandboxFilter = <T extends SandboxFragmentDashboardFragment | SandboxByPathFragment | DraftSandboxFragment>(
     sandbox: T
   ): boolean => !ids.includes(sandbox.id);
 
diff --git a/packages/app/src/app/overmind/namespaces/dashboard/state.ts b/packages/app/src/app/overmind/namespaces/dashboard/state.ts
index 134a9a472e7..d314d957ed5 100755
--- a/packages/app/src/app/overmind/namespaces/dashboard/state.ts
+++ b/packages/app/src/app/overmind/namespaces/dashboard/state.ts
@@ -1,5 +1,7 @@
 import {
   SandboxFragmentDashboardFragment as Sandbox,
+  SandboxByPathFragment,
+  DraftSandboxFragment,
   RepoFragmentDashboardFragment as Repo,
   TemplateFragmentDashboardFragment as Template,
   TeamFragmentDashboardFragment,
@@ -16,16 +18,16 @@ import { derived } from 'overmind';
 import { DELETE_ME_COLLECTION, OrderBy } from './types';
 
 export type DashboardSandboxStructure = {
-  DRAFTS: Sandbox[] | null;
+  DRAFTS: DraftSandboxFragment[] | null;
   TEMPLATES: Template[] | null;
   DELETED: RecentlyDeletedTeamSandboxesFragment[] | null;
-  RECENT_SANDBOXES: Sandbox[] | null;
+  RECENT_SANDBOXES: (Sandbox | DraftSandboxFragment)[] | null;
   RECENT_BRANCHES: Branch[] | null;
-  SEARCH: Sandbox[] | null;
+  SEARCH: (Sandbox | DraftSandboxFragment)[] | null;
   TEMPLATE_HOME: Template[] | null;
-  SHARED: Sandbox[] | null;
+  SHARED: (Sandbox | DraftSandboxFragment)[] | null;
   ALL: {
-    [path: string]: Sandbox[];
+    [path: string]: (Sandbox | SandboxByPathFragment | DraftSandboxFragment)[];
   } | null;
   REPOS: {
     [path: string]: {
@@ -48,7 +50,7 @@ export type State = {
   viewMode: 'grid' | 'list';
   orderBy: OrderBy;
   getFilteredSandboxes: (
-    sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
+    sandboxes: Array<Sandbox | SandboxByPathFragment | RecentlyDeletedTeamSandboxesFragment | Repo | Template['sandbox']>
   ) => Sandbox[];
   deletedSandboxesByTime: {
     week: RecentlyDeletedTeamSandboxesFragment[];
@@ -137,7 +139,7 @@ export const state: State = {
   },
   getFilteredSandboxes: derived(
     ({ orderBy }: State) => (
-      sandboxes: Array<Sandbox | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
+      sandboxes: Array<Sandbox | SandboxByPathFragment | DraftSandboxFragment | RecentlyDeletedTeamSandboxesFragment | Template['sandbox']>
     ) => {
       const orderField = orderBy.field;
       const orderOrder = orderBy.order;
diff --git a/packages/app/src/app/overmind/namespaces/profile/state.ts b/packages/app/src/app/overmind/namespaces/profile/state.ts
index 80cfbf36959..513a9acd385 100755
--- a/packages/app/src/app/overmind/namespaces/profile/state.ts
+++ b/packages/app/src/app/overmind/namespaces/profile/state.ts
@@ -2,6 +2,7 @@ import { Profile, Sandbox, UserSandbox } from '@codesandbox/common/lib/types';
 import {
   Collection,
   SandboxFragmentDashboardFragment as CollectionSandbox,
+  SandboxByPathFragment,
 } from 'app/graphql/types';
 import { Context } from 'app/overmind';
 import { derived } from 'overmind';
@@ -11,7 +12,7 @@ export type ProfileCollection = Pick<
   Collection,
   'id' | 'path' | 'sandboxCount'
 > & {
-  sandboxes: CollectionSandbox[];
+  sandboxes: (CollectionSandbox | SandboxByPathFragment)[];
 };
 
 type State = {
diff --git a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx
index 64ece0735cf..b6efdec4c22 100644
--- a/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx
+++ b/packages/app/src/app/pages/Dashboard/Components/Sandbox/SandboxListItem.tsx
@@ -162,7 +162,7 @@ export const SandboxListItem = ({
           </Stack>
         </Column>
         <Column span={[0, 3, 3]} as={Stack} align="center">
-          {sandbox.removedAt ? (
+          {'removedAt' in sandbox && sandbox.removedAt ? (
             <Text
               size={3}
               variant={selected ? 'body' : 'muted'}
diff --git a/packages/app/src/app/pages/Dashboard/types.ts b/packages/app/src/app/pages/Dashboard/types.ts
index d352e4fd880..554bbdf050b 100644
--- a/packages/app/src/app/pages/Dashboard/types.ts
+++ b/packages/app/src/app/pages/Dashboard/types.ts
@@ -5,6 +5,7 @@ import {
   BranchFragment as Branch,
   ProjectFragment as Repository,
   RecentlyDeletedTeamSandboxesFragment,
+  DraftSandboxFragment,
 } from 'app/graphql/types';
 import { Context } from 'app/overmind';
 import {
@@ -27,7 +28,8 @@ export type DashboardSandbox = {
         prNumber?: number;
         originalGit?: RepoFragmentDashboardFragment['originalGit'];
       })
-    | RecentlyDeletedTeamSandboxesFragment;
+    | RecentlyDeletedTeamSandboxesFragment
+    | DraftSandboxFragment;
   noDrag?: boolean;
 };
 
diff --git a/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx b/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
index 7d16f5ce384..ddffe0478eb 100644
--- a/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
+++ b/packages/app/src/app/pages/Profile/SandboxPicker/SandboxCard.tsx
@@ -13,7 +13,10 @@ import {
 import designLanguage from '@codesandbox/components/lib/design-language/theme';
 import css from '@styled-system/css';
 import { Sandbox } from '@codesandbox/common/lib/types';
-import { SandboxFragmentDashboardFragment } from 'app/graphql/types';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+} from 'app/graphql/types';
 import { SandboxType } from '../constants';
 
 const PrivacyIcons = {
@@ -29,7 +32,7 @@ const privacyToName = {
 };
 
 export const SandboxCard: React.FC<{
-  sandbox: Sandbox | SandboxFragmentDashboardFragment;
+  sandbox: Sandbox | SandboxFragmentDashboardFragment | SandboxByPathFragment;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }> = ({ sandbox, onClick }) => {
   const { contextMenu } = useAppState().profile;
diff --git a/packages/app/src/app/pages/Profile/SandboxPicker/index.tsx b/packages/app/src/app/pages/Profile/SandboxPicker/index.tsx
index 436adc2b617..fb4779256cf 100644
--- a/packages/app/src/app/pages/Profile/SandboxPicker/index.tsx
+++ b/packages/app/src/app/pages/Profile/SandboxPicker/index.tsx
@@ -10,6 +10,10 @@ import {
   Column,
 } from '@codesandbox/components';
 import css from '@styled-system/css';
+import {
+  SandboxFragmentDashboardFragment,
+  SandboxByPathFragment,
+} from 'app/graphql/types';
 import { SandboxCard, SkeletonCard } from './SandboxCard';
 import { FolderCard } from './FolderCard';
 import { ProfileCollectionType } from '../constants';
@@ -53,7 +57,7 @@ export const SandboxPicker: React.FC<{ closeModal?: () => void }> = ({
     .filter(collection => collection.parent === selectedPath)
     .filter(collection => collection.path !== selectedPath);
 
-  const sandboxesInPath =
+  const sandboxesInPath: (SandboxFragmentDashboardFragment | SandboxByPathFragment)[] =
     collections.find(collection => collection.path === selectedPath)
       ?.sandboxes || [];