diff --git a/plugins/cookbook-index/index.js b/plugins/cookbook-index/index.js
index 693a718a1b..5abac27bc9 100644
--- a/plugins/cookbook-index/index.js
+++ b/plugins/cookbook-index/index.js
@@ -67,6 +67,19 @@ console.log('[cookbook-index] init with docsDir:', options.docsDir);
       }
 
       const item = { id, title, description, tags, permalink, source };
+
+      if (typeof data.last_updated !== 'undefined') {
+        item.last_updated = data.last_updated;
+      }
+      if (typeof data.last_updated_at !== 'undefined') {
+        item.last_updated_at = data.last_updated_at;
+      }
+      if (typeof data.last_updated_label === 'string') {
+        item.last_updated_label = data.last_updated_label;
+      }
+      if (typeof data.formatted_last_updated === 'string') {
+        item.formatted_last_updated = data.formatted_last_updated;
+      }
       if (typeof priority === 'number') {
         item.priority = priority;
       }
diff --git a/src/components/CookbookDocItem.module.css b/src/components/CookbookDocItem.module.css
index 0320e7480f..63319e0a18 100644
--- a/src/components/CookbookDocItem.module.css
+++ b/src/components/CookbookDocItem.module.css
@@ -6,20 +6,13 @@
 }
 
 .wrapper {
-  display: grid;
-  gap: 2rem;
-  width: min(100%, 1080px);
-  grid-template-columns: minmax(0, min(90vw, 720px));
-  justify-content: center;
-}
-
-.wrapper[data-has-toc='true'] {
-  grid-template-columns: minmax(0, min(90vw, 720px)) 260px;
+  width: min(100%, 1600px);
+  position: relative;
 }
 
 .article {
   width: 100%;
-  max-width: min(90vw, 720px);
+  max-width: min(92vw, 936px);
   margin: 0 auto;
 }
 
@@ -33,10 +26,14 @@
 
 .lastUpdated {
   margin: 0 0 var(--ifm-spacing-sm, 0.75rem);
-  color: #465A78;
+  color: var(--ifm-color-emphasis-800);
   font-size: 0.95rem;
 }
 
+:global(html[data-theme='dark']) .article .lastUpdated {
+  color: #ffffff;
+}
+
 .actionsRow {
   display: flex;
   align-items: center;
@@ -95,18 +92,60 @@
   margin-bottom: var(--ifm-spacing-lg, 1.5rem);
 }
 
+.recipePagination {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: var(--ifm-spacing-xl, 2rem);
+  padding-top: var(--ifm-spacing-lg, 1.5rem);
+  border-top: 1px solid color-mix(in srgb, var(--ifm-color-emphasis-400) 45%, transparent);
+}
+
+.recipeNavLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--ifm-color-emphasis-800);
+  text-decoration: none;
+  padding: 0.5rem 0.25rem;
+}
+
+.recipeNavLink:hover,
+.recipeNavLink:focus-visible {
+  text-decoration: none;
+  color: var(--ifm-color-emphasis-900);
+}
+
+.recipeNavLinkNext {
+  justify-self: end;
+  text-align: right;
+}
+
+.recipeNavLabel {
+  display: block;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--ifm-color-emphasis-600);
+}
+
+.recipeNavTitle {
+  display: block;
+  font-weight: 600;
+  line-height: 1.25;
+}
+
 .toc {
-  position: sticky;
+  position: fixed;
+  right: clamp(1.25rem, 3vw, 3.5rem);
   top: calc(var(--ifm-navbar-height, 60px) + 24px);
+  width: 260px;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 48px);
   overflow: auto;
 }
 
-@media (max-width: 1200px) {
-  .wrapper[data-has-toc='true'] {
-    grid-template-columns: minmax(0, min(90vw, 720px));
-  }
-
+@media (max-width: 1400px) {
   .toc {
     display: none;
   }
@@ -126,4 +165,13 @@
     width: 100%;
     text-align: center;
   }
+
+  .recipePagination {
+    grid-template-columns: 1fr;
+  }
+
+  .recipeNavLinkNext {
+    justify-self: stretch;
+    text-align: left;
+  }
 }
diff --git a/src/components/CookbookDocItem.tsx b/src/components/CookbookDocItem.tsx
index fa48065fc2..d3a082597d 100644
--- a/src/components/CookbookDocItem.tsx
+++ b/src/components/CookbookDocItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Head from '@docusaurus/Head';
-import { DocProvider, useDoc } from '@docusaurus/plugin-content-docs/client';
+import { DocProvider, useAllDocsData, useDoc } from '@docusaurus/plugin-content-docs/client';
 import DocItemMetadata from '@theme/DocItem/Metadata';
 import type { Props as DocItemProps } from '@theme/DocItem';
 import { HtmlClassNameProvider } from '@docusaurus/theme-common';
@@ -18,9 +18,135 @@ type CookbookDocItemProps = DocItemProps & { tags?: string[] };
 
 type CookbookIndexItem = {
   id: string;
+  title?: string;
+  description?: string;
+  tags?: string[];
+  permalink?: string;
   source?: string;
+  priority?: number;
+  last_updated?: unknown;
+  last_updated_at?: unknown;
+  last_updated_label?: string;
+  formatted_last_updated?: string;
 };
 
+type DocMeta = {
+  id: string;
+  unversionedId?: string;
+  title?: string;
+  permalink?: string;
+  frontMatter?: {
+    title?: string;
+    last_updated?: unknown;
+    last_updated_at?: unknown;
+  };
+  lastUpdatedAt?: number | string | null;
+};
+
+function normalizeCookbookId(id: string | undefined): string {
+  return (id ?? '').replace(/^cookbook:/, '').trim();
+}
+
+function normalizeTimestamp(value: unknown): number | undefined {
+  const normalizeNumber = (input: number): number | undefined => {
+    if (!Number.isFinite(input)) {
+      return undefined;
+    }
+    return input < 1e11 ? input * 1000 : input;
+  };
+
+  if (typeof value === 'number') {
+    return normalizeNumber(value);
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return undefined;
+    }
+    const numeric = Number(trimmed);
+    if (!Number.isNaN(numeric)) {
+      return normalizeNumber(numeric);
+    }
+    const parsed = Date.parse(trimmed);
+    return Number.isNaN(parsed) ? undefined : normalizeNumber(parsed);
+  }
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return Number.isNaN(time) ? undefined : normalizeNumber(time);
+  }
+  return undefined;
+}
+
+function formatTimestamp(value: number): string | undefined {
+  if (!Number.isFinite(value)) {
+    return undefined;
+  }
+  try {
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+    return formatter.format(new Date(value));
+  } catch {
+    return new Date(value).toLocaleDateString();
+  }
+}
+
+function resolveDocMeta(item: CookbookIndexItem, docsById: Map<string, DocMeta>) {
+  return (
+    docsById.get(item.id) ??
+    docsById.get(`cookbook:${item.id}`) ??
+    docsById.get(item.id.replace(/^cookbook:/, '')) ??
+    null
+  );
+}
+
+function getCookbookItemTimestamp(item: CookbookIndexItem, docsById: Map<string, DocMeta>): number {
+  const meta = resolveDocMeta(item, docsById);
+  const candidates = [
+    meta?.frontMatter?.last_updated,
+    meta?.frontMatter?.last_updated_at,
+    meta?.lastUpdatedAt,
+    item.last_updated,
+    item.last_updated_at,
+  ];
+
+  for (const candidate of candidates) {
+    const normalized = normalizeTimestamp(candidate);
+    if (typeof normalized === 'number') {
+      return normalized;
+    }
+  }
+
+  return 0;
+}
+
+function sortCookbookItems(items: CookbookIndexItem[], docsById: Map<string, DocMeta>): CookbookIndexItem[] {
+  return [...items].sort((a, b) => {
+    const priorityA = typeof a.priority === 'number' && Number.isFinite(a.priority) ? a.priority : null;
+    const priorityB = typeof b.priority === 'number' && Number.isFinite(b.priority) ? b.priority : null;
+
+    if (priorityA !== null && priorityB !== null) {
+      if (priorityA !== priorityB) {
+        return priorityB - priorityA;
+      }
+    } else if (priorityA !== null) {
+      return -1;
+    } else if (priorityB !== null) {
+      return 1;
+    }
+
+    const updatedA = getCookbookItemTimestamp(a, docsById);
+    const updatedB = getCookbookItemTimestamp(b, docsById);
+
+    if (updatedA === updatedB) {
+      return 0;
+    }
+    return updatedB - updatedA;
+  });
+}
+
 function BackArrowIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 16 16" role="img" aria-hidden="true" {...props}>
@@ -29,6 +155,14 @@ function BackArrowIcon(props: React.SVGProps<SVGSVGElement>) {
   );
 }
 
+function ForwardArrowIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 16 16" role="img" aria-hidden="true" {...props}>
+      <path d="M9.72 3.22a.75.75 0 0 0 0 1.06l2.22 2.22H3a.75.75 0 0 0 0 1.5h8.94l-2.22 2.22a.75.75 0 1 0 1.06 1.06l3.5-3.5a.75.75 0 0 0 0-1.06l-3.5-3.5a.75.75 0 0 0-1.06 0Z" />
+    </svg>
+  );
+}
+
 function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 24 24" role="img" aria-hidden="true" {...props}>
@@ -65,10 +199,42 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
     lastUpdatedAt?: number | string | null;
   };
   const indexData = usePluginData('cookbook-index') as { items?: CookbookIndexItem[] } | undefined;
+  const allDocsData = useAllDocsData();
+  const cookbookDocs =
+    allDocsData?.cookbook?.versions?.find((version: any) => version?.isLast) ?? allDocsData?.cookbook?.versions?.[0];
   const hasTOC = !frontMatter?.hide_table_of_contents && (toc?.length ?? 0) > 0;
   const shouldRenderSyntheticTitle = !frontMatter?.hide_title && typeof contentTitle === 'undefined';
   const syntheticTitle = shouldRenderSyntheticTitle ? title : undefined;
 
+  const docsById = React.useMemo(() => {
+    const map = new Map<string, DocMeta>();
+    const docs: DocMeta[] = cookbookDocs?.docs ?? [];
+    docs.forEach((doc) => {
+      map.set(doc.id, doc);
+      map.set(`cookbook:${doc.id}`, doc);
+      if (doc.unversionedId) {
+        map.set(doc.unversionedId, doc);
+        map.set(`cookbook:${doc.unversionedId}`, doc);
+      }
+    });
+    return map;
+  }, [cookbookDocs]);
+
+  const cookbookItems = React.useMemo(() => {
+    const items = indexData?.items;
+    if (!Array.isArray(items)) {
+      return [];
+    }
+    return items.filter(
+      (item): item is CookbookIndexItem => !!item && typeof item.id === 'string' && item.id.trim().length > 0
+    );
+  }, [indexData]);
+
+  const sortedCookbookItems = React.useMemo(
+    () => sortCookbookItems(cookbookItems, docsById),
+    [cookbookItems, docsById]
+  );
+
   const resolvedTags = (tags ?? metaTags.map((t: any) => t.label)) as string[];
   const dataTags = resolvedTags.length ? resolvedTags.join(',') : undefined;
   const cookbookFrontMatter = frontMatter as
@@ -80,51 +246,7 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
         formatted_last_updated?: string;
       }
     | undefined;
-  const normalizeTimestamp = React.useCallback((value: unknown): number | undefined => {
-    const normalizeNumber = (input: number): number | undefined => {
-      if (!Number.isFinite(input)) {
-        return undefined;
-      }
-      // Treat smaller values (e.g. seconds) as seconds since epoch.
-      return input < 1e11 ? input * 1000 : input;
-    };
 
-    if (typeof value === 'number') {
-      return normalizeNumber(value);
-    }
-    if (typeof value === 'string') {
-      const trimmed = value.trim();
-      if (!trimmed) {
-        return undefined;
-      }
-      const numeric = Number(trimmed);
-      if (!Number.isNaN(numeric)) {
-        return normalizeNumber(numeric);
-      }
-      const parsed = Date.parse(trimmed);
-      return Number.isNaN(parsed) ? undefined : normalizeNumber(parsed);
-    }
-    if (value instanceof Date) {
-      const time = value.getTime();
-      return Number.isNaN(time) ? undefined : normalizeNumber(time);
-    }
-    return undefined;
-  }, []);
-  const formatTimestamp = React.useCallback((value: number): string | undefined => {
-    if (!Number.isFinite(value)) {
-      return undefined;
-    }
-    try {
-      const formatter = new Intl.DateTimeFormat(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-      });
-      return formatter.format(new Date(value));
-    } catch {
-      return new Date(value).toLocaleDateString();
-    }
-  }, []);
   const frontMatterLastUpdatedLabel = React.useMemo(() => {
     const formattedCandidates = [
       cookbookFrontMatter?.last_updated_label,
@@ -153,7 +275,7 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
     }
 
     return undefined;
-  }, [cookbookFrontMatter, formatTimestamp, normalizeTimestamp]);
+  }, [cookbookFrontMatter]);
   const pluginSource = React.useMemo(() => {
     const items = indexData?.items;
     if (!Array.isArray(items)) {
@@ -192,13 +314,56 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
     }
 
     return formatTimestamp(normalizedTimestamp);
-  }, [formatTimestamp, frontMatterLastUpdatedLabel, formattedLastUpdatedAt, lastUpdatedAt, normalizeTimestamp]);
+  }, [frontMatterLastUpdatedLabel, formattedLastUpdatedAt, lastUpdatedAt]);
+
+  const paginationTargets = React.useMemo(() => {
+    if (sortedCookbookItems.length === 0) {
+      return { previous: null, next: null };
+    }
+
+    const currentIds = new Set(
+      [id, unversionedId, `cookbook:${id}`, unversionedId ? `cookbook:${unversionedId}` : undefined]
+        .map((value) => normalizeCookbookId(value))
+        .filter(Boolean)
+    );
+
+    const currentIndex = sortedCookbookItems.findIndex((item) => currentIds.has(normalizeCookbookId(item.id)));
+
+    if (currentIndex < 0) {
+      return { previous: null, next: null };
+    }
+
+    const resolveNavTarget = (item: CookbookIndexItem | undefined) => {
+      if (!item) {
+        return null;
+      }
+
+      const docMeta = resolveDocMeta(item, docsById);
+      const href = docMeta?.permalink ?? item.permalink;
+      if (!href) {
+        return null;
+      }
+
+      const navTitle = docMeta?.title ?? docMeta?.frontMatter?.title ?? item.title ?? normalizeCookbookId(item.id);
+      return {
+        href,
+        title: navTitle,
+      };
+    };
+
+    return {
+      previous: resolveNavTarget(sortedCookbookItems[currentIndex - 1]),
+      next: resolveNavTarget(sortedCookbookItems[currentIndex + 1]),
+    };
+  }, [docsById, id, sortedCookbookItems, unversionedId]);
+
   const renderLastUpdated = React.useCallback(() => {
     if (!lastUpdatedLabel) {
       return null;
     }
-    return <p className={styles.lastUpdated}>Last updated {lastUpdatedLabel}</p>;
+    return <p className={styles.lastUpdated}>Updated {lastUpdatedLabel}</p>;
   }, [lastUpdatedLabel]);
+
   const renderActions = React.useCallback(
     () => (
       <div className={styles.actionsRow}>
@@ -223,6 +388,39 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
     [githubHref, handleGithubClick, isGithubEnabled]
   );
 
+  const renderRecipePagination = React.useCallback(() => {
+    if (!paginationTargets.previous && !paginationTargets.next) {
+      return null;
+    }
+
+    return (
+      <nav className={styles.recipePagination} aria-label="Recipe navigation">
+        {paginationTargets.previous ? (
+          <Link className={styles.recipeNavLink} to={paginationTargets.previous.href}>
+            <BackArrowIcon className={styles.actionIcon} />
+            <span>
+              <span className={styles.recipeNavLabel}>Previous</span>
+              <span className={styles.recipeNavTitle}>{paginationTargets.previous.title}</span>
+            </span>
+          </Link>
+        ) : (
+          <span />
+        )}
+        {paginationTargets.next ? (
+          <Link className={clsx(styles.recipeNavLink, styles.recipeNavLinkNext)} to={paginationTargets.next.href}>
+            <span>
+              <span className={styles.recipeNavLabel}>Next</span>
+              <span className={styles.recipeNavTitle}>{paginationTargets.next.title}</span>
+            </span>
+            <ForwardArrowIcon className={styles.actionIcon} />
+          </Link>
+        ) : (
+          <span />
+        )}
+      </nav>
+    );
+  }, [paginationTargets.next, paginationTargets.previous]);
+
   const components = React.useMemo(() => {
     const DefaultH1 =
       (MDXComponents?.h1 as React.ComponentType<React.HTMLAttributes<HTMLHeadingElement>>) ??
@@ -273,6 +471,7 @@ function InnerCookbookDocItem({ content, tags }: CookbookDocItemProps) {
             <MDXProvider components={components}>
               <DocContent />
             </MDXProvider>
+            {renderRecipePagination()}
           </article>
           {hasTOC && (
             <aside className={styles.toc} aria-label="Table of contents">
diff --git a/src/components/elements/CookbookHome.module.css b/src/components/elements/CookbookHome.module.css
index 4c9720a953..f2593e7847 100644
--- a/src/components/elements/CookbookHome.module.css
+++ b/src/components/elements/CookbookHome.module.css
@@ -49,7 +49,7 @@
 }
 
 .inner {
-  width: min(100%, 1440px);
+  width: min(100%, 1520px);
   margin: 0 auto;
   padding: var(--ifm-spacing-xl, var(--cbk-space-xl, 32px))
            var(--ifm-spacing-horizontal, var(--cbk-space-md, 16px));
@@ -89,14 +89,56 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--ifm-spacing-lg, var(--cbk-space-lg, 24px));
+  column-gap: clamp(1.5rem, 2vw, 2.25rem);
+  row-gap: clamp(2.75rem, 5vw, 4.5rem);
   width: 100%;
 }
 
 .cell {
 }
 
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ifm-spacing-md, var(--cbk-space-md, 16px));
+  width: 100%;
+  margin-top: var(--ifm-spacing-lg, var(--cbk-space-lg, 24px));
+}
+
+.paginationButton {
+  border: 1px solid var(--cookbook-tile-border-color);
+  background: transparent;
+  color: var(--ifm-color-emphasis-800);
+  font-weight: 600;
+  min-width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  line-height: 1;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 160ms ease, color 160ms ease;
+}
+
+.paginationButton:hover,
+.paginationButton:focus-visible {
+  background: color-mix(in srgb, var(--ifm-color-emphasis-800) 10%, transparent);
+  color: var(--ifm-color-emphasis-900);
+}
+
+.paginationInfo {
+  color: var(--ifm-color-emphasis-700);
+  font-weight: 500;
+}
+
 /* Mobile: stack */
 @media (max-width: 768px) {
   .grid { grid-template-columns: 1fr; }
+  .pagination {
+    flex-direction: column;
+  }
 }
diff --git a/src/components/elements/CookbookHome.tsx b/src/components/elements/CookbookHome.tsx
index 9f65bfe530..cc65157454 100644
--- a/src/components/elements/CookbookHome.tsx
+++ b/src/components/elements/CookbookHome.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import Tile from '@site/src/components/elements/Tile';
 import { useAllDocsData } from '@docusaurus/plugin-content-docs/client';
+import { useHistory, useLocation } from '@docusaurus/router';
 import styles from './CookbookHome.module.css';
 import useGlobalData, { usePluginData } from '@docusaurus/useGlobalData';
 import clsx from 'clsx';
@@ -13,6 +14,10 @@ type CookbookItem = {
   permalink: string;
   source?: string;
   priority?: number;
+  last_updated?: unknown;
+  last_updated_at?: unknown;
+  last_updated_label?: string;
+  formatted_last_updated?: string;
 };
 
 type DocMeta = {
@@ -26,12 +31,21 @@ type DocMeta = {
     tags?: any[];
     last_updated?: unknown;
     last_updated_at?: unknown;
+    last_updated_label?: string;
+    formatted_last_updated?: string;
   };
   tags?: { label: string }[];
   permalink?: string;
   lastUpdatedAt?: number | string | null;
+  formattedLastUpdatedAt?: string;
 };
 
+const PAGE_SIZE = 6;
+
+function normalizeCookbookId(id: string | undefined): string {
+  return (id ?? '').replace(/^cookbook:/, '').trim();
+}
+
 function resolveDocMeta(item: CookbookItem, docsById: Map<string, DocMeta>) {
   return (
     docsById.get(item.id) ??
@@ -41,6 +55,143 @@ function resolveDocMeta(item: CookbookItem, docsById: Map<string, DocMeta>) {
   );
 }
 
+function normalizeTimestamp(value: unknown): number | undefined {
+  const normalizeNumber = (input: number): number | undefined => {
+    if (!Number.isFinite(input)) {
+      return undefined;
+    }
+    return input < 1e11 ? input * 1000 : input;
+  };
+
+  if (typeof value === 'number') {
+    return normalizeNumber(value);
+  }
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    if (!trimmed) {
+      return undefined;
+    }
+    const numeric = Number(trimmed);
+    if (!Number.isNaN(numeric)) {
+      return normalizeNumber(numeric);
+    }
+    const parsed = Date.parse(trimmed);
+    return Number.isNaN(parsed) ? undefined : normalizeNumber(parsed);
+  }
+  if (value instanceof Date) {
+    const time = value.getTime();
+    return Number.isNaN(time) ? undefined : normalizeNumber(time);
+  }
+  return undefined;
+}
+
+function formatTimestamp(value: number): string | undefined {
+  if (!Number.isFinite(value)) {
+    return undefined;
+  }
+  try {
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+    return formatter.format(new Date(value));
+  } catch {
+    return new Date(value).toLocaleDateString();
+  }
+}
+
+function getFirstNonEmptyLabel(candidates: Array<unknown>): string | undefined {
+  for (const candidate of candidates) {
+    if (typeof candidate === 'string') {
+      const trimmed = candidate.trim();
+      if (trimmed.length > 0) {
+        return trimmed;
+      }
+    }
+  }
+  return undefined;
+}
+
+function getLastUpdatedLabel(item: CookbookItem, docMeta: DocMeta | null): string | undefined {
+  const label = getFirstNonEmptyLabel([
+    docMeta?.frontMatter?.last_updated_label,
+    docMeta?.frontMatter?.formatted_last_updated,
+    docMeta?.formattedLastUpdatedAt,
+    item.last_updated_label,
+    item.formatted_last_updated,
+  ]);
+
+  if (label) {
+    return label;
+  }
+
+  const timestampCandidates = [
+    docMeta?.frontMatter?.last_updated,
+    docMeta?.frontMatter?.last_updated_at,
+    docMeta?.lastUpdatedAt,
+    item.last_updated,
+    item.last_updated_at,
+  ];
+
+  for (const candidate of timestampCandidates) {
+    const normalized = normalizeTimestamp(candidate);
+    if (typeof normalized === 'number') {
+      const formatted = formatTimestamp(normalized);
+      if (formatted) {
+        return formatted;
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function getLastUpdatedTimestamp(item: CookbookItem, docsById: Map<string, DocMeta>): number {
+  const meta = resolveDocMeta(item, docsById);
+  const candidates = [
+    meta?.frontMatter?.last_updated,
+    meta?.frontMatter?.last_updated_at,
+    meta?.lastUpdatedAt,
+    item.last_updated,
+    item.last_updated_at,
+  ];
+
+  for (const candidate of candidates) {
+    const normalized = normalizeTimestamp(candidate);
+    if (typeof normalized === 'number') {
+      return normalized;
+    }
+  }
+
+  return 0;
+}
+
+function sortCookbookItems(items: CookbookItem[], docsById: Map<string, DocMeta>): CookbookItem[] {
+  return [...items].sort((a, b) => {
+    const priorityA = typeof a.priority === 'number' && Number.isFinite(a.priority) ? a.priority : null;
+    const priorityB = typeof b.priority === 'number' && Number.isFinite(b.priority) ? b.priority : null;
+
+    if (priorityA !== null && priorityB !== null) {
+      if (priorityA !== priorityB) {
+        return priorityB - priorityA;
+      }
+    } else if (priorityA !== null) {
+      return -1;
+    } else if (priorityB !== null) {
+      return 1;
+    }
+
+    const updatedA = getLastUpdatedTimestamp(a, docsById);
+    const updatedB = getLastUpdatedTimestamp(b, docsById);
+
+    if (updatedA === updatedB) {
+      return 0;
+    }
+    return updatedB - updatedA;
+  });
+}
+
 function DocTile({ item, docsById }: { item: CookbookItem; docsById: Map<string, DocMeta> }) {
   const { id, title: pluginTitle, description: pluginDescription, tags: pluginTags, permalink: pluginPermalink } = item;
 
@@ -64,8 +215,18 @@ function DocTile({ item, docsById }: { item: CookbookItem; docsById: Map<string,
   const resolvedTags = (tagsFromMeta ?? tagsFromFrontMatter ?? pluginTags) as string[];
 
   const href = docMeta?.permalink ?? pluginPermalink ?? '#';
+  const lastUpdatedLabel = getLastUpdatedLabel(item, docMeta);
 
-  return <Tile title={title} description={description} href={href} tags={resolvedTags} headingLevel="h2" />;
+  return (
+    <Tile
+      title={title}
+      description={description}
+      href={href}
+      tags={resolvedTags}
+      headingLevel="h2"
+      lastUpdatedLabel={lastUpdatedLabel}
+    />
+  );
 }
 
 export default function CookbookHome() {
@@ -74,6 +235,8 @@ export default function CookbookHome() {
 
   const dataAny = usePluginData('cookbook-index') as any;
   const allDocsData = useAllDocsData();
+  const location = useLocation();
+  const history = useHistory();
   const cookbookDocs =
     allDocsData?.cookbook?.versions?.find((version: any) => version?.isLast) ?? allDocsData?.cookbook?.versions?.[0];
 
@@ -99,87 +262,47 @@ export default function CookbookHome() {
   });
 
   const items: CookbookItem[] = raw.filter(
-    (x): x is CookbookItem => !!x && typeof x === 'object' && typeof (x as any).title === 'string'
+    (x): x is CookbookItem =>
+      !!x && typeof x === 'object' && typeof (x as any).title === 'string' && typeof (x as any).id === 'string'
   );
 
   if (items.length === 0) {
     throw new Error('CookbookHome: no items found by cookbook-index plugin (check server logs for [cookbook-index]).');
   }
 
-  const normalizeTimestamp = React.useCallback((value: unknown): number | undefined => {
-    const normalizeNumber = (input: number): number | undefined => {
-      if (!Number.isFinite(input)) {
-        return undefined;
-      }
-      return input < 1e11 ? input * 1000 : input;
-    };
+  const sortedItems = React.useMemo(() => sortCookbookItems(items, docsById), [docsById, items]);
 
-    if (typeof value === 'number') {
-      return normalizeNumber(value);
-    }
-    if (typeof value === 'string') {
-      const trimmed = value.trim();
-      if (!trimmed) {
-        return undefined;
-      }
-      const numeric = Number(trimmed);
-      if (!Number.isNaN(numeric)) {
-        return normalizeNumber(numeric);
-      }
-      const parsed = Date.parse(trimmed);
-      return Number.isNaN(parsed) ? undefined : normalizeNumber(parsed);
-    }
-    if (value instanceof Date) {
-      const time = value.getTime();
-      return Number.isNaN(time) ? undefined : normalizeNumber(time);
-    }
-    return undefined;
-  }, []);
-
-  const getLastUpdatedTimestamp = React.useCallback(
-    (item: CookbookItem) => {
-      const meta = resolveDocMeta(item, docsById);
-      const frontMatterTimestampCandidates = [meta?.frontMatter?.last_updated, meta?.frontMatter?.last_updated_at];
-      for (const candidate of frontMatterTimestampCandidates) {
-        const normalized = normalizeTimestamp(candidate);
-        if (typeof normalized === 'number') {
-          return normalized;
-        }
-      }
+  const pageCount = Math.max(1, Math.ceil(sortedItems.length / PAGE_SIZE));
+  const rawPage = Number(new URLSearchParams(location.search).get('page') ?? '1');
+  const currentPage = Number.isFinite(rawPage) && rawPage > 0 ? Math.min(Math.floor(rawPage), pageCount) : 1;
 
-      const normalizedMeta = normalizeTimestamp(meta?.lastUpdatedAt ?? null);
-      if (typeof normalizedMeta === 'number') {
-        return normalizedMeta;
-      }
-      return 0;
-    },
-    [docsById, normalizeTimestamp]
-  );
+  const visibleItems = React.useMemo(() => {
+    const start = (currentPage - 1) * PAGE_SIZE;
+    return sortedItems.slice(start, start + PAGE_SIZE);
+  }, [currentPage, sortedItems]);
 
-  const sortedItems = React.useMemo(() => {
-    return [...items].sort((a, b) => {
-      const priorityA = typeof a.priority === 'number' && Number.isFinite(a.priority) ? a.priority : null;
-      const priorityB = typeof b.priority === 'number' && Number.isFinite(b.priority) ? b.priority : null;
-
-      if (priorityA !== null && priorityB !== null) {
-        if (priorityA !== priorityB) {
-          return priorityB - priorityA;
-        }
-      } else if (priorityA !== null) {
-        return -1;
-      } else if (priorityB !== null) {
-        return 1;
+  const goToPage = React.useCallback(
+    (page: number) => {
+      const target = Math.max(1, Math.min(pageCount, page));
+      if (target === currentPage) {
+        return;
       }
 
-      const updatedA = getLastUpdatedTimestamp(a);
-      const updatedB = getLastUpdatedTimestamp(b);
-
-      if (updatedA === updatedB) {
-        return 0;
+      const params = new URLSearchParams(location.search);
+      if (target <= 1) {
+        params.delete('page');
+      } else {
+        params.set('page', String(target));
       }
-      return updatedB - updatedA;
-    });
-  }, [getLastUpdatedTimestamp, items]);
+
+      const search = params.toString();
+      history.push({
+        pathname: location.pathname,
+        search: search.length > 0 ? `?${search}` : '',
+      });
+    },
+    [currentPage, history, location.pathname, location.search, pageCount]
+  );
 
   return (
     <section className={clsx('cookbook--centered', styles.page)}>
@@ -192,12 +315,39 @@ export default function CookbookHome() {
           </p>
         </header>
         <div className={styles.grid}>
-          {sortedItems.map((it) => (
-            <div key={it.id} className={styles.cell}>
+          {visibleItems.map((it) => (
+            <div key={`${normalizeCookbookId(it.id)}-${it.permalink}`} className={styles.cell}>
               <DocTile item={it} docsById={docsById} />
             </div>
           ))}
         </div>
+        {pageCount > 1 && (
+          <nav className={styles.pagination} aria-label="Cookbook pagination">
+            {currentPage > 1 ? (
+              <button
+                type="button"
+                className={styles.paginationButton}
+                aria-label="Previous page"
+                onClick={() => goToPage(currentPage - 1)}
+              >
+                ‹
+              </button>
+            ) : null}
+            <span className={styles.paginationInfo}>
+              Page {currentPage} of {pageCount}
+            </span>
+            {currentPage < pageCount ? (
+              <button
+                type="button"
+                className={styles.paginationButton}
+                aria-label="Next page"
+                onClick={() => goToPage(currentPage + 1)}
+              >
+                ›
+              </button>
+            ) : null}
+          </nav>
+        )}
       </div>
     </section>
   );
diff --git a/src/components/elements/Tile.module.css b/src/components/elements/Tile.module.css
index 453088c1f1..d9bdf10ad3 100644
--- a/src/components/elements/Tile.module.css
+++ b/src/components/elements/Tile.module.css
@@ -66,6 +66,9 @@ color: inherit;
 
 .body {
 color: var(--ifm-color-emphasis-700);
+display: flex;
+flex-direction: column;
+flex: 1 1 auto;
 }
 
 
@@ -73,12 +76,26 @@ color: var(--ifm-color-emphasis-700);
 margin: 0.25rem 0 0 0;
 }
 
+.meta {
+margin-top: auto;
+padding-top: 0.9rem;
+display: flex;
+flex-direction: column;
+gap: 0.35rem;
+}
+
+.lastUpdated {
+margin: 0;
+font-size: 0.875rem;
+color: var(--ifm-color-emphasis-600);
+}
+
 
 .tags {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
-margin-top: 0.75rem;
+margin-top: 0;
 padding: 0;
 list-style: none;
 }
@@ -87,23 +104,3 @@ list-style: none;
 .tag {
 font-size: 0.75rem;
 }
-
-
-.footer {
-margin-top: auto;
-}
-
-
-.cta {
-display: inline-flex;
-align-items: center;
-gap: 0.375rem;
-font-weight: 500;
-transition: color 0.18s ease;
-}
-
-
-.arrow {
-transform: translateX(0);
-transition: transform 0.18s ease;
-}
diff --git a/src/components/elements/Tile.tsx b/src/components/elements/Tile.tsx
index a94a61d1ab..9ceb3ef691 100644
--- a/src/components/elements/Tile.tsx
+++ b/src/components/elements/Tile.tsx
@@ -5,6 +5,7 @@ import styles from "./Tile.module.css";
 export type TileProps = {
   title: string;
   description: string;
+  lastUpdatedLabel?: string;
   tags?: string[]; // collected, may be used later
   href?: string; // clickable card when present
   icon?: React.ReactNode; // emoji or SVG
@@ -12,7 +13,16 @@ export type TileProps = {
   headingLevel?: "h2" | "h3";
 };
 
-export default function Tile({ title, description, tags = [], href, icon, className, headingLevel = "h3" }: TileProps) {
+export default function Tile({
+  title,
+  description,
+  lastUpdatedLabel,
+  tags = [],
+  href,
+  icon,
+  className,
+  headingLevel = "h3",
+}: TileProps) {
   const isLink = typeof href === "string" && href.length > 0;
   const Container: React.ElementType = isLink ? Link : "div";
   const containerProps = isLink ? { to: href, href } : {};
@@ -36,32 +46,21 @@ export default function Tile({ title, description, tags = [], href, icon, classN
       </div>
       <div className={clsx("card__body", styles.body)}>
         <p className={styles.description}>{description}</p>
-        {tags.length > 0 && (
-          <ul className={styles.tags} aria-label="labels">
-            {tags.map((t) => (
-              <li key={t} className={clsx("badge badge--secondary", styles.tag)}>
-                {t.toUpperCase()}
-              </li>
-            ))}
-          </ul>
+        {(tags.length > 0 || lastUpdatedLabel) && (
+          <div className={styles.meta}>
+            {tags.length > 0 && (
+              <ul className={styles.tags} aria-label="labels">
+                {tags.map((t) => (
+                  <li key={t} className={clsx("badge badge--secondary", styles.tag)}>
+                    {t.toUpperCase()}
+                  </li>
+                ))}
+              </ul>
+            )}
+            {lastUpdatedLabel && <p className={styles.lastUpdated}>Updated {lastUpdatedLabel}</p>}
+          </div>
         )}
       </div>
-      {href && (
-        <div className={clsx("card__footer", styles.footer)}>
-          <span className={styles.cta}>
-            Learn more
-            <svg className={styles.arrow} width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden>
-              <path
-                d="M5 12h14M13 5l7 7-7 7"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </span>
-        </div>
-      )}
     </Container>
   );
 }