diff --git a/src/app/conf/_design-system/utils/arrows-move-sideways.tsx b/src/app/conf/_design-system/utils/arrows-move-sideways.tsx
new file mode 100644
index 0000000000..69531ea2c5
--- /dev/null
+++ b/src/app/conf/_design-system/utils/arrows-move-sideways.tsx
@@ -0,0 +1,36 @@
+export function arrowsMoveSideways(event: React.KeyboardEvent<HTMLElement>) {
+  if (
+    event.key !== "ArrowLeft" &&
+    event.key !== "ArrowRight" &&
+    event.key !== "ArrowUp" &&
+    event.key !== "ArrowDown"
+  ) {
+    return
+  }
+
+  let repeat = 1
+
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    const vertical = event.currentTarget.dataset.vertical
+    console.log({ vertical })
+    repeat = vertical ? parseInt(vertical) : 1
+  }
+
+  let current = event.currentTarget
+  for (let i = 0; i < repeat; ++i) {
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      const previousElement = current.previousElementSibling
+      if (previousElement) {
+        current = previousElement as HTMLElement
+      }
+    } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      const nextElement = current.nextElementSibling
+      if (nextElement) {
+        current = nextElement as HTMLElement
+      }
+    }
+  }
+
+  event.preventDefault()
+  current.focus()
+}
diff --git a/src/components/blog-page/blog-card-picture.tsx b/src/components/blog-page/blog-card-picture.tsx
new file mode 100644
index 0000000000..641875b759
--- /dev/null
+++ b/src/components/blog-page/blog-card-picture.tsx
@@ -0,0 +1,355 @@
+import { clsx } from "clsx"
+import { type ReactNode, useEffect, useRef } from "react"
+
+const PIXEL_SIZE = 16
+const MAX_DPR = 2
+const UINT32_MAX = 0xffffffff
+
+interface BlogCardPictureProps {
+  seed: string
+  children?: ReactNode
+  className?: string
+}
+
+type RgbColor = [number, number, number]
+
+interface GradientStop {
+  offset: number
+  color: RgbColor
+}
+
+interface PreparedGradient {
+  cos: number
+  sin: number
+  minProjection: number
+  invProjectionRange: number
+  stops: GradientStop[]
+}
+
+// TODO: Animate nicer on load
+// TODO: Update seeding: The closer the post date the more different the gradient should be?
+// TODO: Think: Should the category colors actually be connected to the gradient, so the tag doesn't ever look jarring?
+export function BlogCardPicture({
+  seed,
+  children,
+  className,
+}: BlogCardPictureProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) {
+      return
+    }
+
+    let frame = 0
+
+    const draw = () => {
+      const rect = container.getBoundingClientRect()
+      const width = Math.max(0, Math.round(rect.width))
+      const height = Math.max(0, Math.round(rect.height))
+
+      if (width === 0 || height === 0) {
+        return
+      }
+
+      const columns = Math.max(1, Math.ceil(width / PIXEL_SIZE))
+      const rows = Math.max(1, Math.ceil(height / PIXEL_SIZE))
+      const dpr = Math.min(
+        typeof window === "undefined" ? 1 : (window.devicePixelRatio ?? 1),
+        MAX_DPR,
+      )
+      const canvasWidth = Math.round(width * dpr)
+      const canvasHeight = Math.round(height * dpr)
+
+      if (canvas.width !== canvasWidth) {
+        canvas.width = canvasWidth
+      }
+      if (canvas.height !== canvasHeight) {
+        canvas.height = canvasHeight
+      }
+
+      const displayWidth = `${width}px`
+      const displayHeight = `${height}px`
+      if (canvas.style.width !== displayWidth) {
+        canvas.style.width = displayWidth
+      }
+      if (canvas.style.height !== displayHeight) {
+        canvas.style.height = displayHeight
+      }
+
+      const context = canvas.getContext("2d")
+      if (!context) {
+        return
+      }
+
+      context.setTransform(1, 0, 0, 1, 0, 0)
+      context.scale(dpr, dpr)
+      context.clearRect(0, 0, width, height)
+      context.imageSmoothingEnabled = false
+
+      const random = createSeededRandom(seed)
+      const angle = random() * Math.PI * 2
+      const gradientStops = buildGradientStops(random)
+      const gradient = prepareGradient({
+        angle,
+        stops: gradientStops,
+        columns,
+        rows,
+      })
+      const jitterPrefix = `${seed}|`
+
+      for (let row = 0; row < rows; row += 1) {
+        for (let column = 0; column < columns; column += 1) {
+          const color = sampleGradientColor({
+            gradient,
+            column,
+            row,
+            jitterPrefix,
+          })
+
+          const x = column * PIXEL_SIZE
+          const y = row * PIXEL_SIZE
+          const cellWidth = Math.min(PIXEL_SIZE, width - x)
+          const cellHeight = Math.min(PIXEL_SIZE, height - y)
+
+          context.fillStyle = toCssColor(color)
+          context.fillRect(x, y, cellWidth, cellHeight)
+        }
+      }
+    }
+
+    const drawWithAnimationFrame = () => {
+      cancelAnimationFrame(frame)
+      frame = window.requestAnimationFrame(draw)
+    }
+
+    drawWithAnimationFrame()
+
+    const handleResize = () => {
+      drawWithAnimationFrame()
+    }
+
+    window.addEventListener("resize", handleResize)
+
+    return () => {
+      cancelAnimationFrame(frame)
+      window.removeEventListener("resize", handleResize)
+    }
+  }, [seed])
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        "relative isolate overflow-hidden bg-neu-50 dark:opacity-90",
+        className,
+      )}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-0 size-full"
+      />
+      {children ? <div className="relative z-10 p-4">{children}</div> : null}
+    </div>
+  )
+}
+
+function createSeededRandom(seed: string) {
+  let state = hashString(seed) || 1
+  return () => {
+    state ^= state << 13
+    state ^= state >>> 17
+    state ^= state << 5
+    state >>>= 0
+    return state / UINT32_MAX
+  }
+}
+
+function prepareGradient({
+  angle,
+  stops,
+  columns,
+  rows,
+}: {
+  angle: number
+  stops: GradientStop[]
+  columns: number
+  rows: number
+}): PreparedGradient {
+  const cos = Math.cos(angle)
+  const sin = Math.sin(angle)
+
+  const corners: Array<[number, number]> = [
+    [0, 0],
+    [columns, 0],
+    [0, rows],
+    [columns, rows],
+  ]
+
+  let minProjection = Infinity
+  let maxProjection = -Infinity
+
+  for (const [x, y] of corners) {
+    const projection = x * cos + y * sin
+    if (projection < minProjection) {
+      minProjection = projection
+    }
+    if (projection > maxProjection) {
+      maxProjection = projection
+    }
+  }
+
+  const range = Math.max(maxProjection - minProjection, 1e-6)
+
+  return {
+    cos,
+    sin,
+    minProjection,
+    invProjectionRange: 1 / range,
+    stops,
+  }
+}
+
+function buildGradientStops(random: () => number): GradientStop[] {
+  const baseHue = random() * 360
+  const stopOffsets = [0, clamp(0.25, 0.75, 0.44 + (random() - 0.5) * 0.22), 1]
+
+  const hues = [
+    normalizeHue(baseHue - 14 + (random() - 0.5) * 10),
+    normalizeHue(baseHue + 10 + (random() - 0.5) * 14),
+    normalizeHue(baseHue + 28 + (random() - 0.5) * 16),
+  ]
+
+  const saturations = [
+    clamp(0.45, 0.65, 0.54 + (random() - 0.5) * 0.08),
+    clamp(0.48, 0.7, 0.58 + (random() - 0.5) * 0.1),
+    clamp(0.42, 0.62, 0.5 + (random() - 0.5) * 0.08),
+  ]
+
+  const lightness = [
+    clamp(0.58, 0.75, 0.68 + (random() - 0.5) * 0.07),
+    clamp(0.52, 0.7, 0.6 + (random() - 0.5) * 0.07),
+    clamp(0.6, 0.78, 0.7 + (random() - 0.5) * 0.07),
+  ]
+
+  return stopOffsets.map((offset, index) => ({
+    offset,
+    color: hslToRgb(hues[index], saturations[index], lightness[index]),
+  }))
+}
+
+function sampleGradientColor({
+  gradient,
+  column,
+  row,
+  jitterPrefix,
+}: {
+  gradient: PreparedGradient
+  column: number
+  row: number
+  jitterPrefix: string
+}): RgbColor {
+  const x = column + 0.5
+  const y = row + 0.5
+
+  const projection = x * gradient.cos + y * gradient.sin
+  const baseT =
+    (projection - gradient.minProjection) * gradient.invProjectionRange
+  const noise = hashString(`${jitterPrefix}${column}:${row}`) / UINT32_MAX
+  const t = clamp(0, 1, baseT + (noise - 0.5) * 0.06)
+
+  return evaluateGradient(gradient.stops, t)
+}
+
+function evaluateGradient(stops: GradientStop[], t: number): RgbColor {
+  if (stops.length === 0) {
+    return [200, 200, 200]
+  }
+
+  if (t <= stops[0].offset) {
+    return stops[0].color
+  }
+
+  for (let index = 1; index < stops.length; index += 1) {
+    const stop = stops[index]
+    const previous = stops[index - 1]
+    if (t <= stop.offset) {
+      const span = Math.max(stop.offset - previous.offset, 1e-6)
+      const amount = (t - previous.offset) / span
+      return mixColors(previous.color, stop.color, amount)
+    }
+  }
+
+  return stops[stops.length - 1].color
+}
+
+function mixColors(
+  [r1, g1, b1]: RgbColor,
+  [r2, g2, b2]: RgbColor,
+  amount: number,
+): RgbColor {
+  return [
+    r1 + (r2 - r1) * amount,
+    g1 + (g2 - g1) * amount,
+    b1 + (b2 - b1) * amount,
+  ]
+}
+
+function toCssColor([r, g, b]: RgbColor) {
+  return `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`
+}
+
+function hslToRgb(h: number, s: number, l: number): RgbColor {
+  const chroma = (1 - Math.abs(2 * l - 1)) * s
+  const huePrime = h / 60
+  const x = chroma * (1 - Math.abs((huePrime % 2) - 1))
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  if (huePrime >= 0 && huePrime < 1) {
+    r = chroma
+    g = x
+  } else if (huePrime >= 1 && huePrime < 2) {
+    r = x
+    g = chroma
+  } else if (huePrime >= 2 && huePrime < 3) {
+    g = chroma
+    b = x
+  } else if (huePrime >= 3 && huePrime < 4) {
+    g = x
+    b = chroma
+  } else if (huePrime >= 4 && huePrime < 5) {
+    r = x
+    b = chroma
+  } else if (huePrime >= 5 && huePrime < 6) {
+    r = chroma
+    b = x
+  }
+
+  const m = l - chroma / 2
+
+  return [(r + m) * 255, (g + m) * 255, (b + m) * 255]
+}
+
+function normalizeHue(hue: number) {
+  return ((hue % 360) + 360) % 360
+}
+
+function clamp(min: number, max: number, value: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function hashString(value: string) {
+  let hash = 2166136261
+  for (let index = 0; index < value.length; index += 1) {
+    hash ^= value.charCodeAt(index)
+    hash = Math.imul(hash, 16777619)
+  }
+  return hash >>> 0
+}
diff --git a/src/components/blog-page/blog-card.tsx b/src/components/blog-page/blog-card.tsx
new file mode 100644
index 0000000000..28f853c7e1
--- /dev/null
+++ b/src/components/blog-page/blog-card.tsx
@@ -0,0 +1,100 @@
+import { clsx } from "clsx"
+import NextLink from "next/link"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { arrowsMoveSideways } from "@/app/conf/_design-system/utils/arrows-move-sideways"
+
+import { BlogTags } from "./blog-tags"
+import { BlogCardPicture } from "./blog-card-picture"
+
+export interface BlogCardProps extends React.HTMLAttributes<HTMLElement> {
+  frontMatter: {
+    title: string
+    date: Date
+    tags: string[]
+    byline: string
+  }
+  route: string
+}
+
+export function BlogCard({
+  route,
+  frontMatter,
+  className,
+  ...rest
+}: BlogCardProps) {
+  return (
+    <NextLink
+      href={route}
+      onKeyDown={arrowsMoveSideways}
+      data-vertical="3"
+      className={clsx(
+        className,
+        "relative flex flex-col bg-neu-0 ring-neu-300 ring-offset-[3px] ring-offset-neu-0 hover:ring-1 dark:ring-neu-100",
+      )}
+      {...rest}
+    >
+      <BlogCardPicture
+        seed={frontMatter.title}
+        // this weird selector sets background to tags so they look better on top of the picture
+        className="aspect-[2.23] [&>*>*>*]:bg-neu-0"
+      >
+        <BlogTags tags={frontMatter.tags} />
+      </BlogCardPicture>
+      <div className="flex grow flex-col border border-neu-200 dark:border-neu-50">
+        <div className="typography-body-lg grow text-pretty p-4">
+          {frontMatter.title}
+        </div>
+        <footer className="mt-auto flex items-end justify-between">
+          <BlogCardFooterContent
+            byline={frontMatter.byline}
+            date={frontMatter.date}
+            className="min-h-[73px] p-4"
+          />
+          <BlogCardArrow className="translate-x-px translate-y-px border-l border-t border-neu-200 p-4 dark:border-neu-50" />
+        </footer>
+      </div>
+    </NextLink>
+  )
+}
+
+export function BlogCardArrow({ className }: { className?: string }) {
+  return (
+    <div className={className}>
+      <ArrowDown className="-rotate-90" />
+    </div>
+  )
+}
+
+export function BlogCardFooterContent({
+  byline,
+  date,
+  className,
+}: {
+  byline: string
+  date: Date
+  className?: string
+}) {
+  return (
+    <span
+      className={clsx(
+        "typography-menu flex flex-col justify-center gap-2",
+        className,
+      )}
+    >
+      <span>{byline}</span>
+      <time
+        dateTime={date.toISOString()}
+        className="text-neu-700 dark:text-neu-400"
+      >
+        {date.toLocaleDateString("en", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })}
+      </time>
+    </span>
+  )
+}
+
+export { BlogCardPicture } from "./blog-card-picture"
diff --git a/src/components/blog-page/blog-tag-colors.tsx b/src/components/blog-page/blog-tag-colors.tsx
new file mode 100644
index 0000000000..0a69f779d6
--- /dev/null
+++ b/src/components/blog-page/blog-tag-colors.tsx
@@ -0,0 +1,9 @@
+export const blogTagColors: Record<string, string> = {
+  newsletter: "#FFCCEF",
+  announcements: "#F80",
+  blog: "#012FFF",
+  foundation: "#5800FF",
+  spec: "#00C6AC",
+  grants: "#84BD01",
+  "in-the-news": "#3F3A3D",
+}
diff --git a/src/components/blog-page/blog-tags.tsx b/src/components/blog-page/blog-tags.tsx
new file mode 100644
index 0000000000..99d4251a57
--- /dev/null
+++ b/src/components/blog-page/blog-tags.tsx
@@ -0,0 +1,21 @@
+import { Tag } from "@/app/conf/_design-system/tag"
+
+import { blogTagColors } from "./blog-tag-colors"
+
+export function BlogTags({ tags }: { tags: string[] }) {
+  return (
+    <div className="flex gap-2">
+      {tags.map(tag => {
+        const color = blogTagColors[tag]
+        if (!color) {
+          throw new Error(`No color found for tag: ${tag}`)
+        }
+        return (
+          <Tag color={color} key={tag}>
+            {tag.replaceAll("-", " ")}
+          </Tag>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/components/blog-page/blur-bean.webp b/src/components/blog-page/blur-bean.webp
new file mode 100644
index 0000000000..26bccab68d
Binary files /dev/null and b/src/components/blog-page/blur-bean.webp differ
diff --git a/src/components/blog-page/featured-blog-posts.tsx b/src/components/blog-page/featured-blog-posts.tsx
new file mode 100644
index 0000000000..3fd0060973
--- /dev/null
+++ b/src/components/blog-page/featured-blog-posts.tsx
@@ -0,0 +1,61 @@
+import { clsx } from "clsx"
+import NextLink from "next/link"
+
+import { BlogCard, BlogCardArrow, BlogCardFooterContent } from "./blog-card"
+import { BlogCardPicture } from "./blog-card-picture"
+import { BlogMdxContent } from "./mdx-types"
+import { BlogTags } from "./blog-tags"
+
+export interface FeaturedBlogPostsProps
+  extends React.HTMLAttributes<HTMLElement> {
+  blogs: BlogMdxContent[]
+}
+
+export function FeaturedBlogPosts({
+  className,
+  blogs,
+  ...props
+}: FeaturedBlogPostsProps) {
+  const [firstFeatured, ...nextThree] = blogs
+    .filter(blog => blog.frontMatter.featured)
+    .sort((a, b) => b.frontMatter.date.getTime() - a.frontMatter.date.getTime())
+    .slice(0, 4)
+
+  return (
+    <section
+      className={clsx(
+        className,
+        "border border-neu-0 bg-neu-0/30 p-4 backdrop-blur-xl dark:bg-neu-0/20 lg:p-12",
+      )}
+      {...props}
+    >
+      <NextLink
+        href={firstFeatured.route}
+        className="-m-2 flex min-h-[300px] gap-12 p-2 ring-neu-0 hover:bg-neu-0/20 hover:ring-1 dark:ring-neu-100 [&:not(:hover)]:transition"
+      >
+        <BlogCardPicture
+          seed={firstFeatured.frontMatter.title}
+          className="aspect-[2.23] w-2/5 shrink-0 max-lg:hidden"
+        />
+        <div className="flex flex-col">
+          <BlogTags tags={firstFeatured.frontMatter.tags} />
+          <div className="typography-h2 mt-6">
+            {firstFeatured.frontMatter.title}
+          </div>
+          <footer className="mt-auto flex items-end justify-between">
+            <BlogCardFooterContent
+              byline={firstFeatured.frontMatter.byline}
+              date={firstFeatured.frontMatter.date}
+            />
+            <BlogCardArrow className="border border-neu-300 p-4 dark:border-neu-50" />
+          </footer>
+        </div>
+      </NextLink>
+      <div className="mt-4 grid grid-cols-3 flex-col gap-2 max-md:flex sm:mt-8 sm:gap-4 lg:mt-16 lg:gap-6">
+        {nextThree.map(post => (
+          <BlogCard key={post.route} {...post} />
+        ))}
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/blog-page/index.tsx b/src/components/blog-page/index.tsx
new file mode 100644
index 0000000000..ce0fa42a7d
--- /dev/null
+++ b/src/components/blog-page/index.tsx
@@ -0,0 +1,99 @@
+import NextLink from "next/link"
+
+import { Tag } from "@/app/conf/_design-system/tag"
+import { arrowsMoveSideways } from "@/app/conf/_design-system/utils/arrows-move-sideways"
+
+import { blogTagColors } from "./blog-tag-colors"
+import { BlogCard } from "./blog-card"
+import { LookingForMore } from "./looking-for-more"
+import { BlogMdxContent } from "./mdx-types"
+import { FeaturedBlogPosts } from "./featured-blog-posts"
+import { StripesDecoration } from "../../app/conf/_design-system/stripes-decoration"
+
+const mask = `url(${new URL("./blur-bean.webp", import.meta.url).href})`
+
+export interface BlogPageProps {
+  tags: Record<string, number>
+  blogs: BlogMdxContent[]
+  currentTag: string
+}
+
+export function BlogPage({ tags, blogs, currentTag }: BlogPageProps) {
+  return (
+    <main className="gql-all-anchors-focusable bg-neu-0">
+      <div className="relative top-[calc(var(--nextra-navbar-height)*-1)] bg-gradient-to-b from-sec-base to-neu-0 pt-[var(--nextra-navbar-height)] dark:from-sec-darker">
+        <Stripes />
+        <header className="gql-container gql-section lg:pt-24">
+          <h1 className="typography-h1 text-center">The GraphQL Blog</h1>
+          <p className="typography-body-sm mt-4 text-center lg:mt-8">
+            Insights, updates and best practices from across the GraphQL
+            community. Stay connected with the ideas and innovations shaping the
+            GraphQL ecosystem.
+          </p>
+          <FeaturedBlogPosts blogs={blogs} className="mt-24 max-md:hidden" />
+        </header>
+      </div>
+      <div className="gql-container">
+        <div className="gql-section">
+          <section className="flex items-end justify-between gap-2">
+            <h2 className="typography-h2 capitalize">
+              {currentTag || "All Posts"}
+            </h2>
+            <section>
+              <h3 className="typography-menu">Categories</h3>
+              <ul className="mt-4 flex flex-wrap gap-2">
+                {Object.entries(tags)
+                  .sort((a, b) => b[1] - a[1])
+                  .map(([tag, count], i) => (
+                    <NextLink
+                      key={tag}
+                      href={currentTag === tag ? "/blog" : `/tags/${tag}`}
+                      data-active={currentTag === tag ? "" : undefined}
+                      tabIndex={i === 0 ? 0 : -1}
+                      className="-m-1 flex p-1 ring-inset ring-neu-400 transition-opacity duration-75 hover:ring focus:!outline-offset-0 dark:ring-neu-50 [:has(>:hover)>&:not(:hover)]:opacity-70"
+                      onKeyDown={arrowsMoveSideways}
+                    >
+                      <Tag color={blogTagColors[tag]}>
+                        {tag.replaceAll("-", " ")} ({count})
+                      </Tag>
+                    </NextLink>
+                  ))}
+              </ul>
+            </section>
+          </section>
+          <section className="mt-4 grid grid-cols-[repeat(auto-fit,minmax(368px,1fr))] gap-4 md:mt-8 lg:mt-16 lg:gap-6">
+            {blogs.map(
+              page =>
+                (!currentTag || page.frontMatter.tags.includes(currentTag)) && (
+                  <BlogCard key={page.route} {...page} />
+                ),
+            )}
+          </section>
+        </div>
+        <LookingForMore />
+      </div>
+    </main>
+  )
+}
+
+function Stripes() {
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+        maskPosition: "center",
+        WebkitMaskPosition: "center",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(0deg,_hsl(var(--color-sec-dark))_0%,_hsl(var(--color-sec-light))_100%)] dark:bg-[linear-gradient(0deg,_hsl(var(--color-sec-dark))_0%,_hsl(var(--color-sec-darker))_100%)]"
+        oddClassName="bg-[linear-gradient(0deg,_hsl(var(--color-sec-lighter))_0%,_hsl(79_81%_40%/0)_100%)] dark:bg-[linear-gradient(0deg,_hsl(var(--color-sec-darker))_0%,_rgba(133,185,19,0.00)_100%)]"
+      />
+    </div>
+  )
+}
diff --git a/src/components/blog-page/looking-for-more.tsx b/src/components/blog-page/looking-for-more.tsx
new file mode 100644
index 0000000000..2441ade4e7
--- /dev/null
+++ b/src/components/blog-page/looking-for-more.tsx
@@ -0,0 +1,36 @@
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+export function LookingForMore() {
+  return (
+    <section className="gql-section max-sm:px-0 lg:pb-16 lg:max-xl:px-0 xl:pb-24">
+      <div className="gql-container typography-body-lg flex bg-pri-dark text-white dark:bg-pri-darker max-lg:flex-col">
+        <div className="border-pri-light p-6 max-lg:border-b lg:border-r lg:p-16">
+          <h2 className="typography-h2 text-balance">Looking for more?</h2>
+          <p className="mt-8">
+            Explore learning guides and best practices — or browse for tools,
+            libraries and other resources.
+          </p>
+        </div>
+        <div className="flex flex-col *:flex-1">
+          <Anchor
+            href="/learn"
+            className="flex items-center justify-between gap-4 whitespace-pre border-b border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Learn
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+          <Anchor
+            // TODO: Change to /resources when the Resources landing is implemented
+            href="/community/resources/official-channels"
+            className="flex items-center justify-between gap-4 whitespace-pre border-pri-light px-6 py-8 hover:bg-white/10 lg:h-1/3 lg:px-8 lg:pr-12 xl:gap-6"
+          >
+            Resources
+            <ArrowDownIcon className="size-10 -rotate-90 text-pri-light" />
+          </Anchor>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/src/components/blog-page/mdx-types.tsx b/src/components/blog-page/mdx-types.tsx
new file mode 100644
index 0000000000..830ee9722d
--- /dev/null
+++ b/src/components/blog-page/mdx-types.tsx
@@ -0,0 +1,10 @@
+export interface BlogMdxContent {
+  route: string
+  frontMatter: {
+    title: string
+    tags: string[]
+    byline: string
+    date: Date
+    featured: boolean
+  }
+}
diff --git a/src/components/index-page/data-colocation/index.tsx b/src/components/index-page/data-colocation/index.tsx
index 1f54f51de2..620399412d 100644
--- a/src/components/index-page/data-colocation/index.tsx
+++ b/src/components/index-page/data-colocation/index.tsx
@@ -150,7 +150,7 @@ export function DataColocation() {
   return (
     <section
       ref={sectionRef}
-      className="gql-container gql-section flex justify-between gap-4 max-xl:flex-wrap sm:max-xl:gap-y-8 xl:p-24"
+      className="gql-container gql-section flex justify-between gap-4 max-xl:flex-wrap sm:max-xl:gap-y-8 xl:p-24 3xl:px-60"
       onMouseOver={markSector}
       onMouseOut={unmarkSector}
       onPointerDown={markSector}
diff --git a/src/components/index-page/use-cases/index.tsx b/src/components/index-page/use-cases/index.tsx
index bac12e6e8b..5cacf787cf 100644
--- a/src/components/index-page/use-cases/index.tsx
+++ b/src/components/index-page/use-cases/index.tsx
@@ -6,6 +6,7 @@ import { useState, Fragment, ReactNode } from "react"
 import { Button } from "@/app/conf/_design-system/button"
 import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { arrowsMoveSideways } from "@/app/conf/_design-system/utils/arrows-move-sideways"
 
 import blurBean from "./blur-bean.webp"
 
@@ -190,19 +191,3 @@ function Stripes() {
     </div>
   )
 }
-
-function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
-  if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
-    const previousElement = event.currentTarget.previousElementSibling
-    if (previousElement) {
-      event.preventDefault()
-      ;(previousElement as HTMLElement).focus()
-    }
-  } else if (event.key === "ArrowRight" || event.key === "ArrowDown") {
-    const nextElement = event.currentTarget.nextElementSibling
-    if (nextElement) {
-      event.preventDefault()
-      ;(nextElement as HTMLElement).focus()
-    }
-  }
-}
diff --git a/src/pages/blog.mdx b/src/pages/blog.mdx
index df349e7b40..546f70cd55 100644
--- a/src/pages/blog.mdx
+++ b/src/pages/blog.mdx
@@ -4,6 +4,7 @@ import { Tag, Card } from "@/components"
 import NextLink from "next/link"
 import { useRouter } from "next/router"
 import { clsx } from "clsx"
+import { BlogPage } from "@/components/blog-page"
 
 export default function Blog() {
   const { asPath } = useRouter()
@@ -22,68 +23,10 @@ export default function Blog() {
       acc[tag] += 1
       return acc
     }, {})
-  //
-  const tagList = (
-    <div className="flex gap-3 md:gap-5 mt-6 flex-wrap roboto-mono">
-      {Object.entries(tags)
-        .sort((a, b) => b[1] - a[1])
-        .map(([tag, count]) => (
-          <NextLink
-            key={tag}
-            href={currentTag === tag ? "/blog" : `/tags/${tag}`}
-            data-active={currentTag === tag ? "" : undefined}
-            className={clsx("tag [&[data-active]]:bg-primary capitalize")}
-          >
-            {tag.replaceAll("-", " ")} ({count})
-          </NextLink>
-        ))}
-    </div>
-  )
-  //
-  const blogList = blogs.map(
-    page =>
-      (!currentTag || page.frontMatter.tags.includes(currentTag)) && (
-        <Card
-          key={page.route}
-          as={Link}
-          href={page.route}
-          className="flex flex-col"
-        >
-          <div className="gap-2 flex mb-7">
-            {page.frontMatter.tags.map(tag => (
-              <Tag key={tag}>{tag.replaceAll("-", " ")}</Tag>
-            ))}
-          </div>
-          <div className="font-extrabold text-xl md:text-3xl text-balance">
-            {page.frontMatter.title}
-          </div>
-          <div className="opacity-50 text-sm my-7 flex gap-2">
-            <time dateTime={page.frontMatter.date.toISOString()}>
-              {page.frontMatter.date.toLocaleDateString("en", {
-                month: "long",
-                day: "numeric",
-                year: "numeric",
-              })}
-            </time>
-            <span className="border-r border-gray-500" />
-            <span>by {page.frontMatter.byline}</span>
-          </div>
-          <span className="text-primary block font-bold mt-auto">
-            Read more →
-          </span>
-        </Card>
-      ),
-  )
-  return (
-    <>
-      <div className="py-10 md:py-20 container">
-        <h1 className="text-4xl md:text-7xl font-extrabold mb-10">Blog</h1>
-        <h3 className="text-2xl font-bold">Categories</h3>
-        {tagList}
-      </div>
-      <div className="container grid md:grid-cols-2 gap-7 pb-10">
-        {blogList}
-      </div>
-    </>
-  )
+
+  return <BlogPage
+    tags={tags}
+    currentTag={currentTag}
+    blogs={blogs}
+  />
 }
diff --git a/src/pages/blog/2025-06-20-graphql-js-org.md b/src/pages/blog/2025-06-20-graphql-js-org.md
index f989081ffa..a8983f3eaa 100644
--- a/src/pages/blog/2025-06-20-graphql-js-org.md
+++ b/src/pages/blog/2025-06-20-graphql-js-org.md
@@ -1,8 +1,9 @@
 ---
-title: 🆕 Announcing graphql-js.org!
+title: Announcing graphql-js.org!
 tags: ["announcements"]
 date: 2025-06-20
 byline: GraphQL-js Maintainers
+featured: true
 ---
 
 Dear Community,
diff --git a/src/pages/blog/2025-09-04-multioption-inputs-with-oneof/index.mdx b/src/pages/blog/2025-09-04-multioption-inputs-with-oneof/index.mdx
index ae7c552059..7c2728d576 100644
--- a/src/pages/blog/2025-09-04-multioption-inputs-with-oneof/index.mdx
+++ b/src/pages/blog/2025-09-04-multioption-inputs-with-oneof/index.mdx
@@ -3,6 +3,7 @@ title: Safer Multi-option Inputs with `@oneOf`
 tags: [announcements, spec]
 date: 2025-09-04
 byline: Benjie Gillam
+featured: true
 ---
 
 We’re excited to announce **[OneOf Input
diff --git a/src/pages/blog/2025-09-08-announcing-graphql-ambassadors/index.md b/src/pages/blog/2025-09-08-announcing-graphql-ambassadors/index.md
index 286a9e5157..7fc2074459 100644
--- a/src/pages/blog/2025-09-08-announcing-graphql-ambassadors/index.md
+++ b/src/pages/blog/2025-09-08-announcing-graphql-ambassadors/index.md
@@ -3,6 +3,7 @@ title: "Announcing Our GraphQL Ambassadors"
 tags: ["blog"]
 date: 2025-09-08
 byline: Jem Gillam and Jory Burson
+featured: true
 ---
 
 The GraphQL Foundation is thrilled to announce the launch of the GraphQL Ambassadors Program — a new initiative to recognize and support community leaders who are helping to grow the GraphQL ecosystem worldwide.
diff --git a/src/pages/blog/2025-09-08-september-edition.md b/src/pages/blog/2025-09-08-september-edition.md
index f28e81a1d6..643ef6ddb4 100644
--- a/src/pages/blog/2025-09-08-september-edition.md
+++ b/src/pages/blog/2025-09-08-september-edition.md
@@ -3,6 +3,7 @@ title: "Announcing the September 2025 Edition of the GraphQL Specification"
 tags: ["spec"]
 date: 2025-09-08
 byline: Lee Byron
+featured: true
 ---
 
 It’s here: the [September 2025 edition of the GraphQL specification](https://spec.graphql.org/September2025/)!