diff --git a/packages/frontend/core/src/components/tags/inline-tag-list.css.ts b/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
index 75359852cb..ea69af2dcc 100644
--- a/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
+++ b/packages/frontend/core/src/components/tags/inline-tag-list.css.ts
@@ -5,4 +5,5 @@ export const inlineTagsContainer = style({
   gap: '6px',
   flexWrap: 'wrap',
   width: '100%',
+  alignItems: 'center',
 });
diff --git a/packages/frontend/core/src/components/tags/styles.css.ts b/packages/frontend/core/src/components/tags/styles.css.ts
index 0be163d1f4..ee9f2188b8 100644
--- a/packages/frontend/core/src/components/tags/styles.css.ts
+++ b/packages/frontend/core/src/components/tags/styles.css.ts
@@ -17,7 +17,7 @@ export const tagsEditorRoot = style({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
-  gap: '12px',
+  gap: '4px',
 });
 
 export const tagsEditorRootMobile = style([
@@ -27,13 +27,6 @@ export const tagsEditorRootMobile = style([
   },
 ]);
 
-export const inlineTagsContainer = style({
-  display: 'flex',
-  gap: '6px',
-  flexWrap: 'wrap',
-  width: '100%',
-});
-
 export const tagsMenu = style({
   padding: 0,
   position: 'relative',
@@ -45,23 +38,25 @@ export const tagsMenu = style({
 
 export const tagsEditorSelectedTags = style({
   display: 'flex',
-  gap: '4px',
   flexWrap: 'wrap',
-  padding: '10px 12px',
-  backgroundColor: cssVarV2('input/background'),
+  padding: '10px 12px 0px',
   minHeight: 42,
   selectors: {
     [`${tagsEditorRootMobile} &`]: {
       borderRadius: 12,
+      paddingBottom: '10px',
       backgroundColor: cssVarV2('layer/background/primary'),
     },
   },
 });
 
+export const tagDivider = style({
+  borderBottomColor: cssVarV2('tab/divider/divider'),
+});
+
 export const searchInput = style({
   flexGrow: 1,
-  padding: '10px 0',
-  margin: '-10px 0',
+  height: '30px',
   border: 'none',
   outline: 'none',
   fontSize: '14px',
diff --git a/packages/frontend/core/src/components/tags/tags-editor.tsx b/packages/frontend/core/src/components/tags/tags-editor.tsx
index e7880f447d..922418ac34 100644
--- a/packages/frontend/core/src/components/tags/tags-editor.tsx
+++ b/packages/frontend/core/src/components/tags/tags-editor.tsx
@@ -1,4 +1,10 @@
-import { IconButton, Menu, RowInput, Scrollable } from '@affine/component';
+import {
+  Divider,
+  IconButton,
+  Menu,
+  RowInput,
+  Scrollable,
+} from '@affine/component';
 import { useI18n } from '@affine/i18n';
 import { MoreHorizontalIcon } from '@blocksuite/icons/rc';
 import clsx from 'clsx';
@@ -249,6 +255,9 @@ export const TagsEditor = ({
             placeholder="Type here ..."
           />
         </InlineTagList>
+        {BUILD_CONFIG.isMobileEdition ? null : (
+          <Divider size="thinner" className={styles.tagDivider} />
+        )}
       </div>
       <div className={styles.tagsEditorTagsSelector}>
         <div className={styles.tagsEditorTagsSelectorHeader}>