diff --git a/packages/app/src/components/faq/index.tsx b/packages/app/src/components/faq/index.tsx
index 23b474d52b..3ea0498b7a 100644
--- a/packages/app/src/components/faq/index.tsx
+++ b/packages/app/src/components/faq/index.tsx
@@ -16,7 +16,7 @@ export const FAQ = () => {
   const [showContent, setShowContent] = useState(false);
   const { mode } = useTheme();
   const { mode: editorMode } = useEditor();
-  const { shortcutsModalHandler, contactModalHandler } = useModal();
+  const { shortcutsModalHandler, triggerContactModal } = useModal();
   const isEdgelessDark = mode === 'dark' && editorMode === 'edgeless';
 
   return (
@@ -38,7 +38,7 @@ export const FAQ = () => {
                 isEdgelessDark={isEdgelessDark}
                 onClick={() => {
                   setShowContent(false);
-                  contactModalHandler(true);
+                  triggerContactModal(true);
                 }}
               >
                 <ContactIcon />
diff --git a/packages/app/src/components/quick-search/index.tsx b/packages/app/src/components/quick-search/index.tsx
new file mode 100644
index 0000000000..419fd03c21
--- /dev/null
+++ b/packages/app/src/components/quick-search/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Popper } from '@/ui/popper';
+
+const QuickSearch = () => {
+  return (
+    <Popper>
+      <div>QuickSearch</div>
+    </Popper>
+  );
+};
+
+export default QuickSearch;
diff --git a/packages/app/src/components/workspace-slider-bar/index.tsx b/packages/app/src/components/workspace-slider-bar/index.tsx
index 4cd6065462..3e56c81810 100644
--- a/packages/app/src/components/workspace-slider-bar/index.tsx
+++ b/packages/app/src/components/workspace-slider-bar/index.tsx
@@ -8,12 +8,21 @@ import {
   StyledSubListItem,
 } from './style';
 import { Arrow } from './icons';
+import { useModal } from '@/providers/global-modal-provider';
+
 export const WorkSpaceSliderBar = () => {
+  const { shortcutsModalHandler } = useModal();
   const [show, setShow] = useState(false);
   return (
     <>
       <StyledSliderBar show={show}>
-        <StyledListItem>Quick search</StyledListItem>
+        <StyledListItem
+          onClick={() => {
+            shortcutsModalHandler(true);
+          }}
+        >
+          Quick search
+        </StyledListItem>
         <StyledListItem
           onClick={() => {
             Router.push('/all-page');
diff --git a/packages/app/src/providers/global-modal-provider.tsx b/packages/app/src/providers/global-modal-provider.tsx
index 599a3171f8..1fb610dcb0 100644
--- a/packages/app/src/providers/global-modal-provider.tsx
+++ b/packages/app/src/providers/global-modal-provider.tsx
@@ -5,13 +5,13 @@ import ContactModal from '@/components/contact-modal';
 
 type ModalContextValue = {
   shortcutsModalHandler: (visible: boolean) => void;
-  contactModalHandler: (visible: boolean) => void;
+  triggerContactModal: (visible: boolean) => void;
 };
 type ModalContextProps = PropsWithChildren<{}>;
 
 export const ModalContext = createContext<ModalContextValue>({
   shortcutsModalHandler: () => {},
-  contactModalHandler: () => {},
+  triggerContactModal: () => {},
 });
 
 export const useModal = () => useContext(ModalContext);
@@ -28,7 +28,7 @@ export const ModalProvider = ({
         shortcutsModalHandler: visible => {
           setOpenShortcutsModal(visible);
         },
-        contactModalHandler: visible => {
+        triggerContactModal: visible => {
           setOpenContactModal(visible);
         },
       }}