diff --git a/app/src/assets/scss/business/_av.scss b/app/src/assets/scss/business/_av.scss
index c8edcf19f..7a60949a6 100644
--- a/app/src/assets/scss/business/_av.scss
+++ b/app/src/assets/scss/business/_av.scss
@@ -381,6 +381,14 @@
 
     }
 
+    &--relation {
+      margin-left: 12px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+
     .block__icon {
       position: absolute;
       right: 5px;
diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts
index 2fee4e95c..df2ac1685 100644
--- a/app/src/emoji/index.ts
+++ b/app/src/emoji/index.ts
@@ -216,7 +216,7 @@ const genWeekdayOptions = (lang: string, weekdayType: string) => {
 <option value="4" ${weekdayType === "4" ? " selected" : ""}>${dynamicWeekdayLang[4][currentLang]}</option>`;
 };
 
-export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, avCB?: (emoji: string) => void, dynamicImgElement?: HTMLElement) => {
+export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", position: IPosition, callback?: (emoji: string) => void, dynamicImgElement?: HTMLElement) => {
     if (type !== "av") {
         window.siyuan.menus.menu.remove();
     } else {
@@ -432,8 +432,9 @@ export const openEmojiPanel = (id: string, type: "doc" | "notebook" | "av", posi
                     updateFileTreeEmoji(unicode, id);
                     updateOutlineEmoji(unicode, id);
                 });
-            } else {
-                avCB(unicode);
+            }
+            if (callback) {
+                callback(unicode);
             }
             event.preventDefault();
             event.stopPropagation();
@@ -558,8 +559,9 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                         updateFileTreeEmoji("", id);
                         updateOutlineEmoji("", id);
                     });
-                } else {
-                    avCB("");
+                }
+                if (callback) {
+                    callback("");
                 }
                 break;
             } else if (target.classList.contains("emojis__item") || target.getAttribute("data-action") === "random" || target.classList.contains("emoji__dynamic-item")) {
@@ -590,9 +592,11 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
                         addEmoji(unicode);
                         updateFileTreeEmoji(unicode, id);
                         updateOutlineEmoji(unicode, id);
+
                     });
-                } else {
-                    avCB(unicode);
+                }
+                if (callback) {
+                    callback(unicode);
                 }
                 break;
             } else if (target.getAttribute("data-type")?.startsWith("tab-")) {
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 16d01ae58..a4121914a 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -240,7 +240,9 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
                 y: rect.bottom,
                 h: rect.height,
                 w: rect.width,
-            }, undefined, target.querySelector("img"));
+            }, (unicode) => {
+                target.innerHTML = unicode2Emoji(unicode);
+            }, target.querySelector("img"));
             event.preventDefault();
             event.stopPropagation();
             return true;
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index eb6442815..cf6b14b91 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -100,7 +100,8 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
     } else if (colType === "relation") {
         const blockIDs: string[] = [];
         const contents: IAVCellValue[] = [];
-        Array.from(cellElement.querySelectorAll("span")).forEach((item: HTMLElement) => {
+        Array.from(cellElement.querySelectorAll(".av__cell--relation")).forEach((relationItem: HTMLElement) => {
+            const item = relationItem.querySelector(".av__celltext") as HTMLElement;
             blockIDs.push(item.dataset.id);
             contents.push({
                 isDetached: !item.classList.contains("av__celltext--ref"),
@@ -835,7 +836,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
         cellValue?.rollup?.contents?.forEach((item) => {
             const rollupText = ["select", "mSelect", "mAsset", "checkbox", "relation"].includes(item.type) ? renderCell(item) : renderRollup(item);
             if (rollupText) {
-                text += rollupText + " ";
+                text += rollupText + ", ";
             }
         });
         if (text && text.endsWith(", ")) {
@@ -844,7 +845,12 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0) => {
     } else if (cellValue.type === "relation") {
         cellValue?.relation?.contents?.forEach((item) => {
             if (item && item.block) {
-                text += renderRollup(item) + " ";
+                if (item?.isDetached) {
+                    text += `<span class="av__cell--relation"><span>➖ </span><span class="av__celltext" data-id="${item.block?.id}">${item.block.content || window.siyuan.languages.untitled}</span></span>`;
+                } else {
+                    // data-block-id 用于更新 emoji
+                    text += `<span class="av__cell--relation" data-block-id="${item.block.id}"><span class="b3-menu__avemoji" data-unicode="${item.block.icon}">${unicode2Emoji(item.block.icon || window.siyuan.storage[Constants.LOCAL_IMAGES].file)}</span><span data-type="block-ref" data-id="${item.block.id}" data-subtype="s" class="av__celltext av__celltext--ref">${item.block.content || window.siyuan.languages.untitled}</span></span>`;
+                }
             }
         });
         if (text && text.endsWith(", ")) {
diff --git a/app/src/protyle/render/av/relation.ts b/app/src/protyle/render/av/relation.ts
index ec1759b7b..b748b47b8 100644
--- a/app/src/protyle/render/av/relation.ts
+++ b/app/src/protyle/render/av/relation.ts
@@ -240,7 +240,8 @@ const filterItem = (menuElement: Element, cellElement: HTMLElement, keyword: str
         let html = "";
         let selectHTML = "";
         const hasIds: string[] = [];
-        cellElement.querySelectorAll("span").forEach((item) => {
+        cellElement.querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
+            const item = relationItem.querySelector(".av__celltext") as HTMLElement;
             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 || window.siyuan.languages.untitled)}</button>`;
         });
@@ -271,7 +272,8 @@ export const bindRelationEvent = (options: {
         let html = "";
         let selectHTML = "";
         const hasIds: string[] = [];
-        options.cellElements[0].querySelectorAll("span").forEach((item) => {
+        options.cellElements[0].querySelectorAll(".av__cell--relation").forEach((relationItem: HTMLElement) => {
+            const item = relationItem.querySelector(".av__celltext") as HTMLElement;
             hasIds.push(item.dataset.id);
             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 || window.siyuan.languages.untitled)}</button>`;
         });