From d5eef5b342e351f1548865ca918ddf401ea6652a Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Fri, 6 Mar 2026 15:57:22 -0500
Subject: [PATCH] Add footnotes!

Squashed commit of the following:

commit 0f22f24c5ff5ed98ab139fc609632bfef20fd280
Merge: 26876031 66f9d441
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 15:55:34 2026 -0500

    Merge branch 'main' into feature/footnotes

commit 268760316c02f10d545f7f81b9438cc76981bb7c
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 15:38:32 2026 -0500

    open footnote popover

commit 5add9002932f24b2cb3e88a79415359e5bfdc1aa
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 15:29:28 2026 -0500

    try mask-image css

commit 10f35a1361dfb4672b03391b91090b368c5abbf9
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 15:16:33 2026 -0500

    make footnotes text sm

commit 3ae07878e7284b1112d177c4d787d27e1f2726f4
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 14:31:46 2026 -0500

    fix the type errors

commit 2aa857ba975fa5df90629984550d3aa7ef47d402
Author: Jared Pereira <jared@awarm.space>
Date:   Fri Mar 6 11:45:01 2026 -0500

    fix footnote rendering and counts

commit 212fabd22c77d12e71530403eb6b5bbbdbef1ae3
Author: celine <celine@hyperlink.academy>
Date:   Thu Mar 5 22:24:39 2026 -0500

    autofocus editor when footnote is selecter

commit ce10ee81ff666d1c5f33e927719d0c5a840627ae
Author: celine <celine@hyperlink.academy>
Date:   Thu Mar 5 21:56:21 2026 -0500

    some styling updates

commit 4a8480f35afe12c2703f07a19579e06ec3f509fb
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 18:58:14 2026 -0500

    add toolbar stuff

commit bf1a2f50bb31336fefd67d47d11e670aeabf9da4
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 18:06:11 2026 -0500

    fix popover number and threshold

commit aae6fae776da6570a26e6de12fab119ef8510bc7
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 16:22:40 2026 -0500

    share footnote item layout

commit 0f843a5a899eacd98d17f11412d07ca91b74841e
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 16:15:25 2026 -0500

    share editor logic between footnote and textblock

commit 16f8052758e6aae9157ab97014509ef010eb717f
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 16:15:17 2026 -0500

    render footnotes properly in published page

commit 713d14b48eeb5a2ceb44a71099b3d912b9f3ba6c
Author: Jared Pereira <jared@awarm.space>
Date:   Thu Mar 5 15:53:39 2026 -0500

    add footnotes
---
 actions/publishToPublication.ts               |  41 ++-
 app/[leaflet_id]/Footer.tsx                   |  12 +
 app/globals.css                               |  53 ++++
 .../[rkey]/Blocks/BaseTextBlock.tsx           |   3 +
 .../[publication]/[rkey]/Blocks/TextBlock.tsx |   3 +-
 .../[rkey]/Blocks/TextBlockCore.tsx           |  24 ++
 .../Footnotes/FootnoteCollectorContext.tsx    |  56 +++++
 .../Footnotes/PublishedFootnotePopover.tsx    | 163 ++++++++++++
 .../Footnotes/PublishedFootnoteSideColumn.tsx |  56 +++++
 .../[rkey]/Footnotes/PublishedFootnotes.tsx   | 120 +++++++++
 .../[rkey]/LinearDocumentPage.tsx             |  17 ++
 .../[publication]/[rkey]/PostContent.tsx      |  10 +
 .../[did]/[publication]/[rkey]/PostPages.tsx  |  15 +-
 .../[rkey]/StaticPostContent.tsx              |   2 +-
 .../Blocks/TextBlock/RenderYJSFragment.tsx    |  15 ++
 components/Blocks/TextBlock/index.tsx         |  14 ++
 components/Blocks/TextBlock/inputRules.ts     |  18 ++
 components/Blocks/TextBlock/insertFootnote.ts |  43 ++++
 .../Blocks/TextBlock/mountProsemirror.ts      | 138 ++++++++--
 components/Blocks/TextBlock/schema.ts         |  35 +++
 components/Blocks/index.tsx                   |  19 +-
 components/DesktopFooter.tsx                  |  15 ++
 components/Footnotes/FootnoteContext.tsx      |  18 ++
 components/Footnotes/FootnoteEditor.tsx       | 235 ++++++++++++++++++
 components/Footnotes/FootnoteItemLayout.tsx   |  58 +++++
 components/Footnotes/FootnotePopover.tsx      | 152 +++++++++++
 components/Footnotes/FootnoteSection.tsx      |  38 +++
 components/Footnotes/FootnoteSideColumn.tsx   |  63 +++++
 .../Footnotes/FootnoteSideColumnLayout.tsx    | 178 +++++++++++++
 .../Footnotes/deleteFootnoteFromBlock.ts      |  32 +++
 components/Footnotes/usePageFootnotes.ts      |  61 +++++
 components/Pages/Page.tsx                     |  84 ++++---
 components/Toolbar/FootnoteButton.tsx         |  57 +++++
 components/Toolbar/FootnoteTextToolbar.tsx    |  70 ++++++
 components/Toolbar/FootnoteToolbarWrapper.tsx |  77 ++++++
 components/Toolbar/TextToolbar.tsx            |   2 +
 lexicons/api/lexicons.ts                      |  21 ++
 .../api/types/pub/leaflet/richtext/facet.ts   |  19 ++
 lexicons/pub/leaflet/richtext/facet.json      |  23 +-
 src/replicache/attributes.ts                  |   4 +
 src/replicache/mutations.ts                   |  33 +++
 src/useUIState.ts                             |   2 +
 src/utils/deleteBlock.ts                      |  13 +
 src/utils/yjsFragmentToString.ts              |   4 +
 44 files changed, 2050 insertions(+), 66 deletions(-)
 create mode 100644 app/lish/[did]/[publication]/[rkey]/Footnotes/FootnoteCollectorContext.tsx
 create mode 100644 app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotePopover.tsx
 create mode 100644 app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
 create mode 100644 app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
 create mode 100644 components/Blocks/TextBlock/insertFootnote.ts
 create mode 100644 components/Footnotes/FootnoteContext.tsx
 create mode 100644 components/Footnotes/FootnoteEditor.tsx
 create mode 100644 components/Footnotes/FootnoteItemLayout.tsx
 create mode 100644 components/Footnotes/FootnotePopover.tsx
 create mode 100644 components/Footnotes/FootnoteSection.tsx
 create mode 100644 components/Footnotes/FootnoteSideColumn.tsx
 create mode 100644 components/Footnotes/FootnoteSideColumnLayout.tsx
 create mode 100644 components/Footnotes/deleteFootnoteFromBlock.ts
 create mode 100644 components/Footnotes/usePageFootnotes.ts
 create mode 100644 components/Toolbar/FootnoteButton.tsx
 create mode 100644 components/Toolbar/FootnoteTextToolbar.tsx
 create mode 100644 components/Toolbar/FootnoteToolbarWrapper.tsx

diff --git a/actions/publishToPublication.ts b/actions/publishToPublication.ts
index 2dd62d89..fe2988dd 100644
--- a/actions/publishToPublication.ts
+++ b/actions/publishToPublication.ts
@@ -485,6 +485,17 @@ async function processBlocksToPages(
     ).flat();
   }
   async function blockToRecord(b: Block, did: string) {
+    const footnoteContentResolver = (footnoteEntityID: string) => {
+      let [content] = scan.eav(footnoteEntityID, "block/text");
+      if (!content) return { plaintext: "", facets: [] as PubLeafletRichtextFacet.Main[] };
+      let doc = new Y.Doc();
+      const update = base64.toByteArray(content.data.value);
+      Y.applyUpdate(doc, update);
+      let nodes = doc.getXmlElement("prosemirror").toArray();
+      let plaintext = YJSFragmentToString(nodes[0]);
+      let { facets } = YJSFragmentToFacets(nodes[0]);
+      return { plaintext, facets };
+    };
     const getBlockContent = (b: string) => {
       let [content] = scan.eav(b, "block/text");
       if (!content) return ["", [] as PubLeafletRichtextFacet.Main[]] as const;
@@ -493,7 +504,7 @@ async function processBlocksToPages(
       Y.applyUpdate(doc, update);
       let nodes = doc.getXmlElement("prosemirror").toArray();
       let stringValue = YJSFragmentToString(nodes[0]);
-      let { facets } = YJSFragmentToFacets(nodes[0]);
+      let { facets } = YJSFragmentToFacets(nodes[0], 0, footnoteContentResolver);
       return [stringValue, facets] as const;
     };
     if (b.type === "card") {
@@ -759,8 +770,34 @@ async function processBlocksToPages(
 function YJSFragmentToFacets(
   node: Y.XmlElement | Y.XmlText | Y.XmlHook,
   byteOffset: number = 0,
+  footnoteContentResolver?: (footnoteEntityID: string) => { plaintext: string; facets: PubLeafletRichtextFacet.Main[] },
 ): { facets: PubLeafletRichtextFacet.Main[]; byteLength: number } {
   if (node.constructor === Y.XmlElement) {
+    // Handle footnote inline nodes
+    if (node.nodeName === "footnote") {
+      const footnoteEntityID = node.getAttribute("footnoteEntityID") || "";
+      const placeholder = "*";
+      const unicodestring = new UnicodeString(placeholder);
+      let footnoteContent = footnoteContentResolver?.(footnoteEntityID);
+      const facet: PubLeafletRichtextFacet.Main = {
+        index: {
+          byteStart: byteOffset,
+          byteEnd: byteOffset + unicodestring.length,
+        },
+        features: [
+          {
+            $type: "pub.leaflet.richtext.facet#footnote",
+            footnoteId: footnoteEntityID,
+            contentPlaintext: footnoteContent?.plaintext || "",
+            ...(footnoteContent?.facets?.length
+              ? { contentFacets: footnoteContent.facets }
+              : {}),
+          },
+        ],
+      };
+      return { facets: [facet], byteLength: unicodestring.length };
+    }
+
     // Handle inline mention nodes
     if (node.nodeName === "didMention") {
       const text = node.getAttribute("text") || "";
@@ -807,7 +844,7 @@ function YJSFragmentToFacets(
     let allFacets: PubLeafletRichtextFacet.Main[] = [];
     let currentOffset = byteOffset;
     for (const child of node.toArray()) {
-      const result = YJSFragmentToFacets(child, currentOffset);
+      const result = YJSFragmentToFacets(child, currentOffset, footnoteContentResolver);
       allFacets.push(...result.facets);
       currentOffset += result.byteLength;
     }
diff --git a/app/[leaflet_id]/Footer.tsx b/app/[leaflet_id]/Footer.tsx
index ad063f02..f8ff45fa 100644
--- a/app/[leaflet_id]/Footer.tsx
+++ b/app/[leaflet_id]/Footer.tsx
@@ -4,6 +4,7 @@ import { Footer } from "components/ActionBar/Footer";
 import { Media } from "components/Media";
 import { ThemePopover } from "components/ThemeManager/ThemeSetter";
 import { Toolbar } from "components/Toolbar";
+import { FootnoteToolbar } from "components/Toolbar/FootnoteToolbarWrapper";
 import { ShareOptions } from "app/[leaflet_id]/actions/ShareOptions";
 import { HomeButton } from "app/[leaflet_id]/actions/HomeButton";
 import { PublishButton } from "./actions/PublishButton";
@@ -56,6 +57,17 @@ export function LeafletFooter(props: { entityID: string }) {
             blockType={blockType}
           />
         </div>
+      ) : focusedBlock &&
+        focusedBlock.entityType === "footnote" &&
+        entity_set.permissions.write ? (
+        <div
+          className="w-full z-10 p-2 flex bg-bg-page pwa-padding-bottom"
+          onMouseDown={(e) => {
+            if (e.currentTarget === e.target) e.preventDefault();
+          }}
+        >
+          <FootnoteToolbar pageID={focusedBlock.parent} />
+        </div>
       ) : entity_set.permissions.write ? (
         <Footer>
           {pub?.publications &&
diff --git a/app/globals.css b/app/globals.css
index 818a7281..d5947283 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -514,3 +514,56 @@ pre.shiki {
   animation-iteration-count: 1;
   animation-timing-function: ease-in;
 }
+
+.footnote-scope {
+  counter-reset: footnote;
+}
+.footnote-ref {
+  counter-increment: footnote;
+  cursor: pointer;
+  color: rgb(var(--color-tertiary));
+  opacity: 0.7;
+}
+.footnote-ref::after {
+  content: counter(footnote);
+  vertical-align: super;
+  padding-left: 2px;
+  font-size: 75%;
+  line-height: 0rem;
+}
+.footnote-ref ~ br.ProseMirror-trailingBreak {
+  display: inline;
+  width: 4px;
+}
+.footnote-ref ~ img.ProseMirror-separator {
+  display: none;
+}
+
+.footnote-side-enter {
+  animation: footnote-fade-in 200ms ease-out;
+}
+@keyframes footnote-fade-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.footnote-side-item {
+  max-height: 4.5em;
+  overflow: hidden;
+  transition: max-height 200ms ease, mask-image 200ms ease;
+}
+.footnote-side-item.has-overflow {
+  mask-image: linear-gradient(to bottom, white 50%, transparent 100%);
+}
+.footnote-side-item:hover,
+.footnote-side-item:focus-within,
+.footnote-side-item.footnote-side-focused {
+  max-height: 40em;
+  mask-image: none;
+}
diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/BaseTextBlock.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/BaseTextBlock.tsx
index 50feeb13..b372130a 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/BaseTextBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/BaseTextBlock.tsx
@@ -5,6 +5,7 @@ import {
   RichText,
 } from "../Blocks/TextBlockCore";
 import { ReactNode } from "react";
+import { PublishedFootnoteRefRenderer } from "../Footnotes/PublishedFootnotePopover";
 
 // Re-export RichText for backwards compatibility
 export { RichText };
@@ -19,7 +20,9 @@ export function BaseTextBlock(props: Omit<TextBlockCoreProps, "renderers">) {
       {...props}
       renderers={{
         DidMention: DidMentionWithPopover,
+        FootnoteRef: PublishedFootnoteRefRenderer,
       }}
+      footnoteIndexMap={props.footnoteIndexMap}
     />
   );
 }
diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlock.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlock.tsx
index b102b94e..3f3196b5 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlock.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlock.tsx
@@ -12,6 +12,7 @@ export function TextBlock(props: {
   index: number[];
   preview?: boolean;
   pageId?: string;
+  footnoteIndexMap?: Map<string, number>;
 }) {
   let children = [];
   let highlights = useHighlight(props.index, props.pageId);
@@ -48,7 +49,7 @@ export function TextBlock(props: {
     }
     return facets;
   }, [props.plaintext, props.facets, highlights, props.preview, props.pageId]);
-  return <BaseTextBlock {...props} facets={facets} />;
+  return <BaseTextBlock {...props} facets={facets} footnoteIndexMap={props.footnoteIndexMap} />;
 }
 
 function addFacet(facets: Facet[], newFacet: Facet, length: number) {
diff --git a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
index 5ef5bdf0..0fb82af3 100644
--- a/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Blocks/TextBlockCore.tsx
@@ -7,6 +7,7 @@ type Facet = PubLeafletRichtextFacet.Main;
 
 export type FacetRenderers = {
   DidMention?: (props: { did: string; children: ReactNode }) => ReactNode;
+  FootnoteRef?: (props: { footnoteId: string; index: number; children: ReactNode }) => ReactNode;
 };
 
 export type TextBlockCoreProps = {
@@ -15,6 +16,7 @@ export type TextBlockCoreProps = {
   index: number[];
   preview?: boolean;
   renderers?: FacetRenderers;
+  footnoteIndexMap?: Map<string, number>;
 };
 
 export function TextBlockCore(props: TextBlockCoreProps) {
@@ -38,9 +40,31 @@ export function TextBlockCore(props: TextBlockCoreProps) {
     let isAtMention = segment.facet?.find(PubLeafletRichtextFacet.isAtMention);
     let isUnderline = segment.facet?.find(PubLeafletRichtextFacet.isUnderline);
     let isItalic = segment.facet?.find(PubLeafletRichtextFacet.isItalic);
+    let isFootnote = segment.facet?.find(PubLeafletRichtextFacet.isFootnote);
     let isHighlighted = segment.facet?.find(
       PubLeafletRichtextFacet.isHighlight,
     );
+
+    if (isFootnote) {
+      let fnIndex = props.footnoteIndexMap?.get(isFootnote.footnoteId) ?? 0;
+      const FootnoteRenderer = props.renderers?.FootnoteRef;
+      if (FootnoteRenderer) {
+        children.push(
+          <FootnoteRenderer key={counter} footnoteId={isFootnote.footnoteId} index={fnIndex}>
+            <sup className="text-accent-contrast cursor-pointer">{fnIndex}</sup>
+          </FootnoteRenderer>,
+        );
+      } else {
+        children.push(
+          <sup key={counter} className="text-accent-contrast cursor-pointer text-[0.75em]" id={`fnref-${isFootnote.footnoteId}`}>
+            <a href={`#fn-${isFootnote.footnoteId}`} className="no-underline hover:underline">{fnIndex}</a>
+          </sup>,
+        );
+      }
+      counter++;
+      continue;
+    }
+
     let className = `
       ${isCode ? "inline-code" : ""}
       ${id ? "scroll-mt-12 scroll-mb-10" : ""}
diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/FootnoteCollectorContext.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/FootnoteCollectorContext.tsx
new file mode 100644
index 00000000..33e57e3d
--- /dev/null
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/FootnoteCollectorContext.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { createContext, useContext, useRef, useCallback, useMemo } from "react";
+import { PubLeafletRichtextFacet } from "lexicons/api";
+
+export type CollectedFootnote = {
+  footnoteId: string;
+  index: number;
+  contentPlaintext: string;
+  contentFacets?: PubLeafletRichtextFacet.Main[];
+};
+
+type FootnoteCollectorContextValue = {
+  registerFootnote: (footnote: Omit<CollectedFootnote, "index">) => number;
+  getFootnotes: () => CollectedFootnote[];
+};
+
+const FootnoteCollectorContext = createContext<FootnoteCollectorContextValue>({
+  registerFootnote: () => 0,
+  getFootnotes: () => [],
+});
+
+export function useFootnoteCollector() {
+  return useContext(FootnoteCollectorContext);
+}
+
+export function FootnoteCollectorProvider(props: { children: React.ReactNode }) {
+  let footnotesRef = useRef<CollectedFootnote[]>([]);
+  let counterRef = useRef(1);
+
+  let registerFootnote = useCallback(
+    (footnote: Omit<CollectedFootnote, "index">) => {
+      let existing = footnotesRef.current.find(
+        (f) => f.footnoteId === footnote.footnoteId,
+      );
+      if (existing) return existing.index;
+      let index = counterRef.current++;
+      footnotesRef.current.push({ ...footnote, index });
+      return index;
+    },
+    [],
+  );
+
+  let getFootnotes = useCallback(() => footnotesRef.current, []);
+
+  let value = useMemo(
+    () => ({ registerFootnote, getFootnotes }),
+    [registerFootnote, getFootnotes],
+  );
+
+  return (
+    <FootnoteCollectorContext.Provider value={value}>
+      {props.children}
+    </FootnoteCollectorContext.Provider>
+  );
+}
diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotePopover.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotePopover.tsx
new file mode 100644
index 00000000..c7dc68c2
--- /dev/null
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotePopover.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
+import { create } from "zustand";
+import { TextBlockCore } from "../Blocks/TextBlockCore";
+import { PubLeafletRichtextFacet } from "lexicons/api";
+
+type PublishedFootnoteData = {
+  footnoteId: string;
+  index: number;
+  contentPlaintext: string;
+  contentFacets?: PubLeafletRichtextFacet.Main[];
+};
+
+type PopoverState = {
+  activeFootnoteId: string | null;
+  anchorElement: HTMLElement | null;
+  open: (footnoteId: string, anchor: HTMLElement) => void;
+  close: () => void;
+};
+
+export const usePublishedFootnotePopoverStore = create<PopoverState>(
+  (set) => ({
+    activeFootnoteId: null,
+    anchorElement: null,
+    open: (footnoteId, anchor) =>
+      set({ activeFootnoteId: footnoteId, anchorElement: anchor }),
+    close: () => set({ activeFootnoteId: null, anchorElement: null }),
+  }),
+);
+
+export function PublishedFootnoteRefRenderer(props: {
+  footnoteId: string;
+  index: number;
+  children: ReactNode;
+}) {
+  let ref = useRef<HTMLElement>(null);
+  return (
+    <sup
+      ref={ref}
+      className="text-accent-contrast cursor-pointer"
+      id={`fnref-${props.footnoteId}`}
+      onClick={(e) => {
+        e.preventDefault();
+        let store = usePublishedFootnotePopoverStore.getState();
+        if (store.activeFootnoteId === props.footnoteId) {
+          store.close();
+        } else {
+          store.open(props.footnoteId, e.currentTarget);
+        }
+      }}
+    >
+      {props.index}
+    </sup>
+  );
+}
+
+export function PublishedFootnotePopover(props: {
+  footnotes: PublishedFootnoteData[];
+}) {
+  let { activeFootnoteId, anchorElement, close } =
+    usePublishedFootnotePopoverStore();
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let [position, setPosition] = useState<{
+    top: number;
+    left: number;
+    arrowLeft: number;
+  } | null>(null);
+
+  let footnote = props.footnotes.find(
+    (fn) => fn.footnoteId === activeFootnoteId,
+  );
+
+  let updatePosition = useCallback(() => {
+    if (!anchorElement || !popoverRef.current) return;
+
+    let anchorRect = anchorElement.getBoundingClientRect();
+    let popoverWidth = popoverRef.current.offsetWidth;
+    let popoverHeight = popoverRef.current.offsetHeight;
+
+    let top = anchorRect.top - popoverHeight - 8;
+    let left = anchorRect.left + anchorRect.width / 2 - popoverWidth / 2;
+
+    let padding = 12;
+    left = Math.max(
+      padding,
+      Math.min(left, window.innerWidth - popoverWidth - padding),
+    );
+
+    let arrowLeft = anchorRect.left + anchorRect.width / 2 - left;
+
+    if (top < padding) {
+      top = anchorRect.bottom + 8;
+    }
+
+    setPosition({ top, left, arrowLeft });
+  }, [anchorElement]);
+
+  useEffect(() => {
+    if (!activeFootnoteId || !anchorElement) {
+      setPosition(null);
+      return;
+    }
+
+    requestAnimationFrame(updatePosition);
+
+    let handleClickOutside = (e: Event) => {
+      let target = e.target as Node;
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(target) &&
+        !anchorElement.contains(target)
+      ) {
+        close();
+      }
+    };
+
+    let handleScroll = () => close();
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", close);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+      window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [activeFootnoteId, anchorElement, close, updatePosition]);
+
+  if (!activeFootnoteId || !footnote) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      className="footnote-popover fixed z-50 bg-bg-page border border-border rounded-lg shadow-md px-3 py-2 w-[min(calc(100vw-24px),320px)]"
+      style={{
+        top: position?.top ?? -9999,
+        left: position?.left ?? -9999,
+        visibility: position ? "visible" : "hidden",
+      }}
+    >
+      <div className="flex gap-2 items-start text-sm">
+        <span className="text-accent-contrast font-bold shrink-0">
+          {footnote.index}
+        </span>
+        <div className="min-w-0">
+          {footnote.contentPlaintext ? (
+            <TextBlockCore
+              plaintext={footnote.contentPlaintext}
+              facets={footnote.contentFacets}
+              index={[]}
+            />
+          ) : (
+            <span className="italic text-tertiary">Empty footnote</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
new file mode 100644
index 00000000..92a988e3
--- /dev/null
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useCallback } from "react";
+import { PublishedFootnote } from "./PublishedFootnotes";
+import { TextBlockCore } from "../Blocks/TextBlockCore";
+import { FootnoteSideColumnLayout } from "components/Footnotes/FootnoteSideColumnLayout";
+import { FootnoteItemLayout } from "components/Footnotes/FootnoteItemLayout";
+
+type PublishedFootnoteItem = PublishedFootnote & {
+  id: string;
+};
+
+export function PublishedFootnoteSideColumn(props: {
+  footnotes: PublishedFootnote[];
+  fullPageScroll?: boolean;
+}) {
+  let items: PublishedFootnoteItem[] = props.footnotes.map((fn) => ({
+    ...fn,
+    id: fn.footnoteId,
+  }));
+
+  let getAnchorSelector = useCallback(
+    (item: PublishedFootnoteItem) => `#fnref-${item.id}`,
+    [],
+  );
+
+  let renderItem = useCallback(
+    (item: PublishedFootnoteItem & { top: number }) => (
+      <FootnoteItemLayout
+        index={item.index}
+        indexHref={`#fnref-${item.footnoteId}`}
+      >
+        {item.contentPlaintext ? (
+          <TextBlockCore
+            plaintext={item.contentPlaintext}
+            facets={item.contentFacets}
+            index={[]}
+          />
+        ) : (
+          <span className="italic text-tertiary">Empty footnote</span>
+        )}
+      </FootnoteItemLayout>
+    ),
+    [],
+  );
+
+  return (
+    <FootnoteSideColumnLayout
+      items={items}
+      visible={props.footnotes.length > 0}
+      fullPageScroll={props.fullPageScroll}
+      getAnchorSelector={getAnchorSelector}
+      renderItem={renderItem}
+    />
+  );
+}
diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
new file mode 100644
index 00000000..86fd9e56
--- /dev/null
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import {
+  PubLeafletRichtextFacet,
+  PubLeafletBlocksText,
+  PubLeafletBlocksHeader,
+  PubLeafletBlocksBlockquote,
+  PubLeafletPagesLinearDocument,
+} from "lexicons/api";
+import { TextBlockCore } from "../Blocks/TextBlockCore";
+import {
+  FootnoteItemLayout,
+  FootnoteSectionLayout,
+} from "components/Footnotes/FootnoteItemLayout";
+
+export type PublishedFootnote = {
+  footnoteId: string;
+  index: number;
+  contentPlaintext: string;
+  contentFacets?: PubLeafletRichtextFacet.Main[];
+};
+
+export function collectFootnotesFromBlocks(
+  blocks: PubLeafletPagesLinearDocument.Block[],
+): PublishedFootnote[] {
+  let footnotes: PublishedFootnote[] = [];
+  let seen = new Set<string>();
+  let idx = 1;
+
+  function scanFacets(facets?: PubLeafletRichtextFacet.Main[]) {
+    if (!facets) return;
+    for (let facet of facets) {
+      for (let feature of facet.features) {
+        if (PubLeafletRichtextFacet.isFootnote(feature)) {
+          if (!seen.has(feature.footnoteId)) {
+            seen.add(feature.footnoteId);
+            footnotes.push({
+              footnoteId: feature.footnoteId,
+              index: idx++,
+              contentPlaintext: feature.contentPlaintext,
+              contentFacets: feature.contentFacets,
+            });
+          }
+        }
+      }
+    }
+  }
+
+  for (let b of blocks) {
+    let block = b.block;
+    let facets: PubLeafletRichtextFacet.Main[] | undefined;
+    if (PubLeafletBlocksText.isMain(block)) {
+      facets = block.facets;
+    } else if (PubLeafletBlocksHeader.isMain(block)) {
+      facets = block.facets;
+    } else if (PubLeafletBlocksBlockquote.isMain(block)) {
+      facets = block.facets;
+    }
+    if (facets) scanFacets(facets);
+  }
+
+  return footnotes;
+}
+
+export function buildFootnoteIndexMap(
+  footnotes: PublishedFootnote[],
+): Map<string, number> {
+  let map = new Map<string, number>();
+  for (let fn of footnotes) {
+    map.set(fn.footnoteId, fn.index);
+  }
+  return map;
+}
+
+export function PublishedFootnoteSection(props: {
+  footnotes: PublishedFootnote[];
+}) {
+  if (props.footnotes.length === 0) return null;
+
+  return (
+    <FootnoteSectionLayout className="mt-4">
+      {props.footnotes.map((fn) => (
+        <PublishedFootnoteItem key={fn.footnoteId} footnote={fn} />
+      ))}
+    </FootnoteSectionLayout>
+  );
+}
+
+export function PublishedFootnoteItem(props: {
+  footnote: PublishedFootnote;
+}) {
+  let fn = props.footnote;
+  return (
+    <FootnoteItemLayout
+      index={fn.index}
+      indexHref={`#fnref-${fn.footnoteId}`}
+      id={`fn-${fn.footnoteId}`}
+      trailing={
+        <a
+          href={`#fnref-${fn.footnoteId}`}
+          className="text-accent-contrast shrink-0 mt-0.5 text-xs no-underline hover:underline"
+          title="Back to text"
+          aria-label={`Back to footnote ${fn.index} in text`}
+        >
+          ↩
+        </a>
+      }
+    >
+      {fn.contentPlaintext ? (
+        <TextBlockCore
+          plaintext={fn.contentPlaintext}
+          facets={fn.contentFacets}
+          index={[]}
+        />
+      ) : (
+        <span className="italic text-tertiary">Empty footnote</span>
+      )}
+    </FootnoteItemLayout>
+  );
+}
diff --git a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
index 04b9d7d9..159300e3 100644
--- a/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/LinearDocumentPage.tsx
@@ -22,6 +22,13 @@ import { PollData } from "./fetchPollData";
 import { SharedPageProps } from "./PostPages";
 import { PostPrevNextButtons } from "./PostPrevNextButtons";
 import { PostSubscribe } from "./PostSubscribe";
+import {
+  collectFootnotesFromBlocks,
+  buildFootnoteIndexMap,
+  PublishedFootnoteSection,
+} from "./Footnotes/PublishedFootnotes";
+import { PublishedFootnoteSideColumn } from "./Footnotes/PublishedFootnoteSideColumn";
+import { PublishedFootnotePopover } from "./Footnotes/PublishedFootnotePopover";
 
 export function LinearDocumentPage({
   blocks,
@@ -47,6 +54,8 @@ export function LinearDocumentPage({
   } = props;
   let drawer = useDrawerOpen(document_uri);
   const { pages } = useLeafletContent();
+  const footnotes = collectFootnotesFromBlocks(blocks);
+  const footnoteIndexMap = buildFootnoteIndexMap(footnotes);
 
   if (!document) return null;
 
@@ -62,6 +71,11 @@ export function LinearDocumentPage({
           !!drawer && (pageId ? drawer.pageId === pageId : !drawer.pageId)
         }
         pageOptions={pageOptions}
+        footnoteSideColumn={
+          !props.hasContentToRight ? (
+            <PublishedFootnoteSideColumn footnotes={footnotes} fullPageScroll={fullPageScroll} />
+          ) : undefined
+        }
       >
         {!isSubpage && profile && (
           <PostHeader
@@ -78,7 +92,9 @@ export function LinearDocumentPage({
           blocks={blocks}
           did={did}
           prerenderedCodeBlocks={prerenderedCodeBlocks}
+          footnoteIndexMap={footnoteIndexMap}
         />
+        <PublishedFootnoteSection footnotes={footnotes} />
         <PostSubscribe />
         <PostPrevNextButtons
           showPrevNext={preferences.showPrevNext !== false && !isSubpage}
@@ -96,6 +112,7 @@ export function LinearDocumentPage({
         />
         {!hasPageBackground && <div className={`spacer h-8 w-full`} />}
       </PageWrapper>
+      <PublishedFootnotePopover footnotes={footnotes} />
     </>
   );
 }
diff --git a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 88004a5c..b553e732 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -46,6 +46,7 @@ export function PostContent({
   pageId,
   pages,
   pollData,
+  footnoteIndexMap,
 }: {
   blocks: PubLeafletPagesLinearDocument.Block[];
   pageId?: string;
@@ -56,6 +57,7 @@ export function PostContent({
   bskyPostData: AppBskyFeedDefs.PostView[];
   pollData: PollData[];
   pages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+  footnoteIndexMap?: Map<string, number>;
 }) {
   return (
     <div
@@ -76,6 +78,7 @@ export function PostContent({
             preview={preview}
             prerenderedCodeBlocks={prerenderedCodeBlocks}
             pollData={pollData}
+            footnoteIndexMap={footnoteIndexMap}
           />
         );
       })}
@@ -95,6 +98,7 @@ export let Block = ({
   pageId,
   pages,
   pollData,
+  footnoteIndexMap,
 }: {
   pageId?: string;
   preview?: boolean;
@@ -107,6 +111,7 @@ export let Block = ({
   prerenderedCodeBlocks?: Map<string, string>;
   bskyPostData: AppBskyFeedDefs.PostView[];
   pollData: PollData[];
+  footnoteIndexMap?: Map<string, number>;
 }) => {
   let b = block;
   let blockProps = {
@@ -362,6 +367,7 @@ export let Block = ({
             index={index}
             preview={preview}
             pageId={pageId}
+            footnoteIndexMap={footnoteIndexMap}
           />
         </blockquote>
       );
@@ -379,6 +385,7 @@ export let Block = ({
             index={index}
             preview={preview}
             pageId={pageId}
+            footnoteIndexMap={footnoteIndexMap}
           />
         </p>
       );
@@ -403,6 +410,7 @@ export let Block = ({
               index={index}
               preview={preview}
               pageId={pageId}
+              footnoteIndexMap={footnoteIndexMap}
             />
           </h2>
         );
@@ -414,6 +422,7 @@ export let Block = ({
               index={index}
               preview={preview}
               pageId={pageId}
+              footnoteIndexMap={footnoteIndexMap}
             />
           </h3>
         );
@@ -426,6 +435,7 @@ export let Block = ({
             index={index}
             preview={preview}
             pageId={pageId}
+            footnoteIndexMap={footnoteIndexMap}
           />
         </h6>
       );
diff --git a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
index 972ef073..ccf5bea2 100644
--- a/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/PostPages.tsx
@@ -185,6 +185,7 @@ export type SharedPageProps = {
   pageId?: string;
   pageOptions?: React.ReactNode;
   allPages: (PubLeafletPagesLinearDocument.Main | PubLeafletPagesCanvas.Main)[];
+  hasContentToRight?: boolean;
 };
 
 // Component that renders either Canvas or Linear page based on page type
@@ -286,7 +287,13 @@ export function PostPages({
     <>
       {!sharedProps.fullPageScroll && <BookendSpacer />}
 
-      <PageRenderer page={firstPage} {...sharedProps} />
+      <PageRenderer
+        page={firstPage}
+        {...sharedProps}
+        hasContentToRight={
+          openPageIds.length > 0 || !!(drawer && !drawer.pageId)
+        }
+      />
 
       {drawer && !drawer.pageId && (
         <InteractionDrawer
@@ -306,7 +313,7 @@ export function PostPages({
         />
       )}
 
-      {openPageIds.map((openPage) => {
+      {openPageIds.map((openPage, openPageIndex) => {
         const pageKey = getPageKey(openPage);
 
         // Handle thread pages
@@ -372,6 +379,10 @@ export function PostPages({
               {...sharedProps}
               fullPageScroll={false}
               pageId={page.id}
+              hasContentToRight={
+                openPageIndex < openPageIds.length - 1 ||
+                !!(drawer && drawer.pageId === page.id)
+              }
               pageOptions={
                 <PageOptions
                   onClick={() => closePage(openPage)}
diff --git a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
index 494a2f3e..42238f77 100644
--- a/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
@@ -29,7 +29,7 @@ export function StaticPostContent({
   did: string;
 }) {
   return (
-    <div className="postContent flex flex-col">
+    <div className="postContent footnote-scope flex flex-col">
       {blocks.map((b, index) => {
         return <Block block={b} did={did} key={index} />;
       })}
diff --git a/components/Blocks/TextBlock/RenderYJSFragment.tsx b/components/Blocks/TextBlock/RenderYJSFragment.tsx
index 35c97cad..fb12897f 100644
--- a/components/Blocks/TextBlock/RenderYJSFragment.tsx
+++ b/components/Blocks/TextBlock/RenderYJSFragment.tsx
@@ -91,6 +91,21 @@ export function RenderYJSFragment({
                   );
                 }
 
+                // Handle footnote inline nodes
+                if (
+                  node.constructor === XmlElement &&
+                  node.nodeName === "footnote"
+                ) {
+                  const id = node.getAttribute("footnoteEntityID") || "";
+                  return (
+                    <span
+                      key={index}
+                      className="footnote-ref"
+                      data-footnote-id={id}
+                    />
+                  );
+                }
+
                 // Handle atMention inline nodes
                 if (
                   node.constructor === XmlElement &&
diff --git a/components/Blocks/TextBlock/index.tsx b/components/Blocks/TextBlock/index.tsx
index 71574e9a..fd6a6be5 100644
--- a/components/Blocks/TextBlock/index.tsx
+++ b/components/Blocks/TextBlock/index.tsx
@@ -25,6 +25,7 @@ import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { DotLoader } from "components/utils/DotLoader";
 import { useMountProsemirror } from "./mountProsemirror";
 import { schema } from "./schema";
+import { useFootnotePopoverStore } from "components/Footnotes/FootnotePopover";
 import { blockTextSize } from "src/utils/blockTextSize";
 
 import { Mention, MentionAutocomplete } from "components/Mention";
@@ -171,6 +172,19 @@ export function RenderedTextBlock(props: {
         wordBreak: "break-word",
         ...(props.type === "heading" ? { fontSize: headingFontSize[headingLevel?.data.value || 1] } : {}),
       }}
+      onClick={(e) => {
+        let target = e.target as HTMLElement;
+        let footnoteRef = target.closest(".footnote-ref") as HTMLElement | null;
+        if (!footnoteRef) return;
+        let footnoteID = footnoteRef.dataset.footnoteId;
+        if (!footnoteID) return;
+        let store = useFootnotePopoverStore.getState();
+        if (store.activeFootnoteID === footnoteID) {
+          store.close();
+        } else {
+          store.open(footnoteID, footnoteRef);
+        }
+      }}
       className={`
         ${alignmentClass}
         ${props.type === "blockquote" ? (props.previousBlock?.type === "blockquote" ? `blockquote pt-3 ` : "blockquote") : ""}
diff --git a/components/Blocks/TextBlock/inputRules.ts b/components/Blocks/TextBlock/inputRules.ts
index 90673c91..44814605 100644
--- a/components/Blocks/TextBlock/inputRules.ts
+++ b/components/Blocks/TextBlock/inputRules.ts
@@ -12,6 +12,8 @@ import { schema } from "./schema";
 import { useUIState } from "src/useUIState";
 import { flushSync } from "react-dom";
 import { LAST_USED_CODE_LANGUAGE_KEY } from "src/utils/codeLanguageStorage";
+import { insertFootnote } from "./insertFootnote";
+import { useEditorStates } from "src/state/useEditorState";
 export const inputrules = (
   propsRef: MutableRefObject<BlockProps & { entity_set: { set: string } }>,
   repRef: MutableRefObject<Replicache<ReplicacheMutators> | null>,
@@ -227,6 +229,22 @@ export const inputrules = (
         return tr;
       }),
 
+      // Footnote - [^ triggers footnote insertion
+      new InputRule(/\[\^$/, (state, match, start, end) => {
+        let tr = state.tr.delete(start, end);
+        setTimeout(() => {
+          let view = useEditorStates.getState().editorStates[propsRef.current.entityID]?.view;
+          if (!view || !repRef.current) return;
+          insertFootnote(
+            view,
+            propsRef.current.entityID,
+            repRef.current,
+            propsRef.current.entity_set.set,
+          );
+        }, 0);
+        return tr;
+      }),
+
       // Mention - @ at start of line, after space, or after hard break
       new InputRule(/(?:^|\s)@$/, (state, match, start, end) => {
         if (!openMentionAutocomplete) return null;
diff --git a/components/Blocks/TextBlock/insertFootnote.ts b/components/Blocks/TextBlock/insertFootnote.ts
new file mode 100644
index 00000000..7f83658a
--- /dev/null
+++ b/components/Blocks/TextBlock/insertFootnote.ts
@@ -0,0 +1,43 @@
+import { EditorView } from "prosemirror-view";
+import { v7 } from "uuid";
+import { Replicache } from "replicache";
+import type { ReplicacheMutators } from "src/replicache";
+import { schema } from "./schema";
+import { generateKeyBetween } from "fractional-indexing";
+import { scanIndex } from "src/replicache/utils";
+
+export async function insertFootnote(
+  view: EditorView,
+  blockID: string,
+  rep: Replicache<ReplicacheMutators>,
+  permissionSet: string,
+) {
+  let footnoteEntityID = v7();
+
+  let existingFootnotes = await rep.query(async (tx) => {
+    let scan = scanIndex(tx);
+    return scan.eav(blockID, "block/footnote");
+  });
+  let lastPosition =
+    existingFootnotes.length > 0
+      ? existingFootnotes
+          .map((f) => f.data.position)
+          .sort()
+          .at(-1)!
+      : null;
+  let position = generateKeyBetween(lastPosition, null);
+
+  await rep.mutate.createFootnote({
+    footnoteEntityID,
+    blockID,
+    permission_set: permissionSet,
+    position,
+  });
+
+  let node = schema.nodes.footnote.create({ footnoteEntityID });
+  let { from } = view.state.selection;
+  let tr = view.state.tr.insert(from, node);
+  view.dispatch(tr);
+
+  return footnoteEntityID;
+}
diff --git a/components/Blocks/TextBlock/mountProsemirror.ts b/components/Blocks/TextBlock/mountProsemirror.ts
index ff646a80..6a5af3c9 100644
--- a/components/Blocks/TextBlock/mountProsemirror.ts
+++ b/components/Blocks/TextBlock/mountProsemirror.ts
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef, useEffect, useState } from "react";
-import { EditorState } from "prosemirror-state";
+import { EditorState, Transaction } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { baseKeymap } from "prosemirror-commands";
 import { keymap } from "prosemirror-keymap";
@@ -10,6 +10,7 @@ import { Replicache } from "replicache";
 import { produce } from "immer";
 
 import { schema } from "./schema";
+import { UndoManager } from "src/undoManager";
 import { TextBlockKeymap } from "./keymap";
 import { inputrules } from "./inputRules";
 import { highlightSelectionPlugin } from "./plugins";
@@ -24,6 +25,7 @@ import { useHandlePaste } from "./useHandlePaste";
 import { BlockProps } from "../Block";
 import { useEntitySetContext } from "components/EntitySetProvider";
 import { didToBlueskyUrl, atUriToUrl } from "src/utils/mentionUtils";
+import { useFootnotePopoverStore } from "components/Footnotes/FootnotePopover";
 
 export function useMountProsemirror({
   props,
@@ -81,6 +83,49 @@ export function useMountProsemirror({
         handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => {
           if (!direct) return;
 
+          // Check for footnote inline nodes
+          if (node?.type === schema.nodes.footnote) {
+            let footnoteID = node.attrs.footnoteEntityID;
+            let supEl = _event.target as HTMLElement;
+            let sup = supEl.closest(".footnote-ref") as HTMLElement | null;
+            if (!sup) return;
+
+            // On mobile/tablet or canvas, show popover
+            let isDesktop = window.matchMedia("(min-width: 1280px)").matches;
+            let isCanvas = propsRef.current.pageType === "canvas";
+            if (!isDesktop || isCanvas) {
+              let store = useFootnotePopoverStore.getState();
+              if (store.activeFootnoteID === footnoteID) {
+                store.close();
+              } else {
+                store.open(footnoteID, sup);
+              }
+              return;
+            }
+
+            // On desktop, prefer the side column editor if visible
+            let sideColumn = document.querySelector(".footnote-side-column");
+            let editor = sideColumn?.querySelector(
+              `[data-footnote-editor="${footnoteID}"]`,
+            ) as HTMLElement | null;
+            // Fall back to the bottom section
+            if (!editor) {
+              editor = document.querySelector(
+                `[data-footnote-editor="${footnoteID}"]`,
+              ) as HTMLElement | null;
+            }
+            if (editor) {
+              editor.scrollIntoView({ behavior: "smooth", block: "nearest" });
+              let pm = editor.querySelector(
+                ".ProseMirror",
+              ) as HTMLElement | null;
+              if (pm) {
+                setTimeout(() => pm!.focus(), 100);
+              }
+            }
+            return;
+          }
+
           // Check for didMention inline nodes
           if (node?.type === schema.nodes.didMention) {
             window.open(
@@ -143,36 +188,49 @@ export function useMountProsemirror({
       useEditorStates.setState((s) => {
         let oldEditorState = this.state;
         let newState = this.state.apply(tr);
-        let addToHistory = tr.getMeta("addToHistory");
-        let isBulkOp = tr.getMeta("bulkOp");
         let docHasChanges = tr.steps.length !== 0 || tr.docChanged;
 
-        // Handle undo/redo history with timeout-based grouping
-        if (addToHistory !== false && docHasChanges) {
-          if (actionTimeout.current) window.clearTimeout(actionTimeout.current);
-          else if (!isBulkOp) rep.undoManager.startGroup();
-
-          if (!isBulkOp) {
-            actionTimeout.current = window.setTimeout(() => {
-              rep.undoManager.endGroup();
-              actionTimeout.current = null;
-            }, 200);
+        // Diff for removed/added footnote nodes
+        if (docHasChanges) {
+          let oldFootnotes = new Set<string>();
+          let newFootnotes = new Set<string>();
+          oldEditorState.doc.descendants((n) => {
+            if (n.type.name === "footnote")
+              oldFootnotes.add(n.attrs.footnoteEntityID);
+          });
+          newState.doc.descendants((n) => {
+            if (n.type.name === "footnote")
+              newFootnotes.add(n.attrs.footnoteEntityID);
+          });
+          // Removed footnotes
+          for (let id of oldFootnotes) {
+            if (!newFootnotes.has(id)) {
+              repRef.current?.mutate.deleteFootnote({
+                footnoteEntityID: id,
+                blockID: entityID,
+              });
+            }
           }
+        }
 
-          let setState = (s: EditorState) => () =>
-            useEditorStates.setState(
-              produce((draft) => {
-                let view = draft.editorStates[entityID]?.view;
-                if (!view?.hasFocus() && !isBulkOp) view?.focus();
-                draft.editorStates[entityID]!.editor = s;
-              }),
-            );
+        // Handle undo/redo history with timeout-based grouping
+        let isBulkOp = tr.getMeta("bulkOp");
+        let setState = (s: EditorState) => () =>
+          useEditorStates.setState(
+            produce((draft) => {
+              let view = draft.editorStates[entityID]?.view;
+              if (!view?.hasFocus() && !isBulkOp) view?.focus();
+              draft.editorStates[entityID]!.editor = s;
+            }),
+          );
 
-          rep.undoManager.add({
-            redo: setState(newState),
-            undo: setState(oldEditorState),
-          });
-        }
+        trackUndoRedo(
+          tr,
+          rep.undoManager,
+          actionTimeout,
+          setState(oldEditorState),
+          setState(newState),
+        );
 
         return {
           editorStates: {
@@ -191,7 +249,33 @@ export function useMountProsemirror({
   return { mountRef, actionTimeout };
 }
 
-function useYJSValue(entityID: string) {
+export function trackUndoRedo(
+  tr: Transaction,
+  undoManager: UndoManager,
+  actionTimeout: { current: number | null },
+  undo: () => void,
+  redo: () => void,
+) {
+  let addToHistory = tr.getMeta("addToHistory");
+  let isBulkOp = tr.getMeta("bulkOp");
+  let docHasChanges = tr.steps.length !== 0 || tr.docChanged;
+
+  if (addToHistory !== false && docHasChanges) {
+    if (actionTimeout.current) window.clearTimeout(actionTimeout.current);
+    else if (!isBulkOp) undoManager.startGroup();
+
+    if (!isBulkOp) {
+      actionTimeout.current = window.setTimeout(() => {
+        undoManager.endGroup();
+        actionTimeout.current = null;
+      }, 200);
+    }
+
+    undoManager.add({ undo, redo });
+  }
+}
+
+export function useYJSValue(entityID: string) {
   const [ydoc] = useState(new Y.Doc());
   const docStateFromReplicache = useEntity(entityID, "block/text");
   let rep = useReplicache();
diff --git a/components/Blocks/TextBlock/schema.ts b/components/Blocks/TextBlock/schema.ts
index ab9ff2a6..88b2ed91 100644
--- a/components/Blocks/TextBlock/schema.ts
+++ b/components/Blocks/TextBlock/schema.ts
@@ -194,6 +194,41 @@ let baseSchema = {
         ];
       },
     } as NodeSpec,
+    footnote: {
+      attrs: { footnoteEntityID: {} },
+      group: "inline",
+      inline: true,
+      atom: true,
+      selectable: false,
+      draggable: false,
+      parseDOM: [
+        {
+          tag: "span.footnote-ref",
+          getAttrs(dom: HTMLElement) {
+            return {
+              footnoteEntityID: dom.getAttribute("data-footnote-id"),
+            };
+          },
+        },
+        {
+          tag: "sup.footnote-ref",
+          getAttrs(dom: HTMLElement) {
+            return {
+              footnoteEntityID: dom.getAttribute("data-footnote-id"),
+            };
+          },
+        },
+      ],
+      toDOM(node) {
+        return [
+          "span",
+          {
+            class: "footnote-ref",
+            "data-footnote-id": node.attrs.footnoteEntityID,
+          },
+        ];
+      },
+    } as NodeSpec,
     didMention: {
       attrs: {
         did: {},
diff --git a/components/Blocks/index.tsx b/components/Blocks/index.tsx
index f5d49802..b37b29c1 100644
--- a/components/Blocks/index.tsx
+++ b/components/Blocks/index.tsx
@@ -14,9 +14,10 @@ import { generateKeyBetween } from "fractional-indexing";
 import { v7 } from "uuid";
 
 import { Block } from "./Block";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { addShortcut } from "src/shortcuts";
 import { useHandleDrop } from "./useHandleDrop";
+import { useFootnoteContext } from "components/Footnotes/FootnoteContext";
 
 export function Blocks(props: { entityID: string }) {
   let rep = useReplicache();
@@ -93,9 +94,17 @@ export function Blocks(props: { entityID: string }) {
       ),
   );
 
+  let { footnotes } = useFootnoteContext();
+
+  let [areFootnotes, setAreFootnotes] = useState(false);
+
+  useEffect(() => {
+    setAreFootnotes(footnotes.length > 0);
+  }, [footnotes.length]);
+
   return (
     <div
-      className={`blocks w-full flex flex-col outline-hidden h-fit min-h-full`}
+      className={`blocks w-full flex flex-col outline-hidden ${areFootnotes ? "h-fit" : "min-h-full"}`}
       onClick={async (e) => {
         if (!permissions.write) return;
         if (useUIState.getState().selectedBlocks.length > 1) return;
@@ -167,6 +176,7 @@ export function Blocks(props: { entityID: string }) {
         lastVisibleBlock={lastVisibleBlock || undefined}
         lastRootBlock={lastRootBlock || undefined}
         entityID={props.entityID}
+        areFootnotes={areFootnotes}
       />
     </div>
   );
@@ -226,6 +236,7 @@ const BlockListBottom = (props: {
   lastRootBlock: Block | undefined;
   lastVisibleBlock: Block | undefined;
   entityID: string;
+  areFootnotes: boolean;
 }) => {
   let { rep } = useReplicache();
   let entity_set = useEntitySetContext();
@@ -236,9 +247,11 @@ const BlockListBottom = (props: {
   });
 
   if (!entity_set.permissions.write) return;
+  if (props.areFootnotes) return;
+
   return (
     <div
-      className="blockListClickableBottomArea shrink-0 h-[50vh]"
+      className="blockListClickableBottomArea grow shrink-0 h-[50vh]"
       onClick={() => {
         let newEntityID = v7();
         if (
diff --git a/components/DesktopFooter.tsx b/components/DesktopFooter.tsx
index f8937218..976b47b7 100644
--- a/components/DesktopFooter.tsx
+++ b/components/DesktopFooter.tsx
@@ -2,6 +2,7 @@
 import { useUIState } from "src/useUIState";
 import { Media } from "./Media";
 import { Toolbar } from "./Toolbar";
+import { FootnoteToolbar } from "./Toolbar/FootnoteToolbarWrapper";
 import { useEntitySetContext } from "./EntitySetProvider";
 import { focusBlock } from "src/utils/focusBlock";
 import { hasBlockToolbar } from "app/[leaflet_id]/Footer";
@@ -18,6 +19,10 @@ export function DesktopPageFooter(props: { pageID: string }) {
   let blockType = useEntity(focusedEntity?.entityID || null, "block/type")?.data
     .value;
 
+  let isFootnoteFocused =
+    focusedEntity?.entityType === "footnote" &&
+    focusedEntity.parent === props.pageID;
+
   return (
     <Media
       mobile={false}
@@ -41,6 +46,16 @@ export function DesktopPageFooter(props: { pageID: string }) {
             />
           </div>
         )}
+      {isFootnoteFocused && entity_set.permissions.write && (
+        <div
+          className="pointer-events-auto w-fit mx-auto py-1 px-3 h-9 bg-bg-page border border-border rounded-full shadow-sm"
+          onMouseDown={(e) => {
+            if (e.currentTarget === e.target) e.preventDefault();
+          }}
+        >
+          <FootnoteToolbar pageID={props.pageID} />
+        </div>
+      )}
     </Media>
   );
 }
diff --git a/components/Footnotes/FootnoteContext.tsx b/components/Footnotes/FootnoteContext.tsx
new file mode 100644
index 00000000..918c7461
--- /dev/null
+++ b/components/Footnotes/FootnoteContext.tsx
@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+import type { FootnoteInfo } from "./usePageFootnotes";
+
+type FootnoteContextValue = {
+  pageID: string;
+  footnotes: FootnoteInfo[];
+  indexMap: Record<string, number>;
+};
+
+export const FootnoteContext = createContext<FootnoteContextValue>({
+  pageID: "",
+  footnotes: [],
+  indexMap: {},
+});
+
+export function useFootnoteContext() {
+  return useContext(FootnoteContext);
+}
diff --git a/components/Footnotes/FootnoteEditor.tsx b/components/Footnotes/FootnoteEditor.tsx
new file mode 100644
index 00000000..a2a2d30a
--- /dev/null
+++ b/components/Footnotes/FootnoteEditor.tsx
@@ -0,0 +1,235 @@
+import { useLayoutEffect, useRef } from "react";
+import { EditorState, TextSelection } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
+import { ySyncPlugin } from "y-prosemirror";
+import { schema } from "components/Blocks/TextBlock/schema";
+import { useReplicache } from "src/replicache";
+import { autolink } from "components/Blocks/TextBlock/autolink-plugin";
+import { betterIsUrl } from "src/utils/isURL";
+import {
+  useYJSValue,
+  trackUndoRedo,
+} from "components/Blocks/TextBlock/mountProsemirror";
+import { DeleteTiny } from "components/Icons/DeleteTiny";
+import { FootnoteItemLayout } from "./FootnoteItemLayout";
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import { useFootnoteContext } from "./FootnoteContext";
+
+export function FootnoteEditor(props: {
+  footnoteEntityID: string;
+  index: number;
+  editable: boolean;
+  onDelete?: () => void;
+  autoFocus?: boolean;
+}) {
+  let mountRef = useRef<HTMLDivElement | null>(null);
+  let rep = useReplicache();
+  let value = useYJSValue(props.footnoteEntityID);
+  let actionTimeout = useRef<number | null>(null);
+  let { pageID } = useFootnoteContext();
+
+  useLayoutEffect(() => {
+    if (!mountRef.current || !value) return;
+
+    let plugins = [
+      ySyncPlugin(value),
+      keymap({
+        "Meta-b": toggleMark(schema.marks.strong),
+        "Ctrl-b": toggleMark(schema.marks.strong),
+        "Meta-u": toggleMark(schema.marks.underline),
+        "Ctrl-u": toggleMark(schema.marks.underline),
+        "Meta-i": toggleMark(schema.marks.em),
+        "Ctrl-i": toggleMark(schema.marks.em),
+        "Shift-Enter": (state, dispatch) => {
+          let hardBreak = schema.nodes.hard_break.create();
+          if (dispatch) {
+            dispatch(state.tr.replaceSelectionWith(hardBreak).scrollIntoView());
+          }
+          return true;
+        },
+        Enter: (_state, _dispatch, view) => {
+          view?.dom.blur();
+          return true;
+        },
+      }),
+      keymap(baseKeymap),
+      autolink({
+        type: schema.marks.link,
+        shouldAutoLink: () => true,
+        defaultProtocol: "https",
+      }),
+    ];
+
+    let state = EditorState.create({ schema, plugins });
+    let view = new EditorView(
+      { mount: mountRef.current },
+      {
+        state,
+        editable: () => props.editable,
+        handlePaste: (view, e) => {
+          let text = e.clipboardData?.getData("text");
+          if (text && betterIsUrl(text)) {
+            let selection = view.state.selection as TextSelection;
+            let tr = view.state.tr;
+            let { from, to } = selection;
+            if (selection.empty) {
+              tr.insertText(text, selection.from);
+              tr.addMark(
+                from,
+                from + text.length,
+                schema.marks.link.create({ href: text }),
+              );
+            } else {
+              tr.addMark(from, to, schema.marks.link.create({ href: text }));
+            }
+            view.dispatch(tr);
+            return true;
+          }
+        },
+        handleClickOn: (_view, _pos, node, _nodePos, _event, direct) => {
+          if (!direct) return;
+          if (node.nodeSize - 2 <= _pos) return;
+          const nodeAt1 = node.nodeAt(_pos - 1);
+          const nodeAt2 = node.nodeAt(Math.max(_pos - 2, 0));
+          let linkMark =
+            nodeAt1?.marks.find((f) => f.type === schema.marks.link) ||
+            nodeAt2?.marks.find((f) => f.type === schema.marks.link);
+          if (linkMark) {
+            window.open(linkMark.attrs.href, "_blank");
+            return;
+          }
+        },
+        dispatchTransaction(this: EditorView, tr) {
+          let oldState = this.state;
+          let newState = this.state.apply(tr);
+          this.updateState(newState);
+
+          useEditorStates.setState((s) => ({
+            editorStates: {
+              ...s.editorStates,
+              [props.footnoteEntityID]: {
+                editor: newState,
+                view: this,
+              },
+            },
+          }));
+
+          trackUndoRedo(
+            tr,
+            rep.undoManager,
+            actionTimeout,
+            () => {
+              this.focus();
+              this.updateState(oldState);
+            },
+            () => {
+              this.focus();
+              this.updateState(newState);
+            },
+          );
+        },
+      },
+    );
+
+    // Register editor state
+    useEditorStates.setState((s) => ({
+      editorStates: {
+        ...s.editorStates,
+        [props.footnoteEntityID]: {
+          editor: view.state,
+          view,
+        },
+      },
+    }));
+
+    // Subscribe to external state changes (e.g. link toolbar)
+    let unsubscribe = useEditorStates.subscribe((s) => {
+      let editorState = s.editorStates[props.footnoteEntityID];
+      if (editorState?.editor)
+        editorState.view?.updateState(editorState.editor);
+    });
+
+    // Set focusedEntity on focus
+    let handleFocus = () => {
+      useUIState.setState({
+        focusedEntity: {
+          entityType: "footnote",
+          entityID: props.footnoteEntityID,
+          parent: pageID,
+        },
+      });
+    };
+    view.dom.addEventListener("focus", handleFocus);
+
+    if (props.autoFocus) {
+      setTimeout(() => view.focus(), 50);
+    }
+
+    return () => {
+      unsubscribe();
+      view.dom.removeEventListener("focus", handleFocus);
+      view.destroy();
+      useEditorStates.setState((s) => {
+        let { [props.footnoteEntityID]: _, ...rest } = s.editorStates;
+        return { editorStates: rest };
+      });
+    };
+  }, [
+    props.footnoteEntityID,
+    value,
+    props.editable,
+    props.autoFocus,
+    rep.undoManager,
+    pageID,
+  ]);
+
+  return (
+    <div data-footnote-editor={props.footnoteEntityID}>
+      <FootnoteItemLayout
+        index={props.index}
+        indexAction={() => {
+          let pm = mountRef.current?.querySelector(
+            ".ProseMirror",
+          ) as HTMLElement | null;
+          if (pm) {
+            pm.focus();
+          }
+        }}
+        trailing={
+          props.editable && props.onDelete ? (
+            <FootnoteDeleteButton
+              footnoteEntityID={props.footnoteEntityID}
+              onDelete={props.onDelete}
+            />
+          ) : undefined
+        }
+      >
+        <div ref={mountRef} className="outline-hidden" />
+      </FootnoteItemLayout>
+    </div>
+  );
+}
+
+function FootnoteDeleteButton(props: {
+  footnoteEntityID: string;
+  onDelete: () => void;
+}) {
+  let isActive = useUIState(
+    (s) =>
+      s.focusedEntity?.entityType === "footnote" &&
+      s.focusedEntity.entityID === props.footnoteEntityID,
+  );
+
+  return (
+    <button
+      className={`shrink-0 mt-0.5 text-tertiary hover:text-accent-contrast transition-opacity ${isActive ? "opacity-100" : "opacity-0"}`}
+      onClick={props.onDelete}
+      title="Delete footnote"
+    >
+      <DeleteTiny />
+    </button>
+  );
+}
diff --git a/components/Footnotes/FootnoteItemLayout.tsx b/components/Footnotes/FootnoteItemLayout.tsx
new file mode 100644
index 00000000..72c60528
--- /dev/null
+++ b/components/Footnotes/FootnoteItemLayout.tsx
@@ -0,0 +1,58 @@
+import { ReactNode } from "react";
+
+export function FootnoteItemLayout(props: {
+  index: number;
+  indexAction?: () => void;
+  indexHref?: string;
+  children: ReactNode;
+  trailing?: ReactNode;
+  id?: string;
+  className?: string;
+}) {
+  let indexClassName =
+    "text-tertiary font-medium shrink-0 text-sm leading-normal no-underline hover:underline cursor-pointer";
+
+  let indexContent = <>{props.index}.</>;
+
+  return (
+    <div
+      id={props.id}
+      className={`footnote-item flex items-start gap-2 text-sm group/footnote ${props.className ?? ""}`}
+    >
+      {props.indexHref ? (
+        <a href={props.indexHref} className={indexClassName}>
+          {indexContent}
+        </a>
+      ) : (
+        <button
+          className={indexClassName}
+          onClick={props.indexAction}
+          title="Jump to footnote in text"
+        >
+          {indexContent}
+        </button>
+      )}
+      <div
+        className="grow min-w-0 text-secondary [&_.ProseMirror]:outline-hidden"
+        style={{ wordBreak: "break-word" }}
+      >
+        {props.children}
+      </div>
+      {props.trailing}
+    </div>
+  );
+}
+
+export function FootnoteSectionLayout(props: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={`footnote-section px-3 sm:px-4 pb-2 ${props.className ?? ""}`}
+    >
+      <hr className="border-border-light mb-3" />
+      <div className="flex flex-col gap-2">{props.children}</div>
+    </div>
+  );
+}
diff --git a/components/Footnotes/FootnotePopover.tsx b/components/Footnotes/FootnotePopover.tsx
new file mode 100644
index 00000000..f839517c
--- /dev/null
+++ b/components/Footnotes/FootnotePopover.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, useMemo } from "react";
+import { create } from "zustand";
+import { useFootnoteContext } from "./FootnoteContext";
+import { FootnoteEditor } from "./FootnoteEditor";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
+
+type FootnotePopoverState = {
+  activeFootnoteID: string | null;
+  anchorElement: HTMLElement | null;
+  open: (footnoteID: string, anchor: HTMLElement) => void;
+  close: () => void;
+};
+
+export const useFootnotePopoverStore = create<FootnotePopoverState>((set) => ({
+  activeFootnoteID: null,
+  anchorElement: null,
+  open: (footnoteID, anchor) =>
+    set({ activeFootnoteID: footnoteID, anchorElement: anchor }),
+  close: () => set({ activeFootnoteID: null, anchorElement: null }),
+}));
+
+export function FootnotePopover() {
+  let { activeFootnoteID, anchorElement, close } = useFootnotePopoverStore();
+  let { footnotes } = useFootnoteContext();
+  let { permissions } = useEntitySetContext();
+  let rep = useReplicache();
+  let popoverRef = useRef<HTMLDivElement>(null);
+  let [position, setPosition] = useState<{
+    top: number;
+    left: number;
+    arrowLeft: number;
+  } | null>(null);
+
+  let footnote = footnotes.find(
+    (fn) => fn.footnoteEntityID === activeFootnoteID,
+  );
+
+  // Compute the displayed index from DOM order (matching CSS counters)
+  // rather than the data model order, which may differ if footnotes
+  // were inserted out of order within a block.
+  let displayIndex = useMemo(() => {
+    if (!anchorElement || !footnote) return footnote?.index ?? 0;
+    let container = anchorElement.closest('.footnote-scope');
+    if (!container) return footnote.index;
+    let allRefs = Array.from(container.querySelectorAll(".footnote-ref"));
+    let pos = allRefs.indexOf(anchorElement);
+    return pos >= 0 ? pos + 1 : footnote.index;
+  }, [anchorElement, footnote]);
+
+  let updatePosition = useCallback(() => {
+    if (!anchorElement || !popoverRef.current) return;
+
+    let anchorRect = anchorElement.getBoundingClientRect();
+    let popoverWidth = popoverRef.current.offsetWidth;
+    let popoverHeight = popoverRef.current.offsetHeight;
+
+    // Position above the anchor by default, fall back to below
+    let top = anchorRect.top - popoverHeight - 8;
+    let left = anchorRect.left + anchorRect.width / 2 - popoverWidth / 2;
+
+    // Clamp horizontal position
+    let padding = 12;
+    left = Math.max(
+      padding,
+      Math.min(left, window.innerWidth - popoverWidth - padding),
+    );
+
+    // Arrow position relative to popover
+    let arrowLeft = anchorRect.left + anchorRect.width / 2 - left;
+
+    // If not enough room above, show below
+    if (top < padding) {
+      top = anchorRect.bottom + 8;
+    }
+
+    setPosition({ top, left, arrowLeft });
+  }, [anchorElement]);
+
+  useEffect(() => {
+    if (!activeFootnoteID || !anchorElement) {
+      setPosition(null);
+      return;
+    }
+
+    // Delay to let the popover render so we can measure it
+    requestAnimationFrame(updatePosition);
+
+    let handleClickOutside = (e: Event) => {
+      let target = e.target as Node;
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(target) &&
+        !anchorElement.contains(target)
+      ) {
+        close();
+      }
+    };
+
+    let handleScroll = () => close();
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("touchstart", handleClickOutside);
+    // Close on scroll of any scroll container
+    let scrollWrapper = anchorElement.closest(".pageScrollWrapper");
+    scrollWrapper?.addEventListener("scroll", handleScroll);
+    window.addEventListener("resize", close);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("touchstart", handleClickOutside);
+      scrollWrapper?.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", close);
+    };
+  }, [activeFootnoteID, anchorElement, close, updatePosition]);
+
+  if (!activeFootnoteID || !footnote) return null;
+
+  return (
+    <div
+      ref={popoverRef}
+      className="footnote-popover fixed z-50 bg-bg-page border border-border rounded-lg shadow-md px-3 py-2 w-[min(calc(100vw-24px),320px)]"
+      style={{
+        top: position?.top ?? -9999,
+        left: position?.left ?? -9999,
+        visibility: position ? "visible" : "hidden",
+      }}
+    >
+      <FootnoteEditor
+        footnoteEntityID={footnote.footnoteEntityID}
+        index={displayIndex}
+        editable={permissions.write}
+        autoFocus={permissions.write}
+        onDelete={
+          permissions.write
+            ? () => {
+                deleteFootnoteFromBlock(
+                  footnote.footnoteEntityID,
+                  footnote.blockID,
+                  rep.rep,
+                );
+                close();
+              }
+            : undefined
+        }
+      />
+    </div>
+  );
+}
diff --git a/components/Footnotes/FootnoteSection.tsx b/components/Footnotes/FootnoteSection.tsx
new file mode 100644
index 00000000..b230d150
--- /dev/null
+++ b/components/Footnotes/FootnoteSection.tsx
@@ -0,0 +1,38 @@
+import { useFootnoteContext } from "./FootnoteContext";
+import { FootnoteEditor } from "./FootnoteEditor";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
+import { FootnoteSectionLayout } from "./FootnoteItemLayout";
+
+export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) {
+  let { footnotes } = useFootnoteContext();
+  let { permissions } = useEntitySetContext();
+  let rep = useReplicache();
+
+  if (footnotes.length === 0) return null;
+
+  return (
+    <FootnoteSectionLayout className={props.hiddenOnDesktop ? "lg:hidden" : ""}>
+      {footnotes.map((fn) => (
+        <FootnoteEditor
+          key={fn.footnoteEntityID}
+          footnoteEntityID={fn.footnoteEntityID}
+          index={fn.index}
+          editable={permissions.write}
+          onDelete={
+            permissions.write
+              ? () => {
+                  deleteFootnoteFromBlock(
+                    fn.footnoteEntityID,
+                    fn.blockID,
+                    rep.rep,
+                  );
+                }
+              : undefined
+          }
+        />
+      ))}
+    </FootnoteSectionLayout>
+  );
+}
diff --git a/components/Footnotes/FootnoteSideColumn.tsx b/components/Footnotes/FootnoteSideColumn.tsx
new file mode 100644
index 00000000..f73fac18
--- /dev/null
+++ b/components/Footnotes/FootnoteSideColumn.tsx
@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { useFootnoteContext } from "./FootnoteContext";
+import { FootnoteEditor } from "./FootnoteEditor";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { deleteFootnoteFromBlock } from "./deleteFootnoteFromBlock";
+import { FootnoteSideColumnLayout } from "./FootnoteSideColumnLayout";
+
+type EditorFootnoteItem = {
+  id: string;
+  index: number;
+  footnoteEntityID: string;
+  blockID: string;
+};
+
+export function FootnoteSideColumn(props: {
+  pageEntityID: string;
+  visible: boolean;
+  fullPageScroll?: boolean;
+}) {
+  let { footnotes } = useFootnoteContext();
+  let { permissions } = useEntitySetContext();
+  let rep = useReplicache();
+
+  let items: EditorFootnoteItem[] = footnotes.map((fn) => ({
+    id: fn.footnoteEntityID,
+    index: fn.index,
+    footnoteEntityID: fn.footnoteEntityID,
+    blockID: fn.blockID,
+  }));
+
+  let getAnchorSelector = useCallback(
+    (item: EditorFootnoteItem) =>
+      `.footnote-ref[data-footnote-id="${item.id}"]`,
+    [],
+  );
+
+  let renderItem = useCallback(
+    (item: EditorFootnoteItem & { top: number }) => (
+      <FootnoteEditor
+        footnoteEntityID={item.footnoteEntityID}
+        index={item.index}
+        editable={permissions.write}
+        onDelete={
+          permissions.write
+            ? () => deleteFootnoteFromBlock(item.footnoteEntityID, item.blockID, rep.rep)
+            : undefined
+        }
+      />
+    ),
+    [permissions.write, rep.rep],
+  );
+
+  return (
+    <FootnoteSideColumnLayout
+      items={items}
+      visible={props.visible}
+      fullPageScroll={props.fullPageScroll}
+      getAnchorSelector={getAnchorSelector}
+      renderItem={renderItem}
+    />
+  );
+}
diff --git a/components/Footnotes/FootnoteSideColumnLayout.tsx b/components/Footnotes/FootnoteSideColumnLayout.tsx
new file mode 100644
index 00000000..ae9007ba
--- /dev/null
+++ b/components/Footnotes/FootnoteSideColumnLayout.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
+import { useUIState } from "src/useUIState";
+
+export type FootnoteSideItem = {
+  id: string;
+  index: number;
+};
+
+const GAP = 4;
+
+export function FootnoteSideColumnLayout<T extends FootnoteSideItem>(props: {
+  items: T[];
+  visible: boolean;
+  fullPageScroll?: boolean;
+  getAnchorSelector: (item: T) => string;
+  renderItem: (item: T & { top: number }) => ReactNode;
+}) {
+  let containerRef = useRef<HTMLDivElement>(null);
+  let innerRef = useRef<HTMLDivElement>(null);
+  let [positions, setPositions] = useState<(T & { top: number })[]>([]);
+  let [scrollOffset, setScrollOffset] = useState(0);
+
+  let calculatePositions = useCallback(() => {
+    let container = containerRef.current;
+    let inner = innerRef.current;
+    if (!container || !inner || props.items.length === 0) {
+      setPositions([]);
+      return;
+    }
+
+    let scrollWrapper = container.closest(".pageWrapper")
+      ?.querySelector(".pageScrollWrapper") as HTMLElement | null;
+    if (!scrollWrapper) return;
+
+    let scrollTop = scrollWrapper.scrollTop;
+    let scrollWrapperRect = scrollWrapper.getBoundingClientRect();
+    setScrollOffset(scrollTop);
+
+    let measurements: (T & { anchorTop: number; height: number })[] = [];
+
+    for (let item of props.items) {
+      let supEl = scrollWrapper.querySelector(
+        props.getAnchorSelector(item),
+      ) as HTMLElement | null;
+      if (!supEl) continue;
+
+      let supRect = supEl.getBoundingClientRect();
+      let anchorTop = supRect.top - scrollWrapperRect.top + scrollTop;
+
+      let itemEl = inner.querySelector(
+        `[data-footnote-side-id="${item.id}"]`,
+      ) as HTMLElement | null;
+      let height = itemEl ? itemEl.offsetHeight : 54;
+
+      measurements.push({ ...item, anchorTop, height });
+    }
+
+    let resolved: (T & { top: number })[] = [];
+    let nextAvailableTop = 0;
+    for (let m of measurements) {
+      let top = Math.max(m.anchorTop, nextAvailableTop);
+      resolved.push({
+        ...m,
+        top,
+      });
+      nextAvailableTop = top + m.height + GAP;
+    }
+
+    setPositions(resolved);
+  }, [props.items, props.getAnchorSelector]);
+
+  useEffect(() => {
+    if (!props.visible) return;
+    calculatePositions();
+
+    let scrollWrapper = containerRef.current?.closest(".pageWrapper")
+      ?.querySelector(".pageScrollWrapper") as HTMLElement | null;
+    if (!scrollWrapper) return;
+
+    let onScroll = () => {
+      setScrollOffset(scrollWrapper!.scrollTop);
+    };
+
+    scrollWrapper.addEventListener("scroll", onScroll);
+
+    let resizeObserver = new ResizeObserver(calculatePositions);
+    resizeObserver.observe(scrollWrapper);
+
+    let mutationObserver = new MutationObserver(calculatePositions);
+    mutationObserver.observe(scrollWrapper, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      scrollWrapper!.removeEventListener("scroll", onScroll);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [props.visible, calculatePositions]);
+
+  if (!props.visible || props.items.length === 0) return null;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`footnote-side-column hidden lg:block absolute top-0 w-[200px] pointer-events-none ${
+        props.fullPageScroll
+          ? "left-[calc(50%+var(--page-width-units)/2+12px)]"
+          : "left-full ml-3"
+      }`}
+      style={{ height: "100%" }}
+    >
+      <div
+        ref={innerRef}
+        className="relative pointer-events-auto"
+        style={{ transform: `translateY(-${scrollOffset}px)` }}
+      >
+        {positions.map((item) => (
+          <SideItem key={item.id} id={item.id} top={item.top} onResize={calculatePositions}>
+            {props.renderItem(item)}
+          </SideItem>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function SideItem(props: {
+  children: ReactNode;
+  id: string;
+  top: number;
+  onResize: () => void;
+}) {
+  let ref = useRef<HTMLDivElement>(null);
+  let [overflows, setOverflows] = useState(false);
+  let isFocused = useUIState(
+    (s) =>
+      s.focusedEntity?.entityType === "footnote" &&
+      s.focusedEntity.entityID === props.id,
+  );
+
+  useEffect(() => {
+    let el = ref.current;
+    if (!el) return;
+
+    let check = () => setOverflows(el!.scrollHeight > el!.clientHeight + 1);
+    check();
+
+    let ro = new ResizeObserver(() => {
+      check();
+      props.onResize();
+    });
+    ro.observe(el);
+
+    let mo = new MutationObserver(check);
+    mo.observe(el, { childList: true, subtree: true, characterData: true });
+
+    return () => {
+      ro.disconnect();
+      mo.disconnect();
+    };
+  }, [props.onResize]);
+
+  return (
+    <div
+      ref={ref}
+      data-footnote-side-id={props.id}
+      className={`absolute left-0 right-0 text-sm footnote-side-enter footnote-side-item${overflows ? " has-overflow" : ""}${isFocused ? " footnote-side-focused" : ""}`}
+      style={{ top: props.top }}
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/components/Footnotes/deleteFootnoteFromBlock.ts b/components/Footnotes/deleteFootnoteFromBlock.ts
new file mode 100644
index 00000000..ed97a0a2
--- /dev/null
+++ b/components/Footnotes/deleteFootnoteFromBlock.ts
@@ -0,0 +1,32 @@
+import { useEditorStates } from "src/state/useEditorState";
+
+export function deleteFootnoteFromBlock(
+  footnoteEntityID: string,
+  blockID: string,
+  rep: any,
+) {
+  if (!rep) return;
+
+  let editorState = useEditorStates.getState().editorStates[blockID];
+  if (editorState?.view) {
+    let view = editorState.view;
+    let { doc } = view.state;
+    let tr = view.state.tr;
+    let found = false;
+    doc.descendants((node, pos) => {
+      if (
+        found ||
+        node.type.name !== "footnote" ||
+        node.attrs.footnoteEntityID !== footnoteEntityID
+      )
+        return;
+      found = true;
+      tr.delete(pos, pos + node.nodeSize);
+    });
+    if (found) {
+      view.dispatch(tr);
+    }
+  }
+
+  rep.mutate.deleteFootnote({ footnoteEntityID, blockID });
+}
diff --git a/components/Footnotes/usePageFootnotes.ts b/components/Footnotes/usePageFootnotes.ts
new file mode 100644
index 00000000..b2889a9a
--- /dev/null
+++ b/components/Footnotes/usePageFootnotes.ts
@@ -0,0 +1,61 @@
+import { useReplicache } from "src/replicache";
+import { useSubscribe } from "src/replicache/useSubscribe";
+import { scanIndex } from "src/replicache/utils";
+
+export type FootnoteInfo = {
+  footnoteEntityID: string;
+  blockID: string;
+  index: number;
+};
+
+export function usePageFootnotes(pageID: string) {
+  let rep = useReplicache();
+  let data = useSubscribe(
+    rep?.rep,
+    async (tx) => {
+      let scan = scanIndex(tx);
+      let cardBlocks = await scan.eav(pageID, "card/block");
+      let canvasBlocks = await scan.eav(pageID, "canvas/block");
+
+      let sortedCardBlocks = cardBlocks
+        .map((b) => ({ value: b.data.value, position: b.data.position }))
+        .toSorted((a, b) => (a.position > b.position ? 1 : -1));
+
+      let sortedCanvasBlocks = canvasBlocks
+        .map((b) => ({ value: b.data.value, position: b.data.position }))
+        .toSorted((a, b) => {
+          if (a.position.y === b.position.y) return a.position.x - b.position.x;
+          return a.position.y - b.position.y;
+        });
+
+      let sorted = [...sortedCardBlocks, ...sortedCanvasBlocks];
+
+      let footnotes: FootnoteInfo[] = [];
+      let indexMap: Record<string, number> = {};
+      let idx = 1;
+
+      for (let block of sorted) {
+        let blockFootnotes = await scan.eav(block.value, "block/footnote");
+        let sortedFootnotes = blockFootnotes.toSorted((a, b) =>
+          a.data.position > b.data.position ? 1 : -1,
+        );
+        for (let fn of sortedFootnotes) {
+          footnotes.push({
+            footnoteEntityID: fn.data.value,
+            blockID: block.value,
+            index: idx,
+          });
+          indexMap[fn.data.value] = idx;
+          idx++;
+        }
+      }
+
+      return { pageID, footnotes, indexMap };
+    },
+    { dependencies: [pageID] },
+  );
+
+  return (
+    data || { pageID, footnotes: [], indexMap: {} as Record<string, number> }
+  );
+}
diff --git a/components/Pages/Page.tsx b/components/Pages/Page.tsx
index 134f6ede..30f74696 100644
--- a/components/Pages/Page.tsx
+++ b/components/Pages/Page.tsx
@@ -17,6 +17,11 @@ import { PageOptions } from "./PageOptions";
 import { CardThemeProvider } from "components/ThemeManager/ThemeProvider";
 import { useDrawerOpen } from "app/lish/[did]/[publication]/[rkey]/Interactions/InteractionDrawer";
 import { usePreserveScroll } from "src/hooks/usePreserveScroll";
+import { usePageFootnotes } from "components/Footnotes/usePageFootnotes";
+import { FootnoteContext } from "components/Footnotes/FootnoteContext";
+import { FootnoteSection } from "components/Footnotes/FootnoteSection";
+import { FootnoteSideColumn } from "components/Footnotes/FootnoteSideColumn";
+import { FootnotePopover } from "components/Footnotes/FootnotePopover";
 
 export function Page(props: {
   entityID: string;
@@ -36,37 +41,55 @@ export function Page(props: {
   let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
 
   let drawerOpen = useDrawerOpen(props.entityID);
+  let footnoteData = usePageFootnotes(props.entityID);
+  let isRightmostPage = useUIState((s) => {
+    let pages = s.openPages;
+    if (pages.length === 0) return true;
+    return pages[pages.length - 1] === props.entityID;
+  });
+  let sideColumnVisible = pageType === "doc" && !drawerOpen && isRightmostPage;
+
   return (
     <CardThemeProvider entityID={props.entityID}>
-      <PageWrapper
-        onClickAction={(e) => {
-          if (e.defaultPrevented) return;
-          if (rep) {
-            if (isFocused) return;
-            focusPage(props.entityID, rep);
+      <FootnoteContext.Provider value={footnoteData}>
+        <PageWrapper
+          onClickAction={(e) => {
+            if (e.defaultPrevented) return;
+            if (rep) {
+              if (isFocused) return;
+              focusPage(props.entityID, rep);
+            }
+          }}
+          id={elementId.page(props.entityID).container}
+          drawerOpen={!!drawerOpen}
+          isFocused={isFocused}
+          fullPageScroll={props.fullPageScroll}
+          pageType={pageType}
+          pageOptions={
+            <PageOptions
+              entityID={props.entityID}
+              first={props.first}
+              isFocused={isFocused}
+            />
           }
-        }}
-        id={elementId.page(props.entityID).container}
-        drawerOpen={!!drawerOpen}
-        isFocused={isFocused}
-        fullPageScroll={props.fullPageScroll}
-        pageType={pageType}
-        pageOptions={
-          <PageOptions
-            entityID={props.entityID}
-            first={props.first}
-            isFocused={isFocused}
-          />
-        }
-      >
-        {props.first && pageType === "doc" && (
-          <>
-            <PublicationMetadata />
-          </>
-        )}
-        <PageContent entityID={props.entityID} first={props.first} />
-      </PageWrapper>
-      <DesktopPageFooter pageID={props.entityID} />
+          footnoteSideColumn={
+            <FootnoteSideColumn
+              pageEntityID={props.entityID}
+              visible={sideColumnVisible}
+              fullPageScroll={props.fullPageScroll}
+            />
+          }
+        >
+          {props.first && pageType === "doc" && (
+            <>
+              <PublicationMetadata />
+            </>
+          )}
+          <PageContent entityID={props.entityID} first={props.first} />
+        </PageWrapper>
+        <DesktopPageFooter pageID={props.entityID} />
+        <FootnotePopover />
+      </FootnoteContext.Provider>
     </CardThemeProvider>
   );
 }
@@ -75,6 +98,7 @@ export const PageWrapper = (props: {
   id: string;
   children: React.ReactNode;
   pageOptions?: React.ReactNode;
+  footnoteSideColumn?: React.ReactNode;
   fullPageScroll: boolean;
   isFocused?: boolean;
   onClickAction?: (e: React.MouseEvent) => void;
@@ -123,7 +147,7 @@ export const PageWrapper = (props: {
 `}
       >
         <div
-          className={`postPageContent
+          className={`postPageContent footnote-scope
           ${props.fullPageScroll ? "sm:max-w-[var(--page-width-units)] mx-auto" : "w-full h-full"}
         `}
         >
@@ -132,6 +156,7 @@ export const PageWrapper = (props: {
         </div>
       </div>
       {props.pageOptions}
+      {props.footnoteSideColumn}
     </div>
   );
 };
@@ -205,6 +230,7 @@ const DocContent = (props: { entityID: string }) => {
         />
       ) : null}
       <Blocks entityID={props.entityID} />
+      <FootnoteSection />
       <div className="h-4 sm:h-6 w-full" />
       {/* we handle page bg in this sepate div so that
     we can apply an opacity the background image
diff --git a/components/Toolbar/FootnoteButton.tsx b/components/Toolbar/FootnoteButton.tsx
new file mode 100644
index 00000000..0c4e09f4
--- /dev/null
+++ b/components/Toolbar/FootnoteButton.tsx
@@ -0,0 +1,57 @@
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import { useReplicache } from "src/replicache";
+import { useEntitySetContext } from "components/EntitySetProvider";
+import { insertFootnote } from "components/Blocks/TextBlock/insertFootnote";
+import { TooltipButton } from "components/Buttons";
+import { Props } from "components/Icons/Props";
+import { ToolbarButton } from ".";
+
+export function FootnoteButton() {
+  let rep = useReplicache();
+  let entity_set = useEntitySetContext();
+  let focusedBlock = useUIState((s) => s.focusedEntity);
+
+  return (
+    <ToolbarButton
+      tooltipContent={"Insert Footnote"}
+      onClick={async (e) => {
+        e.preventDefault();
+        if (!focusedBlock || focusedBlock.entityType !== "block") return;
+        let editorState =
+          useEditorStates.getState().editorStates[focusedBlock.entityID];
+        if (!editorState?.view || !rep.rep) return;
+        await insertFootnote(
+          editorState.view,
+          focusedBlock.entityID,
+          rep.rep,
+          entity_set.set,
+        );
+      }}
+    >
+      <FootnoteIcon />
+    </ToolbarButton>
+  );
+}
+
+function FootnoteIcon(props: Props) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M21.3926 4.21564C21.503 4.21564 21.5926 4.30518 21.5926 4.41564V10.0352C21.5926 10.1456 21.503 10.2352 21.3926 10.2352H20.1584C20.0479 10.2352 19.9584 10.1456 19.9584 10.0352V5.74816C19.9584 5.73289 19.946 5.72052 19.9307 5.72052C19.9257 5.72052 19.9208 5.72187 19.9165 5.72444L18.909 6.32717C18.7757 6.40692 18.6063 6.31088 18.6063 6.15553V5.23309C18.6063 5.16341 18.6426 5.09876 18.702 5.06243L20.0397 4.24498C20.0711 4.22579 20.1072 4.21564 20.144 4.21564H21.3926Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.6152 5C13.8361 5 14.0156 5.17948 14.0156 5.40039V10.4297C14.254 10.2111 14.5346 9.9596 15.1074 9.66016C15.6803 9.34771 16.1974 9.19924 16.9785 9.19922C17.7797 9.19927 18.356 9.39478 18.958 9.75879V10.0352C18.9581 10.6977 19.4957 11.2352 20.1582 11.2354H20.417C20.4857 11.3518 20.5525 11.4718 20.6133 11.5977C20.9909 12.353 21.1797 13.2326 21.1797 14.2354C21.1797 15.2379 21.1195 16.0091 20.6455 16.9775C20.2754 17.7337 19.8632 18.1974 19.2607 18.6299C18.766 18.9849 17.9146 19.2011 17.0684 19.2012C16.3263 19.2012 15.7474 19.0709 15.2266 18.8105C14.7059 18.5502 14.2825 18.231 13.957 17.8535V18.6299C13.957 18.8478 13.7823 19.026 13.5645 19.0303L12.2158 19.0566C11.992 19.0609 11.8076 18.8802 11.8076 18.6562V5.40039C11.8076 5.17954 11.9872 5.0001 12.208 5H13.6152ZM7.05469 9.16113C8.33062 9.1612 9.28775 9.48019 9.92578 10.1182C10.5637 10.7562 10.8828 11.57 10.8828 12.5596V18.6641C10.8828 18.885 10.7033 19.0645 10.4824 19.0645H9.00586C8.77508 19.0642 8.59172 18.869 8.60645 18.6387L8.65625 17.873C8.34379 18.2896 7.97256 18.6087 7.54297 18.8301C7.11324 19.0514 6.5394 19.1621 5.82324 19.1621C5.14633 19.162 4.56014 19.0514 4.06543 18.8301C3.57077 18.5957 3.18651 18.2766 2.91309 17.873C2.65267 17.4563 2.52246 16.9737 2.52246 16.4268C2.52256 15.6066 2.82203 14.9228 3.4209 14.376C4.03285 13.8161 4.92498 13.4711 6.09668 13.3408L8.65625 13.0674V12.3057C8.65625 11.9932 8.5194 11.7132 8.24609 11.4658C7.97268 11.2055 7.53625 11.0753 6.9375 11.0752C6.41668 11.0752 5.95996 11.2054 5.56934 11.4658C5.30375 11.64 5.0992 11.8786 4.95605 12.1816C4.85494 12.3957 4.61483 12.5278 4.39258 12.4463L3.24316 12.0234C3.04644 11.9511 2.9365 11.7382 3.0127 11.543C3.28354 10.8507 3.73231 10.2976 4.3584 9.88379C5.10064 9.40199 5.99995 9.16116 7.05469 9.16113ZM6.31152 15.0596C5.81698 15.1247 5.44557 15.268 5.19824 15.4893C4.95102 15.6975 4.82725 15.9647 4.82715 16.29C4.82715 16.5895 4.94437 16.8509 5.17871 17.0723C5.42601 17.2805 5.75841 17.3847 6.1748 17.3848C6.70866 17.3848 7.15883 17.2871 7.52344 17.0918C7.90102 16.8965 8.18098 16.6155 8.36328 16.251C8.55847 15.8864 8.65625 15.437 8.65625 14.9033C8.65611 14.8309 8.59244 14.7752 8.52051 14.7842L6.31152 15.0596ZM16.6758 11.1533C15.9644 11.1533 15.6758 11.2705 15.2852 11.5049C14.9076 11.7393 14.6016 12.0844 14.3672 12.54C14.1328 12.9827 14.0156 13.5297 14.0156 14.1807C14.0156 14.8317 14.1329 15.3851 14.3672 15.8408C14.6016 16.2835 14.9076 16.623 15.2852 16.8574C15.6756 17.0917 15.9645 17.209 16.6758 17.209C17.3871 17.2089 17.8897 16.9826 18.3584 16.4229C18.8401 15.863 19.081 15.1337 19.0811 14.2354C19.0811 13.3368 18.8402 12.6068 18.3584 12.0469C17.8897 11.4871 17.387 11.1535 16.6758 11.1533Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/components/Toolbar/FootnoteTextToolbar.tsx b/components/Toolbar/FootnoteTextToolbar.tsx
new file mode 100644
index 00000000..09d7cad5
--- /dev/null
+++ b/components/Toolbar/FootnoteTextToolbar.tsx
@@ -0,0 +1,70 @@
+import { Separator, ShortcutKey } from "components/Layout";
+import { metaKey } from "src/utils/metaKey";
+import { LinkButton } from "./InlineLinkToolbar";
+import { TextDecorationButton } from "./TextDecorationButton";
+import { schema } from "components/Blocks/TextBlock/schema";
+import { BoldSmall, ItalicSmall, StrikethroughSmall } from "./TextToolbar";
+import { isMac } from "src/utils/isDevice";
+export const FootnoteTextToolbar = (props: {
+  setToolbarState: (s: "default" | "link") => void;
+}) => {
+  return (
+    <>
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="text-center">Bold </div>
+            <div className="flex gap-1">
+              <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
+              <ShortcutKey> B </ShortcutKey>
+            </div>
+          </div>
+        }
+        mark={schema.marks.strong}
+        icon={<BoldSmall />}
+      />
+
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="italic font-normal text-center">Italic</div>
+            <div className="flex gap-1">
+              <ShortcutKey>{metaKey()}</ShortcutKey> +{" "}
+              <ShortcutKey> I </ShortcutKey>
+            </div>
+          </div>
+        }
+        mark={schema.marks.em}
+        icon={<ItalicSmall />}
+      />
+      <TextDecorationButton
+        tooltipContent={
+          <div className="flex flex-col gap-1 justify-center">
+            <div className="text-center font-normal line-through">
+              Strikethrough
+            </div>
+            <div className="flex gap-1">
+              {isMac() ? (
+                <>
+                  <ShortcutKey>⌘</ShortcutKey> +{" "}
+                  <ShortcutKey> Ctrl </ShortcutKey> +{" "}
+                  <ShortcutKey> X </ShortcutKey>
+                </>
+              ) : (
+                <>
+                  <ShortcutKey> Ctrl </ShortcutKey> +{" "}
+                  <ShortcutKey> Meta </ShortcutKey> +{" "}
+                  <ShortcutKey> X </ShortcutKey>
+                </>
+              )}
+            </div>
+          </div>
+        }
+        mark={schema.marks.strikethrough}
+        icon={<StrikethroughSmall />}
+      />
+      <Separator classname="h-6!" />
+      <LinkButton setToolbarState={props.setToolbarState} />
+    </>
+  );
+};
diff --git a/components/Toolbar/FootnoteToolbarWrapper.tsx b/components/Toolbar/FootnoteToolbarWrapper.tsx
new file mode 100644
index 00000000..22ec52a3
--- /dev/null
+++ b/components/Toolbar/FootnoteToolbarWrapper.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { InlineLinkToolbar } from "./InlineLinkToolbar";
+import { useEditorStates } from "src/state/useEditorState";
+import { useUIState } from "src/useUIState";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { addShortcut } from "src/shortcuts";
+import { FootnoteTextToolbar } from "./FootnoteTextToolbar";
+import { useIsMobile } from "src/hooks/isMobile";
+import { CloseTiny } from "components/Icons/CloseTiny";
+
+type FootnoteToolbarState = "default" | "link";
+
+export const FootnoteToolbar = (props: { pageID: string }) => {
+  let [toolbarState, setToolbarState] = useState<FootnoteToolbarState>("default");
+  let focusedEntity = useUIState((s) => s.focusedEntity);
+  let activeEditor = useEditorStates((s) =>
+    focusedEntity ? s.editorStates[focusedEntity.entityID] : null,
+  );
+
+  useEffect(() => {
+    if (toolbarState !== "default") return;
+    let removeShortcut = addShortcut({
+      metaKey: true,
+      key: "k",
+      handler: () => {
+        setToolbarState("link");
+      },
+    });
+    return () => {
+      removeShortcut();
+    };
+  }, [toolbarState]);
+
+  let isMobile = useIsMobile();
+  return (
+    <Tooltip.Provider>
+      <div
+        className={`toolbar flex gap-2 items-center justify-between w-full
+        ${isMobile ? "h-[calc(15px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+      >
+        <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
+          {toolbarState === "default" ? (
+            <FootnoteTextToolbar setToolbarState={setToolbarState} />
+          ) : toolbarState === "link" ? (
+            <InlineLinkToolbar
+              onClose={() => {
+                activeEditor?.view?.focus();
+                setToolbarState("default");
+              }}
+            />
+          ) : null}
+        </div>
+        <button
+          className="toolbarBackToDefault hover:text-accent-contrast"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            if (toolbarState === "default") {
+              useUIState.setState(() => ({
+                focusedEntity: {
+                  entityType: "page",
+                  entityID: props.pageID,
+                },
+                selectedBlocks: [],
+              }));
+            } else {
+              setToolbarState("default");
+            }
+          }}
+        >
+          <CloseTiny />
+        </button>
+      </div>
+    </Tooltip.Provider>
+  );
+};
diff --git a/components/Toolbar/TextToolbar.tsx b/components/Toolbar/TextToolbar.tsx
index b6663dd5..f9119142 100644
--- a/components/Toolbar/TextToolbar.tsx
+++ b/components/Toolbar/TextToolbar.tsx
@@ -8,6 +8,7 @@ import { HighlightButton } from "./HighlightToolbar";
 import { ToolbarTypes } from ".";
 import { schema } from "components/Blocks/TextBlock/schema";
 import { TextAlignmentButton } from "./TextAlignmentToolbar";
+import { FootnoteButton } from "./FootnoteButton";
 import { Props } from "components/Icons/Props";
 import { isMac } from "src/utils/isDevice";
 
@@ -80,6 +81,7 @@ export const TextToolbar = (props: {
       <TextAlignmentButton setToolbarState={props.setToolbarState} />
       <ListButton setToolbarState={props.setToolbarState} />
       <Separator classname="h-6!" />
+      <FootnoteButton />
     </>
   );
 };
diff --git a/lexicons/api/lexicons.ts b/lexicons/api/lexicons.ts
index aa81d907..1a8a7de0 100644
--- a/lexicons/api/lexicons.ts
+++ b/lexicons/api/lexicons.ts
@@ -2035,6 +2035,7 @@ export const schemaDict = {
                 'lex:pub.leaflet.richtext.facet#id',
                 'lex:pub.leaflet.richtext.facet#bold',
                 'lex:pub.leaflet.richtext.facet#italic',
+                'lex:pub.leaflet.richtext.facet#footnote',
               ],
             },
           },
@@ -2136,6 +2137,26 @@ export const schemaDict = {
         required: [],
         properties: {},
       },
+      footnote: {
+        type: 'object',
+        description: 'Facet feature for a footnote reference',
+        required: ['footnoteId', 'contentPlaintext'],
+        properties: {
+          footnoteId: {
+            type: 'string',
+          },
+          contentPlaintext: {
+            type: 'string',
+          },
+          contentFacets: {
+            type: 'array',
+            items: {
+              type: 'ref',
+              ref: 'lex:pub.leaflet.richtext.facet',
+            },
+          },
+        },
+      },
     },
   },
   PubLeafletThemeBackgroundImage: {
diff --git a/lexicons/api/types/pub/leaflet/richtext/facet.ts b/lexicons/api/types/pub/leaflet/richtext/facet.ts
index 466b1df0..dc8062c1 100644
--- a/lexicons/api/types/pub/leaflet/richtext/facet.ts
+++ b/lexicons/api/types/pub/leaflet/richtext/facet.ts
@@ -29,6 +29,7 @@ export interface Main {
     | $Typed<Id>
     | $Typed<Bold>
     | $Typed<Italic>
+    | $Typed<Footnote>
     | { $type: string }
   )[]
 }
@@ -213,3 +214,21 @@ export function isItalic<V>(v: V) {
 export function validateItalic<V>(v: V) {
   return validate<Italic & V>(v, id, hashItalic)
 }
+
+/** Facet feature for a footnote reference */
+export interface Footnote {
+  $type?: 'pub.leaflet.richtext.facet#footnote'
+  footnoteId: string
+  contentPlaintext: string
+  contentFacets?: Main[]
+}
+
+const hashFootnote = 'footnote'
+
+export function isFootnote<V>(v: V) {
+  return is$typed(v, id, hashFootnote)
+}
+
+export function validateFootnote<V>(v: V) {
+  return validate<Footnote & V>(v, id, hashFootnote)
+}
diff --git a/lexicons/pub/leaflet/richtext/facet.json b/lexicons/pub/leaflet/richtext/facet.json
index 32c5ca9d..4822cc67 100644
--- a/lexicons/pub/leaflet/richtext/facet.json
+++ b/lexicons/pub/leaflet/richtext/facet.json
@@ -28,7 +28,8 @@
               "#strikethrough",
               "#id",
               "#bold",
-              "#italic"
+              "#italic",
+              "#footnote"
             ]
           }
         }
@@ -135,6 +136,26 @@
       "description": "Facet feature for italic text",
       "required": [],
       "properties": {}
+    },
+    "footnote": {
+      "type": "object",
+      "description": "Facet feature for a footnote reference",
+      "required": ["footnoteId", "contentPlaintext"],
+      "properties": {
+        "footnoteId": {
+          "type": "string"
+        },
+        "contentPlaintext": {
+          "type": "string"
+        },
+        "contentFacets": {
+          "type": "array",
+          "items": {
+            "type": "ref",
+            "ref": "#main"
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/src/replicache/attributes.ts b/src/replicache/attributes.ts
index 59b40726..d857270e 100644
--- a/src/replicache/attributes.ts
+++ b/src/replicache/attributes.ts
@@ -107,6 +107,10 @@ const BlockAttributes = {
     type: "number",
     cardinality: "one",
   },
+  "block/footnote": {
+    type: "ordered-reference",
+    cardinality: "many",
+  },
 } as const;
 
 const MailboxAttributes = {
diff --git a/src/replicache/mutations.ts b/src/replicache/mutations.ts
index 1bf779be..5acfe3f9 100644
--- a/src/replicache/mutations.ts
+++ b/src/replicache/mutations.ts
@@ -720,6 +720,37 @@ const updatePublicationDraft: Mutation<{
   });
 };
 
+const createFootnote: Mutation<{
+  footnoteEntityID: string;
+  blockID: string;
+  permission_set: string;
+  position: string;
+}> = async (args, ctx) => {
+  await ctx.createEntity({
+    entityID: args.footnoteEntityID,
+    permission_set: args.permission_set,
+  });
+  await ctx.assertFact({
+    entity: args.blockID,
+    attribute: "block/footnote",
+    data: {
+      type: "ordered-reference",
+      value: args.footnoteEntityID,
+      position: args.position,
+    },
+  });
+};
+
+const deleteFootnote: Mutation<{
+  footnoteEntityID: string;
+  blockID: string;
+}> = async (args, ctx) => {
+  let footnotes = await ctx.scanIndex.eav(args.blockID, "block/footnote");
+  let fact = footnotes.find((f) => f.data.value === args.footnoteEntityID);
+  if (fact) await ctx.retractFact(fact.id);
+  await ctx.deleteEntity(args.footnoteEntityID);
+};
+
 export const mutations = {
   retractAttribute,
   addBlock,
@@ -743,4 +774,6 @@ export const mutations = {
   addPollOption,
   removePollOption,
   updatePublicationDraft,
+  createFootnote,
+  deleteFootnote,
 };
diff --git a/src/useUIState.ts b/src/useUIState.ts
index a205c794..713fe980 100644
--- a/src/useUIState.ts
+++ b/src/useUIState.ts
@@ -10,6 +10,7 @@ export const useUIState = create(
       focusedEntity: null as
         | { entityType: "page"; entityID: string }
         | { entityType: "block"; entityID: string; parent: string }
+        | { entityType: "footnote"; entityID: string; parent: string }
         | null,
       foldedBlocks: [] as string[],
       openPages: [] as string[],
@@ -47,6 +48,7 @@ export const useUIState = create(
         b:
           | { entityType: "page"; entityID: string }
           | { entityType: "block"; entityID: string; parent: string }
+          | { entityType: "footnote"; entityID: string; parent: string }
           | null,
       ) => set(() => ({ focusedEntity: b })),
       setSelectedBlock: (block: SelectedBlock) =>
diff --git a/src/utils/deleteBlock.ts b/src/utils/deleteBlock.ts
index 84f3e9e3..f166dcaf 100644
--- a/src/utils/deleteBlock.ts
+++ b/src/utils/deleteBlock.ts
@@ -113,6 +113,19 @@ export async function deleteBlock(
   // close the pages
   pagesToClose.forEach((page) => page && useUIState.getState().closePage(page));
 
+  // Clean up footnotes from blocks being deleted
+  for (let entity of entities) {
+    let footnotes = await rep.query((tx) =>
+      scanIndex(tx).eav(entity, "block/footnote"),
+    );
+    for (let fn of footnotes) {
+      await rep.mutate.deleteFootnote({
+        footnoteEntityID: fn.data.value,
+        blockID: entity,
+      });
+    }
+  }
+
   await Promise.all(
     entities.map((entity) =>
       rep?.mutate.removeBlock({
diff --git a/src/utils/yjsFragmentToString.ts b/src/utils/yjsFragmentToString.ts
index a4738061..d4311078 100644
--- a/src/utils/yjsFragmentToString.ts
+++ b/src/utils/yjsFragmentToString.ts
@@ -25,6 +25,10 @@ export function YJSFragmentToString(
     if (node.nodeName === "didMention" || node.nodeName === "atMention") {
       return node.getAttribute("text") || "";
     }
+    // Handle footnote nodes - emit placeholder
+    if (node.nodeName === "footnote") {
+      return "*";
+    }
     return node
       .toArray()
       .map((f) => YJSFragmentToString(f))
-- 
2.54.0