diff --git a/packages/app/src/components/quick-search/content/jumpTo.tsx b/packages/app/src/components/quick-search/content/jumpTo.tsx
index 18ef05c528..2d0617cc26 100644
--- a/packages/app/src/components/quick-search/content/jumpTo.tsx
+++ b/packages/app/src/components/quick-search/content/jumpTo.tsx
@@ -1,12 +1,25 @@
 import React from 'react';
-
+import {
+  MiddleFavouritesIcon,
+  MiddleTrashIcon,
+  MiddleAllPagesIcon,
+} from '@blocksuite/icons';
 const JumpTo = () => {
   return (
     <div>
       <div>Jump to</div>
-      <div>All pages</div>
-      <div>Favorites</div>
-      <div>Trash</div>
+      <div>
+        <MiddleAllPagesIcon />
+        <span> All pages</span>
+      </div>
+      <div>
+        <MiddleFavouritesIcon />
+        <span> Favourites</span>
+      </div>
+      <div>
+        <MiddleTrashIcon />
+        <span> Trash</span>
+      </div>
     </div>
   );
 };
diff --git a/packages/app/src/components/quick-search/footer.tsx b/packages/app/src/components/quick-search/footer.tsx
index c4c4b13582..982d465900 100644
--- a/packages/app/src/components/quick-search/footer.tsx
+++ b/packages/app/src/components/quick-search/footer.tsx
@@ -1,11 +1,20 @@
 import React from 'react';
 import { MiddleAddIcon } from '@blocksuite/icons';
 import { StyledModalFooterContent } from './style';
+import { useEditor } from '@/providers/editor-provider';
+import { IconButton } from '@/ui/button';
 
 const QuickSearchFooter = () => {
+  const { createPage } = useEditor();
   return (
     <StyledModalFooterContent>
-      <MiddleAddIcon />
+      <IconButton>
+        <MiddleAddIcon
+          onClick={() => {
+            createPage();
+          }}
+        />
+      </IconButton>
       <span>New page</span>
     </StyledModalFooterContent>
   );
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
index c0c191d4eb..834aa00ca5 100644
--- a/packages/app/src/components/quick-search/index.tsx
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@/ui/modal';
+import { Modal, ModalWrapper } from '@/ui/modal';
 
 import {
   StyledModalWrapper,
@@ -21,7 +21,15 @@ const isMac = () => {
 export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
   return (
     <Modal open={open} onClose={onClose}>
-      <StyledModalWrapper data-testid="quick-search-modal-content">
+      <ModalWrapper
+        width={620}
+        height={'auto'}
+        style={{
+          maxHeight: '720px',
+          minHeight: '350px',
+          borderRadius: '20px',
+        }}
+      >
         <StyledModalHeader>
           <Input />
           <StyledShortcut>{isMac() ? '⌘+K' : 'Ctrl+K'}</StyledShortcut>
@@ -34,7 +42,7 @@ export const QuickSearch = ({ open, onClose }: TransitionsModalProps) => {
         <StyledModalFooter>
           <QuickSearchFooter />
         </StyledModalFooter>
-      </StyledModalWrapper>
+      </ModalWrapper>
     </Modal>
   );
 };
diff --git a/packages/app/src/components/quick-search/style.ts b/packages/app/src/components/quick-search/style.ts
index 6992274873..7468625650 100644
--- a/packages/app/src/components/quick-search/style.ts
+++ b/packages/app/src/components/quick-search/style.ts
@@ -22,7 +22,7 @@ export const StyledContent = styled('div')(({ theme }) => {
     width: '100%',
     padding: '5px 24px',
     overflow: 'auto',
-    color: theme.colors.textColor,
+    color: theme.colors.popoverColor,
     marginTop: '16px',
     letterSpacing: '0.06em',
   };
@@ -42,14 +42,18 @@ export const StyledInput = styled('input')(({ theme }) => {
     fontSize: theme.font.sm,
     ...displayFlex('space-between', 'center'),
     letterSpacing: '0.06em',
-    color: theme.colors.textColor,
+    color: theme.colors.popoverColor,
     '::placeholder': {
       color: theme.colors.placeHolderColor,
     },
   };
 });
 export const StyledLabel = styled('label')(({ theme }) => {
-  return { width: '24px', height: '24px' };
+  return {
+    width: '24px',
+    height: '24px',
+    color: theme.colors.iconColor,
+  };
 });
 
 export const StyledModalHeader = styled('div')(({ theme }) => {
@@ -57,7 +61,7 @@ export const StyledModalHeader = styled('div')(({ theme }) => {
     height: '48px',
     margin: '12px 24px 0px 24px',
     ...displayFlex('space-between', 'center'),
-    color: theme.colors.textColor,
+    color: theme.colors.popoverColor,
   };
 });
 export const StyledModalDivider = styled('div')(({ theme }) => {
@@ -75,7 +79,7 @@ export const StyledModalFooter = styled('div')(({ theme }) => {
     fontSize: theme.font.sm,
     lineHeight: '20px',
     textAlign: 'center',
-    color: theme.colors.textColor,
+    color: theme.colors.popoverColor,
     margin: '16px 0',
   };
 });
@@ -85,7 +89,7 @@ export const StyledModalFooterContent = styled('div')(({ theme }) => {
     lineHeight: '20px',
     textAlign: 'center',
     ...displayFlex('center', 'center'),
-    color: theme.colors.textColor,
+    color: theme.colors.popoverColor,
     margin: '16px 0',
     span: {
       marginLeft: '12px',
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index a1ff2700a0..4b266ce21c 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -10,6 +10,7 @@ import {
 import { Arrow } from './icons';
 import Link from 'next/link';
 import { useEditor } from '@/providers/editor-provider';
+import { useModal } from '@/providers/global-modal-provider';
 export const WorkSpaceSliderBar = () => {
   const { triggerQuickSearchModal } = useModal();
   const [show, setShow] = useState(false);