diff --git a/packages/app/src/components/header/page-header.tsx b/packages/app/src/components/header/page-header.tsx
index 65dfa8e04a..4521dd122e 100644
--- a/packages/app/src/components/header/page-header.tsx
+++ b/packages/app/src/components/header/page-header.tsx
@@ -2,7 +2,9 @@ import React, { useEffect, useState } from 'react';
 import { StyledTitle, StyledTitleWrapper } from './styles';
 import { useEditor } from '@/providers/editor-provider';
 import EditorModeSwitch from '@/components/editor-mode-switch';
-
+import { MiddleIconArrowDownSmallIcon } from '@blocksuite/icons';
+import { useModal } from '@/providers/global-modal-provider';
+import IconButton from '@/ui/button/icon-button';
 import Header from './header';
 
 export const PageHeader = () => {
@@ -10,7 +12,7 @@ export const PageHeader = () => {
   const [isHover, setIsHover] = useState(false);
 
   const { editor } = useEditor();
-
+  const { triggerQuickSearchModal } = useModal();
   useEffect(() => {
     if (editor?.model) {
       setTitle(editor.model.title ?? '');
@@ -38,6 +40,17 @@ export const PageHeader = () => {
             }}
           />
           <StyledTitleWrapper>{title}</StyledTitleWrapper>
+          <IconButton
+            style={{
+              marginLeft: '6px',
+            }}
+          >
+            <MiddleIconArrowDownSmallIcon
+              onClick={() => {
+                triggerQuickSearchModal(true);
+              }}
+            />
+          </IconButton>
         </StyledTitle>
       ) : null}
     </Header>
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index 3ed233d29c..c4c4b13582 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -1,37 +1,12 @@
 import React from 'react';
+import { MiddleAddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
 
-const addIcon = (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <mask
-      id="mask0_4831_8057"
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="0"
-      width="20"
-      height="20"
-    >
-      <rect width="20" height="20" fill="#D9D9D9" />
-    </mask>
-    <g mask="url(#mask0_4831_8057)">
-      <path
-        d="M10 15.625C9.81933 15.625 9.663 15.559 9.531 15.427C9.399 15.295 9.333 15.1387 9.333 14.958V10.667H5.042C4.86133 10.667 4.705 10.601 4.573 10.469C4.441 10.337 4.375 10.1807 4.375 10C4.375 9.81933 4.441 9.663 4.573 9.531C4.705 9.399 4.86133 9.333 5.042 9.333H9.333V5.042C9.333 4.86133 9.399 4.705 9.531 4.573C9.663 4.441 9.81933 4.375 10 4.375C10.1807 4.375 10.337 4.441 10.469 4.573C10.601 4.705 10.667 4.86133 10.667 5.042V9.333H14.958C15.1387 9.333 15.295 9.399 15.427 9.531C15.559 9.663 15.625 9.81933 15.625 10C15.625 10.1807 15.559 10.337 15.427 10.469C15.295 10.601 15.1387 10.667 14.958 10.667H10.667V14.958C10.667 15.1387 10.601 15.295 10.469 15.427C10.337 15.559 10.1807 15.625 10 15.625Z"
-        fill="#9096A5"
-      />
-    </g>
-  </svg>
-);
-
 const QuickSearchFooter = () => {
   return (
     <StyledModalFooterContent>
-      {addIcon} <span>New page</span>
+      <MiddleAddIcon />
+      <span>New page</span>
     </StyledModalFooterContent>
   );
 };
diff --git a/packages/app/src/components/quick-search/input.tsx b/packages/app/src/components/quick-search/input.tsx
index a452db9e7d..bede221bbe 100644
--- a/packages/app/src/components/quick-search/input.tsx
+++ b/packages/app/src/components/quick-search/input.tsx
@@ -1,27 +1,13 @@
 import React from 'react';
+import { MiddleSearchIcon } from '@blocksuite/icons';
 import { StyledInput, StyledInputContent, StyledLabel } from './style';
 
-const searchIcon = (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M14.4 9.5C14.4 12.2062 12.2062 14.4 9.5 14.4C6.7938 14.4 4.6 12.2062 4.6 9.5C4.6 6.7938 6.7938 4.6 9.5 4.6C12.2062 4.6 14.4 6.7938 14.4 9.5ZM13.4215 14.6842C12.3315 15.5101 10.973 16 9.5 16C5.91015 16 3 13.0899 3 9.5C3 5.91015 5.91015 3 9.5 3C13.0899 3 16 5.91015 16 9.5C16 11.0402 15.4643 12.4553 14.5691 13.5691L21 20L19.8687 21.1313L13.4215 14.6842Z"
-      fill="#9096A5"
-    />
-  </svg>
-);
-
 const Input = () => {
   return (
     <StyledInputContent>
-      <StyledLabel htmlFor="quickSearchInput">{searchIcon}</StyledLabel>
+      <StyledLabel htmlFor="quickSearchInput">
+        <MiddleSearchIcon />
+      </StyledLabel>
       <StyledInput
         id="quickSearchInput"
         type="text"
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index f201e797c1..6992274873 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -32,7 +32,7 @@ export const StyledInputContent = styled('div')({
   ...displayFlex('space-between', 'center'),
 });
 export const StyledShortcut = styled('div')(({ theme }) => {
-  return { color: theme.colors.placeHolderColor, fontSize: theme.font.sm };
+  return { color: theme.colors.placeHolderColor, fontSize: theme.font.xs };
 });
 export const StyledInput = styled('input')(({ theme }) => {
   return {