diff --git a/src/renderer/components/Preview.vue b/src/renderer/components/Preview.vue
index e1a39ca4..522fcaf9 100644
--- a/src/renderer/components/Preview.vue
+++ b/src/renderer/components/Preview.vue
@@ -17,8 +17,13 @@
         </div>
       </div>
     </div>
-    <div class="outline">
-      <div style="padding: .5em;"><b>目录</b></div>
+    <div :class="{outline: true, pined: pinOutline}">
+      <div class="outline-title">
+        <b>目录</b>
+        <div class="outline-pin" @click="togglePinOutline">
+          <SvgIcon style="width: 12px; height: 12px" name="thumbtack" />
+        </div>
+      </div>
       <div class="catalog" :style="{maxHeight: `min(${(height - 120) + 'px'}, 70vh)`}">
         <div v-for="(head, index) in heads" :key="index" :style="{paddingLeft: `${head.level + 1}em`}" @click="syncScroll(head.sourceLine)">
           {{ head.text }}
@@ -45,6 +50,7 @@ import { useBus } from '@fe/support/bus'
 import { getActionHandler, registerAction, removeAction } from '@fe/context/action'
 import { revealLineInCenter } from '@fe/context/editor'
 import Render from './Render.vue'
+import SvgIcon from './SvgIcon.vue'
 
 import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/atom-one-dark.css'
@@ -52,11 +58,12 @@ import 'katex/dist/katex.min.css'
 
 export default defineComponent({
   name: 'xview',
-  components: { Render },
+  components: { Render, SvgIcon },
   setup () {
     const bus = useBus()
     const store = useStore()
 
+    const pinOutline = ref(false)
     const { currentContent, currentFile, autoPreview, presentation } = toRefs(store.state)
     const fileName = computed(() => currentFile.value?.name)
     const filePath = computed(() => currentFile.value?.path)
@@ -83,6 +90,10 @@ export default defineComponent({
       bottom: `max(100vh - ${height.value - (isElectron ? 0 : 20)}px, 40px)`
     }))
 
+    function togglePinOutline () {
+      pinOutline.value = !pinOutline.value
+    }
+
     function resizeHandler () {
       width.value = refViewWrapper.value!.clientWidth
       height.value = refViewWrapper.value!.clientHeight
@@ -222,6 +233,7 @@ export default defineComponent({
     })
 
     return {
+      pinOutline,
       refViewWrapper,
       refView,
       presentation,
@@ -232,6 +244,7 @@ export default defineComponent({
       heads,
       todoCount,
       todoDoneCount,
+      togglePinOutline,
       scrollTop,
       print,
       showExport,
@@ -313,6 +326,7 @@ export default defineComponent({
   margin-top: 1em;
 }
 
+.outline.pined,
 .outline:hover {
   max-height: 75vh;
   max-width: 20em;
@@ -338,6 +352,40 @@ export default defineComponent({
   background: var(--g-color-75);
 }
 
+.outline-title {
+  padding: .5em;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.outline-pin {
+  width: 20px;
+  height: 20px;
+  overflow: hidden;
+  transition: left .1s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 50%;
+  left: 40px;
+  color: var(--g-color-20);
+
+  &:hover {
+    background: var(--g-color-75);
+  }
+}
+
+.outline:hover .outline-pin,
+.outline.pined .outline-pin {
+  left: 3px;
+}
+
+.outline.pined .outline-pin {
+  background: var(--g-color-70);
+}
+
 .action-btns {
   font-size: 14px;
   pointer-events: initial;
diff --git a/src/renderer/components/SvgIcon.vue b/src/renderer/components/SvgIcon.vue
index 3d44a6d1..736a8cd4 100644
--- a/src/renderer/components/SvgIcon.vue
+++ b/src/renderer/components/SvgIcon.vue
@@ -24,6 +24,7 @@ export default defineComponent({
       clipboard: '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="clipboard" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-clipboard fa-w-12"><path fill="currentColor" d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" class=""></path></svg>',
       'chevron-down': '<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-chevron-down fa-w-14"><path fill="currentColor" d="M441.9 167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L224 328.2 42.9 147.5c-4.7-4.7-12.3-4.7-17 0L6.1 167.3c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z" class=""></path></svg>',
       terminal: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="terminal" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" class="svg-inline--fa fa-terminal fa-w-20"><path fill="currentColor" d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z" class=""></path></svg>',
+      thumbtack: '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="thumbtack" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" class="svg-inline--fa fa-thumbtack fa-w-12"><path fill="currentColor" d="M298.028 214.267L285.793 96H328c13.255 0 24-10.745 24-24V24c0-13.255-10.745-24-24-24H56C42.745 0 32 10.745 32 24v48c0 13.255 10.745 24 24 24h42.207L85.972 214.267C37.465 236.82 0 277.261 0 328c0 13.255 10.745 24 24 24h136v104.007c0 1.242.289 2.467.845 3.578l24 48c2.941 5.882 11.364 5.893 14.311 0l24-48a8.008 8.008 0 0 0 .845-3.578V352h136c13.255 0 24-10.745 24-24-.001-51.183-37.983-91.42-85.973-113.733z" class=""></path></svg>',
     }
 
     const html = ref(icons[props.name!])