diff --git a/apps/web/src/components/affine/affine-error-eoundary.tsx b/apps/web/src/components/affine/affine-error-eoundary.tsx
index d099e51521..652cdd45a5 100644
--- a/apps/web/src/components/affine/affine-error-eoundary.tsx
+++ b/apps/web/src/components/affine/affine-error-eoundary.tsx
@@ -88,7 +88,7 @@ export class AffineErrorBoundary extends Component<
               <span> Page error </span>
               <span>
                 Cannot find page {error.pageId} in workspace{' '}
-                {error.workspace.meta.name}
+                {error.workspace.id}
               </span>
               <button
                 onClick={() => {
diff --git a/apps/web/src/components/blocksuite/header/styles.ts b/apps/web/src/components/blocksuite/header/styles.ts
index 553704e736..103b719fbf 100644
--- a/apps/web/src/components/blocksuite/header/styles.ts
+++ b/apps/web/src/components/blocksuite/header/styles.ts
@@ -15,7 +15,7 @@ export const StyledHeaderContainer = styled('div')<{ hasWarning: boolean }>(
 export const StyledHeader = styled('div')<{ hasWarning: boolean }>(
   ({ theme }) => {
     return {
-      height: '48px',
+      height: '60px',
       width: '100%',
       padding: '0 20px',
       ...displayFlex('space-between', 'center'),
diff --git a/apps/web/src/layouts/public-workspace-layout.tsx b/apps/web/src/layouts/public-workspace-layout.tsx
new file mode 100644
index 0000000000..bb8853f0e0
--- /dev/null
+++ b/apps/web/src/layouts/public-workspace-layout.tsx
@@ -0,0 +1,75 @@
+import { ListSkeleton } from '@affine/component';
+import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
+import dynamic from 'next/dynamic';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import type React from 'react';
+import { Suspense } from 'react';
+
+import { openQuickSearchModalAtom } from '../atoms';
+import {
+  publicBlockSuiteAtom,
+  publicWorkspaceIdAtom,
+} from '../atoms/public-workspace';
+import { StyledTableContainer } from '../components/blocksuite/block-suite-page-list/page-list/styles';
+import { useRouterTitle } from '../hooks/use-router-title';
+import { StyledPage, StyledWrapper } from './styles';
+
+const QuickSearchModal = dynamic(
+  () => import('../components/pure/quick-search-modal')
+);
+
+export const PublicQuickSearch: React.FC = () => {
+  const blockSuiteWorkspace = useAtomValue(publicBlockSuiteAtom);
+  const router = useRouter();
+  const [openQuickSearchModal, setOpenQuickSearchModalAtom] = useAtom(
+    openQuickSearchModalAtom
+  );
+  return (
+    <QuickSearchModal
+      blockSuiteWorkspace={blockSuiteWorkspace}
+      open={openQuickSearchModal}
+      setOpen={setOpenQuickSearchModalAtom}
+      router={router}
+    />
+  );
+};
+
+const PublicWorkspaceLayoutInner: React.FC<React.PropsWithChildren> = props => {
+  const router = useRouter();
+  const title = useRouterTitle(router);
+  const workspaceId = useAtomValue(publicWorkspaceIdAtom);
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <StyledPage>
+        <StyledWrapper className="main-container">
+          {props.children}
+        </StyledWrapper>
+        <Suspense fallback="">
+          {/* `publicBlockSuiteAtom` is available only when `publicWorkspaceIdAtom` loaded */}
+          {workspaceId && <PublicQuickSearch />}
+        </Suspense>
+      </StyledPage>
+    </>
+  );
+};
+
+export const PublicWorkspaceLayout: React.FC<
+  React.PropsWithChildren
+> = props => {
+  return (
+    <Suspense
+      fallback={
+        <StyledTableContainer>
+          <ListSkeleton />
+        </StyledTableContainer>
+      }
+    >
+      <PublicWorkspaceLayoutInner>{props.children}</PublicWorkspaceLayoutInner>
+    </Suspense>
+  );
+};
diff --git a/apps/web/src/pages/public-workspace/[workspaceId].tsx b/apps/web/src/pages/public-workspace/[workspaceId].tsx
index 3bbd7069c4..2b84723ece 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId].tsx
@@ -18,7 +18,7 @@ import { WorkspaceAvatar } from '../../components/pure/footer';
 import { PageLoading } from '../../components/pure/loading';
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '../../hooks/use-blocksuite-workspace-name';
-import { WorkspaceLayout } from '../../layouts';
+import { PublicWorkspaceLayout } from '../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../shared';
 import { NavContainer, StyledBreadcrumbs } from './[workspaceId]/[pageId]';
 
@@ -59,7 +59,7 @@ const ListPageInner: React.FC<{
   }
   return (
     <>
-      <NavContainer>
+      <NavContainer sx={{ px: '20px' }}>
         <Breadcrumbs>
           <StyledBreadcrumbs
             href={`/public-workspace/${blockSuiteWorkspace.id}`}
@@ -123,5 +123,5 @@ const ListPage: NextPageWithLayout = () => {
 export default ListPage;
 
 ListPage.getLayout = page => {
-  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+  return <PublicWorkspaceLayout>{page}</PublicWorkspaceLayout>;
 };
diff --git a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
index 9db8823726..da5ec9d35d 100644
--- a/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
+++ b/apps/web/src/pages/public-workspace/[workspaceId]/[pageId].tsx
@@ -1,9 +1,4 @@
-import {
-  Breadcrumbs,
-  displayFlex,
-  IconButton,
-  styled,
-} from '@affine/component';
+import { Breadcrumbs, displayFlex, styled } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { PageIcon } from '@blocksuite/icons';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -22,14 +17,13 @@ import { WorkspaceAvatar } from '../../../components/pure/footer';
 import { PageLoading } from '../../../components/pure/loading';
 import { useBlockSuiteWorkspaceAvatarUrl } from '../../../hooks/use-blocksuite-workspace-avatar-url';
 import { useBlockSuiteWorkspaceName } from '../../../hooks/use-blocksuite-workspace-name';
-import { WorkspaceLayout } from '../../../layouts';
+import { PublicWorkspaceLayout } from '../../../layouts/public-workspace-layout';
 import type { NextPageWithLayout } from '../../../shared';
-import { initPage } from '../../../utils/blocksuite';
+import { initPage } from '../../../utils';
 
 export const NavContainer = styled('div')(({ theme }) => {
   return {
     width: '100vw',
-    padding: '0 12px',
     height: '60px',
     ...displayFlex('start', 'center'),
     backgroundColor: theme.colors.pageBackground,
@@ -54,15 +48,6 @@ export const StyledBreadcrumbs = styled(Link)(({ theme }) => {
   };
 });
 
-export const SearchButton = styled(IconButton)(({ theme }) => {
-  return {
-    color: theme.colors.iconColor,
-    fontSize: '24px',
-    marginLeft: 'auto',
-    padding: '0 24px',
-  };
-});
-
 const PublicWorkspaceDetailPageInner: React.FC<{
   pageId: string;
 }> = ({ pageId }) => {
@@ -141,5 +126,5 @@ export const PublicWorkspaceDetailPage: NextPageWithLayout = () => {
 export default PublicWorkspaceDetailPage;
 
 PublicWorkspaceDetailPage.getLayout = page => {
-  return <WorkspaceLayout>{page}</WorkspaceLayout>;
+  return <PublicWorkspaceLayout>{page}</PublicWorkspaceLayout>;
 };
