diff --git a/server/e2e/gql_project_test.go b/server/e2e/gql_project_test.go
index aad2e57ad..a6b41c741 100644
--- a/server/e2e/gql_project_test.go
+++ b/server/e2e/gql_project_test.go
@@ -452,3 +452,136 @@ func TestSortByUpdatedAt(t *testing.T) {
 	edges.Element(1).Object().Value("node").Object().Value("name").Equal("project3-test")
 	edges.Element(2).Object().Value("node").Object().Value("name").Equal("project1-test")
 }
+
+//  go test -v -run TestArchiveProject ./e2e/...
+
+func TestArchiveProject(t *testing.T) {
+
+	e := StartServer(t, &config.Config{
+		Origins: []string{"https://example.com"},
+		AuthSrv: config.AuthSrvConfig{
+			Disabled: true,
+		},
+	}, true, baseSeeder)
+
+	createProject(e, "project1-test")
+	project2ID := createProject(e, "project2-test")
+	createProject(e, "project3-test")
+
+	// Archive 'project2'
+	requestBody := GraphQLRequest{
+		OperationName: "ArchiveProject",
+		Query: `mutation ArchiveProject($projectId: ID!, $archived: Boolean!) {
+				updateProject(input: {projectId: $projectId, archived: $archived}) {
+					project {
+						id
+						isArchived
+						__typename
+					}
+					__typename
+				}
+			}`,
+		Variables: map[string]any{
+			"projectId": project2ID,
+			"archived":  true,
+		},
+	}
+	e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(requestBody).
+		Expect().
+		Status(http.StatusOK).
+		JSON()
+
+	requestBody = GraphQLRequest{
+		OperationName: "GetProjects",
+		Query: `query GetProjects($teamId: ID!, $includeArchived: Boolean, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {
+			projects(teamId: $teamId, includeArchived: $includeArchived, pagination: $pagination, keyword: $keyword, sort: $sort) {
+				edges {
+					node {
+						id
+						...ProjectFragment
+						scene {
+							id
+							__typename
+						}
+						__typename
+					}
+					__typename
+				}
+				nodes {
+					id
+					...ProjectFragment
+					scene {
+						id
+						__typename
+					}
+					__typename
+				}
+				pageInfo {
+					endCursor
+					hasNextPage
+					hasPreviousPage
+					startCursor
+					__typename
+				}
+				totalCount
+				__typename
+			}
+		}
+		fragment ProjectFragment on Project {
+			id
+			name
+			description
+			imageUrl
+			isArchived
+			isBasicAuthActive
+			basicAuthUsername
+			basicAuthPassword
+			publicTitle
+			publicDescription
+			publicImage
+			alias
+			enableGa
+			trackingId
+			publishmentStatus
+			updatedAt
+			createdAt
+			coreSupport
+			starred
+			__typename
+		}`,
+		Variables: map[string]any{
+			"teamId":          wID.String(),
+			"includeArchived": false,
+			"pagination": map[string]any{
+				"first": 16,
+			},
+			"sort": map[string]string{
+				"field":     "UPDATEDAT",
+				"direction": "DESC",
+			},
+		},
+	}
+
+	edges := e.POST("/api/graphql").
+		WithHeader("Origin", "https://example.com").
+		WithHeader("X-Reearth-Debug-User", uID.String()).
+		WithHeader("Content-Type", "application/json").
+		WithJSON(requestBody).
+		Expect().
+		Status(http.StatusOK).
+		JSON().
+		Object().
+		Value("data").Object().
+		Value("projects").Object().
+		Value("edges").Array()
+
+	// `project2-test` is archived and will not be retrieved
+	edges.Length().Equal(3)
+	edges.Element(0).Object().Value("node").Object().Value("name").Equal("project3-test")
+	edges.Element(1).Object().Value("node").Object().Value("name").Equal("project1-test")
+	edges.Element(2).Object().Value("node").Object().Value("name").Equal("p1")
+}
diff --git a/server/go.mod b/server/go.mod
index 885587c4a..a785d42bd 100644
--- a/server/go.mod
+++ b/server/go.mod
@@ -23,6 +23,7 @@ require (
 	github.com/kennygrant/sanitize v1.2.4
 	github.com/labstack/echo/v4 v4.11.4
 	github.com/mitchellh/mapstructure v1.5.0
+	github.com/oklog/ulid v1.3.1
 	github.com/paulmach/go.geojson v1.4.0
 	github.com/pkg/errors v0.9.1
 	github.com/ravilushqa/otelgqlgen v0.15.0
@@ -116,7 +117,6 @@ require (
 	github.com/mattn/go-isatty v0.0.20 // indirect
 	github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe // indirect
 	github.com/nicksnyder/go-i18n/v2 v2.4.0 // indirect
-	github.com/oklog/ulid v1.3.1 // indirect
 	github.com/opentracing/opentracing-go v1.2.0 // indirect
 	github.com/pmezard/go-difflib v1.0.0 // indirect
 	github.com/rs/cors v1.10.1 // indirect
diff --git a/server/internal/adapter/gql/loader_project.go b/server/internal/adapter/gql/loader_project.go
index 8b0c34080..850dae687 100644
--- a/server/internal/adapter/gql/loader_project.go
+++ b/server/internal/adapter/gql/loader_project.go
@@ -40,13 +40,13 @@ func (c *ProjectLoader) Fetch(ctx context.Context, ids []gqlmodel.ID) ([]*gqlmod
 	return projects, nil
 }
 
-func (c *ProjectLoader) FindByWorkspace(ctx context.Context, wsID gqlmodel.ID, keyword *string, sort *project.SortType, pagination *gqlmodel.Pagination) (*gqlmodel.ProjectConnection, error) {
+func (c *ProjectLoader) FindByWorkspace(ctx context.Context, wsID gqlmodel.ID, includeArchived *bool, keyword *string, sort *project.SortType, pagination *gqlmodel.Pagination) (*gqlmodel.ProjectConnection, error) {
 	tid, err := gqlmodel.ToID[accountdomain.Workspace](wsID)
 	if err != nil {
 		return nil, err
 	}
 
-	res, pi, err := c.usecase.FindByWorkspace(ctx, tid, keyword, sort, gqlmodel.ToPagination(pagination), getOperator(ctx))
+	res, pi, err := c.usecase.FindByWorkspace(ctx, tid, includeArchived, keyword, sort, gqlmodel.ToPagination(pagination), getOperator(ctx))
 	if err != nil {
 		return nil, err
 	}
diff --git a/server/internal/adapter/gql/resolver_query.go b/server/internal/adapter/gql/resolver_query.go
index 2ed6d9196..3e682f5a4 100644
--- a/server/internal/adapter/gql/resolver_query.go
+++ b/server/internal/adapter/gql/resolver_query.go
@@ -237,7 +237,7 @@ func (r *queryResolver) Scene(ctx context.Context, projectID gqlmodel.ID) (*gqlm
 }
 
 func (r *queryResolver) Projects(ctx context.Context, teamID gqlmodel.ID, includeArchived *bool, pagination *gqlmodel.Pagination, keyword *string, sortType *gqlmodel.ProjectSort) (*gqlmodel.ProjectConnection, error) {
-	return loaders(ctx).Project.FindByWorkspace(ctx, teamID, keyword, gqlmodel.ProjectSortTypeFrom(sortType), pagination)
+	return loaders(ctx).Project.FindByWorkspace(ctx, teamID, includeArchived, keyword, gqlmodel.ProjectSortTypeFrom(sortType), pagination)
 }
 
 func (r *queryResolver) DatasetSchemas(ctx context.Context, sceneID gqlmodel.ID, first *int, last *int, after *usecasex.Cursor, before *usecasex.Cursor) (*gqlmodel.DatasetSchemaConnection, error) {
diff --git a/server/internal/adapter/gql/resolver_team.go b/server/internal/adapter/gql/resolver_team.go
index 3f5470e1b..65ab4aec6 100644
--- a/server/internal/adapter/gql/resolver_team.go
+++ b/server/internal/adapter/gql/resolver_team.go
@@ -34,7 +34,7 @@ func (r *teamResolver) Assets(ctx context.Context, obj *gqlmodel.Team, first *in
 }
 
 func (r *teamResolver) Projects(ctx context.Context, obj *gqlmodel.Team, includeArchived *bool, first *int, last *int, after *usecasex.Cursor, before *usecasex.Cursor) (*gqlmodel.ProjectConnection, error) {
-	return loaders(ctx).Project.FindByWorkspace(ctx, obj.ID, nil, nil, &gqlmodel.Pagination{
+	return loaders(ctx).Project.FindByWorkspace(ctx, obj.ID, includeArchived, nil, nil, &gqlmodel.Pagination{
 		First:  first,
 		Last:   last,
 		After:  after,
diff --git a/server/internal/infrastructure/memory/project.go b/server/internal/infrastructure/memory/project.go
index 13688864f..5c62603e3 100644
--- a/server/internal/infrastructure/memory/project.go
+++ b/server/internal/infrastructure/memory/project.go
@@ -46,6 +46,9 @@ func (r *Project) FindByWorkspace(ctx context.Context, id accountdomain.Workspac
 	result := []*project.Project{}
 	for _, d := range r.data {
 		if d.Workspace() == id && (filter.Keyword == nil || strings.Contains(d.Name(), *filter.Keyword)) {
+			if filter.IncludeArchived != nil && !*filter.IncludeArchived && d.IsArchived() {
+				continue
+			}
 			result = append(result, d)
 		}
 	}
diff --git a/server/internal/infrastructure/mongo/project.go b/server/internal/infrastructure/mongo/project.go
index cda562ed0..74fea087b 100644
--- a/server/internal/infrastructure/mongo/project.go
+++ b/server/internal/infrastructure/mongo/project.go
@@ -93,6 +93,12 @@ func (r *Project) FindByWorkspace(ctx context.Context, id accountdomain.Workspac
 		})
 	}
 
+	if uFilter.IncludeArchived != nil {
+		if !*uFilter.IncludeArchived {
+			filter = mongox.And(filter, "archived", false)
+		}
+	}
+
 	return r.paginate(ctx, filter, uFilter.Sort, uFilter.Pagination)
 }
 
diff --git a/server/internal/usecase/interactor/project.go b/server/internal/usecase/interactor/project.go
index 23743bcc0..86507a7af 100644
--- a/server/internal/usecase/interactor/project.go
+++ b/server/internal/usecase/interactor/project.go
@@ -77,11 +77,12 @@ func (i *Project) Fetch(ctx context.Context, ids []id.ProjectID, _ *usecase.Oper
 	return i.projectRepo.FindByIDs(ctx, ids)
 }
 
-func (i *Project) FindByWorkspace(ctx context.Context, id accountdomain.WorkspaceID, keyword *string, sort *project.SortType, p *usecasex.Pagination, operator *usecase.Operator) ([]*project.Project, *usecasex.PageInfo, error) {
+func (i *Project) FindByWorkspace(ctx context.Context, id accountdomain.WorkspaceID, includeArchived *bool, keyword *string, sort *project.SortType, p *usecasex.Pagination, operator *usecase.Operator) ([]*project.Project, *usecasex.PageInfo, error) {
 	return i.projectRepo.FindByWorkspace(ctx, id, repo.ProjectFilter{
-		Pagination: p,
-		Sort:       sort,
-		Keyword:    keyword,
+		IncludeArchived: includeArchived,
+		Pagination:      p,
+		Sort:            sort,
+		Keyword:         keyword,
 	})
 }
 
diff --git a/server/internal/usecase/interfaces/project.go b/server/internal/usecase/interfaces/project.go
index 069e13284..eeb6bf90b 100644
--- a/server/internal/usecase/interfaces/project.go
+++ b/server/internal/usecase/interfaces/project.go
@@ -61,7 +61,7 @@ var (
 
 type Project interface {
 	Fetch(context.Context, []id.ProjectID, *usecase.Operator) ([]*project.Project, error)
-	FindByWorkspace(context.Context, accountdomain.WorkspaceID, *string, *project.SortType, *usecasex.Pagination, *usecase.Operator) ([]*project.Project, *usecasex.PageInfo, error)
+	FindByWorkspace(context.Context, accountdomain.WorkspaceID, *bool, *string, *project.SortType, *usecasex.Pagination, *usecase.Operator) ([]*project.Project, *usecasex.PageInfo, error)
 	FindStarredByWorkspace(context.Context, accountdomain.WorkspaceID, *usecase.Operator) ([]*project.Project, error)
 	Create(context.Context, CreateProjectParam, *usecase.Operator) (*project.Project, error)
 	Update(context.Context, UpdateProjectParam, *usecase.Operator) (*project.Project, error)
diff --git a/server/internal/usecase/repo/project.go b/server/internal/usecase/repo/project.go
index 7ba88d180..d867783ea 100644
--- a/server/internal/usecase/repo/project.go
+++ b/server/internal/usecase/repo/project.go
@@ -11,9 +11,10 @@ import (
 )
 
 type ProjectFilter struct {
-	Sort       *project.SortType
-	Keyword    *string
-	Pagination *usecasex.Pagination
+	IncludeArchived *bool
+	Sort            *project.SortType
+	Keyword         *string
+	Pagination      *usecasex.Pagination
 }
 
 type Project interface {
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
index 301788636..732b8deb4 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectGridViewItem.tsx
@@ -1,4 +1,12 @@
-import { Button, PopupMenu, TextInput } from "@reearth/beta/lib/reearth-ui";
+import {
+  Button,
+  PopupMenu,
+  Typography,
+  TextInput,
+  Modal,
+  ModalPanel
+} from "@reearth/beta/lib/reearth-ui";
+import { useT } from "@reearth/services/i18n";
 import { styled, useTheme } from "@reearth/services/theme";
 import { FC } from "react";
 
@@ -10,6 +18,7 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
   selectedProjectId,
   onProjectOpen,
   onProjectSelect,
+  onArchiveProject,
   onProjectUpdate
 }) => {
   const theme = useTheme();
@@ -21,10 +30,13 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     isHovered,
     isStarred,
     hasMapOrStoryPublished,
+    archiveOpen,
     handleProjectNameChange,
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
+    handleArchivedModal,
+    handleProjectArchived,
     handleProjectStarClick
     // exportModalVisible,
     // closeExportModal,
@@ -33,9 +45,12 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
     project,
     selectedProjectId,
     onProjectUpdate,
+    onArchiveProject,
     onProjectSelect
   });
 
+  const t = useT();
+
   return (
     <>
       <Card>
@@ -98,10 +113,51 @@ const ProjectGridViewItem: FC<ProjectProps> = ({
           <ModalContent />
         </ModalPanel>
       </Modal> */}
+      <Modal size="small" visible={archiveOpen}>
+        <ModalPanel
+          title={t("Remove")}
+          onCancel={() => handleArchivedModal(false)}
+          actions={
+            <>
+              <Button
+                key="cancel"
+                title={t("Cancel")}
+                appearance="secondary"
+                onClick={() => handleArchivedModal(false)}
+                size="normal"
+              />
+              <Button
+                size="normal"
+                key="delete"
+                appearance="dangerous"
+                title={t("Delete")}
+                onClick={() => handleProjectArchived(true)}
+                disabled={!projectName}
+              />
+            </>
+          }
+        >
+          <ModalContentWrapper>
+            <Typography size="body">
+              {t(
+                "This process will remove this project to Recycle bin. If the project was published, this also means websites and domains referencing the project will not be able to access it anymore."
+              )}
+            </Typography>
+          </ModalContentWrapper>
+        </ModalPanel>
+      </Modal>
     </>
   );
 };
 
+const ModalContentWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.large,
+  padding: theme.spacing.large,
+  background: theme.bg[1]
+}));
+
 export default ProjectGridViewItem;
 
 const Card = styled("div")(() => ({
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
index a070a82ac..54f35ce87 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/ProjectListViewItem.tsx
@@ -16,6 +16,7 @@ const ProjectListViewItem: FC<ProjectProps> = ({
   selectedProjectId,
   onProjectOpen,
   onProjectSelect,
+  onArchiveProject,
   onProjectUpdate
 }) => {
   const theme = useTheme();
@@ -50,6 +51,7 @@ const ProjectListViewItem: FC<ProjectProps> = ({
     project,
     selectedProjectId,
     onProjectUpdate,
+    onArchiveProject,
     onProjectSelect
   });
 
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
index 0286d9bf4..a1d9a994a 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/hooks.ts
@@ -14,6 +14,7 @@ type Props = {
   project: ProjectType;
   selectedProjectId?: string;
   onProjectUpdate?: (project: ProjectType, projectId: string) => void;
+  onArchiveProject?: (archive: boolean, projectId: string) => void;
   onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
 };
 
@@ -21,6 +22,7 @@ export default ({
   project,
   selectedProjectId,
   onProjectUpdate,
+  onArchiveProject,
   onProjectSelect
 }: Props) => {
   const t = useT();
@@ -32,6 +34,7 @@ export default ({
   const [projectName, setProjectName] = useState(project.name);
   const [isHovered, setIsHovered] = useState(false);
   const [isStarred, setIsStarred] = useState(project.starred);
+  const [archiveOpen, setArchiveOpen] = useState(false);
   // MEMO: this modal state and function will be used in the future
   // const [exportModalVisible, setExportModalVisible] = useState(false);
 
@@ -75,6 +78,18 @@ export default ({
     }
   }, [useExportProject, project.id]);
 
+  const handleArchivedModal = useCallback((value: boolean) => {
+    setArchiveOpen(value);
+  }, []);
+
+  const handleProjectArchived = useCallback(
+    (value: boolean) => {
+      onArchiveProject?.(value, project.id);
+      setArchiveOpen(false);
+    },
+    [project, onArchiveProject]
+  );
+
   useEffect(() => {
     setIsStarred(project.starred);
   }, [project.starred]);
@@ -97,6 +112,12 @@ export default ({
       title: t("Export"),
       icon: "downloadSimple",
       onClick: () => handleExportProject()
+    },
+    {
+      id: "archived",
+      title: t("Remove"),
+      icon: "trash",
+      onClick: () => handleArchivedModal?.(true)
     }
   ];
 
@@ -150,11 +171,14 @@ export default ({
     popupMenu,
     isStarred,
     hasMapOrStoryPublished,
+    archiveOpen,
     handleProjectNameChange,
     handleProjectNameBlur,
     handleProjectHover,
     handleProjectNameDoubleClick,
     handleProjectStarClick,
+    handleArchivedModal,
+    handleProjectArchived,
     handleExportProject
   };
 };
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts
index 641d82897..b0331ddd8 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/Project/types.ts
@@ -8,4 +8,5 @@ export type ProjectProps = {
   onProjectOpen?: () => void;
   onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
   onProjectUpdate?: (project: ProjectType, projectId: string) => void;
+  onArchiveProject?: (archive: boolean, projectId: string) => void;
 };
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
index 1950b4080..7e5601db8 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/hooks.ts
@@ -38,6 +38,7 @@ export default (workspaceId?: string) => {
     useProjectsQuery,
     useUpdateProject,
     useCreateProject,
+    useArchiveProject,
     useStarredProjectsQuery,
     useImportProject
   } = useProjectFetcher();
@@ -60,6 +61,7 @@ export default (workspaceId?: string) => {
     fetchMore,
     refetch
   } = useProjectsQuery({
+    includeArchived: true,
     teamId: workspaceId || "",
     pagination: {
       first: pagination(sortValue).first
@@ -70,6 +72,7 @@ export default (workspaceId?: string) => {
 
   const filtedProjects = useMemo(() => {
     return (projects ?? [])
+      .filter((project) => project?.isArchived === false)
       .filter((project) => project?.coreSupport === true)
       .map<Project | undefined>((project) =>
         project
@@ -171,6 +174,14 @@ export default (workspaceId?: string) => {
     [useUpdateProject]
   );
 
+  // archive project
+  const handleArchiveProject = useCallback(
+    async (archived: boolean, projectId: string) => {
+      await useArchiveProject({ projectId, archived });
+    },
+    [useArchiveProject]
+  );
+
   // project open
   const handleProjectOpen = useCallback(
     (sceneId?: string) => {
@@ -268,6 +279,7 @@ export default (workspaceId?: string) => {
     closeProjectCreator,
     handleGetMoreProjects,
     handleProjectUpdate,
+    handleArchiveProject,
     handleProjectOpen,
     handleProjectCreate,
     handleProjectSelect,
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
index 3d3dfed4e..5a4b474f5 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Projects/index.tsx
@@ -33,6 +33,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
     closeProjectCreator,
     handleGetMoreProjects,
     handleProjectUpdate,
+    handleArchiveProject,
     handleProjectCreate,
     handleProjectOpen,
     handleProjectSelect,
@@ -188,6 +189,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                         project={project}
                         selectedProjectId={selectedProject?.id}
                         onProjectUpdate={handleProjectUpdate}
+                        onArchiveProject={handleArchiveProject}
                         onProjectSelect={handleProjectSelect}
                         onProjectOpen={() => handleProjectOpen(project.sceneId)}
                       />
@@ -197,6 +199,7 @@ const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
                         project={project}
                         selectedProjectId={selectedProject?.id}
                         onProjectUpdate={handleProjectUpdate}
+                        onArchiveProject={handleArchiveProject}
                         onProjectSelect={handleProjectSelect}
                         onProjectOpen={() => handleProjectOpen(project.sceneId)}
                       />
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectGridViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectGridViewItem.tsx
new file mode 100644
index 000000000..456d3c3fd
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectGridViewItem.tsx
@@ -0,0 +1,107 @@
+import { Button, PopupMenu } from "@reearth/beta/lib/reearth-ui";
+import { styled } from "@reearth/services/theme";
+import { FC } from "react";
+
+import useHooks from "./hooks";
+import { ProjectProps } from "./types";
+
+const ProjectGridViewItem: FC<ProjectProps> = ({
+  project,
+  selectedProjectId,
+  onProjectOpen,
+  onProjectSelect,
+  onArchiveProject
+}) => {
+  const { popupMenu, isHovered, hasMapOrStoryPublished, handleProjectHover } =
+    useHooks({
+      project,
+      selectedProjectId,
+      onArchiveProject,
+      onProjectSelect
+    });
+
+  return (
+    <Card>
+      <CardImage
+        backgroundImage={project.imageUrl}
+        onDoubleClick={onProjectOpen}
+        onClick={(e) => onProjectSelect?.(e, project.id)}
+        isHovered={isHovered ?? false}
+        onMouseEnter={() => handleProjectHover?.(true)}
+        onMouseLeave={() => handleProjectHover?.(false)}
+        isSelected={selectedProjectId === project.id}
+      />
+      <CardFooter>
+        {hasMapOrStoryPublished && <PublishStatus />}
+        <CardTitleWrapper>
+          <CardTitle>{project.name}</CardTitle>
+        </CardTitleWrapper>
+        <PopupMenu
+          menu={popupMenu}
+          label={
+            <Button icon="dotsThreeVertical" iconButton appearance="simple" />
+          }
+        />
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ProjectGridViewItem;
+
+const Card = styled("div")(() => ({
+  display: "flex",
+  flexDirection: "column",
+  height: "220px",
+  "@media (max-width: 567px)": {
+    height: "171px"
+  }
+}));
+
+const CardImage = styled("div")<{
+  backgroundImage?: string | null;
+  isSelected: boolean;
+  isHovered: boolean;
+}>(({ theme, backgroundImage, isHovered }) => ({
+  flex: 1,
+  position: "relative",
+  background: backgroundImage
+    ? `url(${backgroundImage}) center/cover`
+    : theme.bg[1],
+  borderRadius: theme.radius.normal,
+  boxSizing: "border-box",
+  cursor: "pointer",
+  border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`
+}));
+
+const CardFooter = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  padding: `0 ${theme.spacing.smallest}`
+}));
+
+const PublishStatus = styled("div")(({ theme }) => ({
+  height: "12px",
+  width: "12px",
+  borderRadius: "50%",
+  background: theme.publish.main
+}));
+
+const CardTitleWrapper = styled("div")(() => ({
+  flex: 1
+}));
+
+const CardTitle = styled("div")(({ theme }) => ({
+  flex: "1",
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  cursor: "pointer"
+}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectListViewItem.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectListViewItem.tsx
new file mode 100644
index 000000000..4c5492ec5
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/ProjectListViewItem.tsx
@@ -0,0 +1,140 @@
+import { Button, PopupMenu, Typography } from "@reearth/beta/lib/reearth-ui";
+import { formatRelativeTime } from "@reearth/beta/utils/time";
+import { styled } from "@reearth/services/theme";
+import { FC, MouseEvent, useMemo } from "react";
+
+import useHooks from "./hooks";
+import { ProjectProps } from "./types";
+
+const ProjectListViewItem: FC<ProjectProps> = ({
+  project,
+  selectedProjectId,
+  onProjectOpen,
+  onProjectSelect,
+  onArchiveProject
+}) => {
+  const createAt = useMemo(
+    () =>
+      project.createdAt ? formatRelativeTime(new Date(project.createdAt)) : "",
+    [project.createdAt]
+  );
+  const UpdatedAt = useMemo(
+    () =>
+      project.updatedAt ? formatRelativeTime(new Date(project.updatedAt)) : "",
+    [project.updatedAt]
+  );
+
+  const { popupMenu, isHovered, handleProjectHover } = useHooks({
+    project,
+    selectedProjectId,
+    onArchiveProject,
+    onProjectSelect
+  });
+
+  return (
+    <ListWrapper
+      onClick={(e) => onProjectSelect?.(e, project.id)}
+      isHovered={isHovered ?? false}
+      onDoubleClick={onProjectOpen}
+      onMouseEnter={() => handleProjectHover?.(true)}
+      onMouseLeave={() => handleProjectHover?.(false)}
+      isSelected={selectedProjectId === project.id}
+    >
+      <ThumbnailCol>
+        <ActionWrapper>
+          <ProjectImage backgroundImage={project.imageUrl} />
+        </ActionWrapper>
+      </ThumbnailCol>
+      <ProjectNameCol>
+        <TitleWrapper>{project.name}</TitleWrapper>
+      </ProjectNameCol>
+      <TimeCol>
+        <Typography size="body">{UpdatedAt}</Typography>
+      </TimeCol>
+      <TimeCol>
+        <Typography size="body">{createAt}</Typography>
+      </TimeCol>
+      <ActionCol
+        onClick={(e: MouseEvent) => {
+          e.stopPropagation();
+        }}
+      >
+        <PopupMenu
+          menu={popupMenu}
+          label={
+            <Button icon="dotsThreeVertical" iconButton appearance="simple" />
+          }
+        />
+      </ActionCol>
+    </ListWrapper>
+  );
+};
+
+export default ProjectListViewItem;
+
+const ListWrapper = styled("div")<{ isSelected: boolean; isHovered: boolean }>(
+  ({ theme, isHovered }) => ({
+    display: "flex",
+    width: "100%",
+    cursor: "pointer",
+    borderRadius: theme.radius.small,
+    border: `1px solid ${isHovered ? theme.outline.weak : "transparent"}`,
+    padding: `${theme.spacing.small}px 0`,
+    alignItems: "center",
+    boxSizing: "border-box",
+    overflow: "hidden"
+  })
+);
+
+const ProjectImage = styled("div")<{ backgroundImage?: string | null }>(
+  ({ theme, backgroundImage }) => ({
+    background: backgroundImage
+      ? `url(${backgroundImage}) center/cover`
+      : theme.bg[1],
+    borderRadius: theme.radius.normal,
+    height: "32px",
+    width: "55px"
+  })
+);
+
+const ThumbnailCol = styled("div")(() => ({
+  width: 120,
+  flexShrink: 0
+}));
+
+const ActionWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.small
+}));
+
+const TimeCol = styled("div")(() => ({
+  flex: "0 0 20%",
+  flexShrink: 0
+}));
+
+const ActionCol = styled("div")(() => ({
+  flex: "0 0 10%",
+  flexShrink: 0
+}));
+
+const ProjectNameCol = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing.smallest,
+  flex: 1,
+  flexShrink: 0
+}));
+
+const TitleWrapper = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.smallest + 1}px`,
+  color: theme.content.main,
+  cursor: "pointer",
+  fontSize: theme.fonts.sizes.body,
+  fontWeight: theme.fonts.weight.regular,
+  display: "-webkit-box",
+  WebkitBoxOrient: "vertical",
+  WebkitLineClamp: 1,
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/hooks.ts
new file mode 100644
index 000000000..9809098ca
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/hooks.ts
@@ -0,0 +1,62 @@
+import { PopupMenuItem } from "@reearth/beta/lib/reearth-ui";
+import { useStorytellingFetcher } from "@reearth/services/api";
+import { useT } from "@reearth/services/i18n";
+import { MouseEvent, useCallback, useEffect, useMemo, useState } from "react";
+
+import { Project as ProjectType } from "../../../type";
+import { toPublishmentStatus } from "../hooks";
+
+type Props = {
+  project: ProjectType;
+  selectedProjectId?: string;
+  onArchiveProject?: (archive: boolean, projectId: string) => void;
+  onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
+};
+
+export default ({ project, onArchiveProject }: Props) => {
+  const t = useT();
+  const { useStoriesQuery } = useStorytellingFetcher();
+  const { stories } = useStoriesQuery({ sceneId: project?.sceneId });
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isStarred, setIsStarred] = useState(project.starred);
+
+  useEffect(() => {
+    setIsStarred(project.starred);
+  }, [project.starred]);
+
+  const popupMenu: PopupMenuItem[] = [
+    {
+      id: "archived",
+      title: t("Restore from Trash"),
+      icon: "trash",
+      onClick: () => onArchiveProject?.(false, project.id)
+    }
+  ];
+
+  const handleProjectHover = useCallback((value: boolean) => {
+    setIsHovered(value);
+  }, []);
+
+  const hasMapOrStoryPublished = useMemo(() => {
+    const hasMapPublished =
+      project.status === "published" || project.status === "limited";
+
+    const hasStoryPublished = stories?.some((story) => {
+      const publishmentStatus = toPublishmentStatus(story.publishmentStatus);
+      return (
+        publishmentStatus === "published" || publishmentStatus === "limited"
+      );
+    });
+
+    return hasMapPublished || hasStoryPublished;
+  }, [stories, project.status]);
+
+  return {
+    isHovered,
+    popupMenu,
+    isStarred,
+    hasMapOrStoryPublished,
+    handleProjectHover
+  };
+};
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/types.ts b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/types.ts
new file mode 100644
index 000000000..142847d2f
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/Project/types.ts
@@ -0,0 +1,11 @@
+import { MouseEvent } from "react";
+
+import { Project as ProjectType } from "../../../type";
+
+export type ProjectProps = {
+  project: ProjectType;
+  selectedProjectId?: string;
+  onProjectOpen?: () => void;
+  onProjectSelect?: (e?: MouseEvent<Element>, projectId?: string) => void;
+  onArchiveProject?: (archive: boolean, projectId: string) => void;
+};
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/hooks.ts b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/hooks.ts
new file mode 100644
index 000000000..cbe4a247a
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/hooks.ts
@@ -0,0 +1,275 @@
+import { ManagerLayout } from "@reearth/beta/ui/components/ManagerBase";
+import {
+  autoFillPage,
+  onScrollToBottom
+} from "@reearth/beta/utils/infinite-scroll";
+import { useProjectFetcher } from "@reearth/services/api";
+import {
+  ProjectSortField,
+  PublishmentStatus,
+  SortDirection
+} from "@reearth/services/gql";
+import {
+  useCallback,
+  useMemo,
+  useState,
+  MouseEvent,
+  useEffect,
+  useRef
+} from "react";
+
+import { Project } from "../../type";
+
+const PROJECTS_VIEW_STATE_STORAGE_KEY = `reearth-visualizer-dashboard-project-view-state`;
+
+const PROJECTS_PER_PAGE = 16;
+
+export type SortType =
+  | "date"
+  | "date-reversed"
+  | "name"
+  | "name-reverse"
+  | "date-updated";
+
+export default (workspaceId?: string) => {
+  const { useProjectsQuery, useStarredProjectsQuery, useArchiveProject } =
+    useProjectFetcher();
+
+  const [searchTerm, setSearchTerm] = useState<string>();
+  const [sortValue, setSort] = useState<SortType>("date-updated");
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const { starredProjects } = useStarredProjectsQuery(workspaceId);
+
+  const {
+    projects,
+    loading,
+    isRefetching,
+    hasMoreProjects,
+    endCursor,
+    fetchMore
+  } = useProjectsQuery({
+    includeArchived: true,
+    teamId: workspaceId || "",
+    pagination: {
+      first: pagination(sortValue).first
+    },
+    sort: pagination(sortValue).sortBy,
+    keyword: searchTerm
+  });
+
+  const archivedProjects = useMemo(() => {
+    return (projects ?? [])
+      .filter((project) => project?.isArchived === true)
+      .filter((project) => project?.coreSupport === true)
+      .map<Project | undefined>((project) =>
+        project
+          ? {
+              id: project.id,
+              description: project.description,
+              name: project.name,
+              imageUrl: project.imageUrl,
+              isArchived: project.isArchived,
+              status: toPublishmentStatus(project.publishmentStatus),
+              sceneId: project.scene?.id,
+              updatedAt: new Date(project.updatedAt),
+              createdAt: new Date(project.createdAt),
+              coreSupport: project.coreSupport,
+              starred: project.starred
+            }
+          : undefined
+      )
+      .filter((project): project is Project => !!project);
+  }, [projects]);
+
+  const isFetchingMore = useRef(false);
+
+  const handleGetMoreProjects = useCallback(async () => {
+    if (isFetchingMore.current) return;
+    if (hasMoreProjects) {
+      isFetchingMore.current = true;
+      await fetchMore({
+        variables: {
+          pagination: {
+            after: endCursor,
+            first: PROJECTS_PER_PAGE
+          }
+        }
+      });
+      isFetchingMore.current = false;
+    }
+  }, [hasMoreProjects, fetchMore, endCursor]);
+
+  const isLoading = useMemo(() => {
+    return loading || isRefetching;
+  }, [isRefetching, loading]);
+
+  useEffect(() => {
+    if (wrapperRef.current && !isLoading && hasMoreProjects) {
+      handleGetMoreProjects();
+    }
+    autoFillPage(wrapperRef, handleGetMoreProjects);
+  }, [handleGetMoreProjects, projects, hasMoreProjects, isLoading]);
+
+  const handleProjectSortChange = useCallback(
+    (value?: string) => {
+      if (!value) return;
+      setSort((value as SortType) ?? sortValue);
+    },
+    [sortValue]
+  );
+
+  // search
+  const handleSearch = useCallback((value?: string) => {
+    if (!value || value.length < 1) {
+      setSearchTerm?.(undefined);
+    } else {
+      setSearchTerm?.(value);
+    }
+  }, []);
+
+  // archive project
+  const handleArchiveProject = useCallback(
+    async (archived: boolean, projectId: string) => {
+      await useArchiveProject({ projectId, archived });
+    },
+    [useArchiveProject]
+  );
+
+  // selection
+  const [selectedProject, setSelectedProject] = useState<Project | undefined>();
+
+  const handleProjectSelect = useCallback(
+    (e?: MouseEvent, projectId?: string) => {
+      e?.stopPropagation();
+      if (projectId) {
+        setSelectedProject(
+          archivedProjects.find((project) => project.id === projectId)
+        );
+      } else {
+        setSelectedProject(undefined);
+      }
+    },
+    [archivedProjects]
+  );
+
+  // layout
+  const [layout, setLayout] = useState(
+    ["grid", "list"].includes(
+      localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) ?? ""
+    )
+      ? (localStorage.getItem(PROJECTS_VIEW_STATE_STORAGE_KEY) as ManagerLayout)
+      : "grid"
+  );
+
+  const handleLayoutChange = useCallback((newView?: ManagerLayout) => {
+    if (!newView) return;
+    localStorage.setItem(PROJECTS_VIEW_STATE_STORAGE_KEY, newView);
+    setLayout(newView);
+  }, []);
+
+  const [contentWidth, setContentWidth] = useState(0);
+
+  useEffect(() => {
+    const parentElement = wrapperRef.current;
+    const childElement = contentRef.current;
+
+    if (!parentElement || !childElement) return;
+    const checkSize = () => {
+      if (childElement && parentElement) {
+        setContentWidth(childElement.offsetWidth);
+      }
+    };
+
+    const parentObserver = new ResizeObserver(checkSize);
+    const childObserver = new ResizeObserver(checkSize);
+    parentObserver.observe(parentElement);
+    childObserver.observe(childElement);
+
+    checkSize();
+    return () => {
+      parentObserver.disconnect();
+      childObserver.disconnect();
+    };
+  }, []);
+
+  return {
+    archivedProjects,
+    hasMoreProjects,
+    isLoading,
+    selectedProject,
+    wrapperRef,
+    contentRef,
+    layout,
+    searchTerm,
+    sortValue,
+    contentWidth,
+    starredProjects,
+    handleGetMoreProjects,
+    handleArchiveProject,
+    handleProjectSelect,
+    handleScrollToBottom: onScrollToBottom,
+    handleLayoutChange,
+    handleProjectSortChange,
+    handleSearch
+  };
+};
+
+export const toPublishmentStatus = (s?: PublishmentStatus) => {
+  switch (s) {
+    case PublishmentStatus.Public:
+      return "published";
+    case PublishmentStatus.Limited:
+      return "limited";
+    default:
+      return "unpublished";
+  }
+};
+
+const pagination = (sort?: SortType) => {
+  let first, last;
+  let sortBy;
+  switch (sort) {
+    case "date":
+      first = PROJECTS_PER_PAGE;
+      sortBy = {
+        field: ProjectSortField.Createdat,
+        direction: SortDirection.Desc
+      };
+      break;
+    case "date-reversed":
+      first = PROJECTS_PER_PAGE;
+      sortBy = {
+        field: ProjectSortField.Createdat,
+        direction: SortDirection.Asc
+      };
+      break;
+    case "date-updated":
+      first = PROJECTS_PER_PAGE;
+      sortBy = {
+        field: ProjectSortField.Updatedat,
+        direction: SortDirection.Desc
+      };
+      break;
+    case "name":
+      first = PROJECTS_PER_PAGE;
+      sortBy = {
+        field: ProjectSortField.Name,
+        direction: SortDirection.Asc
+      };
+      break;
+    case "name-reverse":
+      first = PROJECTS_PER_PAGE;
+      sortBy = {
+        field: ProjectSortField.Name,
+        direction: SortDirection.Desc
+      };
+      break;
+    default:
+      first = PROJECTS_PER_PAGE;
+  }
+
+  return { first, last, sortBy };
+};
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/Recycle/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/index.tsx
new file mode 100644
index 000000000..b95b5896c
--- /dev/null
+++ b/web/src/beta/features/Dashboard/ContentsContainer/Recycle/index.tsx
@@ -0,0 +1,263 @@
+import { Breadcrumb, Loading, Typography } from "@reearth/beta/lib/reearth-ui";
+import {
+  ManagerContent,
+  ManagerHeader,
+  ManagerLayout,
+  ManagerWrapper
+} from "@reearth/beta/ui/components/ManagerBase";
+import ManagerEmptyContent from "@reearth/beta/ui/components/ManagerBase/ManagerEmptyContent";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+import { FC, useMemo } from "react";
+
+import useHooks from "./hooks";
+import ProjectGridViewItem from "./Project/ProjectGridViewItem";
+import ProjectListViewItem from "./Project/ProjectListViewItem";
+
+const Projects: FC<{ workspaceId?: string }> = ({ workspaceId }) => {
+  const {
+    archivedProjects,
+    isLoading,
+    hasMoreProjects,
+    selectedProject,
+    wrapperRef,
+    contentRef,
+    contentWidth,
+    layout,
+    searchTerm,
+    sortValue,
+    handleGetMoreProjects,
+    handleArchiveProject,
+    handleProjectSelect,
+    handleScrollToBottom,
+    handleLayoutChange,
+    handleProjectSortChange,
+    handleSearch
+  } = useHooks(workspaceId);
+
+  const theme = useTheme();
+  const t = useT();
+  const sortOptions: { value: string; label: string }[] = useMemo(
+    () => [
+      { value: "date", label: t("Last Created") },
+      { value: "date-reversed", label: t("First Created") },
+      { value: "date-updated", label: t("Last Updated") },
+      { value: "name", label: t("A To Z") },
+      { value: "name-reverse", label: t("Z To A") }
+    ],
+    [t]
+  );
+
+  return (
+    <ManagerWrapper onClick={() => handleProjectSelect(undefined)}>
+      <ManagerHeader
+        size="large"
+        actions={[]}
+        sortValue={sortValue}
+        sortOptions={sortOptions}
+        onSortChange={handleProjectSortChange}
+        layout={layout}
+        onLayoutChange={handleLayoutChange}
+        showSearch
+        searchPlaceholder={t("Search in archived projects")}
+        onSearch={handleSearch}
+      />
+      {archivedProjects?.length ? (
+        <ManagerContent>
+          <ContentWrapper>
+            <BreadcrumbContainer>
+              <Breadcrumb
+                items={[
+                  {
+                    title: (
+                      <Typography
+                        size="h5"
+                        weight="bold"
+                        color={theme.content.weak}
+                      >
+                        {t("Projects in the trash")}
+                      </Typography>
+                    )
+                  },
+                  ...(searchTerm
+                    ? [
+                        {
+                          title: (
+                            <Typography
+                              size="h5"
+                              weight="bold"
+                              color={theme.content.weak}
+                            >
+                              {`${t("Search Result for")} "${searchTerm}"`}
+                            </Typography>
+                          )
+                        }
+                      ]
+                    : [])
+                ]}
+              />
+            </BreadcrumbContainer>
+            {layout === "list" && (
+              <ListHeader width={contentWidth}>
+                <ThumbnailCol />
+                <ProjectNameCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Project Name")}
+                  </Typography>
+                </ProjectNameCol>
+                <TimeCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Updated At")}
+                  </Typography>
+                </TimeCol>
+                <TimeCol>
+                  <Typography size="body" color={theme.content.weak}>
+                    {t("Created At")}
+                  </Typography>
+                </TimeCol>
+                <ActionCol />
+              </ListHeader>
+            )}
+            <ProjectsWrapper
+              ref={wrapperRef}
+              onScroll={(e) => {
+                if (!isLoading && hasMoreProjects) {
+                  handleScrollToBottom(e, handleGetMoreProjects);
+                }
+              }}
+            >
+              <ProjectsContainer ref={contentRef}>
+                <ProjectsGroup layout={layout}>
+                  {archivedProjects.map((project) =>
+                    layout === "grid" ? (
+                      <ProjectGridViewItem
+                        key={project.id}
+                        project={project}
+                        selectedProjectId={selectedProject?.id}
+                        onArchiveProject={handleArchiveProject}
+                        onProjectSelect={handleProjectSelect}
+                      />
+                    ) : (
+                      <ProjectListViewItem
+                        key={project.id}
+                        project={project}
+                        selectedProjectId={selectedProject?.id}
+                        onArchiveProject={handleArchiveProject}
+                        onProjectSelect={handleProjectSelect}
+                      />
+                    )
+                  )}
+                </ProjectsGroup>
+              </ProjectsContainer>
+              {isLoading && (
+                <LoadingWrapper>
+                  <Loading relative />
+                </LoadingWrapper>
+              )}
+            </ProjectsWrapper>
+          </ContentWrapper>
+        </ManagerContent>
+      ) : isLoading ? (
+        <Loading relative />
+      ) : (
+        <ManagerEmptyContent>
+          <Typography size="h5" color={theme.content.weak}>
+            {t("No archived projects available")}
+          </Typography>
+        </ManagerEmptyContent>
+      )}
+    </ManagerWrapper>
+  );
+};
+
+export default Projects;
+
+const ContentWrapper = styled("div")(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: theme.spacing.normal,
+  flex: 1,
+  height: 0
+}));
+
+const ProjectsWrapper = styled("div")(() => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  overflow: "auto"
+}));
+
+const BreadcrumbContainer = styled("div")(({ theme }) => ({
+  padding: `0 ${theme.spacing.largest}px`
+}));
+
+const ProjectsContainer = styled("div")(({ theme }) => ({
+  display: "flex",
+  gap: theme.spacing.large,
+  flexDirection: "column",
+  padding: `0 ${theme.spacing.largest}px ${theme.spacing.largest}px ${theme.spacing.largest}px`
+}));
+
+const ProjectsGroup = styled("div")<{ layout: ManagerLayout }>(
+  ({ theme, layout }) => ({
+    ...(layout === "grid"
+      ? {
+          display: "grid",
+          gap: theme.spacing.normal,
+          width: "100%",
+          gridTemplateColumns: "repeat(4, 1fr)",
+
+          "@media (max-width: 1200px)": {
+            gridTemplateColumns: "repeat(3, 1fr)"
+          },
+          "@media (max-width: 900px)": {
+            gridTemplateColumns: "repeat(2, 1fr)"
+          },
+          "@media (max-width: 600px)": {
+            gridTemplateColumns: "1fr"
+          }
+        }
+      : {}),
+    ...(layout === "list"
+      ? {
+          display: "flex",
+          flexDirection: "column",
+          gap: theme.spacing.normal
+        }
+      : {})
+  })
+);
+
+const ListHeader = styled("div")<{ width: number }>(({ width, theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  boxSizing: "border-box",
+  padding: `${theme.spacing.smallest}px ${theme.spacing.largest}px`,
+  width: width === 0 ? "100%" : width
+}));
+
+const ThumbnailCol = styled("div")(() => ({
+  width: 120,
+  flexShrink: 0
+}));
+
+const ProjectNameCol = styled("div")(() => ({
+  flex: 1,
+  flexShrink: 0
+}));
+
+const TimeCol = styled("div")(() => ({
+  flex: "0 0 20%",
+  flexShrink: 0
+}));
+
+const ActionCol = styled("div")(() => ({
+  flex: "0 0 10%",
+  flexShrink: 0
+}));
+
+const LoadingWrapper = styled("div")(() => ({
+  width: "100%",
+  height: 100
+}));
diff --git a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
index 4424b56bf..b9a6c974b 100644
--- a/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
+++ b/web/src/beta/features/Dashboard/ContentsContainer/index.tsx
@@ -6,6 +6,7 @@ import { Workspace } from "../type";
 
 import Members from "./Members";
 import Projects from "./Projects";
+import Recycle from "./Recycle";
 
 export type ContainerProps = {
   workspaceId?: string;
@@ -23,6 +24,7 @@ const ContentsContainer: FC<ContainerProps> = ({
       {tab === "asset" && (
         <AssetsManager workspaceId={workspaceId} size="large" />
       )}
+      {tab === "bin" && <Recycle workspaceId={workspaceId} />}
       {tab === "members" && <Members currentWorkspace={currentWorkspace} />}
     </Wrapper>
   );
diff --git a/web/src/services/gql/__gen__/gql.ts b/web/src/services/gql/__gen__/gql.ts
index 13296131a..b8f2a7910 100644
--- a/web/src/services/gql/__gen__/gql.ts
+++ b/web/src/services/gql/__gen__/gql.ts
@@ -50,7 +50,7 @@ const documents = {
     "\n  mutation UploadPlugin($sceneId: ID!, $file: Upload, $url: URL) {\n    uploadPlugin(input: { sceneId: $sceneId, file: $file, url: $url }) {\n      plugin {\n        id\n        name\n        version\n        description\n        author\n      }\n      scenePlugin {\n        pluginId\n        propertyId\n      }\n    }\n  }\n": types.UploadPluginDocument,
     "\n  mutation UninstallPlugin($sceneId: ID!, $pluginId: ID!) {\n    uninstallPlugin(input: { sceneId: $sceneId, pluginId: $pluginId }) {\n      pluginId\n    }\n  }\n": types.UninstallPluginDocument,
     "\n  query GetProject($projectId: ID!) {\n    node(id: $projectId, type: PROJECT) {\n      id\n      ... on Project {\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n    }\n  }\n": types.GetProjectDocument,
-    "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetProjectsDocument,
+    "\n  query GetProjects($teamId: ID!, $includeArchived: Boolean, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, includeArchived: $includeArchived, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n": types.GetProjectsDocument,
     "\n  query CheckProjectAlias($alias: String!) {\n    checkProjectAlias(alias: $alias) {\n      alias\n      available\n    }\n  }\n": types.CheckProjectAliasDocument,
     "\n  mutation CreateProject(\n    $teamId: ID!\n    $visualizer: Visualizer!\n    $name: String!\n    $description: String!\n    $imageUrl: URL\n    $coreSupport: Boolean\n  ) {\n    createProject(\n      input: {\n        teamId: $teamId\n        visualizer: $visualizer\n        name: $name\n        description: $description\n        imageUrl: $imageUrl\n        coreSupport: $coreSupport\n      }\n    ) {\n      project {\n        id\n        name\n        description\n        imageUrl\n        coreSupport\n      }\n    }\n  }\n": types.CreateProjectDocument,
     "\n  mutation UpdateProject(\n    $projectId: ID!\n    $name: String\n    $description: String\n    $imageUrl: URL\n    $publicTitle: String\n    $publicDescription: String\n    $publicImage: String\n    $deleteImageUrl: Boolean\n    $deletePublicImage: Boolean\n    $enableGa: Boolean\n    $trackingId: String\n    $starred:Boolean\n  ) {\n    updateProject(\n      input: {\n        projectId: $projectId\n        name: $name\n        description: $description\n        imageUrl: $imageUrl\n        publicTitle: $publicTitle\n        publicDescription: $publicDescription\n        publicImage: $publicImage\n        deleteImageUrl: $deleteImageUrl\n        deletePublicImage: $deletePublicImage\n        enableGa: $enableGa\n        trackingId: $trackingId\n        starred: $starred\n      }\n    ) {\n      project {\n        id\n        ...ProjectFragment\n      }\n    }\n  }\n\n": types.UpdateProjectDocument,
@@ -256,7 +256,7 @@ export function gql(source: "\n  query GetProject($projectId: ID!) {\n    node(i
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"];
+export function gql(source: "\n  query GetProjects($teamId: ID!, $includeArchived: Boolean, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, includeArchived: $includeArchived, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"): (typeof documents)["\n  query GetProjects($teamId: ID!, $includeArchived: Boolean, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {\n    projects(teamId: $teamId, includeArchived: $includeArchived, pagination: $pagination, keyword: $keyword, sort: $sort) {\n      edges {\n        node {\n          id\n          ...ProjectFragment\n          scene {\n            id\n          }\n        }\n      }\n      nodes {\n        id\n        ...ProjectFragment\n        scene {\n          id\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      totalCount\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
diff --git a/web/src/services/gql/__gen__/graphql.ts b/web/src/services/gql/__gen__/graphql.ts
index ebff62f28..6fb06f2d2 100644
--- a/web/src/services/gql/__gen__/graphql.ts
+++ b/web/src/services/gql/__gen__/graphql.ts
@@ -3367,6 +3367,7 @@ export type GetProjectQuery = { __typename?: 'Query', node?: { __typename?: 'Ass
 
 export type GetProjectsQueryVariables = Exact<{
   teamId: Scalars['ID']['input'];
+  includeArchived?: InputMaybe<Scalars['Boolean']['input']>;
   pagination?: InputMaybe<Pagination>;
   keyword?: InputMaybe<Scalars['String']['input']>;
   sort?: InputMaybe<ProjectSort>;
@@ -3771,7 +3772,7 @@ export const UpgradePluginDocument = {"kind":"Document","definitions":[{"kind":"
 export const UploadPluginDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UploadPlugin"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sceneId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"file"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Upload"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"url"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"URL"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uploadPlugin"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"sceneId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sceneId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"file"},"value":{"kind":"Variable","name":{"kind":"Name","value":"file"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"url"},"value":{"kind":"Variable","name":{"kind":"Name","value":"url"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"plugin"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"version"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"author"}}]}},{"kind":"Field","name":{"kind":"Name","value":"scenePlugin"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pluginId"}},{"kind":"Field","name":{"kind":"Name","value":"propertyId"}}]}}]}}]}}]} as unknown as DocumentNode<UploadPluginMutation, UploadPluginMutationVariables>;
 export const UninstallPluginDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UninstallPlugin"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sceneId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pluginId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"uninstallPlugin"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"sceneId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sceneId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"pluginId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pluginId"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"pluginId"}}]}}]}}]} as unknown as DocumentNode<UninstallPluginMutation, UninstallPluginMutationVariables>;
 export const GetProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}},{"kind":"Argument","name":{"kind":"Name","value":"type"},"value":{"kind":"EnumValue","value":"PROJECT"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"isArchived"}},{"kind":"Field","name":{"kind":"Name","value":"isBasicAuthActive"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthUsername"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthPassword"}},{"kind":"Field","name":{"kind":"Name","value":"publicTitle"}},{"kind":"Field","name":{"kind":"Name","value":"publicDescription"}},{"kind":"Field","name":{"kind":"Name","value":"publicImage"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"enableGa"}},{"kind":"Field","name":{"kind":"Name","value":"trackingId"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"coreSupport"}},{"kind":"Field","name":{"kind":"Name","value":"starred"}}]}}]} as unknown as DocumentNode<GetProjectQuery, GetProjectQueryVariables>;
-export const GetProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetProjects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Pagination"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"keyword"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sort"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectSort"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"teamId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"keyword"},"value":{"kind":"Variable","name":{"kind":"Name","value":"keyword"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sort"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endCursor"}},{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}},{"kind":"Field","name":{"kind":"Name","value":"startCursor"}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"isArchived"}},{"kind":"Field","name":{"kind":"Name","value":"isBasicAuthActive"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthUsername"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthPassword"}},{"kind":"Field","name":{"kind":"Name","value":"publicTitle"}},{"kind":"Field","name":{"kind":"Name","value":"publicDescription"}},{"kind":"Field","name":{"kind":"Name","value":"publicImage"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"enableGa"}},{"kind":"Field","name":{"kind":"Name","value":"trackingId"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"coreSupport"}},{"kind":"Field","name":{"kind":"Name","value":"starred"}}]}}]} as unknown as DocumentNode<GetProjectsQuery, GetProjectsQueryVariables>;
+export const GetProjectsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetProjects"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"includeArchived"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Pagination"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"keyword"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sort"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"ProjectSort"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"projects"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"teamId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}}},{"kind":"Argument","name":{"kind":"Name","value":"includeArchived"},"value":{"kind":"Variable","name":{"kind":"Name","value":"includeArchived"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"keyword"},"value":{"kind":"Variable","name":{"kind":"Name","value":"keyword"}}},{"kind":"Argument","name":{"kind":"Name","value":"sort"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sort"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"edges"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"node"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}},{"kind":"Field","name":{"kind":"Name","value":"scene"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"pageInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endCursor"}},{"kind":"Field","name":{"kind":"Name","value":"hasNextPage"}},{"kind":"Field","name":{"kind":"Name","value":"hasPreviousPage"}},{"kind":"Field","name":{"kind":"Name","value":"startCursor"}}]}},{"kind":"Field","name":{"kind":"Name","value":"totalCount"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"isArchived"}},{"kind":"Field","name":{"kind":"Name","value":"isBasicAuthActive"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthUsername"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthPassword"}},{"kind":"Field","name":{"kind":"Name","value":"publicTitle"}},{"kind":"Field","name":{"kind":"Name","value":"publicDescription"}},{"kind":"Field","name":{"kind":"Name","value":"publicImage"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"enableGa"}},{"kind":"Field","name":{"kind":"Name","value":"trackingId"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"coreSupport"}},{"kind":"Field","name":{"kind":"Name","value":"starred"}}]}}]} as unknown as DocumentNode<GetProjectsQuery, GetProjectsQueryVariables>;
 export const CheckProjectAliasDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CheckProjectAlias"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"alias"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"checkProjectAlias"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"alias"},"value":{"kind":"Variable","name":{"kind":"Name","value":"alias"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"available"}}]}}]}}]} as unknown as DocumentNode<CheckProjectAliasQuery, CheckProjectAliasQueryVariables>;
 export const CreateProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"visualizer"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Visualizer"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"name"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"description"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"imageUrl"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"URL"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"coreSupport"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createProject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"teamId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"teamId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"visualizer"},"value":{"kind":"Variable","name":{"kind":"Name","value":"visualizer"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"Variable","name":{"kind":"Name","value":"name"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"description"},"value":{"kind":"Variable","name":{"kind":"Name","value":"description"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"imageUrl"},"value":{"kind":"Variable","name":{"kind":"Name","value":"imageUrl"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"coreSupport"},"value":{"kind":"Variable","name":{"kind":"Name","value":"coreSupport"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"coreSupport"}}]}}]}}]}}]} as unknown as DocumentNode<CreateProjectMutation, CreateProjectMutationVariables>;
 export const UpdateProjectDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateProject"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"name"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"description"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"imageUrl"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"URL"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"publicTitle"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"publicDescription"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"publicImage"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"deleteImageUrl"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"deletePublicImage"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"enableGa"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"trackingId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"starred"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateProject"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"projectId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"projectId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"Variable","name":{"kind":"Name","value":"name"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"description"},"value":{"kind":"Variable","name":{"kind":"Name","value":"description"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"imageUrl"},"value":{"kind":"Variable","name":{"kind":"Name","value":"imageUrl"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"publicTitle"},"value":{"kind":"Variable","name":{"kind":"Name","value":"publicTitle"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"publicDescription"},"value":{"kind":"Variable","name":{"kind":"Name","value":"publicDescription"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"publicImage"},"value":{"kind":"Variable","name":{"kind":"Name","value":"publicImage"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"deleteImageUrl"},"value":{"kind":"Variable","name":{"kind":"Name","value":"deleteImageUrl"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"deletePublicImage"},"value":{"kind":"Variable","name":{"kind":"Name","value":"deletePublicImage"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"enableGa"},"value":{"kind":"Variable","name":{"kind":"Name","value":"enableGa"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"trackingId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"trackingId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"starred"},"value":{"kind":"Variable","name":{"kind":"Name","value":"starred"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"project"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"ProjectFragment"}}]}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"ProjectFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Project"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"imageUrl"}},{"kind":"Field","name":{"kind":"Name","value":"isArchived"}},{"kind":"Field","name":{"kind":"Name","value":"isBasicAuthActive"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthUsername"}},{"kind":"Field","name":{"kind":"Name","value":"basicAuthPassword"}},{"kind":"Field","name":{"kind":"Name","value":"publicTitle"}},{"kind":"Field","name":{"kind":"Name","value":"publicDescription"}},{"kind":"Field","name":{"kind":"Name","value":"publicImage"}},{"kind":"Field","name":{"kind":"Name","value":"alias"}},{"kind":"Field","name":{"kind":"Name","value":"enableGa"}},{"kind":"Field","name":{"kind":"Name","value":"trackingId"}},{"kind":"Field","name":{"kind":"Name","value":"publishmentStatus"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"coreSupport"}},{"kind":"Field","name":{"kind":"Name","value":"starred"}}]}}]} as unknown as DocumentNode<UpdateProjectMutation, UpdateProjectMutationVariables>;
diff --git a/web/src/services/gql/queries/project.ts b/web/src/services/gql/queries/project.ts
index 1563d6fa3..e3ddd2229 100644
--- a/web/src/services/gql/queries/project.ts
+++ b/web/src/services/gql/queries/project.ts
@@ -15,8 +15,8 @@ export const GET_PROJECT = gql(`
 `);
 
 export const GET_PROJECTS = gql(`
-  query GetProjects($teamId: ID!, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {
-    projects(teamId: $teamId, pagination: $pagination, keyword: $keyword, sort: $sort) {
+  query GetProjects($teamId: ID!, $includeArchived: Boolean, $pagination: Pagination, $keyword: String, $sort: ProjectSort) {
+    projects(teamId: $teamId, includeArchived: $includeArchived, pagination: $pagination, keyword: $keyword, sort: $sort) {
       edges {
         node {
           id
diff --git a/web/src/services/i18n/translations/en.yml b/web/src/services/i18n/translations/en.yml
index 732b2416e..1104ab212 100644
--- a/web/src/services/i18n/translations/en.yml
+++ b/web/src/services/i18n/translations/en.yml
@@ -26,6 +26,7 @@ Size Small to Large: ''
 Size Large to Small: ''
 Upload File: ''
 Search in all assets library: ''
+Search in archived projects: ''
 Assets selected: ''
 Asset selected: ''
 Uploaded At: ''
@@ -40,14 +41,17 @@ Last Updated: ''
 New Project: ''
 Import: ''
 All projects: ''
+Projects in the trash: ''
 Search Result for: ''
 Project Name: ''
 Updated At: ''
 Created At: ''
 No Project has been created yet: ''
+No archived projects available: ''
 Rename: ''
 Project Setting: ''
 Export: ''
+Restore from Trash: ''
 Create new project: ''
 Project Name *: ''
 Text: ''
diff --git a/web/src/services/i18n/translations/ja.yml b/web/src/services/i18n/translations/ja.yml
index 07daf70bc..76eeb0566 100644
--- a/web/src/services/i18n/translations/ja.yml
+++ b/web/src/services/i18n/translations/ja.yml
@@ -26,6 +26,7 @@ Size Small to Large: 昇順（サイズ）
 Size Large to Small: 降順（サイズ）
 Upload File: ''
 Search in all assets library: ''
+Search in archived projects: ''
 Assets selected: ''
 Asset selected: ''
 Uploaded At: ''
@@ -40,14 +41,17 @@ Last Updated: ''
 New Project: 新規プロジェクト
 Import: インポート
 All projects: ''
+Projects in the trash: 'ゴミ箱内のプロジェクト'
 Search Result for: ''
 Project Name: プロジェクト名
 Updated At: ''
 Created At: ''
 No Project has been created yet: ''
+No archived projects available: ''
 Rename: 名称変更
 Project Setting: プロジェクト設定
 Export: エクスポート
+Restore from Trash: 'ゴミ箱から戻す'
 Create new project: ''
 Project Name *: ''
 Text: ''