diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 4de2d84..a3148a2 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -1,7 +1,13 @@
+import { useState, useCallback } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
-import { TextStyle, FontFamily, FontSize, Color } from "@tiptap/extension-text-style";
+import {
+  TextStyle,
+  FontFamily,
+  FontSize,
+  Color,
+} from "@tiptap/extension-text-style";
 import Highlight from "@tiptap/extension-highlight";
 import TextAlign from "@tiptap/extension-text-align";
 import Link from "@tiptap/extension-link";
@@ -11,30 +17,91 @@ import Toolbar from "./Toolbar";
 import PageView from "./PageView";
 
 function Editor() {
-  const editor = useEditor({
+  const [isHeaderVisible, setIsHeaderVisible] = useState(false);
+  const [activeEditorType, setActiveEditorType] = useState<"body" | "header">(
+    "body"
+  );
+  const [headerHtml, setHeaderHtml] = useState("");
+
+  const bodyEditor = useEditor({
     extensions: [
       StarterKit.configure({
         heading: { levels: [1, 2, 3, 4] },
       }),
       Link.configure({ openOnClick: false }),
-      Underline,
-      TextStyle,
-      FontFamily,
-      FontSize,
-      Color,
+      Underline.configure(),
+      TextStyle.configure(),
+      FontFamily.configure(),
+      FontSize.configure(),
+      Color.configure(),
       Highlight.configure({ multicolor: true }),
       TextAlign.configure({ types: ["heading", "paragraph"] }),
       Image.configure({ inline: true }),
       Placeholder.configure({ placeholder: "Start typing..." }),
     ],
     autofocus: true,
+    onFocus: () => setActiveEditorType("body"),
+  });
+
+  const headerEditor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        bulletList: false,
+        orderedList: false,
+        listItem: false,
+        codeBlock: false,
+        horizontalRule: false,
+        blockquote: false,
+      }),
+      Link.configure({ openOnClick: false }),
+      Underline.configure(),
+      TextStyle.configure(),
+      FontFamily.configure(),
+      FontSize.configure(),
+      Color.configure(),
+      Highlight.configure({ multicolor: true }),
+      TextAlign.configure({ types: ["paragraph"] }),
+      Placeholder.configure({ placeholder: "Click here to add a header" }),
+    ],
+    onFocus: () => setActiveEditorType("header"),
+    onUpdate: ({ editor }) => {
+      setHeaderHtml(editor.getHTML());
+    },
   });
 
+  const activeEditor =
+    activeEditorType === "header" && headerEditor ? headerEditor : bodyEditor;
+
+  const toggleHeader = useCallback(() => {
+    setIsHeaderVisible((previous) => {
+      if (previous && activeEditorType === "header") {
+        setActiveEditorType("body");
+        bodyEditor?.commands.focus();
+      }
+      return !previous;
+    });
+  }, [activeEditorType, bodyEditor]);
+
   return (
     <>
-      {editor && <Toolbar editor={editor} />}
-      <PageView>
-        <EditorContent editor={editor} className="h-full" />
+      {activeEditor && (
+        <Toolbar
+          editor={activeEditor}
+          isHeaderVisible={isHeaderVisible}
+          onToggleHeader={toggleHeader}
+        />
+      )}
+      <PageView
+        documentHeaderSlot={
+          headerEditor && (
+            <EditorContent editor={headerEditor} className="header-editor" />
+          )
+        }
+        documentHeaderHtml={headerHtml}
+        isDocumentHeaderVisible={isHeaderVisible}
+      >
+        <EditorContent editor={bodyEditor} className="h-full" />
       </PageView>
     </>
   );
diff --git a/src/components/PageView.tsx b/src/components/PageView.tsx
index b8aecc7..ba30c6d 100644
--- a/src/components/PageView.tsx
+++ b/src/components/PageView.tsx
@@ -1,4 +1,10 @@
-import { useRef, useState, useEffect, useCallback, type ReactNode } from "react";
+import {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  type ReactNode,
+} from "react";
 
 const PAGE_WIDTH = 816;
 const HEADER_HEIGHT = 48;
@@ -6,7 +12,7 @@ const FOOTER_HEIGHT = 48;
 const GAP_HEIGHT = 40;
 const PAGE_CONTENT_HEIGHT = 1056 - HEADER_HEIGHT - FOOTER_HEIGHT;
 const PAGE_HORIZONTAL_PADDING = 96;
-const OVERLAY_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT + GAP_HEIGHT;
+const BASE_OVERLAY_HEIGHT = HEADER_HEIGHT + FOOTER_HEIGHT + GAP_HEIGHT;
 
 const PAGE_SHADOW = "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)";
 
@@ -18,14 +24,20 @@ const pageNumberStyle = {
 
 interface PageViewProps {
   children: ReactNode;
+  documentHeaderSlot?: ReactNode;
+  documentHeaderHtml?: string;
+  isDocumentHeaderVisible?: boolean;
 }
 
 /**
- * Finds the .tiptap element inside the content ref and adds margin-bottom
+ * Finds the .tiptap element inside the content ref and adds margin-top
  * to block elements that would straddle a page boundary, pushing them to
  * the next page. Returns the total number of pages.
  */
-function adjustBlockMarginsForPageBreaks(contentElement: HTMLElement): number {
+function adjustBlockMarginsForPageBreaks(
+  contentElement: HTMLElement,
+  overlayHeight: number
+): number {
   const tiptapElement = contentElement.querySelector(".tiptap");
   if (!tiptapElement) return 1;
 
@@ -47,17 +59,17 @@ function adjustBlockMarginsForPageBreaks(contentElement: HTMLElement): number {
     const blockTop = blockRect.top - contentTop;
     const blockBottom = blockRect.bottom - contentTop;
 
-    // Account for margins already added (each previous page break adds OVERLAY_HEIGHT)
+    // Account for margins already added (each previous page break adds overlayHeight)
     const previousBreaks = currentPage - 1;
-    const adjustedTop = blockTop - previousBreaks * OVERLAY_HEIGHT;
-    const adjustedBottom = blockBottom - previousBreaks * OVERLAY_HEIGHT;
+    const adjustedTop = blockTop - previousBreaks * overlayHeight;
+    const adjustedBottom = blockBottom - previousBreaks * overlayHeight;
 
     const pageBoundary = currentPage * PAGE_CONTENT_HEIGHT;
 
     // If this block crosses a page boundary
     if (adjustedTop < pageBoundary && adjustedBottom > pageBoundary) {
       // Add margin to push it to the next page's content area
-      const spaceNeeded = pageBoundary - adjustedTop + OVERLAY_HEIGHT;
+      const spaceNeeded = pageBoundary - adjustedTop + overlayHeight;
       block.style.marginTop = `${spaceNeeded}px`;
       block.dataset.pageMargin = "true";
       currentPage++;
@@ -70,27 +82,59 @@ function adjustBlockMarginsForPageBreaks(contentElement: HTMLElement): number {
   // Calculate total pages from the final content height
   const finalHeight = tiptapElement.getBoundingClientRect().height;
   const totalBreaks = currentPage - 1;
-  const adjustedHeight = finalHeight - totalBreaks * OVERLAY_HEIGHT;
+  const adjustedHeight = finalHeight - totalBreaks * overlayHeight;
   return Math.max(1, Math.ceil(adjustedHeight / PAGE_CONTENT_HEIGHT));
 }
 
-function PageView({ children }: PageViewProps) {
+function PageView({
+  children,
+  documentHeaderSlot,
+  documentHeaderHtml,
+  isDocumentHeaderVisible = false,
+}: PageViewProps) {
   const contentRef = useRef<HTMLDivElement>(null);
+  const headerMeasureRef = useRef<HTMLDivElement>(null);
   const [totalPages, setTotalPages] = useState(1);
+  const [documentHeaderRenderedHeight, setDocumentHeaderRenderedHeight] =
+    useState(0);
   const isAdjustingRef = useRef(false);
 
+  const showHeader = isDocumentHeaderVisible && !!documentHeaderSlot;
+  const headerHeight = showHeader ? documentHeaderRenderedHeight : 0;
+  const effectiveOverlayHeight = BASE_OVERLAY_HEIGHT + headerHeight;
+
+  // Measure document header height
+  useEffect(() => {
+    const element = headerMeasureRef.current;
+    if (!element || !showHeader) {
+      setDocumentHeaderRenderedHeight(0);
+      return;
+    }
+    const measureHeight = () => {
+      const height = element.getBoundingClientRect().height;
+      setDocumentHeaderRenderedHeight(height);
+    };
+    measureHeight();
+    const observer = new ResizeObserver(measureHeight);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [showHeader]);
+
   const recalculatePages = useCallback(() => {
     if (isAdjustingRef.current) return;
     const element = contentRef.current;
     if (!element) return;
 
     isAdjustingRef.current = true;
-    const pages = adjustBlockMarginsForPageBreaks(element);
+    const pages = adjustBlockMarginsForPageBreaks(
+      element,
+      effectiveOverlayHeight
+    );
     if (pages !== totalPages) {
       setTotalPages(pages);
     }
     isAdjustingRef.current = false;
-  }, [totalPages]);
+  }, [totalPages, effectiveOverlayHeight]);
 
   useEffect(() => {
     const element = contentRef.current;
@@ -108,11 +152,13 @@ function PageView({ children }: PageViewProps) {
     return () => observer.disconnect();
   }, [recalculatePages]);
 
+  // Recalculate when header height changes
+  useEffect(() => {
+    recalculatePages();
+  }, [headerHeight, recalculatePages]);
+
   return (
-    <div
-      className="relative mt-4"
-      style={{ width: PAGE_WIDTH }}
-    >
+    <div className="relative mt-4" style={{ width: PAGE_WIDTH }}>
       {/* First page header */}
       <div
         className="bg-white"
@@ -125,6 +171,25 @@ function PageView({ children }: PageViewProps) {
         }}
       />
 
+      {/* Document header (editable, first page) */}
+      {showHeader && (
+        <div
+          ref={headerMeasureRef}
+          className="bg-white"
+          style={{
+            paddingLeft: PAGE_HORIZONTAL_PADDING,
+            paddingRight: PAGE_HORIZONTAL_PADDING,
+            boxShadow: PAGE_SHADOW,
+            clipPath: "inset(0 -10px)",
+          }}
+        >
+          <div className="document-header bg-[#f8f9fc] rounded-sm px-3 py-2">
+            {documentHeaderSlot}
+          </div>
+          <div className="border-b border-gray-300 mt-2" />
+        </div>
+      )}
+
       {/* Content area */}
       <div
         ref={contentRef}
@@ -160,11 +225,12 @@ function PageView({ children }: PageViewProps) {
       {/* Page gap overlays at each boundary */}
       {Array.from({ length: totalPages - 1 }, (_, index) => {
         const pageNumber = index + 1;
-        // Each overlay sits at: header + N page-content-heights + previous overlays
+        // Each overlay sits at: first page header + document header + N page-content-heights + previous overlays
         const topPosition =
           HEADER_HEIGHT +
+          headerHeight +
           PAGE_CONTENT_HEIGHT * pageNumber +
-          index * OVERLAY_HEIGHT;
+          index * effectiveOverlayHeight;
 
         return (
           <div
@@ -190,10 +256,7 @@ function PageView({ children }: PageViewProps) {
             </div>
 
             {/* Gap between pages */}
-            <div
-              className="bg-[#F8F9FA]"
-              style={{ height: GAP_HEIGHT }}
-            />
+            <div className="bg-[#F8F9FA]" style={{ height: GAP_HEIGHT }} />
 
             {/* Header of next page */}
             <div
@@ -206,6 +269,27 @@ function PageView({ children }: PageViewProps) {
                 borderTopRightRadius: 4,
               }}
             />
+
+            {/* Document header (read-only copy for subsequent pages) */}
+            {showHeader && documentHeaderHtml && (
+              <div
+                className="bg-white"
+                style={{
+                  paddingLeft: PAGE_HORIZONTAL_PADDING,
+                  paddingRight: PAGE_HORIZONTAL_PADDING,
+                  boxShadow: PAGE_SHADOW,
+                  clipPath: "inset(0 -10px)",
+                }}
+              >
+                <div className="document-header bg-[#f8f9fc] rounded-sm px-3 py-2">
+                  <div
+                    className="tiptap"
+                    dangerouslySetInnerHTML={{ __html: documentHeaderHtml }}
+                  />
+                </div>
+                <div className="border-b border-gray-300 mt-2" />
+              </div>
+            )}
           </div>
         );
       })}
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 65cbd22..a2aa239 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -22,6 +22,7 @@ import {
   Link,
   ImageIcon,
   MinusIcon,
+  PanelTop,
 } from "lucide-react";
 import ColorPicker from "./ColorPicker";
 import LinkPopover from "./LinkPopover";
@@ -57,6 +58,8 @@ type PopoverName =
 
 interface ToolbarProps {
   editor: Editor;
+  isHeaderVisible: boolean;
+  onToggleHeader: () => void;
 }
 
 function ToolbarButton({
@@ -94,9 +97,17 @@ function ToolbarDivider() {
   return <div className="w-px h-6 bg-gray-300 mx-1" />;
 }
 
-function Toolbar({ editor }: ToolbarProps) {
+function Toolbar({ editor, isHeaderVisible, onToggleHeader }: ToolbarProps) {
   const [activePopover, setActivePopover] = useState<PopoverName>(null);
 
+  // Check which node types are available in the active editor's schema
+  const hasHeading = !!editor.schema.nodes.heading;
+  const hasListItem = !!editor.schema.nodes.listItem;
+  const hasBulletList = !!editor.schema.nodes.bulletList;
+  const hasOrderedList = !!editor.schema.nodes.orderedList;
+  const hasHorizontalRule = !!editor.schema.nodes.horizontalRule;
+  const hasImage = !!editor.schema.nodes.image;
+
   const togglePopover = useCallback(
     (name: PopoverName) => {
       setActivePopover((current) => (current === name ? null : name));
@@ -198,17 +209,18 @@ function Toolbar({ editor }: ToolbarProps) {
         <div className="relative">
           <button
             type="button"
+            disabled={!hasHeading}
             onMouseDown={(event) => {
               event.preventDefault();
-              togglePopover("heading");
+              if (hasHeading) togglePopover("heading");
             }}
-            className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-sm text-gray-700 cursor-pointer transition-colors"
+            className={`flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-sm cursor-pointer transition-colors ${!hasHeading ? "opacity-40 cursor-not-allowed" : "text-gray-700"}`}
             style={{ minWidth: 110 }}
           >
             <span className="truncate">{currentHeadingLabel}</span>
             <ChevronDown size={14} />
           </button>
-          {activePopover === "heading" && (
+          {activePopover === "heading" && hasHeading && (
             <div
               className="absolute top-full left-0 mt-1 z-50 bg-white border border-gray-200 rounded-lg shadow-lg py-1"
               style={{ minWidth: 160 }}
@@ -449,14 +461,16 @@ function Toolbar({ editor }: ToolbarProps) {
         <ToolbarButton
           title="Bulleted list"
           onClick={() => editor.chain().focus().toggleBulletList().run()}
-          isActive={editor.isActive("bulletList")}
+          isActive={hasBulletList && editor.isActive("bulletList")}
+          disabled={!hasBulletList}
         >
           <List size={18} />
         </ToolbarButton>
         <ToolbarButton
           title="Numbered list"
           onClick={() => editor.chain().focus().toggleOrderedList().run()}
-          isActive={editor.isActive("orderedList")}
+          isActive={hasOrderedList && editor.isActive("orderedList")}
+          disabled={!hasOrderedList}
         >
           <ListOrdered size={18} />
         </ToolbarButton>
@@ -465,14 +479,14 @@ function Toolbar({ editor }: ToolbarProps) {
         <ToolbarButton
           title="Decrease indent"
           onClick={() => editor.chain().focus().liftListItem("listItem").run()}
-          disabled={!editor.can().liftListItem("listItem")}
+          disabled={!hasListItem || !editor.can().liftListItem("listItem")}
         >
           <Outdent size={18} />
         </ToolbarButton>
         <ToolbarButton
           title="Increase indent"
           onClick={() => editor.chain().focus().sinkListItem("listItem").run()}
-          disabled={!editor.can().sinkListItem("listItem")}
+          disabled={!hasListItem || !editor.can().sinkListItem("listItem")}
         >
           <Indent size={18} />
         </ToolbarButton>
@@ -501,10 +515,11 @@ function Toolbar({ editor }: ToolbarProps) {
           <ToolbarButton
             title="Insert image"
             onClick={() => togglePopover("image")}
+            disabled={!hasImage}
           >
             <ImageIcon size={18} />
           </ToolbarButton>
-          {activePopover === "image" && (
+          {activePopover === "image" && hasImage && (
             <ImagePopover
               editor={editor}
               onClose={closePopover}
@@ -516,9 +531,21 @@ function Toolbar({ editor }: ToolbarProps) {
         <ToolbarButton
           title="Horizontal rule"
           onClick={() => editor.chain().focus().setHorizontalRule().run()}
+          disabled={!hasHorizontalRule}
         >
           <MinusIcon size={18} />
         </ToolbarButton>
+
+        <ToolbarDivider />
+
+        {/* Toggle Document Header */}
+        <ToolbarButton
+          title={isHeaderVisible ? "Hide header" : "Show header"}
+          onClick={onToggleHeader}
+          isActive={isHeaderVisible}
+        >
+          <PanelTop size={18} />
+        </ToolbarButton>
       </div>
     </>
   );
diff --git a/src/index.css b/src/index.css
index a8cdcc1..6c46d80 100644
--- a/src/index.css
+++ b/src/index.css
@@ -60,3 +60,20 @@
 html {
   margin: 0px;
 }
+
+/* Document header editor styles */
+.document-header .tiptap {
+  outline: none;
+  font-family: Arial, sans-serif;
+  font-size: 9pt;
+  line-height: 1.4;
+  color: #555;
+}
+
+.document-header .tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}