diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index b790f98b7..7f6c471ff 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -79,7 +79,7 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
                     content: item.textContent,
                     id: item.dataset.id,
                 },
-                type:"block"
+                type: "block"
             });
         });
         cellValue.relation = {
@@ -656,11 +656,7 @@ export const renderCell = (cellValue: IAVCellValue) => {
     } else if (cellValue.type === "relation") {
         cellValue?.relation?.contents?.forEach((item) => {
             if (item && item.block) {
-                if (item.isDetached) {
-                    text += `<span class="av__celltext" data-id="${item.block.id}">${item.block.content || "Untitled"}</span>, `;
-                } else {
-                    text += `<span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${item.block.content || "Untitled"}</span>, `;
-                }
+                text += renderRollup(item) + ", ";
             }
         });
         if (text && text.endsWith(", ")) {
@@ -689,7 +685,7 @@ const renderRollup = (cellValue: IAVCellValue) => {
         }
     } else if (cellValue.type === "block") {
         if (cellValue?.isDetached) {
-            text = `<span class="av__celltext">${cellValue.block?.content || "Untitled"}</span>`;
+            text = `<span class="av__celltext" data-id="${cellValue.block?.id}">${cellValue.block?.content || "Untitled"}</span>`;
         } else {
             text = `<span data-type="block-ref" data-id="${cellValue.block?.id}" data-subtype="s" class="av__celltext av__celltext--ref">${cellValue.block?.content || "Untitled"}</span>`;
         }
diff --git a/app/src/protyle/render/av/openMenuPanel.ts b/app/src/protyle/render/av/openMenuPanel.ts
index 2afd9b74a..c83bd7f13 100644
--- a/app/src/protyle/render/av/openMenuPanel.ts
+++ b/app/src/protyle/render/av/openMenuPanel.ts
@@ -365,7 +365,24 @@ export const openMenuPanel = (options: {
                     targetElement.after(sourceElement);
                 }
                 targetElement.classList.remove("dragover__bottom", "dragover__top");
-                setRelationCell(options.protyle, options.blockElement as HTMLElement, sourceElement.parentElement, options.cellElements);
+                const blockIDs: string[] = [];
+                const contents: IAVCellValue[] = []
+                targetElement.parentElement.querySelectorAll(".fn__grab").forEach(item => {
+                    const dateElement = item.nextElementSibling as HTMLElement
+                    blockIDs.push(dateElement.dataset.id)
+                    contents.push({
+                        isDetached: !dateElement.style.color,
+                        type: "block",
+                        block: {
+                            content: dateElement.textContent,
+                            id: dateElement.dataset.id
+                        }
+                    })
+                })
+                updateCellsValue(options.protyle, options.blockElement as HTMLElement, {
+                    blockIDs,
+                    contents,
+                }, options.cellElements);
                 return;
             }
 
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
index 728031383..4ff32a138 100644
--- a/app/src/protyle/render/av/relation.ts
+++ b/app/src/protyle/render/av/relation.ts
@@ -212,11 +212,9 @@ export const toggleUpdateRelationBtn = (menuItemsElement: HTMLElement, avId: str
 
 const genSelectItemHTML = (type: "selected" | "empty" | "unselect", id?: string, isDetached?: boolean, text?: string) => {
     if (type === "selected") {
-        return `<button data-id="${id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">
-    <svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
-    <span class="b3-menu__label${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
-    <svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>
-</button>`;
+        return `<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
+<span class="b3-menu__label${isDetached ? "" : " popover__block"}" ${isDetached ? "" : 'style="color:var(--b3-protyle-inline-blockref-color)"'} data-id="${id}">${text}</span>
+<svg class="b3-menu__action"><use xlink:href="#iconMin"></use></svg>`;
     }
     if (type === "empty") {
         return `<button class="b3-menu__item">
@@ -241,10 +239,8 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
         let selectHTML = "";
         const hasIds: string[] = []
         cellElement.querySelectorAll("span").forEach((item) => {
-            if (item.textContent.indexOf(keyword) > -1) {
-                hasIds.push(item.dataset.id);
-                selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
-            }
+            hasIds.push(item.dataset.id);
+            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item${item.textContent.indexOf(keyword) > -1 ? "" : " fn__none"}" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled")}</button>`;
         })
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -254,6 +250,7 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
         menuElement.querySelector(".b3-menu__items").innerHTML = `${selectHTML || genSelectItemHTML("empty")}
 <button class="b3-menu__separator"></button>
 ${html || genSelectItemHTML("empty")}`;
+        menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
     });
 };
 
@@ -273,7 +270,7 @@ export const bindRelationEvent = (options: {
         const hasIds: string[] = []
         options.cellElements[0].querySelectorAll("span").forEach((item) => {
             hasIds.push(item.dataset.id);
-            selectHTML += genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled");
+            selectHTML += `<button data-id="${item.dataset.id}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", item.dataset.id, !item.classList.contains("av__celltext--ref"), item.textContent || "Untitled")}</button>`;
         })
         cells.forEach((item) => {
             if (!hasIds.includes(item.block.id)) {
@@ -286,7 +283,7 @@ export const bindRelationEvent = (options: {
 ${html || genSelectItemHTML("empty")}`;
         const cellRect = options.cellElements[options.cellElements.length - 1].getBoundingClientRect();
         setPosition(options.menuElement, cellRect.left, cellRect.bottom, cellRect.height);
-        options.menuElement.querySelector(".b3-menu__items .b3-menu__item").classList.add("b3-menu__item--current");
+        options.menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
         const inputElement = options.menuElement.querySelector("input");
         inputElement.focus();
         const listElement = options.menuElement.querySelector(".b3-menu__items");
@@ -386,12 +383,13 @@ export const setRelationCell = (protyle: IProtyle, nodeElement: HTMLElement, tar
                 isDetached: !target.firstElementChild.getAttribute("style")
             });
             separatorElement.before(target);
-            target.outerHTML = genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent);
+            target.outerHTML = `<button data-id="${targetId}" data-type="setRelationCell" class="b3-menu__item" draggable="true">${genSelectItemHTML("selected", targetId, !target.querySelector(".popover__block"), target.querySelector(".b3-menu__label").textContent)}</button>`;
             if (!separatorElement.nextElementSibling) {
                 separatorElement.insertAdjacentHTML("afterend", genSelectItemHTML("empty"));
             }
         }
-        menuElement.firstElementChild.classList.add("b3-menu__item--current");
+        menuElement.querySelector(".b3-menu__item--current").classList.remove("b3-menu__item--current");
+        menuElement.querySelector(".b3-menu__items .b3-menu__item:not(.fn__none)").classList.add("b3-menu__item--current");
     }
     updateCellsValue(protyle, nodeElement, newValue, cellElements);
 };