diff --git a/app/[locale]/collectibles/_components/Collectibles/index.tsx b/app/[locale]/collectibles/_components/Collectibles/index.tsx
new file mode 100644
index 00000000000..8573de44612
--- /dev/null
+++ b/app/[locale]/collectibles/_components/Collectibles/index.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import React from "react"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+
+import WalletProviders from "@/components/WalletProviders"
+
+import type { Badge } from "../../types"
+import CollectiblesContent from "../CollectiblesContent/lazy"
+
+export type CollectiblesPageProps = {
+  badges: Badge[]
+}
+
+const queryClient = new QueryClient()
+
+const CollectiblesPage = ({ badges }: CollectiblesPageProps) => (
+  <QueryClientProvider client={queryClient}>
+    <WalletProviders>
+      <CollectiblesContent badges={badges} />
+    </WalletProviders>
+  </QueryClientProvider>
+)
+
+export default CollectiblesPage
diff --git a/app/[locale]/collectibles/_components/Collectibles/lazy.tsx b/app/[locale]/collectibles/_components/Collectibles/lazy.tsx
new file mode 100644
index 00000000000..c960f08e647
--- /dev/null
+++ b/app/[locale]/collectibles/_components/Collectibles/lazy.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })
diff --git a/app/[locale]/collectibles/_components/Collectibles/loading.tsx b/app/[locale]/collectibles/_components/Collectibles/loading.tsx
new file mode 100644
index 00000000000..c3579330eb6
--- /dev/null
+++ b/app/[locale]/collectibles/_components/Collectibles/loading.tsx
@@ -0,0 +1,10 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="flex w-full flex-col gap-x-8 gap-y-6 xl:flex-row">
+    <Skeleton className="h-80 w-full rounded-2xl xl:sticky xl:top-28 xl:max-w-xs" />
+    <Skeleton className="h-[75vh] w-full rounded-2xl" />
+  </div>
+)
+
+export default Loading
diff --git a/app/[locale]/collectibles/_components/CollectiblesConnectButton/index.tsx b/app/[locale]/collectibles/_components/CollectiblesConnectButton/index.tsx
new file mode 100644
index 00000000000..c0cf25fecf0
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesConnectButton/index.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import { ConnectButton } from "@rainbow-me/rainbowkit"
+
+import { Button } from "@/components/ui/buttons/Button"
+
+import { useTranslation } from "@/hooks/useTranslation"
+
+const CollectiblesConnectButton = () => {
+  const { t } = useTranslation("page-collectibles")
+  return (
+    <ConnectButton.Custom>
+      {({ account, chain, openConnectModal, mounted }) => {
+        const connected = mounted && account && chain
+
+        return (
+          <>
+            {(() => {
+              if (!connected) {
+                return (
+                  <Button onClick={openConnectModal} variant="outline">
+                    {t("page-collectibles-connect-wallet")}
+                  </Button>
+                )
+              }
+
+              return <ConnectButton showBalance={false} />
+            })()}
+          </>
+        )
+      }}
+    </ConnectButton.Custom>
+  )
+}
+
+export default CollectiblesConnectButton
diff --git a/app/[locale]/collectibles/_components/CollectiblesConnectButton/lazy.tsx b/app/[locale]/collectibles/_components/CollectiblesConnectButton/lazy.tsx
new file mode 100644
index 00000000000..c960f08e647
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesConnectButton/lazy.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })
diff --git a/app/[locale]/collectibles/_components/CollectiblesConnectButton/loading.tsx b/app/[locale]/collectibles/_components/CollectiblesConnectButton/loading.tsx
new file mode 100644
index 00000000000..e2c8ca622c3
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesConnectButton/loading.tsx
@@ -0,0 +1,5 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => <Skeleton className="h-10 w-full" />
+
+export default Loading
diff --git a/app/[locale]/collectibles/_components/CollectiblesContent/index.tsx b/app/[locale]/collectibles/_components/CollectiblesContent/index.tsx
new file mode 100644
index 00000000000..6cf2fea3595
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesContent/index.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import { useMemo } from "react"
+import { useIsMounted } from "usehooks-ts"
+import { useAccount } from "wagmi"
+import { useQuery } from "@tanstack/react-query"
+
+import { Image } from "@/components/Image"
+import { Skeleton } from "@/components/ui/skeleton"
+
+import { cn } from "@/lib/utils/cn"
+
+import { COLLECTIBLES_BASE_URL } from "../../constants"
+import type { Badge } from "../../types"
+import { type CollectiblesPageProps } from "../Collectibles"
+import CollectiblesConnectButton from "../CollectiblesConnectButton/lazy"
+import CollectiblesCurrentYear from "../CollectiblesCurrentYear"
+import CollectiblesPreviousYears from "../CollectiblesPreviousYears"
+import CollectiblesProgress from "../CollectiblesProgress/lazy"
+
+import useTranslation from "@/hooks/useTranslation"
+import alreadyContributorImg from "@/public/images/10-year-anniversary/adoption-1.png"
+
+export type BadgeWithOwned = Badge & {
+  owned: boolean
+}
+
+const ADDRESS_STATS_API = `${COLLECTIBLES_BASE_URL}/api/stats/`
+
+const CollectiblesContent = ({ badges }: CollectiblesPageProps) => {
+  const { t } = useTranslation("page-collectibles")
+
+  const currentYear = new Date().getFullYear().toString()
+
+  const steps = [
+    {
+      title: t("page-collectibles-how-step1-title"),
+      description: t("page-collectibles-how-step1-desc"),
+      color: "text-accent-a",
+    },
+    {
+      title: t("page-collectibles-how-step2-title"),
+      description: t("page-collectibles-how-step2-desc"),
+      color: "text-accent-b",
+    },
+    {
+      title: t("page-collectibles-how-step3-title"),
+      description: t("page-collectibles-how-step3-desc"),
+      color: "text-accent-c",
+    },
+  ]
+
+  const isMounted = useIsMounted()
+  const { address, isConnected } = useAccount()
+
+  const {
+    data: addressBadges = [],
+    error,
+    isLoading,
+  } = useQuery({
+    queryKey: ["addressBadges", address],
+    queryFn: async (): Promise<Badge[]> => {
+      if (!address) return []
+      const response = await fetch(`${ADDRESS_STATS_API}${address}`)
+      if (!response.ok) {
+        throw new Error("Failed to fetch address badges")
+      }
+      return response.json()
+    },
+    enabled: !!address,
+  })
+
+  const badgesWithOwned = useMemo((): BadgeWithOwned[] => {
+    return badges.map((badge) => {
+      const addressBadge = addressBadges.find((b) => b.id === badge.id)
+      return {
+        ...badge,
+        owned: addressBadge ? true : false,
+      }
+    })
+  }, [badges, addressBadges])
+
+  return (
+    <div className="flex flex-col gap-8 xl:flex-row">
+      {/* Already a contributor? section */}
+      <div className="flex h-fit w-full flex-col gap-y-4 rounded-2xl border border-accent-a/5 bg-gradient-to-b from-accent-a/5 to-accent-a/10 px-6 py-6 xl:sticky xl:top-28 xl:max-w-xs dark:from-accent-a/10 dark:to-accent-a/20">
+        <Image
+          src={alreadyContributorImg}
+          alt={t("page-collectibles-contributor-img-alt")}
+          className="h-32 w-32 object-cover"
+          sizes="128px"
+        />
+        <div>
+          <h3 className="text-lg">{t("page-collectibles-already-title")}</h3>
+          <p className="text-body-medium">
+            {t("page-collectibles-already-desc")}
+          </p>
+        </div>
+
+        <CollectiblesConnectButton />
+
+        {isConnected && !isLoading && !error && (
+          <CollectiblesProgress badges={badgesWithOwned} />
+        )}
+        {isLoading && (
+          <div className="flex w-full flex-col gap-y-4">
+            <Skeleton className="h-10 w-full rounded-2xl" />
+            <Skeleton className="h-10 w-full rounded-2xl" />
+          </div>
+        )}
+        {error && (
+          <div className="text-body-medium text-red-500">
+            Error fetching address badges
+          </div>
+        )}
+      </div>
+
+      {/* How it works section */}
+      <div className="flex-1 space-y-8">
+        <section className="mx-auto space-y-6 border-b p-2 pb-6">
+          <h2 className="text-4xl">{t("page-collectibles-how-title")}</h2>
+          <div className="flex flex-col justify-center gap-8 py-4 md:flex-row md:items-center md:gap-12">
+            {steps.map((step, idx) => (
+              <div
+                key={step.title}
+                className="flex w-full flex-1 flex-row items-center gap-4 max-md:max-w-xs"
+              >
+                <div
+                  className={cn(
+                    "flex size-16 shrink-0 items-center justify-center rounded-full border text-2xl font-bold shadow-2xl xl:size-20",
+                    step.color
+                  )}
+                >
+                  {idx + 1}
+                </div>
+                <div className="space-y-1 text-lg">
+                  <div className="font-bold">{step.title}</div>
+                  <div>{step.description}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <CollectiblesCurrentYear
+          badges={badgesWithOwned.filter(
+            (badge) => String(badge.year) === currentYear
+          )}
+          address={address}
+        />
+
+        <CollectiblesPreviousYears
+          badges={isMounted() && isConnected ? addressBadges : badges}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default CollectiblesContent
diff --git a/app/[locale]/collectibles/_components/CollectiblesContent/lazy.tsx b/app/[locale]/collectibles/_components/CollectiblesContent/lazy.tsx
new file mode 100644
index 00000000000..83168693259
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesContent/lazy.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "../Collectibles/loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })
diff --git a/app/[locale]/collectibles/_components/CollectiblesCurrentYear.tsx b/app/[locale]/collectibles/_components/CollectiblesCurrentYear.tsx
new file mode 100644
index 00000000000..2a41ab0a401
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesCurrentYear.tsx
@@ -0,0 +1,546 @@
+"use client"
+
+import React from "react"
+import {
+  CircleCheckIcon,
+  LanguagesIcon,
+  MessageCircleMoreIcon,
+  PencilRulerIcon,
+  Zap,
+} from "lucide-react"
+
+import { ChildOnlyProp } from "@/lib/types"
+
+import { Image, ImageProps } from "@/components/Image"
+import Translation from "@/components/Translation"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import { Card } from "@/components/ui/card"
+import Link, { ExternalLinkIcon, LinkProps } from "@/components/ui/Link"
+import {
+  ListItem,
+  ListProps,
+  OrderedList,
+  UnorderedList,
+} from "@/components/ui/list"
+
+import { cn } from "@/lib/utils/cn"
+
+import { BadgeWithOwned } from "./CollectiblesContent"
+
+import useTranslation from "@/hooks/useTranslation"
+
+const HighlightCardGrid = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid grid-cols-1 gap-6 md:grid-cols-2", className)}
+    {...props}
+  />
+)
+
+const HighlightCard = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <Card
+    className={cn(
+      "space-between flex flex-col overflow-hidden border border-background-highlight",
+      className
+    )}
+    {...props}
+  />
+)
+
+type HighlightCardContentProps = Pick<
+  React.HTMLAttributes<HTMLDivElement>,
+  "children" | "className"
+> &
+  Pick<LinkProps, "href"> &
+  Pick<ImageProps, "src" | "alt">
+
+const HighlightCardBody = ({
+  href,
+  src,
+  alt,
+  className,
+  children,
+}: HighlightCardContentProps) => (
+  <div className={cn("flex flex-1 gap-4 p-4 ring", className)}>
+    <Link href={href} hideArrow className="group">
+      <Image
+        src={src}
+        width={500}
+        height={500}
+        alt={alt}
+        sizes="160px"
+        className="w-32 transition-transform group-hover:scale-105 group-hover:transition-transform md:w-40"
+      />
+    </Link>
+    <div className="w-full">{children}</div>
+  </div>
+)
+
+type HighlightCardFooterProps = React.HTMLAttributes<HTMLDivElement> &
+  Pick<LinkProps, "href">
+
+const HighlightCardFooter = ({
+  className,
+  href,
+  children,
+  ...props
+}: HighlightCardFooterProps) => (
+  <div
+    className={cn(
+      "flex items-center gap-1 bg-background-highlight px-6 py-2",
+      className
+    )}
+    {...props}
+  >
+    <Zap className="size-4 fill-primary text-primary" />
+    <Link href={href} className="text-sm font-bold no-underline">
+      {children}
+    </Link>
+  </div>
+)
+
+const CheckList = ({ className, ...props }: ListProps) => (
+  <UnorderedList
+    className={cn(
+      "m-0 my-2 list-none space-y-2 text-xs text-body-medium",
+      className
+    )}
+    {...props}
+  />
+)
+
+type CheckItemProps = ChildOnlyProp & {
+  owned?: boolean
+}
+
+const CheckItem = ({ children, owned }: CheckItemProps) => (
+  <ListItem className="mb-0 flex items-center gap-2">
+    <CircleCheckIcon
+      className={cn("size-4 text-body-medium", owned && "text-success")}
+    />
+    {children}
+  </ListItem>
+)
+
+type CollectiblesCurrentYearProps = {
+  badges: BadgeWithOwned[]
+  address?: `0x${string}`
+}
+
+const CollectiblesCurrentYear = ({
+  badges,
+  address,
+}: CollectiblesCurrentYearProps) => {
+  const { t } = useTranslation("page-collectibles")
+
+  const socialBadges = React.useMemo(
+    () => badges.filter((b) => b.category === "Events/Calls"),
+    [badges]
+  )
+  const developerBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) => b.category === "Github" && b.name.startsWith("1 PR merged")
+      ),
+    [badges]
+  )
+  const developer5Badge = React.useMemo(
+    () =>
+      badges.find(
+        (b) => b.category === "Github" && b.name.startsWith("5 PRs merged")
+      ),
+    [badges]
+  )
+  const developer10Badge = React.useMemo(
+    () =>
+      badges.find(
+        (b) => b.category === "Github" && b.name.startsWith("10 PRs merged")
+      ),
+    [badges]
+  )
+  const writingBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Github" && b.name.startsWith("Content contributor")
+      ),
+    [badges]
+  )
+  const designBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Design" && b.name.startsWith("Design contributor")
+      ),
+    [badges]
+  )
+  const userTestingBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) => b.category === "Design" && b.name.startsWith("User testing")
+      ),
+    [badges]
+  )
+  const gitpoapBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) => b.category === "Github" && b.name.startsWith("GitPOAP")
+      ),
+    [badges]
+  )
+  const translationBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Translation" &&
+          b.name.startsWith("250 words translated")
+      ),
+    [badges]
+  )
+  const translation1kBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Translation" &&
+          b.name.startsWith("1,000 words translated")
+      ),
+    [badges]
+  )
+  const translation10kBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Translation" &&
+          b.name.startsWith("10,000 words translated")
+      ),
+    [badges]
+  )
+  const translation50kBadge = React.useMemo(
+    () =>
+      badges.find(
+        (b) =>
+          b.category === "Translation" &&
+          b.name.startsWith("50,000 words translated")
+      ),
+    [badges]
+  )
+
+  return (
+    <section className="mx-auto space-y-8 p-2">
+      <h2 className="sr-only">{t("page-collectibles-current-year-title")}</h2>
+      {/* Custom Code & Content block */}
+      <div>
+        <div className="flex items-center gap-2">
+          <PencilRulerIcon className="h-6 w-auto" />
+          <h3 className="text-2xl">
+            {t("page-collectibles-code-content-title")}
+          </h3>
+        </div>
+        <p className="mt-2">{t("page-collectibles-code-content-desc")}</p>
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1" className="mt-4">
+            <AccordionTrigger className="w-full justify-start !border-none !px-0 py-2 font-bold hover:bg-transparent [&[data-state=open]]:bg-transparent">
+              {t("page-collectibles-instructions-label")}
+            </AccordionTrigger>
+            <AccordionContent className="text-base">
+              <OrderedList className="mb-0 ms-3">
+                <ListItem>
+                  <Translation
+                    id="page-collectibles-code-content-instructions-1"
+                    ns="page-collectibles"
+                  />
+                </ListItem>
+                <ListItem>
+                  {t("page-collectibles-code-content-instructions-2")}
+                </ListItem>
+                <ListItem className="mb-0">
+                  {t("page-collectibles-code-content-instructions-3")}
+                </ListItem>
+              </OrderedList>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <HighlightCardGrid className="mt-4">
+          {/* First row: Developer & Writing */}
+          {/* Developer */}
+          {developerBadge && (
+            <HighlightCard>
+              <HighlightCardBody
+                className={cn(
+                  address && !developerBadge.owned && "[&_img]:grayscale"
+                )}
+                src={developerBadge.image}
+                alt="Developer badge" // TODO: extract intl
+                href={developerBadge.link}
+              >
+                <h4 className="text-lg font-bold">
+                  {t("page-collectibles-code-content-developer-title")}
+                </h4>
+                <p>{t("page-collectibles-code-content-developer-desc")}</p>
+                <CheckList>
+                  <CheckItem owned={developerBadge.owned}>
+                    {t("page-collectibles-code-content-developer-1pr")}
+                  </CheckItem>
+                  {developer5Badge && (
+                    <CheckItem owned={developer5Badge.owned}>
+                      {t("page-collectibles-code-content-developer-5pr")}
+                    </CheckItem>
+                  )}
+                  {developer10Badge && (
+                    <CheckItem owned={developer10Badge.owned}>
+                      {t("page-collectibles-code-content-developer-10pr")}
+                    </CheckItem>
+                  )}
+                </CheckList>
+              </HighlightCardBody>
+              <HighlightCardFooter href="https://github.com/ethereum/ethereum-org-website/issues">
+                {t("page-collectibles-get-started")}
+              </HighlightCardFooter>
+            </HighlightCard>
+          )}
+          {/* Writing */}
+          {writingBadge && (
+            <HighlightCard>
+              <HighlightCardBody
+                className={cn(
+                  address && !writingBadge.owned && "[&_img]:grayscale"
+                )}
+                src={writingBadge.image}
+                alt="Writer badge" // TODO: extract intl
+                href={writingBadge.link}
+              >
+                <h4 className="text-lg font-bold">
+                  {t("page-collectibles-code-content-writing-title")}
+                </h4>
+                <p>{t("page-collectibles-code-content-writing-desc")}</p>
+                <CheckList>
+                  <CheckItem owned={writingBadge.owned}>
+                    {t("page-collectibles-code-content-writing-badge-1")}
+                  </CheckItem>
+                </CheckList>
+              </HighlightCardBody>
+              <HighlightCardFooter href="/contributing/#how-to-update-content">
+                {t("page-collectibles-get-started")}
+              </HighlightCardFooter>
+            </HighlightCard>
+          )}
+          {/* Design */}
+          {designBadge && userTestingBadge && (
+            <HighlightCard>
+              <HighlightCardBody
+                className={cn(
+                  address &&
+                    !designBadge.owned &&
+                    !userTestingBadge.owned &&
+                    "[&_img]:grayscale"
+                )}
+                src={designBadge.image}
+                alt="Design / user testing badge" // TODO: extract intl
+                href={designBadge.link}
+              >
+                <h4 className="text-lg font-bold">
+                  {t("page-collectibles-code-content-design-title")}
+                </h4>
+                <p>{t("page-collectibles-code-content-design-desc")}</p>
+                <CheckList>
+                  <CheckItem owned={designBadge.owned}>
+                    {t("page-collectibles-code-content-design-1issue")}
+                  </CheckItem>
+                  <CheckItem owned={userTestingBadge.owned}>
+                    {t("page-collectibles-code-content-design-user-testing")}
+                  </CheckItem>
+                </CheckList>
+              </HighlightCardBody>
+              <HighlightCardFooter href="/contributing/design/">
+                {t("page-collectibles-get-started")}
+              </HighlightCardFooter>
+            </HighlightCard>
+          )}
+          {/* GitPOAP */}
+          {gitpoapBadge && (
+            <HighlightCard>
+              <HighlightCardBody
+                className={cn(
+                  address && !gitpoapBadge.owned && "[&_img]:grayscale"
+                )}
+                src={gitpoapBadge.image}
+                alt="GitPOAP badge" // TODO: extract intl
+                href={gitpoapBadge.link}
+              >
+                <h4 className="text-lg font-bold">
+                  {t("page-collectibles-code-content-gitpoap-title")}
+                </h4>
+                <p>{t("page-collectibles-code-content-gitpoap-desc")}</p>
+                <CheckList>
+                  <CheckItem owned={gitpoapBadge.owned}>
+                    {t("page-collectibles-code-content-gitpoap-1pr")}
+                  </CheckItem>
+                </CheckList>
+              </HighlightCardBody>
+              <HighlightCardFooter href="https://github.com/ethereum/ethereum-org-website/issues">
+                {t("page-collectibles-get-started")}
+              </HighlightCardFooter>
+            </HighlightCard>
+          )}
+        </HighlightCardGrid>
+      </div>
+
+      {/* Translations section */}
+      {translationBadge && (
+        <div>
+          <div className="flex items-center gap-2">
+            <LanguagesIcon className="h-6 w-auto" />
+            <h3 className="text-2xl">
+              {t("page-collectibles-translations-title")}
+            </h3>
+          </div>
+
+          <p className="mt-2">{t("page-collectibles-translations-desc")}</p>
+
+          <Accordion type="single" collapsible>
+            <AccordionItem value="item-1" className="mt-4">
+              <AccordionTrigger className="w-full justify-start !border-none !px-0 py-2 font-bold hover:bg-transparent [&[data-state=open]]:bg-transparent">
+                {t("page-collectibles-instructions-label")}
+              </AccordionTrigger>
+              <AccordionContent className="text-base">
+                <OrderedList className="mb-0 ms-3">
+                  <ListItem>
+                    <Translation
+                      id="page-collectibles-translations-instructions-1"
+                      ns="page-collectibles"
+                    />
+                  </ListItem>
+                  <ListItem>
+                    {t("page-collectibles-translations-instructions-2")}
+                  </ListItem>
+                  <ListItem className="mb-0">
+                    {t("page-collectibles-translations-instructions-3")}
+                  </ListItem>
+                </OrderedList>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <HighlightCardGrid className="mt-4">
+            <HighlightCard>
+              <HighlightCardBody
+                href={translationBadge.link}
+                src={translationBadge.image}
+                alt="Translations"
+                className={cn(
+                  address && !translationBadge.owned && "[&_img]:grayscale"
+                )}
+              >
+                <h4 className="text-lg font-bold">
+                  {t("page-collectibles-translations-title")}
+                </h4>
+                <p>{t("page-collectibles-translations-badge-desc")}</p>
+                <CheckList>
+                  <CheckItem owned={translationBadge.owned}>
+                    {t("page-collectibles-translations-250")}
+                  </CheckItem>
+                  {translation1kBadge && (
+                    <CheckItem owned={translation1kBadge.owned}>
+                      {t("page-collectibles-translations-1000")}
+                    </CheckItem>
+                  )}
+                  {translation10kBadge && (
+                    <CheckItem owned={translation10kBadge.owned}>
+                      {t("page-collectibles-translations-10000")}
+                    </CheckItem>
+                  )}
+                  {translation50kBadge && (
+                    <CheckItem owned={translation50kBadge.owned}>
+                      {t("page-collectibles-translations-50000")}
+                    </CheckItem>
+                  )}
+                </CheckList>
+              </HighlightCardBody>
+              <HighlightCardFooter href="/contributing/translation-program/">
+                {t("page-collectibles-get-started")}
+              </HighlightCardFooter>
+            </HighlightCard>
+          </HighlightCardGrid>
+        </div>
+      )}
+
+      {/* Social section */}
+      <div>
+        <div className="flex items-center gap-2">
+          <MessageCircleMoreIcon className="h-6 w-auto" />
+          <h3 className="text-2xl">{t("page-collectibles-social-title")}</h3>
+        </div>
+
+        <p className="mt-2">{t("page-collectibles-social-desc")}</p>
+
+        <Accordion type="single" collapsible>
+          <AccordionItem value="item-1" className="mt-4">
+            <AccordionTrigger className="w-full justify-start !border-none !px-0 py-2 font-bold hover:bg-transparent [&[data-state=open]]:bg-transparent">
+              {t("page-collectibles-instructions-label")}
+            </AccordionTrigger>
+            <AccordionContent className="text-base">
+              <OrderedList className="mb-0 ms-3">
+                <ListItem>
+                  <Translation
+                    id="page-collectibles-social-instructions-1"
+                    ns="page-collectibles"
+                  />
+                </ListItem>
+                <ListItem>
+                  {t("page-collectibles-social-instructions-2")}
+                </ListItem>
+                <ListItem className="mb-0">
+                  {t("page-collectibles-social-instructions-3")}
+                </ListItem>
+              </OrderedList>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+
+        <div className="mt-4 grid grid-cols-[repeat(auto-fill,_minmax(180px,_1fr))] gap-2">
+          {socialBadges.map((badge) => (
+            <Link
+              key={badge.id}
+              href={badge.link}
+              hideArrow
+              className="group no-underline hover:underline"
+            >
+              <div className="flex w-full flex-col items-center gap-4 rounded-xl p-4 text-center text-sm">
+                <Image
+                  src={badge.image}
+                  width={130}
+                  height={130}
+                  alt={badge.name}
+                  sizes="128px"
+                  className={cn(
+                    "size-24 transition-transform group-hover:scale-105 group-hover:transition-transform md:size-32",
+                    address && !badge.owned && "grayscale"
+                  )}
+                />
+                <div className="text-primary">
+                  {badge.name
+                    .replace(/ - ethereum.org community/, "")
+                    .replace(/^ethereum.org /, "")
+                    .trim()}
+                  <ExternalLinkIcon />
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default CollectiblesCurrentYear
diff --git a/app/[locale]/collectibles/_components/CollectiblesPreviousYears.tsx b/app/[locale]/collectibles/_components/CollectiblesPreviousYears.tsx
new file mode 100644
index 00000000000..ca497cda3a9
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesPreviousYears.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import React from "react"
+import { useTranslations } from "next-intl"
+
+import IdAnchor from "@/components/IdAnchor"
+import { Image } from "@/components/Image"
+import Link, { ExternalLinkIcon } from "@/components/ui/Link"
+import { Tag } from "@/components/ui/tag"
+
+import type { Badge } from "../types"
+
+interface CollectiblesPreviousYearsProps {
+  badges: Badge[]
+}
+
+const CollectiblesPreviousYears = ({
+  badges,
+}: CollectiblesPreviousYearsProps) => {
+  const t = useTranslations("page-collectibles")
+  const currentYear = new Date().getFullYear().toString()
+  const previousYears = badges.filter((badge) => badge.year !== currentYear)
+
+  // Group badges by year
+  const grouped = previousYears.reduce(
+    (acc: Record<string, Badge[]>, badge: Badge) => {
+      const year = badge.year
+      if (!acc[year]) acc[year] = []
+      acc[year].push(badge)
+      return acc
+    },
+    {}
+  )
+  // Sort years descending
+  const years = Object.keys(grouped).sort((a, b) => {
+    return Number(b) - Number(a)
+  })
+  return (
+    <section className="mx-auto mt-8 space-y-8 p-2">
+      <h2 className="text-2xl xl:text-3xl">
+        {t("page-collectibles-previous-years")}
+      </h2>
+      {years.length > 0 ? (
+        years.map((year) => {
+          const badgeCount = grouped[year].length
+          // Sum collectorsCount for all badges in this year
+          const collectorsCount = grouped[year].reduce(
+            (sum: number, badge: Badge) => sum + (badge.collectors_count || 0),
+            0
+          )
+          return (
+            <div key={year} className="space-y-4 py-4 md:space-y-6">
+              <div className="flex items-center gap-6 border-b py-4">
+                <h3
+                  id={year}
+                  className="group relative scroll-mt-28 text-2xl md:text-3xl"
+                >
+                  <IdAnchor id={year} />
+                  {year}
+                </h3>
+                <div className="flex gap-2">
+                  <Tag>
+                    {t("page-collectibles-previous-years-badge-count", {
+                      count: badgeCount,
+                    })}
+                  </Tag>
+                  <Tag>
+                    {t("page-collectibles-previous-years-collectors-count", {
+                      count: collectorsCount,
+                    })}
+                  </Tag>
+                </div>
+              </div>
+              <div className="grid grid-cols-[repeat(auto-fill,_minmax(120px,_1fr))] gap-4 md:gap-6">
+                {grouped[year].map((badge: Badge) => {
+                  const sanitizedName = badge.name
+                    .replace(/\s?ethereum.org\s?/i, " ") // Remove "ethereum.org" from label
+                    .replace(new RegExp(` ?${year} ?`), " ") // Remove year (shown in section header)
+                    .replace(/\s?\(\s?\)\s?/, " ") // Remove any empty parentheses
+                    .replace(/\s+/, " ") // Trim sequential whitespace to single space
+                    .trim() // Trim edge whitespace
+                    .replace(/\s(on|-)$/, "") // Remove edge cases of trailing items after sanitizing
+                  const label =
+                    sanitizedName[0].toUpperCase() + sanitizedName.slice(1) // Force capitalize first character
+                  return (
+                    <Link
+                      key={badge.id}
+                      href={badge.link}
+                      className="group flex flex-col items-center gap-3 rounded-xl p-2 text-center no-underline hover:underline"
+                      hideArrow
+                    >
+                      <Image
+                        width={80}
+                        height={80}
+                        sizes="80px"
+                        src={badge.image}
+                        alt={badge.name}
+                        className="size-16 transition-transform group-hover:scale-105 group-hover:transition-transform md:size-20"
+                      />
+                      <div className="text-xs text-primary md:text-sm">
+                        {label}
+                        <ExternalLinkIcon />
+                      </div>
+                    </Link>
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })
+      ) : (
+        <div className="text-lg font-bold">
+          {t("page-collectibles-previous-years-no-badges")}
+        </div>
+      )}
+    </section>
+  )
+}
+
+export default CollectiblesPreviousYears
diff --git a/app/[locale]/collectibles/_components/CollectiblesProgress/index.tsx b/app/[locale]/collectibles/_components/CollectiblesProgress/index.tsx
new file mode 100644
index 00000000000..5b46b0dff26
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesProgress/index.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import React from "react"
+import { useLocale } from "next-intl"
+
+import { Progress } from "@/components/ui/progress"
+
+import { type BadgeWithOwned } from "../CollectiblesContent"
+
+import useTranslation from "@/hooks/useTranslation"
+
+type CollectiblesProgressProps = {
+  badges: BadgeWithOwned[]
+}
+
+const CollectiblesProgress = ({ badges }: CollectiblesProgressProps) => {
+  const { t } = useTranslation("page-collectibles")
+  const locale = useLocale()
+
+  const currentYear = new Date().getFullYear().toString()
+  const currentYearBadges = badges.filter(
+    (badge) => String(badge.year) === currentYear
+  )
+  const ownedCount = currentYearBadges.filter((b) => b.owned).length
+  const contributorSinceYear = badges
+    .filter((b) => b.owned)
+    .reduce(
+      // Return the oldest badge date
+      (prev, curr) => {
+        const currYear = Number(curr.year)
+        return !isNaN(currYear) && currYear < prev ? currYear : prev
+      },
+      Infinity
+    )
+
+  return (
+    <>
+      {contributorSinceYear < Infinity && (
+        <p className="text-body-medium">
+          {t("page-collectibles-contributing-since")}:{" "}
+          {new Intl.DateTimeFormat(locale, {
+            year: "numeric",
+          }).format(new Date().setFullYear(contributorSinceYear))}
+        </p>
+      )}
+      <div className="space-y-1">
+        <div className="flex justify-between text-sm">
+          <span className="font-bold">
+            {t("page-collectibles-contributor-progress-label")} ({currentYear})
+          </span>
+          <span>
+            {ownedCount}/{currentYearBadges.length}
+          </span>
+        </div>
+
+        <Progress
+          color="primary"
+          className="h-2.5"
+          value={(ownedCount / (currentYearBadges.length || 1)) * 100}
+        />
+      </div>
+      <p className="text-sm text-body-medium">
+        {t("page-collectibles-index-frequency")}
+      </p>
+    </>
+  )
+}
+
+export default CollectiblesProgress
diff --git a/app/[locale]/collectibles/_components/CollectiblesProgress/lazy.tsx b/app/[locale]/collectibles/_components/CollectiblesProgress/lazy.tsx
new file mode 100644
index 00000000000..c960f08e647
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesProgress/lazy.tsx
@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic"
+
+import Loading from "./loading"
+
+export default dynamic(() => import("."), { ssr: false, loading: Loading })
diff --git a/app/[locale]/collectibles/_components/CollectiblesProgress/loading.tsx b/app/[locale]/collectibles/_components/CollectiblesProgress/loading.tsx
new file mode 100644
index 00000000000..01a105d6f4a
--- /dev/null
+++ b/app/[locale]/collectibles/_components/CollectiblesProgress/loading.tsx
@@ -0,0 +1,16 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+const Loading = () => (
+  <div className="mt-4 w-full">
+    <div className="mb-1 flex justify-between">
+      <Skeleton className="h-3 w-20" />
+      <Skeleton className="h-3 w-8" />
+    </div>
+    <Skeleton className="h-2.5 w-full" />
+    <div className="mt-2 flex justify-center">
+      <Skeleton className="h-3 w-24" />
+    </div>
+  </div>
+)
+
+export default Loading
diff --git a/app/[locale]/collectibles/constants.ts b/app/[locale]/collectibles/constants.ts
new file mode 100644
index 00000000000..c6a01c1ae54
--- /dev/null
+++ b/app/[locale]/collectibles/constants.ts
@@ -0,0 +1,2 @@
+export const COLLECTIBLES_BASE_URL =
+  "https://ethereum-org-collectibles.vercel.app"
diff --git a/app/[locale]/collectibles/page.tsx b/app/[locale]/collectibles/page.tsx
new file mode 100644
index 00000000000..3b6b6b99a56
--- /dev/null
+++ b/app/[locale]/collectibles/page.tsx
@@ -0,0 +1,148 @@
+import { pick } from "lodash"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
+
+import { Lang } from "@/lib/types"
+
+import { HubHero } from "@/components/Hero"
+import I18nProvider from "@/components/I18nProvider"
+import MainArticle from "@/components/MainArticle"
+import Link from "@/components/ui/Link"
+import { Section } from "@/components/ui/section"
+
+import { getMetadata } from "@/lib/utils/metadata"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+
+import CollectiblesPage from "./_components/Collectibles/lazy"
+import { COLLECTIBLES_BASE_URL } from "./constants"
+import type { Badge, Stats } from "./types"
+
+import communityHeroImg from "@/public/images/heroes/community-hero.png"
+
+// API endpoints
+const BADGES_API = `${COLLECTIBLES_BASE_URL}/api/badges`
+const STATS_API = `${COLLECTIBLES_BASE_URL}/api/stats`
+
+// Data fetching
+async function fetchBadges() {
+  const res = await fetch(BADGES_API)
+  if (!res.ok) throw new Error("Failed to fetch badges")
+  return res.json()
+}
+async function fetchStats() {
+  const res = await fetch(STATS_API)
+  if (!res.ok) throw new Error("Failed to fetch stats")
+  return res.json()
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ locale: Lang }>
+}) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "page-collectibles" })
+  setRequestLocale(locale)
+
+  // Fetch data
+  const [badges, stats]: [Badge[], Stats] = await Promise.all([
+    fetchBadges(),
+    fetchStats(),
+  ])
+
+  // Get i18n messages
+  const allMessages = await getMessages({ locale })
+  const requiredNamespaces = getRequiredNamespacesForPage("/collectibles/")
+  const pickedMessages = pick(allMessages, requiredNamespaces)
+
+  return (
+    <I18nProvider locale={locale} messages={pickedMessages}>
+      <MainArticle className="space-y-12 pb-24 md:space-y-20">
+        <HubHero
+          heroImg={communityHeroImg}
+          title={t("page-collectibles-hero-title")}
+          header={t("page-collectibles-hero-header")}
+          description={t("page-collectibles-hero-description")}
+        />
+        <Section
+          id="stats"
+          className="flex flex-col gap-x-6 gap-y-4 px-4 xl:flex-row xl:px-12"
+        >
+          <div className="flex-[2] space-y-4 rounded-2xl border border-primary/10 bg-gradient-to-r from-primary/10 to-primary/5 px-8 py-12 text-lg dark:from-primary/20 dark:to-primary/10">
+            <h2 className="text-3xl md:text-4xl">
+              {t("page-collectibles-improve-title")}
+            </h2>
+            <p>
+              {t.rich("page-collectibles-improve-desc-1", {
+                strong: (chunks) => <span className="font-bold">{chunks}</span>,
+              })}
+            </p>
+            <p>
+              {t.rich("page-collectibles-improve-desc-2", {
+                strong: (chunks) => <span className="font-bold">{chunks}</span>,
+                a: (chunks) => (
+                  <Link href="https://x.com/Xeift1/status/1896200245949968828">
+                    {chunks}
+                  </Link>
+                ),
+              })}
+            </p>
+          </div>
+
+          <div className="grid min-w-fit grid-cols-2 place-items-center gap-4 md:grid-cols-3 md:justify-start xl:grid-cols-2">
+            {/* Minted */}
+            <div className="flex h-full w-full flex-col items-center justify-center rounded-xl border border-accent-a/20 bg-gradient-to-b from-accent-a/5 to-accent-a/15 px-4 py-8 text-accent-a max-md:col-span-2 xl:col-span-2 xl:p-6">
+              <div className="text-4xl font-bold md:text-6xl">
+                {stats.collectorsCount?.toLocaleString(locale) ?? "-"}
+              </div>
+              <div className="text-center font-bold">
+                {t("page-collectibles-stats-minted")}
+              </div>
+            </div>
+            {/* Collectors */}
+            <div className="flex h-full w-full flex-col items-center justify-center rounded-xl border border-accent-b/20 bg-gradient-to-b from-accent-b/5 to-accent-b/15 p-6 text-accent-b">
+              <div className="text-4xl font-bold md:text-6xl">
+                {stats.uniqueAddressesCount?.toLocaleString(locale) ?? "-"}
+              </div>
+              <div className="text-center font-bold">
+                {t("page-collectibles-stats-collectors")}
+              </div>
+            </div>
+            {/* Unique Badges */}
+            <div className="flex h-full w-full flex-col items-center justify-center rounded-xl border border-accent-c/20 bg-gradient-to-b from-accent-c/5 to-accent-c/15 p-6 text-accent-c">
+              <div className="text-4xl font-bold md:text-6xl">
+                {stats.collectiblesCount?.toLocaleString(locale) ?? "-"}
+              </div>
+              <div className="text-center font-bold">
+                {t("page-collectibles-stats-unique-badges")}
+              </div>
+            </div>
+          </div>
+        </Section>
+
+        <Section id="main" className="px-4 xl:px-12">
+          <CollectiblesPage badges={badges} />
+        </Section>
+      </MainArticle>
+    </I18nProvider>
+  )
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>
+}) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: "page-collectibles" })
+  return await getMetadata({
+    locale,
+    slug: ["collectibles"],
+    title: t("page-collectibles-hero-header"),
+    description: t("page-collectibles-hero-description"),
+    image: "/images/heroes/community-hero.png",
+  })
+}
diff --git a/app/[locale]/collectibles/types.ts b/app/[locale]/collectibles/types.ts
new file mode 100644
index 00000000000..04ea8f3dbf5
--- /dev/null
+++ b/app/[locale]/collectibles/types.ts
@@ -0,0 +1,16 @@
+export type Badge = {
+  id: string
+  name: string
+  image: string
+  link: string
+  category: string
+  year: string
+  description: string
+  collectors_count: number
+}
+
+export type Stats = {
+  collectorsCount: number
+  uniqueAddressesCount: number
+  collectiblesCount: number
+}
diff --git a/app/[locale]/start/page.tsx b/app/[locale]/start/page.tsx
index 51bf42a9b7d..11416f3a7f6 100644
--- a/app/[locale]/start/page.tsx
+++ b/app/[locale]/start/page.tsx
@@ -45,7 +45,7 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
         </div>
 
         <div id="start-with-ethereum-flow" className="flex flex-col gap-12">
-          <StartWithEthereumFlow locale={locale} newToCryptoWallets={wallets} />
+          <StartWithEthereumFlow newToCryptoWallets={wallets} />
         </div>
 
         <div className="flex w-full flex-col gap-12 rounded-2xl border border-accent-c/10 bg-gradient-to-t from-accent-c/10 from-20% to-accent-c/5 to-60% px-12 py-16 md:flex-row dark:from-accent-c/20 dark:to-accent-c/10">
diff --git a/next.config.js b/next.config.js
index 5c39cb7693e..1f819d3b2e3 100644
--- a/next.config.js
+++ b/next.config.js
@@ -93,6 +93,18 @@ module.exports = (phase, { defaultConfig }) => {
           protocol: "https",
           hostname: "coin-images.coingecko.com",
         },
+        {
+          protocol: "https",
+          hostname: "cdn.galxe.com",
+        },
+        {
+          protocol: "https",
+          hostname: "assets.poap.xyz",
+        },
+        {
+          protocol: "https",
+          hostname: "unavatar.io",
+        },
       ],
     },
     async headers() {
diff --git a/src/components/Nav/useNavigation.ts b/src/components/Nav/useNavigation.ts
index 3a88df8de89..fd247467f2c 100644
--- a/src/components/Nav/useNavigation.ts
+++ b/src/components/Nav/useNavigation.ts
@@ -402,6 +402,11 @@ export const useNavigation = () => {
               description: t("nav-translation-program-description"),
               href: "/contributing/translation-program/",
             },
+            {
+              label: t("nav-collectibles-label"),
+              description: t("nav-collectibles-description"),
+              href: "/collectibles/",
+            },
             {
               label: t("about-ethereum-org"),
               description: t("nav-about-description"),
diff --git a/src/components/StartWithEthereumFlow/index.tsx b/src/components/StartWithEthereumFlow/index.tsx
index 3ab7fdf29f7..cafad0256ba 100644
--- a/src/components/StartWithEthereumFlow/index.tsx
+++ b/src/components/StartWithEthereumFlow/index.tsx
@@ -36,10 +36,8 @@ const queryClient = new QueryClient()
 
 const StartWithEthereumFlow = ({
   newToCryptoWallets,
-  locale,
 }: {
   newToCryptoWallets: Wallet[]
-  locale: string
 }) => {
   const swiperRef = useRef<SwiperRef>(null)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -100,7 +98,7 @@ const StartWithEthereumFlow = ({
 
   return (
     <QueryClientProvider client={queryClient}>
-      <WalletProviders locale={locale}>
+      <WalletProviders>
         <SwiperContainer
           ref={containerRef}
           className={cn(
diff --git a/src/components/WalletProviders.tsx b/src/components/WalletProviders.tsx
index 67ca76b99a3..463f69f22a2 100644
--- a/src/components/WalletProviders.tsx
+++ b/src/components/WalletProviders.tsx
@@ -1,3 +1,6 @@
+"use client"
+
+import { useLocale } from "next-intl"
 import { WagmiProvider } from "wagmi"
 import { type Locale, RainbowKitProvider } from "@rainbow-me/rainbowkit"
 
@@ -5,10 +8,10 @@ import { rainbowkitConfig } from "@/config/rainbow-kit"
 
 interface WalletProvidersProps {
   children: React.ReactNode
-  locale: string | undefined
 }
 
-const WalletProviders = ({ children, locale }: WalletProvidersProps) => {
+const WalletProviders = ({ children }: WalletProvidersProps) => {
+  const locale = useLocale()
   return (
     <WagmiProvider config={rainbowkitConfig}>
       <RainbowKitProvider
diff --git a/src/components/ui/Link.tsx b/src/components/ui/Link.tsx
index caccf62ae15..97b2bfc2093 100644
--- a/src/components/ui/Link.tsx
+++ b/src/components/ui/Link.tsx
@@ -16,6 +16,19 @@ import { useRtlFlip } from "@/hooks/useRtlFlip"
 import { Link as I18nLink } from "@/i18n/routing"
 import { usePathname } from "@/i18n/routing"
 
+export const ExternalLinkIcon = () => {
+  const { twFlipForRtl } = useRtlFlip()
+  return (
+    <ExternalLink
+      data-label="arrow"
+      className={cn(
+        "!mb-0.5 ms-1 inline-block size-[0.875em] max-h-4 max-w-4 shrink-0",
+        twFlipForRtl
+      )}
+    />
+  )
+}
+
 type BaseProps = {
   hideArrow?: boolean
   isPartiallyActive?: boolean
@@ -53,8 +66,6 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
   ref
 ) {
   const pathname = usePathname()
-  const { twFlipForRtl } = useRtlFlip()
-
   if (!href) {
     // If troubleshooting this warning, check for multiple h1's in markdown content—these will result in broken id hrefs
     console.warn(`Link component missing href prop, pathname: ${pathname}`)
@@ -116,15 +127,7 @@ export const BaseLink = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
         <VisuallyHidden>
           {isMailto ? "opens email client" : "opens in a new tab"}
         </VisuallyHidden>
-        {!hideArrow && !isMailto && (
-          <ExternalLink
-            data-label="arrow"
-            className={cn(
-              "!mb-0.5 ms-1 inline-block size-[0.875em] max-h-4 max-w-4 shrink-0",
-              twFlipForRtl
-            )}
-          />
-        )}
+        {!hideArrow && !isMailto && <ExternalLinkIcon />}
       </a>
     )
   }
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index d2f725add36..585908bde16 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -25,7 +25,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]:dir(rtl)>svg]:rotate-90 [&[data-state=open]>svg]:-rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast",
+        "flex flex-1 items-center justify-between gap-2 px-2 py-2 font-medium transition-all hover:bg-background-highlight hover:text-primary-hover focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover md:px-4 [&[data-state=open]:dir(rtl)_svg]:rotate-90 [&[data-state=open]]:bg-background-highlight [&[data-state=open]]:text-primary-high-contrast [&[data-state=open]_svg]:-rotate-90",
         className
       )}
       {...props}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 483dace9cd3..ca13ff8031e 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -1,22 +1,44 @@
 import * as React from "react"
+import { cva, VariantProps } from "class-variance-authority"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
 import { cn } from "@/lib/utils/cn"
 
+const progressIndicatorVariants = cva(
+  "h-full w-full flex-1 rounded-full transition-all",
+  {
+    variants: {
+      color: {
+        disabled: "bg-disabled",
+        primary: "bg-primary",
+      },
+    },
+    defaultVariants: {
+      color: "disabled",
+    },
+  }
+)
+
+type ProgressProps = React.ComponentPropsWithoutRef<
+  typeof ProgressPrimitive.Root
+> &
+  VariantProps<typeof progressIndicatorVariants>
+
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
+  ProgressProps
+>(({ className, value, color, ...props }, ref) => (
   <ProgressPrimitive.Root
     ref={ref}
     className={cn(
       "relative h-4 w-full overflow-hidden rounded-full bg-body-light",
+      color === "primary" ? "bg-background" : "bg-body-light",
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-disabled transition-all"
+      className={progressIndicatorVariants({ color })}
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
diff --git a/src/intl/en/common.json b/src/intl/en/common.json
index a4c1fb95edc..a986f48d1e5 100644
--- a/src/intl/en/common.json
+++ b/src/intl/en/common.json
@@ -239,6 +239,8 @@
   "nav-builders-home-description": "A builder's manual for Ethereum—by builders, for builders",
   "nav-builders-home-label": "Builder's home",
   "nav-code-of-conduct": "Code of conduct",
+  "nav-collectibles-description": "Contributor dashboard for ethereum.org contributor collectibles",
+  "nav-collectibles-label": "ethereum.org collectibles",
   "nav-contribute-description": "If you want to help, this will guide you",
   "nav-contribute-label": "Contributing to ethereum.org",
   "nav-dao-description": "Member-owned communities without centralized authority",
diff --git a/src/intl/en/page-collectibles.json b/src/intl/en/page-collectibles.json
new file mode 100644
index 00000000000..03455feddf3
--- /dev/null
+++ b/src/intl/en/page-collectibles.json
@@ -0,0 +1,67 @@
+{
+  "page-collectibles-already-desc": "Check your progress",
+  "page-collectibles-already-title": "Already a contributor?",
+  "page-collectibles-code-content-desc": "Fix issues, write or improve articles or propose design improvements to the website.",
+  "page-collectibles-code-content-design-1issue": "Design issue solved badge",
+  "page-collectibles-code-content-design-desc": "Do design crits, improve our design system or participate in user testing.",
+  "page-collectibles-code-content-design-title": "Design",
+  "page-collectibles-code-content-design-user-testing": "Participate in user testing badge",
+  "page-collectibles-code-content-developer-10pr": "10 PRs merged badge",
+  "page-collectibles-code-content-developer-1pr": "1 PR merged badge",
+  "page-collectibles-code-content-developer-5pr": "5 PRs merged badge",
+  "page-collectibles-code-content-developer-desc": "Any improvement merged to the website.",
+  "page-collectibles-code-content-developer-title": "Developer",
+  "page-collectibles-code-content-gitpoap-1pr": "PR merged badge",
+  "page-collectibles-code-content-gitpoap-desc": "Automatically claimable after your PR is merged.",
+  "page-collectibles-code-content-gitpoap-title": "GitPOAP",
+  "page-collectibles-code-content-instructions-1": "Go to our <a href=\"https://github.com/ethereum/ethereum-org-website\">GitHub repository</a>",
+  "page-collectibles-code-content-instructions-2": "Choose an issue to work on",
+  "page-collectibles-code-content-instructions-3": "Commit a fix or improvement",
+  "page-collectibles-code-content-title": "Code & Content",
+  "page-collectibles-code-content-writing-badge-1": "Content contribution badge",
+  "page-collectibles-code-content-writing-desc": "For any content improvement merged to master.",
+  "page-collectibles-code-content-writing-title": "Writing",
+  "page-collectibles-connect-wallet": "Connect wallet",
+  "page-collectibles-contributing-since": "Contributing since",
+  "page-collectibles-contributor-img-alt": "Two contributors chatting",
+  "page-collectibles-contributor-progress-label": "Claimed",
+  "page-collectibles-current-year-title": "Current year",
+  "page-collectibles-get-started": "Get Started",
+  "page-collectibles-hero-description": "Prove that you worked on ethereum.org, onchain.",
+  "page-collectibles-hero-header": "Ethereum.org Collectibles",
+  "page-collectibles-hero-title": "Badges",
+  "page-collectibles-how-step1-desc": "to the website",
+  "page-collectibles-how-step1-title": "Contribute",
+  "page-collectibles-how-step2-desc": "on Discord",
+  "page-collectibles-how-step2-title": "Get verified",
+  "page-collectibles-how-step3-desc": "on Galxe",
+  "page-collectibles-how-step3-title": "Claim NFT",
+  "page-collectibles-how-title": "How it works",
+  "page-collectibles-improve-desc-1": "Earn unique NFTs by helping maintain and expand ethereum.org website. These badges <strong>recognize your participation onchain</strong>.",
+  "page-collectibles-improve-desc-2": "Top holders get <a>contributor swag</a> or discounted tickets to events like Devcon. Your onchain badges makes it easy for <strong>others to support you</strong>.",
+  "page-collectibles-improve-title": "Improve ethereum.org",
+  "page-collectibles-index-frequency": "Results updated once daily at 15:15 UTC",
+  "page-collectibles-instructions-label": "Instructions",
+  "page-collectibles-previous-years-badge-count": "{count, plural, =0 {no badges} =1 {1 badge} other {# badges}}",
+  "page-collectibles-previous-years-collectors-count": "{count, plural, =0 {no collectors} =1 {1 collector} other {# collectors}}",
+  "page-collectibles-previous-years-no-badges": "No badges minted",
+  "page-collectibles-previous-years": "Previous years",
+  "page-collectibles-social-desc": "Join any of our Discord calls to bug test the website before releases or keep up with the ethereum.org news on our monthly community calls.",
+  "page-collectibles-social-instructions-1": "Join our <a href=\"/discord/\">Discord server</a>",
+  "page-collectibles-social-instructions-2": "See schedule",
+  "page-collectibles-social-instructions-3": "Join!",
+  "page-collectibles-social-title": "Social",
+  "page-collectibles-stats-collectors": "Collectors",
+  "page-collectibles-stats-minted": "Minted",
+  "page-collectibles-stats-unique-badges": "Unique Badges",
+  "page-collectibles-translations-1000": "1,000 words badge",
+  "page-collectibles-translations-10000": "10,000 words badge",
+  "page-collectibles-translations-250": "250 words badge",
+  "page-collectibles-translations-50000": "50,000 words badge",
+  "page-collectibles-translations-badge-desc": "To any language.",
+  "page-collectibles-translations-desc": "Most users do not speak English, therefore it's crucial to help translate our articles to other languages, no translation experience needed.",
+  "page-collectibles-translations-instructions-1": "Register on <a href=\"https://crowdin.com/project/ethereum-org\">Crowdin</a>",
+  "page-collectibles-translations-instructions-2": "Select language",
+  "page-collectibles-translations-instructions-3": "Start translating",
+  "page-collectibles-translations-title": "Translations"
+}
diff --git a/src/intl/es/page-collectibles.json b/src/intl/es/page-collectibles.json
new file mode 100644
index 00000000000..a3a298f0689
--- /dev/null
+++ b/src/intl/es/page-collectibles.json
@@ -0,0 +1,67 @@
+{
+  "page-collectibles-already-desc": "Revisa tu progreso",
+  "page-collectibles-already-title": "¿Ya eres colaborador?",
+  "page-collectibles-code-content-desc": "Corrige errores, escribe o mejora artículos o propone mejoras de diseño para el sitio web.",
+  "page-collectibles-code-content-design-1issue": "Insignia por resolver un issue de diseño",
+  "page-collectibles-code-content-design-desc": "Haz críticas de diseño, mejora nuestro sistema de diseño o participa en pruebas de usuario.",
+  "page-collectibles-code-content-design-title": "Diseño",
+  "page-collectibles-code-content-design-user-testing": "Insignia por participar en pruebas de usuario",
+  "page-collectibles-code-content-developer-10pr": "Insignia por 10 PRs mergeados",
+  "page-collectibles-code-content-developer-1pr": "Insignia por 1 PR mergeado",
+  "page-collectibles-code-content-developer-5pr": "Insignia por 5 PRs mergeados",
+  "page-collectibles-code-content-developer-desc": "Cualquier mejora mergeada al sitio web.",
+  "page-collectibles-code-content-developer-title": "Desarrollador",
+  "page-collectibles-code-content-gitpoap-1pr": "Insignia por 1 PR mergeado",
+  "page-collectibles-code-content-gitpoap-desc": "Reclamable automáticamente después de que tu PR sea mergeada.",
+  "page-collectibles-code-content-gitpoap-title": "GitPOAP",
+  "page-collectibles-code-content-instructions-1": "Ve a nuestro <a href=\"https://github.com/ethereum/ethereum-org-website\">repositorio de GitHub</a>",
+  "page-collectibles-code-content-instructions-2": "Elige un issue en el que trabajar",
+  "page-collectibles-code-content-instructions-3": "Confirma una corrección o mejora",
+  "page-collectibles-code-content-title": "Código y Contenido",
+  "page-collectibles-code-content-writing-badge-1": "Insignia por contribución de contenido",
+  "page-collectibles-code-content-writing-desc": "Por cualquier mejora de contenido mergeada a master.",
+  "page-collectibles-code-content-writing-title": "Redacción",
+  "page-collectibles-connect-wallet": "Conectar billetera",
+  "page-collectibles-contributing-since": "Contribuyendo desde",
+  "page-collectibles-contributor-img-alt": "Dos colaboradores conversando",
+  "page-collectibles-contributor-progress-label": "Reclamado",
+  "page-collectibles-current-year-title": "Año actual",
+  "page-collectibles-get-started": "Comenzar",
+  "page-collectibles-hero-description": "Prueba que has trabajado en ethereum.org, onchain.",
+  "page-collectibles-hero-header": "Coleccionables Ethereum.org",
+  "page-collectibles-hero-title": "Insignias",
+  "page-collectibles-how-step1-desc": "al sitio web",
+  "page-collectibles-how-step1-title": "Contribuye",
+  "page-collectibles-how-step2-desc": "en Discord",
+  "page-collectibles-how-step2-title": "Verifícate",
+  "page-collectibles-how-step3-desc": "en Galxe",
+  "page-collectibles-how-step3-title": "Reclama NFT",
+  "page-collectibles-how-title": "Cómo funciona",
+  "page-collectibles-improve-desc-1": "Gana NFTs únicos ayudando a mantener y expandir el sitio web ethereum.org. Estas insignias <strong>reconocen tu participación onchain</strong>.",
+  "page-collectibles-improve-desc-2": "Los principales poseedores obtienen <a>mercaderia de colaborador</a> o entradas con descuento a eventos como Devcon. Tu insignia onchain facilita que <strong>otros te apoyen</strong>.",
+  "page-collectibles-improve-title": "Mejora ethereum.org",
+  "page-collectibles-index-frequency": "Resultados actualizados una vez al día a las 15:15 UTC",
+  "page-collectibles-instructions-label": "Instrucciones",
+  "page-collectibles-previous-years-badge-count": "{count, plural, =0 {ninguna insignia} =1 {1 insignia} other {# insignias}}",
+  "page-collectibles-previous-years-collectors-count": "{count, plural, =0 {ningún coleccionista} =1 {1 coleccionista} other {# coleccionistas}}",
+  "page-collectibles-previous-years-no-badges": "No se han obtenido insignias",
+  "page-collectibles-previous-years": "Años anteriores",
+  "page-collectibles-social-desc": "Únete a cualquiera de nuestras llamadas de Discord para probar el sitio web antes de los lanzamientos o mantente al día con las noticias de ethereum.org en nuestras llamadas comunitarias mensuales.",
+  "page-collectibles-social-instructions-1": "Únete a nuestro <a href=\"/discord/\">servidor de Discord</a>",
+  "page-collectibles-social-instructions-2": "Ver horario",
+  "page-collectibles-social-instructions-3": "¡Únete!",
+  "page-collectibles-social-title": "Social",
+  "page-collectibles-stats-collectors": "Coleccionistas",
+  "page-collectibles-stats-minted": "Reclamados",
+  "page-collectibles-stats-unique-badges": "Insignias únicas",
+  "page-collectibles-translations-1000": "1,000 palabras",
+  "page-collectibles-translations-10000": "10,000 palabras",
+  "page-collectibles-translations-250": "250 palabras",
+  "page-collectibles-translations-50000": "50,000 palabras",
+  "page-collectibles-translations-badge-desc": "A cualquier idioma.",
+  "page-collectibles-translations-desc": "La mayoría de los usuarios no hablan inglés, por lo que es crucial ayudar a traducir nuestros artículos a otros idiomas, no se necesita experiencia previa.",
+  "page-collectibles-translations-instructions-1": "Regístrate en <a href=\"https://crowdin.com/project/ethereum-org\">Crowdin</a>",
+  "page-collectibles-translations-instructions-2": "Selecciona idioma",
+  "page-collectibles-translations-instructions-3": "Comienza a traducir",
+  "page-collectibles-translations-title": "Traducciones"
+}
diff --git a/src/lib/utils/translations.ts b/src/lib/utils/translations.ts
index 7ebca26de51..027a814f7d0 100644
--- a/src/lib/utils/translations.ts
+++ b/src/lib/utils/translations.ts
@@ -70,6 +70,10 @@ const getRequiredNamespacesForPath = (relativePath: string) => {
     requiredNamespaces = [...requiredNamespaces, "page-10-year-anniversary"]
   }
 
+  if (path === "/collectibles/") {
+    primaryNamespace = "page-collectibles"
+  }
+
   if (path === "/contributing/translation-program/acknowledgements/") {
     primaryNamespace = "page-contributing-translation-program-acknowledgements"
   }