diff --git a/app/src/assets/scss/component/_menu.scss b/app/src/assets/scss/component/_menu.scss
index ed539660b..419184c37 100644
--- a/app/src/assets/scss/component/_menu.scss
+++ b/app/src/assets/scss/component/_menu.scss
@@ -262,7 +262,7 @@
     color: var(--b3-theme-on-surface);
     flex-shrink: 0;
 
-    &--arrow {
+    &--small {
       margin: 0 0 0 8px;
       height: 10px;
     }
diff --git a/app/src/assets/scss/component/_switch.scss b/app/src/assets/scss/component/_switch.scss
index 952774d09..184479cd9 100644
--- a/app/src/assets/scss/component/_switch.scss
+++ b/app/src/assets/scss/component/_switch.scss
@@ -20,6 +20,10 @@
     margin-left: 14px;
   }
 
+  &--menu {
+   margin: 13px 6px 13px 0;
+  }
+
   &:after {
     border: 1px solid var(--b3-theme-surface-lighter);
     box-shadow: var(--b3-point-shadow);
diff --git a/app/src/menus/Menu.ts b/app/src/menus/Menu.ts
index 901e6b4f7..67c8a5a74 100644
--- a/app/src/menus/Menu.ts
+++ b/app/src/menus/Menu.ts
@@ -230,7 +230,7 @@ export class MenuItem {
             options.submenu.forEach((item) => {
                 submenuElement.firstElementChild.append(new MenuItem(item).element);
             });
-            this.element.insertAdjacentHTML("beforeend", '<svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>');
+            this.element.insertAdjacentHTML("beforeend", '<svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>');
             this.element.append(submenuElement);
         }
     }
diff --git a/app/src/protyle/render/av/col.ts b/app/src/protyle/render/av/col.ts
index 11a532b7d..4bda7cb62 100644
--- a/app/src/protyle/render/av/col.ts
+++ b/app/src/protyle/render/av/col.ts
@@ -115,7 +115,7 @@ export const getEditHTML = (options: {
     <span class="fn__space"></span>
     <svg class="b3-menu__icon"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>
     <span class="b3-menu__accelerator" style="margin-left: 0">${getColNameByType(colData.type)}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>`;
     if (colData.options && colData.options.length > 0) {
         html += `<button class="b3-menu__separator"></button>
@@ -147,6 +147,24 @@ export const getEditHTML = (options: {
 <button class="b3-menu__item">
     <textarea rows="${colData.template.split("\n").length}" placeholder="${window.siyuan.languages.template}" data-type="updateTemplate" style="margin: 4px 0" rows="1" class="fn__block b3-text-field">${colData.template}</textarea>
 </button>`;
+    } else if (colData.type === "relation") {
+        const databaseName = "TODO"
+        html += `<button class="b3-menu__item" data-type="goUpdateColType">
+    <span class="b3-menu__label">${window.siyuan.languages.relatedTo}</span>
+    <span class="fn__space"></span>
+    <svg class="b3-menu__icon"><use xlink:href="#iconDatabase"></use></svg>
+    <span class="b3-menu__accelerator" style="margin-left: 0">${databaseName}</span>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
+</button>
+<label class="b3-menu__item">
+    <span class="fn__flex-center">${databaseName}</span>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconHelp"></use></svg>
+    <span class="fn__space fn__flex-1"></span>
+    <input type="checkbox" class="b3-switch b3-switch--menu">
+</label>
+<label class="b3-menu__item" data-type="nobg">
+    <input class="b3-text-field fn__block" style="margin: 4px" placeholder="todo">
+</label>`;
     }
     return `<div class="b3-menu__items">
     ${html}
@@ -155,7 +173,7 @@ export const getEditHTML = (options: {
         <svg class="b3-menu__icon" style=""><use xlink:href="#icon${colData.hidden ? "Eye" : "Eyeoff"}"></use></svg>
         <span class="b3-menu__label">${colData.hidden ? window.siyuan.languages.showCol : window.siyuan.languages.hideCol}</span>
     </button>
-    <button class="b3-menu__item" data-type="duplicateCol">
+    <button class="b3-menu__item${colData.type === "relation" ? " fn__none" : ""}" data-type="duplicateCol">
         <svg class="b3-menu__icon" style=""><use xlink:href="#iconCopy"></use></svg>
         <span class="b3-menu__label">${window.siyuan.languages.duplicate}</span>
     </button>
@@ -621,20 +639,22 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         }
     });
     if (type !== "block") {
-        menu.addItem({
-            icon: "iconCopy",
-            label: window.siyuan.languages.duplicate,
-            click() {
-                duplicateCol({
-                    protyle,
-                    type,
-                    avID,
-                    colId,
-                    icon: menu.element.querySelector(".block__icon").getAttribute("data-icon"),
-                    newValue: (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value
-                });
-            }
-        });
+        if (type !== "relation") {
+            menu.addItem({
+                icon: "iconCopy",
+                label: window.siyuan.languages.duplicate,
+                click() {
+                    duplicateCol({
+                        protyle,
+                        type,
+                        avID,
+                        colId,
+                        icon: menu.element.querySelector(".block__icon").getAttribute("data-icon"),
+                        newValue: (window.siyuan.menus.menu.element.querySelector(".b3-text-field") as HTMLInputElement).value
+                    });
+                }
+            });
+        }
         menu.addItem({
             icon: "iconTrashcan",
             label: window.siyuan.languages.delete,
@@ -656,7 +676,7 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         menu.addSeparator();
     }
     menu.addItem({
-        label: `<label class="fn__flex" style="margin: 4px 0"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
+        label: `<label class="fn__flex" style="margin: 4px 0;padding-right: 6px"><span>${window.siyuan.languages.wrap}</span><span class="fn__space fn__flex-1"></span>
 <input type="checkbox" class="b3-switch fn__flex-center"${cellElement.dataset.wrap === "true" ? " checked" : ""}></label>`,
         bind(element) {
             const inputElement = element.querySelector("input") as HTMLInputElement;
diff --git a/app/src/protyle/render/av/date.ts b/app/src/protyle/render/av/date.ts
index 80c1eff12..77f971989 100644
--- a/app/src/protyle/render/av/date.ts
+++ b/app/src/protyle/render/av/date.ts
@@ -37,18 +37,18 @@ export const getDateHTML = (data: IAVTable, cellElements: HTMLElement[]) => {
     }
     return `<div class="b3-menu__items">
 <div>
-    <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value}" data-value="${value ? dayjs(cellValue.value.date.content).format("YYYY-MM-DD HH:mm") : ""}" class="b3-text-field fn__size200"><br>
-    <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value2}" data-value="${value2 ? dayjs(cellValue.value.date.content2).format("YYYY-MM-DD HH:mm") : ""}" style="margin-top: 8px" class="b3-text-field fn__size200${hasEndDate ? "" : " fn__none"}">
+    <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value}" data-value="${value ? dayjs(cellValue.value.date.content).format("YYYY-MM-DD HH:mm") : ""}" class="b3-text-field fn__size200" style="margin-top: 4px;"><br>
+    <input type="${isNotTime ? "date" : "datetime-local"}" max="${isNotTime ? "9999-12-31" : "9999-12-31 23:59"}" value="${value2}" data-value="${value2 ? dayjs(cellValue.value.date.content2).format("YYYY-MM-DD HH:mm") : ""}" style="margin-top: 8px;margin-bottom: 4px" class="b3-text-field fn__size200${hasEndDate ? "" : " fn__none"}">
     <button class="b3-menu__separator"></button>
     <label class="b3-menu__item">
-        <span>${window.siyuan.languages.endDate}</span>
+        <span class="fn__flex-center">${window.siyuan.languages.endDate}</span>
         <span class="fn__space fn__flex-1"></span>
-        <input type="checkbox" class="b3-switch fn__flex-center"${hasEndDate ? " checked" : ""}>
+        <input type="checkbox" class="b3-switch b3-switch--menu"${hasEndDate ? " checked" : ""}>
     </label>
     <label class="b3-menu__item">
-        <span>${window.siyuan.languages.includeTime}</span>
+        <span class="fn__flex-center">${window.siyuan.languages.includeTime}</span>
         <span class="fn__space fn__flex-1"></span>
-        <input type="checkbox" class="b3-switch fn__flex-center"${isNotTime ? "" : " checked"}>
+        <input type="checkbox" class="b3-switch b3-switch--menu"${isNotTime ? "" : " checked"}>
     </label>
     <button class="b3-menu__separator"></button>
     <button class="b3-menu__item" data-type="clearDate">
diff --git a/app/src/protyle/render/av/filter.ts b/app/src/protyle/render/av/filter.ts
index d76011203..111d8e84e 100644
--- a/app/src/protyle/render/av/filter.ts
+++ b/app/src/protyle/render/av/filter.ts
@@ -15,7 +15,7 @@ export const getDefaultOperatorByType = (type: TAVCol) => {
     if (["checkbox"].includes(type)) {
         return "Is false";
     }
-    if (["text", "mSelect", "url", "block", "email", "phone", "template"].includes(type)) {
+    if (["relation", "rollup", "text", "mSelect", "url", "block", "email", "phone", "template"].includes(type)) {
         return "Contains";
     }
 };
diff --git a/app/src/protyle/render/av/view.ts b/app/src/protyle/render/av/view.ts
index 790f2f796..77781272d 100644
--- a/app/src/protyle/render/av/view.ts
+++ b/app/src/protyle/render/av/view.ts
@@ -118,25 +118,25 @@ export const getViewHTML = (data: IAVTable) => {
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.attr}</span>
     <span class="b3-menu__accelerator">${data.columns.filter((item: IAVColumn) => !item.hidden).length}/${data.columns.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 <button class="b3-menu__item" data-type="goFilters">
     <svg class="b3-menu__icon"><use xlink:href="#iconFilter"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.filter}</span>
     <span class="b3-menu__accelerator">${data.filters.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 <button class="b3-menu__item" data-type="goSorts">
     <svg class="b3-menu__icon"><use xlink:href="#iconSort"></use></svg>
     <span class="b3-menu__label">${window.siyuan.languages.sort}</span>
     <span class="b3-menu__accelerator">${data.sorts.length}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 <button class="b3-menu__item" data-type="set-page-size" data-size="${data.pageSize}">
     <svg class="b3-menu__icon"></svg>
     <span class="b3-menu__label">${window.siyuan.languages.pageCount}</span>
     <span class="b3-menu__accelerator">${data.pageSize}</span>
-    <svg class="b3-menu__icon b3-menu__icon--arrow"><use xlink:href="#iconRight"></use></svg>
+    <svg class="b3-menu__icon b3-menu__icon--small"><use xlink:href="#iconRight"></use></svg>
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="duplicate-view">