diff --git a/packages/common/infra/src/modules/doc/constants.ts b/packages/common/infra/src/modules/doc/constants.ts
index 89d802060f..5e476554ec 100644
--- a/packages/common/infra/src/modules/doc/constants.ts
+++ b/packages/common/infra/src/modules/doc/constants.ts
@@ -15,10 +15,12 @@ export const BUILT_IN_CUSTOM_PROPERTY_TYPE = [
     id: 'docPrimaryMode',
     type: 'docPrimaryMode',
     show: 'always-hide',
+    index: 'a0000002',
   },
   {
     id: 'journal',
     type: 'journal',
     show: 'always-hide',
+    index: 'a0000003',
   },
 ] as DocCustomPropertyInfo[];
diff --git a/packages/frontend/component/src/ui/property/property.css.ts b/packages/frontend/component/src/ui/property/property.css.ts
index a0a28e4c58..cbe69e7e54 100644
--- a/packages/frontend/component/src/ui/property/property.css.ts
+++ b/packages/frontend/component/src/ui/property/property.css.ts
@@ -65,7 +65,7 @@ export const hide = style({
 export const propertyNameContainer = style({
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'center',
+  justifyContent: 'start',
   position: 'relative',
   borderRadius: 4,
   fontSize: cssVar('fontSm'),
diff --git a/packages/frontend/core/src/components/doc-properties/manager/index.tsx b/packages/frontend/core/src/components/doc-properties/manager/index.tsx
index 1a8240c4eb..8ba78dc438 100644
--- a/packages/frontend/core/src/components/doc-properties/manager/index.tsx
+++ b/packages/frontend/core/src/components/doc-properties/manager/index.tsx
@@ -134,7 +134,7 @@ const PropertyItem = ({
           <MoreHorizontalIcon />
         </IconButton>
       </Menu>
-      <DropIndicator edge={closestEdge} />
+      <DropIndicator edge={closestEdge} noTerminal />
     </div>
   );
 };
diff --git a/packages/frontend/core/src/components/doc-properties/table.css.ts b/packages/frontend/core/src/components/doc-properties/table.css.ts
index 3c5bd42cc1..00a2bc948c 100644
--- a/packages/frontend/core/src/components/doc-properties/table.css.ts
+++ b/packages/frontend/core/src/components/doc-properties/table.css.ts
@@ -148,7 +148,7 @@ export const tableBodySortable = style({
 export const actionContainer = style({
   display: 'flex',
   flexDirection: 'row',
-  gap: 8,
+  paddingTop: '2px',
   selectors: {
     [`[data-property-collapsed="true"] &`]: {
       display: 'none',
@@ -157,13 +157,15 @@ export const actionContainer = style({
 });
 
 export const propertyActionButton = style({
-  alignSelf: 'flex-start',
   fontSize: cssVar('fontSm'),
   color: `${cssVarV2('text/secondary')}`,
   padding: '0 6px',
-  height: 36,
+  height: 34,
   fontWeight: 400,
   gap: 6,
+  width: '160px',
+  borderRadius: '4px',
+  justifyContent: 'start',
   '@media': {
     print: {
       display: 'none',
diff --git a/packages/frontend/core/src/components/doc-properties/types/constant.tsx b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
index c8da5974e4..303ec7f95c 100644
--- a/packages/frontend/core/src/components/doc-properties/types/constant.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/constant.tsx
@@ -21,6 +21,13 @@ import { TextValue } from './text';
 import type { PropertyValueProps } from './types';
 
 export const DocPropertyTypes = {
+  tags: {
+    icon: TagIcon,
+    value: TagsValue,
+    name: 'com.affine.page-properties.property.tags',
+    uniqueId: 'tags',
+    renameable: false,
+  },
   text: {
     icon: TextIcon,
     value: TextValue,
@@ -31,16 +38,16 @@ export const DocPropertyTypes = {
     value: NumberValue,
     name: 'com.affine.page-properties.property.number',
   },
-  date: {
-    icon: DateTimeIcon,
-    value: DateValue,
-    name: 'com.affine.page-properties.property.date',
-  },
   checkbox: {
     icon: CheckBoxCheckLinearIcon,
     value: CheckboxValue,
     name: 'com.affine.page-properties.property.checkbox',
   },
+  date: {
+    icon: DateTimeIcon,
+    value: DateValue,
+    name: 'com.affine.page-properties.property.date',
+  },
   createdBy: {
     icon: CreatedEditedIcon,
     value: CreatedByValue,
@@ -51,13 +58,6 @@ export const DocPropertyTypes = {
     value: UpdatedByValue,
     name: 'com.affine.page-properties.property.updatedBy',
   },
-  tags: {
-    icon: TagIcon,
-    value: TagsValue,
-    name: 'com.affine.page-properties.property.tags',
-    uniqueId: 'tags',
-    renameable: false,
-  },
   docPrimaryMode: {
     icon: FileIcon,
     value: DocPrimaryModeValue,
@@ -67,8 +67,6 @@ export const DocPropertyTypes = {
     icon: TodayIcon,
     value: JournalValue,
     name: 'com.affine.page-properties.property.journal',
-    uniqueId: 'journal',
-    renameable: false,
   },
 } as Record<
   string,
diff --git a/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.css.ts b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.css.ts
new file mode 100644
index 0000000000..b837005e5f
--- /dev/null
+++ b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.css.ts
@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+
+export const radioGroup = style({
+  //   height: '28px',
+});
+
+export const container = style({
+  paddingTop: '3px',
+  paddingBottom: '3px',
+});
diff --git a/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx
index 81882d7b3e..8eae4f1895 100644
--- a/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx
+++ b/packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx
@@ -9,6 +9,8 @@ import type { DocMode } from '@blocksuite/affine/blocks';
 import { DocService, useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import * as styles from './doc-primary-mode.css';
+
 export const DocPrimaryModeValue = () => {
   const t = useI18n();
   const doc = useService(DocService).doc;
@@ -46,12 +48,14 @@ export const DocPrimaryModeValue = () => {
     [doc, t]
   );
   return (
-    <PropertyValue>
+    <PropertyValue className={styles.container}>
       <RadioGroup
         width={194}
+        itemHeight={24}
         value={primaryMode}
         onChange={handleChange}
         items={DocModeItems}
+        className={styles.radioGroup}
       />
     </PropertyValue>
   );
diff --git a/tests/affine-local/e2e/page-properties.spec.ts b/tests/affine-local/e2e/page-properties.spec.ts
index afed24fba1..c93273f96e 100644
--- a/tests/affine-local/e2e/page-properties.spec.ts
+++ b/tests/affine-local/e2e/page-properties.spec.ts
@@ -120,9 +120,9 @@ test('property table reordering', async ({ page }) => {
 
   // new order should be Doc mode, (Tags), Number, Date, Checkbox, Text
   for (const [index, property] of [
-    'Journal',
-    'Doc mode',
     'Tags',
+    'Doc mode',
+    'Journal',
     'Number',
     'Date',
     'Checkbox',
@@ -160,9 +160,9 @@ test('page info show more will show all properties', async ({ page }) => {
   await page.click('[data-testid="property-collapsible-button"]');
 
   for (const [index, property] of [
-    'Journal',
-    'Doc mode',
     'Tags',
+    'Doc mode',
+    'Journal',
     'Text',
     'Number',
     'Date',