diff --git a/i18next-parser.config.js b/i18next-parser.config.js
index 221e4d7e5..013887b68 100644
--- a/i18next-parser.config.js
+++ b/i18next-parser.config.js
@@ -2,4 +2,6 @@ module.exports = {
   locales: ["en", "ja"],
   output: "src/i18n/translations/$LOCALE.yml",
   input: ["src/**/*.{ts,tsx}"],
+  keySeparator: false,
+  createOldCatalogs: false,
 };
diff --git a/package.json b/package.json
index 10b39488d..df36e709b 100644
--- a/package.json
+++ b/package.json
@@ -217,4 +217,4 @@
         "use-debounce": "^7.0.1",
         "use-file-input": "^1.0.0"
     }
-}
+}
\ No newline at end of file
diff --git a/src/components/atoms/TabSection/index.tsx b/src/components/atoms/TabSection/index.tsx
new file mode 100644
index 000000000..2652a5794
--- /dev/null
+++ b/src/components/atoms/TabSection/index.tsx
@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from "react";
+
+import Text from "@reearth/components/atoms/Text";
+import { styled, useTheme } from "@reearth/theme";
+
+import Divider from "../Divider";
+
+export type MenuAlignment = "left" | "top";
+
+export interface Props<T extends string> {
+  className?: string;
+  children?: { [m in T]?: React.ReactNode };
+  headerAction?: React.ReactNode;
+  menuAlignment?: MenuAlignment;
+  scrollable?: boolean;
+  expandedMenuIcon?: boolean;
+  selected?: T;
+  initialSelected?: T;
+  onChange?: (m: T) => void;
+  headers?: { [m in T]?: string };
+}
+const TabSection = <T extends string>({
+  className,
+  children,
+  headerAction,
+  menuAlignment,
+  scrollable,
+  selected,
+  onChange,
+  initialSelected,
+  headers,
+}: Props<T>) => {
+  const tabs: T[] = (Object.keys(children || {}) as T[]).filter(k => !!children?.[k]);
+  const [selectedTab, select] = useState<T | undefined>(initialSelected ?? tabs?.[0]);
+  useEffect(() => {
+    select(selected);
+  }, [selected]);
+
+  const theme = useTheme();
+
+  return (
+    <Wrapper className={className} menuAlignment={menuAlignment}>
+      <TabHeader>
+        {tabs?.map((m: T) => (
+          <TabTitle
+            key={m}
+            selected={selectedTab === m}
+            onClick={() => {
+              select(m);
+              onChange?.(m);
+            }}>
+            <Text size="m" color={selectedTab === m ? theme.main.select : theme.main.text}>
+              {headers?.[m] ?? m}
+            </Text>
+          </TabTitle>
+        ))}
+        {<ActionWrapper expanded={true}>{headerAction}</ActionWrapper>}
+      </TabHeader>
+      <Divider margin="0" />
+      <TabContent scrollable={scrollable}>
+        {selectedTab ? children?.[selectedTab] ?? null : null}
+      </TabContent>
+    </Wrapper>
+  );
+};
+const Wrapper = styled.div<{ menuAlignment?: MenuAlignment }>`
+  display: flex;
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
+  justify-content: stretch;
+  position: relative;
+`;
+const TabHeader = styled.div<{ menuAlignment?: MenuAlignment }>`
+  display: flex;
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
+  align-items: space-between;
+  gap: 24px;
+  padding: 0px;
+  width: 100%;
+  height: 100%;
+`;
+
+const TabTitle = styled.div<{ selected?: boolean }>`
+  cursor: pointer;
+  user-select: none;
+  border-bottom: 2px solid ${({ selected, theme }) => (selected ? theme.main.select : "none")};
+  opacity: ${({ selected }) => (selected ? "1" : "0.7")};
+`;
+
+const ActionWrapper = styled.div<{ expanded?: boolean }>`
+  flex: ${props => (props.expanded ? "1" : null)};
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  margin-block-start: -13px;
+`;
+const TabContent = styled.div<{ scrollable?: boolean }>`
+  flex: auto;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: stretch;
+  overflow-x: hidden;
+  overflow-y: ${({ scrollable }) => (scrollable ? "auto" : "hidden")};
+  -webkit-overflow-scrolling: touch;
+`;
+
+export default TabSection;
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts b/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
index 57cf37a3d..ee0e1e8df 100644
--- a/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
+++ b/src/components/molecules/Common/AssetModal/AssetContainer/hooks.ts
@@ -19,15 +19,6 @@ export type Asset = {
   contentType: string;
 };
 
-function handleScroll(
-  { currentTarget }: React.UIEvent<HTMLDivElement, UIEvent>,
-  onLoadMore?: () => void,
-) {
-  if (currentTarget.scrollTop + currentTarget.clientHeight >= currentTarget.scrollHeight) {
-    onLoadMore?.();
-  }
-}
-
 export default ({
   isMultipleSelectable,
   selectedAssets,
@@ -112,7 +103,6 @@ export default ({
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    handleScroll,
     setLayoutType,
     handleUploadToAsset,
     handleReverse,
diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
index 5515b98d5..f16646218 100644
--- a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
+++ b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { useIntl } from "react-intl";
 
 import Button from "@reearth/components/atoms/Button";
 import Divider from "@reearth/components/atoms/Divider";
@@ -9,8 +8,10 @@ import Loading from "@reearth/components/atoms/Loading";
 import SearchBar from "@reearth/components/atoms/SearchBar";
 import Text from "@reearth/components/atoms/Text";
 import AssetDeleteModal from "@reearth/components/molecules/Common/AssetModal/AssetDeleteModal";
+import { useT } from "@reearth/i18n";
 import { styled } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
+import { handleScroll } from "@reearth/util/handleScroll";
 
 import AssetCard from "../AssetCard";
 import AssetListItem from "../AssetListItem";
@@ -73,13 +74,12 @@ const AssetContainer: React.FC<Props> = ({
   onSortChange,
   onSearch,
 }) => {
-  const intl = useIntl();
+  const t = useT();
   const {
     layoutType,
     iconChoice,
     deleteModalVisible,
     sortOptions,
-    handleScroll,
     setLayoutType,
     handleUploadToAsset,
     handleReverse,
@@ -103,7 +103,7 @@ const AssetContainer: React.FC<Props> = ({
       <Flex justify={onRemove ? "flex-end" : "center"}>
         <Button
           large
-          text={intl.formatMessage({ defaultMessage: "Upload file" })}
+          text={t("Upload file")}
           icon="upload"
           type="button"
           buttonType={onRemove ? "secondary" : "primary"}
@@ -112,7 +112,7 @@ const AssetContainer: React.FC<Props> = ({
         {onRemove && (
           <Button
             large
-            text={intl.formatMessage({ defaultMessage: "Delete" })}
+            text={t("Delete")}
             icon="bin"
             type="button"
             buttonType="secondary"
@@ -159,13 +159,10 @@ const AssetContainer: React.FC<Props> = ({
           <Template align="center" justify="center">
             <TemplateText size="m" otherProperties={{ textAlign: "center" }}>
               {searchTerm
-                ? intl.formatMessage({
-                    defaultMessage: "No assets match your search.",
-                  })
-                : intl.formatMessage({
-                    defaultMessage:
-                      "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.",
-                  })}
+                ? t("No assets match your search.")
+                : t(
+                    "You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.",
+                  )}
             </TemplateText>
           </Template>
         ) : (
diff --git a/src/components/molecules/Common/Header/index.tsx b/src/components/molecules/Common/Header/index.tsx
index 080a4599e..92e37b854 100644
--- a/src/components/molecules/Common/Header/index.tsx
+++ b/src/components/molecules/Common/Header/index.tsx
@@ -27,7 +27,7 @@ export interface Props {
   onChangeTeam?: (teamId: string) => void;
   modalShown?: boolean;
   openModal?: () => void;
-  handleModalClose?: (r?: boolean | undefined) => void;
+  onModalClose?: (r?: boolean) => void;
   dashboard?: boolean;
 }
 
@@ -45,7 +45,7 @@ const Header: React.FC<Props> = ({
   onChangeTeam,
   modalShown,
   openModal,
-  handleModalClose,
+  onModalClose,
   dashboard,
 }) => {
   return (
@@ -69,7 +69,7 @@ const Header: React.FC<Props> = ({
               />
               <WorkspaceCreationModal
                 open={modalShown}
-                onClose={handleModalClose}
+                onClose={onModalClose}
                 onSubmit={onCreateTeam}
               />
             </>
diff --git a/src/components/molecules/Dashboard/index.tsx b/src/components/molecules/Dashboard/index.tsx
index 5192b0878..030b65681 100644
--- a/src/components/molecules/Dashboard/index.tsx
+++ b/src/components/molecules/Dashboard/index.tsx
@@ -1,19 +1,38 @@
 import React from "react";
 
+import Loading from "@reearth/components/atoms/Loading";
 import { styled } from "@reearth/theme";
+import { handleScroll } from "@reearth/util/handleScroll";
 
 export * from "./types";
 
 export type Props = {
   className?: string;
   header?: React.ReactNode;
+  isLoading?: boolean;
+  hasMoreProjects?: boolean;
+  onGetMoreProjects?: () => void;
 };
 
-const Dashboard: React.FC<Props> = ({ className, header, children }) => {
+const Dashboard: React.FC<Props> = ({
+  className,
+  header,
+  children,
+  isLoading,
+  hasMoreProjects,
+  onGetMoreProjects,
+}) => {
   return (
-    <Wrapper className={className}>
+    <Wrapper
+      className={className}
+      onScroll={e => {
+        !isLoading && hasMoreProjects && handleScroll(e, onGetMoreProjects);
+      }}>
       {header}
-      <Content>{children}</Content>
+      <Content>
+        {children}
+        {isLoading && hasMoreProjects && <StyledLoading relative />}
+      </Content>
     </Wrapper>
   );
 };
@@ -29,5 +48,8 @@ const Content = styled.div`
   display: flex;
   flex-wrap: wrap;
 `;
+const StyledLoading = styled(Loading)`
+  margin: 52px auto;
+`;
 
 export default Dashboard;
diff --git a/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx b/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx
index a00e06beb..b4b092d2b 100644
--- a/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx
+++ b/src/components/molecules/Settings/Project/Dataset/DatasetList/index.tsx
@@ -10,7 +10,10 @@ export type Item = {
 
 export type Props = {
   items: Item[];
+  isLoading?: boolean;
+  hasMore?: boolean;
   removeDatasetSchema?: (schemaId: string) => void;
+  onGetMoreDataSets?: () => void;
 };
 
 const DatasetList: React.FC<Props> = ({ items, removeDatasetSchema }) => {
@@ -27,6 +30,7 @@ const Wrapper = styled.div`
   display: grid;
   grid-template-columns: 250px 250px 250px;
   grid-gap: 20px;
+  overflow: auto;
 `;
 
 export default DatasetList;
diff --git a/src/components/molecules/Settings/ProjectList/ProjectCell/index.tsx b/src/components/molecules/Settings/ProjectList/ProjectCell/index.tsx
index e7e47542b..d419305c8 100644
--- a/src/components/molecules/Settings/ProjectList/ProjectCell/index.tsx
+++ b/src/components/molecules/Settings/ProjectList/ProjectCell/index.tsx
@@ -52,7 +52,15 @@ const ProjectCell: React.FC<Props> = ({ project, onSelect }) => {
             </Desc>
           </DescriptionWrapper>
         )}
-        <Public status={project.status} />
+        <StatusWrapper>
+          <Public status={project.status} size={"md"} />
+          {project.isArchived && (
+            <ArchiveStatus>
+              <StatusCircle />
+              <Text size={"m"}>Archived</Text>
+            </ArchiveStatus>
+          )}
+        </StatusWrapper>
       </Wrapper>
     </StyledWrapper>
   );
@@ -73,6 +81,8 @@ const Wrapper = styled.div<{ isHover?: boolean }>`
   cursor: pointer;
   height: 100%;
   background-color: ${props => (props.isHover ? props.theme.main.lightTransparentBg : "")};
+  border: 1px solid
+    ${props => (props.isHover ? props.theme.main.select : props.theme.main.lightTransparentBg)};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -98,9 +108,30 @@ const Desc = styled(Text)`
   overflow: hidden;
   text-overflow: ellipsis;
 `;
+const StatusWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  margin: 8px;
+`;
 
 const Public = styled(PublicationStatus)`
   color: ${props => props.theme.projectCell.description};
+  margin: 8px;
+`;
+
+const ArchiveStatus = styled.div`
+  display: flex;
+  align-items: center;
+  margin: auto ${metricsSizes["s"]}px auto ${metricsSizes["s"]}px;
+`;
+
+const StatusCircle = styled.div`
+  width: 9px;
+  height: 9px;
+  background: ${props => props.theme.notification.infoBg};
+  border-radius: 50px;
+  margin: auto ${metricsSizes["s"]}px auto 0;
 `;
 
 export default ProjectCell;
diff --git a/src/components/molecules/Settings/ProjectList/ProjectList/index.tsx b/src/components/molecules/Settings/ProjectList/ProjectList/index.tsx
index 7dc205a5d..391d09294 100644
--- a/src/components/molecules/Settings/ProjectList/ProjectList/index.tsx
+++ b/src/components/molecules/Settings/ProjectList/ProjectList/index.tsx
@@ -1,110 +1,40 @@
-import React, { useEffect, useState } from "react";
-import { useIntl } from "react-intl";
+import React from "react";
 
-import Button from "@reearth/components/atoms/Button";
-import Flex from "@reearth/components/atoms/Flex";
-import Icon from "@reearth/components/atoms/Icon";
 import Loading from "@reearth/components/atoms/Loading";
-import Text from "@reearth/components/atoms/Text";
 import ProjectCell, {
   Project as ProjectType,
 } from "@reearth/components/molecules/Settings/ProjectList/ProjectCell";
-import { styled, useTheme } from "@reearth/theme";
+import { styled } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
 
 export type Project = ProjectType;
 
 export type Props = {
   title?: string;
-  archived?: boolean;
   projects?: Project[];
   loading?: boolean;
   onProjectSelect?: (project: Project) => void;
-  onCreationButtonClick?: () => void;
 };
 
-const ProjectList: React.FC<Props> = ({
-  loading,
-  projects,
-  title,
-  archived,
-  onProjectSelect,
-  onCreationButtonClick,
-}) => {
-  const intl = useIntl();
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    if (archived) {
-      setOpen(false);
-    }
-  }, [archived]);
-  const theme = useTheme();
-
+const ProjectList: React.FC<Props> = ({ loading, projects, onProjectSelect }) => {
   return (
-    <>
-      {archived && (
-        <StyledFlex align="center" onClick={() => setOpen(!open)}>
-          <StyledIcon icon="arrowToggle" size={15} color={theme.main.text} />
-          <Text
-            size="m"
-            weight="normal"
-            color={theme.main.text}
-            otherProperties={{ margin: "12px 0" }}>
-            {`${intl.formatMessage({ defaultMessage: "Archived Projects" })} (${
-              projects?.length || 0
-            })`}
-          </Text>
-        </StyledFlex>
-      )}
-      {!archived && (
-        <StyledFlex justify="space-between" align="center">
-          <Text size="m" weight="normal" color={theme.main.text}>
-            {title ||
-              `${intl.formatMessage({ defaultMessage: "Current Projects" })} (${
-                projects?.length || 0
-              })`}
-          </Text>
-          <Button
-            large
-            buttonType="secondary"
-            text={intl.formatMessage({ defaultMessage: "New Project" })}
-            onClick={onCreationButtonClick}
-          />
-        </StyledFlex>
-      )}
+    <ProjectListContainer>
       {loading ? (
-        <div>
-          <Loading />
-        </div>
+        <Loading />
       ) : (
-        <>
-          {open && (
-            <ProjectListContainner>
-              {projects?.map(project => (
-                <ProjectCell project={project} key={project.id} onSelect={onProjectSelect} />
-              ))}
-            </ProjectListContainner>
-          )}
-        </>
+        projects?.map(project => (
+          <ProjectCell project={project} key={project.id} onSelect={onProjectSelect} />
+        ))
       )}
-    </>
+    </ProjectListContainer>
   );
 };
 
-const StyledIcon = styled(Icon)`
-  margin-right: 5px;
-`;
-
-const ProjectListContainner = styled.div`
+const ProjectListContainer = styled.div`
   > * {
+    margin-top: ${metricsSizes["4xl"]}px;
     margin-bottom: ${metricsSizes["4xl"]}px;
   }
 `;
 
-const StyledFlex = styled(Flex)`
-  border-bottom: solid 1px ${({ theme }) => theme.projectCell.divider};
-  cursor: pointer;
-`;
-
 export default ProjectList;
diff --git a/src/components/molecules/Settings/SettingPage/index.tsx b/src/components/molecules/Settings/SettingPage/index.tsx
index 7c670ef15..1f786d39c 100644
--- a/src/components/molecules/Settings/SettingPage/index.tsx
+++ b/src/components/molecules/Settings/SettingPage/index.tsx
@@ -2,16 +2,27 @@ import { Link } from "@reach/router";
 import React, { useState } from "react";
 
 import Icon from "@reearth/components/atoms/Icon";
+import Loading from "@reearth/components/atoms/Loading";
 import Header, { Props } from "@reearth/components/molecules/Common/Header";
 import ProjectMenu from "@reearth/components/molecules/Common/ProjectMenu";
 import Navigation from "@reearth/components/molecules/Settings/Navigation";
 import { styled } from "@reearth/theme";
+import { handleScroll } from "@reearth/util/handleScroll";
 
-const SettingPage: React.FC<Props> = ({
+export type SettingPageProps = {
+  loading?: boolean;
+  hasMoreItems?: boolean;
+  onScroll?: () => void;
+} & Props;
+
+const SettingPage: React.FC<SettingPageProps> = ({
   children,
   currentTeam,
   currentProject,
   sceneId,
+  loading,
+  hasMoreItems,
+  onScroll,
   ...props
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -35,7 +46,10 @@ const SettingPage: React.FC<Props> = ({
           currentProject && <ProjectMenu currentProject={currentProject} teamId={currentTeam?.id} />
         }
       />
-      <BodyWrapper>
+      <BodyWrapper
+        onScroll={e => {
+          !loading && hasMoreItems && handleScroll(e, onScroll);
+        }}>
         <LeftWrapper>
           <Navigation team={currentTeam} project={currentProject} />
         </LeftWrapper>
@@ -54,6 +68,7 @@ const SettingPage: React.FC<Props> = ({
               )}
             </DeviceMenu>
             {children}
+            {hasMoreItems && loading && <StyledLoading relative />}
           </ContentWrapper>
         </RightWrapper>
       </BodyWrapper>
@@ -77,7 +92,7 @@ const Wrapper = styled.div`
 const BodyWrapper = styled.div`
   height: 100%;
   padding-top: 48px;
-  overflow: auto;
+  overflow-y: scroll;
 `;
 
 const LeftWrapper = styled.div`
@@ -157,4 +172,8 @@ const MenuIcon = styled(Icon)`
   }
 `;
 
+const StyledLoading = styled(Loading)`
+  margin: 52px auto;
+`;
+
 export default SettingPage;
diff --git a/src/components/organisms/Common/AssetContainer/hooks.ts b/src/components/organisms/Common/AssetContainer/hooks.ts
index ded30d422..cc5834b52 100644
--- a/src/components/organisms/Common/AssetContainer/hooks.ts
+++ b/src/components/organisms/Common/AssetContainer/hooks.ts
@@ -4,9 +4,9 @@ import { useIntl } from "react-intl";
 
 import {
   GetAssetsQuery,
-  useGetAssetsQuery,
   useCreateAssetMutation,
   useRemoveAssetMutation,
+  useGetAssetsQuery,
   Maybe,
   AssetSortType as GQLSortType,
 } from "@reearth/gql";
@@ -72,18 +72,18 @@ export default (teamId?: string, initialAssetUrl?: string | null, allowDeletion?
 
   const hasMoreAssets =
     data?.assets.pageInfo?.hasNextPage || data?.assets.pageInfo?.hasPreviousPage;
+
   const isRefetching = networkStatus === 3;
   const assets = data?.assets.edges?.map(e => e.node) as AssetNodes;
 
   const initialAsset = assets?.find(a => a.url === initialAssetUrl);
   const [selectedAssets, selectAsset] = useState<Asset[]>(initialAsset ? [initialAsset] : []);
 
-  const getMoreAssets = useCallback(() => {
+  const handleGetMoreAssets = useCallback(() => {
     if (hasMoreAssets) {
       fetchMore({
         variables: {
           pagination: pagination(sort, data?.assets.pageInfo.endCursor),
-          delay: true,
         },
       });
     }
@@ -193,7 +193,7 @@ export default (teamId?: string, initialAssetUrl?: string | null, allowDeletion?
     searchTerm,
     selectedAssets,
     selectAsset,
-    getMoreAssets,
+    handleGetMoreAssets,
     createAssets,
     removeAssets: allowDeletion ? removeAssets : undefined,
     handleSortChange,
diff --git a/src/components/organisms/Common/AssetContainer/index.tsx b/src/components/organisms/Common/AssetContainer/index.tsx
index 7e50249ab..9f93a4392 100644
--- a/src/components/organisms/Common/AssetContainer/index.tsx
+++ b/src/components/organisms/Common/AssetContainer/index.tsx
@@ -31,7 +31,7 @@ const AssetContainer: React.FC<Props> = ({
     searchTerm,
     selectedAssets,
     selectAsset,
-    getMoreAssets,
+    handleGetMoreAssets,
     createAssets,
     handleSortChange,
     handleSearchTerm,
@@ -78,7 +78,7 @@ const AssetContainer: React.FC<Props> = ({
       smallCardOnly={smallCardOnly}
       onCreateAssets={createAssets}
       onRemove={removeAssets}
-      onGetMore={getMoreAssets}
+      onGetMore={handleGetMoreAssets}
       onSelect={handleSelect}
       onSortChange={handleSortChange}
       onSearch={handleSearchTerm}
diff --git a/src/components/organisms/Dashboard/hooks.ts b/src/components/organisms/Dashboard/hooks.ts
index d730c8186..9ffd78f0d 100644
--- a/src/components/organisms/Dashboard/hooks.ts
+++ b/src/components/organisms/Dashboard/hooks.ts
@@ -1,6 +1,6 @@
+import { useApolloClient } from "@apollo/client";
 import { useNavigate } from "@reach/router";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useIntl } from "react-intl";
 
 import type { User } from "@reearth/components/molecules/Common/Header";
 import type { Project, Team } from "@reearth/components/molecules/Dashboard";
@@ -12,9 +12,15 @@ import {
   useCreateProjectMutation,
   useCreateSceneMutation,
   Visualizer,
+  GetProjectsQuery,
 } from "@reearth/gql";
+import { useT } from "@reearth/i18n";
 import { useTeam, useProject, useUnselectProject, useNotification } from "@reearth/state";
 
+export type ProjectNodes = NonNullable<GetProjectsQuery["projects"]["nodes"][number]>[];
+
+const projectsPerPage = 9;
+
 export default (teamId?: string) => {
   const [currentTeam, setCurrentTeam] = useTeam();
   const [currentProject] = useProject();
@@ -24,7 +30,7 @@ export default (teamId?: string) => {
   const { data, refetch } = useGetMeQuery();
   const [modalShown, setModalShown] = useState(false);
   const openModal = useCallback(() => setModalShown(true), []);
-  const intl = useIntl();
+  const t = useT();
   const navigate = useNavigate();
 
   const toPublishmentStatus = (s: PublishmentStatus) =>
@@ -41,6 +47,7 @@ export default (teamId?: string) => {
   const teams = data?.me?.teams;
   const team = teams?.find(team => team.id === teamId);
   const personal = teamId === data?.me?.myTeam.id;
+  const gqlCache = useApolloClient().cache;
 
   useEffect(() => {
     if (team?.id && team.id !== currentTeam?.id) {
@@ -72,14 +79,14 @@ export default (teamId?: string) => {
       if (results.data?.createTeam) {
         setNotification({
           type: "success",
-          text: intl.formatMessage({ defaultMessage: "Successfully created workspace!" }),
+          text: t("Successfully created workspace!"),
         });
         setCurrentTeam(results.data.createTeam.team);
         navigate(`/dashboard/${results.data.createTeam.team.id}`);
       }
       refetch();
     },
-    [createTeamMutation, setCurrentTeam, refetch, navigate, intl, setNotification],
+    [createTeamMutation, setCurrentTeam, refetch, navigate, t, setNotification],
   );
 
   useEffect(() => {
@@ -99,13 +106,21 @@ export default (teamId?: string) => {
     [refetch],
   );
 
-  const { data: projectData } = useGetProjectsQuery({
-    variables: { teamId: teamId ?? "", first: 100 },
+  const {
+    data: projectData,
+    loading,
+    fetchMore,
+    networkStatus,
+  } = useGetProjectsQuery({
+    variables: { teamId: teamId ?? "", last: projectsPerPage },
     skip: !teamId,
+    notifyOnNetworkStatusChange: true,
   });
 
+  const projectNodes = projectData?.projects.edges.map(e => e.node) as ProjectNodes;
+
   const projects = useMemo(() => {
-    return (projectData?.projects.nodes ?? [])
+    return (projectNodes ?? [])
       .map<Project | undefined>(project =>
         project
           ? {
@@ -120,7 +135,26 @@ export default (teamId?: string) => {
           : undefined,
       )
       .filter((project): project is Project => !!project);
-  }, [projectData?.projects.nodes]);
+  }, [projectNodes]);
+
+  const hasMoreProjects =
+    projectData?.projects.pageInfo?.hasNextPage || projectData?.projects.pageInfo?.hasPreviousPage;
+
+  const isRefetchingProjects = networkStatus === 3;
+
+  const handleGetMoreProjects = useCallback(() => {
+    if (hasMoreProjects) {
+      fetchMore({
+        variables: {
+          before: projectData?.projects.pageInfo?.endCursor,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return fetchMoreResult;
+        },
+      });
+    }
+  }, [projectData?.projects.pageInfo, fetchMore, hasMoreProjects]);
 
   const [createNewProject] = useCreateProjectMutation({
     refetchQueries: ["GetProjects"],
@@ -141,7 +175,7 @@ export default (teamId?: string) => {
       if (project.errors || !project.data?.createProject) {
         setNotification({
           type: "error",
-          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+          text: t("Failed to create project."),
         });
         setModalShown(false);
         return;
@@ -152,19 +186,19 @@ export default (teamId?: string) => {
       if (scene.errors) {
         setNotification({
           type: "error",
-          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+          text: t("Failed to create project."),
         });
         setModalShown(false);
         return;
       }
       setNotification({
         type: "success",
-        text: intl.formatMessage({ defaultMessage: "Successfully created project!" }),
+        text: t("Successfully created project!"),
       });
       setModalShown(false);
       refetch();
     },
-    [createNewProject, createScene, teamId, refetch, intl, setNotification],
+    [createNewProject, createScene, teamId, refetch, t, setNotification],
   );
 
   const [assetModalOpened, setOpenAssets] = useState(false);
@@ -185,9 +219,15 @@ export default (teamId?: string) => {
     selectAsset(asset);
   }, []);
 
+  useEffect(() => {
+    gqlCache.evict({ fieldName: "projects" });
+  }, [gqlCache]);
+
   return {
     user,
     projects,
+    projectLoading: loading ?? isRefetchingProjects,
+    hasMoreProjects,
     createProject,
     teams,
     currentTeam: team as Team,
@@ -200,5 +240,6 @@ export default (teamId?: string) => {
     assetModalOpened,
     toggleAssetModal,
     onAssetSelect,
+    handleGetMoreProjects,
   };
 };
diff --git a/src/components/organisms/Dashboard/index.tsx b/src/components/organisms/Dashboard/index.tsx
index e940a87e1..2b81eaf8c 100644
--- a/src/components/organisms/Dashboard/index.tsx
+++ b/src/components/organisms/Dashboard/index.tsx
@@ -21,6 +21,8 @@ const Dashboard: React.FC<Props> = ({ teamId }) => {
   const {
     user,
     projects,
+    projectLoading,
+    hasMoreProjects,
     createProject,
     teams = [],
     currentTeam,
@@ -33,6 +35,7 @@ const Dashboard: React.FC<Props> = ({ teamId }) => {
     assetModalOpened,
     toggleAssetModal,
     onAssetSelect,
+    handleGetMoreProjects,
   } = useHooks(teamId);
 
   return (
@@ -47,10 +50,13 @@ const Dashboard: React.FC<Props> = ({ teamId }) => {
           onChangeTeam={changeTeam}
           modalShown={modalShown}
           openModal={openModal}
-          handleModalClose={handleModalClose}
+          onModalClose={handleModalClose}
           dashboard
         />
-      }>
+      }
+      onGetMoreProjects={handleGetMoreProjects}
+      isLoading={projectLoading}
+      hasMoreProjects={hasMoreProjects}>
       <Workspace team={currentTeam} />
       <QuickStart
         onCreateTeam={createTeam}
diff --git a/src/components/organisms/EarthEditor/Header/index.tsx b/src/components/organisms/EarthEditor/Header/index.tsx
index 7d8903a47..f587fcee9 100644
--- a/src/components/organisms/EarthEditor/Header/index.tsx
+++ b/src/components/organisms/EarthEditor/Header/index.tsx
@@ -61,7 +61,7 @@ const Header: React.FC<Props> = ({ className }) => {
         onPreviewOpen={openPreview}
         modalShown={workspaceModalVisible}
         openModal={openWorkspaceModal}
-        handleModalClose={closeWorkspaceModal}
+        onModalClose={closeWorkspaceModal}
       />
       <PublicationModal
         className={className}
diff --git a/src/components/organisms/Settings/Project/Dataset/hooks.ts b/src/components/organisms/Settings/Project/Dataset/hooks.ts
index 819b75792..11ee0fa9d 100644
--- a/src/components/organisms/Settings/Project/Dataset/hooks.ts
+++ b/src/components/organisms/Settings/Project/Dataset/hooks.ts
@@ -3,24 +3,28 @@ import { useCallback } from "react";
 import { useIntl } from "react-intl";
 
 import {
-  GetDatasetSchemasQuery,
+  DatasetsListQuery,
   useGetProjectSceneQuery,
-  useGetDatasetSchemasQuery,
   useImportDatasetMutation,
   useRemoveDatasetMutation,
+  useDatasetsListQuery,
 } from "@reearth/gql";
 import { useTeam, useProject, useNotification } from "@reearth/state";
 
-type Nodes = NonNullable<GetDatasetSchemasQuery["scene"]>["datasetSchemas"]["nodes"];
+type Nodes = NonNullable<DatasetsListQuery["datasetSchemas"]["nodes"]>;
 
 type DatasetSchemas = NonNullable<Nodes[number]>[];
 
+const datasetPerPage = 20;
+
 export default (projectId: string) => {
   const intl = useIntl();
   const [currentTeam] = useTeam();
   const [currentProject] = useProject();
   const [, setNotification] = useNotification();
 
+  const client = useApolloClient();
+
   const { data: sceneData } = useGetProjectSceneQuery({
     variables: { projectId: projectId ?? "" },
     skip: !projectId,
@@ -28,15 +32,34 @@ export default (projectId: string) => {
 
   const sceneId = sceneData?.scene?.id;
 
-  const { data } = useGetDatasetSchemasQuery({
-    variables: { projectId: projectId ?? "", first: 100 },
+  const { data, fetchMore, loading, networkStatus } = useDatasetsListQuery({
+    variables: { sceneId: sceneId ?? "", first: datasetPerPage },
     skip: !projectId,
+    notifyOnNetworkStatusChange: true,
   });
 
-  const nodes = data?.scene?.datasetSchemas.nodes ?? [];
+  const nodes = data?.datasetSchemas.edges.map(e => e.node) ?? [];
 
   const datasetSchemas = nodes.filter(Boolean) as DatasetSchemas;
-  const client = useApolloClient();
+
+  const hasMoreDataSets =
+    data?.datasetSchemas?.pageInfo.hasNextPage || data?.datasetSchemas?.pageInfo.hasPreviousPage;
+
+  const isRefetchingDataSets = networkStatus === 3;
+
+  const handleGetMoreDataSets = useCallback(() => {
+    if (hasMoreDataSets) {
+      fetchMore({
+        variables: {
+          after: data?.datasetSchemas?.pageInfo.endCursor,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return fetchMoreResult;
+        },
+      });
+    }
+  }, [data?.datasetSchemas?.pageInfo, fetchMore, hasMoreDataSets]);
 
   const [removeDatasetSchema] = useRemoveDatasetMutation();
   const handleRemoveDataset = useCallback(
@@ -87,7 +110,10 @@ export default (projectId: string) => {
     currentTeam,
     currentProject,
     datasetSchemas,
+    datasetLoading: loading ?? isRefetchingDataSets,
+    hasMoreDataSets,
     handleDatasetImport,
     handleRemoveDataset,
+    handleGetMoreDataSets,
   };
 };
diff --git a/src/components/organisms/Settings/Project/Dataset/index.tsx b/src/components/organisms/Settings/Project/Dataset/index.tsx
index 112c5cdf2..bd3de260b 100644
--- a/src/components/organisms/Settings/Project/Dataset/index.tsx
+++ b/src/components/organisms/Settings/Project/Dataset/index.tsx
@@ -14,11 +14,24 @@ type Props = {
 
 const Dataset: React.FC<Props> = ({ projectId }) => {
   const intl = useIntl();
-  const { currentTeam, currentProject, datasetSchemas, handleRemoveDataset, handleDatasetImport } =
-    useHooks(projectId);
+  const {
+    currentTeam,
+    currentProject,
+    datasetSchemas,
+    datasetLoading,
+    hasMoreDataSets,
+    handleRemoveDataset,
+    handleDatasetImport,
+    handleGetMoreDataSets,
+  } = useHooks(projectId);
 
   return (
-    <SettingPage teamId={currentTeam?.id} projectId={projectId}>
+    <SettingPage
+      teamId={currentTeam?.id}
+      projectId={projectId}
+      loading={datasetLoading}
+      hasMoreItems={hasMoreDataSets}
+      onScroll={handleGetMoreDataSets}>
       <SettingsHeader
         title={intl.formatMessage({ defaultMessage: "Dataset" })}
         currentProject={currentProject?.name}
diff --git a/src/components/organisms/Settings/ProjectList/hooks.ts b/src/components/organisms/Settings/ProjectList/hooks.ts
index d366a79e4..213acd4da 100644
--- a/src/components/organisms/Settings/ProjectList/hooks.ts
+++ b/src/components/organisms/Settings/ProjectList/hooks.ts
@@ -1,6 +1,6 @@
+import { useApolloClient } from "@apollo/client";
 import { useNavigate } from "@reach/router";
 import { useState, useCallback, useEffect } from "react";
-import { useIntl } from "react-intl";
 
 import { Project } from "@reearth/components/molecules/Dashboard/types";
 import {
@@ -10,7 +10,9 @@ import {
   useCreateSceneMutation,
   useGetProjectsQuery,
   Visualizer,
+  GetProjectsQuery,
 } from "@reearth/gql";
+import { useT } from "@reearth/i18n";
 import { useTeam, useProject, useNotification } from "@reearth/state";
 
 const toPublishmentStatus = (s: PublishmentStatus) =>
@@ -20,12 +22,17 @@ const toPublishmentStatus = (s: PublishmentStatus) =>
     ? "limited"
     : "unpublished";
 
+export type ProjectNodes = NonNullable<GetProjectsQuery["projects"]["nodes"][number]>[];
+
+const projectPerPage = 5;
+
 export default (teamId: string) => {
   const [, setNotification] = useNotification();
   const [currentTeam, setTeam] = useTeam();
   const [, setProject] = useProject();
   const navigate = useNavigate();
-  const intl = useIntl();
+  const t = useT();
+  const gqlCache = useApolloClient().cache;
 
   const [modalShown, setModalShown] = useState(false);
   const openModal = useCallback(() => setModalShown(true), []);
@@ -41,9 +48,15 @@ export default (teamId: string) => {
   }
   const team = teamId ? data?.me?.teams.find(team => team.id === teamId) : data?.me?.myTeam;
 
-  const { data: projectData } = useGetProjectsQuery({
-    variables: { teamId: teamId ?? "", first: 100 },
+  const {
+    data: projectData,
+    loading: loadingProjects,
+    fetchMore,
+    networkStatus,
+  } = useGetProjectsQuery({
+    variables: { teamId: teamId ?? "", last: projectPerPage },
     skip: !teamId,
+    notifyOnNetworkStatusChange: true,
   });
 
   useEffect(() => {
@@ -52,23 +65,9 @@ export default (teamId: string) => {
     }
   }, [currentTeam, team, setTeam]);
 
-  const currentProjects = (projectData?.projects.nodes ?? [])
-    .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,
-          }
-        : undefined,
-    )
-    .filter((project): project is Project => !!project && project?.isArchived === false);
+  const projectNodes = projectData?.projects.edges.map(e => e.node) as ProjectNodes;
 
-  const archivedProjects = (projectData?.projects.nodes ?? [])
+  const currentProjects = (projectNodes ?? [])
     .map<Project | undefined>(project =>
       project
         ? {
@@ -82,7 +81,26 @@ export default (teamId: string) => {
           }
         : undefined,
     )
-    .filter((project): project is Project => !!project && project?.isArchived === true);
+    .filter((project): project is Project => !!project);
+
+  const totalProjects = projectData?.projects.totalCount;
+  const hasMoreProjects =
+    projectData?.projects.pageInfo?.hasNextPage || projectData?.projects.pageInfo?.hasPreviousPage;
+  const isRefetchingProjects = networkStatus === 3;
+
+  const handleGetMoreProjects = useCallback(() => {
+    if (hasMoreProjects) {
+      fetchMore({
+        variables: {
+          before: projectData?.projects.pageInfo?.endCursor,
+        },
+        updateQuery: (prev, { fetchMoreResult }) => {
+          if (!fetchMoreResult) return prev;
+          return fetchMoreResult;
+        },
+      });
+    }
+  }, [projectData?.projects.pageInfo, fetchMore, hasMoreProjects]);
 
   const handleModalClose = useCallback(
     (r?: boolean) => {
@@ -110,7 +128,7 @@ export default (teamId: string) => {
       if (project.errors || !project.data?.createProject) {
         setNotification({
           type: "error",
-          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+          text: t("Failed to create project."),
         });
         setModalShown(false);
         return;
@@ -121,19 +139,19 @@ export default (teamId: string) => {
       if (scene.errors || !scene.data?.createScene) {
         setNotification({
           type: "error",
-          text: intl.formatMessage({ defaultMessage: "Failed to create project." }),
+          text: t("Failed to create project."),
         });
         setModalShown(false);
         return;
       }
       setNotification({
         type: "success",
-        text: intl.formatMessage({ defaultMessage: "Successfully created project!" }),
+        text: t("Successfully created project!"),
       });
       setModalShown(false);
       refetch();
     },
-    [createNewProject, createScene, intl, refetch, setNotification, teamId],
+    [createNewProject, createScene, t, refetch, setNotification, teamId],
   );
 
   const selectProject = useCallback(
@@ -158,10 +176,17 @@ export default (teamId: string) => {
     if (!asset) return;
     selectAsset(asset);
   }, []);
+  useEffect(() => {
+    return () => {
+      gqlCache.evict({ fieldName: "projects" });
+    };
+  }, [gqlCache]);
 
   return {
     currentProjects,
-    archivedProjects,
+    totalProjects,
+    loadingProjects: loadingProjects ?? isRefetchingProjects,
+    hasMoreProjects,
     teamId,
     loading,
     modalShown,
@@ -173,5 +198,6 @@ export default (teamId: string) => {
     assetModalOpened,
     toggleAssetModal,
     onAssetSelect,
+    handleGetMoreProjects,
   };
 };
diff --git a/src/components/organisms/Settings/ProjectList/index.tsx b/src/components/organisms/Settings/ProjectList/index.tsx
index f3b66895a..bfae9a1fb 100644
--- a/src/components/organisms/Settings/ProjectList/index.tsx
+++ b/src/components/organisms/Settings/ProjectList/index.tsx
@@ -1,12 +1,14 @@
 import React from "react";
-import { useIntl } from "react-intl";
 
+import Button from "@reearth/components/atoms/Button";
 import Loading from "@reearth/components/atoms/Loading";
+import TabSection from "@reearth/components/atoms/TabSection";
 import ProjectCreationModal from "@reearth/components/molecules/Common/ProjectCreationModal";
 import MoleculeProjectList from "@reearth/components/molecules/Settings/ProjectList/ProjectList";
 import SettingsHeader from "@reearth/components/molecules/Settings/SettingsHeader";
 import AssetModal from "@reearth/components/organisms/Common/AssetModal";
 import SettingPage from "@reearth/components/organisms/Settings/SettingPage";
+import { useT } from "@reearth/i18n";
 
 import useHooks from "./hooks";
 
@@ -15,11 +17,13 @@ type Props = {
 };
 
 const ProjectList: React.FC<Props> = ({ teamId }) => {
-  const intl = useIntl();
+  const t = useT();
   const {
     loading,
     currentProjects,
-    archivedProjects,
+    totalProjects,
+    loadingProjects,
+    hasMoreProjects,
     modalShown,
     openModal,
     handleModalClose,
@@ -29,17 +33,36 @@ const ProjectList: React.FC<Props> = ({ teamId }) => {
     assetModalOpened,
     toggleAssetModal,
     onAssetSelect,
+    handleGetMoreProjects,
   } = useHooks(teamId);
 
+  type Tab = "Working";
+  const headers = {
+    Working: t("Working Projects") + "(" + (totalProjects ?? 0) + ")",
+  };
+
   return (
-    <SettingPage teamId={teamId}>
-      <SettingsHeader title={intl.formatMessage({ defaultMessage: "Project List" })} />
-      <MoleculeProjectList
-        projects={currentProjects}
-        onProjectSelect={selectProject}
-        onCreationButtonClick={openModal}
-      />
-      <MoleculeProjectList projects={archivedProjects} archived onProjectSelect={selectProject} />
+    <SettingPage
+      teamId={teamId}
+      loading={loadingProjects}
+      hasMoreItems={hasMoreProjects}
+      onScroll={handleGetMoreProjects}>
+      <SettingsHeader title={t("Project List")} />
+      <TabSection<Tab>
+        menuAlignment="top"
+        initialSelected={"Working"}
+        selected="Working"
+        expandedMenuIcon={false}
+        headers={headers}
+        headerAction={
+          <Button large buttonType="secondary" text={t("New Project")} onClick={openModal} />
+        }>
+        {{
+          Working: (
+            <MoleculeProjectList projects={currentProjects} onProjectSelect={selectProject} />
+          ),
+        }}
+      </TabSection>
       <ProjectCreationModal
         open={modalShown}
         onClose={handleModalClose}
diff --git a/src/components/organisms/Settings/SettingPage/index.tsx b/src/components/organisms/Settings/SettingPage/index.tsx
index 1159abaf5..e8c1a8647 100644
--- a/src/components/organisms/Settings/SettingPage/index.tsx
+++ b/src/components/organisms/Settings/SettingPage/index.tsx
@@ -9,10 +9,20 @@ type Props = {
   className?: string;
   teamId?: string;
   projectId?: string;
+  loading?: boolean;
+  hasMoreItems?: boolean;
   onBack?: () => void;
+  onScroll?: () => void;
 };
 
-const SettingPage: React.FC<Props> = ({ teamId, projectId, children }) => {
+const SettingPage: React.FC<Props> = ({
+  teamId,
+  projectId,
+  children,
+  loading,
+  hasMoreItems,
+  onScroll,
+}) => {
   const { logout } = useAuth();
 
   const {
@@ -39,13 +49,16 @@ const SettingPage: React.FC<Props> = ({ teamId, projectId, children }) => {
       currentTeam={currentTeam}
       currentProject={currentProject}
       sceneId={sceneId}
+      loading={loading}
+      hasMoreItems={hasMoreItems}
       onSignOut={logout}
       onBack={back}
       onCreateTeam={createTeam}
       onChangeTeam={changeTeam}
       modalShown={modalShown}
       openModal={openModal}
-      handleModalClose={handleModalClose}>
+      onModalClose={handleModalClose}
+      onScroll={onScroll}>
       {children}
     </MoleculesSettingPage>
   );
diff --git a/src/components/organisms/Settings/Workspace/Asset/hooks.ts b/src/components/organisms/Settings/Workspace/Asset/hooks.ts
index 46ff8c45b..7da4b0450 100644
--- a/src/components/organisms/Settings/Workspace/Asset/hooks.ts
+++ b/src/components/organisms/Settings/Workspace/Asset/hooks.ts
@@ -19,7 +19,7 @@ export default (params: Params) => {
     hasMoreAssets,
     sort,
     searchTerm,
-    getMoreAssets,
+    handleGetMoreAssets,
     createAssets,
     handleSortChange,
     handleSearchTerm,
@@ -40,7 +40,7 @@ export default (params: Params) => {
     hasMoreAssets,
     sort,
     searchTerm,
-    getMoreAssets,
+    handleGetMoreAssets,
     createAssets,
     handleSortChange,
     handleSearchTerm,
diff --git a/src/gql/graphql-client-api.tsx b/src/gql/graphql-client-api.tsx
index 7bc1b6d2e..e6c127896 100644
--- a/src/gql/graphql-client-api.tsx
+++ b/src/gql/graphql-client-api.tsx
@@ -2429,7 +2429,18 @@ export type GetDatasetSchemasQueryVariables = Exact<{
 }>;
 
 
-export type GetDatasetSchemasQuery = { __typename?: 'Query', scene?: { __typename?: 'Scene', id: string, datasetSchemas: { __typename?: 'DatasetSchemaConnection', totalCount: number, nodes: Array<{ __typename?: 'DatasetSchema', id: string, source: string, name: string } | null>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } } | null };
+export type GetDatasetSchemasQuery = { __typename?: 'Query', scene?: { __typename?: 'Scene', id: string, datasetSchemas: { __typename?: 'DatasetSchemaConnection', totalCount: number, edges: Array<{ __typename?: 'DatasetSchemaEdge', node?: { __typename?: 'DatasetSchema', id: string, source: string, name: string } | null }>, nodes: Array<{ __typename?: 'DatasetSchema', id: string, source: string, name: string } | null>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } } | null };
+
+export type DatasetsListQueryVariables = Exact<{
+  sceneId: Scalars['ID'];
+  first?: InputMaybe<Scalars['Int']>;
+  last?: InputMaybe<Scalars['Int']>;
+  after?: InputMaybe<Scalars['Cursor']>;
+  before?: InputMaybe<Scalars['Cursor']>;
+}>;
+
+
+export type DatasetsListQuery = { __typename?: 'Query', datasetSchemas: { __typename?: 'DatasetSchemaConnection', totalCount: number, edges: Array<{ __typename?: 'DatasetSchemaEdge', node?: { __typename?: 'DatasetSchema', id: string, source: string, name: string } | null }>, nodes: Array<{ __typename?: 'DatasetSchema', id: string, source: string, name: string } | null>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
 
 export type GetLinkableDatasetsQueryVariables = Exact<{
   sceneId: Scalars['ID'];
@@ -2685,7 +2696,7 @@ export type GetProjectsQueryVariables = Exact<{
 }>;
 
 
-export type GetProjectsQuery = { __typename?: 'Query', projects: { __typename?: 'ProjectConnection', nodes: Array<{ __typename?: 'Project', id: string, name: string, description: string, imageUrl?: string | null, isArchived: boolean, isBasicAuthActive: boolean, basicAuthUsername: string, basicAuthPassword: string, publicTitle: string, publicDescription: string, publicImage: string, alias: string, publishmentStatus: PublishmentStatus, scene?: { __typename?: 'Scene', id: string } | null } | null> } };
+export type GetProjectsQuery = { __typename?: 'Query', projects: { __typename?: 'ProjectConnection', totalCount: number, edges: Array<{ __typename?: 'ProjectEdge', node?: { __typename?: 'Project', id: string, name: string, description: string, imageUrl?: string | null, isArchived: boolean, isBasicAuthActive: boolean, basicAuthUsername: string, basicAuthPassword: string, publicTitle: string, publicDescription: string, publicImage: string, alias: string, publishmentStatus: PublishmentStatus, scene?: { __typename?: 'Scene', id: string } | null } | null }>, nodes: Array<{ __typename?: 'Project', id: string, name: string, description: string, imageUrl?: string | null, isArchived: boolean, isBasicAuthActive: boolean, basicAuthUsername: string, basicAuthPassword: string, publicTitle: string, publicDescription: string, publicImage: string, alias: string, publishmentStatus: PublishmentStatus, scene?: { __typename?: 'Scene', id: string } | null } | null>, pageInfo: { __typename?: 'PageInfo', endCursor?: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor?: string | null } } };
 
 export type CheckProjectAliasQueryVariables = Exact<{
   alias: Scalars['String'];
@@ -4198,6 +4209,13 @@ export const GetDatasetSchemasDocument = gql`
   scene(projectId: $projectId) {
     id
     datasetSchemas(first: $first, last: $last, after: $after, before: $before) {
+      edges {
+        node {
+          id
+          source
+          name
+        }
+      }
       nodes {
         id
         source
@@ -4246,6 +4264,69 @@ export function useGetDatasetSchemasLazyQuery(baseOptions?: Apollo.LazyQueryHook
 export type GetDatasetSchemasQueryHookResult = ReturnType<typeof useGetDatasetSchemasQuery>;
 export type GetDatasetSchemasLazyQueryHookResult = ReturnType<typeof useGetDatasetSchemasLazyQuery>;
 export type GetDatasetSchemasQueryResult = Apollo.QueryResult<GetDatasetSchemasQuery, GetDatasetSchemasQueryVariables>;
+export const DatasetsListDocument = gql`
+    query datasetsList($sceneId: ID!, $first: Int, $last: Int, $after: Cursor, $before: Cursor) {
+  datasetSchemas(
+    sceneId: $sceneId
+    first: $first
+    last: $last
+    after: $after
+    before: $before
+  ) {
+    edges {
+      node {
+        id
+        source
+        name
+      }
+    }
+    nodes {
+      id
+      source
+      name
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    totalCount
+  }
+}
+    `;
+
+/**
+ * __useDatasetsListQuery__
+ *
+ * To run a query within a React component, call `useDatasetsListQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDatasetsListQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useDatasetsListQuery({
+ *   variables: {
+ *      sceneId: // value for 'sceneId'
+ *      first: // value for 'first'
+ *      last: // value for 'last'
+ *      after: // value for 'after'
+ *      before: // value for 'before'
+ *   },
+ * });
+ */
+export function useDatasetsListQuery(baseOptions: Apollo.QueryHookOptions<DatasetsListQuery, DatasetsListQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DatasetsListQuery, DatasetsListQueryVariables>(DatasetsListDocument, options);
+      }
+export function useDatasetsListLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DatasetsListQuery, DatasetsListQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DatasetsListQuery, DatasetsListQueryVariables>(DatasetsListDocument, options);
+        }
+export type DatasetsListQueryHookResult = ReturnType<typeof useDatasetsListQuery>;
+export type DatasetsListLazyQueryHookResult = ReturnType<typeof useDatasetsListLazyQuery>;
+export type DatasetsListQueryResult = Apollo.QueryResult<DatasetsListQuery, DatasetsListQueryVariables>;
 export const GetLinkableDatasetsDocument = gql`
     query GetLinkableDatasets($sceneId: ID!) {
   datasetSchemas(sceneId: $sceneId, first: 100) {
@@ -5459,6 +5540,26 @@ export const GetProjectsDocument = gql`
     after: $after
     before: $before
   ) {
+    edges {
+      node {
+        id
+        name
+        description
+        imageUrl
+        isArchived
+        isBasicAuthActive
+        basicAuthUsername
+        basicAuthPassword
+        publicTitle
+        publicDescription
+        publicImage
+        alias
+        publishmentStatus
+        scene {
+          id
+        }
+      }
+    }
     nodes {
       id
       name
@@ -5477,6 +5578,13 @@ export const GetProjectsDocument = gql`
         id
       }
     }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    totalCount
   }
 }
     `;
diff --git a/src/gql/provider.tsx b/src/gql/provider.tsx
index c62485948..7d9299bf7 100644
--- a/src/gql/provider.tsx
+++ b/src/gql/provider.tsx
@@ -13,6 +13,39 @@ import { useError } from "@reearth/state";
 
 import fragmentMatcher from "./fragmentMatcher.json";
 
+function paginationMerge(
+  existing: any,
+  incoming: any,
+  { readField }: { readField: ReadFieldFunction },
+) {
+  if (existing && incoming && isEqual(existing, incoming)) return incoming;
+
+  const merged = existing ? existing.edges.slice(0) : [];
+
+  let offset = offsetFromCursor(merged, existing?.pageInfo.endCursor, readField);
+  if (offset < 0) offset = merged.length;
+
+  for (let i = 0; i < incoming?.edges?.length; ++i) {
+    merged[offset + i] = incoming.edges[i];
+  }
+
+  return {
+    ...incoming,
+    edges: merged,
+  };
+}
+
+function offsetFromCursor(items: any, cursor: string, readField: ReadFieldFunction) {
+  if (items.length < 1) return -1;
+  for (let i = 0; i <= items.length; ++i) {
+    const item = items[i];
+    if (readField("cursor", item) === cursor) {
+      return i + 1;
+    }
+  }
+  return -1;
+}
+
 const Provider: React.FC = ({ children }) => {
   const endpoint = window.REEARTH_CONFIG?.api
     ? `${window.REEARTH_CONFIG.api}/graphql`
@@ -61,41 +94,22 @@ const Provider: React.FC = ({ children }) => {
         fields: {
           assets: {
             keyArgs: ["teamId", "keyword", "sort", "pagination", ["first", "last"]],
+            merge: paginationMerge,
+          },
+          projects: {
+            keyArgs: ["teamId", "last", "before"],
+            merge: paginationMerge,
+          },
 
-            merge(existing, incoming, { readField }) {
-              if (existing && incoming && isEqual(existing, incoming)) return incoming;
-
-              const merged = existing ? existing.edges.slice(0) : [];
-
-              let offset = offsetFromCursor(merged, existing?.pageInfo.endCursor, readField);
-              if (offset < 0) offset = merged.length;
-
-              for (let i = 0; i < incoming?.edges?.length; ++i) {
-                merged[offset + i] = incoming.edges[i];
-              }
-
-              return {
-                ...incoming,
-                edges: merged,
-              };
-            },
+          datasetSchemas: {
+            keyArgs: ["sceneId", "first", "after"],
+            merge: paginationMerge,
           },
         },
       },
     },
   });
 
-  function offsetFromCursor(items: any, cursor: string, readField: ReadFieldFunction) {
-    if (items.length < 1) return -1;
-    for (let i = 0; i <= items.length; ++i) {
-      const item = items[i];
-      if (readField("cursor", item) === cursor) {
-        return i + 1;
-      }
-    }
-    return -1;
-  }
-
   const client = new ApolloClient({
     uri: endpoint,
     link: ApolloLink.from([errorLink, sentryLink, authLink, uploadLink]),
diff --git a/src/gql/queries/dataset.ts b/src/gql/queries/dataset.ts
index b4a3fdad1..597229e23 100644
--- a/src/gql/queries/dataset.ts
+++ b/src/gql/queries/dataset.ts
@@ -43,6 +43,13 @@ export const GET_DATASET_SCHEMAS = gql`
     scene(projectId: $projectId) {
       id
       datasetSchemas(first: $first, last: $last, after: $after, before: $before) {
+        edges {
+          node {
+            id
+            source
+            name
+          }
+        }
         nodes {
           id
           source
@@ -59,6 +66,31 @@ export const GET_DATASET_SCHEMAS = gql`
     }
   }
 `;
+export const GET_DATASETS_LIST = gql`
+  query datasetsList($sceneId: ID!, $first: Int, $last: Int, $after: Cursor, $before: Cursor) {
+    datasetSchemas(sceneId: $sceneId, first: $first, last: $last, after: $after, before: $before) {
+      edges {
+        node {
+          id
+          source
+          name
+        }
+      }
+      nodes {
+        id
+        source
+        name
+      }
+      pageInfo {
+        endCursor
+        hasNextPage
+        hasPreviousPage
+        startCursor
+      }
+      totalCount
+    }
+  }
+`;
 
 export const GET_LINKABLE_DATASETS = gql`
   query GetLinkableDatasets($sceneId: ID!) {
diff --git a/src/gql/queries/project.ts b/src/gql/queries/project.ts
index 80804f5fb..596d58238 100644
--- a/src/gql/queries/project.ts
+++ b/src/gql/queries/project.ts
@@ -32,6 +32,26 @@ export const GET_TEAM_PROJECTS = gql`
 export const GET_PROJECTS = gql`
   query GetProjects($teamId: ID!, $first: Int, $last: Int, $after: Cursor, $before: Cursor) {
     projects(teamId: $teamId, first: $first, last: $last, after: $after, before: $before) {
+      edges {
+        node {
+          id
+          name
+          description
+          imageUrl
+          isArchived
+          isBasicAuthActive
+          basicAuthUsername
+          basicAuthPassword
+          publicTitle
+          publicDescription
+          publicImage
+          alias
+          publishmentStatus
+          scene {
+            id
+          }
+        }
+      }
       nodes {
         id
         name
@@ -50,6 +70,13 @@ export const GET_PROJECTS = gql`
           id
         }
       }
+      pageInfo {
+        endCursor
+        hasNextPage
+        hasPreviousPage
+        startCursor
+      }
+      totalCount
     }
   }
 `;
diff --git a/src/i18n/translations/en.yml b/src/i18n/translations/en.yml
index 6db2fccbc..150477a05 100644
--- a/src/i18n/translations/en.yml
+++ b/src/i18n/translations/en.yml
@@ -1,8 +1,18 @@
 Continue: Continue
 Cancel: Cancel
-Project settings: ''
-Datasets: ''
-Plugins: ''
-Manage projects: ''
-Documentation: ''
+Upload file: Upload file
+Delete: Delete
+No assets match your search.: No assets match your search.
+You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.
+Project settings: Project settings
+Datasets: Datasets
+Plugins: Plugins
+Manage projects: Manage projects
+Documentation: Documentation
 '''s workspace': '''s workspace'
+Successfully created workspace!: Successfully created workspace!
+Failed to create project.: Failed to create project.
+Successfully created project!: Successfully created project!
+Working Projects: Working Projects
+Project List: Project List
+New Project: New Project
diff --git a/src/i18n/translations/ja.yml b/src/i18n/translations/ja.yml
index c6c3cd8ea..0c74a543c 100644
--- a/src/i18n/translations/ja.yml
+++ b/src/i18n/translations/ja.yml
@@ -1,8 +1,18 @@
 Continue: キャンセル
 Cancel: 続ける
+Upload file: ''
+Delete: ''
+No assets match your search.: ''
+You haven't uploaded any assets yet. Click the upload button above and select a compatible file from your computer.: ''
 Project settings: プロジェクト設定
 Datasets: データセット
 Plugins: プラグイン
 Manage projects: プロジェクト管理
 Documentation: ヘルプ
 '''s workspace': ' のワークスペース'
+Successfully created workspace!: ''
+Failed to create project.: ''
+Successfully created project!: ''
+Working Projects: ''
+Project List: ''
+New Project: ''
diff --git a/src/i18n/translations/legacy/en.yml b/src/i18n/translations/legacy/en.yml
index 5ae9f7e46..081be9473 100644
--- a/src/i18n/translations/legacy/en.yml
+++ b/src/i18n/translations/legacy/en.yml
@@ -79,14 +79,8 @@ src:
           '3528672691': Cancel
           '4070151372': Select
           AssetContainer:
-            '710251853': >-
-              You haven't uploaded any assets yet. Click the upload button above
-              and select a compatible file from your computer.
-            '1896833639': No assets match your search.
             '1982191895': File size
             '2906553848': Alphabetical
-            '3645414921': Delete
-            '3863945965': Upload file
             '4205493358': Date
           AssetDeleteModal:
             '2868137144': >-
@@ -447,10 +441,6 @@ src:
           ProjectCell:
             '3038786653': No Title Project
             '4204406466': No Description...
-          ProjectList:
-            '899189507': Current Projects
-            '1355637676': Archived Projects
-            '4146466746': New Project
         SettingsHeader:
           '893550186': (Your personal workspace)
         Workspace:
@@ -507,10 +497,6 @@ src:
           '2700226140': Successfully added one or more assets.
           '3402808678': Failed to delete one or more assets.
           '4222118896': One or more assets were successfully deleted.
-      Dashboard:
-        '118901803': Successfully created project!
-        '1043376506': Failed to create project.
-        '1573629237': Successfully created workspace!
       EarthEditor:
         DataSourcePane:
           '8458775': Successfully deleted the dataset!
@@ -576,10 +562,6 @@ src:
             '2057458630': Plugins
           Public:
             '3135366329': Public
-        ProjectList:
-          '118901803': Successfully created project!
-          '1043376506': Failed to create project.
-          '3336263640': Project List
         Workspace:
           '905470392': Failed to delete member from the workspace.
           '1979109196': Failed to create workspace.
diff --git a/src/i18n/translations/legacy/ja.yml b/src/i18n/translations/legacy/ja.yml
index 89361f431..6a95831d1 100644
--- a/src/i18n/translations/legacy/ja.yml
+++ b/src/i18n/translations/legacy/ja.yml
@@ -73,12 +73,8 @@ src:
           '3528672691': キャンセル
           '4070151372': 選択
           AssetContainer:
-            '710251853': アセットライブラリ
-            '1896833639': 検索条件に該当するアセットは見つかりませんでした。
             '1982191895': サイズ順
             '2906553848': 名前順
-            '3645414921': 削除
-            '3863945965': ファイルアップロード
             '4205493358': 作成日時順
           AssetDeleteModal:
             '2868137144': 選択されたアセットが使用されていないことを確認してください。この操作は取り消せません。
@@ -399,10 +395,6 @@ src:
           ProjectCell:
             '3038786653': プロジェクト名未設定
             '4204406466': プロジェクト概要未設定
-          ProjectList:
-            '899189507': 現在のプロジェクト
-            '1355637676': 非編集化済みプロジェクト
-            '4146466746': 新規プロジェクト
         SettingsHeader:
           '893550186': (パーソナルワークスペース)
         Workspace:
@@ -453,10 +445,6 @@ src:
           '2700226140': アセットの追加に成功しました。
           '3402808678': アセットの削除に失敗しまたした。
           '4222118896': アセットが削除されました。
-      Dashboard:
-        '118901803': 新しいプロジェクトの作成に成功しました！
-        '1043376506': プロジェクトの作成に失敗しました。
-        '1573629237': 新しいワークスペースの作成に成功しました！
       EarthEditor:
         DataSourcePane:
           '8458775': ひとつのデータセットが削除されました。
@@ -520,10 +508,6 @@ src:
             '2057458630': プラグイン
           Public:
             '3135366329': 公開設定
-        ProjectList:
-          '118901803': 新しいプロジェクトの作成に成功しました！
-          '1043376506': プロジェクトの作成に失敗しました。
-          '3336263640': プロジェクト一覧
         Workspace:
           '905470392': メンバーの削除に失敗しました。
           '1979109196': ワークスペースの作成に失敗しました。
diff --git a/src/util/handleScroll.ts b/src/util/handleScroll.ts
new file mode 100644
index 000000000..00eb58c9e
--- /dev/null
+++ b/src/util/handleScroll.ts
@@ -0,0 +1,12 @@
+export function handleScroll(
+  { currentTarget }: React.UIEvent<HTMLDivElement, UIEvent>,
+  onLoadMore?: () => void,
+  threshold = 5,
+) {
+  if (
+    currentTarget.scrollTop + currentTarget.clientHeight >=
+    currentTarget.scrollHeight - threshold
+  ) {
+    onLoadMore?.();
+  }
+}