diff --git a/src/app/colors.css b/src/app/colors.css
index 95ec008b24..e955c4c2dd 100644
--- a/src/app/colors.css
+++ b/src/app/colors.css
@@ -1,5 +1,6 @@
 :root,
 .light {
+  --color-pri-lightest: 319 100% 96%;
   --color-pri-lighter: 319 100% 90%;
   --color-pri-light: 318 100% 80%;
   --color-pri-base: 319 100% 44.1%;
diff --git a/src/components/cards.tsx b/src/components/cards.tsx
index a04b9c5884..75f35b46dc 100644
--- a/src/components/cards.tsx
+++ b/src/components/cards.tsx
@@ -1,45 +1,88 @@
-import { ReactElement } from "react"
-import { Card } from "./card"
 import { clsx } from "clsx"
-import NextLink from "next/link"
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { learnPages } from "./learn-aggregator/learn-pages"
 
 export function Cards({
   items,
+  numbered,
 }: {
   items: {
-    icon: ReactElement
+    icon?:
+      | (({ className }: { className?: string }) => React.ReactNode)
+      | React.ReactNode
     title: string
     description?: string
     link: string
   }[]
+  numbered?: string
 }) {
   return (
-    <div className="mt-6 grid grid-cols-2 gap-4">
-      {items.map(({ icon: Icon, title, link, description }) => {
-        const isExternal = link.startsWith("https://")
+    <ul className="grid grid-cols-1 justify-stretch gap-2 pt-6 sm:grid-cols-2 lg:gap-4">
+      {items.map((item, index) => {
+        // Try to get section from learn-pages
+        let section: "getting-started" | "best-practices" | undefined
+
+        const path = item.link.replace(/^\/learn\//, "").replace(/\/$/, "")
+        const learnPage = learnPages[path as keyof typeof learnPages]
+        if (learnPage) {
+          section = learnPage.section
+        }
+
         return (
-          <Card
-            key={title}
-            as={isExternal ? "a" : NextLink}
-            // @ts-expect-error
-            href={link}
-            className={clsx(
-              "flex flex-col items-center",
-              isExternal &&
-                "relative after:absolute after:right-4 after:top-4 after:font-sans after:content-['_↗']",
-            )}
-          >
-            {/* @ts-expect-error */}
-            {typeof Icon === "function" ? <Icon className="h-12" /> : Icon}
-            <b className="mb-2 mt-4 text-center text-lg">{title}</b>
-            <span
-              className={`text-xs md:text-sm text-center${description ? "" : "break-all"}`}
+          <li key={item.title} className="flex text-neu-900">
+            <a
+              href={item.link}
+              className={clsx(
+                "gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'header''desc'] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'header_header''desc_arrow'] lg:[grid-template-columns:1fr_64px]",
+                section === "getting-started" &&
+                  "bg-pri-lighter/10 dark:bg-pri-lighter/5",
+                section === "best-practices" &&
+                  "bg-sec-lighter/10 dark:bg-sec-lighter/5",
+              )}
             >
-              {description ? description : link.replace(/^https?:\/\//, "")}
-            </span>
-          </Card>
+              <span className="flex flex-col gap-1 [grid-area:header]">
+                {numbered && (
+                  <span className="typography-body-sm px-2 pt-2 text-neu-700 max-lg:typography-body-md lg:px-4 lg:pt-4">
+                    {numbered} {index + 1}
+                  </span>
+                )}
+                <span
+                  className={clsx(
+                    "typography-h3 flex items-center gap-2 border-neu-200 text-neu-900 dark:border-neu-100",
+                    item.icon ? "border-b" : "pl-2 lg:pl-4",
+                  )}
+                >
+                  {item.icon && (
+                    <span className="flex items-center justify-center border-r border-neu-200 p-2 lg:p-4">
+                      {typeof item.icon === "function" ? (
+                        <item.icon className="size-8 shrink-0" />
+                      ) : (
+                        item.icon
+                      )}
+                    </span>
+                  )}
+                  {item.title}
+                </span>
+              </span>
+
+              <p className="typography-body-sm text-pretty p-4 text-neu-900 [grid-area:desc] max-lg:typography-body-md max-lg:border-t max-lg:border-neu-200 dark:max-lg:border-neu-100">
+                {item.description
+                  ? item.description
+                  : item.link.replace(/^https?:\/\//, "")}
+              </p>
+
+              <span
+                className={clsx(
+                  "hidden items-center justify-center place-self-end border-l border-neu-200 p-4 [grid-area:arrow] dark:border-neu-100 lg:flex",
+                  item.icon ? "h-full" : "border-t",
+                )}
+              >
+                <ArrowDownIcon className="size-8 shrink-0 -rotate-90" />
+              </span>
+            </a>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index b23a0a6814..bc61380eb9 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -115,7 +115,7 @@ export function Footer() {
     <footer className="relative isolate !bg-neu-100 text-neu-900 dark:!bg-neu-0 max-md:px-0 max-md:pt-0">
       <Stripes />
 
-      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 3xl:border-x 3xl:dark:border-t">
+      <div className="mx-auto max-w-[120rem] border-neu-400 dark:border-neu-100 xl:border-t 3xl:border-x">
         <div className="flex flex-wrap justify-between gap-4 p-4 max-md:w-full md:p-6 2xl:px-10">
           <NextLink href="/" className="nextra-logo flex items-center">
             <GraphQLWordmarkLogo className="h-6" title="GraphQL" />
diff --git a/src/components/learn-aggregator/assets/keyboard.svg b/src/components/learn-aggregator/assets/keyboard.svg
new file mode 100644
index 0000000000..fd282902fe
--- /dev/null
+++ b/src/components/learn-aggregator/assets/keyboard.svg
@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="138"
+  height="138"
+  fill="none"
+  viewBox="0 0 138 138"
+>
+  <g fill="#83bd02" clip-path="url(#a)">
+    <path
+      d="M137.557 85.156h-6.534v45.867h6.534zM131.023 131.023H6.577v6.534h124.446zM111.378 104.801h-6.577v6.577h13.111V98.267h-6.534zM117.912 117.912h-13.111v6.577h13.111zM104.801 91.733h-6.534v6.534h6.534zM104.801 45.867h-6.534V52.4h6.534zM98.267 104.801H91.69v6.577h6.577zM98.267 52.4H91.69v6.577h6.577zM98.267 39.333H91.69v6.534h6.577zM98.267 117.912H39.29v6.577h58.977zM91.69 91.733h-6.534v6.534h6.534zM91.69 32.756H26.222v6.577H91.69zM85.156 104.801h-6.534v6.577h6.534zM85.156 0h-6.534v13.11h6.534zM78.622 91.733h-6.577v6.534h6.577zM72.045 104.801h-6.534v6.577h6.534zM65.511 91.733h-6.534v6.534h6.534zM91.69 58.977H52.4v6.534h39.29zM58.977 104.801H52.4v6.577h6.577zM52.4 91.733h-6.533v6.534H52.4zM45.867 104.801H39.29v6.577h6.577zM39.29 91.733h-6.534v6.534h6.534zM78.622 13.11h-52.4v6.578h52.4zM32.756 104.801h-6.534v6.577h6.534zM32.756 117.912H19.645v6.577h13.11zM26.222 91.733h-6.577v6.534h6.577zM26.222 19.688h-6.577v13.068h6.577zM19.645 104.801H13.11v6.577h6.534zM131.023 85.156v-6.534H52.4v-13.11h-6.533v13.11H6.577v6.534zM6.577 85.156H0v45.867h6.577z"
+    />
+  </g>
+  <defs>
+    <clipPath id="a"><path fill="#fff" d="M0 0h137.557v137.557H0z" /></clipPath>
+  </defs>
+</svg>
diff --git a/src/components/learn-aggregator/learn-hero-stripes.tsx b/src/components/learn-aggregator/learn-hero-stripes.tsx
new file mode 100644
index 0000000000..29d2a4e37f
--- /dev/null
+++ b/src/components/learn-aggregator/learn-hero-stripes.tsx
@@ -0,0 +1,28 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import blurBean from "./learn-blur-bean.webp"
+
+export function LearnHeroStripes() {
+  return (
+    <div
+      role="presentation"
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(75,15%,5%)] dark:[--end-2:hsl(319,100%,10%)] dark:[--start-1:hsl(319,100%,14%)] dark:[--start-2:hsl(319,100%,30%)] sm:h-[360px] lg:h-[calc(100%-163px)]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskSize: "2200px",
+        WebkitMaskSize: "2200px",
+        maskPosition: "50% 60%",
+        WebkitMaskPosition: "50% 60%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
+      />
+    </div>
+  )
+}
diff --git a/src/components/learn-aggregator/learn-pages.tsx b/src/components/learn-aggregator/learn-pages.tsx
index 36fb291e90..c401d6e446 100644
--- a/src/components/learn-aggregator/learn-pages.tsx
+++ b/src/components/learn-aggregator/learn-pages.tsx
@@ -69,7 +69,12 @@ const _items: Record<
     section: "getting-started",
   },
   // ---
-  "best-practices": null,
+  "best-practices": {
+    description:
+      "Understand the context behind the GraphQL Best Practices lessons.",
+    icon: new URL("./assets/keyboard.svg", import.meta.url).href,
+    section: "best-practices",
+  },
   "thinking-in-graphs": {
     description:
       "Learn how to shift your mindset from RESTful endpoints to graph-based thinking, aligning your schema with business logic and legacy systems.",
diff --git a/src/components/learn-aggregator/index.tsx b/src/components/learn-aggregator/teaser-section.tsx
similarity index 73%
rename from src/components/learn-aggregator/index.tsx
rename to src/components/learn-aggregator/teaser-section.tsx
index e2f6417f2b..d29c6fc87a 100644
--- a/src/components/learn-aggregator/index.tsx
+++ b/src/components/learn-aggregator/teaser-section.tsx
@@ -1,12 +1,10 @@
 import { ReactNode, useState } from "react"
 import { clsx } from "clsx"
 
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 import { Eyebrow } from "@/_design-system/eyebrow"
 
-import blurBean from "./learn-blur-bean.webp"
 import { Button } from "@/app/conf/_design-system/button"
 
 export interface TeaserSectionProps
@@ -121,7 +119,7 @@ function TeaserSectionListItem({
     <li className={clsx("flex text-neu-900", className)} {...rest}>
       <a
         href={href}
-        className="gql-focus-visible grid border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
+        className="gql-focus-visible grid w-full border border-neu-200 bg-neu-0 transition-colors [grid-template-areas:'icon_header''desc_desc'] [grid-template-columns:72px_1fr] [grid-template-rows:auto_1fr] hover:ring hover:ring-neu-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:border-neu-100 dark:hover:ring-neu-50 lg:[grid-template-areas:'icon_header_header''icon_desc_arrow'] lg:[grid-template-columns:190px_1fr_64px]"
       >
         <span
           className={clsx(
@@ -156,28 +154,3 @@ function TeaserSectionListItem({
     </li>
   )
 }
-
-export function LearnHeroStripes() {
-  return (
-    <div
-      role="presentation"
-      // eslint-disable-next-line tailwindcss/no-contradicting-classname
-      className="pointer-events-none absolute inset-0 h-[300px] bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[480px]"
-      style={{
-        maskImage: `url(${blurBean.src})`,
-        WebkitMaskImage: `url(${blurBean.src})`,
-        maskSize: "2200px",
-        WebkitMaskSize: "2200px",
-        maskPosition: "50% 60%",
-        WebkitMaskPosition: "50% 60%",
-        maskRepeat: "no-repeat",
-        WebkitMaskRepeat: "no-repeat",
-      }}
-    >
-      <StripesDecoration
-        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
-        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
-      />
-    </div>
-  )
-}
diff --git a/src/components/nav-links/arrow-nav-links.tsx b/src/components/nav-links/arrow-nav-links.tsx
new file mode 100644
index 0000000000..9e70684c1f
--- /dev/null
+++ b/src/components/nav-links/arrow-nav-links.tsx
@@ -0,0 +1,59 @@
+// eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop
+import NextLink from "next/link"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+interface NavLinkProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+}
+
+export function ArrowNavLinks({
+  flatDocsDirectories,
+  currentIndex,
+}: NavLinkProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  return (
+    <div className="mb-8 flex items-center gap-4 border-t border-neu-200 pt-8 print:hidden">
+      {prev && (
+        <NextLink
+          href={prev.route}
+          title={prev.title}
+          className="gql-focus-visible typography-link flex max-w-[50%] items-center gap-2 border border-neu-200 pr-2 text-left text-base no-underline hover:bg-neu-50 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:hover:bg-neu-50/50 dark:hover:ring-neu-50"
+        >
+          <span className="border-r p-2">
+            <ArrowDown className="size-8 shrink-0 rotate-90" />
+          </span>
+          <span className="[word-break:break-word]">{prev.title}</span>
+        </NextLink>
+      )}
+      {next && (
+        <NextLink
+          href={next.route}
+          title={next.title}
+          className="gql-focus-visible typography-link ml-auto flex max-w-[50%] items-center gap-2 border border-neu-200 pl-2 text-left text-base no-underline hover:bg-neu-50 hover:ring hover:ring-neu-100 dark:border-neu-100 dark:hover:bg-neu-50/50 dark:hover:ring-neu-50"
+        >
+          <span className="[word-break:break-word]">{next.title}</span>
+          <span className="border-l border-neu-200 p-2 dark:border-neu-100">
+            <ArrowDown className="size-8 shrink-0 -rotate-90" />
+          </span>
+        </NextLink>
+      )}
+    </div>
+  )
+}
diff --git a/src/components/nav-links/blur-corner.webp b/src/components/nav-links/blur-corner.webp
new file mode 100644
index 0000000000..7d5e8947ba
Binary files /dev/null and b/src/components/nav-links/blur-corner.webp differ
diff --git a/src/components/nav-links/index.tsx b/src/components/nav-links/index.tsx
new file mode 100644
index 0000000000..517c022dad
--- /dev/null
+++ b/src/components/nav-links/index.tsx
@@ -0,0 +1,2 @@
+export { LearnNavLinkCard } from "./learn-nav-link-card"
+export { ArrowNavLinks } from "./arrow-nav-links"
diff --git a/src/components/nav-links/learn-nav-link-card.tsx b/src/components/nav-links/learn-nav-link-card.tsx
new file mode 100644
index 0000000000..e9d0073f61
--- /dev/null
+++ b/src/components/nav-links/learn-nav-link-card.tsx
@@ -0,0 +1,122 @@
+import NextLink from "next/link"
+import type { Item } from "nextra/normalize-pages"
+import type { ReactElement } from "react"
+import { useThemeConfig } from "nextra-theme-docs"
+import type { DocsThemeConfig } from "nextra-theme-docs"
+
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+import { learnPages } from "@/components/learn-aggregator/learn-pages"
+
+import blurCorner from "./blur-corner.webp"
+import clsx from "clsx"
+
+interface LearnNavLinkCardProps {
+  currentIndex: number
+  flatDocsDirectories: Item[]
+  className?: string
+  articleNoun: string
+}
+
+export function LearnNavLinkCard({
+  flatDocsDirectories,
+  currentIndex,
+  className,
+  articleNoun,
+}: LearnNavLinkCardProps): ReactElement | null {
+  const themeConfig = useThemeConfig()
+  const nav = themeConfig.navigation
+  const navigation: Exclude<DocsThemeConfig["navigation"], boolean> =
+    typeof nav === "boolean" ? { prev: nav, next: nav } : nav
+  let prev = navigation.prev && flatDocsDirectories[currentIndex - 1]
+  let next = navigation.next && flatDocsDirectories[currentIndex + 1]
+
+  if (prev && !prev.isUnderCurrentDocsTree) prev = false
+  if (next && !next.isUnderCurrentDocsTree) next = false
+
+  if (!prev && !next) return null
+
+  const displayPost = next || prev
+  const isNext = !!next
+
+  if (!displayPost) return null
+
+  const pageKey = displayPost.route.split("/").pop() as keyof typeof learnPages
+  const pageData = learnPages[pageKey]
+  const section = pageData?.section
+
+  return (
+    <NextLink
+      href={displayPost.route}
+      className={clsx(
+        "gql-focus-visible relative mx-auto flex max-w-[1056px] items-center gap-8 border border-neu-200 bg-neu-0 p-8 @container hover:ring hover:ring-neu-100 dark:border-neu-50 dark:hover:ring-neu-50/50",
+        className,
+      )}
+    >
+      <div
+        className={clsx(
+          "pointer-events-none absolute inset-0 left-4 overflow-hidden",
+          section === "getting-started" &&
+            "[--start:var(--color-pri-lightest)] dark:[--start:var(--color-pri-darker)]",
+          section === "best-practices" &&
+            "[--start:var(--color-sec-lighter)] dark:[--start:var(--color-sec-darker)]",
+        )}
+        style={{
+          maskImage: `url(${blurCorner.src})`,
+          WebkitMaskImage: `url(${blurCorner.src})`,
+          maskSize: "50% 50%",
+          WebkitMaskSize: "50% 50%",
+          maskPosition: "top right",
+          WebkitMaskPosition: "top right",
+          maskRepeat: "no-repeat",
+          WebkitMaskRepeat: "no-repeat",
+        }}
+      >
+        <StripesDecoration
+          oddClassName="bg-[linear-gradient(180deg,hsl(var(--start))_0%,hsl(var(--color-neu-0)/0)_50%)]"
+          stripeWidth="12px"
+        />
+      </div>
+
+      <div className="flex flex-1 flex-col gap-3 sm:gap-4">
+        <p className="typography-menu text-xs text-pri-base @[740px]:text-sm dark:text-pri-light">
+          {isNext ? `next ${articleNoun}` : `previous ${articleNoun}`}
+        </p>
+
+        <h2 className="typography-h2 md:typography-h3 md:@[700px]:typography-h2">
+          {displayPost.title}
+        </h2>
+        {pageData?.description && (
+          <p className="typography-body-md max-w-[560px]">
+            {pageData.description}
+          </p>
+        )}
+
+        <div className="flex h-12 items-center justify-center self-start bg-neu-900 px-8 py-2">
+          <span className="typography-button text-neu-0">
+            Go to {isNext ? "next" : "previous"} {articleNoun}
+          </span>
+        </div>
+      </div>
+
+      {pageData?.icon && (
+        <div className="relative hidden size-[222px] bg-neu-0/[.64] backdrop-blur-[6px] @[680px]:flex">
+          <div
+            className={clsx(
+              "shrink-0 items-center justify-center p-12",
+              section === "getting-started" &&
+                "bg-pri-lightest dark:bg-pri-lighter/5",
+              section === "best-practices" &&
+                "bg-sec-lighter dark:bg-sec-lighter/10",
+            )}
+          >
+            <img
+              src={pageData.icon}
+              alt=""
+              className="size-full object-contain"
+            />
+          </div>
+        </div>
+      )}
+    </NextLink>
+  )
+}
diff --git a/src/components/nextra-mdx-wrapper.tsx b/src/components/nextra-mdx-wrapper.tsx
index 4dc9b4fc2f..4e33dbc782 100644
--- a/src/components/nextra-mdx-wrapper.tsx
+++ b/src/components/nextra-mdx-wrapper.tsx
@@ -1,14 +1,10 @@
 import type { ReactElement, ReactNode } from "react"
 import { useMounted } from "nextra/hooks"
 import { Heading } from "nextra"
-import {
-  useConfig,
-  useThemeConfig,
-  SkipNavContent,
-  NavLinks,
-} from "nextra-theme-docs"
+import { useConfig, useThemeConfig, SkipNavContent } from "nextra-theme-docs"
 import { clsx } from "clsx"
 
+import { LearnNavLinkCard, ArrowNavLinks } from "./nav-links"
 import { Sidebar } from "./sidebar"
 import { renderComponent } from "./utils/render-component"
 import { TableOfContents } from "./table-of-contents"
@@ -57,7 +53,7 @@ export function NextraMdxWrapper({
   return (
     <div
       className={clsx(
-        "mx-auto flex",
+        "mx-auto flex pb-8 xl:pb-12",
         themeContext.layout !== "raw" && "max-w-[90rem]",
       )}
     >
@@ -106,18 +102,28 @@ function Body({ children }: { children: ReactNode }): ReactElement {
       <div className="mt-16" />
     )
 
+  const isLearnPage = config.filePath.includes("/learn/")
+
   const content = (
     <>
       {renderComponent(themeContext.topContent)}
       {children}
       {gitTimestampEl}
       {renderComponent(themeContext.bottomContent)}
-      {activeType !== "page" && themeContext.pagination && (
-        <NavLinks
-          flatDocsDirectories={flatDocsDirectories}
-          currentIndex={activeIndex}
-        />
-      )}
+      {activeType !== "page" &&
+        themeContext.pagination &&
+        (isLearnPage ? (
+          <LearnNavLinkCard
+            flatDocsDirectories={flatDocsDirectories}
+            currentIndex={activeIndex}
+            articleNoun="lesson"
+          />
+        ) : (
+          <ArrowNavLinks
+            flatDocsDirectories={flatDocsDirectories}
+            currentIndex={activeIndex}
+          />
+        ))}
     </>
   )
 
@@ -144,7 +150,8 @@ function Body({ children }: { children: ReactNode }): ReactElement {
     <article
       className={clsx(
         classes.main,
-        "nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+        "nextra-content flex min-h-[calc(100vh-var(--nextra-navbar-height))] min-w-0 justify-center pr-[calc(env(safe-area-inset-right)-1.5rem)]",
+        isLearnPage ? "pb-4" : "pb-8",
         themeContext.typesetting === "article" &&
           "nextra-body-typesetting-article",
       )}
diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx
index 2db9ecc0b4..bd126b6d5e 100644
--- a/src/components/sidebar/index.tsx
+++ b/src/components/sidebar/index.tsx
@@ -449,7 +449,7 @@ export function Sidebar({
             <div
               className={cn(
                 "overflow-y-auto",
-                "grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))]",
+                "grow p-4 md:h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] xl:pl-0",
                 showSidebar ? "nextra-scrollbar" : "no-scrollbar",
               )}
               ref={sidebarRef}
@@ -512,9 +512,7 @@ export function SidebarFooter({
   return (
     <div
       className={cn(
-        "nextra-sidebar-footer sticky bottom-0",
-        "flex items-center gap-2 py-4",
-        "mx-3 px-1", // to hide focused sidebar links
+        "nextra-sidebar-footer sticky bottom-0 mx-3 flex items-center gap-2 px-1 py-4 xl:ml-0.5 xl:mr-0 xl:px-0",
         showSidebar
           ? hasI18n && "justify-end"
           : "flex-col flex-wrap justify-center py-4",
diff --git a/src/components/toc-hero/toc-hero-contents.tsx b/src/components/toc-hero/toc-hero-contents.tsx
index f621002191..84f060efb3 100644
--- a/src/components/toc-hero/toc-hero-contents.tsx
+++ b/src/components/toc-hero/toc-hero-contents.tsx
@@ -16,7 +16,7 @@ export function TocHeroContents({
     <div
       {...rest}
       className={clsx(
-        "mt-2 w-full border border-neu-300 bg-neu-0 dark:border-neu-100 lg:mt-4",
+        "mt-2 w-full border border-neu-300 bg-neu-0/[.64] dark:border-neu-100 lg:mt-4",
         className,
       )}
     >
diff --git a/src/components/tools-and-libraries.tsx b/src/components/tools-and-libraries.tsx
index 32c617f478..623a3630ef 100644
--- a/src/components/tools-and-libraries.tsx
+++ b/src/components/tools-and-libraries.tsx
@@ -346,7 +346,7 @@ function ToolsAndLibrariesSidebar({
       <SidebarFooter
         setSidebar={setSidebarShown}
         showSidebar={sidebarShown}
-        className="mt-4 max-md:hidden"
+        className="mt-4 !pl-4 max-md:hidden"
         hiddenOnMobile={false}
       />
     </div>
diff --git a/src/pages/community/resources/official-channels.mdx b/src/pages/community/resources/official-channels.mdx
index 192c3e1519..ff165c4be5 100644
--- a/src/pages/community/resources/official-channels.mdx
+++ b/src/pages/community/resources/official-channels.mdx
@@ -68,7 +68,7 @@ Please follow these channels for updates and information:
     },
     {
       icon: TwitterIcon,
-      title: "𝕏",
+      title: "x.com",
       link: "https://x.com/graphql",
       description: "@graphql",
     },
diff --git a/src/pages/learn/_meta.ts b/src/pages/learn/_meta.ts
index 29048f6fac..efcc5f53f6 100644
--- a/src/pages/learn/_meta.ts
+++ b/src/pages/learn/_meta.ts
@@ -25,7 +25,7 @@ export default {
     type: "separator",
     title: "Best Practices",
   },
-  "best-practices": "",
+  "best-practices": "Introduction",
   "thinking-in-graphs": "",
   "serving-over-http": "",
   "file-uploads": "",
diff --git a/src/pages/learn/best-practices.mdx b/src/pages/learn/best-practices.mdx
index 7cf153a6af..4b667581c0 100644
--- a/src/pages/learn/best-practices.mdx
+++ b/src/pages/learn/best-practices.mdx
@@ -7,6 +7,7 @@ The GraphQL specification is intentionally silent on a handful of important issu
 The articles in this section should not be taken as gospel, and in some cases may rightfully be ignored in favor of some other approach. Some articles introduce some of the philosophy developed within Facebook around designing and deploying GraphQL services, while others are more tactical suggestions for solving common problems like serving over HTTP and performing authorization.
 
 <Cards
+  numbered="Lesson"
   items={[
     {
       title: "Thinking in Graphs",
diff --git a/src/pages/learn/index.mdx b/src/pages/learn/index.mdx
index b2187f13d2..c26ab6d58e 100644
--- a/src/pages/learn/index.mdx
+++ b/src/pages/learn/index.mdx
@@ -5,8 +5,9 @@ title: Learn
 import { Button } from '@/app/conf/_design-system/button';
 
 import { NavbarFixed } from '../../components/navbar/navbar-fixed'
-import { TocHero, TocHeroContents } from '../../components/toc-hero';
-import { TeaserSection, LearnHeroStripes } from '../../components/learn-aggregator'
+import { TocHero, TocHeroContents } from '../../components/toc-hero'
+import { TeaserSection } from '../../components/learn-aggregator/teaser-section'
+import { LearnHeroStripes } from '../../components/learn-aggregator/learn-hero-stripes'
 import { pagesBySection } from '../../components/learn-aggregator/learn-pages'
 import { CommonQuestionsSection } from '../../components/learn-aggregator/common-questions'
 import { TrainingCoursesSection } from '../../components/learn-aggregator/training-courses'
@@ -15,7 +16,7 @@ import { LookingForMore } from "../../components/learn-aggregator/looking-for-mo
 <NavbarFixed />
 <TocHero
   className="mb-4 lg:mb-8"
-  heading="Start learning GraphQL"
+  heading="Learn GraphQL"
   text={
     <>
     Get hands-on with the fundamentals of GraphQL. Start with the basics and see how it compares to other technologies.
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2b9620c9ba..16649f5949 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -38,6 +38,7 @@ const config: Config = {
         black: "#1b1b1b",
 
         // #region new design system colors
+        "pri-lightest": "hsl(var(--color-pri-lightest) / <alpha-value>)",
         "pri-lighter": "hsl(var(--color-pri-lighter) / <alpha-value>)",
         "pri-light": "hsl(var(--color-pri-light) / <alpha-value>)",
         "pri-base": "hsl(var(--color-pri-base) / <alpha-value>)",