diff --git a/src/components/main-ui.tsx b/src/components/main-ui.tsx
index 004011d..2a7e433 100644
--- a/src/components/main-ui.tsx
+++ b/src/components/main-ui.tsx
@@ -10,9 +10,11 @@ import { ImagesToPDFUI } from "./images-to-pdf";
 import { ProtectUI } from "./protect";
 import { DecryptUI } from "./decrypt";
 import { OrganiseUI } from "./organise";
+import { PageNumbersUI } from "./page-numbers";
 import { HeaderLayout } from "./header-layout";
 import { PDFPreviewPane } from "./pdf-preview";
 import { useFileListContext } from "../provider/fileListProvider";
+import { KeyboardNavProvider } from "../provider/keyboardNavProvider";
 import { Button } from "./ui/button";
 
 interface MainUIProps {
@@ -32,6 +34,7 @@ const toolComponents: Record<string, () => any> = {
   protect: ProtectUI,
   decrypt: DecryptUI,
   organise: OrganiseUI,
+  pageNumbers: PageNumbersUI,
 };
 
 export function MainUI(props: MainUIProps) {
@@ -50,33 +53,35 @@ export function MainUI(props: MainUIProps) {
 
   return (
     <HeaderLayout toolName={props.toolName} onBack={props.onBack}>
-      <box flexDirection="row">
-        <box flexGrow={3}>
-          <Dynamic component={toolComponents[props.selectedTool]} />
-        </box>
-        <Show when={props.selectedTool !== "organise" && props.selectedTool !== "decrypt"}>
-          <box flexGrow={2} width={isPreviewOpen() && fl.fileCount() > 0 ? "30%" : 6}>
-            <Show
-              when={isPreviewOpen() && fl.fileCount() > 0}
-              fallback={
-                <box alignItems="flex-start" paddingTop={2}>
-                  <Button
-                    disabled={!fl.selectedFile()}
-                    color="yellow"
-                    label="◀"
-                    onClick={() => setIsPreviewOpen(true)}
-                  />
-                </box>
-              }
-            >
-              <PDFPreviewPane
-                onOpen={() => setIsPreviewOpen(true)}
-                onClose={() => setIsPreviewOpen(false)}
-              />
-            </Show>
+      <KeyboardNavProvider>
+        <box flexDirection="row">
+          <box flexGrow={3}>
+            <Dynamic component={toolComponents[props.selectedTool]} />
           </box>
-        </Show>
-      </box>
+          <Show when={props.selectedTool !== "organise" && props.selectedTool !== "decrypt"}>
+            <box flexGrow={2} width={isPreviewOpen() && fl.fileCount() > 0 ? "30%" : 6}>
+              <Show
+                when={isPreviewOpen() && fl.fileCount() > 0}
+                fallback={
+                  <box alignItems="flex-start" paddingTop={2}>
+                    <Button
+                      disabled={!fl.selectedFile()}
+                      color="yellow"
+                      label="◀"
+                      onClick={() => setIsPreviewOpen(true)}
+                    />
+                  </box>
+                }
+              >
+                <PDFPreviewPane
+                  onOpen={() => setIsPreviewOpen(true)}
+                  onClose={() => setIsPreviewOpen(false)}
+                />
+              </Show>
+            </box>
+          </Show>
+        </box>
+      </KeyboardNavProvider>
     </HeaderLayout>
   );
 }
diff --git a/src/components/page-numbers.tsx b/src/components/page-numbers.tsx
new file mode 100644
index 0000000..3dc97d2
--- /dev/null
+++ b/src/components/page-numbers.tsx
@@ -0,0 +1,279 @@
+import { createSignal, createMemo, createEffect, onCleanup } from "solid-js";
+import { addPageNumbers } from "../tools/page-numbers";
+import { openFile, getOutputPath, openOutputFolder } from "../utils/utils";
+import { Button } from "./ui/button";
+import { ButtonRow } from "./ui/button-row";
+import { Dropdown } from "./ui/dropdown";
+import { FileList } from "./ui/file-list";
+import { Label } from "./ui/label";
+import { StatusBar } from "./ui/status-bar";
+import { TextInput } from "./ui/text-input";
+import { ToolContainer } from "./ui/tool-container";
+import { useKeyboardNav } from "../hooks/useKeyboardNav";
+import { useFileListContext } from "../provider/fileListProvider";
+import type { PageNumberPosition } from "../model/models";
+import { StandardFonts } from "pdf-lib";
+
+const POSITIONS: { label: string; value: PageNumberPosition }[] = [
+  { label: "Bottom Center", value: "bottom-center" },
+  { label: "Bottom Left", value: "bottom-left" },
+  { label: "Bottom Right", value: "bottom-right" },
+  { label: "Top Center", value: "top-center" },
+  { label: "Top Left", value: "top-left" },
+  { label: "Top Right", value: "top-right" },
+];
+
+const FONTS = Object.values(StandardFonts).map((font) => ({ label: String(font), value: font }));
+
+export function PageNumbersUI() {
+  const fl = useFileListContext();
+  const nav = useKeyboardNav();
+  const [position, setPosition] = createSignal<PageNumberPosition>("bottom-center");
+  const [positionOpen, setPositionOpen] = createSignal(false);
+  const [startInput, setStartInput] = createSignal("1");
+  const [fontInput, setFontInput] = createSignal(StandardFonts.Helvetica);
+  const [fontOpen, setFontOpen] = createSignal(false);
+  const [fontSizeInput, setFontSizeInput] = createSignal("12");
+  const [focusedInput, setFocusedInput] = createSignal<string | null>(null);
+
+  const canApply = createMemo(() => fl.selectedFile() !== null && !fl.isProcessing());
+  const canClearAll = () => fl.fileCount() > 0;
+
+  const clearAll = () => {
+    fl.clearAll();
+    setStartInput("1");
+    setFontInput(StandardFonts.Helvetica);
+    setFontSizeInput("12");
+  };
+
+  const handleApply = async () => {
+    const file = fl.selectedFile();
+    if (!file || fl.isProcessing()) return;
+
+    fl.setIsProcessing(true);
+    fl.setStatus({ msg: "Adding page numbers...", type: "info" });
+
+    try {
+      const outputPath = await getOutputPath("numbered", file);
+      const startNumber = parseInt(startInput().trim());
+
+      const res = await addPageNumbers({
+        inputPath: file,
+        outputPath,
+        position: position(),
+        startNumber: isNaN(startNumber) ? 1 : startNumber,
+      });
+
+      if (res.success) {
+        fl.setStatus({
+          msg: `Added page numbers to ${res.numberedPages} page(s)`,
+          type: "success",
+        });
+        openFile(outputPath);
+      } else {
+        fl.setStatus({ msg: res.error || "Unknown error", type: "error" });
+      }
+    } catch (error) {
+      fl.setStatus({
+        msg: error instanceof Error ? error.message : "Unknown error",
+        type: "error",
+      });
+    } finally {
+      fl.setIsProcessing(false);
+    }
+  };
+
+  createEffect(() => {
+    nav.clearElements();
+
+    fl.files().forEach((_, index) => {
+      nav.registerElement({
+        id: `file-${index}-open`,
+        type: "button",
+        onEnter: () => openFile(fl.files()[index]!),
+      });
+
+      nav.registerElement({
+        id: `file-${index}`,
+        type: "list-item",
+        onEnter: () => fl.selectFile(index),
+      });
+
+      nav.registerElement({
+        id: `file-${index}-remove`,
+        type: "button",
+        onEnter: () => fl.removeFile(index),
+      });
+    });
+
+    nav.registerElement({
+      id: "position-dropdown",
+      type: "button",
+      onEnter: () => setPositionOpen(true),
+    });
+
+    nav.registerElement({
+      id: "font-dropdown",
+      type: "button",
+      onEnter: () => setFontOpen(true),
+    });
+
+    nav.registerElement({ id: "input-start", type: "input" });
+    nav.registerElement({ id: "input-font-size", type: "input" });
+
+    nav.registerElement({
+      id: "clear-all-btn",
+      type: "button",
+      onEnter: () => clearAll(),
+      canFocus: () => canClearAll(),
+    });
+    nav.registerElement({
+      id: "apply-btn",
+      type: "button",
+      onEnter: () => handleApply(),
+      canFocus: () => canApply(),
+    });
+    nav.registerElement({
+      id: "open-output-btn",
+      type: "button",
+      onEnter: () =>
+        openOutputFolder().catch((_) =>
+          fl.setStatus({ msg: "Failed to open folder", type: "error" }),
+        ),
+    });
+  });
+
+  createEffect(() => {
+    nav.setIsInputMode(focusedInput() !== null);
+  });
+
+  // Sync back: reset focusedInput when nav exits input mode (Tab/Escape)
+  createEffect(() => {
+    if (!nav.isInputMode()) {
+      setFocusedInput(null);
+    }
+  });
+
+  onCleanup(() => {
+    nav.clearElements();
+  });
+
+  return (
+    <ToolContainer>
+      <FileList
+        header="Files"
+        files={fl.files}
+        fileType="pdf"
+        selectedIndex={fl.selectedIndex}
+        onSelect={fl.selectFile}
+        onFocusIndex={(index) => nav.focusById(`file-${index}`)}
+        onRemove={fl.removeFile}
+        onFilesSelected={async (paths) => {
+          await fl.addFilesToList(paths);
+        }}
+        focusedIndex={() => {
+          const focusId = nav.getFocusedId();
+          if (focusId && focusId.startsWith("file-")) {
+            const parts = focusId.split("-");
+            return parseInt(parts[1] || "0");
+          }
+          return null;
+        }}
+        focusedButton={() => nav.getFocusedId()}
+      />
+
+      <box
+        flexDirection="row"
+        columnGap={2}
+        paddingBottom={1}
+        width="100%"
+        flexShrink={0}
+        zIndex={positionOpen() || fontOpen() ? 1001 : 0}
+      >
+        <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0}>
+          <Label text="Position" />
+          <Dropdown
+            options={POSITIONS}
+            value={position()}
+            onChange={setPosition}
+            open={positionOpen()}
+            onOpenChange={setPositionOpen}
+            focused={nav.isFocused("position-dropdown")}
+            width="100%"
+            marginTop={0}
+            marginBottom={0}
+          />
+        </box>
+        <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0}>
+          <Label text="Font" />
+          <Dropdown
+            options={FONTS}
+            value={fontInput()}
+            onChange={setFontInput}
+            open={fontOpen()}
+            onOpenChange={setFontOpen}
+            focused={nav.isFocused("font-dropdown")}
+            width="100%"
+            marginTop={0}
+            marginBottom={0}
+          />
+        </box>
+      </box>
+
+      <box flexDirection="row" columnGap={2} width="100%" flexShrink={0}>
+        <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0}>
+          <TextInput
+            label="Start number:"
+            value={startInput}
+            onInput={setStartInput}
+            placeholder="1"
+            focused={focusedInput() === "input-start" || nav.isFocused("input-start")}
+            onFocus={() => setFocusedInput("input-start")}
+            width="100%"
+            marginTop={0}
+          />
+        </box>
+        <box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minWidth={0}>
+          <TextInput
+            label="Font Size:"
+            value={fontSizeInput}
+            onInput={setFontSizeInput}
+            placeholder="12"
+            focused={focusedInput() === "input-font-size" || nav.isFocused("input-font-size")}
+            onFocus={() => setFocusedInput("input-font-size")}
+            width="100%"
+            marginTop={0}
+          />
+        </box>
+      </box>
+      <ButtonRow>
+        <Button
+          label="Clear All"
+          color={canClearAll() ? "yellow" : "gray"}
+          disabled={!canClearAll()}
+          onClick={clearAll}
+          focused={nav.isFocused("clear-all-btn")}
+        />
+        <Button
+          label={fl.isProcessing() ? "Adding..." : "Add Page Numbers"}
+          color={canApply() ? "cyan" : "gray"}
+          disabled={!canApply()}
+          onClick={handleApply}
+          focused={nav.isFocused("apply-btn")}
+        />
+        <Button
+          label="Open Output Folder"
+          color="output"
+          onClick={() =>
+            openOutputFolder().catch((_) =>
+              fl.setStatus({ msg: "Failed to open folder", type: "error" }),
+            )
+          }
+          focused={nav.isFocused("open-output-btn")}
+        />
+      </ButtonRow>
+
+      <StatusBar message={fl.status().msg} type={fl.status().type} />
+    </ToolContainer>
+  );
+}
diff --git a/src/components/ui/dropdown.tsx b/src/components/ui/dropdown.tsx
new file mode 100644
index 0000000..44fa482
--- /dev/null
+++ b/src/components/ui/dropdown.tsx
@@ -0,0 +1,152 @@
+import { TextAttributes, type MouseEvent } from "@opentui/core";
+import { useBindings } from "@opentui/keymap/solid";
+import { createEffect, createSignal, For, Show } from "solid-js";
+import { EmptyBorderChars, HIGHLIGHT_ACCENT_COLOR } from "../../constants/constants";
+
+export interface DropdownOption<T> {
+  label: string;
+  value: T;
+}
+
+interface DropdownProps<T> {
+  options: DropdownOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  focused?: boolean;
+  placeholder?: string;
+  width?: number | "auto" | `${number}%`;
+  marginTop?: number;
+  marginBottom?: number;
+}
+
+const LIST_Z = 1001;
+// Constant so the reserved flow space doesn't shift when the dropdown toggles.
+const TRIGGER_HEIGHT = 3;
+
+export function Dropdown<T>(props: DropdownProps<T>) {
+  const [hovered, setHovered] = createSignal(false);
+  const [highlight, setHighlight] = createSignal(0);
+
+  const isHighlighted = () => props.focused || hovered() || props.open;
+
+  const selectedLabel = () =>
+    props.options.find((option) => option.value === props.value)?.label ??
+    props.placeholder ??
+    "Select...";
+
+  const close = () => props.onOpenChange(false);
+
+  const clampHighlight = (index: number) => Math.max(0, Math.min(index, props.options.length - 1));
+
+  const moveHighlight = (delta: number) => {
+    setHighlight((current) => clampHighlight(current + delta));
+  };
+
+  const selectAt = (index: number) => {
+    const option = props.options[index];
+    if (option) {
+      props.onChange(option.value);
+    }
+    close();
+  };
+
+  const toggleOpen = () => props.onOpenChange(!props.open);
+
+  createEffect(() => {
+    if (!props.open) return;
+    const currentIndex = props.options.findIndex((option) => option.value === props.value);
+    setHighlight(currentIndex < 0 ? 0 : currentIndex);
+  });
+
+  useBindings(() => ({
+    priority: 200,
+    bindings: props.open
+      ? [
+          { key: "down", cmd: () => moveHighlight(1) },
+          { key: "j", cmd: () => moveHighlight(1) },
+          { key: "up", cmd: () => moveHighlight(-1) },
+          { key: "k", cmd: () => moveHighlight(-1) },
+          { key: "return", cmd: () => selectAt(highlight()) },
+          { key: "escape", cmd: close },
+          { key: "tab", cmd: close },
+          { key: "shift+tab", cmd: close },
+        ]
+      : [],
+  }));
+
+  return (
+    <box
+      width={props.width ?? "auto"}
+      flexShrink={1}
+      minWidth={0}
+      marginTop={props.marginTop ?? 1}
+      zIndex={props.open ? LIST_Z : 0}
+    >
+      <box
+        width="100%"
+        border={["left"]}
+        borderColor={isHighlighted() ? HIGHLIGHT_ACCENT_COLOR : "#34495e"}
+        backgroundColor={props.open ? "#1a2f3a" : "#1a1a1a"}
+        customBorderChars={{
+          ...EmptyBorderChars,
+          vertical: "▌",
+          bottomLeft: "╹",
+        }}
+        flexDirection="row"
+        alignItems="center"
+        padding={1}
+        onMouseDown={toggleOpen}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+      >
+        <text
+          fg={isHighlighted() ? HIGHLIGHT_ACCENT_COLOR : "#bdc3c7"}
+          attributes={isHighlighted() ? TextAttributes.BOLD : undefined}
+          content={selectedLabel()}
+        />
+        <text
+          fg={isHighlighted() ? HIGHLIGHT_ACCENT_COLOR : "#7f8c8d"}
+          content={props.open ? "▲" : "▼"}
+          marginLeft="auto"
+        />
+      </box>
+
+      <Show when={props.open}>
+        <scrollbox
+          position="absolute"
+          backgroundColor="#12212b"
+          top={TRIGGER_HEIGHT}
+          width="100%"
+          height={Math.min(props.options.length, 7)}
+          minHeight={7}
+          contentOptions={{ flexDirection: "column", paddingY: 1 }}
+        >
+          <For each={props.options}>
+            {(option, index) => {
+              const active = () => highlight() === index();
+              return (
+                <box
+                  paddingX={1}
+                  backgroundColor={active() ? "#1f3d4d" : undefined}
+                  onMouseOver={() => setHighlight(index())}
+                  onMouseDown={(e?: MouseEvent) => {
+                    e?.stopPropagation();
+                    selectAt(index());
+                  }}
+                >
+                  <text
+                    fg={active() ? HIGHLIGHT_ACCENT_COLOR : "#bdc3c7"}
+                    attributes={active() ? TextAttributes.BOLD : undefined}
+                    content={option.label}
+                  />
+                </box>
+              );
+            }}
+          </For>
+        </scrollbox>
+      </Show>
+    </box>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
index a90cf3e..daae97e 100644
--- a/src/components/ui/index.ts
+++ b/src/components/ui/index.ts
@@ -1,5 +1,7 @@
 export { Button } from "./button";
 export { ButtonRow } from "./button-row";
+export { Dropdown } from "./dropdown";
+export type { DropdownOption } from "./dropdown";
 export { FileList } from "./file-list";
 export { Label } from "./label";
 export { PDFPreviewFrame } from "./pdf-preview-frame";
diff --git a/src/components/ui/text-input.tsx b/src/components/ui/text-input.tsx
index 654b4bd..91cf6ed 100644
--- a/src/components/ui/text-input.tsx
+++ b/src/components/ui/text-input.tsx
@@ -2,10 +2,10 @@ import { TextAttributes } from "@opentui/core";
 import type { Accessor, Setter } from "solid-js";
 import { EmptyBorderChars, HIGHLIGHT_ACCENT_COLOR } from "../../constants/constants";
 
-interface TextInputProps {
+interface TextInputProps<T> {
   label: string;
-  value: Accessor<string>;
-  onInput: Setter<string>;
+  value: Accessor<T>;
+  onInput: Setter<T>;
   placeholder?: string;
   focused: boolean;
   onFocus: () => void;
@@ -13,10 +13,16 @@ interface TextInputProps {
   flexGrow?: number;
   marginTop?: number;
   marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
   width?: number | "auto" | `${number}%`;
 }
 
-export function TextInput(props: TextInputProps) {
+export function TextInput<T>(props: TextInputProps<T>) {
   const borderColor = () => (props.focused ? HIGHLIGHT_ACCENT_COLOR : "#34495e");
 
   return (
@@ -29,24 +35,24 @@ export function TextInput(props: TextInputProps) {
       flexGrow={props.flexGrow}
       width={props.width ?? "100%"}
     >
-      <text fg="#ecf0f1" attributes={TextAttributes.BOLD} content={props.label} paddingBottom={1} />
+      <text fg="#ecf0f1" attributes={TextAttributes.BOLD} content={props.label} />
       <box
         border={["left"]}
         borderStyle="heavy"
         borderColor={borderColor()}
         customBorderChars={{
           ...EmptyBorderChars,
-          vertical: props.focused ? "▐" : "▌",
+          vertical: "▌",
           horizontal: "▂",
         }}
         backgroundColor="#1a1a1a"
         padding={1}
-        paddingBottom={1}
+        paddingBottom={props.paddingBottom ?? 1}
         width="100%"
       >
         <input
           focused={props.focused}
-          value={props.value()}
+          value={String(props.value())}
           onInput={props.onInput}
           onSubmit={props.onSubmit}
           placeholder={props.placeholder}
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 0a846a1..b40f4b8 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -15,6 +15,7 @@ export const toolsMenu = [
   { name: "Images to PDF", command: "imagesToPDF" },
   { name: "Encrypt PDF", command: "protect" },
   { name: "Decrypt PDF", command: "decrypt" },
+  { name: "Page Numbers", command: "pageNumbers" },
 ];
 
 export const EmptyBorderChars = {
diff --git a/src/hooks/useKeyboardNav.ts b/src/hooks/useKeyboardNav.ts
index 9555354..0103ba5 100644
--- a/src/hooks/useKeyboardNav.ts
+++ b/src/hooks/useKeyboardNav.ts
@@ -1,10 +1,10 @@
-import { createSignal, createMemo } from "solid-js";
+import { createSignal, createMemo, createContext, useContext } from "solid-js";
 import { useBindings } from "@opentui/keymap/solid";
 import type { FocusableElement } from "../model/models";
 
 export type { FocusableElement };
 
-export function useKeyboardNav() {
+export function createKeyboardNav() {
   const [focusIndex, setFocusIndex] = createSignal(0);
   const [elements, setElements] = createSignal<FocusableElement[]>([]);
   const [isInputMode, setIsInputMode] = createSignal(false);
@@ -62,7 +62,7 @@ export function useKeyboardNav() {
   const getFocusedId = () => focusedElement()?.id ?? null;
 
   const clearElements = () => {
-    setElements([]);
+    setElements((prev) => prev.filter((e) => e.persistent));
     setFocusIndex(0);
   };
 
@@ -70,11 +70,10 @@ export function useKeyboardNav() {
     priority: 100,
     bindings: isInputMode()
       ? [
-          // Let escape bubble to the app-level double-esc handler in src/index.tsx
           {
             key: "escape",
             cmd: () => setIsInputMode(false),
-            preventDefault: false,
+            preventDefault: false, // Let escape bubble to the app-level double-esc handler in src/index.tsx
           },
           {
             key: "tab",
@@ -114,3 +113,9 @@ export function useKeyboardNav() {
     setIsInputMode,
   };
 }
+
+export const KeyboardNavContext = createContext<ReturnType<typeof createKeyboardNav>>();
+
+export function useKeyboardNav() {
+  return useContext(KeyboardNavContext) ?? createKeyboardNav();
+}
diff --git a/src/model/models.ts b/src/model/models.ts
index 97174d9..280f943 100644
--- a/src/model/models.ts
+++ b/src/model/models.ts
@@ -1,3 +1,4 @@
+import type { StandardFonts } from "pdf-lib";
 import type { PreviewDocument } from "../utils/pdf-preview";
 
 // ============ Shared Types ============
@@ -9,6 +10,7 @@ export interface FocusableElement {
   onEnter?: () => void;
   canFocus?: () => boolean;
   onMouseDown?: () => void;
+  persistent?: boolean; // keeps element registered across clearElements calls
 }
 
 export interface Status {
@@ -133,6 +135,31 @@ export interface RotatePDFOutput {
   error?: string;
 }
 
+export type PageNumberPosition =
+  | "bottom-center"
+  | "bottom-left"
+  | "bottom-right"
+  | "top-center"
+  | "top-left"
+  | "top-right";
+
+export interface PageNumbersInput {
+  inputPath: string;
+  outputPath: string;
+  position: PageNumberPosition;
+  startNumber?: number;
+  font?: StandardFonts;
+  fontSize?: number;
+  pages?: number[] | "all";
+}
+
+export interface PageNumbersOutput {
+  success: boolean;
+  outputPath?: string;
+  numberedPages?: number;
+  error?: string;
+}
+
 export type SplitMode = "at" | "range" | "every";
 
 export type ExtractMode = "range" | "every";
diff --git a/src/provider/keyboardNavProvider.tsx b/src/provider/keyboardNavProvider.tsx
new file mode 100644
index 0000000..24f2453
--- /dev/null
+++ b/src/provider/keyboardNavProvider.tsx
@@ -0,0 +1,9 @@
+import { type ParentComponent } from "solid-js";
+import { KeyboardNavContext, createKeyboardNav } from "../hooks/useKeyboardNav";
+
+// Provides a single keyboard-nav instance so descendant panels (the active tool
+// and the PDF preview) share one focus ring instead of competing rings.
+export const KeyboardNavProvider: ParentComponent = (props) => {
+  const nav = createKeyboardNav();
+  return <KeyboardNavContext.Provider value={nav}>{props.children}</KeyboardNavContext.Provider>;
+};
diff --git a/src/tools/index.ts b/src/tools/index.ts
index f262ea2..5be6039 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -8,3 +8,4 @@ export * from "./pdf-to-images";
 export * from "./images-to-pdf";
 export * from "./protect";
 export * from "./organise";
+export * from "./page-numbers";
diff --git a/src/tools/page-numbers.ts b/src/tools/page-numbers.ts
new file mode 100644
index 0000000..fa501fc
--- /dev/null
+++ b/src/tools/page-numbers.ts
@@ -0,0 +1,71 @@
+import { StandardFonts, type PDFPage } from "pdf-lib";
+import type { PageNumberPosition, PageNumbersInput, PageNumbersOutput } from "../model/models";
+import { loadPdfDocumentWithPageCount, savePdfDocument } from "../utils/utils";
+
+const MARGIN = 15;
+
+/**
+ * Adds  to the pages of a PDF file
+ * @param input - Input PDF path, output path, position, and numbering options
+ * @returns Result with success status and number of pages numbered
+ */
+export async function addPageNumbers(input: PageNumbersInput): Promise<PageNumbersOutput> {
+  try {
+    const { pdfDoc, totalPages } = await loadPdfDocumentWithPageCount(input.inputPath);
+
+    let pagesToNumber: number[];
+
+    if (input.pages === "all" || !input.pages) {
+      pagesToNumber = Array.from({ length: totalPages }, (_, i) => i);
+    } else {
+      // Convert 1-based  to 0-based indices
+      pagesToNumber = input.pages
+        .filter((pageNum) => pageNum >= 1 && pageNum <= totalPages)
+        .map((pageNum) => pageNum - 1);
+    }
+
+    const font = await pdfDoc.embedFont(input.font ?? StandardFonts.Helvetica);
+    const fontSize = input.fontSize ?? 12;
+    const startNumber = input.startNumber ?? 1;
+
+    pagesToNumber.forEach((pageIndex, i) => {
+      const page = pdfDoc.getPage(pageIndex);
+      const pageNumber = String(startNumber + i);
+      const textWidth = font.widthOfTextAtSize(pageNumber, fontSize);
+      const { x, y } = getPageNumberCoords(page, input.position, fontSize, textWidth);
+      page.drawText(pageNumber, { x, y, font: font, size: fontSize });
+    });
+
+    // Save the numbered PDF
+    await savePdfDocument(pdfDoc, input.outputPath);
+
+    return {
+      success: true,
+      outputPath: input.outputPath,
+      numberedPages: pagesToNumber.length,
+    };
+  } catch (error) {
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : "Unknown error occurred",
+    };
+  }
+}
+
+function getPageNumberCoords(
+  page: PDFPage,
+  position: PageNumberPosition,
+  fontSize: number,
+  textWidth: number,
+): { x: number; y: number } {
+  const isTop = position.includes("top");
+  const { width, height } = page.getSize();
+
+  let x = MARGIN;
+  if (position.endsWith("center")) x += (width - textWidth) / 2;
+  if (position.endsWith("right")) x += width - textWidth - MARGIN * 2;
+
+  const y = isTop ? height - MARGIN - fontSize : MARGIN;
+
+  return { x, y };
+}