diff --git a/packages/app/src/components/header/QuickSearchButton.tsx b/packages/app/src/components/header/QuickSearchButton.tsx
index a1c68ffba8..dfc00eef14 100644
--- a/packages/app/src/components/header/QuickSearchButton.tsx
+++ b/packages/app/src/components/header/QuickSearchButton.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
 import { IconButton, IconButtonProps } from '@/ui/button';
-import { Tooltip } from '@/ui/tooltip';
 import { ArrowDownIcon } from '@blocksuite/icons';
 import { useModal } from '@/providers/GlobalModalProvider';
-import { useTranslation } from '@affine/i18n';
 import { styled } from '@/styles';
 
-const StyledIconButtonWithAnimate = styled(IconButton)(() => {
+const StyledIconButtonWithAnimate = styled(IconButton)(({ theme }) => {
   return {
     svg: {
       transition: 'transform 0.15s ease-in-out',
@@ -15,6 +13,9 @@ const StyledIconButtonWithAnimate = styled(IconButton)(() => {
       svg: {
         transform: 'translateY(3px)',
       },
+      '::after': {
+        background: theme.colors.pageBackground,
+      },
     },
   };
 });
@@ -23,20 +24,17 @@ export const QuickSearchButton = ({
   ...props
 }: Omit<IconButtonProps, 'children'>) => {
   const { triggerQuickSearchModal } = useModal();
-  const { t } = useTranslation();
   return (
-    <Tooltip content={t('Jump to')} placement="bottom">
-      <StyledIconButtonWithAnimate
-        data-testid="header-quickSearchButton"
-        {...props}
-        onClick={e => {
-          onClick?.(e);
-          triggerQuickSearchModal();
-        }}
-      >
-        <ArrowDownIcon />
-      </StyledIconButtonWithAnimate>
-    </Tooltip>
+    <StyledIconButtonWithAnimate
+      data-testid="header-quickSearchButton"
+      {...props}
+      onClick={e => {
+        onClick?.(e);
+        triggerQuickSearchModal();
+      }}
+    >
+      <ArrowDownIcon />
+    </StyledIconButtonWithAnimate>
   );
 };