diff --git a/package.json b/package.json
index 0b63db54b..eb0164f4c 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "@subql/contract-sdk": "0.16.2",
     "@subql/network-clients": "^0.3.17",
     "@subql/network-config": "0.3.17-2",
-    "@subql/network-query": "0.3.16-15",
-    "@subql/react-hooks": "0.3.16-23",
+    "@subql/network-query": "0.3.16-18",
+    "@subql/react-hooks": "0.3.16-26",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -37,7 +37,7 @@
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",
     "ahooks": "^3.7.8",
-    "antd": "^5.8.4",
+    "antd": "^5.11.3",
     "axios": "^1.4.0",
     "bignumber.js": "^9.1.1",
     "buffer": "^6.0.3",
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c77a..6af4d3848 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "SubQuery Kepler Explorer",
+  "name": "SubQuery Kepler Explorer",
   "icons": [
     {
       "src": "favicon.ico",
diff --git a/src/components/Detail/Detail.tsx b/src/components/Detail/Detail.tsx
index f8f4d2af0..c3d4f1593 100644
--- a/src/components/Detail/Detail.tsx
+++ b/src/components/Detail/Detail.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
+import { Typography } from '@subql/components';
 
 import Copy from '../Copy';
 import styles from './Details.module.css';
@@ -26,7 +27,11 @@ const Detail: React.FC<Props> = ({ label, value, href, className, canCopy, child
     }
 
     if (value) {
-      return <p className={styles.value}>{value}</p>;
+      return (
+        <Typography className={styles.value} variant="medium">
+          {value}
+        </Typography>
+      );
     }
 
     return children;
@@ -34,7 +39,9 @@ const Detail: React.FC<Props> = ({ label, value, href, className, canCopy, child
 
   return (
     <div className={[styles.detail, className].join(' ')}>
-      <span className="label">{label}</span>
+      <Typography type="secondary" variant="medium">
+        {label}
+      </Typography>
       <div className={styles.valueCont}>
         {renderValue()}
         {canCopy && <Copy value={href ?? value} className={styles.copy} />}
diff --git a/src/components/Detail/Details.module.css b/src/components/Detail/Details.module.css
index 9cf340db7..23604f04d 100644
--- a/src/components/Detail/Details.module.css
+++ b/src/components/Detail/Details.module.css
@@ -9,7 +9,6 @@
 .value {
   text-decoration: none;
   color: var(--gray900);
-  font-size: 16px;
   line-height: 24px;
   letter-spacing: 0.3px;
   font-weight: normal;
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 5b700c546..603bbafa1 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { AiOutlineDown } from 'react-icons/ai';
+import { BsChevronDown } from 'react-icons/bs';
 import { Typography } from '@subql/components';
 import { Dropdown as AntdDropdown, Menu } from 'antd';
 import clsx from 'clsx';
@@ -48,7 +48,7 @@ export const Dropdown: React.FC<DropdownProps> = ({ menu, menuItem, dropdownCont
     <AntdDropdown overlay={menuList} className={clsx(styles.hosted, 'flex-center', styleProps)}>
       {typeof dropdownContent === 'string' || !dropdownContent ? (
         <div>
-          {dropdownContent || menu[0]?.label} <AiOutlineDown className={styles.downIcon} />
+          {dropdownContent || menu[0]?.label} <BsChevronDown className={styles.downIcon} />
         </div>
       ) : (
         dropdownContent
diff --git a/src/components/Markdown/index.module.less b/src/components/Markdown/index.module.less
index fd9c5f62b..2d74c86fc 100644
--- a/src/components/Markdown/index.module.less
+++ b/src/components/Markdown/index.module.less
@@ -1,4 +1,5 @@
 .markdown {
+  color: var(--sq-gray700);
   :global {
     p {
       margin: 1em 0;
diff --git a/src/components/ProjectHeader/ProjectHeader.module.css b/src/components/ProjectHeader/ProjectHeader.module.less
similarity index 82%
rename from src/components/ProjectHeader/ProjectHeader.module.css
rename to src/components/ProjectHeader/ProjectHeader.module.less
index ddf3af2e6..6abcbc7cf 100644
--- a/src/components/ProjectHeader/ProjectHeader.module.css
+++ b/src/components/ProjectHeader/ProjectHeader.module.less
@@ -25,6 +25,7 @@
 .lower {
   display: flex;
   flex-direction: row;
+  gap: 48px;
 }
 
 .image {
@@ -37,11 +38,11 @@
 .titleVersion {
   display: flex;
   align-items: center;
+  margin-bottom: 8px;
 }
 
 .name {
   align-self: flex-start;
-  padding-right: 16px;
 }
 
 .ownerIcon {
@@ -65,8 +66,10 @@
 }
 
 .dropdown {
-  padding: 6px;
-  border: 1px solid var(--gradient-to);
-  border-radius: 1rem;
-  color: var(--gradient-to);
+  margin-left: 16px;
+  padding: 10px 16px;
+  border: 1px solid var(--sq-gray300);
+  border-radius: 34px;
+  color: #000;
+  height: 38px;
 }
diff --git a/src/components/ProjectHeader/ProjectHeader.tsx b/src/components/ProjectHeader/ProjectHeader.tsx
index 61d943ede..e72a3e89c 100644
--- a/src/components/ProjectHeader/ProjectHeader.tsx
+++ b/src/components/ProjectHeader/ProjectHeader.tsx
@@ -4,16 +4,17 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import UnsafeWarn from '@components/UnsafeWarn';
+import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { Address, Typography } from '@subql/components';
+import dayjs from 'dayjs';
 
-import { ProjectWithMetadata } from '../../models';
 import Detail from '../Detail';
 import { Dropdown } from '../Dropdown';
 import IPFSImage from '../IPFSImage';
-import styles from './ProjectHeader.module.css';
+import styles from './ProjectHeader.module.less';
 
 type Props = {
-  project: Required<ProjectWithMetadata>;
+  project: ProjectDetailsQuery;
   versions?: Record<string, string>;
   currentVersion?: string;
   onChangeVersion?: (key: string) => void;
@@ -23,6 +24,9 @@ type Props = {
 const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isUnsafeDeployment, onChangeVersion }) => {
   const { t } = useTranslation();
 
+  const createdAtStr = React.useMemo(() => dayjs(project.createdTimestamp).fromNow(), [project]);
+  const updatedAtStr = React.useMemo(() => dayjs(project.updatedTimestamp).fromNow(), [project]);
+
   const VersionDropdown = () => {
     if (!versions) return <></>;
 
@@ -50,7 +54,7 @@ const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isU
       <div className={styles.inner}>
         <div className={styles.upper}>
           <div className={styles.titleVersion}>
-            <Typography variant="h4" className={styles.name}>
+            <Typography variant="h4" className={styles.name} weight={600}>
               {project.metadata.name}
             </Typography>
             {isUnsafeDeployment && <UnsafeWarn></UnsafeWarn>}
@@ -60,6 +64,8 @@ const ProjectHeader: React.FC<Props> = ({ project, versions, currentVersion, isU
         </div>
         <div className={styles.lower}>
           {currentVersion && <Detail label={t('projectHeader.deploymentId')} value={currentVersion} canCopy={true} />}
+          <Detail label={t('projectOverview.updatedAt')} value={updatedAtStr} className={styles.column} />
+          <Detail label={t('projectOverview.createdAt')} value={createdAtStr} className={styles.column} />
         </div>
       </div>
     </div>
diff --git a/src/components/ProjectOverview/ProjectOverview.module.less b/src/components/ProjectOverview/ProjectOverview.module.less
index f1b0ef9d4..6d111a246 100644
--- a/src/components/ProjectOverview/ProjectOverview.module.less
+++ b/src/components/ProjectOverview/ProjectOverview.module.less
@@ -38,6 +38,8 @@
 
 .linkContainer {
   padding-bottom: 16px;
+  display: flex;
+  align-items: center;
 }
 
 .link {
diff --git a/src/components/ProjectOverview/ProjectOverview.tsx b/src/components/ProjectOverview/ProjectOverview.tsx
index 906c1d6f8..dc50d524a 100644
--- a/src/components/ProjectOverview/ProjectOverview.tsx
+++ b/src/components/ProjectOverview/ProjectOverview.tsx
@@ -3,58 +3,118 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { BsGithub, BsGlobe } from 'react-icons/bs';
 import Markdown from '@components/Markdown';
-import moment from 'moment';
+import NewCard from '@components/NewCard';
+import { useRouteQuery } from '@hooks';
+import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
+import { BalanceLayout } from '@pages/dashboard';
+import { Typography } from '@subql/components';
+import { formatSQT, useGetOfferCountByDeploymentIdLazyQuery } from '@subql/react-hooks';
 
 import { ProjectMetadata } from '../../models';
-import Detail from '../Detail';
 import styles from './ProjectOverview.module.less';
 
 type Props = {
+  project: ProjectDetailsQuery;
   metadata: ProjectMetadata;
   deploymentDescription?: string;
-  createdAt: Date;
-  updatedAt: Date;
 };
 
 const ExternalLink: React.FC<{ link?: string; icon: 'globe' | 'github' }> = ({ link, icon }) => {
   return (
     <div className={styles.linkContainer}>
-      <i className={`bi-${icon}`} role="img" aria-label={icon} />
-      <a className={styles.link} href={link} target="_blank" rel="noreferrer">
-        {link || 'N/A'}
-      </a>
+      {icon === 'github' ? (
+        <BsGithub style={{ color: 'var(--sq-blue600)', marginRight: 8 }}></BsGithub>
+      ) : (
+        <BsGlobe style={{ color: 'var(--sq-blue600)', marginRight: 8 }}></BsGlobe>
+      )}
+      <Typography.Link href={link as string}>{link || 'N/A'}</Typography.Link>
     </div>
   );
 };
 
-const ProjectOverview: React.FC<Props> = ({ metadata, deploymentDescription, createdAt, updatedAt }) => {
+const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescription }) => {
   const { t } = useTranslation();
-  const createdAtStr = React.useMemo(() => moment(createdAt).utc(true).fromNow(), [createdAt]);
-  const updatedAtStr = React.useMemo(() => moment(updatedAt).utc(true).fromNow(), [updatedAt]);
+  const query = useRouteQuery();
+
+  const deploymentId = React.useMemo(() => {
+    return query.get('deploymentId') || project.currentDeployment;
+  }, [project, query]);
+
+  const [getOfferCounts, offerCounts] = useGetOfferCountByDeploymentIdLazyQuery({
+    variables: {
+      deploymentId,
+    },
+    defaultOptions: {
+      fetchPolicy: 'network-only',
+    },
+  });
+
+  React.useEffect(() => {
+    getOfferCounts({
+      variables: {
+        deploymentId,
+      },
+    });
+  }, [deploymentId]);
 
   return (
     <div className={styles.container}>
-      <div className={styles.column}>
-        <ExternalLink icon="globe" link={metadata.websiteUrl} />
-        <ExternalLink icon="github" link={metadata.codeUrl} />
-        <div className={styles.left}>
-          <Detail label={t('projectOverview.createdAt')} value={createdAtStr} className={styles.column} />
-          <Detail label={t('projectOverview.updatedAt')} value={updatedAtStr} className={styles.column} />
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ width: 720 }}>
+          <Markdown>{metadata.description || 'N/A'}</Markdown>
+        </div>
+        <div className={styles.column} style={{ marginTop: 16 }}>
+          <ExternalLink icon="globe" link={metadata.websiteUrl} />
+          <ExternalLink icon="github" link={metadata.codeUrl} />
+        </div>
+        <div style={{ height: 1, width: '100%', background: 'var(--sq-gray300)', marginBottom: 16 }}></div>
+        <div className={styles.column}>
+          <Typography variant="medium" weight={600}>
+            {t('projectOverview.deploymentDescription')}
+          </Typography>
+          <div style={{ width: 670, marginTop: 8 }}>
+            <Markdown>{deploymentDescription || 'N/A'}</Markdown>
+          </div>
         </div>
       </div>
 
-      <div className={styles.column}>
-        <Detail label={'Project Description'}>
-          <div style={{ width: 670 }}>
-            <Markdown>{metadata.description || 'N/A'}</Markdown>
-          </div>
-        </Detail>
-        <Detail label={t('projectOverview.deploymentDescription')}>
-          <div style={{ width: 670 }}>
-            <Markdown>{deploymentDescription || 'N/A'}</Markdown>
+      <div style={{ marginLeft: 48, width: '100%' }}>
+        <NewCard
+          style={{ width: '100%' }}
+          title="Total Rewards"
+          titleExtra={BalanceLayout({
+            mainBalance: formatSQT(project.totalReward),
+          })}
+        >
+          <div className="col-flex">
+            <div className="flex" style={{ justifyContent: 'space-between' }}>
+              <Typography variant="small" type="secondary">
+                Total Indexers
+              </Typography>
+              <Typography variant="small">
+                {project.deployments.nodes.find((i) => i?.id === deploymentId)?.indexers.totalCount || 0}
+              </Typography>
+            </div>
+
+            <div className="flex" style={{ justifyContent: 'space-between', margin: '12px 0' }}>
+              <Typography variant="small" type="secondary">
+                Total Agreements
+              </Typography>
+              <Typography variant="small">
+                {project.deployments.nodes.find((i) => i?.id === deploymentId)?.serviceAgreements.totalCount || 0}
+              </Typography>
+            </div>
+
+            <div className="flex" style={{ justifyContent: 'space-between' }}>
+              <Typography variant="small" type="secondary">
+                Total Offers
+              </Typography>
+              <Typography variant="small">{offerCounts.data?.offers?.totalCount || 0}</Typography>
+            </div>
           </div>
-        </Detail>
+        </NewCard>
       </div>
     </div>
   );
diff --git a/src/components/TabButton/TabButton.module.css b/src/components/TabButton/TabButton.module.css
deleted file mode 100644
index 4b16f4590..000000000
--- a/src/components/TabButton/TabButton.module.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.tabContainer {
-  display: flex;
-  margin: 0.5rem 0;
-}
-.whiteTabContainer {
-  background: white;
-}
-
-.tab {
-  font-size: 18px;
-  line-height: 28px;
-  margin-right: 32px;
-  padding-bottom: 1rem;
-  text-decoration: none;
-  color: var(--gray700);
-}
-
-.tab:hover {
-  text-decoration: none;
-}
-
-.tabSelected {
-  border-bottom: 2px solid;
-  border-color: var(--primary);
-}
-
-.tabContainer {
-  display: flex;
-}
-
-.whiteTab {
-  background: white;
-  min-width: 6rem;
-  margin: 0 0.6rem;
-  text-align: center;
-}
-
-.whiteTabLabel {
-  font-size: 18px;
-}
diff --git a/src/components/TabButton/TabButton.module.less b/src/components/TabButton/TabButton.module.less
new file mode 100644
index 000000000..dc3403538
--- /dev/null
+++ b/src/components/TabButton/TabButton.module.less
@@ -0,0 +1,65 @@
+.tabContainer {
+  display: flex;
+  margin: 0.5rem 0;
+  position: relative;
+  &::after {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background: var(--sq-gray300);
+    bottom: 0;
+  }
+}
+.whiteTabContainer {
+  background: white;
+}
+
+.tab {
+  font-size: 14px;
+  line-height: 22px;
+  margin-right: 24px;
+  padding-bottom: 8px;
+  text-decoration: none;
+  color: var(--sq-gray600);
+  font-family: var(--sq-font-family);
+  position: relative;
+}
+
+.tab:hover {
+  text-decoration: none;
+}
+
+.tabSelected {
+  :global {
+    .subql-typography {
+      color: var(--sq-blue600);
+    }
+  }
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background: var(--sq-blue600);
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+
+.tabContainer {
+  display: flex;
+}
+
+.whiteTab {
+  background: white;
+  min-width: 6rem;
+  margin: 0 0.6rem;
+  text-align: center;
+}
+
+.whiteTabLabel {
+  font-size: 18px;
+}
diff --git a/src/components/TabButton/TabButton.tsx b/src/components/TabButton/TabButton.tsx
index 9cebda82a..d631889f3 100644
--- a/src/components/TabButton/TabButton.tsx
+++ b/src/components/TabButton/TabButton.tsx
@@ -6,7 +6,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
 
 import { AppTypography } from '..';
-import styles from './TabButton.module.css';
+import styles from './TabButton.module.less';
 
 interface TabButtonProps {
   label: string;
diff --git a/src/components/Typography/Typography.module.css b/src/components/Typography/Typography.module.css
index 68bd3ed54..c6ff6ba60 100644
--- a/src/components/Typography/Typography.module.css
+++ b/src/components/Typography/Typography.module.css
@@ -1,5 +1,5 @@
 .text {
-  color: var(--gray900);
+  color: var(--sq-gray600);
   font-size: 14px;
 }
 
diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx
index 92ee163e2..8fa6afda1 100644
--- a/src/components/Typography/Typography.tsx
+++ b/src/components/Typography/Typography.tsx
@@ -3,7 +3,8 @@
 
 import * as React from 'react';
 import { AiOutlineQuestionCircle } from 'react-icons/ai';
-import { Tooltip, Typography as AntdTypography } from 'antd';
+import { Typography } from '@subql/components';
+import { Tooltip } from 'antd';
 import { TextProps } from 'antd/lib/typography/Text';
 import clsx from 'clsx';
 
@@ -38,9 +39,9 @@ export const AppTypography: React.FC<Props> = ({
 }) => {
   const rawContent = content === undefined ? children : content;
   const sortedContent = ['string', 'number'].includes(typeof rawContent) ? (
-    <AntdTypography.Text className={clsx(styles.text, className)} {...typographyProps}>
+    <Typography className={clsx(styles.text, className)} {...typographyProps} weight={500}>
       {rawContent}
-    </AntdTypography.Text>
+    </Typography>
   ) : (
     <>{rawContent}</>
   );
diff --git a/src/hooks/useProjectFromQuery.tsx b/src/hooks/useProjectFromQuery.tsx
index 96886e50b..7f2fd61f3 100644
--- a/src/hooks/useProjectFromQuery.tsx
+++ b/src/hooks/useProjectFromQuery.tsx
@@ -9,7 +9,7 @@ import { ProjectMetadata } from '../models';
 import { AsyncData } from '../utils';
 import { useAsyncMemo } from '.';
 
-type ProjectDetailsQuery = Omit<Project, 'metadata' | '__typename'> & {
+export type ProjectDetailsQuery = Omit<Project, 'metadata' | '__typename'> & {
   metadata: ProjectMetadata;
 };
 
diff --git a/src/i18n/en/explorer.ts b/src/i18n/en/explorer.ts
index b7c62efdd..41c137010 100644
--- a/src/i18n/en/explorer.ts
+++ b/src/i18n/en/explorer.ts
@@ -196,7 +196,7 @@ const translation = {
   projectOverview: {
     createdAt: 'Created',
     updatedAt: 'Last Updated',
-    deploymentDescription: 'Deployment Description',
+    deploymentDescription: 'Deployment Details',
   },
   projectDetail: {
     description: 'Description',
diff --git a/src/index.less b/src/index.less
index ec76fe616..e7cfe279f 100644
--- a/src/index.less
+++ b/src/index.less
@@ -50,7 +50,7 @@ html {
 
   --yellow700: #ffcc4d;
 
-  --icon-size: 178px;
+  --icon-size: 160px;
 
   /*New colors*/
   --primary-hover: #4388dd;
diff --git a/src/pages/dashboard/index.tsx b/src/pages/dashboard/index.tsx
index e9a097ebb..1578abb1e 100644
--- a/src/pages/dashboard/index.tsx
+++ b/src/pages/dashboard/index.tsx
@@ -26,8 +26,8 @@ export const BalanceLayout = ({
   secondaryTooltip = 'Estimated for next Era',
   token = TOKEN,
 }: {
-  mainBalance: number;
-  secondaryBalance?: number;
+  mainBalance: number | string;
+  secondaryBalance?: number | string;
   secondaryTooltip?: React.ReactNode;
   token?: string;
 }) => {
diff --git a/src/pages/explorer/Project/Project.module.css b/src/pages/explorer/Project/Project.module.less
similarity index 55%
rename from src/pages/explorer/Project/Project.module.css
rename to src/pages/explorer/Project/Project.module.less
index e22408725..5824e67d9 100644
--- a/src/pages/explorer/Project/Project.module.css
+++ b/src/pages/explorer/Project/Project.module.less
@@ -8,10 +8,9 @@
 }
 
 .upper {
-  background: var(--sq-background-gradient);
-  padding: 2rem 2rem 0 2rem;
+  padding: 24px 78px;
 }
 
 .projectHeader {
-  margin: 2rem 0;
+  margin: 24px 0;
 }
diff --git a/src/pages/explorer/Project/Project.tsx b/src/pages/explorer/Project/Project.tsx
index bf5b17a60..bc23db62a 100644
--- a/src/pages/explorer/Project/Project.tsx
+++ b/src/pages/explorer/Project/Project.tsx
@@ -6,9 +6,10 @@ import { useTranslation } from 'react-i18next';
 import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router';
 import { ServiceAgreementsTable } from '@pages/consumer/ServiceAgreements/ServiceAgreementsTable';
 import { captureMessage } from '@sentry/react';
+import { Typography } from '@subql/components';
 import { useGetProjectDeploymentsQuery, useGetProjectOngoingServiceAgreementsQuery } from '@subql/react-hooks';
 import { parseError } from '@utils';
-import clsx from 'clsx';
+import { Breadcrumb } from 'antd';
 
 import { ProjectHeader, ProjectOverview, Spinner, TabButtons } from '../../../components';
 import IndexerDetails from '../../../components/IndexerDetails';
@@ -17,7 +18,7 @@ import { useDeploymentMetadata, useProjectFromQuery, useRouteQuery } from '../..
 import { renderAsync } from '../../../utils';
 import { ROUTES } from '../../../utils';
 import { FlexPlans } from '../FlexPlans';
-import styles from './Project.module.css';
+import styles from './Project.module.less';
 
 const { OVERVIEW, INDEXERS, SERVICE_AGREEMENTS, FLEX_PLANS } = ROUTES;
 
@@ -106,6 +107,25 @@ const ProjectInner: React.FC = () => {
       return (
         <div className={styles.container}>
           <div className={styles.upper}>
+            <Breadcrumb
+              items={[
+                {
+                  key: 'explorer',
+                  title: (
+                    <Typography variant="medium" type="secondary" style={{ cursor: 'pointer' }}>
+                      Explorer
+                    </Typography>
+                  ),
+                  onClick: () => {
+                    navigate('/explorer/home');
+                  },
+                },
+                {
+                  key: 'current',
+                  title: project.metadata.name,
+                },
+              ]}
+            ></Breadcrumb>
             <div className={styles.projectHeader}>
               <ProjectHeader
                 project={project}
@@ -117,17 +137,16 @@ const ProjectInner: React.FC = () => {
             </div>
             <TabButtons tabs={sortedTabList} />
           </div>
-          <div className={clsx('content-width')}>
+          <div style={{ padding: '0 78px 24px 78px' }}>
             {/* TODO: just render the components rather than routes. */}
             <Routes>
               <Route
                 path={OVERVIEW}
                 element={
                   <ProjectOverview
+                    project={project}
                     metadata={project.metadata}
                     deploymentDescription={asyncDeploymentMetadata?.data?.description}
-                    createdAt={project.createdTimestamp}
-                    updatedAt={project.updatedTimestamp}
                   />
                 }
               />
diff --git a/src/pages/studio/Project/Project.tsx b/src/pages/studio/Project/Project.tsx
index fcee257c9..7f32d6914 100644
--- a/src/pages/studio/Project/Project.tsx
+++ b/src/pages/studio/Project/Project.tsx
@@ -73,6 +73,9 @@ const Project: React.FC = () => {
           </Modal>
           <div className={styles.upper}>
             <div className="content-width">
+              {/* ignore it for now. studio would refactor later. */}
+              {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+              {/* @ts-ignore */}
               <ProjectHeader project={project} />
               <div className={styles.tabContainer}>
                 <Typography.Text onClick={() => setTab(DETAILS)} className={`${styles.tab} `} type={tabStyle(DETAILS)}>
diff --git a/yarn.lock b/yarn.lock
index c3d9b6c8d..8fc62ebd9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -40,6 +40,19 @@
     rc-util "^5.35.0"
     stylis "^4.0.13"
 
+"@ant-design/cssinjs@^1.17.5":
+  version "1.17.5"
+  resolved "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.17.5.tgz#be5bbfbf4c857e7df6e3650c9bccf7e527da7ef2"
+  integrity sha512-Ed2rruHMxZTVYGPec6QBZkrh00Df5K1FAufmBpONai5iGYxoxIkg1sRD8YdCw0NvPRAa4r1nJP5LbwICGHzGiQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/unitless" "^0.7.5"
+    classnames "^2.3.1"
+    csstype "^3.0.10"
+    rc-util "^5.35.0"
+    stylis "^4.0.13"
+
 "@ant-design/icons-svg@^4.3.0":
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/@ant-design/icons-svg/-/icons-svg-4.3.1.tgz#4b2f65a17d4d32b526baa6414aca2117382bf8da"
@@ -57,6 +70,17 @@
     lodash.camelcase "^4.3.0"
     rc-util "^5.31.1"
 
+"@ant-design/icons@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.npmjs.org/@ant-design/icons/-/icons-5.2.6.tgz#2d4a9a37f531eb2a20cebec01d6fb69cf593900d"
+  integrity sha512-4wn0WShF43TrggskBJPRqCD0fcHbzTYjnaoskdiJrVHg86yxoZ8ZUqsXvyn4WUqehRiFKnaclOhqk9w4Ui2KVw==
+  dependencies:
+    "@ant-design/colors" "^7.0.0"
+    "@ant-design/icons-svg" "^4.3.0"
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-util "^5.31.1"
+
 "@ant-design/react-slick@~1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@ant-design/react-slick/-/react-slick-1.0.0.tgz#4696eecaa2dea0429e47ae24c267015cfd6df35c"
@@ -68,6 +92,17 @@
     resize-observer-polyfill "^1.5.1"
     throttle-debounce "^5.0.0"
 
+"@ant-design/react-slick@~1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.2.tgz#241bb412aeacf7ff5d50c61fa5db66773fde6b56"
+  integrity sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==
+  dependencies:
+    "@babel/runtime" "^7.10.4"
+    classnames "^2.2.5"
+    json2mq "^0.2.0"
+    resize-observer-polyfill "^1.5.1"
+    throttle-debounce "^5.0.0"
+
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.6"
   resolved "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz#957d4c28e886a64a8141f7522783be65733ff097"
@@ -2289,6 +2324,11 @@
   resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.0.tgz#53fa5fe9c34faee89469e48f91d51a3766108bc8"
   integrity sha512-/Z3l6pXthq0JvMYdUFyX9j0MaCltlIn6mfh9jLyQwg5aPKxkyNa0PTHtU1AlFXLNk55ZuAeJRcpvq+tmLfKmaQ==
 
+"@ctrl/tinycolor@^3.6.1":
+  version "3.6.1"
+  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
+  integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
@@ -3995,7 +4035,7 @@
     react-remove-scroll "2.5.4"
     ua-parser-js "^1.0.35"
 
-"@rc-component/color-picker@~1.4.0":
+"@rc-component/color-picker@~1.4.0", "@rc-component/color-picker@~1.4.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@rc-component/color-picker/-/color-picker-1.4.1.tgz#dcab0b660e9c4ed63a7582db68ed4a77c862cb93"
   integrity sha512-vh5EWqnsayZa/JwUznqDaPJz39jznx/YDbyBuVJntv735tKXKwEUZZb2jYEldOg+NKWZwtALjGMrNeGBmqFoEw==
@@ -4013,6 +4053,14 @@
     "@babel/runtime" "^7.10.1"
     rc-util "^5.27.0"
 
+"@rc-component/context@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz#dc6fb021d6773546af8f016ae4ce9aea088395e8"
+  integrity sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    rc-util "^5.27.0"
+
 "@rc-component/mini-decimal@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@rc-component/mini-decimal/-/mini-decimal-1.0.1.tgz#e5dbc20a6a5b0e234d279bc71ce730ab865d3910"
@@ -4029,6 +4077,15 @@
     classnames "^2.3.2"
     rc-util "^5.24.4"
 
+"@rc-component/mutate-observer@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz#ee53cc88b78aade3cd0653609215a44779386fd8"
+  integrity sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    classnames "^2.3.2"
+    rc-util "^5.24.4"
+
 "@rc-component/portal@^1.0.0-8", "@rc-component/portal@^1.0.0-9", "@rc-component/portal@^1.0.2", "@rc-component/portal@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.0.tgz#6b94450d2c2b00d50b141bd7a0be23bd96503dbe"
@@ -4047,6 +4104,17 @@
     classnames "^2.3.2"
     rc-util "^5.24.4"
 
+"@rc-component/tour@~1.10.0":
+  version "1.10.0"
+  resolved "https://registry.npmjs.org/@rc-component/tour/-/tour-1.10.0.tgz#b05bc327438f1c583439e2d2dcc10ec0530aea19"
+  integrity sha512-voV0BKaTJbewB9LLgAHQ7tAGG7rgDkKQkZo82xw2gIk542hY+o7zwoqdN16oHhIKk7eG/xi+mdXrONT62Dt57A==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    "@rc-component/portal" "^1.0.0-9"
+    "@rc-component/trigger" "^1.3.6"
+    classnames "^2.3.2"
+    rc-util "^5.24.4"
+
 "@rc-component/tour@~1.8.1":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@rc-component/tour/-/tour-1.8.1.tgz#a820714b66cb17f317ebd21ac1b45733d2b99183"
@@ -4084,6 +4152,18 @@
     rc-resize-observer "^1.3.1"
     rc-util "^5.33.0"
 
+"@rc-component/trigger@^1.17.0", "@rc-component/trigger@^1.18.0", "@rc-component/trigger@^1.18.2":
+  version "1.18.2"
+  resolved "https://registry.npmjs.org/@rc-component/trigger/-/trigger-1.18.2.tgz#dc52c4c66fa8aaccaf0710498f2429fc05454e3b"
+  integrity sha512-jRLYgFgjLEPq3MvS87fIhcfuywFSRDaDrYw1FLku7Cm4esszvzTbA0JBsyacAyLrK9rF3TiHFcvoEDMzoD3CTA==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@rc-component/portal" "^1.1.0"
+    classnames "^2.3.2"
+    rc-motion "^2.0.0"
+    rc-resize-observer "^1.3.1"
+    rc-util "^5.38.0"
+
 "@remix-run/router@1.3.3":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.3.3.tgz#d6d531d69c0fa3a44fda7dc00b20d49b44549164"
@@ -4524,22 +4604,22 @@
   dependencies:
     graphql "^16.5.0"
 
-"@subql/network-query@0.3.16-15":
-  version "0.3.16-15"
-  resolved "https://registry.npmjs.org/@subql/network-query/-/network-query-0.3.16-15.tgz#289b214d5d2274ac694b2a4b63a7958bac412c4a"
-  integrity sha512-PgsHrrunjVsQ9FOb3KRDtePBnjb6GBlLbfdvCrl7YNUzaiB/ErXUNhiWa7zzAQIGvl4rLPZ3fxLmJykELp4PSQ==
+"@subql/network-query@0.3.16-18":
+  version "0.3.16-18"
+  resolved "https://registry.npmjs.org/@subql/network-query/-/network-query-0.3.16-18.tgz#44e15d6c0c3e46242a160516179c06d45e828406"
+  integrity sha512-tvXgQUzvKOvG4GhDYW3MCLHSAoJkqwwWpMAhJI0n8uArBGfxqmu834bPOjT8W9RLGYEl0Sd7q4rLF5TJaA49uQ==
   dependencies:
     graphql "^16.5.0"
 
-"@subql/react-hooks@0.3.16-23":
-  version "0.3.16-23"
-  resolved "https://registry.npmjs.org/@subql/react-hooks/-/react-hooks-0.3.16-23.tgz#ab7e2bd9b539f65b4ba8ef8605a3e9989401bb07"
-  integrity sha512-kdG1qWBBxEItKd/NUnzl2IeCFs9FPDrtNg9ybmU77Q9h5kK5k+cW4NVcrIi6/tTRkWxJMjpWXzlzJmLcGwh9Sw==
+"@subql/react-hooks@0.3.16-26":
+  version "0.3.16-26"
+  resolved "https://registry.npmjs.org/@subql/react-hooks/-/react-hooks-0.3.16-26.tgz#1b0c5a34de4d72f6b5cc9ae43eb5a027e81d7a5e"
+  integrity sha512-jMGTJXjHnniXh2Xr/ZvjyurpsTeqGYWeR4u52RYCwWNA19UtNWmOLzCxxV9oM24Z50bqh4VVjJm1EsY45Q3ykQ==
   dependencies:
     "@graphql-tools/code-file-loader" "^7.3.6"
     "@graphql-tools/graphql-tag-pluck" "^7.3.6"
     "@graphql-tools/load" "^7.7.7"
-    "@subql/network-query" "0.3.16-15"
+    "@subql/network-query" "0.3.16-18"
     ahooks "^3.7.8"
     bignumber.js "^9.1.2"
     class-transformer "^0.5.1"
@@ -5906,6 +5986,60 @@ ansicolors@~0.3.2:
   resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.3.2.tgz#665597de86a9ffe3aa9bfbe6cae5c6ea426b4979"
   integrity sha512-QXu7BPrP29VllRxH8GwB7x5iX5qWKAAMLqKQGWTeLWVlNHNOpVMJ91dsxQAIWXpjuW5wqvxu3Jd/nRjrJ+0pqg==
 
+antd@^5.11.3:
+  version "5.11.3"
+  resolved "https://registry.npmjs.org/antd/-/antd-5.11.3.tgz#fe00b4609ab4a491e39407901e451ac5ebc391c5"
+  integrity sha512-+aXlytJCsp8Thag+MAMCDsDciwTl7w3bexHiojGgFOaSJPuIktN5yrLb9GCLar3fkTyGVAaxnkJm4JLGbAz3Xg==
+  dependencies:
+    "@ant-design/colors" "^7.0.0"
+    "@ant-design/cssinjs" "^1.17.5"
+    "@ant-design/icons" "^5.2.6"
+    "@ant-design/react-slick" "~1.0.2"
+    "@babel/runtime" "^7.18.3"
+    "@ctrl/tinycolor" "^3.6.1"
+    "@rc-component/color-picker" "~1.4.1"
+    "@rc-component/mutate-observer" "^1.1.0"
+    "@rc-component/tour" "~1.10.0"
+    "@rc-component/trigger" "^1.18.2"
+    classnames "^2.3.2"
+    copy-to-clipboard "^3.3.3"
+    dayjs "^1.11.1"
+    qrcode.react "^3.1.0"
+    rc-cascader "~3.20.0"
+    rc-checkbox "~3.1.0"
+    rc-collapse "~3.7.1"
+    rc-dialog "~9.3.4"
+    rc-drawer "~6.5.2"
+    rc-dropdown "~4.1.0"
+    rc-field-form "~1.40.0"
+    rc-image "~7.5.0"
+    rc-input "~1.3.6"
+    rc-input-number "~8.4.0"
+    rc-mentions "~2.9.1"
+    rc-menu "~9.12.2"
+    rc-motion "^2.9.0"
+    rc-notification "~5.3.0"
+    rc-pagination "~3.7.0"
+    rc-picker "~3.14.6"
+    rc-progress "~3.5.1"
+    rc-rate "~2.12.0"
+    rc-resize-observer "^1.4.0"
+    rc-segmented "~2.2.2"
+    rc-select "~14.10.0"
+    rc-slider "~10.4.0"
+    rc-steps "~6.0.1"
+    rc-switch "~4.1.0"
+    rc-table "~7.36.0"
+    rc-tabs "~12.13.1"
+    rc-textarea "~1.5.3"
+    rc-tooltip "~6.1.2"
+    rc-tree "~5.8.2"
+    rc-tree-select "~5.15.0"
+    rc-upload "~4.3.5"
+    rc-util "^5.38.1"
+    scroll-into-view-if-needed "^3.1.0"
+    throttle-debounce "^5.0.0"
+
 antd@^5.8.4:
   version "5.8.4"
   resolved "https://registry.yarnpkg.com/antd/-/antd-5.8.4.tgz#9225524e8325ebd4bf7a70512fce04a5088c28d4"
@@ -7274,6 +7408,11 @@ compute-scroll-into-view@^3.0.0:
   resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.0.0.tgz#95d2f2f4653e7edda74dd1e38edaaa897918e0f0"
   integrity sha512-Yk1An4qzo5++Cu6peT9PsmRKIU8tALpmdoE09n//AfGQFcPfx21/tMGMsmKYmLJWaBJrGOJ5Jz5hoU+7cZZUWQ==
 
+compute-scroll-into-view@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
+  integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -12533,6 +12672,18 @@ rc-cascader@~3.14.0:
     rc-tree "~5.7.0"
     rc-util "^5.35.0"
 
+rc-cascader@~3.20.0:
+  version "3.20.0"
+  resolved "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.20.0.tgz#b270f9d84ed83417ee7309ef5e56e415f1586076"
+  integrity sha512-lkT9EEwOcYdjZ/jvhLoXGzprK1sijT3/Tp4BLxQQcHDZkkOzzwYQC9HgmKoJz0K7CukMfgvO9KqHeBdgE+pELw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    array-tree-filter "^2.1.0"
+    classnames "^2.3.1"
+    rc-select "~14.10.0"
+    rc-tree "~5.8.1"
+    rc-util "^5.37.0"
+
 rc-checkbox@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/rc-checkbox/-/rc-checkbox-3.1.0.tgz#6be0d9d8de2cc96fb5e37f9036a1c3e360d0a42d"
@@ -12542,7 +12693,7 @@ rc-checkbox@~3.1.0:
     classnames "^2.3.2"
     rc-util "^5.25.2"
 
-rc-collapse@~3.7.0:
+rc-collapse@~3.7.0, rc-collapse@~3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/rc-collapse/-/rc-collapse-3.7.1.tgz#bda1f7f80adccf3433c1c15d4d9f9ca09910c727"
   integrity sha512-N/7ejyiTf3XElNJBBpxqnZBUuMsQWEOPjB2QkfNvZ/Ca54eAvJXuOD1EGbCWCk2m7v/MSxku7mRpdeaLOCd4Gg==
@@ -12563,6 +12714,17 @@ rc-dialog@~9.1.0:
     rc-motion "^2.3.0"
     rc-util "^5.21.0"
 
+rc-dialog@~9.3.4:
+  version "9.3.4"
+  resolved "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.3.4.tgz#e0decb3d4a0dbe36524a67ed2f8fe2daa4b7b73c"
+  integrity sha512-975X3018GhR+EjZFbxA2Z57SX5rnu0G0/OxFgMMvZK4/hQWEm3MHaNvP4wXpxYDoJsp+xUvVW+GB9CMMCm81jA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/portal" "^1.0.0-8"
+    classnames "^2.2.6"
+    rc-motion "^2.3.0"
+    rc-util "^5.21.0"
+
 rc-drawer@~6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/rc-drawer/-/rc-drawer-6.2.0.tgz#fddf4825b0fa9d60e317b996f70278d594d1f668"
@@ -12574,6 +12736,17 @@ rc-drawer@~6.2.0:
     rc-motion "^2.6.1"
     rc-util "^5.21.2"
 
+rc-drawer@~6.5.2:
+  version "6.5.2"
+  resolved "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.5.2.tgz#49c1f279261992f6d4653d32a03b14acd436d610"
+  integrity sha512-QckxAnQNdhh4vtmKN0ZwDf3iakO83W9eZcSKWYYTDv4qcD2fHhRAZJJ/OE6v2ZlQ2kSqCJX5gYssF4HJFvsEPQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/portal" "^1.1.1"
+    classnames "^2.2.6"
+    rc-motion "^2.6.1"
+    rc-util "^5.36.0"
+
 rc-dropdown@~4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rc-dropdown/-/rc-dropdown-4.1.0.tgz#418a68939631520de80d0865d02b440eeeb4168e"
@@ -12593,6 +12766,15 @@ rc-field-form@~1.36.0:
     async-validator "^4.1.0"
     rc-util "^5.32.2"
 
+rc-field-form@~1.40.0:
+  version "1.40.0"
+  resolved "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.40.0.tgz#808dce06ebae1c3aea574e672b673533fc98f11f"
+  integrity sha512-OM3N01X2BYFGJDJcwpk9/BBtlwgveE7eh2SQAKIxVCt9KVWlODYJ9ypTHQdxchfDbeJKJKxMBFXlLAmyvlgPHg==
+  dependencies:
+    "@babel/runtime" "^7.18.0"
+    async-validator "^4.1.0"
+    rc-util "^5.32.2"
+
 rc-image@~7.1.0:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/rc-image/-/rc-image-7.1.3.tgz#0072547c7c0a70e6badfb4bee320806c5bf7427b"
@@ -12605,6 +12787,18 @@ rc-image@~7.1.0:
     rc-motion "^2.6.2"
     rc-util "^5.34.1"
 
+rc-image@~7.5.0:
+  version "7.5.0"
+  resolved "https://registry.npmjs.org/rc-image/-/rc-image-7.5.0.tgz#ace5000dbf0f5e5ef65549f094466a7570ae3281"
+  integrity sha512-GVR/GX8MF/tC2nZ913heGCa/99FU4UkMjXXOj55gY8vF6yjPoZ21MusH2ZG2Y/mNMM1Cnkujp1kRdAzR7/KYTg==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@rc-component/portal" "^1.0.2"
+    classnames "^2.2.6"
+    rc-dialog "~9.3.4"
+    rc-motion "^2.6.2"
+    rc-util "^5.34.1"
+
 rc-input-number@~8.0.2:
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/rc-input-number/-/rc-input-number-8.0.4.tgz#d33cfe4126e10f4771fe11a40797222c76d6598f"
@@ -12616,6 +12810,17 @@ rc-input-number@~8.0.2:
     rc-input "~1.1.0"
     rc-util "^5.28.0"
 
+rc-input-number@~8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/rc-input-number/-/rc-input-number-8.4.0.tgz#f0d0caa2ce3a4e37f062556f9cb4c08c8c23322d"
+  integrity sha512-B6rziPOLRmeP7kcS5qbdC5hXvvDHYKV4vUxmahevYx2E6crS2bRi0xLDjhJ0E1HtOWo8rTmaE2EBJAkTCZOLdA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/mini-decimal" "^1.0.1"
+    classnames "^2.2.5"
+    rc-input "~1.3.5"
+    rc-util "^5.28.0"
+
 rc-input@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/rc-input/-/rc-input-1.1.1.tgz#af33b49272220f6d42852d21b22e84c2dc1a87e6"
@@ -12625,6 +12830,15 @@ rc-input@~1.1.0:
     classnames "^2.2.1"
     rc-util "^5.18.1"
 
+rc-input@~1.3.5, rc-input@~1.3.6:
+  version "1.3.6"
+  resolved "https://registry.npmjs.org/rc-input/-/rc-input-1.3.6.tgz#038b74779b6c8b688ff60a41c3976d1db7a1d7d6"
+  integrity sha512-/HjTaKi8/Ts4zNbYaB5oWCquxFyFQO4Co1MnMgoCeGJlpe7k8Eir2HN0a0F9IHDmmo+GYiGgPpz7w/d/krzsJA==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.18.1"
+
 rc-mentions@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/rc-mentions/-/rc-mentions-2.5.0.tgz#8b936e497e0deb922f40df46e42efc3f596ec207"
@@ -12638,6 +12852,19 @@ rc-mentions@~2.5.0:
     rc-textarea "~1.3.0"
     rc-util "^5.22.5"
 
+rc-mentions@~2.9.1:
+  version "2.9.1"
+  resolved "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.9.1.tgz#cfe55913fd5bc156ef9814f38c1a2ceefee032ce"
+  integrity sha512-cZuElWr/5Ws0PXx1uxobxfYh4mqUw2FitfabR62YnWgm+WAfDyXZXqZg5DxXW+M1cgVvntrQgDDd9LrihrXzew==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    "@rc-component/trigger" "^1.5.0"
+    classnames "^2.2.6"
+    rc-input "~1.3.5"
+    rc-menu "~9.12.0"
+    rc-textarea "~1.5.0"
+    rc-util "^5.34.1"
+
 rc-menu@~9.10.0:
   version "9.10.0"
   resolved "https://registry.yarnpkg.com/rc-menu/-/rc-menu-9.10.0.tgz#5e0982e26786d67c8ebdba50406b197884c749a7"
@@ -12650,6 +12877,18 @@ rc-menu@~9.10.0:
     rc-overflow "^1.3.1"
     rc-util "^5.27.0"
 
+rc-menu@~9.12.0, rc-menu@~9.12.2:
+  version "9.12.2"
+  resolved "https://registry.npmjs.org/rc-menu/-/rc-menu-9.12.2.tgz#1bab34646421224eff5c5b7de993f8ea1238418e"
+  integrity sha512-NzloFH2pRUYmQ3S/YbJAvRkgCZaLvq0sRa5rgJtuIHLfPPprNHNyepeSlT64+dbVqI4qRWL44VN0lUCldCbbfg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/trigger" "^1.17.0"
+    classnames "2.x"
+    rc-motion "^2.4.3"
+    rc-overflow "^1.3.1"
+    rc-util "^5.27.0"
+
 rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motion@^2.4.3, rc-motion@^2.4.4, rc-motion@^2.6.0, rc-motion@^2.6.1, rc-motion@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.6.3.tgz#e6d8ca06591c2c1bcd3391a8e7a822ebc4d94e9c"
@@ -12668,6 +12907,15 @@ rc-motion@^2.7.3:
     classnames "^2.2.1"
     rc-util "^5.21.0"
 
+rc-motion@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.0.tgz#9e18a1b8d61e528a97369cf9a7601e9b29205710"
+  integrity sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.21.0"
+
 rc-notification@~5.0.4:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/rc-notification/-/rc-notification-5.0.5.tgz#33a86864b7491749742cfaef0df0117a9b967926"
@@ -12678,6 +12926,16 @@ rc-notification@~5.0.4:
     rc-motion "^2.6.0"
     rc-util "^5.20.1"
 
+rc-notification@~5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/rc-notification/-/rc-notification-5.3.0.tgz#e31c86fe2350598ade8cff383babd1befa7a94fe"
+  integrity sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.9.0"
+    rc-util "^5.20.1"
+
 rc-overflow@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/rc-overflow/-/rc-overflow-1.3.1.tgz#03224cf90c66aa570eb0deeb4eff6cc96401e979"
@@ -12697,6 +12955,15 @@ rc-pagination@~3.6.0:
     classnames "^2.2.1"
     rc-util "^5.32.2"
 
+rc-pagination@~3.7.0:
+  version "3.7.0"
+  resolved "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.7.0.tgz#4c4332800688ec0fd3b2435c4772f7f8d4d7b50e"
+  integrity sha512-IxSzKapd13L91/195o1TPkKnCNw8gIR25UP1GCW/7c7n/slhld4npu2j2PB9IWjXm4SssaAaSAt2lscYog7wzg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-util "^5.32.2"
+
 rc-picker@~3.13.0:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/rc-picker/-/rc-picker-3.13.1.tgz#06adc7b1ccbcfa05ff1ac9aae0c696fb5546f20d"
@@ -12707,6 +12974,16 @@ rc-picker@~3.13.0:
     classnames "^2.2.1"
     rc-util "^5.30.0"
 
+rc-picker@~3.14.6:
+  version "3.14.6"
+  resolved "https://registry.npmjs.org/rc-picker/-/rc-picker-3.14.6.tgz#60fc34f9883272e10f6c593fa6d82e7e7a70781b"
+  integrity sha512-AdKKW0AqMwZsKvIpwUWDUnpuGKZVrbxVTZTNjcO+pViGkjC1EBcjMgxVe8tomOEaIHJL5Gd13vS8Rr3zzxWmag==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/trigger" "^1.5.0"
+    classnames "^2.2.1"
+    rc-util "^5.30.0"
+
 rc-progress@~3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/rc-progress/-/rc-progress-3.4.1.tgz#a9ffe099e88a4fc03afb09d8603162bf0760d743"
@@ -12716,6 +12993,15 @@ rc-progress@~3.4.1:
     classnames "^2.2.6"
     rc-util "^5.16.1"
 
+rc-progress@~3.5.1:
+  version "3.5.1"
+  resolved "https://registry.npmjs.org/rc-progress/-/rc-progress-3.5.1.tgz#a3cdfd2fe04eb5c3d43fa1c69e7dd70c73b102ae"
+  integrity sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.6"
+    rc-util "^5.16.1"
+
 rc-rate@~2.12.0:
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/rc-rate/-/rc-rate-2.12.0.tgz#0182deffed3b009cdcc61660da8746c39ed91ed5"
@@ -12735,7 +13021,17 @@ rc-resize-observer@^1.0.0, rc-resize-observer@^1.1.0, rc-resize-observer@^1.2.0,
     rc-util "^5.27.0"
     resize-observer-polyfill "^1.5.1"
 
-rc-segmented@~2.2.0:
+rc-resize-observer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz#7bba61e6b3c604834980647cce6451914750d0cc"
+  integrity sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    classnames "^2.2.1"
+    rc-util "^5.38.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-segmented@~2.2.0, rc-segmented@~2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/rc-segmented/-/rc-segmented-2.2.2.tgz#a34f12ce6c0975fc3042ae7656bcd18e1744798e"
   integrity sha512-Mq52M96QdHMsNdE/042ibT5vkcGcD5jxKp7HgPC2SRofpia99P5fkfHy1pEaajLMF/kj0+2Lkq1UZRvqzo9mSA==
@@ -12745,6 +13041,19 @@ rc-segmented@~2.2.0:
     rc-motion "^2.4.4"
     rc-util "^5.17.0"
 
+rc-select@~14.10.0:
+  version "14.10.0"
+  resolved "https://registry.npmjs.org/rc-select/-/rc-select-14.10.0.tgz#5f60e61ed7c9a83c8591616b1174a1c4ab2de0cd"
+  integrity sha512-TsIJTYafTTapCA32LLNpx/AD6ntepR1TG8jEVx35NiAAWCPymhUfuca8kRcUNd3WIGVMDcMKn9kkphoxEz+6Ag==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/trigger" "^1.5.0"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-overflow "^1.3.1"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.5.2"
+
 rc-select@~14.7.0, rc-select@~14.7.1:
   version "14.7.4"
   resolved "https://registry.yarnpkg.com/rc-select/-/rc-select-14.7.4.tgz#742d85861e83604237784f60e2ba9dabcde8eac9"
@@ -12767,6 +13076,15 @@ rc-slider@~10.1.0:
     classnames "^2.2.5"
     rc-util "^5.27.0"
 
+rc-slider@~10.4.0:
+  version "10.4.0"
+  resolved "https://registry.npmjs.org/rc-slider/-/rc-slider-10.4.0.tgz#efc016583fdea5f5dfb4f3dc61b6755a19e5f453"
+  integrity sha512-ZlpWjFhOlEf0w4Ng31avFBkXNNBj60NAcTPaIoiCxBkJ29wOtHSPMqv9PZeEoqmx64bpJkgK7kPa47HG4LPzww==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.27.0"
+
 rc-steps@~6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/rc-steps/-/rc-steps-6.0.1.tgz#c2136cd0087733f6d509209a84a5c80dc29a274d"
@@ -12796,6 +13114,31 @@ rc-table@~7.32.1:
     rc-resize-observer "^1.1.0"
     rc-util "^5.27.1"
 
+rc-table@~7.36.0:
+  version "7.36.0"
+  resolved "https://registry.npmjs.org/rc-table/-/rc-table-7.36.0.tgz#95e50805392b6a723105c3eb77eefb1e14ba1ced"
+  integrity sha512-3xVcdCC5OLeOOhaCg+5Lps2oPreM/GWXmUXWTSX4p6vF7F76ABM4dfPpMJ9Dnf5yGRyh+8pe7FRyhRVnWw2H/w==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    "@rc-component/context" "^1.4.0"
+    classnames "^2.2.5"
+    rc-resize-observer "^1.1.0"
+    rc-util "^5.37.0"
+    rc-virtual-list "^3.11.1"
+
+rc-tabs@~12.13.1:
+  version "12.13.1"
+  resolved "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.13.1.tgz#e28c5652dfed4e72eb27a75a2691754afd3e5f68"
+  integrity sha512-83u3l2QkO0UznCzdBLEk9WnNcT+imtmDmMT993sUUEOGnNQAmqOdev0XjeqrcvsAMe9CDpAWDFd7L/RZw+LVJQ==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "2.x"
+    rc-dropdown "~4.1.0"
+    rc-menu "~9.12.0"
+    rc-motion "^2.6.2"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.34.1"
+
 rc-tabs@~12.9.0:
   version "12.9.0"
   resolved "https://registry.yarnpkg.com/rc-tabs/-/rc-tabs-12.9.0.tgz#6d9af43d8ad2c47be00c75bee92417a4842d29d2"
@@ -12820,6 +13163,17 @@ rc-textarea@~1.3.0, rc-textarea@~1.3.3:
     rc-resize-observer "^1.0.0"
     rc-util "^5.27.0"
 
+rc-textarea@~1.5.0, rc-textarea@~1.5.3:
+  version "1.5.3"
+  resolved "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.5.3.tgz#513e837d308584996c05f540f4f58645a3a8c89a"
+  integrity sha512-oH682ghHx++stFNYrosPRBfwsypywrTXpaD0/5Z8MPkUOnyOQUaY9ueL9tMu6BP1LfsuYQ1VLpg5OtshViLNgA==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.1"
+    rc-input "~1.3.5"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.27.0"
+
 rc-tooltip@~6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-6.0.1.tgz#6a5e33bd6c3f6afe8851ea90e7af43e5c26b3cc6"
@@ -12829,6 +13183,15 @@ rc-tooltip@~6.0.0:
     "@rc-component/trigger" "^1.0.4"
     classnames "^2.3.1"
 
+rc-tooltip@~6.1.2:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.1.2.tgz#33923ecfb2cf24347975093cbd0b048ab33c9567"
+  integrity sha512-89zwvybvCxGJu3+gGF8w5AXd4HHk6hIN7K0vZbkzjilVaEAIWPqc1fcyeUeP71n3VCcw7pTL9LyFupFbrx8gHw==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@rc-component/trigger" "^1.18.0"
+    classnames "^2.3.1"
+
 rc-tree-select@~5.11.0:
   version "5.11.2"
   resolved "https://registry.yarnpkg.com/rc-tree-select/-/rc-tree-select-5.11.2.tgz#66b4a95843c6c1e04ba923a485e8b13def3ad6d0"
@@ -12840,6 +13203,17 @@ rc-tree-select@~5.11.0:
     rc-tree "~5.7.0"
     rc-util "^5.16.1"
 
+rc-tree-select@~5.15.0:
+  version "5.15.0"
+  resolved "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.15.0.tgz#8591f1dd28b043dde6fa1ca30c7acb198b160a42"
+  integrity sha512-YJHfdO6azFnR0/JuNBZLDptGE4/RGfVeHAafUIYcm2T3RBkL1O8aVqiHvwIyLzdK59ry0NLrByd+3TkfpRM+9Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-select "~14.10.0"
+    rc-tree "~5.8.1"
+    rc-util "^5.16.1"
+
 rc-tree@~5.7.0:
   version "5.7.2"
   resolved "https://registry.yarnpkg.com/rc-tree/-/rc-tree-5.7.2.tgz#270ea7d9e1b2e5e81cd3659eba2fbd022a4831f6"
@@ -12862,6 +13236,17 @@ rc-tree@~5.7.6:
     rc-util "^5.16.1"
     rc-virtual-list "^3.5.1"
 
+rc-tree@~5.8.1, rc-tree@~5.8.2:
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/rc-tree/-/rc-tree-5.8.2.tgz#ed3a3f7c56597bbeab3303407a9e1739bbf15621"
+  integrity sha512-xH/fcgLHWTLmrSuNphU8XAqV7CdaOQgm4KywlLGNoTMhDAcNR3GVNP6cZzb0GrKmIZ9yae+QLot/cAgUdPRMzg==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    rc-motion "^2.0.1"
+    rc-util "^5.16.1"
+    rc-virtual-list "^3.5.1"
+
 rc-upload@~4.3.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/rc-upload/-/rc-upload-4.3.4.tgz#83ff7d3867631c37adbfd72ea3d1fd7e97ca84af"
@@ -12871,6 +13256,15 @@ rc-upload@~4.3.0:
     classnames "^2.2.5"
     rc-util "^5.2.0"
 
+rc-upload@~4.3.5:
+  version "4.3.5"
+  resolved "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.5.tgz#12fc69b2af74d08646a104828831bcaf44076eda"
+  integrity sha512-EHlKJbhkgFSQHliTj9v/2K5aEuFwfUQgZARzD7AmAPOneZEPiCNF3n6PEWIuqz9h7oq6FuXgdR67sC5BWFxJbA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    classnames "^2.2.5"
+    rc-util "^5.2.0"
+
 rc-util@^5.0.1, rc-util@^5.15.0, rc-util@^5.16.0, rc-util@^5.16.1, rc-util@^5.17.0, rc-util@^5.18.1, rc-util@^5.19.2, rc-util@^5.2.0, rc-util@^5.20.1, rc-util@^5.21.0, rc-util@^5.21.2, rc-util@^5.22.5, rc-util@^5.24.4, rc-util@^5.26.0, rc-util@^5.27.0:
   version "5.28.0"
   resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.28.0.tgz#9e5e441d5875b8bf0ba56c2f295042a28dcff580"
@@ -12903,6 +13297,24 @@ rc-util@^5.35.0:
     "@babel/runtime" "^7.18.3"
     react-is "^16.12.0"
 
+rc-util@^5.37.0, rc-util@^5.38.0, rc-util@^5.38.1:
+  version "5.38.1"
+  resolved "https://registry.npmjs.org/rc-util/-/rc-util-5.38.1.tgz#4915503b89855f5c5cd9afd4c72a7a17568777bb"
+  integrity sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^18.2.0"
+
+rc-virtual-list@^3.11.1:
+  version "3.11.3"
+  resolved "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.11.3.tgz#77d4e12e20c1ba314b43c0e37e118296674c5401"
+  integrity sha512-tu5UtrMk/AXonHwHxUogdXAWynaXsrx1i6dsgg+lOo/KJSF8oBAcprh1z5J3xgnPJD5hXxTL58F8s8onokdt0Q==
+  dependencies:
+    "@babel/runtime" "^7.20.0"
+    classnames "^2.2.6"
+    rc-resize-observer "^1.0.0"
+    rc-util "^5.36.0"
+
 rc-virtual-list@^3.4.8:
   version "3.4.13"
   resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.4.13.tgz#20acc934b263abcf7b7c161f50ef82281b2f7e8d"
@@ -12976,7 +13388,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -13614,6 +14026,13 @@ scroll-into-view-if-needed@^3.0.3:
   dependencies:
     compute-scroll-into-view "^3.0.0"
 
+scroll-into-view-if-needed@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
+  integrity sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==
+  dependencies:
+    compute-scroll-into-view "^3.0.2"
+
 scrypt-js@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-3.0.1.tgz#d314a57c2aef69d1ad98a138a21fe9eafa9ee312"