diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
index 7ab0a2fc..cdfaca37 100644
--- a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnoteSideColumn.tsx
@@ -4,6 +4,7 @@ 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;
@@ -24,25 +25,20 @@ export function PublishedFootnoteSideColumn(props: {
 
   let renderItem = useCallback(
     (item: PublishedFootnoteItem & { top: number }) => (
-      <>
-        <a
-          href={`#fnref-${item.footnoteId}`}
-          className="text-accent-contrast font-medium text-xs no-underline hover:underline"
-        >
-          {item.index}.
-        </a>{" "}
-        <span className="text-secondary">
-          {item.contentPlaintext ? (
-            <TextBlockCore
-              plaintext={item.contentPlaintext}
-              facets={item.contentFacets}
-              index={[]}
-            />
-          ) : (
-            <span className="italic text-tertiary">Empty footnote</span>
-          )}
-        </span>
-      </>
+      <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>
     ),
     [],
   );
diff --git a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
index f7feca84..86fd9e56 100644
--- a/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/Footnotes/PublishedFootnotes.tsx
@@ -8,6 +8,10 @@ import {
   PubLeafletPagesLinearDocument,
 } from "lexicons/api";
 import { TextBlockCore } from "../Blocks/TextBlockCore";
+import {
+  FootnoteItemLayout,
+  FootnoteSectionLayout,
+} from "components/Footnotes/FootnoteItemLayout";
 
 export type PublishedFootnote = {
   footnoteId: string;
@@ -74,43 +78,43 @@ export function PublishedFootnoteSection(props: {
   if (props.footnotes.length === 0) return null;
 
   return (
-    <div className="footnote-section px-3 sm:px-4 pb-2 mt-4">
-      <hr className="border-border-light mb-3" />
-      <div className="flex flex-col gap-2">
-        {props.footnotes.map((fn) => (
-          <div
-            key={fn.footnoteId}
-            id={`fn-${fn.footnoteId}`}
-            className="flex items-start gap-2 text-xs"
-          >
-            <a
-              href={`#fnref-${fn.footnoteId}`}
-              className="text-accent-contrast font-medium shrink-0 mt-0.5 text-xs no-underline hover:underline"
-            >
-              {fn.index}.
-            </a>
-            <div className="text-secondary min-w-0">
-              {fn.contentPlaintext ? (
-                <TextBlockCore
-                  plaintext={fn.contentPlaintext}
-                  facets={fn.contentFacets}
-                  index={[]}
-                />
-              ) : (
-                <span className="italic text-tertiary">Empty footnote</span>
-              )}
-            </div>
-            <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>
-          </div>
-        ))}
-      </div>
-    </div>
+    <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/components/Footnotes/FootnoteEditor.tsx b/components/Footnotes/FootnoteEditor.tsx
index 659c9303..1b56edcc 100644
--- a/components/Footnotes/FootnoteEditor.tsx
+++ b/components/Footnotes/FootnoteEditor.tsx
@@ -12,6 +12,7 @@ import {
   trackUndoRedo,
 } from "components/Blocks/TextBlock/mountProsemirror";
 import { CloseTiny } from "components/Icons/CloseTiny";
+import { FootnoteItemLayout } from "./FootnoteItemLayout";
 
 export function FootnoteEditor(props: {
   footnoteEntityID: string;
@@ -97,36 +98,33 @@ export function FootnoteEditor(props: {
   }, [props.footnoteEntityID, value, props.editable, props.autoFocus, rep.undoManager]);
 
   return (
-    <div className="footnote-editor flex items-start gap-2 text-xs group/footnote" data-footnote-editor={props.footnoteEntityID}>
-      <button
-        className="text-accent-contrast font-medium shrink-0 text-xs leading-normal hover:underline cursor-pointer"
-        onClick={() => {
-          let ref = document.querySelector(
-            `.footnote-ref[data-footnote-id="${props.footnoteEntityID}"]`,
-          );
-          if (ref) {
-            ref.scrollIntoView({ behavior: "smooth", block: "center" });
-          }
-        }}
-        title="Jump to footnote in text"
-      >
-        {props.index}.
-      </button>
+    <FootnoteItemLayout
+      index={props.index}
+      indexAction={() => {
+        let ref = document.querySelector(
+          `.footnote-ref[data-footnote-id="${props.footnoteEntityID}"]`,
+        );
+        if (ref) {
+          ref.scrollIntoView({ behavior: "smooth", block: "center" });
+        }
+      }}
+      trailing={
+        props.editable && props.onDelete ? (
+          <button
+            className="shrink-0 mt-0.5 text-tertiary hover:text-primary opacity-0 group-hover/footnote:opacity-100 transition-opacity"
+            onClick={props.onDelete}
+            title="Delete footnote"
+          >
+            <CloseTiny />
+          </button>
+        ) : undefined
+      }
+    >
       <div
         ref={mountRef}
-        className="grow outline-hidden min-w-0 text-secondary [&_.ProseMirror]:outline-hidden"
-        style={{ wordBreak: "break-word" }}
+        className="outline-hidden"
       />
-      {props.editable && props.onDelete && (
-        <button
-          className="shrink-0 mt-0.5 text-tertiary hover:text-primary opacity-0 group-hover/footnote:opacity-100 transition-opacity"
-          onClick={props.onDelete}
-          title="Delete footnote"
-        >
-          <CloseTiny />
-        </button>
-      )}
-    </div>
+    </FootnoteItemLayout>
   );
 }
 
diff --git a/components/Footnotes/FootnoteItemLayout.tsx b/components/Footnotes/FootnoteItemLayout.tsx
new file mode 100644
index 00000000..5fea30d6
--- /dev/null
+++ b/components/Footnotes/FootnoteItemLayout.tsx
@@ -0,0 +1,56 @@
+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-accent-contrast font-medium shrink-0 text-xs 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-xs 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/FootnoteSection.tsx b/components/Footnotes/FootnoteSection.tsx
index 460f2e05..b230d150 100644
--- a/components/Footnotes/FootnoteSection.tsx
+++ b/components/Footnotes/FootnoteSection.tsx
@@ -3,6 +3,7 @@ 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();
@@ -12,29 +13,26 @@ export function FootnoteSection(props: { hiddenOnDesktop?: boolean }) {
   if (footnotes.length === 0) return null;
 
   return (
-    <div className={`footnote-section px-3 sm:px-4 pb-2 ${props.hiddenOnDesktop ? "lg:hidden" : ""}`}>
-      <hr className="border-border-light mb-3" />
-      <div className="flex flex-col gap-2">
-        {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
-            }
-          />
-        ))}
-      </div>
-    </div>
+    <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>
   );
 }