diff --git a/.vscode/settings.json b/.vscode/settings.json
index 774dc4f5..f962b244 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,6 +31,7 @@
   "unocss.root": [
     "./docs",
     "./packages/vitepress-plugin-enhanced-readabilities",
-    "./packages/vitepress-plugin-inline-link-preview"
+    "./packages/vitepress-plugin-inline-link-preview",
+    "./packages/sidecar-annotations"
   ]
 }
diff --git a/docs/.vitepress/plugins/markdownTransform.ts b/docs/.vitepress/plugins/markdownTransform.ts
new file mode 100644
index 00000000..67f0dca7
--- /dev/null
+++ b/docs/.vitepress/plugins/markdownTransform.ts
@@ -0,0 +1,21 @@
+import { relative, resolve } from 'node:path'
+import type { Plugin } from 'vite'
+
+const ROOT = resolve(__dirname, '../../')
+
+export function MarkdownTransform(): Plugin {
+  return {
+    name: 'docs-md-transform',
+    enforce: 'pre',
+    async transform(code, id) {
+      if (!id.endsWith('.md'))
+        return null
+
+      // 将 ID 转换为相对路径，便于进行正则匹配
+      id = relative(ROOT, id)
+      code = `${code}\n\n<CommentAnnotation />`
+
+      return code
+    },
+  }
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index cff79842..cdbdd3c2 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -14,10 +14,15 @@ import {
   NolebaseInlineLinkPreviewPlugin,
 } from '@nolebase/vitepress-plugin-inline-link-preview'
 
+import {
+  CommentAnnotation,
+} from '@nolebase/sidecar-annotations'
+
 import 'virtual:uno.css'
 
 import '@nolebase/vitepress-plugin-enhanced-readabilities/dist/style.css'
 import '@nolebase/vitepress-plugin-inline-link-preview/dist/style.css'
+import '@nolebase/sidecar-annotations/dist/style.css'
 
 import './styles/vars.css'
 import './styles/main.css'
@@ -38,6 +43,7 @@ export const Theme: ThemeConfig = {
   },
   enhanceApp({ app }) {
     app.component('IntegrationCard', IntegrationCard)
+    app.component('CommentAnnotation', CommentAnnotation)
     app.use(NolebaseInlineLinkPreviewPlugin)
     app.provide(NolebaseEnhancedReadabilitiesInjectionKey, {
       layoutSwitch: {
diff --git a/docs/package.json b/docs/package.json
index 5725ffb8..986e49d0 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -14,6 +14,7 @@
     "@iconify-json/octicon": "^1.1.49",
     "@nolebase/markdown-it-bi-directional-links": "workspace:^",
     "@nolebase/markdown-it-element-transform": "workspace:^",
+    "@nolebase/sidecar-annotations": "workspace:^",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "workspace:^",
     "@nolebase/vitepress-plugin-inline-link-preview": "workspace:^",
     "unocss": "^0.55.7",
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index ef13c97c..8f76b4b8 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from 'vite'
 import UnoCSS from 'unocss/vite'
+import { MarkdownTransform } from './.vitepress/plugins/markdownTransform'
 
 export default defineConfig(async () => {
   return {
@@ -9,6 +10,7 @@ export default defineConfig(async () => {
     },
     plugins: [
       UnoCSS(),
+      MarkdownTransform(),
     ],
   }
 })
diff --git a/packages/sidecar-annotations/README.md b/packages/sidecar-annotations/README.md
new file mode 100644
index 00000000..cfdffb9a
--- /dev/null
+++ b/packages/sidecar-annotations/README.md
@@ -0,0 +1,27 @@
+# `@nolebase/vitepress-plugin-inline-link-preview`
+
+A VitePress plugin that adds a inline popup to help you preview links while reading.
+
+## Install
+
+### Npm
+
+```shell
+npm i @nolebase/vitepress-plugin-inline-link-preview
+```
+
+### Yarn
+
+```shell
+yarn add @nolebase/vitepress-plugin-inline-link-preview
+```
+
+### Pnpm
+
+```shell
+pnpm add @nolebase/vitepress-plugin-inline-link-preview
+```
+
+## Documentation
+
+Please refer to [Inline Links Previewing](https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-inline-link-preview/) for more information.
diff --git a/packages/sidecar-annotations/package.json b/packages/sidecar-annotations/package.json
new file mode 100644
index 00000000..42f91007
--- /dev/null
+++ b/packages/sidecar-annotations/package.json
@@ -0,0 +1,63 @@
+{
+  "name": "@nolebase/sidecar-annotations",
+  "type": "module",
+  "version": "1.1.1",
+  "description": "A VitePress plugin that adds a inline popup to help you preview links while reading.",
+  "author": {
+    "name": "Nólëbase",
+    "email": "nolebase@ayaka.moe",
+    "url": "https://github.com/nolebase"
+  },
+  "license": "MIT",
+  "homepage": "https://nolebase-integrations.ayaka.io/pages/en/integrations/vitepress-plugin-inline-link-preview/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nolebase/integrations.git",
+    "directory": "packages/vitepress-plugin-inline-link-preview"
+  },
+  "keywords": [
+    "vitepress",
+    "nolebase",
+    "a11y",
+    "readabilities",
+    "markdown",
+    "vitepress-plugin",
+    "nolebase-integration"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "main": "./dist/index.umd.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "stub": "concurrently \"nr dev\" \"nr emit-types\"",
+    "dev": "vite build --mode development --watch",
+    "emit-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
+  },
+  "peerDependencies": {
+    "vue": ">=3.2.0"
+  },
+  "devDependencies": {
+    "@iconify-json/tabler": "^1.1.92",
+    "@vitejs/plugin-vue": "^4.3.4",
+    "@vueuse/core": "^10.4.1",
+    "less": "^4.2.0",
+    "unocss": "^0.55.7",
+    "vite": "^4.4.9",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.11"
+  }
+}
diff --git a/packages/sidecar-annotations/src/components/CommentAnnotationItem.vue b/packages/sidecar-annotations/src/components/CommentAnnotationItem.vue
new file mode 100644
index 00000000..29b2b659
--- /dev/null
+++ b/packages/sidecar-annotations/src/components/CommentAnnotationItem.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import FloatingUserAvatar from './FloatingUserAvatar.vue'
+
+const props = defineProps<{
+  element: HTMLElement
+}>()
+
+const commentUsers = ref<{
+  id: number
+  avatarUrl: string
+}[]>([
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+  {
+    id: 1,
+    avatarUrl: 'https://source.unsplash.com/random',
+  },
+])
+
+</script>
+
+<template>
+  <Teleport :to="props.element">
+    <button
+      class="sidecar-annotations-comments sidecar-annotations-comments-show-comment-btn"
+      :style="{
+        width: `${(commentUsers.length - 1) * 1 + 1.5}rem`,
+      }"
+      aria-hidden="true"
+      focusable="false"
+      absolute
+      rounded-full flex
+      h-5
+    >
+      <FloatingUserAvatar
+        v-for="(user, index) of commentUsers"
+        :key="index"
+        :src="user.avatarUrl"
+        :style="{
+          order: `${index + 1}`,
+          'margin-left': `${index === 0 ? 0 : -0.5}rem`,
+        }"
+      />
+    </button>
+    <!-- <button
+      :style="boxStyles"
+      aria-hidden="true"
+      focusable="false"
+      fixed z-50
+      class="sidecar-annotations-controls"
+      p-1.5
+      rounded-full
+      shadow="md hover:lg active:sm"
+      bg="white"
+      border="1 solid zinc-100"
+      items-center justify-center
+    >
+      <div class="sidecar-annotations-control-comment i-tabler:message-circle-plus" w-5 h-5 />
+    </button> -->
+  </Teleport>
+</template>
+
+<style>
+.VPDoc .container .content .content-container main .vp-doc > div > * {
+  position: relative;
+}
+
+.VPDoc .container .content .content-container main .vp-doc div[class*='language-'], .vp-block {
+  overflow-x: unset;
+}
+
+.VPDoc .container .content .content-container main .vp-doc > div .sidecar-annotations-comments-show-comment-btn {
+  top: 0;
+  left: -60px;
+}
+
+.VPDoc .container .content .content-container main .vp-doc > div > h2 .sidecar-annotations-comments-show-comment-btn {
+  top: 24px;
+}
+</style>
diff --git a/packages/sidecar-annotations/src/components/CommentAnnotations.vue b/packages/sidecar-annotations/src/components/CommentAnnotations.vue
new file mode 100644
index 00000000..807400bf
--- /dev/null
+++ b/packages/sidecar-annotations/src/components/CommentAnnotations.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref, Teleport, onMounted, computed, watchEffect } from 'vue'
+
+import CommentAnnotationItem from './CommentAnnotationItem.vue'
+
+const vpDocElement = ref<HTMLDivElement>()
+
+onMounted(() => {
+  vpDocElement.value = document.querySelector('.VPDoc .container .content .content-container main .vp-doc > div') as HTMLDivElement
+})
+
+const elements = computed<HTMLElement[]>(() => {
+  if (vpDocElement.value?.children) {
+    return Array.
+      from(vpDocElement.value?.children).
+      filter(element => ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'].indexOf(element.tagName) === -1).
+      map((element) => element as HTMLElement)
+  }
+
+  return [] as HTMLElement[]
+})
+
+watchEffect(() => {
+  console.log(elements.value)
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="sidecar-annotations-comments-teleport-container">
+      <CommentAnnotationItem v-for="(element, index) of elements || []" :key="index" :element="element" />
+    </div>
+  </Teleport>
+</template>
diff --git a/packages/sidecar-annotations/src/components/FloatingUserAvatar.vue b/packages/sidecar-annotations/src/components/FloatingUserAvatar.vue
new file mode 100644
index 00000000..894d1812
--- /dev/null
+++ b/packages/sidecar-annotations/src/components/FloatingUserAvatar.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  src: string
+}>()
+</script>
+
+<template>
+  <img
+    class="sidecar-annotations-comments user-avatar"
+    :src="props.src"
+    w-5 h-5 rounded-full max-w-none p-0.5
+    bg="white dark:zinc-600"
+  shadow-md
+  />
+</template>
diff --git a/packages/sidecar-annotations/src/index.ts b/packages/sidecar-annotations/src/index.ts
new file mode 100644
index 00000000..f9aa0b89
--- /dev/null
+++ b/packages/sidecar-annotations/src/index.ts
@@ -0,0 +1,7 @@
+import CommentAnnotation from './components/CommentAnnotations.vue'
+
+import 'virtual:uno.css'
+
+export {
+  CommentAnnotation,
+}
diff --git a/packages/sidecar-annotations/tsconfig.json b/packages/sidecar-annotations/tsconfig.json
new file mode 100644
index 00000000..7da3a46f
--- /dev/null
+++ b/packages/sidecar-annotations/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.json",
+  "exclude": [
+    "**/dist/**",
+    "./uno.config.ts",
+    "./vite.config.ts"
+  ],
+  "include": [
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.vue",
+    "**/*.tsx"
+  ],
+  "compilerOptions": {
+    "declaration": false,
+    "composite": false,
+    "outDir": "./dist",
+    "noImplicitAny": false,
+    "skipLibCheck": true,
+    "types": []
+  },
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/packages/sidecar-annotations/tsconfig.node.json b/packages/sidecar-annotations/tsconfig.node.json
new file mode 100644
index 00000000..775b584f
--- /dev/null
+++ b/packages/sidecar-annotations/tsconfig.node.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}
diff --git a/packages/sidecar-annotations/uno.config.ts b/packages/sidecar-annotations/uno.config.ts
new file mode 100644
index 00000000..a3630248
--- /dev/null
+++ b/packages/sidecar-annotations/uno.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'
+
+export default defineConfig({
+  shortcuts: [],
+  presets: [
+    presetUno({
+      dark: 'class',
+    }),
+    presetAttributify(),
+    presetIcons({
+      prefix: 'i-',
+      scale: 1.2, // size: 1.2 rem
+      extraProperties: {
+        'display': 'inline-block',
+        'vertical-align': 'middle',
+        'min-width': '1.2rem',
+      },
+      warn: true,
+    }),
+  ],
+})
diff --git a/packages/sidecar-annotations/vite.config.ts b/packages/sidecar-annotations/vite.config.ts
new file mode 100644
index 00000000..9759fdf6
--- /dev/null
+++ b/packages/sidecar-annotations/vite.config.ts
@@ -0,0 +1,33 @@
+import Vue from '@vitejs/plugin-vue'
+import { defineConfig } from 'vite'
+import Unocss from 'unocss/vite'
+
+export default defineConfig({
+  resolve: {
+    dedupe: [
+      'vue',
+      '@vue/runtime-core',
+    ],
+  },
+  plugins: [
+    Vue(),
+    Unocss(),
+  ],
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: '@nolebase/sidecar-annotations',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: [
+        'vue',
+      ],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})
diff --git a/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue b/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue
index c29e2ec8..4970c7ee 100644
--- a/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue
+++ b/packages/vitepress-plugin-enhanced-readabilities/src/components/SpotlightHoverBlock.vue
@@ -129,7 +129,6 @@ watch(() => props.enabled, (val) => {
       focusable="false"
       fixed z-50
       pointer-events-none
-      border="1 $vp-c-brand"
       class="VPNolebaseSpotlightHoverBlock"
     />
   </Teleport>
diff --git a/packages/vitepress-plugin-inline-link-preview/src/components/PopupIframe.vue b/packages/vitepress-plugin-inline-link-preview/src/components/PopupIframe.vue
index 26945e51..eaf8f11d 100644
--- a/packages/vitepress-plugin-inline-link-preview/src/components/PopupIframe.vue
+++ b/packages/vitepress-plugin-inline-link-preview/src/components/PopupIframe.vue
@@ -71,7 +71,7 @@ async function handleIframeOnLoad(e: Event) {
 
   setTimeout(() => {
     iframeNotReady.value = false
-  }, 250)
+  }, 100)
 }
 </script>
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1bc8a69..104b661e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -63,6 +63,9 @@ importers:
       '@nolebase/markdown-it-element-transform':
         specifier: workspace:^
         version: link:../packages/markdown-it-element-transform
+      '@nolebase/sidecar-annotations':
+        specifier: workspace:^
+        version: link:../packages/sidecar-annotations
       '@nolebase/vitepress-plugin-enhanced-readabilities':
         specifier: workspace:^
         version: link:../packages/vitepress-plugin-enhanced-readabilities
@@ -101,6 +104,33 @@ importers:
         specifier: ^13.0.1
         version: 13.0.1
 
+  packages/sidecar-annotations:
+    devDependencies:
+      '@iconify-json/tabler':
+        specifier: ^1.1.92
+        version: 1.1.92
+      '@vitejs/plugin-vue':
+        specifier: ^4.3.4
+        version: 4.3.4(vite@4.4.9)(vue@3.3.4)
+      '@vueuse/core':
+        specifier: ^10.4.1
+        version: 10.4.1(vue@3.3.4)
+      less:
+        specifier: ^4.2.0
+        version: 4.2.0
+      unocss:
+        specifier: ^0.55.7
+        version: 0.55.7(postcss@8.4.28)(rollup@3.28.1)(vite@4.4.9)
+      vite:
+        specifier: ^4.4.9
+        version: 4.4.9(@types/node@20.6.0)(less@4.2.0)
+      vue:
+        specifier: ^3.3.4
+        version: 3.3.4
+      vue-tsc:
+        specifier: ^1.8.11
+        version: 1.8.11(typescript@5.1.6)
+
   packages/vitepress-plugin-enhanced-readabilities:
     devDependencies:
       '@iconify-json/carbon':
@@ -1192,6 +1222,12 @@ packages:
       '@iconify/types': 2.0.0
     dev: true
 
+  /@iconify-json/tabler@1.1.92:
+    resolution: {integrity: sha512-zZD5uSYz6uNZ/qh9T4l3BObTq03A7NcY+9dV4jVgYhdw9fc7JZmFFA7rJkybfHHrlDRq548hmDCmEJuR9blLdg==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: true
+
   /@iconify/types@2.0.0:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true