diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 1199fade4..3aa24df10 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -35,6 +35,7 @@
     "@blocksuite/affine-fragment-outline": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
+    "@blocksuite/affine-inline-footnote": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
     "@blocksuite/affine-inline-preset": "workspace:*",
     "@blocksuite/affine-inline-reference": "workspace:*",
@@ -97,6 +98,7 @@
     "./inlines/link": "./src/inlines/link.ts",
     "./inlines/reference": "./src/inlines/reference.ts",
     "./inlines/preset": "./src/inlines/preset.ts",
+    "./inlines/footnote": "./src/inlines/footnote.ts",
     "./widgets/drag-handle": "./src/widgets/drag-handle.ts",
     "./widgets/edgeless-auto-connect": "./src/widgets/edgeless-auto-connect.ts",
     "./widgets/frame-title": "./src/widgets/frame-title.ts",
diff --git a/blocksuite/affine/all/src/effects.ts b/blocksuite/affine/all/src/effects.ts
index 5dcba51ca..faac554d3 100644
--- a/blocksuite/affine/all/src/effects.ts
+++ b/blocksuite/affine/all/src/effects.ts
@@ -45,6 +45,7 @@ import { effects as componentViewDropdownMenuEffects } from '@blocksuite/affine-
 import { effects as fragmentDocTitleEffects } from '@blocksuite/affine-fragment-doc-title/effects';
 import { effects as fragmentFramePanelEffects } from '@blocksuite/affine-fragment-frame-panel/effects';
 import { effects as fragmentOutlineEffects } from '@blocksuite/affine-fragment-outline/effects';
+import { effects as inlineFootnoteEffects } from '@blocksuite/affine-inline-footnote/effects';
 import { effects as inlineLinkEffects } from '@blocksuite/affine-inline-link/effects';
 import { effects as inlinePresetEffects } from '@blocksuite/affine-inline-preset/effects';
 import { effects as inlineReferenceEffects } from '@blocksuite/affine-inline-reference/effects';
@@ -119,6 +120,7 @@ export function effects() {
   inlineReferenceEffects();
   inlinePresetEffects();
   inlineLinkEffects();
+  inlineFootnoteEffects();
 
   blockNoteEffects();
   blockAttachmentEffects();
diff --git a/blocksuite/affine/all/src/inlines/footnote.ts b/blocksuite/affine/all/src/inlines/footnote.ts
new file mode 100644
index 000000000..97bb84fb3
--- /dev/null
+++ b/blocksuite/affine/all/src/inlines/footnote.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-inline-footnote';
diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json
index 6a8ab64ee..2c5175220 100644
--- a/blocksuite/affine/all/tsconfig.json
+++ b/blocksuite/affine/all/tsconfig.json
@@ -32,6 +32,7 @@
     { "path": "../fragments/fragment-outline" },
     { "path": "../gfx/text" },
     { "path": "../gfx/turbo-renderer" },
+    { "path": "../inlines/footnote" },
     { "path": "../inlines/link" },
     { "path": "../inlines/preset" },
     { "path": "../inlines/reference" },
diff --git a/blocksuite/affine/inlines/footnote/package.json b/blocksuite/affine/inlines/footnote/package.json
new file mode 100644
index 000000000..e1d31d23b
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@blocksuite/affine-inline-footnote",
+  "description": "Inline footnote for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-inline-reference": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/block-std": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.6",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "collapse-white-space": "^2.1.0",
+    "date-fns": "^4.0.0",
+    "lit": "^3.2.0",
+    "lit-html": "^3.2.1",
+    "lodash-es": "^4.17.21",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}
diff --git a/blocksuite/affine/inlines/footnote/src/adapters/index.ts b/blocksuite/affine/inlines/footnote/src/adapters/index.ts
new file mode 100644
index 000000000..726403984
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/adapters/index.ts
@@ -0,0 +1,2 @@
+export * from './markdown/inline-delta';
+export * from './markdown/markdown-inline';
diff --git a/blocksuite/affine/inlines/footnote/src/adapters/markdown/inline-delta.ts b/blocksuite/affine/inlines/footnote/src/adapters/markdown/inline-delta.ts
new file mode 100644
index 000000000..bbef17df0
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/adapters/markdown/inline-delta.ts
@@ -0,0 +1,45 @@
+import {
+  FOOTNOTE_DEFINITION_PREFIX,
+  InlineDeltaToMarkdownAdapterExtension,
+} from '@blocksuite/affine-shared/adapters';
+import type { PhrasingContent } from 'mdast';
+
+export const footnoteReferenceDeltaToMarkdownAdapterMatcher =
+  InlineDeltaToMarkdownAdapterExtension({
+    name: 'footnote-reference',
+    match: delta => !!delta.attributes?.footnote,
+    toAST: (delta, context) => {
+      const mdast: PhrasingContent = {
+        type: 'text',
+        value: delta.insert,
+      };
+      const footnote = delta.attributes?.footnote;
+      if (!footnote) {
+        return mdast;
+      }
+      const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${footnote.label}`;
+      const { configs } = context;
+      // FootnoteReference should be paired with FootnoteDefinition
+      // If the footnoteDefinition is not in the configs, set it to configs
+      // We should add the footnoteDefinition markdown ast nodes to tree after all the footnoteReference markdown ast nodes are added
+      if (!configs.has(footnoteDefinitionKey)) {
+        // clone the footnote reference
+        const clonedFootnoteReference = { ...footnote.reference };
+        // If the footnote reference contains url, encode it
+        if (clonedFootnoteReference.url) {
+          clonedFootnoteReference.url = encodeURIComponent(
+            clonedFootnoteReference.url
+          );
+        }
+        configs.set(
+          footnoteDefinitionKey,
+          JSON.stringify(clonedFootnoteReference)
+        );
+      }
+      return {
+        type: 'footnoteReference',
+        label: footnote.label,
+        identifier: footnote.label,
+      };
+    },
+  });
diff --git a/blocksuite/affine/inlines/footnote/src/adapters/markdown/markdown-inline.ts b/blocksuite/affine/inlines/footnote/src/adapters/markdown/markdown-inline.ts
new file mode 100644
index 000000000..c1d3da472
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/adapters/markdown/markdown-inline.ts
@@ -0,0 +1,42 @@
+import { FootNoteReferenceParamsSchema } from '@blocksuite/affine-model';
+import {
+  FOOTNOTE_DEFINITION_PREFIX,
+  MarkdownASTToDeltaExtension,
+} from '@blocksuite/affine-shared/adapters';
+
+export const markdownFootnoteReferenceToDeltaMatcher =
+  MarkdownASTToDeltaExtension({
+    name: 'footnote-reference',
+    match: ast => ast.type === 'footnoteReference',
+    toDelta: (ast, context) => {
+      if (ast.type !== 'footnoteReference') {
+        return [];
+      }
+      try {
+        const { configs } = context;
+        const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${ast.identifier}`;
+        const footnoteDefinition = configs.get(footnoteDefinitionKey);
+        if (!footnoteDefinition) {
+          return [];
+        }
+        const footnoteDefinitionJson = JSON.parse(footnoteDefinition);
+        // If the footnote definition contains url, decode it
+        if (footnoteDefinitionJson.url) {
+          footnoteDefinitionJson.url = decodeURIComponent(
+            footnoteDefinitionJson.url
+          );
+        }
+        const footnoteReference = FootNoteReferenceParamsSchema.parse(
+          footnoteDefinitionJson
+        );
+        const footnote = {
+          label: ast.identifier,
+          reference: footnoteReference,
+        };
+        return [{ insert: ' ', attributes: { footnote } }];
+      } catch (error) {
+        console.warn('Error parsing footnote reference', error);
+        return [];
+      }
+    },
+  });
diff --git a/blocksuite/affine/inlines/footnote/src/effects.ts b/blocksuite/affine/inlines/footnote/src/effects.ts
new file mode 100644
index 000000000..31c40e5b3
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/effects.ts
@@ -0,0 +1,17 @@
+import { AffineFootnoteNode } from './footnote-node/footnote-node';
+import { FootNotePopup } from './footnote-node/footnote-popup';
+import { FootNotePopupChip } from './footnote-node/footnote-popup-chip';
+
+export function effects() {
+  customElements.define('affine-footnote-node', AffineFootnoteNode);
+  customElements.define('footnote-popup', FootNotePopup);
+  customElements.define('footnote-popup-chip', FootNotePopupChip);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'affine-footnote-node': AffineFootnoteNode;
+    'footnote-popup': FootNotePopup;
+    'footnote-popup-chip': FootNotePopupChip;
+  }
+}
diff --git a/blocksuite/affine/inlines/footnote/src/exts.ts b/blocksuite/affine/inlines/footnote/src/exts.ts
new file mode 100644
index 000000000..da1cf14d7
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/exts.ts
@@ -0,0 +1,7 @@
+import type { ExtensionType } from '@blocksuite/store';
+
+import { FootNoteInlineSpecExtension } from './inline-spec';
+
+export const inlineFootnoteExtensions: ExtensionType[] = [
+  FootNoteInlineSpecExtension,
+];
diff --git a/blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-config.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-config.ts
similarity index 100%
rename from blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-config.ts
rename to blocksuite/affine/inlines/footnote/src/footnote-node/footnote-config.ts
diff --git a/blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-node.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-node.ts
similarity index 100%
rename from blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-node.ts
rename to blocksuite/affine/inlines/footnote/src/footnote-node/footnote-node.ts
diff --git a/blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-popup-chip.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup-chip.ts
similarity index 100%
rename from blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-popup-chip.ts
rename to blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup-chip.ts
diff --git a/blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-popup.ts b/blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts
similarity index 100%
rename from blocksuite/affine/inlines/preset/src/nodes/footnote-node/footnote-popup.ts
rename to blocksuite/affine/inlines/footnote/src/footnote-node/footnote-popup.ts
diff --git a/blocksuite/affine/inlines/preset/src/nodes/index.ts b/blocksuite/affine/inlines/footnote/src/index.ts
similarity index 59%
rename from blocksuite/affine/inlines/preset/src/nodes/index.ts
rename to blocksuite/affine/inlines/footnote/src/index.ts
index 36ac32824..85ebab02a 100644
--- a/blocksuite/affine/inlines/preset/src/nodes/index.ts
+++ b/blocksuite/affine/inlines/footnote/src/index.ts
@@ -1,2 +1,5 @@
+export * from './adapters';
+export * from './exts';
 export * from './footnote-node/footnote-config.js';
 export { AffineFootnoteNode } from './footnote-node/footnote-node.js';
+export * from './inline-spec';
diff --git a/blocksuite/affine/inlines/footnote/src/inline-spec.ts b/blocksuite/affine/inlines/footnote/src/inline-spec.ts
new file mode 100644
index 000000000..14ad235af
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/src/inline-spec.ts
@@ -0,0 +1,29 @@
+import { FootNoteSchema } from '@blocksuite/affine-model';
+import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
+import { StdIdentifier } from '@blocksuite/block-std';
+import { InlineSpecExtension } from '@blocksuite/block-std/inline';
+import { html } from 'lit';
+
+import { FootNoteNodeConfigIdentifier } from './footnote-node/footnote-config';
+
+export const FootNoteInlineSpecExtension =
+  InlineSpecExtension<AffineTextAttributes>('footnote', provider => {
+    const std = provider.get(StdIdentifier);
+    const config =
+      provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
+    return {
+      name: 'footnote',
+      schema: FootNoteSchema.optional().nullable().catch(undefined),
+      match: delta => {
+        return !!delta.attributes?.footnote;
+      },
+      renderer: ({ delta }) => {
+        return html`<affine-footnote-node
+          .delta=${delta}
+          .std=${std}
+          .config=${config}
+        ></affine-footnote-node>`;
+      },
+      embed: true,
+    };
+  });
diff --git a/blocksuite/affine/inlines/footnote/tsconfig.json b/blocksuite/affine/inlines/footnote/tsconfig.json
new file mode 100644
index 000000000..90cfdb609
--- /dev/null
+++ b/blocksuite/affine/inlines/footnote/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../components" },
+    { "path": "../reference" },
+    { "path": "../../model" },
+    { "path": "../../shared" },
+    { "path": "../../../framework/block-std" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/store" }
+  ]
+}
diff --git a/blocksuite/affine/inlines/preset/package.json b/blocksuite/affine/inlines/preset/package.json
index 64c319054..c5406769e 100644
--- a/blocksuite/affine/inlines/preset/package.json
+++ b/blocksuite/affine/inlines/preset/package.json
@@ -11,6 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-inline-footnote": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
     "@blocksuite/affine-inline-reference": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
diff --git a/blocksuite/affine/inlines/preset/src/adapters/markdown/inline-delta.ts b/blocksuite/affine/inlines/preset/src/adapters/markdown/inline-delta.ts
index b46f55a6d..c2d5b47e1 100644
--- a/blocksuite/affine/inlines/preset/src/adapters/markdown/inline-delta.ts
+++ b/blocksuite/affine/inlines/preset/src/adapters/markdown/inline-delta.ts
@@ -1,9 +1,7 @@
+import { footnoteReferenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-footnote';
 import { linkDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-link';
 import { referenceDeltaToMarkdownAdapterMatcher } from '@blocksuite/affine-inline-reference';
-import {
-  FOOTNOTE_DEFINITION_PREFIX,
-  InlineDeltaToMarkdownAdapterExtension,
-} from '@blocksuite/affine-shared/adapters';
+import { InlineDeltaToMarkdownAdapterExtension } from '@blocksuite/affine-shared/adapters';
 import type { PhrasingContent } from 'mdast';
 import type RemarkMath from 'remark-math';
 
@@ -77,46 +75,6 @@ export const latexDeltaToMarkdownAdapterMatcher =
     },
   });
 
-export const footnoteReferenceDeltaToMarkdownAdapterMatcher =
-  InlineDeltaToMarkdownAdapterExtension({
-    name: 'footnote-reference',
-    match: delta => !!delta.attributes?.footnote,
-    toAST: (delta, context) => {
-      const mdast: PhrasingContent = {
-        type: 'text',
-        value: delta.insert,
-      };
-      const footnote = delta.attributes?.footnote;
-      if (!footnote) {
-        return mdast;
-      }
-      const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${footnote.label}`;
-      const { configs } = context;
-      // FootnoteReference should be paired with FootnoteDefinition
-      // If the footnoteDefinition is not in the configs, set it to configs
-      // We should add the footnoteDefinition markdown ast nodes to tree after all the footnoteReference markdown ast nodes are added
-      if (!configs.has(footnoteDefinitionKey)) {
-        // clone the footnote reference
-        const clonedFootnoteReference = { ...footnote.reference };
-        // If the footnote reference contains url, encode it
-        if (clonedFootnoteReference.url) {
-          clonedFootnoteReference.url = encodeURIComponent(
-            clonedFootnoteReference.url
-          );
-        }
-        configs.set(
-          footnoteDefinitionKey,
-          JSON.stringify(clonedFootnoteReference)
-        );
-      }
-      return {
-        type: 'footnoteReference',
-        label: footnote.label,
-        identifier: footnote.label,
-      };
-    },
-  });
-
 export const InlineDeltaToMarkdownAdapterExtensions = [
   referenceDeltaToMarkdownAdapterMatcher,
   linkDeltaToMarkdownAdapterMatcher,
diff --git a/blocksuite/affine/inlines/preset/src/adapters/markdown/markdown-inline.ts b/blocksuite/affine/inlines/preset/src/adapters/markdown/markdown-inline.ts
index ea79aa601..6a92aea67 100644
--- a/blocksuite/affine/inlines/preset/src/adapters/markdown/markdown-inline.ts
+++ b/blocksuite/affine/inlines/preset/src/adapters/markdown/markdown-inline.ts
@@ -1,9 +1,6 @@
+import { markdownFootnoteReferenceToDeltaMatcher } from '@blocksuite/affine-inline-footnote';
 import { markdownLinkToDeltaMatcher } from '@blocksuite/affine-inline-link';
-import { FootNoteReferenceParamsSchema } from '@blocksuite/affine-model';
-import {
-  FOOTNOTE_DEFINITION_PREFIX,
-  MarkdownASTToDeltaExtension,
-} from '@blocksuite/affine-shared/adapters';
+import { MarkdownASTToDeltaExtension } from '@blocksuite/affine-shared/adapters';
 
 export const markdownTextToDeltaMatcher = MarkdownASTToDeltaExtension({
   name: 'text',
@@ -92,43 +89,6 @@ export const markdownInlineMathToDeltaMatcher = MarkdownASTToDeltaExtension({
   },
 });
 
-export const markdownFootnoteReferenceToDeltaMatcher =
-  MarkdownASTToDeltaExtension({
-    name: 'footnote-reference',
-    match: ast => ast.type === 'footnoteReference',
-    toDelta: (ast, context) => {
-      if (ast.type !== 'footnoteReference') {
-        return [];
-      }
-      try {
-        const { configs } = context;
-        const footnoteDefinitionKey = `${FOOTNOTE_DEFINITION_PREFIX}${ast.identifier}`;
-        const footnoteDefinition = configs.get(footnoteDefinitionKey);
-        if (!footnoteDefinition) {
-          return [];
-        }
-        const footnoteDefinitionJson = JSON.parse(footnoteDefinition);
-        // If the footnote definition contains url, decode it
-        if (footnoteDefinitionJson.url) {
-          footnoteDefinitionJson.url = decodeURIComponent(
-            footnoteDefinitionJson.url
-          );
-        }
-        const footnoteReference = FootNoteReferenceParamsSchema.parse(
-          footnoteDefinitionJson
-        );
-        const footnote = {
-          label: ast.identifier,
-          reference: footnoteReference,
-        };
-        return [{ insert: ' ', attributes: { footnote } }];
-      } catch (error) {
-        console.warn('Error parsing footnote reference', error);
-        return [];
-      }
-    },
-  });
-
 export const MarkdownInlineToDeltaAdapterExtensions = [
   markdownTextToDeltaMatcher,
   markdownInlineCodeToDeltaMatcher,
diff --git a/blocksuite/affine/inlines/preset/src/default-inline-manager.ts b/blocksuite/affine/inlines/preset/src/default-inline-manager.ts
index 0e8b42a23..f30e971b9 100644
--- a/blocksuite/affine/inlines/preset/src/default-inline-manager.ts
+++ b/blocksuite/affine/inlines/preset/src/default-inline-manager.ts
@@ -1,3 +1,4 @@
+import { FootNoteInlineSpecExtension } from '@blocksuite/affine-inline-footnote';
 import { LinkInlineSpecExtension } from '@blocksuite/affine-inline-link';
 import { ReferenceInlineSpecExtension } from '@blocksuite/affine-inline-reference';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
@@ -8,7 +9,6 @@ import {
   BoldInlineSpecExtension,
   CodeInlineSpecExtension,
   ColorInlineSpecExtension,
-  FootNoteInlineSpecExtension,
   ItalicInlineSpecExtension,
   LatexInlineSpecExtension,
   StrikeInlineSpecExtension,
diff --git a/blocksuite/affine/inlines/preset/src/effects.ts b/blocksuite/affine/inlines/preset/src/effects.ts
index 7f58f2178..16d43674e 100644
--- a/blocksuite/affine/inlines/preset/src/effects.ts
+++ b/blocksuite/affine/inlines/preset/src/effects.ts
@@ -1,7 +1,4 @@
 import { AffineText } from './nodes/affine-text';
-import { AffineFootnoteNode } from './nodes/footnote-node/footnote-node';
-import { FootNotePopup } from './nodes/footnote-node/footnote-popup';
-import { FootNotePopupChip } from './nodes/footnote-node/footnote-popup-chip';
 import { LatexEditorMenu } from './nodes/latex-node/latex-editor-menu';
 import { LatexEditorUnit } from './nodes/latex-node/latex-editor-unit';
 import { AffineLatexNode } from './nodes/latex-node/latex-node';
@@ -11,17 +8,11 @@ export function effects() {
   customElements.define('latex-editor-menu', LatexEditorMenu);
   customElements.define('latex-editor-unit', LatexEditorUnit);
   customElements.define('affine-latex-node', AffineLatexNode);
-  customElements.define('affine-footnote-node', AffineFootnoteNode);
-  customElements.define('footnote-popup', FootNotePopup);
-  customElements.define('footnote-popup-chip', FootNotePopupChip);
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'affine-latex-node': AffineLatexNode;
-    'affine-footnote-node': AffineFootnoteNode;
-    'footnote-popup': FootNotePopup;
-    'footnote-popup-chip': FootNotePopupChip;
     'affine-text': AffineText;
     'latex-editor-unit': LatexEditorUnit;
     'latex-editor-menu': LatexEditorMenu;
diff --git a/blocksuite/affine/inlines/preset/src/index.ts b/blocksuite/affine/inlines/preset/src/index.ts
index 22e36e05c..5436689a8 100644
--- a/blocksuite/affine/inlines/preset/src/index.ts
+++ b/blocksuite/affine/inlines/preset/src/index.ts
@@ -9,4 +9,3 @@ export * from './exts';
 export * from './inline-spec';
 export * from './keymap';
 export * from './markdown';
-export * from './nodes';
diff --git a/blocksuite/affine/inlines/preset/src/inline-spec.ts b/blocksuite/affine/inlines/preset/src/inline-spec.ts
index b7c9cd415..4c2d87844 100644
--- a/blocksuite/affine/inlines/preset/src/inline-spec.ts
+++ b/blocksuite/affine/inlines/preset/src/inline-spec.ts
@@ -1,6 +1,6 @@
+import { inlineFootnoteExtensions } from '@blocksuite/affine-inline-footnote';
 import { inlineLinkExtensions } from '@blocksuite/affine-inline-link';
 import { inlineReferenceExtensions } from '@blocksuite/affine-inline-reference';
-import { FootNoteSchema } from '@blocksuite/affine-model';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { StdIdentifier } from '@blocksuite/block-std';
 import {
@@ -11,8 +11,6 @@ import type { ExtensionType } from '@blocksuite/store';
 import { html } from 'lit';
 import { z } from 'zod';
 
-import { FootNoteNodeConfigIdentifier } from './nodes/footnote-node/footnote-config.js';
-
 export type AffineInlineRootElement = InlineRootElement<AffineTextAttributes>;
 
 export const BoldInlineSpecExtension =
@@ -130,28 +128,6 @@ export const LatexEditorUnitSpecExtension =
     },
   });
 
-export const FootNoteInlineSpecExtension =
-  InlineSpecExtension<AffineTextAttributes>('footnote', provider => {
-    const std = provider.get(StdIdentifier);
-    const config =
-      provider.getOptional(FootNoteNodeConfigIdentifier) ?? undefined;
-    return {
-      name: 'footnote',
-      schema: FootNoteSchema.optional().nullable().catch(undefined),
-      match: delta => {
-        return !!delta.attributes?.footnote;
-      },
-      renderer: ({ delta }) => {
-        return html`<affine-footnote-node
-          .delta=${delta}
-          .std=${std}
-          .config=${config}
-        ></affine-footnote-node>`;
-      },
-      embed: true,
-    };
-  });
-
 export const InlineSpecExtensions: ExtensionType[] = [
   BoldInlineSpecExtension,
   ItalicInlineSpecExtension,
@@ -164,5 +140,5 @@ export const InlineSpecExtensions: ExtensionType[] = [
   ...inlineLinkExtensions,
   ...inlineReferenceExtensions,
   LatexEditorUnitSpecExtension,
-  FootNoteInlineSpecExtension,
+  ...inlineFootnoteExtensions,
 ];
diff --git a/blocksuite/affine/inlines/preset/tsconfig.json b/blocksuite/affine/inlines/preset/tsconfig.json
index ba2192dd3..6ecaf673d 100644
--- a/blocksuite/affine/inlines/preset/tsconfig.json
+++ b/blocksuite/affine/inlines/preset/tsconfig.json
@@ -8,6 +8,7 @@
   "include": ["./src"],
   "references": [
     { "path": "../../components" },
+    { "path": "../footnote" },
     { "path": "../link" },
     { "path": "../reference" },
     { "path": "../../model" },
diff --git a/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts b/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts
index 1a8e4951a..e358b08f1 100644
--- a/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts
+++ b/packages/frontend/core/src/blocksuite/extensions/footnote-config.ts
@@ -1,4 +1,4 @@
-import { FootNoteNodeConfigExtension } from '@blocksuite/affine/inlines/preset';
+import { FootNoteNodeConfigExtension } from '@blocksuite/affine/inlines/footnote';
 import type { SpecBuilder } from '@blocksuite/affine/shared/utils';
 
 // Disable hover effect for footnote node
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index eccd843f2..58c65dd49 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -30,6 +30,7 @@ export const PackageList = [
       'blocksuite/affine/fragments/fragment-outline',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/gfx/turbo-renderer',
+      'blocksuite/affine/inlines/footnote',
       'blocksuite/affine/inlines/link',
       'blocksuite/affine/inlines/preset',
       'blocksuite/affine/inlines/reference',
@@ -455,6 +456,19 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/inlines/footnote',
+    name: '@blocksuite/affine-inline-footnote',
+    workspaceDependencies: [
+      'blocksuite/affine/components',
+      'blocksuite/affine/inlines/reference',
+      'blocksuite/affine/model',
+      'blocksuite/affine/shared',
+      'blocksuite/framework/block-std',
+      'blocksuite/framework/global',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/inlines/link',
     name: '@blocksuite/affine-inline-link',
@@ -473,6 +487,7 @@ export const PackageList = [
     name: '@blocksuite/affine-inline-preset',
     workspaceDependencies: [
       'blocksuite/affine/components',
+      'blocksuite/affine/inlines/footnote',
       'blocksuite/affine/inlines/link',
       'blocksuite/affine/inlines/reference',
       'blocksuite/affine/model',
@@ -989,6 +1004,7 @@ export type PackageName =
   | '@blocksuite/affine-fragment-outline'
   | '@blocksuite/affine-gfx-text'
   | '@blocksuite/affine-gfx-turbo-renderer'
+  | '@blocksuite/affine-inline-footnote'
   | '@blocksuite/affine-inline-link'
   | '@blocksuite/affine-inline-preset'
   | '@blocksuite/affine-inline-reference'
diff --git a/tsconfig.json b/tsconfig.json
index b552b065b..cff390bc9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -77,6 +77,7 @@
     { "path": "./blocksuite/affine/fragments/fragment-outline" },
     { "path": "./blocksuite/affine/gfx/text" },
     { "path": "./blocksuite/affine/gfx/turbo-renderer" },
+    { "path": "./blocksuite/affine/inlines/footnote" },
     { "path": "./blocksuite/affine/inlines/link" },
     { "path": "./blocksuite/affine/inlines/preset" },
     { "path": "./blocksuite/affine/inlines/reference" },
diff --git a/yarn.lock b/yarn.lock
index dd6e0cb06..21a99e5fc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3010,6 +3010,34 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-inline-footnote@workspace:*, @blocksuite/affine-inline-footnote@workspace:blocksuite/affine/inlines/footnote":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-inline-footnote@workspace:blocksuite/affine/inlines/footnote"
+  dependencies:
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-inline-reference": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/block-std": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.6"
+    "@blocksuite/store": "workspace:*"
+    "@floating-ui/dom": "npm:^1.6.13"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    collapse-white-space: "npm:^2.1.0"
+    date-fns: "npm:^4.0.0"
+    lit: "npm:^3.2.0"
+    lit-html: "npm:^3.2.1"
+    lodash-es: "npm:^4.17.21"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-inline-link@workspace:*, @blocksuite/affine-inline-link@workspace:blocksuite/affine/inlines/link":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-inline-link@workspace:blocksuite/affine/inlines/link"
@@ -3043,6 +3071,7 @@ __metadata:
   resolution: "@blocksuite/affine-inline-preset@workspace:blocksuite/affine/inlines/preset"
   dependencies:
     "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-inline-footnote": "workspace:*"
     "@blocksuite/affine-inline-link": "workspace:*"
     "@blocksuite/affine-inline-reference": "workspace:*"
     "@blocksuite/affine-model": "workspace:*"
@@ -3369,6 +3398,7 @@ __metadata:
     "@blocksuite/affine-fragment-outline": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
+    "@blocksuite/affine-inline-footnote": "workspace:*"
     "@blocksuite/affine-inline-link": "workspace:*"
     "@blocksuite/affine-inline-preset": "workspace:*"
     "@blocksuite/affine-inline-reference": "workspace:*"