diff --git a/demo/app/Sharp/Posts/PostForm.php b/demo/app/Sharp/Posts/PostForm.php
index 98491435a..a543ff5a4 100644
--- a/demo/app/Sharp/Posts/PostForm.php
+++ b/demo/app/Sharp/Posts/PostForm.php
@@ -59,6 +59,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                         SharpFormEditorField::IFRAME,
                         SharpFormEditorField::UPLOAD,
                         SharpFormEditorField::CODE_BLOCK,
+                        SharpFormEditorField::FOOTNOTE,
                         AuthorEmbed::class,
                     ])
                     ->allowEmbeds([
@@ -79,7 +80,7 @@ public function buildFormFields(FieldsContainer $formFields): void
                     ])
                     ->allowFullscreen()
                     ->setMaxLength(2000)
-                    ->setHeight(300, 0)
+                    ->setHeight(400)
             )
             ->addField(
                 SharpFormTagsField::make('categories', Category::pluck('name', 'id')->toArray())
diff --git a/package-lock.json b/package-lock.json
index 5fd8c5597..5ac878ab5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -50,12 +50,13 @@
         "flexsearch": "^0.8.205",
         "leaflet": "^1.9.4",
         "lodash": "^4.17.21",
-        "lucide-vue-next": "^0.542.0",
+        "lucide-vue-next": "^1.0.0",
         "qs": "^6.6.0",
         "reka-ui": "^2.6.1",
         "sortablejs": "^1.15.2",
         "tailwind-merge": "^3.3.0",
         "text-clipper": "^1.3.0",
+        "tiptap-footnotes": "^3.0.1",
         "tiptap-markdown": "^0.9.0",
         "vue": "^3.5.12",
         "vue-sonner": "^1.1.2",
@@ -11450,9 +11451,10 @@
       }
     },
     "node_modules/lucide-vue-next": {
-      "version": "0.542.0",
-      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.542.0.tgz",
-      "integrity": "sha512-cJfyhFoneDgYTouHwUJEutXaCW5EQuRrBsvfELudWnMiwfqvcEtpZTFZLdZ5Nrqow+znzn+Iyhu3KeYIfa3mEg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
+      "deprecated": "Package deprecated. Please use @lucide/vue instead.",
       "license": "ISC",
       "peerDependencies": {
         "vue": ">=3.0.1"
@@ -15294,6 +15296,18 @@
       "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
       "license": "ISC"
     },
+    "node_modules/tiptap-footnotes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tiptap-footnotes/-/tiptap-footnotes-3.0.1.tgz",
+      "integrity": "sha512-JeQav5spy5/gEDHnwbkJrzPB46Lvn9SxefhKCcQKsUopzzqYtjaA2oTO+QxVixRJ88wLAa5KexaCIzvY6hMiSQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@tiptap/core": "^3.0.0",
+        "@tiptap/extension-list-item": "^3.0.0",
+        "@tiptap/extension-ordered-list": "^3.0.0",
+        "@tiptap/pm": "^3.0.0"
+      }
+    },
     "node_modules/tiptap-markdown": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz",
@@ -29031,9 +29045,9 @@
       }
     },
     "lucide-vue-next": {
-      "version": "0.542.0",
-      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-0.542.0.tgz",
-      "integrity": "sha512-cJfyhFoneDgYTouHwUJEutXaCW5EQuRrBsvfELudWnMiwfqvcEtpZTFZLdZ5Nrqow+znzn+Iyhu3KeYIfa3mEg==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lucide-vue-next/-/lucide-vue-next-1.0.0.tgz",
+      "integrity": "sha512-V6SPvx1IHTj/UY+FrIYWV5faISsPSb8BnWSFDxAtezWKvWc9ZZ40PDrdu1/Qb5vg4lHWr1hs1BAMGVGm6V1Xdg==",
       "requires": {}
     },
     "magic-string": {
@@ -34828,6 +34842,12 @@
       "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
       "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA=="
     },
+    "tiptap-footnotes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/tiptap-footnotes/-/tiptap-footnotes-3.0.1.tgz",
+      "integrity": "sha512-JeQav5spy5/gEDHnwbkJrzPB46Lvn9SxefhKCcQKsUopzzqYtjaA2oTO+QxVixRJ88wLAa5KexaCIzvY6hMiSQ==",
+      "requires": {}
+    },
     "tiptap-markdown": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.9.0.tgz",
diff --git a/package.json b/package.json
index d096c1ba4..bea7f129b 100644
--- a/package.json
+++ b/package.json
@@ -78,12 +78,13 @@
     "flexsearch": "^0.8.205",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
-    "lucide-vue-next": "^0.542.0",
+    "lucide-vue-next": "^1.0.0",
     "qs": "^6.6.0",
     "reka-ui": "^2.6.1",
     "sortablejs": "^1.15.2",
     "tailwind-merge": "^3.3.0",
     "text-clipper": "^1.3.0",
+    "tiptap-footnotes": "^3.0.1",
     "tiptap-markdown": "^0.9.0",
     "vue": "^3.5.12",
     "vue-sonner": "^1.1.2",
diff --git a/resources/css/app.css b/resources/css/app.css
index ea810987f..b60d32b97 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -9,6 +9,7 @@
 @source '../views/**/*.blade.php';
 @source '../js/**/*.vue';
 @source '../js/components/ui/**/*.ts';
+@source '../js/form/components/fields/editor/extensions/Footnotes.ts';
 
 @custom-variant dark (&:is(.dark *));
 
diff --git a/resources/js/form/components/fields/editor/Editor.vue b/resources/js/form/components/fields/editor/Editor.vue
index 8598db340..c7565b4c1 100644
--- a/resources/js/form/components/fields/editor/Editor.vue
+++ b/resources/js/form/components/fields/editor/Editor.vue
@@ -62,6 +62,7 @@
         getTextInputReplacementsExtension
     } from "@/form/components/fields/editor/extensions/TextInputReplacements";
     import CodeBlockDropdown from "@/form/components/fields/editor/toolbar/CodeBlockDropdown.vue";
+    import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
     const emit = defineEmits<FormFieldEmits<FormEditorFieldData>>();
     const props = defineProps<FormFieldProps<FormEditorFieldData>>();
@@ -189,11 +190,6 @@
         }
     );
 
-    declare module '@tiptap/core' {
-        interface Storage {
-            scrollYPercentage: number;
-        }
-    }
 
     const isFullscreen = ref(false);
     const fullscreenPlaceholderHeight = ref(0);
@@ -303,17 +299,29 @@
                                         <Separator orientation="vertical" class="h-4 self-center last:hidden" />
                                     </template>
                                     <template v-else :key="button">
-                                        <Toggle
-                                            size="sm"
-                                            :model-value="buttons[button].isActive(editor)"
-                                            :disabled="field.readOnly"
-                                            :title="buttons[button].label()"
-                                            @click="button === 'upload' || button === 'upload-image'
-                                            ? uploadModal.open({ locale: props.locale })
-                                            : buttons[button].command(editor)"
-                                        >
-                                            <component :is="buttons[button].icon" class="size-4" />
-                                        </Toggle>
+                                        <TooltipProvider>
+                                            <Tooltip :disabled="!buttons[button].tooltip" :delay-duration="0" disable-hoverable-content>
+                                                <TooltipTrigger as-child>
+                                                    <Toggle
+                                                        size="sm"
+                                                        :model-value="buttons[button].isActive(editor)"
+                                                        :disabled="field.readOnly"
+                                                        :title="!buttons[button].tooltip ? buttons[button].label() : null"
+                                                        @click="button === 'upload' || button === 'upload-image'
+                                                            ? uploadModal.open({ locale: props.locale })
+                                                            : buttons[button].command(editor)"
+                                                        >
+                                                        <component :is="buttons[button].icon" class="size-4" />
+                                                    </Toggle>
+                                                </TooltipTrigger>
+                                                <template v-if="buttons[button].tooltip">
+                                                    <TooltipContent side="top" :side-offset="10">
+                                                        <h4 class="font-medium">{{ buttons[button].label() }}</h4>
+                                                        <div v-html="buttons[button].tooltip()"></div>
+                                                    </TooltipContent>
+                                                </template>
+                                            </Tooltip>
+                                        </TooltipProvider>
                                     </template>
                                 </template>
                                 <template v-if="dropdownEmbeds.length > 0">
@@ -363,7 +371,7 @@
                 </template>
 
                 <div :class="cn(
-                    'flex-1 grid grid-cols-1 overflow-y-auto overflow-x-clip',
+                    'flex-1 grid grid-cols-1 overflow-y-auto scroll-py-4 overflow-x-clip',
                         isFullscreen
                             ? 'lg:[scrollbar-gutter:stable]'
                             : ['min-h-20', {
@@ -419,10 +427,13 @@
                                 'group/editor content w-full rounded-b-md focus:outline-none px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
                                 '[&_.selection-highlight]:bg-[Highlight] [&_.selection-highlight]:py-0.5',
                                 '[&_.ProseMirror-selectednode]:outline-none! [&:focus_.ProseMirror-selectednode]:ring-1 [&_.ProseMirror-selectednode]:ring-primary',
+                                `[&_.footnotes]:before:content-(--footnote-title) [&_.footnotes]:before:text-xs [&_.footnotes]:before:text-muted-foreground [&_.footnotes]:before:block [&_.footnotes]:before:ml-[-1.75em] [&_.footnotes]:before:mb-2 [&_.footnotes]:-mx-3 [&_.footnotes]:pt-2 [&_.footnotes]:pb-2 [&_.footnotes]:pr-3 [&_.footnotes]:pl-[calc(.75rem+1.75em)] [&_.footnotes>li]:relative [&_.footnotes>li]:pl-[1.25em] [&_.footnotes]:border-t`,
+                                ` [&_.footnote-ref]:cursor-pointer [&_.footnote-ref]:underline [&_.footnote-ref]:underline-offset-4 [&_.footnote-ref]:decoration-foreground/20 [&_.footnote-ref]:hover:decoration-foreground [&_.footnote-ref]:p-1 [&_.footnote-ref]:-m-1 [&_.footnote-ref]:before:content-['['] [&_.footnote-ref]:after:content-[']']`,
                                 {
                                     'content-lg max-w-3xl mx-auto py-6 px-4 sm:px-6 text-base min-h-max': isFullscreen,
                                 },
                             )"
+                            :style="{ '--footnote-title': `'${__('sharp::form.editor.footnotes.title')}'` }"
                             role="textbox"
                         />
                     </div>
diff --git a/resources/js/form/components/fields/editor/EditorAttributes.vue b/resources/js/form/components/fields/editor/EditorAttributes.vue
index 677acfe60..979f9001b 100644
--- a/resources/js/form/components/fields/editor/EditorAttributes.vue
+++ b/resources/js/form/components/fields/editor/EditorAttributes.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-    import { Editor } from "@tiptap/vue-3";
-    import { StyleValue, useAttrs, watchEffect } from "vue";
-    import { normalizeStyle, stringifyStyle } from "@vue/shared";
+    import { Editor } from '@tiptap/core';
+    import { StyleValue, useAttrs, watchEffect } from 'vue';
+    import { normalizeStyle, stringifyStyle } from '@vue/shared';
 
     const props = defineProps<{
         editor: Editor,
diff --git a/resources/js/form/components/fields/editor/extensions/Footnotes.ts b/resources/js/form/components/fields/editor/extensions/Footnotes.ts
new file mode 100644
index 000000000..68c0d825c
--- /dev/null
+++ b/resources/js/form/components/fields/editor/extensions/Footnotes.ts
@@ -0,0 +1,150 @@
+import { Footnote, Footnotes as BaseFootnotes, FootnoteReference } from "tiptap-footnotes";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { Extension, mergeAttributes, NodePos } from "@tiptap/core";
+
+export const Footnotes = Extension.create({
+    name: 'footnotesExtension',
+    addExtensions() {
+        return [
+            BaseFootnotes,
+            Footnote.extend({
+                addProseMirrorPlugins() {
+                    const editor = this.editor;
+                    return [
+                        new Plugin({
+                            key: new PluginKey('footnoteDecoration'),
+                            props: {
+                                decorations: (state) => {
+                                    const decorations: Decoration[] = [];
+                                    state.doc.descendants((node, pos) => {
+                                        if (node.type.name === 'footnote') {
+                                            const id = node.attrs.id;
+                                            const refId = id?.startsWith('fn:') ? id.replace('fn:', '') : id;
+                                            decorations.push(
+                                                Decoration.widget(pos + 1, () => {
+                                                    const sup = document.createElement('sup');
+                                                    const a = document.createElement('a');
+                                                    a.href = `#fnref:${refId}`;
+                                                    a.draggable = false;
+                                                    a.className = 'underline p-1 -m-1 underline-offset-4 decoration-foreground/20 hover:decoration-foreground select-none';
+                                                    a.textContent = '[^]';
+                                                    sup.className = 'footnote-backref absolute left-[.125em] top-1.5'
+                                                    sup.appendChild(a);
+                                                    return sup;
+                                                })
+                                            );
+                                        }
+                                    });
+                                    return DecorationSet.create(state.doc, decorations);
+                                },
+                                handleClickOn(view, pos, node, nodePos, event) {
+                                    if((event.target as HTMLElement)?.closest('.footnote-backref')) {
+                                        event.preventDefault();
+                                        const id = (event.target as HTMLElement).closest('[data-id]').getAttribute('data-id');
+                                        setTimeout(() => editor.commands.focusFootnoteReference(id));
+                                        return true;
+                                    }
+                                },
+                            },
+                        }),
+                    ];
+                },
+                addCommands() {
+                    return {
+                        focusFootnote: (id: string) => ({ editor, chain }) => {
+                            const matchedFootnote = editor.$node("footnote", {
+                                "data-id": id,
+                            });
+
+                            if (matchedFootnote) {
+                                // sets the text selection to the end of the footnote definition and scroll to it.
+                                chain()
+                                    .focus()
+                                    .setTextSelection(
+                                        matchedFootnote.from + matchedFootnote.content.size
+                                    )
+                                    .run();
+
+                                matchedFootnote.element.scrollIntoView({ block: 'nearest' });
+                                return true;
+                            }
+                            return false;
+                        },
+                    };
+                },
+            }),
+            FootnoteReference
+                .extend({
+                    addCommands() {
+                        return {
+                            ...this.parent(),
+                            focusFootnoteReference: (id: string) => ({ editor, chain }) => {
+                                let matchedFootnoteReference: { from: number } = null;
+                                editor.state.doc.descendants((node, pos) => {
+                                    if (node.type.name === 'footnoteReference' && node.attrs['data-id'] === id) {
+                                        matchedFootnoteReference = {
+                                            from: pos,
+                                        }
+                                        return false;
+                                    }
+                                });
+
+                                if (matchedFootnoteReference) {
+                                    chain()
+                                        .focus()
+                                        .setTextSelection(
+                                            matchedFootnoteReference.from,
+                                        )
+                                        .run();
+
+                                    editor.view.dom.querySelector(`.footnote-ref[data-id="${id}"]`).scrollIntoView({ block: 'nearest' });
+                                    return true;
+                                }
+                                return false;
+                            },
+                        };
+                    },
+                    addProseMirrorPlugins() {
+                        const editor = this.editor;
+                        return [
+                            new Plugin({
+                                key: new PluginKey("customFootnoteRefClick"),
+
+                                props: {
+                                    handleDOMEvents: {
+                                        click(view, event) {
+                                            if((event.target as HTMLElement)?.closest('.footnote-ref')) {
+                                                event.preventDefault();
+                                            }
+                                        }
+                                    },
+                                    handleClickOn(view, pos, node, nodePos, event) {
+                                        if(node.type.name === 'footnoteReference') {
+                                            const id = node.attrs["data-id"];
+                                            setTimeout(() => editor.commands.focusFootnote(id));
+                                            return true;
+                                        }
+                                    },
+                                },
+                            }),
+                            ...this.parent(),
+                        ]
+                    },
+                }),
+        ];
+    }
+})
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        extendedFootnoteReference: {
+            /**
+             * scrolls to & sets the text selection at the end of the footnote with the given id
+             * @param id the id of the footote (i.e. the `data-id` attribute value of the footnote)
+             * @example editor.commands.focusFootnote("a43956c1-1ab8-462f-96e4-be3a4b27fd50")
+             */
+            focusFootnoteReference: (id: string) => ReturnType;
+        };
+    }
+}
diff --git a/resources/js/form/components/fields/editor/extensions/TrailingNode.ts b/resources/js/form/components/fields/editor/extensions/TrailingNode.ts
new file mode 100644
index 000000000..87ebb52ed
--- /dev/null
+++ b/resources/js/form/components/fields/editor/extensions/TrailingNode.ts
@@ -0,0 +1,124 @@
+import { Extension } from '@tiptap/core'
+import type { Node, NodeType } from '@tiptap/pm/model'
+import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
+import { Footnotes } from "tiptap-footnotes";
+
+export const skipTrailingNodeMeta = 'skipTrailingNode'
+
+function nodeEqualsType({
+    types,
+    node,
+}: {
+    types: NodeType | NodeType[]
+    node: Node | null | undefined
+}) {
+    return (node && Array.isArray(types) && types.includes(node.type)) || node?.type === types
+}
+
+// New function that handles the footnote at the end
+function getLastNode(doc: Node) {
+    const { lastChild } = doc
+    if (lastChild?.type.name === Footnotes.name) {
+        return {
+            node: doc.content.child(doc.childCount - 2),
+            pos: doc.content.size - lastChild.nodeSize,
+        }
+    }
+    return {
+        node: lastChild,
+        pos: doc.content.size,
+    }
+}
+
+/**
+ * Extension based on:
+ * - https://github.com/ueberdosis/tiptap/blob/v1/packages/tiptap-extensions/src/extensions/TrailingNode.js
+ * - https://github.com/remirror/remirror/blob/e0f1bec4a1e8073ce8f5500d62193e52321155b9/packages/prosemirror-trailing-node/src/trailing-node-plugin.ts
+ */
+
+export interface TrailingNodeOptions {
+    /**
+     * The node type that should be inserted at the end of the document.
+     * @note the node will always be added to the `notAfter` lists to
+     * prevent an infinite loop.
+     * @default undefined
+     */
+    node?: string
+    /**
+     * The node types after which the trailing node should not be inserted.
+     * @default ['paragraph']
+     */
+    notAfter?: string | string[]
+}
+
+/**
+ * This extension allows you to add an extra node at the end of the document.
+ * @see https://www.tiptap.dev/api/extensions/trailing-node
+ */
+export const TrailingNode = Extension.create<TrailingNodeOptions>({
+    name: 'trailingNode',
+
+    addOptions() {
+        return {
+            node: undefined,
+            notAfter: [],
+        }
+    },
+
+    addProseMirrorPlugins() {
+        const plugin = new PluginKey(this.name)
+        const defaultNode =
+            this.options.node ||
+            this.editor.schema.topNodeType.contentMatch.defaultType?.name ||
+            'paragraph'
+
+        const disabledNodes = Object.entries(this.editor.schema.nodes)
+            .map(([, value]) => value)
+            .filter(node => (this.options.notAfter || []).concat(defaultNode).includes(node.name))
+
+        return [
+            new Plugin({
+                key: plugin,
+                appendTransaction: (transactions, __, state) => {
+                    const { doc, tr, schema } = state
+                    const shouldInsertNodeAtEnd = plugin.getState(state)
+                    const { pos: endPosition } = getLastNode(doc)
+                    const type = schema.nodes[defaultNode]
+
+                    if (transactions.some(transaction => transaction.getMeta(skipTrailingNodeMeta))) {
+                        return
+                    }
+
+                    if (!shouldInsertNodeAtEnd) {
+                        return
+                    }
+
+                    return tr.insert(endPosition, type.create())
+                },
+                state: {
+                    init: (_, state) => {
+                        const { node: lastNode } = getLastNode(state.tr.doc)
+                        console.log('lastNode', lastNode)
+
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+                    },
+                    apply: (tr, value) => {
+                        if (!tr.docChanged) {
+                            return value
+                        }
+
+                        // Ignore transactions from UniqueID extension to prevent infinite loops
+                        // when UniqueID adds IDs to newly inserted trailing nodes
+                        if (tr.getMeta('__uniqueIDTransaction')) {
+                            return value
+                        }
+
+                        const { node: lastNode } = getLastNode(tr.doc)
+
+                        return !nodeEqualsType({ node: lastNode, types: disabledNodes })
+                    },
+                },
+            }),
+        ]
+    },
+})
diff --git a/resources/js/form/components/fields/editor/extensions/index.ts b/resources/js/form/components/fields/editor/extensions/index.ts
index 89b6aac7e..4a2f6e723 100644
--- a/resources/js/form/components/fields/editor/extensions/index.ts
+++ b/resources/js/form/components/fields/editor/extensions/index.ts
@@ -4,7 +4,7 @@ import { Text } from '@tiptap/extension-text';
 import { Paragraph } from '@tiptap/extension-paragraph';
 import { Blockquote } from '@tiptap/extension-blockquote';
 import { Bold } from '@tiptap/extension-bold';
-import { UndoRedo, Placeholder, Gapcursor, Dropcursor, CharacterCount, TrailingNode } from '@tiptap/extensions';
+import { UndoRedo, Placeholder, Gapcursor, Dropcursor, CharacterCount } from '@tiptap/extensions';
 import { BulletList } from '@tiptap/extension-bullet-list';
 import { Code } from '@tiptap/extension-code';
 import { Heading } from '@tiptap/extension-heading';
@@ -28,6 +28,8 @@ import { Clipboard } from './Clipboard';
 import { Small } from './Small';
 import { FormEditorFieldData, FormEditorToolbarButton } from "@/types";
 import { CodeBlock } from "@/form/components/fields/editor/extensions/CodeBlock";
+import { Footnotes } from "@/form/components/fields/editor/extensions/Footnotes";
+import { TrailingNode } from "@/form/components/fields/editor/extensions/TrailingNode";
 
 export function getExtensions(field: FormEditorFieldData) {
     const toolbarHas = (buttonName: FormEditorToolbarButton | FormEditorToolbarButton[]) =>
@@ -42,6 +44,7 @@ export function getExtensions(field: FormEditorFieldData) {
         toolbarHas('bold') && Bold,
         toolbarHas('bullet-list') && BulletList,
         Extension.create({
+            name: 'characterCountExtension',
             addExtensions() { // use addExtension to ensure unique state
                 return [
                     CharacterCount.configure(),
@@ -54,11 +57,15 @@ export function getExtensions(field: FormEditorFieldData) {
         toolbarHas('code') && Code,
         toolbarHas('code-block') && CodeBlock,
         Document.extend({
-            content: field.uploads || Object.keys(field.embeds ?? {}).length
-                ? '(block | embed)+'
-                : 'block+',
+            content: [
+                field.uploads || Object.keys(field.embeds ?? {}).length
+                    ? '(block | embed)+'
+                    : 'block+',
+                toolbarHas('footnote') && 'footnotes?',
+            ].filter(Boolean).join(' '),
         }),
         Dropcursor,
+        toolbarHas('footnote') && Footnotes,
         Gapcursor,
         HardBreak.extend({
             addKeyboardShortcuts() {
diff --git a/resources/js/form/components/fields/editor/toolbar/config.ts b/resources/js/form/components/fields/editor/toolbar/config.ts
index ee212a5a3..1ce02a51e 100644
--- a/resources/js/form/components/fields/editor/toolbar/config.ts
+++ b/resources/js/form/components/fields/editor/toolbar/config.ts
@@ -16,6 +16,7 @@ import {
     ImageIcon,
     Paperclip, Minus, SquarePlay, CodeXml, FileCode, Undo, Redo, TextQuote,
     Superscript,
+    SquareAsterisk,
 } from "lucide-vue-next";
 import { Component } from "vue";
 
@@ -24,6 +25,7 @@ type ButtonConfig = {
     isActive?: (editor: Editor) => boolean,
     icon: Component,
     label?: () => string,
+    tooltip?: () => string,
 }
 
 export const buttons: { [key in Exclude<FormEditorToolbarButton, '|' | 'link' | 'table'>]: ButtonConfig } = {
@@ -135,6 +137,13 @@ export const buttons: { [key in Exclude<FormEditorToolbarButton, '|' | 'link' |
         icon: Superscript,
         label: () => __('sharp::form.editor.toolbar.superscript.title'),
     },
+    'footnote': {
+        command: editor => editor.chain().focus().addFootnote().run(),
+        isActive: editor => false,
+        icon: SquareAsterisk,
+        label: () => __('sharp::form.editor.toolbar.footnote.title'),
+        tooltip: () => __('sharp::form.editor.toolbar.footnote.tootlip'),
+    },
     'undo': {
         command: editor => editor.chain().undo().run(),
         icon: Undo,
diff --git a/resources/js/form/components/fields/editor/types.ts b/resources/js/form/components/fields/editor/types.ts
index 8be38fa5b..d8c3e2a50 100644
--- a/resources/js/form/components/fields/editor/types.ts
+++ b/resources/js/form/components/fields/editor/types.ts
@@ -15,3 +15,9 @@ export type WithRequiredOptions<E extends Node> =
     Omit<E, 'configure'> & {
         configure(options: E['options']): E
     }
+
+declare module '@tiptap/core' {
+    interface Storage {
+        scrollYPercentage: number;
+    }
+}
diff --git a/resources/js/form/components/fields/editor/utils/html.ts b/resources/js/form/components/fields/editor/utils/html.ts
index 1d707e21c..0157d4759 100644
--- a/resources/js/form/components/fields/editor/utils/html.ts
+++ b/resources/js/form/components/fields/editor/utils/html.ts
@@ -1,9 +1,10 @@
 /**
  * trim empty paragraphs at the end
  */
-export function trimHTML(content, { inline }) {
+export function trimHTML(content: string, { inline }: { inline: boolean }) {
     if(inline) {
         return content.replace(/<\/?p>/g, '');
     }
-    return content.replace(/(<p>\s*<\/p>)+$/, '');
+    return content
+        .replace(/(?:<p>\s*<\/p>)+(<ol class="footnotes">.+?<\/ol>)?$/, '$1');
 }
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
index 35bb75464..fbaff8903 100644
--- a/resources/js/types/generated.d.ts
+++ b/resources/js/types/generated.d.ts
@@ -449,6 +449,7 @@ export type FormEditorToolbarButton =
   | "html"
   | "code-block"
   | "superscript"
+  | "footnote"
   | "undo"
   | "redo"
   | "|";
diff --git a/resources/lang/en/form.php b/resources/lang/en/form.php
index d453f6dab..b8bb845ee 100644
--- a/resources/lang/en/form.php
+++ b/resources/lang/en/form.php
@@ -132,6 +132,10 @@
     'editor.toolbar.upload_image.title' => 'Insert image',
     'editor.toolbar.horizontal_rule.title' => 'Horizontal rule',
     'editor.toolbar.fullscreen.title' => 'Full screen',
+    'editor.toolbar.footnote.title' => 'Footnote',
+    'editor.toolbar.footnote.tootlip' => 'Click to insert a reference<br>Click on the reference <sup>[1]</sup> to go down to the note and edit its content<br>Click on <sup>[^]</sup> to go back up to the reference',
     'editor.toolbar.undo.title' => 'Undo',
     'editor.toolbar.redo.title' => 'Redo',
+
+    'editor.footnotes.title' => 'Footnotes',
 ];
diff --git a/resources/lang/fr/form.php b/resources/lang/fr/form.php
index 316c9a21d..f156d51df 100644
--- a/resources/lang/fr/form.php
+++ b/resources/lang/fr/form.php
@@ -135,6 +135,10 @@
     'editor.toolbar.upload_image.title' => 'Insérer une image',
     'editor.toolbar.horizontal_rule.title' => 'Séparateur',
     'editor.toolbar.fullscreen.title' => 'Plein écran',
+    'editor.toolbar.footnote.title' => 'Note de bas de page',
+    'editor.toolbar.footnote.tootlip' => 'Cliquez pour insérer une référence<br>Cliquez sur la référence <sup>[1]</sup> pour descendre vers la note et éditer son contenu<br>Cliquez sur <sup>[^]</sup> pour remonter vers la référence',
     'editor.toolbar.undo.title' => 'Annuler',
     'editor.toolbar.redo.title' => 'Rétablir',
+
+    'editor.footnotes.title' => 'Notes de bas de page',
 ];
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index dd0ab9c8d..18506f354 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
+<html lang="{{ app()->getLocale() }}"
+    class="[&:not(:has(:is([data-sticky-top],.sticky):focus-within))]:scroll-pt-48 scroll-pb-24"
+>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
diff --git a/src/Enums/FormEditorToolbarButton.php b/src/Enums/FormEditorToolbarButton.php
index d1275666f..d51208fb6 100644
--- a/src/Enums/FormEditorToolbarButton.php
+++ b/src/Enums/FormEditorToolbarButton.php
@@ -27,6 +27,7 @@ enum FormEditorToolbarButton: string
     case Html = 'html';
     case CodeBlock = 'code-block';
     case Superscript = 'superscript';
+    case Footnote = 'footnote';
 
     case Undo = 'undo';
     case Redo = 'redo';
diff --git a/src/Form/Fields/SharpFormEditorField.php b/src/Form/Fields/SharpFormEditorField.php
index ee8dda064..d455fab67 100644
--- a/src/Form/Fields/SharpFormEditorField.php
+++ b/src/Form/Fields/SharpFormEditorField.php
@@ -51,6 +51,7 @@ class SharpFormEditorField extends SharpFormField implements IsSharpFieldWithEmb
     const RAW_HTML = FormEditorToolbarButton::Html;
     const CODE_BLOCK = FormEditorToolbarButton::CodeBlock;
     const SUP = FormEditorToolbarButton::Superscript;
+    const FOOTNOTE = FormEditorToolbarButton::Footnote;
     const UNDO = FormEditorToolbarButton::Undo;
     const REDO = FormEditorToolbarButton::Redo;
 
diff --git a/src/Utils/Sanitization/FormatsSanitizedValue.php b/src/Utils/Sanitization/FormatsSanitizedValue.php
index 14f7de523..59da41951 100644
--- a/src/Utils/Sanitization/FormatsSanitizedValue.php
+++ b/src/Utils/Sanitization/FormatsSanitizedValue.php
@@ -41,6 +41,7 @@ private function sanitizer(): HtmlSanitizer
     {
         $config = (new HtmlSanitizerConfig())
             ->allowSafeElements()
+            ->allowAttribute('data-id', ['a', 'li'])
             ->allowElement('iframe', [
                 'allow',
                 'allowfullscreen',
@@ -61,7 +62,7 @@ private function sanitizer(): HtmlSanitizer
             ])
             ->allowRelativeLinks()
             ->allowRelativeMedias()
-            ->allowElement('div', ['data-encoded-content'])
+            ->allowElement('div', ['data-encoded-content', 'data-id'])
             ->allowAttribute('class', allowedElements: '*')
             ->allowAttribute('style', allowedElements: '*')
             ->withMaxInputLength(500000);