diff --git a/packages/app/src/components/header/QuickSearchButton.tsx b/packages/app/src/components/header/QuickSearchButton.tsx
index 0b28e43b09..ffe1fe7e14 100644
--- a/packages/app/src/components/header/QuickSearchButton.tsx
+++ b/packages/app/src/components/header/QuickSearchButton.tsx
@@ -4,6 +4,20 @@ 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)(() => {
+  return {
+    svg: {
+      transition: 'transform 0.15s ease-in-out',
+    },
+    ':hover': {
+      svg: {
+        transform: 'translateY(3px)',
+      },
+    },
+  };
+});
 export const QuickSearchButton = ({
   onClick,
   ...props
@@ -12,7 +26,7 @@ export const QuickSearchButton = ({
   const { t } = useTranslation();
   return (
     <Tooltip content={t('Switch to')} placement="bottom">
-      <IconButton
+      <StyledIconButtonWithAnimate
         data-testid="header-quickSearchButton"
         {...props}
         onClick={e => {
@@ -21,7 +35,7 @@ export const QuickSearchButton = ({
         }}
       >
         <ArrowDownIcon />
-      </IconButton>
+      </StyledIconButtonWithAnimate>
     </Tooltip>
   );
 };