diff --git a/packages/component/src/components/date-picker/index.css.ts b/packages/component/src/components/date-picker/index.css.ts
index 9f808d3292..ddbccbed47 100644
--- a/packages/component/src/components/date-picker/index.css.ts
+++ b/packages/component/src/components/date-picker/index.css.ts
@@ -8,8 +8,11 @@ export const inputStyle = style({
   alignItems: 'center',
   justifyContent: 'center',
   height: '22px',
-  marginLeft: '10px',
-  marginRight: '10px',
+  textAlign: 'center',
+  ':hover': {
+    background: 'var(--affine-hover-color)',
+    borderRadius: '4px',
+  },
 });
 export const popperStyle = style({
   boxShadow: 'var(--affine-shadow-2)',
diff --git a/packages/component/src/components/page-list/filter/index.css.ts b/packages/component/src/components/page-list/filter/index.css.ts
index c6ffb31708..44cd265f04 100644
--- a/packages/component/src/components/page-list/filter/index.css.ts
+++ b/packages/component/src/components/page-list/filter/index.css.ts
@@ -41,21 +41,41 @@ export const filterItemCloseStyle = style({
 });
 export const inputStyle = style({
   fontSize: 'var(--affine-font-xs)',
-  margin: '0 10px',
+  padding: '2px 4px',
+  transition: 'all 0.15s ease-in-out',
+  ':hover': {
+    cursor: 'pointer',
+    background: 'var(--affine-hover-color)',
+    borderRadius: '4px',
+  },
 });
 export const switchStyle = style({
   fontSize: 'var(--affine-font-xs)',
   color: 'var(--affine-text-secondary-color)',
-  margin: '0 10px',
+  padding: '2px 4px',
+  transition: 'all 0.15s ease-in-out',
+  ':hover': {
+    cursor: 'pointer',
+    background: 'var(--affine-hover-color)',
+    borderRadius: '4px',
+  },
 });
 export const filterTypeStyle = style({
   fontSize: 'var(--affine-font-sm)',
   display: 'flex',
-  marginRight: '10px',
+  padding: '2px 4px',
+  transition: 'all 0.15s ease-in-out',
+  marginRight: '6px',
+  ':hover': {
+    cursor: 'pointer',
+    background: 'var(--affine-hover-color)',
+    borderRadius: '4px',
+  },
 });
 export const filterTypeIconStyle = style({
   fontSize: 'var(--affine-font-base)',
   marginRight: '6px',
+  padding: '1px 0',
   display: 'flex',
   color: 'var(--affine-icon-color)',
 });