diff --git a/.changeset/healthy-worms-hear.md b/.changeset/healthy-worms-hear.md
new file mode 100644
index 0000000..6f08390
--- /dev/null
+++ b/.changeset/healthy-worms-hear.md
@@ -0,0 +1,20 @@
+---
+"paris": minor
+---
+
+### pageConfig API
+- Per-page configuration for title, bottomPanel, and additionalActions
+- Declarative approach eliminates conditional logic in parent components
+- Clean API for multi-step drawer flows
+
+### DrawerBottomPanelPortal Component
+- Portal system for child components to control bottom panel content
+- Eliminates need for prop drilling for components in separate files
+- Automatic page-active detection in paginated drawers
+- Supports replace, append, prepend modes
+
+### Context Providers
+- useDrawer() - Access drawer controls from any child component
+- usePaginationContext() - Access pagination state without prop drilling
+- useDrawerBottomPanel() - Imperative bottom panel control
+- useIsDrawerPageActive() - Internal page active tracking
\ No newline at end of file
diff --git a/.changeset/mighty-points-battle.md b/.changeset/mighty-points-battle.md
new file mode 100644
index 0000000..15f3512
--- /dev/null
+++ b/.changeset/mighty-points-battle.md
@@ -0,0 +1,5 @@
+---
+"paris": patch
+---
+
+fix(Card): Update Card and Cardbutton styles
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
diff --git a/package.json b/package.json
index bb3d974..227e050 100644
--- a/package.json
+++ b/package.json
@@ -141,4 +141,4 @@
         "type-fest": "^3.10.0",
         "typescript": "^5.2.2"
     }
-}
+}
\ No newline at end of file
diff --git a/src/stories/card/Card.module.scss b/src/stories/card/Card.module.scss
index 9fd750b..60ab5fa 100644
--- a/src/stories/card/Card.module.scss
+++ b/src/stories/card/Card.module.scss
@@ -29,7 +29,7 @@
 .flat {
     border-radius: var(--pte-new-borders-radius-roundedMedium);
     border: 1px solid var(--pte-new-colors-borderStrong);
-    background: linear-gradient(0deg, var(--pte-new-colors-overlayWhiteSubtle) 0%, var(--pte-new-colors-overlayWhiteSubtle) 100%), var(--pte-new-colors-surfacePrimary);
+    background: var(--pte-new-colors-overlayWhiteSubtle);
 
     &.pending {
         border: 1px dashed var(--pte-new-colors-borderStrong);
diff --git a/src/stories/cardbutton/CardButton.module.scss b/src/stories/cardbutton/CardButton.module.scss
index c09fc5d..4f7d4b4 100644
--- a/src/stories/cardbutton/CardButton.module.scss
+++ b/src/stories/cardbutton/CardButton.module.scss
@@ -66,7 +66,7 @@
 .flat {
     border-radius: var(--pte-new-borders-radius-roundedMedium);
     border: 1px solid var(--pte-new-colors-borderStrong);
-    background: linear-gradient(0deg, var(--pte-new-colors-overlayWhiteSubtle) 0%, var(--pte-new-colors-overlayWhiteSubtle) 100%), var(--pte-new-colors-surfacePrimary);
+    background: var(--pte-new-colors-overlayWhiteSubtle);
 
     &:hover {
         background-color: var(--pte-new-colors-overlayStrong);
diff --git a/src/stories/drawer/Drawer.stories.tsx b/src/stories/drawer/Drawer.stories.tsx
index 8c71401..024020e 100644
--- a/src/stories/drawer/Drawer.stories.tsx
+++ b/src/stories/drawer/Drawer.stories.tsx
@@ -3,13 +3,16 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
 import { Drawer } from './Drawer';
+import { DrawerBottomPanelPortal } from './DrawerBottomPanelPortal';
+import { useDrawer } from '.';
 import { Button } from '../button';
 import { Callout } from '../callout';
 import {
     Menu, MenuButton, MenuItems, MenuItem,
 } from '../menu';
-import { usePagination } from '../pagination';
+import { usePagination, usePaginationContext } from '../pagination';
 import { ChevronRight, Ellipsis } from '../icon';
+import { Input } from '../input';
 
 const meta: Meta<typeof Drawer> = {
     title: 'Surfaces/Drawer',
@@ -278,3 +281,257 @@ export const Full: Story = {
         );
     },
 };
+
+/**
+ * Example using pageConfig for declarative per-page configuration.
+ * Eliminates conditional logic in the parent component.
+ */
+export const WithPageConfig: Story = {
+    args: {},
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const pages = ['details', 'edit', 'confirm'] as const;
+        const pagination = usePagination<typeof pages>('details');
+
+        return (
+            <>
+                <Button onClick={() => setIsOpen(true)}>
+                    Open Multi-Step Form
+                </Button>
+                <Drawer
+                    isOpen={isOpen}
+                    onClose={() => setIsOpen(false)}
+                    title="Multi-Step Process"
+                    pagination={pagination}
+                    pageConfig={{
+                        details: {
+                            title: 'View Details',
+                            bottomPanel: (
+                                <Button onClick={() => pagination.open('edit')}>
+                                    Edit
+                                </Button>
+                            ),
+                        },
+                        edit: {
+                            title: 'Edit Information',
+                            bottomPanel: (
+                                <Button onClick={() => pagination.open('confirm')}>
+                                    Continue to Confirm
+                                </Button>
+                            ),
+                        },
+                        confirm: {
+                            title: 'Confirm Changes',
+                            bottomPanel: (
+                                <div style={{ display: 'flex', gap: '8px', width: '100%' }}>
+                                    <Button onClick={() => setIsOpen(false)}>
+                                        Confirm
+                                    </Button>
+                                    <Button kind="secondary" onClick={() => pagination.back()}>
+                                        Go Back
+                                    </Button>
+                                </div>
+                            ),
+                        },
+                    }}
+                >
+                    <div key="details">
+                        <h3>Account Details</h3>
+                        <p>Name: John Doe</p>
+                        <p>Email: john@example.com</p>
+                    </div>
+                    <div key="edit">
+                        <h3>Edit Account</h3>
+                        <Input label="Name" defaultValue="John Doe" />
+                        <Input label="Email" defaultValue="john@example.com" />
+                    </div>
+                    <div key="confirm">
+                        <h3>Confirm Your Changes</h3>
+                        <Callout>
+                            Please review your changes before confirming.
+                        </Callout>
+                        <p>Updated Name: John Doe</p>
+                        <p>Updated Email: john@example.com</p>
+                    </div>
+                </Drawer>
+            </>
+        );
+    },
+};
+
+/**
+ * Example using DrawerBottomPanelPortal to inject bottom panel content from a child component.
+ * Child component can control its own actions without prop drilling.
+ */
+export const WithBottomPanelPortal: Story = {
+    args: {},
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+
+        // Child component that uses the portal
+        const FormWithActions = () => {
+            const [value, setValue] = useState('');
+            const [isSubmitting, setIsSubmitting] = useState(false);
+            const { close } = useDrawer();
+
+            const handleSubmit = async () => {
+                setIsSubmitting(true);
+                // Simulate API call
+                await new Promise((resolve) => { setTimeout(resolve, 1000); });
+                setIsSubmitting(false);
+                close();
+            };
+
+            return (
+                <>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                        <Input
+                            label="Enter your message"
+                            value={value}
+                            onChange={(e) => setValue(e.target.value)}
+                            placeholder="Type something..."
+                        />
+                        <p>
+                            Your message:
+                            {' '}
+                            {value || '(empty)'}
+                        </p>
+                    </div>
+
+                    <DrawerBottomPanelPortal mode="replace">
+                        <div style={{ display: 'flex', gap: '8px', width: '100%' }}>
+                            <Button
+                                onClick={handleSubmit}
+                                loading={isSubmitting}
+                                disabled={!value}
+                            >
+                                Submit
+                            </Button>
+                            <Button kind="secondary" onClick={close}>
+                                Cancel
+                            </Button>
+                        </div>
+                    </DrawerBottomPanelPortal>
+                </>
+            );
+        };
+
+        return (
+            <>
+                <Button onClick={() => setIsOpen(true)}>
+                    Open Form with Portal
+                </Button>
+                <Drawer
+                    isOpen={isOpen}
+                    onClose={() => setIsOpen(false)}
+                    title="Form Example"
+                >
+                    <FormWithActions />
+                </Drawer>
+            </>
+        );
+    },
+};
+
+/**
+ * Example using usePaginationContext to access pagination from nested components.
+ * Eliminates prop drilling for navigation callbacks.
+ */
+export const WithPaginationContext: Story = {
+    args: {},
+    render: () => {
+        const [isOpen, setIsOpen] = useState(false);
+        const pages = ['step1', 'step2', 'step3'] as const;
+        const pagination = usePagination<typeof pages>('step1');
+
+        // Nested component that accesses pagination directly
+        const Step1Content = () => {
+            const paginationCtx = usePaginationContext<typeof pages>();
+
+            return (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                    <h3>Step 1: Personal Information</h3>
+                    <Input label="Name" placeholder="Enter your name" />
+
+                    <DrawerBottomPanelPortal>
+                        <Button onClick={() => paginationCtx?.open('step2')}>
+                            Next: Contact Info
+                        </Button>
+                    </DrawerBottomPanelPortal>
+                </div>
+            );
+        };
+
+        const Step2Content = () => {
+            const paginationCtx = usePaginationContext<typeof pages>();
+
+            return (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                    <h3>Step 2: Contact Information</h3>
+                    <Input label="Email" placeholder="Enter your email" />
+
+                    <DrawerBottomPanelPortal>
+                        <div style={{ display: 'flex', gap: '8px', width: '100%' }}>
+                            <Button onClick={() => paginationCtx?.open('step3')}>
+                                Next: Review
+                            </Button>
+                            <Button kind="secondary" onClick={() => paginationCtx?.back()}>
+                                Back
+                            </Button>
+                        </div>
+                    </DrawerBottomPanelPortal>
+                </div>
+            );
+        };
+
+        const Step3Content = () => {
+            const { close } = useDrawer();
+
+            return (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                    <h3>Step 3: Review & Submit</h3>
+                    <Callout>
+                        Please review your information before submitting.
+                    </Callout>
+
+                    <DrawerBottomPanelPortal>
+                        <div style={{ display: 'flex', gap: '8px', width: '100%' }}>
+                            <Button onClick={() => {
+                                pagination.reset();
+                                close();
+                            }}>
+                                Submit
+                            </Button>
+                            <Button kind="secondary" onClick={() => pagination.back()}>
+                                Back
+                            </Button>
+                        </div>
+                    </DrawerBottomPanelPortal>
+                </div>
+            );
+        };
+
+        return (
+            <>
+                <Button onClick={() => setIsOpen(true)}>
+                    Start Wizard
+                </Button>
+                <Drawer
+                    isOpen={isOpen}
+                    onClose={() => setIsOpen(false)}
+                    title="Registration Wizard"
+                    pagination={pagination}
+                    pageConfig={{
+                        step1: { title: 'Step 1 of 3' },
+                        step2: { title: 'Step 2 of 3' },
+                        step3: { title: 'Step 3 of 3' },
+                    }}
+                >
+                    <div key="step1"><Step1Content /></div>
+                    <div key="step2"><Step2Content /></div>
+                    <div key="step3"><Step3Content /></div>
+                </Drawer>
+            </>
+        );
+    },
+};
diff --git a/src/stories/drawer/Drawer.tsx b/src/stories/drawer/Drawer.tsx
index 561ce3b..806eba5 100644
--- a/src/stories/drawer/Drawer.tsx
+++ b/src/stories/drawer/Drawer.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode, ComponentPropsWithoutRef } from 'react';
 import {
-    useMemo, useState,
+    useMemo, useState, useCallback, useEffect,
 } from 'react';
 import {
     Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
@@ -16,13 +16,230 @@ import { TextWhenString } from '../utility/TextWhenString';
 import { Button } from '../button';
 import { RemoveFromDOM } from '../utility/RemoveFromDOM';
 import type { PaginationState } from '../pagination';
+import { PaginationProvider } from '../pagination/PaginationContext';
 import {
     ChevronLeft, ChevronRight, Close, Icon,
 } from '../icon';
 import { useResizeObserver } from '../../helpers/useResizeObserver';
+import { DrawerProvider } from './DrawerContext';
+import { DrawerBottomPanelProvider, useDrawerBottomPanel } from './DrawerBottomPanelContext';
+import { DrawerPageProvider } from './DrawerPageContext';
 
 export const DrawerSizePresets = ['content', 'default', 'full', 'fullWithMargin', 'fullOnMobile'] as const;
 
+/**
+ * Inner component that renders drawer content and accesses bottom panel context.
+ * Must be rendered within DrawerBottomPanelProvider.
+ * @internal
+ */
+type DrawerContentProps<T extends string[] | readonly string[] = string[]> = {
+    isPaginated: boolean;
+    pagination?: PaginationState<T>;
+    loadedPage: string | null;
+    setLoadedPage: (page: string | null) => void;
+    children: ReactNode;
+    currentPageConfig?: {
+        title?: ReactNode;
+        bottomPanel?: ReactNode;
+        additionalActions?: ReactNode;
+    };
+    bottomPanel?: ReactNode;
+    resolvedTitle: ReactNode;
+    resolvedAdditionalActions?: ReactNode;
+    hasResolvedAdditionalActions: boolean;
+    hideTitle: boolean;
+    hideCloseButton: boolean;
+    onClose: (open: false) => void;
+    overrides?: DrawerProps<T>['overrides'];
+};
+
+const DrawerContent = <T extends string[] | readonly string[] = string[]>({
+    isPaginated,
+    pagination,
+    loadedPage,
+    setLoadedPage,
+    children,
+    currentPageConfig,
+    bottomPanel,
+    resolvedTitle,
+    resolvedAdditionalActions,
+    hasResolvedAdditionalActions,
+    hideTitle,
+    hideCloseButton,
+    onClose,
+    overrides,
+}: DrawerContentProps<T>) => {
+    const { portalContent } = useDrawerBottomPanel();
+
+    // Resolve bottom panel content with priority:
+    // 1. Portal content (highest priority)
+    // 2. pageConfig bottom panel
+    // 3. bottomPanel prop (fallback)
+    const resolvedBottomPanel = useMemo(() => {
+        if (portalContent) {
+            // Portal content exists - handle based on mode
+            const baseContent = currentPageConfig?.bottomPanel ?? bottomPanel;
+
+            if (portalContent.mode === 'replace' || !baseContent) {
+                return portalContent.content;
+            }
+            if (portalContent.mode === 'prepend') {
+                return (
+                    <>
+                        {portalContent.content}
+                        {baseContent}
+                    </>
+                );
+            }
+            if (portalContent.mode === 'append') {
+                return (
+                    <>
+                        {baseContent}
+                        {portalContent.content}
+                    </>
+                );
+            }
+        }
+
+        // No portal content - use pageConfig or prop
+        return currentPageConfig?.bottomPanel ?? bottomPanel;
+    }, [portalContent, currentPageConfig, bottomPanel]);
+
+    return (
+        <>
+            {/* Dialog title bar */}
+            <div className={clsx(styles.titleBar, overrides?.titleBar?.className)}>
+                <div
+                    className={clsx(styles.titleArea, overrides?.titleArea?.className)}
+                >
+                    <RemoveFromDOM
+                        // Hide when pagination is not enabled.
+                        when={!isPaginated}
+                    >
+                        <div className={clsx(styles.paginationButtons)}>
+                            <Button
+                                className={clsx(
+                                    styles.navButton,
+                                )}
+                                size="medium"
+                                kind="tertiary"
+                                shape="circle"
+                                onClick={() => pagination?.back()}
+                                disabled={!pagination?.canGoBack()}
+                                startEnhancer={(
+                                    <Icon icon={ChevronLeft} size={16} />
+                                )}
+                            >
+                                Go to previous page in this modal
+                            </Button>
+                            <Button
+                                className={clsx(
+                                    styles.navButton,
+                                )}
+                                size="medium"
+                                kind="tertiary"
+                                shape="circle"
+                                onClick={() => pagination?.forward()}
+                                disabled={!pagination?.canGoForward()}
+                                startEnhancer={(
+                                    <Icon icon={ChevronRight} size={16} />
+                                )}
+                            >
+                                Go to next page in this modal
+                            </Button>
+                        </div>
+                    </RemoveFromDOM>
+                    <VisuallyHidden
+                        // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
+                        when={hideTitle}
+                    >
+                        <DialogTitle as="h2" className={styles.titleTextContainer}>
+                            <TextWhenString kind="paragraphSmall" weight="medium">
+                                {resolvedTitle}
+                            </TextWhenString>
+                        </DialogTitle>
+                    </VisuallyHidden>
+                </div>
+                <div className={clsx(styles.titleBarButtons, overrides?.titleBarButtons?.className)}>
+                    {/* Action Menu */}
+                    <RemoveFromDOM when={!hasResolvedAdditionalActions}>
+                        {resolvedAdditionalActions}
+                    </RemoveFromDOM>
+
+                    {/* Close button */}
+                    <RemoveFromDOM
+                        // Hide when requested, or when pagination is enabled (the page navigation bar will render its own close button).
+                        when={hideCloseButton}
+                    >
+                        <Button
+                            kind="tertiary"
+                            shape="circle"
+                            onClick={() => onClose(false)}
+                            startEnhancer={(
+                                <Icon icon={Close} size={20} />
+                            )}
+                            data-title-hidden={hideTitle}
+                            className={clsx(
+                                styles.closeButton,
+                            )}
+                        >
+                            Close dialog
+                        </Button>
+                    </RemoveFromDOM>
+                </div>
+            </div>
+
+            <div className={clsx(styles.content, overrides?.content?.className)}>
+                <div className={clsx(styles.contentChildren, overrides?.contentChildren?.className)}>
+                    {(isPaginated && Array.isArray(children)) ? children.map((child) => {
+                        if (!(child && typeof child === 'object' && 'key' in child)) {
+                            return null;
+                        }
+                        const isActive = child.key === pagination?.currentPage && loadedPage === child.key;
+                        return (
+                            <Transition
+                                show={isActive}
+                                key={`transition_${child.key}`}
+                                as="div"
+                                unmount={false}
+                                enter={styles.paginationEnter}
+                                enterFrom={styles.enterFromOpacity}
+                                enterTo={styles.enterToOpacity}
+                                leave={styles.paginationLeave}
+                                leaveFrom={styles.leaveFromOpacity}
+                                leaveTo={styles.leaveToOpacity}
+                                afterLeave={() => {
+                                    setLoadedPage(pagination?.currentPage || null);
+                                }}
+                                className={clsx(overrides?.contentChildrenChildren?.className)}
+                                style={{ display: isActive ? undefined : 'none' }}
+                            >
+                                <DrawerPageProvider isActive={isActive}>
+                                    {child}
+                                </DrawerPageProvider>
+                            </Transition>
+                        );
+                    }) : children}
+                </div>
+                {resolvedBottomPanel && (
+                    <>
+                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, overrides?.bottomPanelSpacer?.className)}>
+                            {resolvedBottomPanel}
+                        </div>
+                        <div className={clsx(styles.bottomPanel, overrides?.bottomPanel?.className)}>
+                            <div className={styles.glassOpacity} />
+                            <div className={styles.glassBlend} />
+                            <div className={clsx(styles.bottomPanelContent, overrides?.bottomPanelContent?.className)}>
+                                {resolvedBottomPanel}
+                            </div>
+                        </div>
+                    </>
+                )}
+            </div>
+        </>
+    );
+};
+
 export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
     /**
      * The dialog's open state.
@@ -103,6 +320,38 @@ export type DrawerProps<T extends string[] | readonly string[] = string[]> = {
      * @default false
      */
     pagination?: PaginationState<T>;
+    /**
+     * Per-page configuration for title, bottomPanel, and additionalActions.
+     * Only available when pagination is provided.
+     *
+     * Keys must match the pages in pagination state.
+     * Falls back to root-level props if not specified.
+     *
+     * @example
+     * ```tsx
+     * <Drawer
+     *   pagination={pagination}
+     *   pageConfig={{
+     *     step1: {
+     *       title: 'Payment Details',
+     *       bottomPanel: <Button>Next</Button>,
+     *     },
+     *     step2: {
+     *       title: 'Review',
+     *       bottomPanel: <Button>Submit</Button>,
+     *     },
+     *   }}
+     * >
+     *   <div key="step1">...</div>
+     *   <div key="step2">...</div>
+     * </Drawer>
+     * ```
+     */
+    pageConfig?: Partial<Record<T[number], {
+        title?: ReactNode;
+        bottomPanel?: ReactNode;
+        additionalActions?: ReactNode;
+    }>>;
     /**
      * The overlay style of the Drawer, either 'grey' or 'blur'.
      *
@@ -152,6 +401,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     from = 'right',
     size = 'default',
     pagination,
+    pageConfig,
     overlayStyle = 'grey',
     additionalActions,
     children,
@@ -170,6 +420,44 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
 
     const [loadedPage, setLoadedPage] = useState<string | null>(pagination?.history[0] || null);
 
+    // Update loadedPage when pagination changes
+    useEffect(() => {
+        if (pagination?.currentPage) {
+            setLoadedPage(pagination.currentPage);
+        }
+    }, [pagination?.currentPage]);
+
+    // Get current page configuration
+    const currentPageConfig = useMemo(() => {
+        if (pagination && pageConfig) {
+            return pageConfig[pagination.currentPage];
+        }
+        return undefined;
+    }, [pagination, pageConfig]);
+
+    // Resolve title based on pageConfig or fallback to prop
+    const resolvedTitle = useMemo(
+        () => currentPageConfig?.title ?? title,
+        [currentPageConfig, title],
+    );
+
+    // Resolve additionalActions based on pageConfig or fallback to prop
+    const resolvedAdditionalActions = useMemo(
+        () => currentPageConfig?.additionalActions ?? additionalActions,
+        [currentPageConfig, additionalActions],
+    );
+
+    const hasResolvedAdditionalActions = useMemo(
+        () => Boolean(resolvedAdditionalActions),
+        [resolvedAdditionalActions],
+    );
+
+    // Create drawer context value
+    const drawerContextValue = useMemo(() => ({
+        isOpen,
+        close: () => onClose(false),
+    }), [isOpen, onClose]);
+
     // const bottomPanelRef = useRef<HTMLDivElement>(null);
     // const { width = 0, height = 0 } = useResizeObserver({
     //     ref: bottomPanelRef,
@@ -180,30 +468,35 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
     //     console.log(bottomPanelRef.current);
     // }, [bottomPanelRef.current]);
 
-    // Decide what children to render.
-    const currentChild: ReactNode = useMemo(() => {
-        // If no children are provided, render nothing.
-        if (!children) {
-            return (<></>);
-        }
+    // Wrap content with providers
+    const wrappedContent = (content: ReactNode) => {
+        let wrapped = content;
 
-        // If pagination is enabled, and multiple children are provided, render the currently active child by matching its key against `pagination.currentPage`.
-        if (pagination && Array.isArray(children) && children.length > 0) {
-            const found = children.find((child) => {
-                if (!(child && typeof child === 'object' && 'key' in child)) {
-                    console.warn('Drawer: Pagination is enabled, but the following child is missing a `key` prop. Pagination will likely not work as expected and this child will never be rendered.', child);
-                    return false;
-                }
-                return child.key === pagination.currentPage;
-            });
-            if (found) {
-                return found;
-            }
+        // Wrap with bottom panel provider (always, even without pagination)
+        wrapped = (
+            <DrawerBottomPanelProvider>
+                {wrapped}
+            </DrawerBottomPanelProvider>
+        );
+
+        // Wrap with pagination provider if pagination is enabled
+        if (pagination) {
+            wrapped = (
+                <PaginationProvider value={pagination}>
+                    {wrapped}
+                </PaginationProvider>
+            );
         }
 
-        // As a fallback, render all children.
-        return children;
-    }, [children, pagination]);
+        // Wrap with drawer provider (always)
+        wrapped = (
+            <DrawerProvider value={drawerContextValue}>
+                {wrapped}
+            </DrawerProvider>
+        );
+
+        return wrapped;
+    };
 
     return (
         <Transition show={isOpen}>
@@ -270,125 +563,25 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                 overrides?.panel?.className,
                             )}
                         >
-                            {/* Dialog title bar */}
-                            <div className={clsx(styles.titleBar, overrides?.titleBar?.className)}>
-                                <div
-                                    className={clsx(styles.titleArea, overrides?.titleArea?.className)}
+                            {wrappedContent(
+                                <DrawerContent
+                                    isPaginated={isPaginated}
+                                    pagination={pagination}
+                                    loadedPage={loadedPage}
+                                    setLoadedPage={setLoadedPage}
+                                    currentPageConfig={currentPageConfig}
+                                    bottomPanel={bottomPanel}
+                                    resolvedTitle={resolvedTitle}
+                                    resolvedAdditionalActions={resolvedAdditionalActions}
+                                    hasResolvedAdditionalActions={hasResolvedAdditionalActions}
+                                    hideTitle={hideTitle}
+                                    hideCloseButton={hideCloseButton}
+                                    onClose={onClose}
+                                    overrides={overrides}
                                 >
-                                    <RemoveFromDOM
-                                        // Hide when pagination is not enabled.
-                                        when={!isPaginated}
-                                    >
-                                        <div className={clsx(styles.paginationButtons)}>
-                                            <Button
-                                                className={clsx(
-                                                    styles.navButton,
-                                                )}
-                                                size="medium"
-                                                kind="tertiary"
-                                                shape="circle"
-                                                onClick={() => pagination?.back()}
-                                                disabled={!pagination?.canGoBack()}
-                                                startEnhancer={(
-                                                    <Icon icon={ChevronLeft} size={16} />
-                                                )}
-                                            >
-                                                Go to previous page in this modal
-                                            </Button>
-                                            <Button
-                                                className={clsx(
-                                                    styles.navButton,
-                                                )}
-                                                size="medium"
-                                                kind="tertiary"
-                                                shape="circle"
-                                                onClick={() => pagination?.forward()}
-                                                disabled={!pagination?.canGoForward()}
-                                                startEnhancer={(
-                                                    <Icon icon={ChevronRight} size={16} />
-                                                )}
-                                            >
-                                                Go to next page in this modal
-                                            </Button>
-                                        </div>
-                                    </RemoveFromDOM>
-                                    <VisuallyHidden
-                                        // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
-                                        when={hideTitle}
-                                    >
-                                        <DialogTitle as="h2" className={styles.titleTextContainer}>
-                                            <TextWhenString kind="paragraphSmall" weight="medium">
-                                                {title}
-                                            </TextWhenString>
-                                        </DialogTitle>
-                                    </VisuallyHidden>
-                                </div>
-                                <div className={clsx(styles.titleBarButtons, overrides?.titleBarButtons?.className)}>
-                                    {/* Action Menu */}
-                                    <RemoveFromDOM when={!hasAdditionalActions}>
-                                        {additionalActions}
-                                    </RemoveFromDOM>
-
-                                    {/* Close button */}
-                                    <RemoveFromDOM
-                                        // Hide when requested, or when pagination is enabled (the page navigation bar will render its own close button).
-                                        when={hideCloseButton}
-                                    >
-                                        <Button
-                                            kind="tertiary"
-                                            shape="circle"
-                                            onClick={() => onClose(false)}
-                                            startEnhancer={(
-                                                <Icon icon={Close} size={20} />
-                                            )}
-                                            data-title-hidden={hideTitle}
-                                            className={clsx(
-                                                styles.closeButton,
-                                            )}
-                                        >
-                                            Close dialog
-                                        </Button>
-                                    </RemoveFromDOM>
-                                </div>
-                            </div>
-
-                            <div className={clsx(styles.content, overrides?.content?.className)}>
-                                <div className={clsx(styles.contentChildren, overrides?.contentChildren?.className)}>
-                                    {(isPaginated && Array.isArray(children)) ? children.map((child) => (child && typeof child === 'object' && 'key' in child) && (
-                                        <Transition
-                                            show={child.key === pagination?.currentPage && loadedPage === child.key}
-                                            key={`transition_${child.key}`}
-                                            as="div"
-                                            enter={styles.paginationEnter}
-                                            enterFrom={styles.enterFromOpacity}
-                                            enterTo={styles.enterToOpacity}
-                                            leave={styles.paginationLeave}
-                                            leaveFrom={styles.leaveFromOpacity}
-                                            leaveTo={styles.leaveToOpacity}
-                                            afterLeave={() => {
-                                                setLoadedPage(pagination?.currentPage || null);
-                                            }}
-                                            className={clsx(overrides?.contentChildrenChildren?.className)}
-                                        >
-                                            {child}
-                                        </Transition>
-                                    )) : children}
-                                </div>
-                                {bottomPanel && (
-                                    <>
-                                        <div tabIndex={-1} aria-hidden="true" className={clsx(styles.bottomPanelSpacer, overrides?.bottomPanelSpacer?.className)}>
-                                            {bottomPanel}
-                                        </div>
-                                        <div className={clsx(styles.bottomPanel, overrides?.bottomPanel?.className)}>
-                                            <div className={styles.glassOpacity} />
-                                            <div className={styles.glassBlend} />
-                                            <div className={clsx(styles.bottomPanelContent, overrides?.bottomPanelContent?.className)}>
-                                                {bottomPanel}
-                                            </div>
-                                        </div>
-                                    </>
-                                )}
-                            </div>
+                                    {children}
+                                </DrawerContent>,
+                            )}
                         </DialogPanel>
                     </TransitionChild>
                 </div>
diff --git a/src/stories/drawer/DrawerBottomPanelContext.tsx b/src/stories/drawer/DrawerBottomPanelContext.tsx
new file mode 100644
index 0000000..cf7ffcd
--- /dev/null
+++ b/src/stories/drawer/DrawerBottomPanelContext.tsx
@@ -0,0 +1,146 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import {
+    createContext, useContext, useState, useCallback, useMemo,
+} from 'react';
+
+/**
+ * Mode for how portal content should interact with existing bottom panel content.
+ */
+export type BottomPanelMode = 'replace' | 'append' | 'prepend';
+
+/**
+ * Portal content with its rendering mode.
+ */
+export interface PortalContent {
+    content: ReactNode;
+    mode: BottomPanelMode;
+}
+
+/**
+ * Context value for bottom panel controls.
+ */
+export interface DrawerBottomPanelContextValue {
+    /**
+     * Current portal content, if any.
+     */
+    portalContent: PortalContent | null;
+    /**
+     * Set portal content with specified mode.
+     */
+    setPortalContent: (content: ReactNode | null, mode?: BottomPanelMode) => void;
+}
+
+/**
+ * Context for drawer bottom panel portal system.
+ */
+const DrawerBottomPanelContext = createContext<DrawerBottomPanelContextValue | null>(null);
+
+export type DrawerBottomPanelProviderProps = {
+    children: ReactNode;
+};
+
+/**
+ * Provider for drawer bottom panel portal system. Used internally by the Drawer component.
+ *
+ * @internal
+ */
+export const DrawerBottomPanelProvider = ({ children }: DrawerBottomPanelProviderProps) => {
+    const [portalContent, setPortalContentState] = useState<PortalContent | null>(null);
+
+    const setPortalContent = useCallback((content: ReactNode | null, mode: BottomPanelMode = 'replace') => {
+        if (content === null) {
+            setPortalContentState(null);
+        } else {
+            setPortalContentState({ content, mode });
+        }
+    }, []);
+
+    const value: DrawerBottomPanelContextValue = useMemo(() => ({
+        portalContent,
+        setPortalContent,
+    }), [portalContent, setPortalContent]);
+
+    return (
+        <DrawerBottomPanelContext.Provider value={value}>
+            {children}
+        </DrawerBottomPanelContext.Provider>
+    );
+};
+
+/**
+ * Access drawer bottom panel controls from any child component within a Drawer.
+ * Throws error if used outside a Drawer.
+ *
+ * This hook provides imperative control over the drawer's bottom panel content,
+ * useful for conditional logic or callback-based rendering.
+ *
+ * @example
+ * ```tsx
+ * const DynamicForm = () => {
+ *   const { setPortalContent, clearPortalContent } = useDrawerBottomPanel();
+ *   const [advanced, setAdvanced] = useState(false);
+ *
+ *   useEffect(() => {
+ *     if (advanced) {
+ *       setPortalContent(<AdvancedActions />);
+ *     } else {
+ *       setPortalContent(<BasicActions />);
+ *     }
+ *     return () => clearPortalContent();
+ *   }, [advanced]);
+ *
+ *   return <form>...</form>;
+ * };
+ * ```
+ *
+ * @throws Error if used outside a Drawer component
+ * @returns Controls for the bottom panel portal
+ */
+export const useDrawerBottomPanel = () => {
+    const context = useContext(DrawerBottomPanelContext);
+
+    if (!context) {
+        throw new Error('useDrawerBottomPanel must be used within a Drawer component');
+    }
+
+    const clearPortalContent = useCallback(() => {
+        context.setPortalContent(null);
+    }, [context]);
+
+    return {
+        /**
+         * Current portal content, if any.
+         * @internal
+         */
+        portalContent: context.portalContent,
+        /**
+         * Set the bottom panel content, replacing any existing content.
+         */
+        setBottomPanel: useCallback((content: ReactNode) => {
+            context.setPortalContent(content, 'replace');
+        }, [context]),
+        /**
+         * Add content after existing bottom panel content.
+         */
+        appendBottomPanel: useCallback((content: ReactNode) => {
+            context.setPortalContent(content, 'append');
+        }, [context]),
+        /**
+         * Add content before existing bottom panel content.
+         */
+        prependBottomPanel: useCallback((content: ReactNode) => {
+            context.setPortalContent(content, 'prepend');
+        }, [context]),
+        /**
+         * Clear all portal-injected content.
+         */
+        clearBottomPanel: clearPortalContent,
+        /**
+         * Set portal content with specified mode (internal use).
+         * @internal
+         */
+        setPortalContent: context.setPortalContent,
+    };
+};
diff --git a/src/stories/drawer/DrawerBottomPanelPortal.tsx b/src/stories/drawer/DrawerBottomPanelPortal.tsx
new file mode 100644
index 0000000..3d422a6
--- /dev/null
+++ b/src/stories/drawer/DrawerBottomPanelPortal.tsx
@@ -0,0 +1,104 @@
+'use client';
+
+import type { FC, ReactNode } from 'react';
+import { useEffect } from 'react';
+import type { BottomPanelMode } from './DrawerBottomPanelContext';
+import { useDrawerBottomPanel } from './DrawerBottomPanelContext';
+import { useIsDrawerPageActive } from './DrawerPageContext';
+
+export type DrawerBottomPanelPortalProps = {
+    /**
+     * The content to render in the drawer's bottom panel.
+     */
+    children: ReactNode;
+    /**
+     * How to combine with existing bottom panel content:
+     * - 'replace': Replace entire bottom panel (default)
+     * - 'append': Add after existing content
+     * - 'prepend': Add before existing content
+     *
+     * @default 'replace'
+     */
+    mode?: BottomPanelMode;
+    /**
+     * Only activate portal when this condition is true.
+     * Useful for pagination where multiple portals exist but only one should be active.
+     *
+     * @default true
+     */
+    when?: boolean;
+};
+
+/**
+ * Portal component to render content into the drawer's bottom panel.
+ * Can be used anywhere within a Drawer's children tree.
+ *
+ * This provides a clean way for child components to inject content
+ * into the drawer's bottom panel without prop drilling, which is especially
+ * useful when page components are defined in separate files.
+ *
+ * **Pagination Support:**
+ * When used with paginated drawers, the portal automatically detects which
+ * page is active and only renders content from the currently visible page.
+ * All pages remain mounted (for animation purposes), but only the active
+ * page's portal content is displayed.
+ *
+ * @example
+ * // Separate component file
+ * const SaveForm = () => {
+ *   const handleSubmit = async () => { ... };
+ *   const [isSubmitting, setIsSubmitting] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <div className="form-fields">
+ *         <Input label="Name" />
+ *         <Input label="Email" />
+ *       </div>
+ *
+ *       <DrawerBottomPanelPortal>
+ *         <Button onClick={handleSubmit} loading={isSubmitting}>
+ *           Save Changes
+ *         </Button>
+ *       </DrawerBottomPanelPortal>
+ *     </>
+ *   );
+ * };
+ *
+ * // In parent component
+ * <Drawer pagination={pagination}>
+ *   <div key="edit"><SaveForm /></div>
+ *   <div key="review"><ReviewForm /></div>
+ * </Drawer>
+ *
+ * @throws Error if used outside a Drawer component
+ */
+export const DrawerBottomPanelPortal: FC<DrawerBottomPanelPortalProps> = ({
+    children,
+    mode = 'replace',
+    when,
+}) => {
+    const { setPortalContent } = useDrawerBottomPanel();
+    const isPageActive = useIsDrawerPageActive();
+
+    // Use explicit when prop if provided, otherwise use page active state
+    const isActive = when !== undefined ? when : isPageActive;
+
+    useEffect(() => {
+        if (!isActive) {
+            // Don't set content when inactive
+            return undefined;
+        }
+
+        // Set content when active
+        setPortalContent(children, mode);
+
+        // Clear when this effect re-runs or component unmounts
+        return () => {
+            setPortalContent(null);
+        };
+    }, [children, mode, isActive, setPortalContent]);
+
+    // Renders nothing in place - content is portaled to bottom panel
+    return null;
+};
diff --git a/src/stories/drawer/DrawerContext.tsx b/src/stories/drawer/DrawerContext.tsx
new file mode 100644
index 0000000..fe5ded2
--- /dev/null
+++ b/src/stories/drawer/DrawerContext.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+
+/**
+ * Context value provided by DrawerProvider.
+ */
+export interface DrawerContextValue {
+    /**
+     * Whether the drawer is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Close the drawer. Calls the onClose callback passed to the Drawer component.
+     */
+    close: () => void;
+}
+
+/**
+ * Context for drawer state, allowing child components to access drawer controls
+ * without prop drilling.
+ */
+const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+export type DrawerProviderProps = {
+    /**
+     * The drawer context value.
+     */
+    value: DrawerContextValue;
+    /**
+     * Child components that can access drawer controls via {@link useDrawer}.
+     */
+    children: ReactNode;
+};
+
+/**
+ * Provider for drawer context. Used internally by the Drawer component.
+ *
+ * @internal
+ */
+export const DrawerProvider = ({ value, children }: DrawerProviderProps) => (
+    <DrawerContext.Provider value={value}>
+        {children}
+    </DrawerContext.Provider>
+);
+
+/**
+ * Access drawer state from any child component within a Drawer.
+ * Throws error if used outside a Drawer.
+ *
+ * This hook allows child components to close the drawer or check its open state
+ * without requiring callbacks to be passed through props.
+ *
+ * @example
+ * ```tsx
+ * const SuccessMessage = () => {
+ *   const { close, isOpen } = useDrawer();
+ *
+ *   const handleDone = () => {
+ *     // Perform actions
+ *     close();
+ *   };
+ *
+ *   return <Button onClick={handleDone}>Done</Button>;
+ * };
+ * ```
+ *
+ * @throws Error if used outside a Drawer component
+ * @returns The drawer context value
+ */
+export const useDrawer = (): DrawerContextValue => {
+    const context = useContext(DrawerContext);
+
+    if (!context) {
+        throw new Error('useDrawer must be used within a Drawer component');
+    }
+
+    return context;
+};
diff --git a/src/stories/drawer/DrawerPageContext.tsx b/src/stories/drawer/DrawerPageContext.tsx
new file mode 100644
index 0000000..f246843
--- /dev/null
+++ b/src/stories/drawer/DrawerPageContext.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+
+/**
+ * Context to track if the current drawer page is active.
+ * Used internally for pagination to control portal behavior.
+ * @internal
+ */
+const DrawerPageContext = createContext<boolean>(true);
+
+export type DrawerPageProviderProps = {
+    /**
+     * Whether this page is currently active/visible.
+     */
+    isActive: boolean;
+    /**
+     * Child components.
+     */
+    children: ReactNode;
+};
+
+/**
+ * Provider to indicate if a drawer page is currently active.
+ * Used internally by Drawer for paginated content.
+ * @internal
+ */
+export const DrawerPageProvider = ({ isActive, children }: DrawerPageProviderProps) => (
+    <DrawerPageContext.Provider value={isActive}>
+        {children}
+    </DrawerPageContext.Provider>
+);
+
+/**
+ * Hook to check if the current drawer page is active.
+ * Returns true if not within a paginated drawer.
+ * @internal
+ */
+export const useIsDrawerPageActive = (): boolean => useContext(DrawerPageContext);
diff --git a/src/stories/drawer/index.ts b/src/stories/drawer/index.ts
index 0529d64..a0fc35b 100644
--- a/src/stories/drawer/index.ts
+++ b/src/stories/drawer/index.ts
@@ -1 +1,5 @@
 export * from './Drawer';
+export * from './DrawerContext';
+export * from './DrawerBottomPanelContext';
+export * from './DrawerBottomPanelPortal';
+export * from './DrawerPageContext';
diff --git a/src/stories/pagination/PaginationContext.tsx b/src/stories/pagination/PaginationContext.tsx
new file mode 100644
index 0000000..b99eb96
--- /dev/null
+++ b/src/stories/pagination/PaginationContext.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createContext, useContext } from 'react';
+import type { PaginationState } from './usePagination';
+
+/**
+ * Context for pagination state, allowing child components to access pagination
+ * controls without prop drilling.
+ */
+const PaginationContext = createContext<PaginationState<any> | null>(null);
+
+export type PaginationProviderProps<T extends string[] | readonly string[] = string[]> = {
+    /**
+     * The pagination state from {@link usePagination}.
+     */
+    value: PaginationState<T>;
+    /**
+     * Child components that can access pagination via {@link usePaginationContext}.
+     */
+    children: ReactNode;
+};
+
+/**
+ * Provider for pagination context. Automatically used by Drawer when pagination prop is passed.
+ * Can also be used standalone for custom pagination implementations.
+ *
+ * @example
+ * ```tsx
+ * const pagination = usePagination(['step1', 'step2', 'step3'] as const, 'step1');
+ *
+ * <PaginationProvider value={pagination}>
+ *   <YourComponent />
+ * </PaginationProvider>
+ * ```
+ */
+export const PaginationProvider = <T extends string[] | readonly string[] = string[]>({
+    value,
+    children,
+}: PaginationProviderProps<T>) => (
+    <PaginationContext.Provider value={value}>
+        {children}
+    </PaginationContext.Provider>
+);
+
+/**
+ * Access pagination state from any child component within a PaginationProvider.
+ * Returns null if not within a pagination context.
+ *
+ * This hook allows child components to navigate between pages without requiring
+ * pagination callbacks to be passed through props.
+ *
+ * @example
+ * ```tsx
+ * const SaveForm = () => {
+ *   const pagination = usePaginationContext<['form', 'review', 'complete']>();
+ *
+ *   const handleSave = async () => {
+ *     await save();
+ *     pagination?.open('review');
+ *   };
+ *
+ *   return <Button onClick={handleSave}>Save and Continue</Button>;
+ * };
+ * ```
+ *
+ * @returns The pagination state, or null if not within a PaginationProvider
+ */
+export const usePaginationContext = <T extends string[] | readonly string[] = string[]>(): PaginationState<T> | null => useContext(PaginationContext) as PaginationState<T> | null;
diff --git a/src/stories/pagination/index.ts b/src/stories/pagination/index.ts
index 612e4d2..8649549 100644
--- a/src/stories/pagination/index.ts
+++ b/src/stories/pagination/index.ts
@@ -1 +1,2 @@
 export * from './usePagination';
+export * from './PaginationContext';