diff --git a/app/src/layout/dock/Outline.ts b/app/src/layout/dock/Outline.ts
index 74cc44c91..0a77cb360 100644
--- a/app/src/layout/dock/Outline.ts
+++ b/app/src/layout/dock/Outline.ts
@@ -1,7 +1,7 @@
 import {Tab} from "../Tab";
 import {Model} from "../Model";
 import {Tree} from "../../util/Tree";
-import {getDockByType, setPanelFocus} from "../util";
+import {getDockByType, getInstanceById, setPanelFocus} from "../util";
 import {fetchPost} from "../../util/fetch";
 import {getAllModels} from "../getAll";
 import {hasClosestBlock, hasClosestByClassName, hasTopClosestByClassName} from "../../protyle/util/hasClosest";
@@ -27,7 +27,8 @@ export class Outline extends Model {
         app: App,
         tab: Tab,
         blockId: string,
-        type: "pin" | "local"
+        type: "pin" | "local",
+        isPreview: boolean
     }) {
         super({
             app: options.app,
@@ -75,6 +76,7 @@ export class Outline extends Model {
                 }
             }
         });
+        this.isPreview = options.isPreview;
         this.blockId = options.blockId;
         this.type = options.type;
         options.tab.panelElement.classList.add("fn__flex-column", "file-tree", "sy__outline");
@@ -104,7 +106,21 @@ export class Outline extends Model {
             click: (element: HTMLElement) => {
                 const id = element.getAttribute("data-node-id");
                 if (this.isPreview) {
-                    document.getElementById(id)?.scrollIntoView()
+                    const headElement = document.getElementById(id)
+                    if (headElement) {
+                        const tabElement = hasTopClosestByClassName(headElement, "protyle")
+                        if (tabElement) {
+                            const tab = getInstanceById(tabElement.getAttribute("data-id")) as Tab
+                            tab.parent.switchTab(tab.headElement)
+                        }
+                        headElement.scrollIntoView();
+                    } else {
+                        openFileById({
+                            app: options.app,
+                            id:  this.blockId,
+                            mode: "preview",
+                        });
+                    }
                 } else {
                     fetchPost("/api/attr/getBlockAttrs", {id}, (attrResponse) => {
                         openFileById({
@@ -177,11 +193,20 @@ export class Outline extends Model {
             }
         });
 
-        fetchPost("/api/outline/getDocOutline", {
-            id: this.blockId,
-        }, response => {
-            this.update(response);
-        });
+        if (this.isPreview) {
+            fetchPost("/api/export/preview", {
+                id: this.blockId,
+            }, response => {
+                response.data = response.data.outline;
+                this.update(response);
+            });
+        } else {
+            fetchPost("/api/outline/getDocOutline", {
+                id: this.blockId,
+            }, response => {
+                this.update(response);
+            });
+        }
     }
 
     public updateDocTitle(ial?: IObject) {
diff --git a/app/src/layout/dock/index.ts b/app/src/layout/dock/index.ts
index 93a0079f3..3d53f1c74 100644
--- a/app/src/layout/dock/index.ts
+++ b/app/src/layout/dock/index.ts
@@ -376,6 +376,7 @@ export class Dock {
                                     type: "pin",
                                     tab,
                                     blockId: editor?.protyle?.block?.rootID,
+                                    isPreview: !editor?.protyle?.preview?.element.classList.contains("fn__none")
                                 });
                                 if (editor?.protyle?.title?.editElement) {
                                     outline.updateDocTitle(editor.protyle?.background?.ial);
diff --git a/app/src/layout/dock/util.ts b/app/src/layout/dock/util.ts
index 27f26c810..16443d05f 100644
--- a/app/src/layout/dock/util.ts
+++ b/app/src/layout/dock/util.ts
@@ -80,6 +80,7 @@ export const openOutline = (protyle: IProtyle) => {
                 type: "local",
                 tab,
                 blockId: protyle.block.rootID,
+                isPreview: !protyle.preview.element.classList.contains("fn__none")
             }));
         }
     });
diff --git a/app/src/layout/util.ts b/app/src/layout/util.ts
index 11da50ca9..3188d3dbe 100644
--- a/app/src/layout/util.ts
+++ b/app/src/layout/util.ts
@@ -366,6 +366,7 @@ export const JSONToCenter = (app: App, json: ILayoutJSON, layout?: Layout | Wnd
             tab: (layout as Tab),
             blockId: json.blockId,
             type: json.type as "pin" | "local",
+            isPreview: json.isPreview,
         }));
     } else if (json.instance === "Tag") {
         (layout as Tab).addModel(new Tag(app, (layout as Tab)));
@@ -522,6 +523,7 @@ export const layoutToJSON = (layout: Layout | Wnd | Tab | Model, json: any, drop
     } else if (layout instanceof Outline) {
         json.blockId = layout.blockId;
         json.type = layout.type;
+        json.isPreview = layout.isPreview;
         json.instance = "Outline";
     } else if (layout instanceof Tag) {
         json.instance = "Tag";
@@ -710,7 +712,8 @@ export const copyTab = (app: App, tab: Tab) => {
                     app,
                     tab: newTab,
                     blockId: tab.model.blockId,
-                    type: tab.model.type
+                    type: tab.model.type,
+                    isPreview: tab.model.isPreview
                 });
             } else if (tab.model instanceof Backlink) {
                 model = new Backlink({
diff --git a/app/src/types/index.d.ts b/app/src/types/index.d.ts
index 54e6321fd..e4c554d33 100644
--- a/app/src/types/index.d.ts
+++ b/app/src/types/index.d.ts
@@ -308,6 +308,7 @@ interface ILayoutJSON extends ILayoutOptions {
     rootId?: string
     active?: boolean
     pin?: boolean
+    isPreview?: boolean
     customModelData?: any
     customModelType?: string
     config?: ISearchOption