diff --git a/apps/web/app/(ee)/admin.dub.co/(dashboard)/commissions/page.tsx b/apps/web/app/(ee)/admin.dub.co/(dashboard)/commissions/page.tsx
index ef51ec9b253..c29c7c299e6 100644
--- a/apps/web/app/(ee)/admin.dub.co/(dashboard)/commissions/page.tsx
+++ b/apps/web/app/(ee)/admin.dub.co/(dashboard)/commissions/page.tsx
@@ -221,7 +221,7 @@ function CommissionsPageClient() {
                 }
               >
                 <a
-                  href={`https://partners.dub.co/programs/marketplace/${row.original.slug}`}
+                  href={`https://partners.dub.co/marketplace/${row.original.slug}`}
                   target="_blank"
                   rel="noopener noreferrer"
                   className={cn(
diff --git a/apps/web/app/(ee)/api/marketplace/programs/count/route.ts b/apps/web/app/(ee)/api/marketplace/programs/count/route.ts
new file mode 100644
index 00000000000..7268a80b818
--- /dev/null
+++ b/apps/web/app/(ee)/api/marketplace/programs/count/route.ts
@@ -0,0 +1,18 @@
+import { getPublicNetworkProgramsCount } from "@/lib/fetchers/get-public-network-programs";
+import { parsePublicMarketplaceQuery } from "@/lib/marketplace/parse-public-marketplace-query";
+import { NextResponse } from "next/server";
+
+// GET /api/marketplace/programs/count - public marketplace program count
+export async function GET(req: Request) {
+  const searchParams = Object.fromEntries(new URL(req.url).searchParams);
+  const { category, rewardType, search } =
+    parsePublicMarketplaceQuery(searchParams);
+
+  const count = await getPublicNetworkProgramsCount({
+    category,
+    rewardType,
+    search,
+  });
+
+  return NextResponse.json(count);
+}
diff --git a/apps/web/app/(ee)/api/marketplace/programs/filter-counts/route.ts b/apps/web/app/(ee)/api/marketplace/programs/filter-counts/route.ts
new file mode 100644
index 00000000000..e86698c1b13
--- /dev/null
+++ b/apps/web/app/(ee)/api/marketplace/programs/filter-counts/route.ts
@@ -0,0 +1,16 @@
+import { getPublicNetworkProgramFilterCounts } from "@/lib/fetchers/get-public-network-program-filter-counts";
+import { parsePublicMarketplaceQuery } from "@/lib/marketplace/parse-public-marketplace-query";
+import { NextResponse } from "next/server";
+
+// GET /api/marketplace/programs/filter-counts - public marketplace filter counts
+export async function GET(req: Request) {
+  const searchParams = Object.fromEntries(new URL(req.url).searchParams);
+  const { category, rewardType } = parsePublicMarketplaceQuery(searchParams);
+
+  const filterCounts = await getPublicNetworkProgramFilterCounts({
+    category,
+    rewardType,
+  });
+
+  return NextResponse.json(filterCounts);
+}
diff --git a/apps/web/app/(ee)/api/marketplace/programs/route.ts b/apps/web/app/(ee)/api/marketplace/programs/route.ts
new file mode 100644
index 00000000000..287712f2f0a
--- /dev/null
+++ b/apps/web/app/(ee)/api/marketplace/programs/route.ts
@@ -0,0 +1,13 @@
+import { getPublicNetworkPrograms } from "@/lib/fetchers/get-public-network-programs";
+import { parsePublicMarketplaceQuery } from "@/lib/marketplace/parse-public-marketplace-query";
+import { NextResponse } from "next/server";
+
+// GET /api/marketplace/programs - public marketplace program list
+export async function GET(req: Request) {
+  const searchParams = Object.fromEntries(new URL(req.url).searchParams);
+  const params = parsePublicMarketplaceQuery(searchParams);
+
+  const programs = await getPublicNetworkPrograms(params);
+
+  return NextResponse.json(programs);
+}
diff --git a/apps/web/app/(ee)/api/network/programs/route.ts b/apps/web/app/(ee)/api/network/programs/route.ts
index 0a771b6777c..9f77730688a 100644
--- a/apps/web/app/(ee)/api/network/programs/route.ts
+++ b/apps/web/app/(ee)/api/network/programs/route.ts
@@ -98,7 +98,7 @@ export const GET = withPartnerProfile(async ({ partner, searchParams }) => {
     },
     orderBy:
       sortBy === "popularity"
-        ? {}
+        ? { marketplaceRanking: "asc" }
         : {
             [sortBy === "recency" ? "addedToMarketplaceAt" : sortBy]: sortOrder,
           },
diff --git a/apps/web/app/(ee)/api/track/application/route.ts b/apps/web/app/(ee)/api/track/application/route.ts
index a1191a4fd36..5e83026d011 100644
--- a/apps/web/app/(ee)/api/track/application/route.ts
+++ b/apps/web/app/(ee)/api/track/application/route.ts
@@ -18,6 +18,7 @@ import {
   recordClickZodSchema,
 } from "@/lib/tinybird/record-click-zod";
 import { ratelimit } from "@/lib/upstash";
+import { MARKETPLACE_RESERVED_SLUGS } from "@/ui/program-marketplace/utils/urls";
 import { prisma } from "@dub/prisma";
 import { Partner, Program } from "@dub/prisma/client";
 import {
@@ -419,8 +420,16 @@ async function getRequestContext(
 // Supports:
 //   - https://partners.dub.co/{programSlug}
 //   - https://partners.dub.co/programs/{programSlug}/apply
-//   - https://partners.dub.co/programs/marketplace/{programSlug}
+//   - https://partners.dub.co/marketplace/{programSlug}
+//   - https://dub.co/marketplace/{programSlug}
+//   - https://partners.dub.co/programs/marketplace/{programSlug} (legacy)
 //   - https://partners.dub.co/register (platform-level signup -> network program)
+//
+// Marketplace list routes (no program slug):
+//   - /marketplace
+//   - /marketplace/all
+//   - /marketplace/popular
+//   - /marketplace/c/{category}
 function identityProgramSlug(url: string) {
   try {
     const urlObj = new URL(url);
@@ -430,23 +439,60 @@ function identityProgramSlug(url: string) {
       return { programSlug: null, isMarketplace: false };
     }
 
-    // Platform-level /register page is associated with the network program
     if (parts[0] === "register") {
       return { programSlug: NETWORK_PROGRAM_SLUG, isMarketplace: false };
     }
 
-    const isMarketplace = parts[0] === "programs" && parts[1] === "marketplace";
-    const programSlug = isMarketplace // e.g. https://partners.dub.co/programs/marketplace/acme
-      ? parts[2]
-      : parts[0] === "programs" // e.g. https://partners.dub.co/programs/acme/apply
-        ? parts[1]
-        : parts[0]; // e.g. https://partners.dub.co/acme, or https://partners.dub.co/acme/apply, or https://partners.dub.co/acme/group/apply
+    if (parts[0] === "marketplace") {
+      if (parts.length === 1) {
+        return { programSlug: null, isMarketplace: false };
+      }
+
+      if (parts[1] === "c") {
+        return { programSlug: null, isMarketplace: false };
+      }
+
+      if (parts.length === 2 && MARKETPLACE_RESERVED_SLUGS.has(parts[1])) {
+        return { programSlug: null, isMarketplace: false };
+      }
+
+      if (parts.length === 2) {
+        return {
+          programSlug: parts[1].toLowerCase(),
+          isMarketplace: true,
+        };
+      }
+
+      return { programSlug: null, isMarketplace: false };
+    }
+
+    if (parts[0] === "programs" && parts[1] === "marketplace") {
+      if (!parts[2] || MARKETPLACE_RESERVED_SLUGS.has(parts[2])) {
+        return { programSlug: null, isMarketplace: false };
+      }
+
+      return {
+        programSlug: parts[2].toLowerCase(),
+        isMarketplace: true,
+      };
+    }
+
+    if (parts[0] === "programs") {
+      if (!parts[1]) {
+        return { programSlug: null, isMarketplace: false };
+      }
+
+      return {
+        programSlug: parts[1].toLowerCase(),
+        isMarketplace: false,
+      };
+    }
 
     return {
-      programSlug: programSlug.toLowerCase(),
-      isMarketplace,
+      programSlug: parts[0].toLowerCase(),
+      isMarketplace: false,
     };
-  } catch (error) {
+  } catch {
     return { programSlug: null, isMarketplace: false };
   }
 }
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/loading.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/[[...slug]]/loading.tsx
similarity index 100%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/loading.tsx
rename to apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/[[...slug]]/loading.tsx
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/[[...slug]]/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/[[...slug]]/page.tsx
new file mode 100644
index 00000000000..db71c4ea01e
--- /dev/null
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/[[...slug]]/page.tsx
@@ -0,0 +1,19 @@
+import { MarketplaceRouter } from "@/ui/program-marketplace/marketplace-router";
+import {
+  generateMarketplaceProgramStaticParams,
+  revalidate,
+} from "@/ui/program-marketplace/pages/marketplace-program-page";
+
+export { revalidate };
+
+export async function generateStaticParams() {
+  return generateMarketplaceProgramStaticParams();
+}
+
+export default async function MarketplacePage(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const { slug } = await props.params;
+
+  return <MarketplaceRouter slug={slug} />;
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/layout.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/layout.tsx
similarity index 100%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/layout.tsx
rename to apps/web/app/(ee)/partners.dub.co/(dashboard)/marketplace/layout.tsx
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/page.tsx
deleted file mode 100644
index 00f65e0bbbc..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/page.tsx
+++ /dev/null
@@ -1,270 +0,0 @@
-import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
-import { ApplicationAnalytics } from "@/ui/application-analytics";
-import { PageContent } from "@/ui/layout/page-content";
-import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
-import { BLOCK_COMPONENTS } from "@/ui/partners/lander/blocks";
-import { LanderHero } from "@/ui/partners/lander/lander-hero";
-import { LanderRewards } from "@/ui/partners/lander/lander-rewards";
-import { ProgramEligibilityCard } from "@/ui/partners/program-eligibility-card";
-import { ProgramCategory } from "@/ui/partners/program-marketplace/program-category";
-import { ProgramRewardsDisplay } from "@/ui/partners/program-marketplace/program-rewards-display";
-import { prisma } from "@dub/prisma";
-import { ChevronRight, Shop, Tooltip } from "@dub/ui";
-import { Globe } from "@dub/ui/icons";
-import { OG_AVATAR_URL, cn, getDomainWithoutWWW } from "@dub/utils";
-import Link from "next/link";
-import { redirect } from "next/navigation";
-import { ProgramStatusBadge } from "../program-status-badge";
-import { MarketplaceProgramHeaderControls } from "./header-controls";
-
-export const revalidate = 3600; // 1 hour
-
-export async function generateStaticParams() {
-  const programs = await prisma.program.findMany({
-    where: {
-      addedToMarketplaceAt: {
-        not: null,
-      },
-    },
-    select: {
-      slug: true,
-    },
-  });
-
-  return programs.map((program) => ({
-    programSlug: program.slug,
-  }));
-}
-
-export default async function MarketplaceProgramPage(props: {
-  params: Promise<{ programSlug: string }>;
-}) {
-  const params = await props.params;
-  const { programSlug } = params;
-
-  const program = await getNetworkProgram({
-    slug: programSlug,
-  });
-
-  if (!program) {
-    redirect("/programs/marketplace");
-  }
-
-  const isDarkImage = program.marketplaceHeaderImage?.includes("dark");
-
-  return (
-    <PageContent
-      title={
-        <div className="flex items-center gap-1.5">
-          <div className="flex items-center gap-1">
-            <Link
-              href="/programs/marketplace"
-              className="bg-bg-subtle hover:bg-bg-emphasis flex size-8 shrink-0 items-center justify-center rounded-lg transition-[transform,background-color] duration-150 active:scale-95"
-            >
-              <Shop className="text-content-default size-4" />
-            </Link>
-            <ChevronRight className="text-content-subtle size-2.5 shrink-0 [&_*]:stroke-2" />
-          </div>
-
-          <div className="flex min-w-0 items-center gap-1.5">
-            <span className="min-w-0 truncate text-lg font-semibold leading-7 text-neutral-900">
-              Program details
-            </span>
-            <ProgramStatusBadge program={program} />
-          </div>
-        </div>
-      }
-      controls={<MarketplaceProgramHeaderControls program={program} />}
-    >
-      <ApplicationAnalytics />
-      <PageWidthWrapper className="pb-20">
-        <div
-          className={cn(
-            "relative",
-            program.featuredOnMarketplaceAt &&
-              "border-border-subtle overflow-hidden rounded-xl border",
-          )}
-        >
-          {program.featuredOnMarketplaceAt &&
-            program.marketplaceHeaderImage && (
-              <>
-                <img
-                  src={program.marketplaceHeaderImage}
-                  alt={program.name}
-                  className="absolute inset-0 size-full object-cover"
-                />
-                {!isDarkImage && (
-                  <div className="absolute inset-0 size-full bg-gradient-to-t from-white via-white/75 to-transparent" />
-                )}
-              </>
-            )}
-          <div className="relative mx-auto max-w-screen-md px-4 py-8 sm:px-0">
-            <img
-              src={program.logo || `${OG_AVATAR_URL}${program.name}`}
-              alt={program.name}
-              className="size-16 rounded-full border border-white/20"
-            />
-
-            <div className="mt-6 flex flex-col">
-              <span
-                className={cn(
-                  "text-3xl font-semibold",
-                  isDarkImage && "text-content-inverted",
-                )}
-              >
-                {program.name}
-              </span>
-
-              <div
-                className={cn(
-                  "mt-2 flex max-w-md items-center gap-1",
-                  isDarkImage && "text-content-inverted/90",
-                )}
-              >
-                {program.description ||
-                  `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
-              </div>
-            </div>
-
-            <div className="mt-6 flex gap-8">
-              {Boolean(program.rewards?.length || program.discount) && (
-                <div>
-                  <span
-                    className={cn(
-                      "block text-xs font-medium",
-                      isDarkImage
-                        ? "text-content-inverted"
-                        : "text-neutral-400",
-                    )}
-                  >
-                    Rewards
-                  </span>
-                  <ProgramRewardsDisplay
-                    rewards={program.rewards}
-                    discount={program.discount}
-                    isDarkImage={isDarkImage}
-                    className="mt-1"
-                    descriptionClassName="max-w-[240px]"
-                  />
-                </div>
-              )}
-              {Boolean(program.categories?.length) && (
-                <div className="min-w-0">
-                  <span
-                    className={cn(
-                      "block text-xs font-medium",
-                      isDarkImage
-                        ? "text-content-inverted"
-                        : "text-neutral-400",
-                    )}
-                  >
-                    Category
-                  </span>
-                  <div className="mt-1 flex items-center gap-1.5">
-                    {program.categories
-                      .slice(0, 1)
-                      ?.map((category) => (
-                        <ProgramCategory
-                          key={category}
-                          category={category}
-                          className={cn(isDarkImage && "text-content-inverted")}
-                        />
-                      ))}
-                    {program.categories.length > 1 && (
-                      <Tooltip
-                        content={
-                          <div className="flex flex-col gap-0.5 p-2">
-                            {program.categories.slice(1).map((category) => (
-                              <ProgramCategory
-                                key={category}
-                                category={category}
-                                className={cn(
-                                  isDarkImage && "text-content-inverted",
-                                )}
-                              />
-                            ))}
-                          </div>
-                        }
-                      >
-                        <div
-                          className={cn(
-                            "-ml-1.5 flex size-6 items-center justify-center rounded-md text-xs font-medium",
-                            isDarkImage && "text-content-inverted/70",
-                          )}
-                        >
-                          +{program.categories.length - 1}
-                        </div>
-                      </Tooltip>
-                    )}
-                  </div>
-                </div>
-              )}
-              {program.url && (
-                <div className="min-w-0">
-                  <span className="block text-xs font-medium text-neutral-400">
-                    Website
-                  </span>
-                  <Link
-                    href={program.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={cn(
-                      "mt-1 flex max-w-[220px] items-center gap-1.5 text-sm font-medium",
-                      isDarkImage
-                        ? "text-content-inverted/90 hover:text-content-inverted"
-                        : "text-content-default hover:text-content-emphasis",
-                    )}
-                  >
-                    <Globe className="size-4 shrink-0" />
-                    <span className="truncate">
-                      {getDomainWithoutWWW(program.url)} ↗
-                    </span>
-                  </Link>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto max-w-screen-md">
-          <LanderHero
-            program={program}
-            landerData={program.landerData || {}}
-            showLabel={false}
-            className="mt-8 sm:mt-8"
-            heading="h2"
-            titleClassName="text-2xl"
-          />
-
-          <LanderRewards
-            className="mt-4"
-            rewards={program.rewards || []}
-            discount={program.discount || null}
-            bounties={program.bounties}
-          />
-
-          {program.applicationRequirements?.length ? (
-            <ProgramEligibilityCard
-              requirements={program.applicationRequirements}
-            />
-          ) : null}
-
-          {program.landerData && (
-            <div className="mt-16 grid grid-cols-1 gap-10">
-              {program.landerData.blocks.map((block, idx) => {
-                const Component = BLOCK_COMPONENTS[block.type];
-                return Component ? (
-                  <Component
-                    key={idx}
-                    block={block}
-                    group={{ logo: program.logo }}
-                  />
-                ) : null;
-              })}
-            </div>
-          )}
-        </div>
-      </PageWidthWrapper>
-    </PageContent>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-program-card.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-program-card.tsx
deleted file mode 100644
index a3e514a14e5..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-program-card.tsx
+++ /dev/null
@@ -1,199 +0,0 @@
-import { NetworkProgramProps } from "@/lib/types";
-import { ProgramCategory } from "@/ui/partners/program-marketplace/program-category";
-import { ProgramRewardsDisplay } from "@/ui/partners/program-marketplace/program-rewards-display";
-import { Tooltip, useRouterStuff } from "@dub/ui";
-import { OG_AVATAR_URL, cn } from "@dub/utils";
-import Link from "next/link";
-import { ProgramStatusBadge } from "./program-status-badge";
-
-export function FeaturedProgramCard({
-  program,
-}: {
-  program: NetworkProgramProps;
-}) {
-  const { queryParams } = useRouterStuff();
-
-  const isDarkImage = program.marketplaceHeaderImage?.includes("-dark");
-
-  return (
-    <Link
-      href={`/programs/marketplace/${program.slug}`}
-      className="border-border-subtle relative block h-full overflow-hidden rounded-xl border p-6"
-    >
-      {program.marketplaceHeaderImage && (
-        <>
-          <img
-            src={program.marketplaceHeaderImage}
-            alt={program.name}
-            className="absolute inset-0 size-full object-cover"
-          />
-          <div
-            className={cn(
-              "absolute inset-x-0 bottom-0 h-1/2 backdrop-blur-[2px] xl:hidden",
-              isDarkImage
-                ? "bg-gradient-to-t from-black/50 to-transparent"
-                : "bg-gradient-to-t from-white/50 to-transparent",
-            )}
-            aria-hidden
-          />
-        </>
-      )}
-
-      <div className="relative">
-        <div className="flex justify-between gap-4">
-          <img
-            src={program.logo || `${OG_AVATAR_URL}${program.name}`}
-            alt={program.name}
-            className="size-12 rounded-full border border-white/20"
-          />
-
-          <ProgramStatusBadge program={program} />
-        </div>
-
-        <div className="mt-10 flex flex-col">
-          <span
-            className={cn(
-              "text-3xl font-semibold",
-              isDarkImage && "text-content-inverted",
-            )}
-          >
-            {program.name}
-          </span>
-
-          <div
-            className={cn(
-              "mt-1 line-clamp-2 max-w-sm text-sm",
-              isDarkImage && "text-content-inverted",
-            )}
-          >
-            {program.description ||
-              `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
-          </div>
-
-          <div className="mt-5 flex gap-8">
-            {Boolean(program.rewards?.length) && (
-              <div>
-                <span
-                  className={cn(
-                    "text-content-subtle block text-xs font-medium",
-                    isDarkImage && "text-content-inverted/80",
-                  )}
-                >
-                  Rewards
-                </span>
-                <ProgramRewardsDisplay
-                  rewards={program.rewards}
-                  isDarkImage={isDarkImage}
-                  onRewardClick={(reward) =>
-                    queryParams({
-                      set: {
-                        rewardType: reward.event,
-                      },
-                      del: "page",
-                    })
-                  }
-                  className="hover:bg-bg-default/10 active:bg-bg-default/20 mt-2"
-                  iconClassName="hover:bg-bg-default/10 active:bg-bg-default/20"
-                  descriptionClassName="max-w-[240px]"
-                />
-              </div>
-            )}
-            {Boolean(program.categories.length) && (
-              <div className="min-w-0">
-                <span
-                  className={cn(
-                    "text-content-subtle block text-xs font-medium",
-                    isDarkImage && "text-content-inverted/80",
-                  )}
-                >
-                  Category
-                </span>
-                <div className="mt-2 flex items-center gap-1.5">
-                  {program.categories.slice(0, 1)?.map((category) => (
-                    <ProgramCategory
-                      key={category}
-                      category={category}
-                      onClick={() =>
-                        queryParams({
-                          set: {
-                            category,
-                          },
-                          del: "page",
-                        })
-                      }
-                      className={cn(
-                        "hover:bg-bg-default/10 active:bg-bg-default/20",
-                        isDarkImage && "text-content-inverted",
-                      )}
-                    />
-                  ))}
-                  {program.categories.length > 1 && (
-                    <Tooltip
-                      content={
-                        <div className="flex flex-col gap-0.5 p-2">
-                          {program.categories.slice(1).map((category) => (
-                            <ProgramCategory
-                              key={category}
-                              category={category}
-                              onClick={() =>
-                                queryParams({
-                                  set: {
-                                    category,
-                                  },
-                                  del: "page",
-                                })
-                              }
-                            />
-                          ))}
-                        </div>
-                      }
-                    >
-                      <div
-                        className={cn(
-                          "-ml-1.5 flex size-6 items-center justify-center rounded-md text-xs font-medium",
-                          isDarkImage && "text-content-inverted/80",
-                        )}
-                      >
-                        +{program.categories.length - 1}
-                      </div>
-                    </Tooltip>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </Link>
-  );
-}
-
-export function FeaturedProgramCardSkeleton() {
-  return (
-    <div className="border-border-subtle relative h-full overflow-hidden rounded-xl border p-6">
-      <div className="relative">
-        <div className="flex justify-between gap-4">
-          <div className="size-12 animate-pulse rounded-full bg-neutral-200" />
-        </div>
-
-        <div className="mt-10 flex flex-col">
-          {/* Name - text-3xl font-semibold is typically ~36px height */}
-          <div className="h-9 w-40 animate-pulse rounded bg-neutral-200" />
-
-          {/* Description - text-sm single line, ~20px height */}
-          <div className="mt-1 max-w-sm">
-            <div className="h-5 w-64 animate-pulse rounded bg-neutral-200" />
-          </div>
-
-          {/* Rewards/Category section - matches actual card structure with mt-5 */}
-          <div className="mt-5 flex gap-8">
-            <div>
-              <div className="h-4 w-12 animate-pulse rounded bg-neutral-200" />
-              <div className="mt-2 h-6 w-24 animate-pulse rounded bg-neutral-200" />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-programs.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-programs.tsx
deleted file mode 100644
index 564f70b4b43..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/featured-programs.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import { NetworkProgramProps } from "@/lib/types";
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNavBar,
-} from "@dub/ui";
-import { fetcher } from "@dub/utils";
-import { ComponentProps } from "react";
-import useSWR from "swr";
-import {
-  FeaturedProgramCard,
-  FeaturedProgramCardSkeleton,
-} from "./featured-program-card";
-
-export function FeaturedPrograms() {
-  const { data: programs, error } = useSWR<NetworkProgramProps[]>(
-    `/api/network/programs?featured=true`,
-    fetcher,
-    { revalidateOnFocus: false, keepPreviousData: true },
-  );
-
-  return programs?.length === 0 || error ? null : (
-    <div>
-      <h2 className="text-content-emphasis text-base font-semibold">
-        Featured programs
-      </h2>
-      <div className="mt-4">
-        <Carousel autoplay={{ delay: 5000 }} opts={{ loop: true }}>
-          <CarouselContent className="items-stretch">
-            {programs ? (
-              programs.map((program) => (
-                <CarouselCard key={program.id} program={program} />
-              ))
-            ) : (
-              <>
-                <CarouselItem className="basis-full">
-                  <FeaturedProgramCardSkeleton />
-                </CarouselItem>
-                <CarouselItem className="basis-full">
-                  <FeaturedProgramCardSkeleton />
-                </CarouselItem>
-              </>
-            )}
-          </CarouselContent>
-          <div className="mt-2">
-            <CarouselNavBar />
-          </div>
-        </Carousel>
-      </div>
-    </div>
-  );
-}
-
-const CarouselCard = (props: ComponentProps<typeof FeaturedProgramCard>) => {
-  return (
-    <CarouselItem className="basis-full">
-      <FeaturedProgramCard {...props} />
-    </CarouselItem>
-  );
-};
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page-client.tsx
deleted file mode 100644
index a746224471a..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page-client.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-"use client";
-
-import useNetworkProgramsCount from "@/lib/swr/use-network-programs-count";
-import { NetworkProgramProps } from "@/lib/types";
-import { PROGRAM_NETWORK_MAX_PAGE_SIZE } from "@/lib/zod/schemas/program-network";
-import { SearchBoxPersisted } from "@/ui/shared/search-box";
-import {
-  AnimatedSizeContainer,
-  Filter,
-  PaginationControls,
-  usePagination,
-  useRouterStuff,
-} from "@dub/ui";
-import { cn, fetcher } from "@dub/utils";
-import useSWR from "swr";
-import { FeaturedPrograms } from "./featured-programs";
-import { MarketplaceEmptyState } from "./marketplace-empty-state";
-import {
-  MarketplaceProgramCard,
-  MarketplaceProgramCardSkeleton,
-} from "./program-card";
-import ProgramSort from "./program-sort";
-import { useProgramNetworkFilters } from "./use-program-network-filters";
-
-export function ProgramMarketplacePageClient() {
-  const { getQueryString } = useRouterStuff();
-
-  const { data: programsCount, error: countError } = useNetworkProgramsCount();
-
-  const {
-    data: programs,
-    error,
-    isValidating,
-  } = useSWR<NetworkProgramProps[]>(
-    `/api/network/programs${getQueryString()}`,
-    fetcher,
-    { revalidateOnFocus: false, keepPreviousData: true },
-  );
-
-  const { pagination, setPagination } = usePagination(
-    PROGRAM_NETWORK_MAX_PAGE_SIZE,
-  );
-
-  const {
-    filters,
-    activeFilters,
-    isFiltered,
-    onSelect,
-    onRemove,
-    onRemoveAll,
-  } = useProgramNetworkFilters();
-
-  return (
-    <div className="flex flex-col gap-4">
-      <FeaturedPrograms />
-      <div>
-        <div className="xs:flex-row xs:items-center flex flex-col justify-between gap-4">
-          <div className="flex items-center gap-2">
-            <Filter.Select
-              className="h-9 w-full rounded-lg md:w-fit"
-              filters={filters}
-              activeFilters={activeFilters}
-              onSelect={onSelect}
-              onRemove={onRemove}
-            />
-            <ProgramSort />
-          </div>
-          <SearchBoxPersisted
-            placeholder="Search the marketplace..."
-            inputClassName="md:w-[19rem] h-9 rounded-lg"
-          />
-        </div>
-        <AnimatedSizeContainer height>
-          <div>
-            <div className={cn("pt-3", !isFiltered && "hidden")}>
-              <Filter.List
-                filters={filters}
-                activeFilters={activeFilters}
-                onSelect={onSelect}
-                onRemove={onRemove}
-                onRemoveAll={onRemoveAll}
-              />
-            </div>
-          </div>
-        </AnimatedSizeContainer>
-      </div>
-
-      {error || countError ? (
-        <div className="text-content-subtle py-12 text-sm">
-          Failed to load programs
-        </div>
-      ) : !programs || programs?.length ? (
-        <div>
-          <div className="min-h-[300px]">
-            <div
-              className={cn(
-                "@4xl/page:grid-cols-3 @xl/page:grid-cols-2 grid grid-cols-1 gap-4 transition-opacity lg:gap-6",
-                isValidating && "opacity-50",
-              )}
-            >
-              {programs
-                ? programs.map((program) => (
-                    <MarketplaceProgramCard
-                      key={program.id}
-                      program={program}
-                    />
-                  ))
-                : [...Array(5)].map((_, idx) => (
-                    <MarketplaceProgramCardSkeleton key={idx} />
-                  ))}
-            </div>
-          </div>
-          <div className="sticky bottom-0 mt-4 rounded-b-[inherit] border-t border-neutral-200 bg-white px-3.5 py-2">
-            <PaginationControls
-              pagination={pagination}
-              setPagination={setPagination}
-              totalCount={programsCount || 0}
-              unit={(p) => `program${p ? "s" : ""}`}
-            />
-          </div>
-        </div>
-      ) : (
-        <MarketplaceEmptyState
-          isFiltered={isFiltered}
-          onClearAllFilters={onRemoveAll}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page.tsx
deleted file mode 100644
index ff973e6489d..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { PageContent } from "@/ui/layout/page-content";
-import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
-import { ProgramMarketplacePageClient } from "./page-client";
-
-export default function PartnersDashboard() {
-  return (
-    <PageContent
-      title="Program Marketplace"
-      titleInfo={{
-        title:
-          "Explore the Dub program marketplace to discover new programs, learn what rewards they offer, and apply to the ones that fit your content and audience.",
-        href: "https://dub.co/help/article/program-marketplace",
-      }}
-    >
-      <PageWidthWrapper>
-        <ProgramMarketplacePageClient />
-      </PageWidthWrapper>
-    </PageContent>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-sort.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-sort.tsx
deleted file mode 100644
index 9956afe2157..00000000000
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-sort.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  Calendar6,
-  IconMenu,
-  Popover,
-  SortAlphaAscending,
-  SortAlphaDescending,
-  Star,
-  Tick,
-  useRouterStuff,
-} from "@dub/ui";
-import { cn } from "@dub/utils";
-import { ChevronDown } from "lucide-react";
-import { useState } from "react";
-
-const programSortOptions = [
-  {
-    icon: Star,
-    label: "Most popular",
-    value: "popularity",
-    order: "desc",
-  },
-  {
-    icon: Calendar6,
-    label: "Newest",
-    value: "recency",
-    order: "desc",
-  },
-  {
-    icon: SortAlphaDescending,
-    label: "Name A-Z",
-    value: "name",
-    order: "asc",
-  },
-  {
-    icon: SortAlphaAscending,
-    label: "Name Z-A",
-    value: "name",
-    order: "desc",
-  },
-] as const;
-
-export default function ProgramSort() {
-  const { queryParams, searchParams } = useRouterStuff();
-
-  const [openPopover, setOpenPopover] = useState(false);
-
-  const sortOrder = searchParams.get("sortOrder") === "asc" ? "asc" : "desc";
-
-  const selectedSort =
-    programSortOptions.find(
-      (s) => s.value === searchParams.get("sortBy") && s.order === sortOrder,
-    ) ?? programSortOptions[0];
-
-  return (
-    <Popover
-      content={
-        <div className="w-full p-2 md:w-48">
-          {programSortOptions.map(({ label, value, order, icon: Icon }) => (
-            <button
-              key={`${value}-${order}`}
-              onClick={() => {
-                queryParams({
-                  set: {
-                    sortBy: value,
-                    sortOrder: order,
-                  },
-                  del: "page",
-                });
-                setOpenPopover(false);
-              }}
-              className="flex w-full items-center justify-between space-x-2 rounded-md px-1 py-2 hover:bg-neutral-100 active:bg-neutral-200"
-            >
-              <IconMenu text={label} icon={<Icon className="size-4" />} />
-              {value === selectedSort.value && order === selectedSort.order && (
-                <Tick className="size-4" aria-hidden="true" />
-              )}
-            </button>
-          ))}
-        </div>
-      }
-      openPopover={openPopover}
-      setOpenPopover={setOpenPopover}
-    >
-      <button
-        onClick={() => setOpenPopover(!openPopover)}
-        className={cn(
-          "group flex h-9 cursor-pointer appearance-none items-center gap-x-2 truncate rounded-lg border px-3 text-sm outline-none transition-all",
-          "border-neutral-200 bg-white text-neutral-900 placeholder-neutral-400",
-          "focus-visible:border-neutral-500 data-[state=open]:border-neutral-500 data-[state=open]:ring-4 data-[state=open]:ring-neutral-200",
-        )}
-      >
-        <span className="text-content-emphasis flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
-          Sort by{" "}
-          <strong className="font-semibold">{selectedSort.label}</strong>
-        </span>
-        <ChevronDown className="size-4 flex-shrink-0 text-neutral-400 transition-transform duration-75 group-data-[state=open]:rotate-180" />
-      </button>
-    </Popover>
-  );
-}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/page-client.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/page-client.tsx
index 1d21da2c09c..e4543b7adcf 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/page-client.tsx
+++ b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/page-client.tsx
@@ -3,7 +3,7 @@
 import useProgramEnrollments from "@/lib/swr/use-program-enrollments";
 import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
 import { ProgramCard, ProgramCardSkeleton } from "@/ui/partners/program-card";
-import { ProgramsPromoBanner } from "@/ui/partners/program-marketplace/programs-promo-banner";
+import { ProgramsPromoBanner } from "@/ui/program-marketplace/programs-promo-banner";
 import { SimpleEmptyState } from "@/ui/shared/simple-empty-state";
 import { HexadecagonStar } from "@dub/ui/icons";
 import { useId } from "react";
diff --git a/apps/web/app/app.dub.co/marketplace/[[...slug]]/page.tsx b/apps/web/app/app.dub.co/marketplace/[[...slug]]/page.tsx
new file mode 100644
index 00000000000..f0bfafe2224
--- /dev/null
+++ b/apps/web/app/app.dub.co/marketplace/[[...slug]]/page.tsx
@@ -0,0 +1,86 @@
+import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { MarketplaceExternalRouter } from "@/ui/program-marketplace/external/marketplace-external-router";
+import { generateMarketplaceProgramStaticParams } from "@/ui/program-marketplace/pages/marketplace-program-page";
+import {
+  categoryToSlug,
+  getMarketplaceCanonicalUrl,
+  getMarketplacePathFromSlug,
+} from "@/ui/program-marketplace/utils/urls";
+import { Category } from "@dub/prisma/client";
+import { constructMetadata } from "@dub/utils";
+import { Metadata } from "next";
+
+export const revalidate = 3600;
+
+export async function generateStaticParams() {
+  const programParams = await generateMarketplaceProgramStaticParams();
+  const categoryParams = Object.values(Category).map((category) => ({
+    slug: ["c", categoryToSlug(category)],
+  }));
+
+  return [{ slug: [] }, { slug: ["all"] }, ...categoryParams, ...programParams];
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}): Promise<Metadata> {
+  const { slug } = await props.params;
+  const pathname = getMarketplacePathFromSlug(slug);
+  const segments = slug ?? [];
+
+  const year = new Date().getFullYear();
+
+  let title = `Best SaaS affiliate programs in ${year}`;
+  let description = `Browse and apply to the best SaaS affiliate programs on Dub's Partner Network.`;
+  let image: string | undefined;
+
+  if (segments.length === 1 && segments[0] === "all") {
+    title = "All Programs";
+    description = "Browse all partner programs on Dub.";
+  } else if (
+    segments.length === 1 &&
+    segments[0] !== "all" &&
+    segments[0] !== "popular"
+  ) {
+    const program = await getNetworkProgram({ slug: segments[0] });
+
+    if (program) {
+      title = program.name;
+      description =
+        program.description ||
+        `Join the ${program.name} affiliate program on Dub's Partner Network.`;
+      image = program.marketplaceHeaderImage || program.logo || undefined;
+    } else {
+      title = "Program Details";
+    }
+  } else if (segments.length === 2 && segments[0] === "c") {
+    const category = Object.values(Category).find(
+      (value) => categoryToSlug(value) === segments[1],
+    );
+
+    if (category) {
+      const categoryMeta = PROGRAM_CATEGORIES_MAP[category];
+      const label = categoryMeta?.label ?? category.replaceAll("_", " ");
+      title = `${label} Programs`;
+      description =
+        categoryMeta?.listPageDescription ??
+        `Partner programs in ${label.toLowerCase()}.`;
+    }
+  }
+
+  return constructMetadata({
+    title,
+    description,
+    image,
+    canonicalUrl: getMarketplaceCanonicalUrl(pathname),
+  });
+}
+
+export default async function MarketplaceExternalPage(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const { slug } = await props.params;
+
+  return <MarketplaceExternalRouter slug={slug} />;
+}
diff --git a/apps/web/app/app.dub.co/marketplace/layout.tsx b/apps/web/app/app.dub.co/marketplace/layout.tsx
new file mode 100644
index 00000000000..1a1f6c4f132
--- /dev/null
+++ b/apps/web/app/app.dub.co/marketplace/layout.tsx
@@ -0,0 +1,33 @@
+import { MarketplaceExternalHeader } from "@/ui/program-marketplace/external/marketplace-external-header";
+import { Footer } from "@dub/ui";
+import { PropsWithChildren } from "react";
+
+export default function MarketplaceExternalLayout({
+  children,
+}: PropsWithChildren) {
+  return (
+    <div className="flex min-h-screen flex-col bg-white">
+      <MarketplaceExternalHeader />
+      <div className="relative flex flex-1 flex-col">
+        <MarketplaceExternalGridLines />
+        <main className="flex-1">{children}</main>
+        <div className="relative z-10 h-px w-full bg-neutral-200" />
+        <Footer className="border-t-0 md:rounded-t-none" />
+      </div>
+    </div>
+  );
+}
+
+function MarketplaceExternalGridLines() {
+  return (
+    <div
+      aria-hidden
+      className="pointer-events-none absolute inset-0 z-0 flex justify-center"
+    >
+      <div className="relative h-full w-full max-w-screen-xl">
+        <div className="absolute inset-y-0 left-0 w-px bg-neutral-200 [mask-image:linear-gradient(to_bottom,transparent,#000_96px)]" />
+        <div className="absolute inset-y-0 right-0 w-px bg-neutral-200 [mask-image:linear-gradient(to_bottom,transparent,#000_96px)]" />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/sitemap.ts b/apps/web/app/sitemap.ts
index 9313131c3d5..b7af30dc281 100644
--- a/apps/web/app/sitemap.ts
+++ b/apps/web/app/sitemap.ts
@@ -1,5 +1,12 @@
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCanonicalUrl,
+  getMarketplaceCategoryHref,
+  getMarketplaceHref,
+  getMarketplaceProgramHref,
+} from "@/ui/program-marketplace/utils/urls";
 import { prisma } from "@dub/prisma";
-import { Prisma } from "@dub/prisma/client";
+import { Category, Prisma } from "@dub/prisma/client";
 import { PARTNERS_HOSTNAMES, SHORT_DOMAIN } from "@dub/utils";
 import { MetadataRoute } from "next";
 import { headers } from "next/headers";
@@ -39,10 +46,53 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
     }));
   }
 
-  return [
+  const entries: MetadataRoute.Sitemap = [
     {
       url: `https://${domain}`,
       lastModified: new Date(),
     },
   ];
+
+  if (
+    process.env.NEXT_PUBLIC_APP_DOMAIN &&
+    domain === process.env.NEXT_PUBLIC_APP_DOMAIN
+  ) {
+    const marketplacePrograms = await prisma.program.findMany({
+      where: {
+        addedToMarketplaceAt: {
+          not: null,
+        },
+      },
+      select: {
+        slug: true,
+        updatedAt: true,
+      },
+      orderBy: {
+        slug: "asc",
+      },
+    });
+
+    entries.push(
+      {
+        url: getMarketplaceCanonicalUrl(getMarketplaceHref()),
+        lastModified: new Date(),
+      },
+      {
+        url: getMarketplaceCanonicalUrl(getMarketplaceAllHref()),
+        lastModified: new Date(),
+      },
+      ...Object.values(Category).map((category) => ({
+        url: getMarketplaceCanonicalUrl(getMarketplaceCategoryHref(category)),
+        lastModified: new Date(),
+      })),
+      ...marketplacePrograms.map((program) => ({
+        url: getMarketplaceCanonicalUrl(
+          getMarketplaceProgramHref(program.slug),
+        ),
+        lastModified: program.updatedAt,
+      })),
+    );
+  }
+
+  return entries;
 }
diff --git a/apps/web/lib/actions/partners/update-discount.ts b/apps/web/lib/actions/partners/update-discount.ts
index c9803c69fd8..cf1f6a6fdce 100644
--- a/apps/web/lib/actions/partners/update-discount.ts
+++ b/apps/web/lib/actions/partners/update-discount.ts
@@ -72,7 +72,7 @@ export const updateDiscountAction = authActionClient
                       revalidatePath(`/partners.dub.co/${program.slug}/apply`),
                       program.addedToMarketplaceAt &&
                         revalidatePath(
-                          `/partners.dub.co/programs/marketplace/${program.slug}`,
+                          `/partners.dub.co/marketplace/${program.slug}`,
                         ),
                     ]
                   : []),
diff --git a/apps/web/lib/actions/partners/update-group-branding.ts b/apps/web/lib/actions/partners/update-group-branding.ts
index 1b04bd994d4..bb756b69510 100644
--- a/apps/web/lib/actions/partners/update-group-branding.ts
+++ b/apps/web/lib/actions/partners/update-group-branding.ts
@@ -129,7 +129,7 @@ export const updateGroupBrandingAction = authActionClient
                 ),
                 program.addedToMarketplaceAt &&
                   revalidatePath(
-                    `/partners.dub.co/programs/marketplace/${program.slug}`,
+                    `/partners.dub.co/marketplace/${program.slug}`,
                   ),
               ]
             : []),
diff --git a/apps/web/lib/actions/partners/update-reward.ts b/apps/web/lib/actions/partners/update-reward.ts
index 47c9411f57e..10590b22fc1 100644
--- a/apps/web/lib/actions/partners/update-reward.ts
+++ b/apps/web/lib/actions/partners/update-reward.ts
@@ -169,9 +169,7 @@ export const updateRewardAction = authActionClient
               revalidatePath(`/partners.dub.co/${program.slug}`),
               revalidatePath(`/partners.dub.co/${program.slug}/apply`),
               program.addedToMarketplaceAt &&
-                revalidatePath(
-                  `/partners.dub.co/programs/marketplace/${program.slug}`,
-                ),
+                revalidatePath(`/partners.dub.co/marketplace/${program.slug}`),
             ]
           : []),
       ]),
diff --git a/apps/web/lib/fetchers/get-public-network-program-filter-counts.ts b/apps/web/lib/fetchers/get-public-network-program-filter-counts.ts
new file mode 100644
index 00000000000..7569d204579
--- /dev/null
+++ b/apps/web/lib/fetchers/get-public-network-program-filter-counts.ts
@@ -0,0 +1,110 @@
+import { DEFAULT_PARTNER_GROUP } from "@/lib/zod/schemas/groups";
+import { getPublicNetworkProgramsQuerySchema } from "@/lib/zod/schemas/program-network";
+import { prisma } from "@dub/prisma";
+import { Category, Prisma } from "@dub/prisma/client";
+import { cache } from "react";
+import * as z from "zod/v4";
+
+const rewardTypeMap = {
+  sale: Prisma.sql`pg.saleRewardId IS NOT NULL`,
+  lead: Prisma.sql`pg.leadRewardId IS NOT NULL`,
+  click: Prisma.sql`pg.clickRewardId IS NOT NULL`,
+  discount: Prisma.sql`pg.discountId IS NOT NULL`,
+};
+
+export const getPublicNetworkProgramFilterCounts = cache(
+  async ({
+    category,
+    rewardType,
+  }: Pick<
+    z.input<typeof getPublicNetworkProgramsQuerySchema>,
+    "category" | "rewardType"
+  > = {}) => {
+    const [categories, rewardTypes] = await Promise.all([
+      getCategoryCounts(rewardType),
+      getRewardTypeCounts(category),
+    ]);
+
+    return {
+      categories,
+      rewardTypes,
+    };
+  },
+);
+
+async function getCategoryCounts(
+  rewardType?: z.infer<
+    typeof getPublicNetworkProgramsQuerySchema
+  >["rewardType"],
+) {
+  const commonWhereSql = buildCommonWhereSql({ rewardType });
+
+  const categories = (await prisma.$queryRaw`
+    SELECT pc.category, COUNT(p.id) AS _count
+    FROM ProgramCategory pc
+    JOIN Program p ON p.id = pc.programId
+    WHERE ${commonWhereSql}
+    GROUP BY pc.category
+    ORDER BY _count DESC
+  `) as { category: Category; _count: bigint }[];
+
+  return categories.map(({ category, _count }) => ({
+    category,
+    count: Number(_count),
+  }));
+}
+
+async function getRewardTypeCounts(category?: Category) {
+  const commonWhereSql = buildCommonWhereSql({ category });
+
+  const rewards = (await prisma.$queryRaw`
+    SELECT
+      COUNT(pg.clickRewardId) AS "click",
+      COUNT(pg.leadRewardId) AS "lead",
+      COUNT(pg.saleRewardId) AS "sale",
+      COUNT(pg.discountId) AS "discount"
+    FROM PartnerGroup pg
+    JOIN Program p ON p.id = pg.programId
+    WHERE pg.slug = ${DEFAULT_PARTNER_GROUP.slug} AND ${commonWhereSql}
+  `) as { click: bigint; lead: bigint; sale: bigint; discount: bigint }[];
+
+  return (["sale", "lead", "click", "discount"] as const).map((type) => ({
+    type,
+    count: Number(rewards[0][type]),
+  }));
+}
+
+function buildCommonWhereSql({
+  category,
+  rewardType,
+}: {
+  category?: Category;
+  rewardType?: z.infer<
+    typeof getPublicNetworkProgramsQuerySchema
+  >["rewardType"];
+}) {
+  return Prisma.sql`
+    p.addedToMarketplaceAt IS NOT NULL
+    AND EXISTS (
+      SELECT 1 FROM PartnerGroup pg
+      WHERE
+        pg.programId = p.id
+        AND pg.slug = ${DEFAULT_PARTNER_GROUP.slug}
+        AND pg.applicationFormPublishedAt IS NOT NULL
+        ${
+          rewardType
+            ? Prisma.sql`AND ${rewardTypeMap[rewardType]}`
+            : Prisma.sql``
+        }
+    )
+    ${
+      category
+        ? Prisma.sql`
+          AND EXISTS (
+            SELECT 1 FROM ProgramCategory pc
+            WHERE pc.programId = p.id AND pc.category = ${category}
+          )`
+        : Prisma.sql``
+    }
+  `;
+}
diff --git a/apps/web/lib/fetchers/get-public-network-programs.ts b/apps/web/lib/fetchers/get-public-network-programs.ts
new file mode 100644
index 00000000000..82e2b6f9bd6
--- /dev/null
+++ b/apps/web/lib/fetchers/get-public-network-programs.ts
@@ -0,0 +1,173 @@
+import { DEFAULT_PARTNER_GROUP } from "@/lib/zod/schemas/groups";
+import {
+  getPublicNetworkProgramsQuerySchema,
+  NetworkProgramSchema,
+} from "@/lib/zod/schemas/program-network";
+import { prisma } from "@dub/prisma";
+import { cache } from "react";
+import * as z from "zod/v4";
+
+export const getPublicNetworkPrograms = cache(
+  async (params: z.input<typeof getPublicNetworkProgramsQuerySchema> = {}) => {
+    const {
+      category,
+      rewardType,
+      featured,
+      search,
+      sortBy = "popularity",
+      sortOrder = "desc",
+      page = 1,
+      pageSize,
+    } = getPublicNetworkProgramsQuerySchema.parse(params);
+
+    const programs = await prisma.program.findMany({
+      where: {
+        addedToMarketplaceAt: {
+          not: null,
+        },
+        ...(featured && {
+          featuredOnMarketplaceAt: {
+            not: null,
+          },
+        }),
+        ...(search && {
+          OR: [
+            { name: { contains: search } },
+            { slug: { contains: search } },
+            { domain: { contains: search } },
+            { url: { contains: search } },
+            { description: { contains: search } },
+          ],
+        }),
+        ...(category && {
+          categories: {
+            some: {
+              category,
+            },
+          },
+        }),
+        groups: {
+          some: {
+            slug: DEFAULT_PARTNER_GROUP.slug,
+            applicationFormPublishedAt: {
+              not: null,
+            },
+            ...(rewardType === "sale" && {
+              saleRewardId: { not: null },
+            }),
+            ...(rewardType === "lead" && {
+              leadRewardId: { not: null },
+            }),
+            ...(rewardType === "click" && {
+              clickRewardId: { not: null },
+            }),
+            ...(rewardType === "discount" && {
+              discountId: { not: null },
+            }),
+          },
+        },
+      },
+      include: {
+        groups: {
+          where: {
+            slug: DEFAULT_PARTNER_GROUP.slug,
+          },
+          include: {
+            clickReward: true,
+            leadReward: true,
+            saleReward: true,
+            referralReward: true,
+            discount: true,
+          },
+        },
+        categories: true,
+      },
+      orderBy:
+        sortBy === "popularity"
+          ? { marketplaceRanking: "asc" }
+          : {
+              [sortBy === "recency" ? "addedToMarketplaceAt" : sortBy]:
+                sortOrder,
+            },
+      skip: (page - 1) * pageSize,
+      take: pageSize,
+    });
+
+    return z.array(NetworkProgramSchema).parse(
+      programs.map((program) => ({
+        ...program,
+        rewards:
+          program.groups.length > 0
+            ? [
+                program.groups[0].clickReward,
+                program.groups[0].leadReward,
+                program.groups[0].saleReward,
+              ].filter(Boolean)
+            : [],
+        discount: program.groups.length > 0 ? program.groups[0].discount : null,
+        categories: program.categories.map(({ category }) => category),
+      })),
+    );
+  },
+);
+
+export const getPublicNetworkProgramsCount = cache(
+  async (
+    params: Pick<
+      z.input<typeof getPublicNetworkProgramsQuerySchema>,
+      "category" | "rewardType" | "search"
+    > = {},
+  ) => {
+    const { category, rewardType, search } = getPublicNetworkProgramsQuerySchema
+      .pick({
+        category: true,
+        rewardType: true,
+        search: true,
+      })
+      .parse(params);
+
+    return prisma.program.count({
+      where: {
+        addedToMarketplaceAt: {
+          not: null,
+        },
+        ...(search && {
+          OR: [
+            { name: { contains: search } },
+            { slug: { contains: search } },
+            { domain: { contains: search } },
+            { url: { contains: search } },
+            { description: { contains: search } },
+          ],
+        }),
+        ...(category && {
+          categories: {
+            some: {
+              category,
+            },
+          },
+        }),
+        groups: {
+          some: {
+            slug: DEFAULT_PARTNER_GROUP.slug,
+            applicationFormPublishedAt: {
+              not: null,
+            },
+            ...(rewardType === "sale" && {
+              saleRewardId: { not: null },
+            }),
+            ...(rewardType === "lead" && {
+              leadRewardId: { not: null },
+            }),
+            ...(rewardType === "click" && {
+              clickRewardId: { not: null },
+            }),
+            ...(rewardType === "discount" && {
+              discountId: { not: null },
+            }),
+          },
+        },
+      },
+    });
+  },
+);
diff --git a/apps/web/lib/marketplace/parse-public-marketplace-query.ts b/apps/web/lib/marketplace/parse-public-marketplace-query.ts
new file mode 100644
index 00000000000..c4bd5f37b75
--- /dev/null
+++ b/apps/web/lib/marketplace/parse-public-marketplace-query.ts
@@ -0,0 +1,34 @@
+import { getPublicNetworkProgramsQuerySchema } from "@/lib/zod/schemas/program-network";
+import { Category } from "@dub/prisma/client";
+
+export const EXTERNAL_MARKETPLACE_PAGE_SIZE = 24;
+
+function pickString(value: string | string[] | undefined) {
+  return typeof value === "string" ? value : undefined;
+}
+
+export function parsePublicMarketplaceQuery(
+  searchParams: Record<string, string | string[] | undefined> = {},
+  fixedCategory?: Category,
+) {
+  const input = {
+    rewardType: pickString(searchParams.rewardType),
+    search: pickString(searchParams.search),
+    sortBy: pickString(searchParams.sortBy),
+    sortOrder: pickString(searchParams.sortOrder),
+    page: pickString(searchParams.page),
+    pageSize: EXTERNAL_MARKETPLACE_PAGE_SIZE,
+    ...(fixedCategory ? { category: fixedCategory } : {}),
+  };
+
+  const parsed = getPublicNetworkProgramsQuerySchema.safeParse(input);
+
+  if (parsed.success) {
+    return parsed.data;
+  }
+
+  return getPublicNetworkProgramsQuerySchema.parse({
+    pageSize: EXTERNAL_MARKETPLACE_PAGE_SIZE,
+    ...(fixedCategory ? { category: fixedCategory } : {}),
+  });
+}
diff --git a/apps/web/lib/middleware/app.ts b/apps/web/lib/middleware/app.ts
index 27ec8567075..5dc796960f7 100644
--- a/apps/web/lib/middleware/app.ts
+++ b/apps/web/lib/middleware/app.ts
@@ -1,3 +1,4 @@
+import { getMarketplacePopularRedirectHref } from "@/ui/program-marketplace/utils/urls";
 import { NextRequest, NextResponse } from "next/server";
 import {
   ONBOARDING_WINDOW_SECONDS,
@@ -14,12 +15,22 @@ import { parse } from "./utils/parse";
 import { WorkspacesMiddleware } from "./workspaces";
 
 export async function AppMiddleware(req: NextRequest) {
-  const { path, fullPath, searchParamsString } = parse(req);
+  const { path, fullPath, searchParamsObj, searchParamsString } = parse(req);
 
   if (path.startsWith("/embed")) {
     return EmbedMiddleware(req);
   }
 
+  if (path === "/marketplace/popular") {
+    return NextResponse.redirect(
+      new URL(getMarketplacePopularRedirectHref(searchParamsObj), req.url),
+    );
+  }
+
+  if (path === "/marketplace" || path.startsWith("/marketplace/")) {
+    return NextResponse.rewrite(new URL(`/app.dub.co${fullPath}`, req.url));
+  }
+
   const user = await getUserViaToken(req);
 
   // if there's no user and the path is not a public page, redirect to /login
diff --git a/apps/web/lib/middleware/partners.ts b/apps/web/lib/middleware/partners.ts
index 91c5e5badd1..fc487771f40 100644
--- a/apps/web/lib/middleware/partners.ts
+++ b/apps/web/lib/middleware/partners.ts
@@ -4,6 +4,7 @@ import { getUserViaToken } from "./utils/get-user-via-token";
 import { isValidInternalRedirect } from "./utils/is-valid-internal-redirect";
 import { parse } from "./utils/parse";
 import {
+  partnersMarketplaceRedirects,
   partnersProgramRedirects,
   partnersRedirect,
 } from "./utils/partners-redirect";
@@ -45,7 +46,19 @@ export async function PartnersMiddleware(req: NextRequest) {
         status: 301,
       },
     );
-  } else if (!user && isAuthenticatedPath) {
+  }
+
+  const marketplaceDestination = partnersMarketplaceRedirects(
+    path,
+    searchParamsObj,
+  );
+  if (marketplaceDestination) {
+    return NextResponse.redirect(new URL(marketplaceDestination, req.url), {
+      status: 301,
+    });
+  }
+
+  if (!user && isAuthenticatedPath) {
     if (path.startsWith("/programs/")) {
       const programSlug = path.split("/")[2];
       return NextResponse.redirect(new URL(`/${programSlug}/login`, req.url));
diff --git a/apps/web/lib/middleware/utils/app-redirect.ts b/apps/web/lib/middleware/utils/app-redirect.ts
index 6f5a154c431..b27eb1f1ccf 100644
--- a/apps/web/lib/middleware/utils/app-redirect.ts
+++ b/apps/web/lib/middleware/utils/app-redirect.ts
@@ -8,7 +8,6 @@ const APP_REDIRECTS = {
   "/welcome": "/onboarding/welcome",
   "/campaigns": "/program/campaigns",
   "/messages": "/program/messages",
-  "/marketplace": "/program/network",
   "/fraud": "/program/risks",
   "/risks": "/program/risks",
 };
diff --git a/apps/web/lib/middleware/utils/partners-redirect.ts b/apps/web/lib/middleware/utils/partners-redirect.ts
index bf371c35fff..d258c3312d9 100644
--- a/apps/web/lib/middleware/utils/partners-redirect.ts
+++ b/apps/web/lib/middleware/utils/partners-redirect.ts
@@ -1,10 +1,11 @@
+import { getMarketplacePopularRedirectHref } from "@/ui/program-marketplace/utils/urls";
+
 const PARTNERS_REDIRECTS = {
   "/settings": "/profile",
   "/settings/payouts": "/payouts",
   "/settings/notifications": "/profile/notifications",
   "/account/settings/notifications": "/profile/notifications",
   "/profile/sites": "/profile",
-  "/marketplace": "/programs/marketplace",
   "/rewind": "/rewind/2025",
   "/onboarding/online-presence": "/onboarding/platforms",
   "/onboarding/verify": "/onboarding/payouts",
@@ -14,6 +15,62 @@ export const partnersRedirect = (path: string) => {
   return PARTNERS_REDIRECTS[path] || null;
 };
 
+function withQuery(
+  targetPath: string,
+  searchParams: Record<string, string | string[] | undefined>,
+) {
+  const params = new URLSearchParams();
+
+  for (const [key, value] of Object.entries(searchParams)) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => params.append(key, v));
+    } else if (typeof value === "string") {
+      params.set(key, value);
+    }
+  }
+
+  const query = params.toString();
+  return query ? `${targetPath}?${query}` : targetPath;
+}
+
+export const partnersMarketplaceRedirects = (
+  path: string,
+  searchParams: Record<string, string | string[] | undefined> = {},
+) => {
+  if (path === "/programs/marketplace") {
+    return withQuery("/marketplace", searchParams);
+  }
+
+  if (path === "/programs/marketplace/all") {
+    return withQuery("/marketplace/all", searchParams);
+  }
+
+  if (
+    path === "/programs/marketplace/popular" ||
+    path === "/marketplace/popular"
+  ) {
+    return getMarketplacePopularRedirectHref(searchParams);
+  }
+
+  const match = path.match(/^\/programs\/marketplace\/([^/]+)$/);
+
+  if (match) {
+    const slug = match[1];
+
+    if (slug === "all") {
+      return withQuery("/marketplace/all", searchParams);
+    }
+
+    if (slug === "popular") {
+      return getMarketplacePopularRedirectHref(searchParams);
+    }
+
+    return withQuery(`/marketplace/${slug}`, searchParams);
+  }
+
+  return null;
+};
+
 const PARTNERS_PROGRAM_REDIRECTS = {
   florafauna: "flora",
   "ship-30": "dwp",
diff --git a/apps/web/lib/network/program-categories.ts b/apps/web/lib/network/program-categories.ts
index 716fb4ca830..ca5bb03730b 100644
--- a/apps/web/lib/network/program-categories.ts
+++ b/apps/web/lib/network/program-categories.ts
@@ -19,71 +19,96 @@ export const PROGRAM_CATEGORIES: {
   id: Category;
   icon: Icon;
   label: string;
+  listPageDescription: string;
 }[] = [
   {
     id: Category.Artificial_Intelligence,
     label: "AI",
     icon: Sparkle3,
+    listPageDescription:
+      "Browse partner programs for AI tools and machine learning platforms.",
   },
   {
     id: Category.Development,
     label: "Development",
     icon: Code,
+    listPageDescription:
+      "Browse partner programs for developer tools and software infrastructure.",
   },
   {
     id: Category.Design,
     label: "Design",
     icon: Brush,
+    listPageDescription:
+      "Browse partner programs for design tools and creative software.",
   },
   {
     id: Category.Productivity,
     label: "Productivity",
     icon: CircleHalfDottedClock,
+    listPageDescription:
+      "Browse partner programs for productivity software and modern work tools.",
   },
   {
     id: Category.Finance,
     label: "Finance",
     icon: MoneyBill,
+    listPageDescription:
+      "Browse partner programs for finance software and fintech platforms.",
   },
   {
     id: Category.Marketing,
     label: "Marketing",
     icon: MarketingTarget,
+    listPageDescription:
+      "Browse partner programs for marketing software and growth tools.",
   },
   {
     id: Category.Ecommerce,
     label: "Ecommerce",
     icon: CreditCard,
+    listPageDescription:
+      "Browse partner programs for ecommerce platforms and online retail tools.",
   },
   {
     id: Category.Security,
     label: "Security",
     icon: ShieldKeyhole,
+    listPageDescription:
+      "Browse partner programs for security software and privacy tools.",
   },
   {
     id: Category.Education,
     label: "Education",
     icon: BookOpen,
+    listPageDescription:
+      "Browse partner programs for education platforms and learning tools.",
   },
   {
     id: Category.Health,
     label: "Health",
     icon: Heart,
+    listPageDescription:
+      "Browse partner programs for health software and wellness tools.",
   },
   {
     id: Category.Consumer,
     label: "Consumer",
     icon: User,
+    listPageDescription:
+      "Browse partner programs for consumer apps and lifestyle products.",
   },
   {
     id: Category.Support,
     label: "Support",
     icon: Headset,
+    listPageDescription:
+      "Browse partner programs for customer support and help desk tools.",
   },
 ];
 
 export const PROGRAM_CATEGORIES_MAP: Partial<
-  Record<Category, { icon: Icon; label: string }>
+  Record<Category, { icon: Icon; label: string; listPageDescription: string }>
 > = Object.fromEntries(
   PROGRAM_CATEGORIES.map((category) => [category.id, category]),
 );
diff --git a/apps/web/lib/zod/schemas/program-network.ts b/apps/web/lib/zod/schemas/program-network.ts
index 00e6d772cb1..bf46c704d08 100644
--- a/apps/web/lib/zod/schemas/program-network.ts
+++ b/apps/web/lib/zod/schemas/program-network.ts
@@ -32,6 +32,19 @@ export const NetworkProgramExtendedSchema = NetworkProgramSchema.extend({
 
 export const PROGRAM_NETWORK_MAX_PAGE_SIZE = 100;
 
+export const getPublicNetworkProgramsQuerySchema = z
+  .object({
+    category: z.enum(Category).optional(),
+    rewardType: z.enum(["sale", "lead", "click", "discount"]).optional(),
+    featured: z.coerce.boolean().optional(),
+    search: z.string().optional(),
+    sortBy: z.enum(["name", "recency", "popularity"]).default("popularity"),
+    sortOrder: z.enum(["asc", "desc"]).default("desc"),
+  })
+  .extend(
+    getPaginationQuerySchema({ pageSize: PROGRAM_NETWORK_MAX_PAGE_SIZE }),
+  );
+
 export const getNetworkProgramsQuerySchema = z
   .object({
     category: z.enum(Category).optional(),
diff --git a/apps/web/middleware.ts b/apps/web/middleware.ts
index 952f48eb820..6f31532cbdd 100644
--- a/apps/web/middleware.ts
+++ b/apps/web/middleware.ts
@@ -1,4 +1,5 @@
 import { logger } from "@/lib/axiom/server";
+import { getMarketplacePopularRedirectHref } from "@/ui/program-marketplace/utils/urls";
 import { transformMiddlewareRequest } from "@axiomhq/nextjs";
 import {
   ADMIN_HOSTNAMES,
@@ -33,7 +34,7 @@ export const config = {
 };
 
 export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
-  const { domain, path, key, fullKey } = parse(req);
+  const { domain, path, key, fullKey, fullPath, searchParamsObj } = parse(req);
 
   // Axiom logging
   logger.info(...transformMiddlewareRequest(req));
@@ -82,6 +83,20 @@ export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
     return PartnersMiddleware(req);
   }
 
+  if (
+    (path === "/marketplace" || path.startsWith("/marketplace/")) &&
+    (domain === "dub.co" ||
+      domain === `staging.${process.env.NEXT_PUBLIC_APP_DOMAIN}`)
+  ) {
+    if (path === "/marketplace/popular") {
+      return NextResponse.redirect(
+        new URL(getMarketplacePopularRedirectHref(searchParamsObj), req.url),
+      );
+    }
+
+    return NextResponse.rewrite(new URL(`/app.dub.co${fullPath}`, req.url));
+  }
+
   if (isValidUrl(fullKey)) {
     return CreateLinkMiddleware(req);
   }
diff --git a/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx b/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
index c53018ea6b7..aed090d0a8b 100644
--- a/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
+++ b/apps/web/ui/layout/sidebar/partner-program-dropdown.tsx
@@ -87,7 +87,7 @@ export function PartnerProgramDropdown() {
                   </span>
                 </Link>
                 <Link
-                  href="/programs/marketplace"
+                  href="/marketplace"
                   className={cn(
                     "flex items-center gap-x-2.5 rounded-md px-2.5 py-2 text-base transition-all duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80 sm:text-sm",
                     "outline-none focus-visible:ring-2 focus-visible:ring-black/50",
diff --git a/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx b/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
index 3edc16486b4..5bb6febfd2b 100644
--- a/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
+++ b/apps/web/ui/layout/sidebar/partners-sidebar-nav.tsx
@@ -5,7 +5,10 @@ import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { usePartnerProgramBounties } from "@/lib/swr/use-partner-program-bounties";
 import useProgramEnrollment from "@/lib/swr/use-program-enrollment";
 import useProgramEnrollmentsCount from "@/lib/swr/use-program-enrollments-count";
-import { ProgramsPromoCard } from "@/ui/partners/program-marketplace/programs-promo-card";
+import { getProgramsAreaNavItems } from "@/ui/layout/sidebar/programs-area-nav";
+import { MarketplaceSidebarPanel } from "@/ui/program-marketplace/marketplace-sidebar-panel";
+import { ProgramsPromoCard } from "@/ui/program-marketplace/programs-promo-card";
+import { isMarketplaceFilterSidebarPath } from "@/ui/program-marketplace/utils/urls";
 import { type Icon, useRouterStuff } from "@dub/ui";
 import {
   Bell,
@@ -19,7 +22,6 @@ import {
   Msgs,
   Nodes4,
   ShieldCheck,
-  Shop,
   SquareUserSparkle2,
   Trophy,
   UserCheck,
@@ -50,8 +52,19 @@ type SidebarNavData = {
   showDetailedAnalytics?: boolean;
   postbacksEnabled?: boolean;
   hasReferralReward?: boolean;
+  newsContent?: ReactNode;
 };
 
+function ProgramsAreaFooter({ newsContent }: { newsContent?: ReactNode }) {
+  return (
+    <>
+      {newsContent}
+      <ProgramsPromoCard />
+      <PayoutStats />
+    </>
+  );
+}
+
 const NAV_GROUPS: SidebarNavGroups<SidebarNavData> = ({
   pathname,
   unreadMessagesCount,
@@ -62,7 +75,8 @@ const NAV_GROUPS: SidebarNavGroups<SidebarNavData> = ({
       "View all your enrolled programs and review invitations to other programs.",
     icon: GridIcon,
     href: "/programs",
-    active: pathname.startsWith("/programs"),
+    active:
+      pathname.startsWith("/programs") || pathname.startsWith("/marketplace"),
   },
   {
     name: "Payouts",
@@ -92,42 +106,21 @@ const NAV_GROUPS: SidebarNavGroups<SidebarNavData> = ({
 
 const NAV_AREAS: SidebarNavAreas<SidebarNavData> = {
   // Top-level
-  programs: ({ invitationsCount }) => ({
-    title: (
-      <div className="mb-3">
-        <PartnerProgramDropdown />
-      </div>
-    ),
+  programs: ({ invitationsCount, newsContent }) => ({
     showNews: true,
     direction: "left",
     content: [
       {
-        items: [
-          {
-            name: "Programs",
-            icon: GridIcon,
-            href: "/programs",
-            isActive: (pathname, href) =>
-              pathname.startsWith(href) &&
-              ["invitations", "marketplace"].every(
-                (k) => !pathname.startsWith(`${href}/${k}`),
-              ),
-          },
-          {
-            name: "Marketplace",
-            icon: Shop,
-            href: "/programs/marketplace" as `/${string}`,
-            badge: "New",
-          },
-          {
-            name: "Invitations",
-            icon: UserCheck,
-            href: "/programs/invitations",
-            badge: invitationsCount || undefined,
-          },
-        ],
+        items: getProgramsAreaNavItems(invitationsCount),
       },
     ],
+    footer: <ProgramsAreaFooter newsContent={newsContent} />,
+  }),
+
+  programsMarketplace: ({ invitationsCount }) => ({
+    direction: "right",
+    content: [],
+    panel: <MarketplaceSidebarPanel invitationsCount={invitationsCount} />,
   }),
 
   profile: ({ postbacksEnabled }) => ({
@@ -326,6 +319,9 @@ export function PartnersSidebarNav({
     enabled: isEnrolledProgramPage,
   });
 
+  const isMarketplaceFilterSidebarPage =
+    isMarketplaceFilterSidebarPath(pathname);
+
   const currentArea = useMemo(() => {
     return pathname.startsWith("/account/settings")
       ? "userSettings"
@@ -335,8 +331,10 @@ export function PartnersSidebarNav({
           ? null
           : isEnrolledProgramPage
             ? "program"
-            : "programs";
-  }, [pathname, programSlug, isEnrolledProgramPage]);
+            : isMarketplaceFilterSidebarPage
+              ? "programsMarketplace"
+              : "programs";
+  }, [pathname, isEnrolledProgramPage, isMarketplaceFilterSidebarPage]);
 
   const { count: invitationsCount } = useProgramEnrollmentsCount({
     status: "invited",
@@ -390,6 +388,13 @@ export function PartnersSidebarNav({
       groups={NAV_GROUPS}
       areas={NAV_AREAS}
       currentArea={currentArea}
+      persistentAreaHeader={
+        currentArea === "programs" || currentArea === "programsMarketplace" ? (
+          <div className="mb-3">
+            <PartnerProgramDropdown />
+          </div>
+        ) : undefined
+      }
       data={{
         pathname,
         queryString: getQueryString(),
@@ -401,19 +406,11 @@ export function PartnersSidebarNav({
         showDetailedAnalytics,
         postbacksEnabled: partner?.featureFlags?.postbacks,
         hasReferralReward: !!programEnrollment?.referralRewardId,
+        newsContent,
       }}
       toolContent={composedToolContent}
       newsContent={newsContent}
-      bottom={
-        isEnrolledProgramPage ? (
-          <ProgramHelpSupport />
-        ) : (
-          <>
-            <ProgramsPromoCard />
-            <PayoutStats />
-          </>
-        )
-      }
+      bottom={isEnrolledProgramPage ? <ProgramHelpSupport /> : undefined}
     />
   );
 }
diff --git a/apps/web/ui/layout/sidebar/programs-area-nav.tsx b/apps/web/ui/layout/sidebar/programs-area-nav.tsx
new file mode 100644
index 00000000000..3362aa0f3dc
--- /dev/null
+++ b/apps/web/ui/layout/sidebar/programs-area-nav.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { GridIcon, Shop, UserCheck } from "@dub/ui/icons";
+import { NavItem, type NavItemType } from "./sidebar-nav";
+
+export function getProgramsAreaNavItems(
+  invitationsCount?: number,
+): NavItemType[] {
+  return [
+    {
+      name: "Programs",
+      icon: GridIcon,
+      href: "/programs",
+      isActive: (pathname, href) =>
+        pathname.startsWith(href) &&
+        !pathname.startsWith(`${href}/invitations`),
+    },
+    {
+      name: "Marketplace",
+      icon: Shop,
+      href: "/marketplace",
+      isActive: (pathname) => pathname.startsWith("/marketplace"),
+    },
+    {
+      name: "Invitations",
+      icon: UserCheck,
+      href: "/programs/invitations",
+      badge: invitationsCount || undefined,
+    },
+  ];
+}
+
+export function ProgramsAreaNav({
+  invitationsCount,
+}: {
+  invitationsCount?: number;
+}) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      {getProgramsAreaNavItems(invitationsCount).map((item) => (
+        <NavItem key={item.name} item={item} />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/ui/layout/sidebar/sidebar-nav.tsx b/apps/web/ui/layout/sidebar/sidebar-nav.tsx
index 8d17bf5b2fb..2f6051828cf 100644
--- a/apps/web/ui/layout/sidebar/sidebar-nav.tsx
+++ b/apps/web/ui/layout/sidebar/sidebar-nav.tsx
@@ -11,7 +11,7 @@ import {
   useScrollProgress,
 } from "@dub/ui";
 import { cn } from "@dub/utils";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ChevronRight } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -34,6 +34,9 @@ export type NavItemCommon = {
   isActive?: (pathname: string, href: string) => boolean;
   badge?: ReactNode;
   arrow?: boolean;
+  chevronRight?: boolean;
+  showChevronRight?: boolean;
+  onChevronClick?: () => void;
   locked?: boolean;
 };
 
@@ -71,6 +74,8 @@ export type SidebarNavAreas<T extends Record<any, any>> = Record<
     showNews?: boolean; // show news segment – TODO: enable this for Partner Program too
     hideSwitcherIcons?: boolean; // hide workspace switcher + product icons for this area
     direction?: "left" | "right";
+    panel?: ReactNode; // custom panel content (replaces nav items when set)
+    footer?: ReactNode; // area footer content (animates with the area body)
     content: {
       name?: string;
       items: NavItemType[];
@@ -91,6 +96,7 @@ export function SidebarNav<T extends Record<any, any>>({
   newsContent,
   switcher,
   bottom,
+  persistentAreaHeader,
 }: {
   groups: SidebarNavGroups<T>;
   areas: SidebarNavAreas<T>;
@@ -100,6 +106,7 @@ export function SidebarNav<T extends Record<any, any>>({
   newsContent?: ReactNode;
   switcher?: ReactNode;
   bottom?: ReactNode;
+  persistentAreaHeader?: ReactNode;
 }) {
   return (
     <div
@@ -127,7 +134,7 @@ export function SidebarNav<T extends Record<any, any>>({
                 </Link>
               </div>
               {(!currentArea ||
-                !areas[currentArea](data).hideSwitcherIcons) && (
+                !areas[currentArea]?.(data)?.hideSwitcherIcons) && (
                 <div className="flex flex-col gap-3">
                   {switcher}
                   {groups(data).map((group) => (
@@ -155,6 +162,7 @@ export function SidebarNav<T extends Record<any, any>>({
               currentArea={currentArea}
               newsContent={newsContent}
               bottom={bottom}
+              persistentAreaHeader={persistentAreaHeader}
             />
           </div>
         </nav>
@@ -169,99 +177,142 @@ function SidebarAreasPanel<T extends Record<any, any>>({
   currentArea,
   newsContent,
   bottom,
+  persistentAreaHeader,
 }: {
   areas: SidebarNavAreas<T>;
   data: T;
   currentArea: string | null;
   newsContent?: ReactNode;
   bottom?: ReactNode;
+  persistentAreaHeader?: ReactNode;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
   const { scrollProgress, updateScrollProgress } = useScrollProgress(scrollRef);
-  const showNews = currentArea && areas[currentArea]?.(data).showNews;
+  const currentAreaConfig = useMemo(
+    () => (currentArea ? areas[currentArea]?.(data) : undefined),
+    [currentArea, areas, data],
+  );
+  const showNews = currentAreaConfig?.showNews;
+  const currentAreaHasFooter = Boolean(currentAreaConfig?.footer);
 
   const hasOverflow = useMemo(() => {
-    if (!currentArea) return false;
-    const { content } = areas[currentArea](data);
+    if (!currentAreaConfig) return false;
+    const { content, panel } = currentAreaConfig;
+    if (panel) return true;
     const totalItems = content.flatMap((c) => c.items).length;
     return totalItems > 10;
-  }, [currentArea, areas, data]);
+  }, [currentAreaConfig]);
 
   return (
     <div className="flex h-full w-[calc(var(--sidebar-areas-width)-0.5rem)] flex-col rounded-xl bg-neutral-100">
-      {/* Scrollable content with gradient overlay */}
-      <div className="relative min-h-0 flex-1 overflow-hidden">
-        <div
-          ref={scrollRef}
-          onScroll={updateScrollProgress}
-          className={cn(
-            "scrollbar-hide h-full overflow-x-hidden rounded-xl",
-            hasOverflow ? "overflow-y-auto" : "overflow-hidden",
-          )}
-        >
-          <div className="relative flex flex-col p-3 text-neutral-500">
-            <div className="relative w-full grow">
-              {Object.entries(areas).map(([area, areaConfig]) => {
-                const { title, backHref, content, direction } =
-                  areaConfig(data);
-
-                const TitleContainer = backHref ? Link : "div";
-
-                return (
-                  <Area
-                    key={area}
-                    visible={area === currentArea}
-                    direction={direction ?? "right"}
-                  >
-                    {title &&
-                      (typeof title === "string" ? (
-                        <TitleContainer
-                          href={backHref ?? "#"}
-                          className="group mb-2 flex items-center gap-3 px-3 py-2"
-                        >
-                          {backHref && (
-                            <div
-                              className={cn(
-                                "text-content-muted bg-bg-emphasis flex size-6 items-center justify-center rounded-lg",
-                                "group-hover:bg-bg-inverted/10 group-hover:text-content-subtle transition-[transform,background-color,color] duration-150 group-hover:-translate-x-0.5",
-                              )}
-                            >
-                              <ChevronLeft className="size-3 [&_*]:stroke-2" />
-                            </div>
-                          )}
-                          <span className="text-content-emphasis text-lg font-semibold">
-                            {title}
-                          </span>
-                        </TitleContainer>
+      {persistentAreaHeader && (
+        <div className="shrink-0 px-3 pt-3">{persistentAreaHeader}</div>
+      )}
+
+      <div className="flex min-h-0 flex-1 flex-col">
+        {/* Scrollable body with gradient overlay */}
+        <div className="relative min-h-0 flex-1 overflow-hidden">
+          <div
+            ref={scrollRef}
+            onScroll={updateScrollProgress}
+            className={cn(
+              "scrollbar-hide h-full overflow-x-hidden rounded-xl",
+              hasOverflow ? "overflow-y-auto" : "overflow-hidden",
+            )}
+          >
+            <div className="relative px-3 pb-3 text-neutral-500">
+              <div className="relative w-full">
+                {Object.entries(areas).map(([area, areaConfig]) => {
+                  const { title, backHref, content, direction, panel } =
+                    areaConfig(data);
+
+                  const TitleContainer = backHref ? Link : "div";
+
+                  return (
+                    <Area
+                      key={area}
+                      visible={area === currentArea}
+                      direction={direction ?? "right"}
+                    >
+                      {title &&
+                        (typeof title === "string" ? (
+                          <TitleContainer
+                            href={backHref ?? "#"}
+                            className="group mb-2 flex items-center gap-3 px-3 py-2"
+                          >
+                            {backHref && (
+                              <div
+                                className={cn(
+                                  "text-content-muted bg-bg-emphasis flex size-6 items-center justify-center rounded-lg",
+                                  "group-hover:bg-bg-inverted/10 group-hover:text-content-subtle transition-[transform,background-color,color] duration-150 group-hover:-translate-x-0.5",
+                                )}
+                              >
+                                <ChevronLeft className="size-3 [&_*]:stroke-2" />
+                              </div>
+                            )}
+                            <span className="text-content-emphasis text-lg font-semibold">
+                              {title}
+                            </span>
+                          </TitleContainer>
+                        ) : (
+                          title
+                        ))}
+                      {panel ? (
+                        panel
                       ) : (
-                        title
-                      ))}
-                    <div className="flex flex-col gap-8">
-                      {content.map(({ name, items }, idx) => (
-                        <div key={idx} className="flex flex-col gap-0.5">
-                          {name && (
-                            <div className="mb-2 pl-3 text-sm text-neutral-500">
-                              {name}
+                        <div className="flex flex-col gap-8">
+                          {content.map(({ name, items }, idx) => (
+                            <div key={idx} className="flex flex-col gap-0.5">
+                              {name && (
+                                <div className="mb-2 pl-3 text-sm text-neutral-500">
+                                  {name}
+                                </div>
+                              )}
+                              {items.map((item) => (
+                                <NavItem key={item.name} item={item} />
+                              ))}
                             </div>
-                          )}
-                          {items.map((item) => (
-                            <NavItem key={item.name} item={item} />
                           ))}
                         </div>
-                      ))}
-                    </div>
-                  </Area>
-                );
-              })}
+                      )}
+                    </Area>
+                  );
+                })}
+              </div>
             </div>
           </div>
+          {/* Bottom scroll fade - shows when content overflows */}
+          {hasOverflow && (
+            <div
+              className="pointer-events-none absolute bottom-0 left-0 z-10 h-16 w-full rounded-b-lg bg-gradient-to-t from-neutral-100 to-transparent"
+              style={{ opacity: 1 - Math.pow(scrollProgress, 2) }}
+            />
+          )}
         </div>
-        {/* Bottom scroll fade - shows when content overflows */}
-        {hasOverflow && (
-          <div
-            className="pointer-events-none absolute bottom-0 left-0 z-10 h-16 w-full rounded-b-lg bg-gradient-to-t from-neutral-100 to-transparent"
-            style={{ opacity: 1 - Math.pow(scrollProgress, 2) }}
-          />
+
+        {/* Area footers - pinned below scroll, animate with area transitions */}
+        {Object.entries(areas).some(
+          ([, areaConfig]) => areaConfig(data).footer,
+        ) && (
+          <div className="relative shrink-0 overflow-hidden">
+            {Object.entries(areas).map(([area, areaConfig]) => {
+              const { direction, footer } = areaConfig(data);
+
+              if (!footer) {
+                return null;
+              }
+
+              return (
+                <Area
+                  key={`${area}-footer`}
+                  visible={area === currentArea}
+                  direction={direction ?? "right"}
+                >
+                  <div className="flex flex-col gap-2">{footer}</div>
+                </Area>
+              );
+            })}
+          </div>
         )}
       </div>
 
@@ -279,21 +330,23 @@ function SidebarAreasPanel<T extends Record<any, any>>({
           </div>
         )}
 
-        <AnimatePresence>
-          {showNews && (
-            <motion.div
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              exit={{ opacity: 0, y: 10 }}
-              transition={{
-                duration: 0.1,
-                ease: "easeInOut",
-              }}
-            >
-              {newsContent}
-            </motion.div>
-          )}
-        </AnimatePresence>
+        {!currentAreaHasFooter && (
+          <AnimatePresence>
+            {showNews && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 10 }}
+                transition={{
+                  duration: 0.1,
+                  ease: "easeInOut",
+                }}
+              >
+                {newsContent}
+              </motion.div>
+            )}
+          </AnimatePresence>
+        )}
 
         {bottom && <div className="flex flex-col">{bottom}</div>}
       </div>
@@ -410,8 +463,17 @@ function NavGroupItem({
   );
 }
 
-function NavItem({ item }: { item: NavItemType | NavSubItemType }) {
-  const { name, href, exact, isActive: customIsActive, locked } = item;
+export function NavItem({ item }: { item: NavItemType | NavSubItemType }) {
+  const {
+    name,
+    href,
+    exact,
+    isActive: customIsActive,
+    locked,
+    chevronRight,
+    showChevronRight,
+    onChevronClick,
+  } = item;
 
   const Icon = "icon" in item ? item.icon : undefined;
   const items = "items" in item ? item.items : undefined;
@@ -431,11 +493,21 @@ function NavItem({ item }: { item: NavItemType | NavSubItemType }) {
       : pathname.startsWith(hrefWithoutQuery);
   }, [pathname, href, exact, customIsActive]);
 
+  const showChevron = Boolean(
+    chevronRight && isActive && (showChevronRight ?? true),
+  );
+
   return (
     <div>
       <Link
-        href={locked ? "#" : href}
+        href={locked || showChevron ? "#" : href}
         data-active={isActive}
+        onClick={(e) => {
+          if (showChevron) {
+            e.preventDefault();
+            onChevronClick?.();
+          }
+        }}
         onPointerEnter={() => !locked && setHovered(true)}
         onPointerLeave={() => !locked && setHovered(false)}
         className={cn(
@@ -484,6 +556,22 @@ function NavItem({ item }: { item: NavItemType | NavSubItemType }) {
           {item.arrow && (
             <ArrowUpRight2 className="text-content-default size-3.5 transition-transform duration-75 group-hover:-translate-y-px group-hover:translate-x-px" />
           )}
+          {chevronRight && (
+            <AnimatePresence initial={false}>
+              {showChevron && (
+                <motion.span
+                  key="chevron-right"
+                  initial={{ opacity: 0, x: -4 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  exit={{ opacity: 0, x: 4 }}
+                  transition={{ duration: 0.2, ease: "easeInOut" }}
+                  className="inline-flex"
+                >
+                  <ChevronRight className="text-content-muted size-3.5 transition-[color,transform] duration-75 group-hover:translate-x-0.5 group-hover:text-blue-600 [&_*]:stroke-2" />
+                </motion.span>
+              )}
+            </AnimatePresence>
+          )}
         </span>
       </Link>
       {items && (
diff --git a/apps/web/ui/partners/program-application-sheet.tsx b/apps/web/ui/partners/program-application-sheet.tsx
index 18717f92c57..3969911e6bc 100644
--- a/apps/web/ui/partners/program-application-sheet.tsx
+++ b/apps/web/ui/partners/program-application-sheet.tsx
@@ -315,9 +315,7 @@ function ProgramApplicationSheetForm({
           </p>
           <Link
             href={
-              backDestination === "marketplace"
-                ? "/programs/marketplace"
-                : "/programs"
+              backDestination === "marketplace" ? "/marketplace" : "/programs"
             }
             className={cn(
               buttonVariants({ variant: "primary" }),
diff --git a/apps/web/ui/partners/program-marketplace/program-category.tsx b/apps/web/ui/partners/program-marketplace/program-category.tsx
deleted file mode 100644
index 798819a5bd4..00000000000
--- a/apps/web/ui/partners/program-marketplace/program-category.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
-import { Category } from "@dub/prisma/client";
-import { CircleInfo } from "@dub/ui";
-import { cn } from "@dub/utils";
-
-export const ProgramCategory = ({
-  category,
-  onClick,
-  className,
-}: {
-  category: Category;
-  onClick?: () => void;
-  className?: string;
-}) => {
-  const categoryData = PROGRAM_CATEGORIES_MAP[category];
-  const { icon: Icon, label } = categoryData ?? {
-    icon: CircleInfo,
-    label: category.replaceAll("_", " "),
-  };
-
-  const As = onClick ? "button" : "div";
-
-  return (
-    <As
-      {...(onClick && {
-        type: "button",
-        onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          onClick?.();
-        },
-      })}
-      className={cn(
-        "text-content-default -ml-1 flex h-6 min-w-0 items-center gap-1 rounded-md px-1",
-        onClick && "hover:bg-bg-subtle active:bg-bg-emphasis",
-        className,
-      )}
-    >
-      <Icon className="size-4" />
-      <span className="min-w-0 truncate text-sm font-medium">{label}</span>
-    </As>
-  );
-};
diff --git a/apps/web/ui/partners/program-marketplace/program-marketplace-logos.tsx b/apps/web/ui/partners/program-marketplace/program-marketplace-logos.tsx
deleted file mode 100644
index 0bf53c92d4e..00000000000
--- a/apps/web/ui/partners/program-marketplace/program-marketplace-logos.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { cn } from "@dub/utils";
-
-// x, y, rotation, size, z (/shadow)
-const LOGOS = [
-  // Perplexity
-  { x: 0, y: 16, r: 22, s: 1 },
-  // Dub
-  { x: 23, y: 0, r: -7, s: 0.7 },
-  // Tella
-  { x: 44, y: 24, r: 13, s: 0.8 },
-  // Buffer
-  { x: 62, y: 0, r: -49, s: 0.8 },
-  // Superhuman
-  { x: 82, y: 28, r: -26, s: 0.75 },
-  // Framer
-  { x: 12, y: 50, r: -11, s: 0.75 },
-  // Polymarket
-  { x: 26, y: 34, r: -10, s: 0.9, z: 1 },
-  // Fillout
-  { x: 40, y: 48, r: -11, s: 0.75 },
-  // Copper
-  { x: 60, y: 54, r: -18, s: 0.9 },
-  // Firecrawl
-  { x: 78, y: 50, r: -37, s: 0.75, z: 1 },
-  // Wispr Flow
-  { x: 0, y: 72, r: 15, s: 0.8, z: 1 },
-  // Granola
-  { x: 26, y: 70, r: 4, s: 0.8 },
-];
-export const PROGRAM_MARKETPLACE_LOGO_COUNT = LOGOS.length;
-
-export function ProgramMarketplaceLogos({ className }: { className?: string }) {
-  return (
-    <div
-      className={cn(
-        "relative z-0 flex size-full flex-wrap gap-2 [--logo-size:32px]",
-        className,
-      )}
-    >
-      {LOGOS.map(({ x, y, r, s, z }, index) => {
-        return (
-          <div
-            key={index}
-            className={cn(
-              "animate-float absolute",
-              index % 2 === 0 && "[animation-direction:reverse]",
-            )}
-            style={{
-              left: `${x}%`,
-              top: `${y}%`,
-              animationDelay: `-${index * 0.1}s`,
-            }}
-          >
-            <div
-              className={cn(z && "drop-shadow-sm")}
-              style={{
-                transform: `rotate(${r}deg)`,
-                width: `calc(var(--logo-size, 32px) * ${s})`,
-                height: `calc(var(--logo-size, 32px) * ${s})`,
-                zIndex: z,
-                backgroundImage:
-                  "url(https://assets.dub.co/misc/program-marketplace-logos.png)",
-                backgroundSize: `${PROGRAM_MARKETPLACE_LOGO_COUNT * 100}%`,
-                backgroundPositionX:
-                  (PROGRAM_MARKETPLACE_LOGO_COUNT -
-                    (index % PROGRAM_MARKETPLACE_LOGO_COUNT)) *
-                    100 +
-                  "%",
-              }}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
diff --git a/apps/web/ui/partners/rewind/partner-rewind-banner.tsx b/apps/web/ui/partners/rewind/partner-rewind-banner.tsx
index f2cd06947fc..efa2f9856f8 100644
--- a/apps/web/ui/partners/rewind/partner-rewind-banner.tsx
+++ b/apps/web/ui/partners/rewind/partner-rewind-banner.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import usePartnerRewind from "@/lib/swr/use-partner-rewind";
+import { ProgramMarketplaceBanner } from "@/ui/program-marketplace/program-marketplace-banner";
 import { X } from "@/ui/shared/icons";
 import { Button, Grid, buttonVariants } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
 import Link from "next/link";
-import { ProgramMarketplaceBanner } from "../program-marketplace/program-marketplace-banner";
 import { usePartnerRewindStatus } from "./use-partner-rewind-status";
 
 export function PartnerRewindBanner() {
diff --git a/apps/web/ui/program-marketplace/constants.ts b/apps/web/ui/program-marketplace/constants.ts
new file mode 100644
index 00000000000..3bd0bf0364d
--- /dev/null
+++ b/apps/web/ui/program-marketplace/constants.ts
@@ -0,0 +1,56 @@
+import {
+  Calendar6,
+  SortAlphaAscending,
+  SortAlphaDescending,
+  Star,
+} from "@dub/ui/icons";
+
+export const MARKETPLACE_REWARD_TYPES = {
+  sale: "Sale reward (CPS)",
+  lead: "Lead reward (CPL)",
+  click: "Click reward (CPC)",
+  discount: "Dual-sided incentives",
+} as const;
+
+export type MarketplaceRewardType = keyof typeof MARKETPLACE_REWARD_TYPES;
+
+export const MARKETPLACE_SORT_OPTIONS = [
+  {
+    icon: Star,
+    label: "Most popular",
+    value: "popularity",
+    order: "desc",
+  },
+  {
+    icon: Calendar6,
+    label: "Newest",
+    value: "recency",
+    order: "desc",
+  },
+  {
+    icon: SortAlphaAscending,
+    label: "Name A-Z",
+    value: "name",
+    order: "asc",
+  },
+  {
+    icon: SortAlphaDescending,
+    label: "Name Z-A",
+    value: "name",
+    order: "desc",
+  },
+] as const;
+
+export function isDefaultMarketplaceSort(sortBy: string, sortOrder: string) {
+  return sortBy === "popularity" && sortOrder === "desc";
+}
+
+export function getMarketplaceToolbarBadgeCount(
+  activeFilterCount: number,
+  sortBy: string,
+  sortOrder: string,
+) {
+  return (
+    activeFilterCount + (isDefaultMarketplaceSort(sortBy, sortOrder) ? 0 : 1)
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-filters.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-filters.tsx
new file mode 100644
index 00000000000..48d78afc083
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-filters.tsx
@@ -0,0 +1,150 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import {
+  MARKETPLACE_REWARD_TYPES,
+  type MarketplaceRewardType,
+} from "@/ui/program-marketplace/constants";
+import { buildExternalMarketplaceFilterHref } from "@/ui/program-marketplace/utils/urls";
+import { Category } from "@dub/prisma/client";
+import { Check } from "@dub/ui";
+import { cn } from "@dub/utils";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+export function MarketplaceExternalFilterSidebar({
+  basePath,
+  activeCategory,
+  activeRewardType,
+  categoryCounts,
+  rewardTypeCounts,
+  search,
+  sortBy,
+  sortOrder,
+}: {
+  basePath: string;
+  activeCategory?: Category;
+  activeRewardType?: MarketplaceRewardType;
+  categoryCounts: { category: Category; count: number }[];
+  rewardTypeCounts: {
+    type: MarketplaceRewardType;
+    count: number;
+  }[];
+  search?: string;
+  sortBy?: string;
+  sortOrder?: string;
+}) {
+  const buildHref = (params: {
+    category?: Category | null;
+    rewardType?: MarketplaceRewardType | null;
+  }) =>
+    buildExternalMarketplaceFilterHref({
+      basePath,
+      activeRewardType,
+      search,
+      sortBy,
+      sortOrder,
+      ...params,
+    });
+
+  return (
+    <aside className="w-full shrink-0 lg:w-56">
+      <div className="flex flex-col gap-6">
+        <FilterSection title="Reward type">
+          {rewardTypeCounts.map(({ type, count }) => (
+            <FilterLink
+              key={type}
+              href={buildHref({
+                rewardType: activeRewardType === type ? null : type,
+              })}
+              active={activeRewardType === type}
+              count={count}
+            >
+              {MARKETPLACE_REWARD_TYPES[type]}
+            </FilterLink>
+          ))}
+        </FilterSection>
+
+        <FilterSection title="Category">
+          {categoryCounts.map(({ category, count }) => (
+            <FilterLink
+              key={category}
+              href={buildHref({
+                category: activeCategory === category ? null : category,
+              })}
+              active={activeCategory === category}
+              count={count}
+            >
+              {PROGRAM_CATEGORIES_MAP[category]?.label ??
+                category.replaceAll("_", " ")}
+            </FilterLink>
+          ))}
+        </FilterSection>
+      </div>
+    </aside>
+  );
+}
+
+function FilterSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-content-emphasis px-2 py-2 text-sm font-semibold">
+        {title}
+      </span>
+      <div className="flex flex-col gap-1">{children}</div>
+    </div>
+  );
+}
+
+function FilterLink({
+  href,
+  active,
+  count,
+  children,
+}: {
+  href: string;
+  active: boolean;
+  count: number;
+  children: ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "flex items-center gap-3 rounded-md px-2 py-2 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100",
+        active && "bg-neutral-100",
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
+          active ? "border-neutral-900 bg-neutral-900" : "border-neutral-300",
+        )}
+      >
+        {active ? <Check className="h-3 w-3 text-white" /> : null}
+      </div>
+      <span className="min-w-0 flex-1 truncate">{children}</span>
+      <span className="shrink-0 text-xs tabular-nums text-neutral-400">
+        {count}
+      </span>
+    </Link>
+  );
+}
+
+export function getMarketplaceExternalBasePath({ slug }: { slug?: string[] }) {
+  const segments = slug ?? [];
+
+  if (segments.length === 1 && segments[0] === "all") {
+    return "/marketplace/all";
+  }
+
+  if (segments.length === 2 && segments[0] === "c") {
+    return `/marketplace/c/${segments[1]}`;
+  }
+
+  return "/marketplace/all";
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-header.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-header.tsx
new file mode 100644
index 00000000000..db6d9f95c70
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-header.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { NavMobile, Nav as NavUI, Wordmark } from "@dub/ui";
+import Link from "next/link";
+import { getMarketplaceHref } from "../utils/urls";
+
+const DUB_HOME_HREF = "https://dub.co/home";
+
+function MarketplaceLogo() {
+  return (
+    <div className="flex items-center gap-2.5">
+      <Link
+        href={DUB_HOME_HREF}
+        className="transition-opacity hover:opacity-80"
+      >
+        <Wordmark className="h-6" />
+      </Link>
+      <span className="text-lg font-light text-neutral-300">|</span>
+      <Link
+        href={getMarketplaceHref()}
+        className="text-sm font-medium text-neutral-500 transition-opacity hover:opacity-80"
+      >
+        Programs
+      </Link>
+    </div>
+  );
+}
+
+export function MarketplaceExternalHeader() {
+  return (
+    <>
+      <NavMobile navItems={[]} />
+      <NavUI staticDomain="dub.co" navItems={[]} logo={<MarketplaceLogo />} />
+    </>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-home-page.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-home-page.tsx
new file mode 100644
index 00000000000..332291dc9d0
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-home-page.tsx
@@ -0,0 +1,46 @@
+import { getPublicNetworkPrograms } from "@/lib/fetchers/get-public-network-programs";
+import { FeaturedPrograms } from "../featured-programs";
+import { MARKETPLACE_HOME_ROWS } from "../home-sections";
+import { MarketplaceCategories } from "../marketplace-categories";
+import { MarketplaceProgramRow } from "../marketplace-program-row";
+import { MarketplaceExternalShell } from "./marketplace-external-shell";
+
+async function fetchHomePrograms(
+  params: Parameters<typeof getPublicNetworkPrograms>[0],
+) {
+  try {
+    return await getPublicNetworkPrograms(params);
+  } catch (error) {
+    console.error("Failed to fetch marketplace home programs:", error);
+    return [];
+  }
+}
+
+export async function MarketplaceExternalHomePage() {
+  const [featuredPrograms, ...rowPrograms] = await Promise.all([
+    fetchHomePrograms({ featured: true, pageSize: 6 }),
+    ...MARKETPLACE_HOME_ROWS.map((row) => fetchHomePrograms(row.fetchParams)),
+  ]);
+
+  return (
+    <MarketplaceExternalShell variant="home">
+      <div className="flex flex-col gap-10">
+        <div className="-mx-4 -mt-8 px-2 sm:-mx-6 lg:-mx-8">
+          <FeaturedPrograms programs={featuredPrograms} showStatus={false} />
+        </div>
+        <MarketplaceCategories />
+        {MARKETPLACE_HOME_ROWS.map((row, index) => (
+          <MarketplaceProgramRow
+            key={row.key}
+            variant="home"
+            title={row.title}
+            viewAllHref={row.viewAllHref}
+            programs={rowPrograms[index]}
+            showViewAllCard={row.showViewAllCard}
+            showStatus={false}
+          />
+        ))}
+      </div>
+    </MarketplaceExternalShell>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-list-page-client.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-list-page-client.tsx
new file mode 100644
index 00000000000..ca3c1e60b93
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-list-page-client.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { EXTERNAL_MARKETPLACE_PAGE_SIZE } from "@/lib/marketplace/parse-public-marketplace-query";
+import { NetworkProgramProps } from "@/lib/types";
+import { getPublicNetworkProgramsQuerySchema } from "@/lib/zod/schemas/program-network";
+import { Category } from "@dub/prisma/client";
+import { useRouterStuff } from "@dub/ui";
+import { cn, fetcher } from "@dub/utils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useEffect, useMemo } from "react";
+import useSWR from "swr";
+import { type MarketplaceRewardType } from "../constants";
+import { MarketplaceListToolbar } from "../marketplace-list-toolbar";
+import {
+  MarketplaceProgramGrid,
+  MarketplaceProgramGridEmpty,
+  MarketplaceProgramGridSkeleton,
+} from "../marketplace-program-grid";
+import { MarketplaceExternalFilterSidebar } from "./marketplace-external-filters";
+
+const PAGE_SIZE = EXTERNAL_MARKETPLACE_PAGE_SIZE;
+
+type FilterCounts = {
+  categories: { category: Category; count: number }[];
+  rewardTypes: {
+    type: MarketplaceRewardType;
+    count: number;
+  }[];
+};
+
+function pickString(value: string | string[] | undefined) {
+  return typeof value === "string" ? value : undefined;
+}
+
+export function MarketplaceExternalListPageClient({
+  basePath,
+  fixedCategory,
+}: {
+  basePath: string;
+  fixedCategory?: Category;
+}) {
+  const router = useRouter();
+  const { getQueryString, searchParamsObj } = useRouterStuff();
+
+  const parsed = useMemo(
+    () =>
+      getPublicNetworkProgramsQuerySchema.safeParse({
+        rewardType: pickString(searchParamsObj.rewardType),
+        search: pickString(searchParamsObj.search),
+        sortBy: pickString(searchParamsObj.sortBy),
+        sortOrder: pickString(searchParamsObj.sortOrder),
+        page: pickString(searchParamsObj.page),
+        pageSize: PAGE_SIZE,
+        ...(fixedCategory ? { category: fixedCategory } : {}),
+      }),
+    [fixedCategory, searchParamsObj],
+  );
+
+  useEffect(() => {
+    if (!parsed.success) {
+      router.replace(basePath);
+    }
+  }, [basePath, parsed.success, router]);
+
+  const queryString = parsed.success
+    ? getQueryString({
+        ...(fixedCategory ? { category: fixedCategory } : {}),
+        pageSize: String(PAGE_SIZE),
+      })
+    : null;
+
+  const { data: programs, isValidating } = useSWR<NetworkProgramProps[]>(
+    queryString ? `/api/marketplace/programs${queryString}` : null,
+    fetcher,
+    { revalidateOnFocus: false, keepPreviousData: true },
+  );
+
+  const { data: totalCount = 0 } = useSWR<number>(
+    queryString ? `/api/marketplace/programs/count${queryString}` : null,
+    fetcher,
+    { revalidateOnFocus: false },
+  );
+
+  const { data: filterCounts } = useSWR<FilterCounts>(
+    queryString
+      ? `/api/marketplace/programs/filter-counts${queryString}`
+      : null,
+    fetcher,
+    { revalidateOnFocus: false },
+  );
+
+  if (!parsed.success) {
+    return <MarketplaceProgramGridSkeleton />;
+  }
+
+  const { rewardType, search, sortBy, sortOrder, page = 1 } = parsed.data;
+  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
+
+  return (
+    <div className="flex flex-col gap-8 lg:flex-row lg:items-start lg:gap-10">
+      {filterCounts ? (
+        <div className="hidden shrink-0 lg:block">
+          <MarketplaceExternalFilterSidebar
+            basePath={basePath}
+            activeCategory={fixedCategory}
+            activeRewardType={rewardType}
+            categoryCounts={filterCounts.categories}
+            rewardTypeCounts={filterCounts.rewardTypes}
+            search={search}
+            sortBy={sortBy}
+            sortOrder={sortOrder}
+          />
+        </div>
+      ) : null}
+
+      <div className="@container/page flex min-w-0 flex-1 flex-col gap-6">
+        <MarketplaceListToolbar
+          variant="external"
+          basePath={basePath}
+          activeCategory={fixedCategory}
+          categoryCounts={filterCounts?.categories ?? []}
+          rewardTypeCounts={filterCounts?.rewardTypes ?? []}
+        />
+
+        {!programs ? (
+          <MarketplaceProgramGridSkeleton />
+        ) : programs.length > 0 ? (
+          <MarketplaceProgramGrid
+            programs={programs}
+            showStatus={false}
+            className={cn(isValidating && "opacity-50")}
+          />
+        ) : (
+          <MarketplaceProgramGridEmpty />
+        )}
+
+        {totalPages > 1 ? (
+          <div className="flex items-center justify-center gap-2">
+            {Array.from({ length: totalPages }, (_, index) => {
+              const pageNumber = index + 1;
+              const queryParams = new URLSearchParams();
+
+              if (rewardType) queryParams.set("rewardType", rewardType);
+              if (search) queryParams.set("search", search);
+              if (sortBy !== "popularity") queryParams.set("sortBy", sortBy);
+              if (sortOrder !== "desc") queryParams.set("sortOrder", sortOrder);
+              if (pageNumber > 1) queryParams.set("page", String(pageNumber));
+
+              const query = queryParams.toString();
+
+              return (
+                <Link
+                  key={pageNumber}
+                  href={`${basePath}${query ? `?${query}` : ""}`}
+                  className={
+                    pageNumber === page
+                      ? "rounded-lg bg-neutral-900 px-3 py-1.5 text-sm font-medium text-white"
+                      : "border-border-subtle hover:bg-bg-subtle rounded-lg border px-3 py-1.5 text-sm font-medium"
+                  }
+                >
+                  {pageNumber}
+                </Link>
+              );
+            })}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-list-page.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-list-page.tsx
new file mode 100644
index 00000000000..5bf28bea74d
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-list-page.tsx
@@ -0,0 +1,39 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { Category } from "@dub/prisma/client";
+import { getMarketplaceExternalBasePath } from "./marketplace-external-filters";
+import { MarketplaceExternalListPageClient } from "./marketplace-external-list-page-client";
+import { MarketplaceExternalShell } from "./marketplace-external-shell";
+
+export function MarketplaceExternalListPage({
+  slug,
+  fixedCategory,
+}: {
+  slug?: string[];
+  fixedCategory?: Category;
+}) {
+  const basePath = getMarketplaceExternalBasePath({ slug });
+  const categoryMeta = fixedCategory
+    ? PROGRAM_CATEGORIES_MAP[fixedCategory]
+    : undefined;
+
+  return (
+    <MarketplaceExternalShell
+      variant="list"
+      title={
+        categoryMeta ? (
+          <>
+            {categoryMeta.label} partner
+            <br />
+            programs
+          </>
+        ) : undefined
+      }
+      description={categoryMeta?.listPageDescription}
+    >
+      <MarketplaceExternalListPageClient
+        basePath={basePath}
+        fixedCategory={fixedCategory}
+      />
+    </MarketplaceExternalShell>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-program-page.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-program-page.tsx
new file mode 100644
index 00000000000..2db92c4f827
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-program-page.tsx
@@ -0,0 +1,65 @@
+import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
+import { ApplicationAnalytics } from "@/ui/application-analytics";
+import { MarketplaceProgramDetailBody } from "@/ui/program-marketplace/marketplace-program-detail-body";
+import { MarketplaceProgramDetailsLayout } from "@/ui/program-marketplace/marketplace-program-details-layout";
+import { MarketplaceProgramHero } from "@/ui/program-marketplace/marketplace-program-hero";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceHref,
+  getMarketplacePublicApplyHref,
+} from "@/ui/program-marketplace/utils/urls";
+import { Button, ChevronLeft } from "@dub/ui";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { MarketplaceExternalShell } from "./marketplace-external-shell";
+
+export async function MarketplaceExternalProgramPage({
+  programSlug,
+}: {
+  programSlug: string;
+}) {
+  const program = await getNetworkProgram({
+    slug: programSlug,
+  });
+
+  if (!program) {
+    redirect(getMarketplaceHref());
+  }
+
+  return (
+    <>
+      <ApplicationAnalytics />
+      <MarketplaceExternalShell variant="none">
+        <MarketplaceProgramDetailsLayout
+          header={
+            <Link
+              href={getMarketplaceAllHref()}
+              className="group inline-flex items-center gap-1 text-xs font-medium text-neutral-800 transition-colors hover:text-neutral-500"
+            >
+              <ChevronLeft className="size-[10px] text-neutral-500 transition-transform group-hover:-translate-x-0.5" />
+              All Programs
+            </Link>
+          }
+          hero={
+            <MarketplaceProgramHero
+              program={program}
+              applySlot={
+                <Link
+                  href={getMarketplacePublicApplyHref(program.slug)}
+                  className="inline-block w-fit"
+                >
+                  <Button
+                    text="Apply"
+                    className="h-10 w-fit rounded-lg px-6 text-sm font-medium"
+                  />
+                </Link>
+              }
+            />
+          }
+        >
+          <MarketplaceProgramDetailBody program={program} />
+        </MarketplaceProgramDetailsLayout>
+      </MarketplaceExternalShell>
+    </>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-router.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-router.tsx
new file mode 100644
index 00000000000..4346d7665fd
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-router.tsx
@@ -0,0 +1,33 @@
+import { notFound } from "next/navigation";
+import { slugToCategory } from "../utils/urls";
+import { MarketplaceExternalHomePage } from "./marketplace-external-home-page";
+import { MarketplaceExternalListPage } from "./marketplace-external-list-page";
+import { MarketplaceExternalProgramPage } from "./marketplace-external-program-page";
+
+export async function MarketplaceExternalRouter({ slug }: { slug?: string[] }) {
+  const segments = slug ?? [];
+
+  if (segments.length === 0) {
+    return <MarketplaceExternalHomePage />;
+  }
+
+  if (segments.length === 1 && segments[0] === "all") {
+    return <MarketplaceExternalListPage slug={slug} />;
+  }
+
+  if (segments.length === 2 && segments[0] === "c") {
+    const category = slugToCategory(segments[1]);
+
+    if (category) {
+      return (
+        <MarketplaceExternalListPage slug={slug} fixedCategory={category} />
+      );
+    }
+  }
+
+  if (segments.length === 1) {
+    return <MarketplaceExternalProgramPage programSlug={segments[0]} />;
+  }
+
+  notFound();
+}
diff --git a/apps/web/ui/program-marketplace/external/marketplace-external-shell.tsx b/apps/web/ui/program-marketplace/external/marketplace-external-shell.tsx
new file mode 100644
index 00000000000..67cbe53e77c
--- /dev/null
+++ b/apps/web/ui/program-marketplace/external/marketplace-external-shell.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@dub/utils";
+import { ReactNode } from "react";
+
+const CONTAINER_CLASS = "mx-auto w-full max-w-screen-xl px-4 sm:px-6 lg:px-8";
+
+export function MarketplaceExternalShell({
+  variant = "home",
+  title,
+  description,
+  children,
+}: {
+  variant?: "home" | "list" | "none";
+  title?: ReactNode;
+  description?: string;
+  children: ReactNode;
+}) {
+  if (variant === "none") {
+    return (
+      <div className={cn(CONTAINER_CLASS, "relative z-10 pb-10 pt-6")}>
+        {children}
+      </div>
+    );
+  }
+
+  const year = new Date().getFullYear();
+
+  const resolvedTitle =
+    title ??
+    (variant === "home" ? (
+      <>
+        Best SaaS affiliate
+        <br />
+        programs in {year}
+      </>
+    ) : (
+      "Find your next partnership"
+    ));
+
+  const resolvedDescription =
+    description ??
+    (variant === "home"
+      ? `Browse and apply to the best SaaS affiliate programs on Dub's Partner Network.`
+      : "Explore the Dub Partner marketplace and start earning.");
+
+  return (
+    <div className="relative z-10 flex flex-col">
+      <div className={cn(CONTAINER_CLASS, "pb-12 pt-20")}>
+        <div className="flex flex-col gap-4">
+          <h1 className="font-display text-[50px] font-medium leading-[1.1] text-neutral-900">
+            {resolvedTitle}
+          </h1>
+          <p className="max-w-2xl text-lg font-normal text-neutral-600">
+            {resolvedDescription}
+          </p>
+        </div>
+      </div>
+      <div className="h-px w-full bg-neutral-200" />
+      <div className={cn(CONTAINER_CLASS, "py-10")}>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/featured-program-card.tsx b/apps/web/ui/program-marketplace/featured-program-card.tsx
new file mode 100644
index 00000000000..15e563339ca
--- /dev/null
+++ b/apps/web/ui/program-marketplace/featured-program-card.tsx
@@ -0,0 +1,235 @@
+import { NetworkProgramProps } from "@/lib/types";
+import {
+  ProgramCategory,
+  programCategorySurfaceClassName,
+} from "@/ui/program-marketplace/program-category";
+import { ProgramRewardsDisplay } from "@/ui/program-marketplace/program-rewards-display";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryHref,
+  getMarketplaceProgramHref,
+} from "@/ui/program-marketplace/utils/urls";
+import { Tooltip } from "@dub/ui";
+import { ArrowUpRight, Link4 } from "@dub/ui/icons";
+import { OG_AVATAR_URL, getDomainWithoutWWW } from "@dub/utils";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ProgramStatusBadge } from "./program-status-badge";
+import { useImageAccentColor } from "./use-image-accent-color";
+
+const FEATURED_CARD_BACKGROUNDS = [
+  "#FFF1F2", // rose-50
+  "#F0F9FF", // sky-50
+  "#FFFBEB", // amber-50
+  "#F5F3FF", // violet-50
+  "#ECFDF5", // emerald-50
+  "#FFF7ED", // orange-50
+  "#FDF4FF", // fuchsia-50
+  "#F0FDFA", // teal-50
+  "#EEF2FF", // indigo-50
+  "#F7FEE7", // lime-50
+];
+
+export function getFeaturedCardBackground(index: number) {
+  return FEATURED_CARD_BACKGROUNDS[
+    ((index % FEATURED_CARD_BACKGROUNDS.length) +
+      FEATURED_CARD_BACKGROUNDS.length) %
+      FEATURED_CARD_BACKGROUNDS.length
+  ];
+}
+
+export function FeaturedProgramCard({
+  program,
+  showStatus = true,
+  colorIndex = 0,
+}: {
+  program: NetworkProgramProps;
+  showStatus?: boolean;
+  colorIndex?: number;
+}) {
+  const router = useRouter();
+
+  // Derive the tint from the program's image
+  // Fall back to the palette if extraction is blocked
+  const { color: accentColor, ready: accentReady } = useImageAccentColor(
+    program.marketplaceHeaderImage ?? program.logo,
+  );
+  const backgroundColor = accentColor ?? getFeaturedCardBackground(colorIndex);
+
+  return (
+    <Link
+      href={getMarketplaceProgramHref(program.slug)}
+      className="relative flex h-full flex-col-reverse gap-4 overflow-hidden rounded-2xl p-2 sm:min-h-[340px] sm:flex-row"
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 transition-opacity duration-500 ease-out"
+        style={{ backgroundColor, opacity: accentReady ? 1 : 0 }}
+      />
+
+      <div className="relative z-20 flex min-w-0 flex-1 flex-col p-6">
+        <div className="-mt-16 flex justify-between gap-4 sm:mt-0">
+          <img
+            src={program.logo || `${OG_AVATAR_URL}${program.name}`}
+            alt={program.name}
+            className="size-12 rounded-full border-4 border-neutral-100 sm:border sm:border-black/5"
+          />
+
+          {showStatus ? <ProgramStatusBadge program={program} /> : null}
+        </div>
+
+        <div className="flex flex-col pt-4 sm:mt-auto sm:pt-10">
+          <span className="text-content-emphasis text-2xl font-semibold">
+            {program.name}
+          </span>
+
+          <div className="text-content-default mt-1 line-clamp-2 max-w-sm text-sm">
+            {program.description ||
+              `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
+          </div>
+
+          <div className="mt-5 flex flex-wrap gap-x-8 gap-y-4">
+            {Boolean(program.rewards?.length) && (
+              <div>
+                <span className="block text-xs font-medium text-neutral-400">
+                  Rewards
+                </span>
+                <ProgramRewardsDisplay
+                  iconsOnly
+                  rewards={program.rewards}
+                  onRewardClick={(reward) =>
+                    router.push(
+                      getMarketplaceAllHref({ rewardType: reward.event }),
+                    )
+                  }
+                  className="mt-2 min-h-6"
+                  iconClassName="text-neutral-900"
+                />
+              </div>
+            )}
+            {Boolean(program.categories.length) && (
+              <div className="min-w-0">
+                <span className="block text-xs font-medium text-neutral-400">
+                  Category
+                </span>
+                <div className="mt-2 flex min-h-6 items-center gap-1.5">
+                  {program.categories
+                    .slice(0, 1)
+                    ?.map((category) => (
+                      <ProgramCategory
+                        key={category}
+                        category={category}
+                        variant="surface"
+                        onClick={() =>
+                          router.push(getMarketplaceCategoryHref(category))
+                        }
+                      />
+                    ))}
+                  {program.categories.length > 1 && (
+                    <Tooltip
+                      content={
+                        <div className="flex flex-col gap-1 p-1">
+                          {program.categories.slice(1).map((category) => (
+                            <ProgramCategory
+                              key={category}
+                              category={category}
+                              variant="surface"
+                              onClick={() =>
+                                router.push(
+                                  getMarketplaceCategoryHref(category),
+                                )
+                              }
+                            />
+                          ))}
+                        </div>
+                      }
+                    >
+                      <div className={programCategorySurfaceClassName}>
+                        +{program.categories.length - 1}
+                      </div>
+                    </Tooltip>
+                  )}
+                </div>
+              </div>
+            )}
+            {program.url && (
+              <div className="basis-full sm:basis-auto">
+                <span className="block text-xs font-medium text-neutral-400">
+                  Website
+                </span>
+                <button
+                  type="button"
+                  aria-label={`Visit ${getDomainWithoutWWW(program.url)}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    window.open(
+                      program.url as string,
+                      "_blank",
+                      "noopener,noreferrer",
+                    );
+                  }}
+                  className="mt-2 flex max-w-[220px] items-center gap-1 text-sm font-medium text-neutral-900 transition-colors hover:text-neutral-600"
+                >
+                  <Link4 className="size-4 shrink-0" />
+                  <span className="truncate">
+                    {getDomainWithoutWWW(program.url)}
+                  </span>
+                  <ArrowUpRight className="size-3.5 shrink-0" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {program.marketplaceHeaderImage && (
+        <div className="relative z-10 h-44 w-full shrink-0 overflow-hidden rounded-xl sm:h-auto sm:w-[55%] sm:self-stretch">
+          <img
+            src={program.marketplaceHeaderImage}
+            alt={program.name}
+            className="absolute inset-0 size-full object-cover"
+          />
+        </div>
+      )}
+    </Link>
+  );
+}
+
+export function FeaturedProgramCardSkeleton() {
+  return (
+    <div className="relative h-full min-h-[340px] overflow-hidden rounded-2xl bg-neutral-100 p-2">
+      <div className="relative flex h-full flex-col p-6">
+        <div className="flex justify-between gap-4">
+          <div className="size-12 animate-pulse rounded-full bg-neutral-200" />
+        </div>
+
+        <div className="mt-auto flex flex-col pt-10">
+          <div className="h-9 w-40 animate-pulse rounded bg-neutral-200" />
+
+          <div className="mt-1 max-w-sm">
+            <div className="h-5 w-64 animate-pulse rounded bg-neutral-200" />
+          </div>
+
+          <div className="mt-5 flex flex-wrap gap-x-8 gap-y-4">
+            <div>
+              <div className="h-4 w-12 animate-pulse rounded bg-neutral-200" />
+              <div className="mt-2 flex gap-1.5">
+                <div className="size-4 animate-pulse rounded bg-neutral-200" />
+                <div className="size-4 animate-pulse rounded bg-neutral-200" />
+              </div>
+            </div>
+            <div>
+              <div className="h-4 w-14 animate-pulse rounded bg-neutral-200" />
+              <div className="mt-2 h-5 w-24 animate-pulse rounded-full bg-neutral-200" />
+            </div>
+            <div className="basis-full sm:basis-auto">
+              <div className="h-4 w-12 animate-pulse rounded bg-neutral-200" />
+              <div className="mt-2 h-5 w-28 animate-pulse rounded bg-neutral-200" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/featured-programs.tsx b/apps/web/ui/program-marketplace/featured-programs.tsx
new file mode 100644
index 00000000000..c8ac44b354b
--- /dev/null
+++ b/apps/web/ui/program-marketplace/featured-programs.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { NetworkProgramProps } from "@/lib/types";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNavBar,
+} from "@dub/ui";
+import { fetcher } from "@dub/utils";
+import useSWR from "swr";
+import {
+  FeaturedProgramCard,
+  FeaturedProgramCardSkeleton,
+} from "./featured-program-card";
+
+const FEATURED_PROGRAMS_API_PATH = "/api/network/programs?featured=true";
+
+type FeaturedProgramsProps = {
+  showStatus?: boolean;
+} & (
+  | { programs: NetworkProgramProps[]; apiPath?: never }
+  | { apiPath?: string; programs?: never }
+);
+
+export function FeaturedPrograms({
+  showStatus = true,
+  ...props
+}: FeaturedProgramsProps) {
+  const apiPath =
+    "apiPath" in props && props.apiPath !== undefined
+      ? props.apiPath
+      : "programs" in props
+        ? null
+        : FEATURED_PROGRAMS_API_PATH;
+
+  const { data: fetchedPrograms, error } = useSWR<NetworkProgramProps[]>(
+    apiPath,
+    fetcher,
+    { revalidateOnFocus: false, keepPreviousData: true },
+  );
+
+  const programs = "programs" in props ? props.programs : fetchedPrograms;
+
+  if (error || programs?.length === 0) {
+    return null;
+  }
+
+  return (
+    <div>
+      <Carousel autoplay={{ delay: 5000 }} opts={{ loop: true }}>
+        <CarouselContent className="items-stretch">
+          {programs ? (
+            programs.map((program, index) => (
+              <CarouselItem key={program.id} className="basis-full">
+                <FeaturedProgramCard
+                  program={program}
+                  showStatus={showStatus}
+                  colorIndex={index}
+                />
+              </CarouselItem>
+            ))
+          ) : (
+            <FeaturedProgramsSkeletonItems />
+          )}
+        </CarouselContent>
+        <div className="mt-2">
+          <CarouselNavBar />
+        </div>
+      </Carousel>
+    </div>
+  );
+}
+
+export function FeaturedProgramsSkeleton() {
+  return (
+    <div>
+      <Carousel opts={{ loop: true }}>
+        <CarouselContent className="items-stretch">
+          <FeaturedProgramsSkeletonItems />
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+}
+
+function FeaturedProgramsSkeletonItems() {
+  return (
+    <>
+      <CarouselItem className="basis-full">
+        <FeaturedProgramCardSkeleton />
+      </CarouselItem>
+      <CarouselItem className="basis-full">
+        <FeaturedProgramCardSkeleton />
+      </CarouselItem>
+    </>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/home-sections.ts b/apps/web/ui/program-marketplace/home-sections.ts
new file mode 100644
index 00000000000..9398620b4ed
--- /dev/null
+++ b/apps/web/ui/program-marketplace/home-sections.ts
@@ -0,0 +1,91 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { Category } from "@dub/prisma/client";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryHref,
+} from "./utils/urls";
+
+export const MARKETPLACE_HOME_ROW_PAGE_SIZE = 5;
+
+export const MARKETPLACE_HOME_CATEGORIES = [
+  Category.Productivity,
+  Category.Artificial_Intelligence,
+  Category.Marketing,
+  Category.Development,
+  Category.Design,
+  Category.Finance,
+  Category.Ecommerce,
+  Category.Health,
+  Category.Consumer,
+  Category.Education,
+] as const;
+
+type MarketplaceHomeRowFetchParams = {
+  sortBy?: "name" | "recency" | "popularity";
+  category?: Category;
+  pageSize: number;
+};
+
+export type MarketplaceHomeRow = {
+  key: string;
+  title: string;
+  viewAllHref: string;
+  apiPath: string;
+  fetchParams: MarketplaceHomeRowFetchParams;
+  showViewAllCard: true;
+};
+
+const featuredHomeRows: MarketplaceHomeRow[] = [
+  {
+    key: "most-popular",
+    title: "Most popular",
+    viewAllHref: getMarketplaceAllHref({
+      sortBy: "popularity",
+      sortOrder: "desc",
+    }),
+    apiPath: `/api/network/programs?sortBy=popularity&pageSize=${MARKETPLACE_HOME_ROW_PAGE_SIZE}`,
+    fetchParams: {
+      sortBy: "popularity",
+      pageSize: MARKETPLACE_HOME_ROW_PAGE_SIZE,
+    },
+    showViewAllCard: true,
+  },
+  {
+    key: "new",
+    title: "New",
+    viewAllHref: getMarketplaceAllHref({
+      sortBy: "recency",
+      sortOrder: "desc",
+    }),
+    apiPath: `/api/network/programs?sortBy=recency&pageSize=${MARKETPLACE_HOME_ROW_PAGE_SIZE}`,
+    fetchParams: {
+      sortBy: "recency",
+      pageSize: MARKETPLACE_HOME_ROW_PAGE_SIZE,
+    },
+    showViewAllCard: true,
+  },
+];
+
+const categoryHomeRows: MarketplaceHomeRow[] = MARKETPLACE_HOME_CATEGORIES.map(
+  (category) => {
+    const label =
+      PROGRAM_CATEGORIES_MAP[category]?.label ?? category.replaceAll("_", " ");
+
+    return {
+      key: category,
+      title: label,
+      viewAllHref: getMarketplaceCategoryHref(category),
+      apiPath: `/api/network/programs?category=${category}&pageSize=${MARKETPLACE_HOME_ROW_PAGE_SIZE}`,
+      fetchParams: {
+        category,
+        pageSize: MARKETPLACE_HOME_ROW_PAGE_SIZE,
+      },
+      showViewAllCard: true,
+    };
+  },
+);
+
+export const MARKETPLACE_HOME_ROWS: MarketplaceHomeRow[] = [
+  ...featuredHomeRows,
+  ...categoryHomeRows,
+];
diff --git a/apps/web/ui/program-marketplace/marketplace-categories.tsx b/apps/web/ui/program-marketplace/marketplace-categories.tsx
new file mode 100644
index 00000000000..05670fc7459
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-categories.tsx
@@ -0,0 +1,48 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { MARKETPLACE_HOME_CATEGORIES } from "@/ui/program-marketplace/home-sections";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryHref,
+} from "@/ui/program-marketplace/utils/urls";
+import { CircleInfo } from "@dub/ui";
+import Link from "next/link";
+
+export function MarketplaceCategories() {
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center justify-between gap-4">
+        <h2 className="text-content-emphasis text-[18px] font-semibold">
+          Categories
+        </h2>
+        <Link
+          href={getMarketplaceAllHref()}
+          className="text-content-emphasis text-sm font-medium transition-colors hover:text-neutral-500"
+        >
+          View all programs
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-5">
+        {MARKETPLACE_HOME_CATEGORIES.map((category) => {
+          const { icon: Icon, label } = PROGRAM_CATEGORIES_MAP[category] ?? {
+            icon: CircleInfo,
+            label: category.replaceAll("_", " "),
+          };
+
+          return (
+            <Link
+              key={category}
+              href={getMarketplaceCategoryHref(category)}
+              className="border-border-subtle hover:bg-bg-subtle flex flex-col gap-2 rounded-xl border bg-white p-3 transition-colors"
+            >
+              <Icon className="size-[18px] shrink-0 text-neutral-600" />
+              <span className="truncate text-sm font-semibold text-neutral-900">
+                {label}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/marketplace-empty-state.tsx b/apps/web/ui/program-marketplace/marketplace-empty-state.tsx
similarity index 100%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/marketplace-empty-state.tsx
rename to apps/web/ui/program-marketplace/marketplace-empty-state.tsx
diff --git a/apps/web/ui/program-marketplace/marketplace-filter-control.tsx b/apps/web/ui/program-marketplace/marketplace-filter-control.tsx
new file mode 100644
index 00000000000..6fbfc7361b8
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-filter-control.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { FilterBars } from "@dub/ui/icons";
+import { cn } from "@dub/utils";
+import { motion } from "motion/react";
+
+export function MarketplaceFilterControl({
+  activeFilterCount,
+  onClear,
+  className,
+}: {
+  activeFilterCount: number;
+  onClear: () => void;
+  className?: string;
+}) {
+  if (activeFilterCount === 0) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.96 }}
+      animate={{ opacity: 1, scale: 1 }}
+      transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+      className={cn(
+        "flex h-9 shrink-0 items-stretch overflow-hidden rounded-lg border border-neutral-200 bg-white",
+        className,
+      )}
+    >
+      <div className="flex h-9 items-center gap-2 px-3">
+        <FilterBars className="size-4 shrink-0 text-neutral-900" />
+        <div className="flex size-4 shrink-0 items-center justify-center rounded-full bg-black text-[0.625rem] font-medium leading-none text-white">
+          {activeFilterCount}
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={onClear}
+        className={cn(
+          "flex h-9 shrink-0 items-center gap-2 rounded-none border-l border-neutral-200 bg-white",
+          "px-4 text-sm font-medium text-neutral-600",
+          "transition-colors hover:bg-neutral-100",
+        )}
+      >
+        Clear
+      </button>
+    </motion.div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-filter-sort-sheet.tsx b/apps/web/ui/program-marketplace/marketplace-filter-sort-sheet.tsx
new file mode 100644
index 00000000000..9ffb4ef036b
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-filter-sort-sheet.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  type ActiveFilterInput,
+  Button,
+  type FilterConfig,
+  type FilterOption,
+  FilterOptionRow,
+  normalizeActiveFilter,
+} from "@dub/ui";
+import { cn } from "@dub/utils";
+import { Drawer } from "vaul";
+import { MARKETPLACE_SORT_OPTIONS } from "./constants";
+
+export type MarketplaceFilterSortSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  filters: FilterConfig[];
+  activeFilters?: ActiveFilterInput[];
+  onSelect: (key: string, value: string) => void;
+  onRemove: (key: string, value?: string) => void;
+  onClearAll: () => void;
+  sortBy: string;
+  sortOrder: string;
+  onSortChange: (sortBy: string, sortOrder: string) => void;
+  badgeCount: number;
+};
+
+function getSectionBadgeCount(
+  filterKey: string,
+  activeFilters?: ActiveFilterInput[],
+) {
+  if (!activeFilters?.length) return 0;
+  const raw = activeFilters.find((f) => f.key === filterKey);
+  if (!raw) return 0;
+  return normalizeActiveFilter(raw).values.length;
+}
+
+export function MarketplaceFilterSortSheet({
+  open,
+  onOpenChange,
+  filters,
+  activeFilters,
+  onSelect,
+  onRemove,
+  onClearAll,
+  sortBy,
+  sortOrder,
+  onSortChange,
+  badgeCount,
+}: MarketplaceFilterSortSheetProps) {
+  const visibleFilters = filters.filter(
+    (filter) => !filter.hideInFilterDropdown && filter.type !== "range",
+  );
+
+  const isOptionSelected = (
+    filterKey: string,
+    value: FilterOption["value"],
+  ) => {
+    const rawActiveFilter = activeFilters?.find(
+      (filter) => filter.key === filterKey,
+    );
+    if (!rawActiveFilter) return false;
+
+    return normalizeActiveFilter(rawActiveFilter).values.some((v) => {
+      if (typeof v === "string" && typeof value === "string") {
+        return v.toLowerCase() === value.toLowerCase();
+      }
+      return v === value;
+    });
+  };
+
+  const toggleOption = (filter: FilterConfig, value: FilterOption["value"]) => {
+    if (isOptionSelected(filter.key, value)) {
+      onRemove(filter.key, String(value));
+      return;
+    }
+    onSelect(filter.key, String(value));
+  };
+
+  return (
+    <Drawer.Root open={open} onOpenChange={onOpenChange}>
+      <Drawer.Portal>
+        <Drawer.Overlay className="bg-bg-subtle fixed inset-0 z-50 bg-opacity-10 backdrop-blur" />
+        <Drawer.Content className="border-border-subtle bg-bg-default fixed bottom-0 left-0 right-0 z-50 mt-24 flex max-h-[85vh] flex-col rounded-t-[10px] border-t outline-none">
+          <div className="flex shrink-0 items-center justify-center py-3">
+            <div className="bg-border-default h-1 w-12 rounded-full" />
+          </div>
+
+          <div className="border-border-subtle flex shrink-0 items-center justify-between gap-3 border-b px-4 pb-4">
+            <div className="flex min-w-0 items-center gap-2">
+              <h2 className="text-base font-semibold text-neutral-800">
+                Filter and sort
+              </h2>
+              {badgeCount > 0 ? (
+                <div className="flex size-4 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-[10px] font-medium leading-none text-white">
+                  {badgeCount}
+                </div>
+              ) : null}
+            </div>
+
+            <Button
+              text="Clear"
+              variant="secondary"
+              className="h-8 w-fit shrink-0 rounded-lg px-3 py-2 text-[14px] font-medium transition-colors hover:bg-neutral-50"
+              onClick={() => {
+                onClearAll();
+                onOpenChange(false);
+              }}
+            />
+          </div>
+
+          <div className="scrollbar-hide min-h-0 flex-1 overflow-y-auto px-4 pb-6 pt-2">
+            <Accordion
+              type="multiple"
+              defaultValue={["sort", ...visibleFilters.map((f) => f.key)]}
+              className="flex flex-col"
+            >
+              <AccordionItem value="sort" className="border-none py-0">
+                <AccordionTrigger
+                  className={cn(
+                    "rounded-md py-3 font-semibold text-neutral-600",
+                    "hover:bg-bg-subtle hover:no-underline",
+                    "[&>svg]:size-4 [&>svg]:text-neutral-400",
+                  )}
+                >
+                  Sort by
+                </AccordionTrigger>
+                <AccordionContent className="pb-3 pt-0">
+                  <div className="flex flex-col gap-1">
+                    {MARKETPLACE_SORT_OPTIONS.map(({ label, value, order }) => {
+                      const selected = sortBy === value && sortOrder === order;
+
+                      return (
+                        <button
+                          key={`${value}-${order}`}
+                          type="button"
+                          onClick={() => onSortChange(value, order)}
+                          className="flex w-full items-center gap-3 rounded-md px-2 py-2 text-left text-sm font-medium text-neutral-600 transition-colors hover:bg-neutral-100"
+                        >
+                          <div
+                            className={cn(
+                              "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                              selected
+                                ? "border-neutral-900"
+                                : "border-neutral-300",
+                            )}
+                          >
+                            {selected ? (
+                              <div className="size-2 rounded-full bg-neutral-900" />
+                            ) : null}
+                          </div>
+                          <span>{label}</span>
+                        </button>
+                      );
+                    })}
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+
+              {visibleFilters.map((filter) => {
+                const sectionBadge = getSectionBadgeCount(
+                  filter.key,
+                  activeFilters,
+                );
+
+                return (
+                  <AccordionItem
+                    key={filter.key}
+                    value={filter.key}
+                    className="border-none py-0"
+                  >
+                    <AccordionTrigger
+                      className={cn(
+                        "rounded-md py-3 font-semibold text-neutral-600",
+                        "hover:bg-bg-subtle hover:no-underline",
+                        "[&>svg]:size-4 [&>svg]:text-neutral-400",
+                      )}
+                    >
+                      <span className="flex min-w-0 flex-1 items-center gap-2">
+                        {filter.label}
+                        {sectionBadge > 0 ? (
+                          <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-black text-[0.625rem] font-medium leading-none text-white">
+                            {sectionBadge}
+                          </span>
+                        ) : null}
+                      </span>
+                    </AccordionTrigger>
+                    <AccordionContent className="pb-3 pt-0">
+                      {filter.options === null ? (
+                        <p className="px-2 py-2 text-sm text-neutral-400">
+                          Loading...
+                        </p>
+                      ) : filter.options.length === 0 ? (
+                        <p className="px-2 py-2 text-sm text-neutral-400">
+                          No options
+                        </p>
+                      ) : (
+                        <div className="flex flex-col gap-1">
+                          {filter.options.map((option) => (
+                            <FilterOptionRow
+                              key={String(option.value)}
+                              filter={filter}
+                              option={option}
+                              checked={isOptionSelected(
+                                filter.key,
+                                option.value,
+                              )}
+                              onToggle={() =>
+                                toggleOption(filter, option.value)
+                              }
+                            />
+                          ))}
+                        </div>
+                      )}
+                    </AccordionContent>
+                  </AccordionItem>
+                );
+              })}
+            </Accordion>
+          </div>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-list-toolbar.tsx b/apps/web/ui/program-marketplace/marketplace-list-toolbar.tsx
new file mode 100644
index 00000000000..f3cda602ef0
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-list-toolbar.tsx
@@ -0,0 +1,262 @@
+"use client";
+
+import { SearchBoxPersisted } from "@/ui/shared/search-box";
+import { Category } from "@dub/prisma/client";
+import { useRouterStuff } from "@dub/ui";
+import { FilterBars } from "@dub/ui/icons";
+import { cn } from "@dub/utils";
+import { usePathname, useRouter } from "next/navigation";
+import { useCallback, useState } from "react";
+import {
+  getMarketplaceToolbarBadgeCount,
+  type MarketplaceRewardType,
+} from "./constants";
+import { MarketplaceFilterControl } from "./marketplace-filter-control";
+import { MarketplaceFilterSortSheet } from "./marketplace-filter-sort-sheet";
+import ProgramSort from "./program-sort";
+import { useProgramNetworkFilters } from "./use-program-network-filters";
+import { usePublicMarketplaceFilters } from "./use-public-marketplace-filters";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryFromPathname,
+} from "./utils/urls";
+
+function MarketplaceListToolbarInternal() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { searchParamsObj, queryParams } = useRouterStuff();
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  const { filters, activeFilters, onSelect, onRemove, onClearFilters } =
+    useProgramNetworkFilters();
+
+  const sortBy =
+    typeof searchParamsObj.sortBy === "string"
+      ? searchParamsObj.sortBy
+      : "popularity";
+  const sortOrder =
+    typeof searchParamsObj.sortOrder === "string"
+      ? searchParamsObj.sortOrder
+      : "desc";
+
+  const badgeCount = getMarketplaceToolbarBadgeCount(
+    activeFilters.length,
+    sortBy,
+    sortOrder,
+  );
+
+  const routeCategory = getMarketplaceCategoryFromPathname(pathname);
+
+  const onClearAll = useCallback(() => {
+    const search =
+      typeof searchParamsObj.search === "string"
+        ? searchParamsObj.search
+        : undefined;
+
+    if (routeCategory) {
+      router.replace(getMarketplaceAllHref({ search }));
+      return;
+    }
+
+    queryParams({
+      del: ["rewardType", "status", "page", "sortBy", "sortOrder"],
+    });
+  }, [queryParams, routeCategory, router, searchParamsObj]);
+
+  const onSortChange = useCallback(
+    (nextSortBy: string, nextSortOrder: string) => {
+      queryParams({
+        set: { sortBy: nextSortBy, sortOrder: nextSortOrder },
+        del: "page",
+      });
+    },
+    [queryParams],
+  );
+
+  return (
+    <>
+      <MarketplaceFilterSortSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        filters={filters}
+        activeFilters={activeFilters}
+        onSelect={onSelect}
+        onRemove={onRemove}
+        onClearAll={onClearAll}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortChange={onSortChange}
+        badgeCount={badgeCount}
+      />
+      <ToolbarLayout
+        badgeCount={badgeCount}
+        activeFilterCount={activeFilters.length}
+        onOpenSheet={() => setSheetOpen(true)}
+        onClearFilters={onClearFilters}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+      />
+    </>
+  );
+}
+
+function MarketplaceListToolbarExternal({
+  basePath,
+  activeCategory,
+  categoryCounts,
+  rewardTypeCounts,
+}: {
+  basePath: string;
+  activeCategory?: Category;
+  categoryCounts: { category: Category; count: number }[];
+  rewardTypeCounts: {
+    type: MarketplaceRewardType;
+    count: number;
+  }[];
+}) {
+  const { searchParamsObj } = useRouterStuff();
+  const [sheetOpen, setSheetOpen] = useState(false);
+
+  const {
+    filters,
+    activeFilters,
+    onSelect,
+    onRemove,
+    onClearFilters,
+    onSortChange,
+  } = usePublicMarketplaceFilters({
+    basePath,
+    activeCategory,
+    categoryCounts,
+    rewardTypeCounts,
+  });
+
+  const sortBy =
+    typeof searchParamsObj.sortBy === "string"
+      ? searchParamsObj.sortBy
+      : "popularity";
+  const sortOrder =
+    typeof searchParamsObj.sortOrder === "string"
+      ? searchParamsObj.sortOrder
+      : "desc";
+
+  const badgeCount = getMarketplaceToolbarBadgeCount(
+    activeFilters.length,
+    sortBy,
+    sortOrder,
+  );
+
+  const onClearAll = useCallback(() => {
+    onClearFilters();
+  }, [onClearFilters]);
+
+  return (
+    <>
+      <MarketplaceFilterSortSheet
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        filters={filters}
+        activeFilters={activeFilters}
+        onSelect={onSelect}
+        onRemove={onRemove}
+        onClearAll={onClearAll}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+        onSortChange={onSortChange}
+        badgeCount={badgeCount}
+      />
+      <ToolbarLayout
+        badgeCount={badgeCount}
+        activeFilterCount={activeFilters.length}
+        onOpenSheet={() => setSheetOpen(true)}
+        onClearFilters={onClearFilters}
+        sortBy={sortBy}
+        sortOrder={sortOrder}
+      />
+    </>
+  );
+}
+
+function ToolbarLayout({
+  badgeCount,
+  activeFilterCount,
+  onOpenSheet,
+  onClearFilters,
+}: {
+  badgeCount: number;
+  activeFilterCount: number;
+  onOpenSheet: () => void;
+  onClearFilters: () => void;
+  sortBy: string;
+  sortOrder: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-4 lg:gap-6",
+        "lg:flex lg:items-center lg:justify-between",
+      )}
+    >
+      <button
+        type="button"
+        onClick={onOpenSheet}
+        className={cn(
+          "flex h-9 w-full min-w-0 items-center justify-center gap-2 rounded-lg border px-3 lg:hidden",
+          "border-neutral-200 bg-white text-sm font-medium text-neutral-900",
+          "transition-colors hover:bg-neutral-50",
+        )}
+      >
+        <FilterBars className="size-4 shrink-0" />
+        <span className="truncate">Filter and sort</span>
+        {badgeCount > 0 ? (
+          <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-black text-[0.625rem] font-medium leading-none text-white">
+            {badgeCount}
+          </div>
+        ) : null}
+      </button>
+
+      <div className="hidden items-center gap-4 lg:flex lg:gap-2">
+        <MarketplaceFilterControl
+          activeFilterCount={activeFilterCount}
+          onClear={onClearFilters}
+        />
+        <ProgramSort forceDropdown />
+      </div>
+
+      <div className="min-w-0">
+        <SearchBoxPersisted
+          placeholder="Search..."
+          inputClassName="h-9 w-full rounded-lg lg:w-[19rem]"
+        />
+      </div>
+    </div>
+  );
+}
+
+export function MarketplaceListToolbar(
+  props:
+    | { variant: "internal" }
+    | {
+        variant: "external";
+        basePath: string;
+        activeCategory?: Category;
+        categoryCounts: { category: Category; count: number }[];
+        rewardTypeCounts: {
+          type: MarketplaceRewardType;
+          count: number;
+        }[];
+      },
+) {
+  if (props.variant === "internal") {
+    return <MarketplaceListToolbarInternal />;
+  }
+
+  return (
+    <MarketplaceListToolbarExternal
+      basePath={props.basePath}
+      activeCategory={props.activeCategory}
+      categoryCounts={props.categoryCounts}
+      rewardTypeCounts={props.rewardTypeCounts}
+    />
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-program-detail-body.tsx b/apps/web/ui/program-marketplace/marketplace-program-detail-body.tsx
new file mode 100644
index 00000000000..8f522579d53
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-program-detail-body.tsx
@@ -0,0 +1,54 @@
+import { NetworkProgramExtendedProps } from "@/lib/types";
+import { BLOCK_COMPONENTS } from "@/ui/partners/lander/blocks";
+import { LanderHero } from "@/ui/partners/lander/lander-hero";
+import { LanderRewards } from "@/ui/partners/lander/lander-rewards";
+import { ProgramEligibilityCard } from "@/ui/partners/program-eligibility-card";
+
+export function MarketplaceProgramDetailBody({
+  program,
+  showEligibilityCard = false,
+}: {
+  program: NetworkProgramExtendedProps;
+  showEligibilityCard?: boolean;
+}) {
+  return (
+    <>
+      <LanderHero
+        program={program}
+        landerData={program.landerData || {}}
+        showLabel={false}
+        className="mt-8 sm:mt-8"
+        heading="h2"
+        titleClassName="text-2xl"
+      />
+
+      <LanderRewards
+        className="mt-4"
+        rewards={program.rewards || []}
+        discount={program.discount || null}
+        bounties={program.bounties}
+      />
+
+      {showEligibilityCard && program.applicationRequirements?.length ? (
+        <ProgramEligibilityCard
+          requirements={program.applicationRequirements}
+        />
+      ) : null}
+
+      {program.landerData ? (
+        <div className="mt-16 grid grid-cols-1 gap-10">
+          {program.landerData.blocks.map((block, idx) => {
+            const Component = BLOCK_COMPONENTS[block.type];
+            return Component ? (
+              <Component
+                key={idx}
+                block={block}
+                group={{ logo: program.logo }}
+              />
+            ) : null;
+          })}
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-program-details-layout.tsx b/apps/web/ui/program-marketplace/marketplace-program-details-layout.tsx
new file mode 100644
index 00000000000..fe650552399
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-program-details-layout.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+export const marketplaceProgramDetailsColumnClassName =
+  "mx-auto w-full max-w-screen-md";
+
+export function MarketplaceProgramDetailsLayout({
+  header,
+  hero,
+  children,
+}: {
+  header?: ReactNode;
+  hero: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="w-full">
+      {header ? <div className="mb-6">{header}</div> : null}
+      {hero}
+      <div className={marketplaceProgramDetailsColumnClassName}>{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-program-grid.tsx b/apps/web/ui/program-marketplace/marketplace-program-grid.tsx
new file mode 100644
index 00000000000..3c4acbb1736
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-program-grid.tsx
@@ -0,0 +1,64 @@
+import { NetworkProgramProps } from "@/lib/types";
+import { cn } from "@dub/utils";
+import {
+  MarketplaceProgramCard,
+  MarketplaceProgramCardSkeleton,
+} from "./program-card";
+
+export function MarketplaceProgramGrid({
+  programs,
+  showStatus = true,
+  className,
+}: {
+  programs: NetworkProgramProps[];
+  showStatus?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "@4xl/page:grid-cols-3 @xl/page:grid-cols-2",
+        "grid grid-cols-2 gap-4 lg:gap-6",
+        className,
+      )}
+    >
+      {programs.map((program) => (
+        <MarketplaceProgramCard
+          key={program.id}
+          program={program}
+          showStatus={showStatus}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function MarketplaceProgramGridSkeleton({
+  count = 5,
+  className,
+}: {
+  count?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "@4xl/page:grid-cols-3 @xl/page:grid-cols-2",
+        "grid grid-cols-2 gap-4 lg:gap-6",
+        className,
+      )}
+    >
+      {[...Array(count)].map((_, idx) => (
+        <MarketplaceProgramCardSkeleton key={idx} />
+      ))}
+    </div>
+  );
+}
+
+export function MarketplaceProgramGridEmpty({
+  message = "No programs match these filters.",
+}: {
+  message?: string;
+}) {
+  return <div className="text-content-subtle py-12 text-sm">{message}</div>;
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/header-controls.tsx b/apps/web/ui/program-marketplace/marketplace-program-header-controls.tsx
similarity index 100%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/[programSlug]/header-controls.tsx
rename to apps/web/ui/program-marketplace/marketplace-program-header-controls.tsx
diff --git a/apps/web/ui/program-marketplace/marketplace-program-hero.tsx b/apps/web/ui/program-marketplace/marketplace-program-hero.tsx
new file mode 100644
index 00000000000..c63238addda
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-program-hero.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { NetworkProgramExtendedProps } from "@/lib/types";
+import { marketplaceProgramDetailsColumnClassName } from "@/ui/program-marketplace/marketplace-program-details-layout";
+import { ProgramCategory } from "@/ui/program-marketplace/program-category";
+import { getMarketplaceCategoryHref } from "@/ui/program-marketplace/utils/urls";
+import { Globe } from "@dub/ui/icons";
+import { OG_AVATAR_URL, cn, getDomainWithoutWWW } from "@dub/utils";
+import Link from "next/link";
+import { ReactNode } from "react";
+import { useImageAccentColor } from "./use-image-accent-color";
+
+export function MarketplaceProgramHero({
+  program,
+  applySlot,
+  className,
+}: {
+  program: NetworkProgramExtendedProps;
+  applySlot?: ReactNode;
+  className?: string;
+}) {
+  const hasBanner = Boolean(program.marketplaceHeaderImage);
+
+  const { color: accentColor, ready: accentReady } = useImageAccentColor(
+    hasBanner ? program.marketplaceHeaderImage : null,
+  );
+
+  return (
+    <div
+      className={cn(
+        "relative flex flex-col overflow-hidden rounded-2xl p-2",
+        hasBanner && applySlot && "min-h-[640px]",
+        className,
+      )}
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-0 transition-opacity duration-500 ease-out"
+        style={{
+          backgroundColor: hasBanner ? accentColor ?? "#f5f5f5" : "#f5f5f5",
+          opacity: hasBanner ? (accentReady ? 1 : 0) : 1,
+        }}
+      />
+
+      {hasBanner && program.marketplaceHeaderImage && (
+        <div className="relative z-10 h-[307px] w-full shrink-0 overflow-hidden rounded-xl">
+          <img
+            src={program.marketplaceHeaderImage}
+            alt={program.name}
+            className="absolute inset-0 size-full object-cover"
+          />
+        </div>
+      )}
+
+      <div
+        className={cn(
+          marketplaceProgramDetailsColumnClassName,
+          "relative z-20 p-4",
+        )}
+      >
+        <img
+          src={program.logo || `${OG_AVATAR_URL}${program.name}`}
+          alt={program.name}
+          className={cn(
+            "size-16 rounded-full border border-black/5",
+            hasBanner && "-mt-8 border-4 border-neutral-100",
+          )}
+        />
+
+        <div className="mt-6 flex flex-col">
+          <h1 className="text-content-emphasis text-3xl font-semibold">
+            {program.name}
+          </h1>
+
+          <p className="text-content-default mt-2 max-w-md text-sm">
+            {program.description ||
+              `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
+          </p>
+        </div>
+
+        <div className="mt-6 flex flex-wrap items-end gap-x-12 gap-y-4">
+          {Boolean(program.categories?.length) && (
+            <div className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-xs font-medium leading-none text-neutral-400">
+                Category
+              </span>
+              <div className="flex min-h-7 flex-wrap items-center gap-1.5">
+                {program.categories.map((category) => (
+                  <ProgramCategory
+                    key={category}
+                    category={category}
+                    variant="surface"
+                    href={getMarketplaceCategoryHref(category)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {program.url && (
+            <div className="flex min-w-0 flex-col gap-1.5">
+              <span className="text-xs font-medium leading-none text-neutral-400">
+                Website
+              </span>
+              <Link
+                href={program.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-content-default hover:text-content-emphasis flex h-7 max-w-[220px] items-center gap-1.5 text-sm font-medium leading-none"
+              >
+                <Globe className="size-4 shrink-0" />
+                <span className="truncate">
+                  {getDomainWithoutWWW(program.url)} ↗
+                </span>
+              </Link>
+            </div>
+          )}
+        </div>
+
+        {applySlot ? <div className="mt-8 w-fit">{applySlot}</div> : null}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-program-row.tsx b/apps/web/ui/program-marketplace/marketplace-program-row.tsx
new file mode 100644
index 00000000000..4972095b703
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-program-row.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { NetworkProgramProps } from "@/lib/types";
+import { Carousel, CarouselContent, CarouselItem, useCarousel } from "@dub/ui";
+import { ChevronLeft, ChevronRight } from "@dub/ui/icons";
+import { cn, fetcher } from "@dub/utils";
+import Link from "next/link";
+import useSWR from "swr";
+import { MarketplaceViewAllCard } from "./marketplace-view-all-card";
+import {
+  MarketplaceProgramCard,
+  MarketplaceProgramCardSkeleton,
+} from "./program-card";
+
+type MarketplaceProgramRowProps = {
+  title: string;
+  viewAllHref: string;
+  showViewAllCard?: boolean;
+  showStatus?: boolean;
+  variant?: "default" | "home";
+} & (
+  | { programs: NetworkProgramProps[]; apiPath?: never }
+  | { apiPath: string; programs?: never }
+);
+
+const marketplaceCarouselNavButtonClassName =
+  "flex size-9 shrink-0 items-center justify-center rounded-lg text-neutral-800 transition-colors hover:bg-neutral-900/5 disabled:pointer-events-none disabled:opacity-40";
+
+function MarketplaceCarouselNav() {
+  const { scrollPrev, scrollNext, canScrollPrev, canScrollNext } =
+    useCarousel();
+
+  return (
+    <div className="flex items-center gap-1">
+      <button
+        type="button"
+        onClick={scrollPrev}
+        disabled={!canScrollPrev}
+        aria-label="Previous slide"
+        className={marketplaceCarouselNavButtonClassName}
+      >
+        <ChevronLeft className="size-3" />
+      </button>
+      <button
+        type="button"
+        onClick={scrollNext}
+        disabled={!canScrollNext}
+        aria-label="Next slide"
+        className={marketplaceCarouselNavButtonClassName}
+      >
+        <ChevronRight className="size-3" />
+      </button>
+    </div>
+  );
+}
+
+export function MarketplaceProgramRow({
+  title,
+  viewAllHref,
+  showViewAllCard = false,
+  showStatus = true,
+  variant = "default",
+  ...props
+}: MarketplaceProgramRowProps) {
+  const { data: fetchedPrograms, error } = useSWR<NetworkProgramProps[]>(
+    "apiPath" in props && props.apiPath ? props.apiPath : null,
+    fetcher,
+    { revalidateOnFocus: false, keepPreviousData: true },
+  );
+
+  const programs = "programs" in props ? props.programs : fetchedPrograms;
+  const isHome = variant === "home";
+
+  const carouselItemClassName = cn(
+    "pl-0",
+    isHome
+      ? "basis-[310px] sm:basis-[419px]"
+      : "basis-[280px] md:basis-[320px]",
+  );
+
+  const cardClassName = isHome
+    ? "h-[260px] w-[310px] sm:h-[284px] sm:w-[419px] sm:p-8"
+    : undefined;
+
+  if (error || programs?.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Carousel opts={{ align: "start", dragFree: true }}>
+        <div className="flex items-center justify-between gap-4">
+          <h2 className="text-content-emphasis text-[18px] font-semibold">
+            {title}
+          </h2>
+          <div className="flex items-center gap-2">
+            <Link
+              href={viewAllHref}
+              className="text-content-emphasis text-sm font-medium transition-colors hover:text-neutral-500"
+            >
+              View all
+            </Link>
+
+            <MarketplaceCarouselNav />
+          </div>
+        </div>
+
+        <CarouselContent className="-ml-0 mt-4 gap-4">
+          {programs ? (
+            <>
+              {programs.map((program) => (
+                <CarouselItem
+                  key={program.id}
+                  className={carouselItemClassName}
+                >
+                  <MarketplaceProgramCard
+                    program={program}
+                    showStatus={showStatus}
+                    className={cardClassName}
+                  />
+                </CarouselItem>
+              ))}
+              {showViewAllCard ? (
+                <CarouselItem className={carouselItemClassName}>
+                  <MarketplaceViewAllCard
+                    href={viewAllHref}
+                    className={cardClassName}
+                  />
+                </CarouselItem>
+              ) : null}
+            </>
+          ) : (
+            [...Array(3)].map((_, idx) => (
+              <CarouselItem key={idx} className={carouselItemClassName}>
+                <MarketplaceProgramCardSkeleton className={cardClassName} />
+              </CarouselItem>
+            ))
+          )}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-router.tsx b/apps/web/ui/program-marketplace/marketplace-router.tsx
new file mode 100644
index 00000000000..c8a34594a4e
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-router.tsx
@@ -0,0 +1,80 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { PageContent } from "@/ui/layout/page-content";
+import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
+import {
+  getMarketplaceHref,
+  slugToCategory,
+} from "@/ui/program-marketplace/utils/urls";
+import { Category } from "@dub/prisma/client";
+import { ChevronRight, Shop } from "@dub/ui";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ReactNode } from "react";
+import { MarketplaceHomePage } from "./pages/marketplace-home-page";
+import { MarketplaceProgramPage } from "./pages/marketplace-program-page";
+import { MarketplaceProgramsListPage } from "./pages/marketplace-programs-list-page";
+
+function MarketplaceListTitle({ category }: { category?: Category }) {
+  const title = category
+    ? PROGRAM_CATEGORIES_MAP[category]?.label ?? category.replaceAll("_", " ")
+    : "All Programs";
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className="flex items-center gap-1">
+        <Link
+          href={getMarketplaceHref()}
+          className="bg-bg-subtle hover:bg-bg-emphasis flex size-8 shrink-0 items-center justify-center rounded-lg transition-[transform,background-color] duration-150 active:scale-95"
+        >
+          <Shop className="text-content-default size-4" />
+        </Link>
+        <ChevronRight className="text-content-subtle size-2.5 shrink-0 [&_*]:stroke-2" />
+      </div>
+      <span className="min-w-0 truncate text-lg font-semibold leading-7 text-neutral-900">
+        {title}
+      </span>
+    </div>
+  );
+}
+
+export function MarketplaceRouter({ slug }: { slug?: string[] }) {
+  const segments = slug ?? [];
+
+  if (segments.length === 0) {
+    return (
+      <PageContent title="Program marketplace">
+        <PageWidthWrapper className="pb-10">
+          <MarketplaceHomePage />
+        </PageWidthWrapper>
+      </PageContent>
+    );
+  }
+
+  if (segments.length === 1 && segments[0] === "all") {
+    return <ListPage title={<MarketplaceListTitle />} />;
+  }
+
+  if (segments.length === 2 && segments[0] === "c") {
+    const category = slugToCategory(segments[1]);
+
+    if (category) {
+      return <ListPage title={<MarketplaceListTitle category={category} />} />;
+    }
+  }
+
+  if (segments.length === 1) {
+    return <MarketplaceProgramPage programSlug={segments[0]} />;
+  }
+
+  notFound();
+}
+
+function ListPage({ title }: { title: ReactNode }) {
+  return (
+    <PageContent title={title}>
+      <PageWidthWrapper className="pb-10">
+        <MarketplaceProgramsListPage />
+      </PageWidthWrapper>
+    </PageContent>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-sidebar-filters.tsx b/apps/web/ui/program-marketplace/marketplace-sidebar-filters.tsx
new file mode 100644
index 00000000000..a311f4f13ee
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-sidebar-filters.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { getMarketplaceHref } from "@/ui/program-marketplace/utils/urls";
+import { ChevronLeft, Filter } from "@dub/ui";
+import { cn } from "@dub/utils";
+import Link from "next/link";
+import { useProgramNetworkFilters } from "./use-program-network-filters";
+
+export function MarketplaceSidebarFilters() {
+  const { filters, activeFilters, onSelect, onRemove } =
+    useProgramNetworkFilters();
+
+  return (
+    <div className="flex flex-col gap-2">
+      <Link
+        href={getMarketplaceHref()}
+        className={cn(
+          "group flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-sm font-medium text-neutral-800 transition-all duration-75",
+          "hover:bg-neutral-200/50 active:bg-neutral-200/80",
+          "outline-none focus-visible:ring-2 focus-visible:ring-black/50",
+        )}
+      >
+        <ChevronLeft className="size-3 text-neutral-400 transition-transform group-hover:-translate-x-0.5" />
+        Program marketplace
+      </Link>
+      <Filter.Sidebar
+        filters={filters}
+        activeFilters={activeFilters}
+        onSelect={onSelect}
+        onRemove={onRemove}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-sidebar-panel.tsx b/apps/web/ui/program-marketplace/marketplace-sidebar-panel.tsx
new file mode 100644
index 00000000000..229ccbc3ff4
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-sidebar-panel.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { ProgramsAreaNav } from "@/ui/layout/sidebar/programs-area-nav";
+import { useMediaQuery } from "@dub/ui";
+import { MarketplaceSidebarFilters } from "./marketplace-sidebar-filters";
+
+export function MarketplaceSidebarPanel({
+  invitationsCount,
+}: {
+  invitationsCount?: number;
+}) {
+  const { isDesktop } = useMediaQuery();
+
+  if (!isDesktop) {
+    return <ProgramsAreaNav invitationsCount={invitationsCount} />;
+  }
+
+  return <MarketplaceSidebarFilters />;
+}
diff --git a/apps/web/ui/program-marketplace/marketplace-view-all-card.tsx b/apps/web/ui/program-marketplace/marketplace-view-all-card.tsx
new file mode 100644
index 00000000000..68c34e59791
--- /dev/null
+++ b/apps/web/ui/program-marketplace/marketplace-view-all-card.tsx
@@ -0,0 +1,50 @@
+import { ProgramMarketplaceLogosCluster } from "@/ui/program-marketplace/program-marketplace-logos";
+import { getMarketplaceAllHref } from "@/ui/program-marketplace/utils/urls";
+import { Grid } from "@dub/ui";
+import { cn } from "@dub/utils";
+import Link from "next/link";
+import type { CSSProperties } from "react";
+
+const VIEW_ALL_GRID_MASK =
+  "radial-gradient(ellipse 85% 70% at 50% 44%, white 10%, rgba(255,255,255,0.2) 60%, transparent 62%)";
+
+export function MarketplaceViewAllCard({
+  href = getMarketplaceAllHref(),
+  className,
+}: {
+  href?: string;
+  className?: string;
+}) {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        "border-border-subtle hover:drop-shadow-card-hover group relative flex h-full min-h-[220px] flex-col overflow-hidden rounded-xl border bg-white transition-[filter]",
+        className,
+      )}
+    >
+      <div
+        className="pointer-events-none absolute inset-0 opacity-100 [-webkit-mask-image:var(--view-all-grid-mask)] [mask-image:var(--view-all-grid-mask)]"
+        style={
+          {
+            "--view-all-grid-mask": VIEW_ALL_GRID_MASK,
+          } as CSSProperties
+        }
+      >
+        <Grid
+          cellSize={36}
+          strokeWidth={1}
+          className="size-full text-[#ECECEC]"
+        />
+      </div>
+
+      <div className="relative flex flex-1 items-center justify-center px-6 pt-8">
+        <ProgramMarketplaceLogosCluster />
+      </div>
+
+      <span className="relative pb-6 text-center text-base font-semibold text-neutral-600">
+        View all
+      </span>
+    </Link>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/pages/marketplace-home-page.tsx b/apps/web/ui/program-marketplace/pages/marketplace-home-page.tsx
new file mode 100644
index 00000000000..87b3398dc47
--- /dev/null
+++ b/apps/web/ui/program-marketplace/pages/marketplace-home-page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { FeaturedPrograms } from "../featured-programs";
+import { MARKETPLACE_HOME_ROWS } from "../home-sections";
+import { MarketplaceCategories } from "../marketplace-categories";
+import { MarketplaceProgramRow } from "../marketplace-program-row";
+
+export function MarketplaceHomePage() {
+  return (
+    <div className="flex flex-col gap-10">
+      <FeaturedPrograms />
+      <MarketplaceCategories />
+      {MARKETPLACE_HOME_ROWS.map((row) => (
+        <MarketplaceProgramRow
+          key={row.key}
+          variant="home"
+          title={row.title}
+          viewAllHref={row.viewAllHref}
+          apiPath={row.apiPath}
+          showViewAllCard={row.showViewAllCard}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/pages/marketplace-program-page.tsx b/apps/web/ui/program-marketplace/pages/marketplace-program-page.tsx
new file mode 100644
index 00000000000..10fd56804ca
--- /dev/null
+++ b/apps/web/ui/program-marketplace/pages/marketplace-program-page.tsx
@@ -0,0 +1,83 @@
+import { getNetworkProgram } from "@/lib/fetchers/get-network-program";
+import { ApplicationAnalytics } from "@/ui/application-analytics";
+import { PageContent } from "@/ui/layout/page-content";
+import { PageWidthWrapper } from "@/ui/layout/page-width-wrapper";
+import { MarketplaceProgramDetailBody } from "@/ui/program-marketplace/marketplace-program-detail-body";
+import { MarketplaceProgramDetailsLayout } from "@/ui/program-marketplace/marketplace-program-details-layout";
+import { MarketplaceProgramHero } from "@/ui/program-marketplace/marketplace-program-hero";
+import { prisma } from "@dub/prisma";
+import { ChevronRight, Shop } from "@dub/ui";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { MarketplaceProgramHeaderControls } from "../marketplace-program-header-controls";
+import { ProgramStatusBadge } from "../program-status-badge";
+import { getMarketplaceHref } from "../utils/urls";
+
+export const revalidate = 3600; // 1 hour
+
+export async function generateMarketplaceProgramStaticParams() {
+  const programs = await prisma.program.findMany({
+    where: {
+      addedToMarketplaceAt: {
+        not: null,
+      },
+    },
+    select: {
+      slug: true,
+    },
+  });
+
+  return programs.map((program) => ({
+    slug: [program.slug],
+  }));
+}
+
+export async function MarketplaceProgramPage({
+  programSlug,
+}: {
+  programSlug: string;
+}) {
+  const program = await getNetworkProgram({
+    slug: programSlug,
+  });
+
+  if (!program) {
+    redirect(getMarketplaceHref());
+  }
+
+  return (
+    <PageContent
+      title={
+        <div className="flex items-center gap-1.5">
+          <div className="flex items-center gap-1">
+            <Link
+              href={getMarketplaceHref()}
+              aria-label="Back to marketplace"
+              className="bg-bg-subtle hover:bg-bg-emphasis flex size-8 shrink-0 items-center justify-center rounded-lg transition-[transform,background-color] duration-150 active:scale-95"
+            >
+              <Shop className="text-content-default size-4" />
+            </Link>
+            <ChevronRight className="text-content-subtle size-2.5 shrink-0 [&_*]:stroke-2" />
+          </div>
+
+          <div className="flex min-w-0 items-center gap-1.5">
+            <span className="min-w-0 truncate text-lg font-semibold leading-7 text-neutral-900">
+              Program details
+            </span>
+            <ProgramStatusBadge program={program} />
+          </div>
+        </div>
+      }
+      controls={<MarketplaceProgramHeaderControls program={program} />}
+    >
+      <ApplicationAnalytics />
+      <PageWidthWrapper className="pb-20">
+        <MarketplaceProgramDetailsLayout
+          hero={<MarketplaceProgramHero program={program} />}
+        >
+          <MarketplaceProgramDetailBody program={program} showEligibilityCard />
+        </MarketplaceProgramDetailsLayout>
+      </PageWidthWrapper>
+    </PageContent>
+  );
+}
diff --git a/apps/web/ui/program-marketplace/pages/marketplace-programs-list-page.tsx b/apps/web/ui/program-marketplace/pages/marketplace-programs-list-page.tsx
new file mode 100644
index 00000000000..83b598f2235
--- /dev/null
+++ b/apps/web/ui/program-marketplace/pages/marketplace-programs-list-page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import useNetworkProgramsCount from "@/lib/swr/use-network-programs-count";
+import { NetworkProgramProps } from "@/lib/types";
+import { PROGRAM_NETWORK_MAX_PAGE_SIZE } from "@/lib/zod/schemas/program-network";
+import { PaginationControls, usePagination, useRouterStuff } from "@dub/ui";
+import { cn, fetcher } from "@dub/utils";
+import { usePathname } from "next/navigation";
+import useSWR from "swr";
+import { MarketplaceEmptyState } from "../marketplace-empty-state";
+import { MarketplaceListToolbar } from "../marketplace-list-toolbar";
+import {
+  MarketplaceProgramGrid,
+  MarketplaceProgramGridSkeleton,
+} from "../marketplace-program-grid";
+import { useProgramNetworkFilters } from "../use-program-network-filters";
+import { getMarketplaceCategoryFromPathname } from "../utils/urls";
+
+export function MarketplaceProgramsListPage() {
+  const pathname = usePathname();
+  const { getQueryString, searchParamsObj } = useRouterStuff();
+
+  const categoryParam = getMarketplaceCategoryFromPathname(pathname);
+
+  const queryString = getQueryString(
+    categoryParam ? { category: categoryParam } : undefined,
+  );
+
+  const { data: programsCount, error: countError } = useNetworkProgramsCount({
+    query: categoryParam ? { category: categoryParam } : undefined,
+  });
+
+  const {
+    data: programs,
+    error,
+    isValidating,
+  } = useSWR<NetworkProgramProps[]>(
+    `/api/network/programs${queryString}`,
+    fetcher,
+    { revalidateOnFocus: false, keepPreviousData: true },
+  );
+
+  const { pagination, setPagination } = usePagination(
+    PROGRAM_NETWORK_MAX_PAGE_SIZE,
+  );
+
+  const { activeFilters, isFiltered, onRemoveAll } = useProgramNetworkFilters();
+
+  const hasActiveFilters =
+    activeFilters.length > 0 || Boolean(searchParamsObj.search);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <MarketplaceListToolbar variant="internal" />
+
+      {error || countError ? (
+        <div className="text-content-subtle py-12 text-sm">
+          Failed to load programs
+        </div>
+      ) : !programs || programs?.length ? (
+        <div>
+          <div className="min-h-[300px]">
+            {programs ? (
+              <MarketplaceProgramGrid
+                programs={programs}
+                className={cn(isValidating && "opacity-50")}
+              />
+            ) : (
+              <MarketplaceProgramGridSkeleton />
+            )}
+          </div>
+          <div className="sticky bottom-0 mt-4 rounded-b-[inherit] border-t border-neutral-200 bg-white px-3.5 py-2">
+            <PaginationControls
+              pagination={pagination}
+              setPagination={setPagination}
+              totalCount={programsCount || 0}
+              unit={(p) => `program${p ? "s" : ""}`}
+            />
+          </div>
+        </div>
+      ) : (
+        <MarketplaceEmptyState
+          isFiltered={hasActiveFilters}
+          onClearAllFilters={onRemoveAll}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-card.tsx b/apps/web/ui/program-marketplace/program-card.tsx
similarity index 60%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-card.tsx
rename to apps/web/ui/program-marketplace/program-card.tsx
index c4e1154b245..fb3d87dedf1 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-card.tsx
+++ b/apps/web/ui/program-marketplace/program-card.tsx
@@ -1,44 +1,59 @@
+"use client";
+
 import { NetworkProgramProps } from "@/lib/types";
-import { ProgramCategory } from "@/ui/partners/program-marketplace/program-category";
-import { ProgramRewardsDisplay } from "@/ui/partners/program-marketplace/program-rewards-display";
-import { Tooltip, useRouterStuff } from "@dub/ui";
-import { OG_AVATAR_URL } from "@dub/utils";
+import { ProgramCategory } from "@/ui/program-marketplace/program-category";
+import { ProgramRewardsDisplay } from "@/ui/program-marketplace/program-rewards-display";
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryHref,
+  getMarketplaceProgramHref,
+} from "@/ui/program-marketplace/utils/urls";
+import { Tooltip } from "@dub/ui";
+import { OG_AVATAR_URL, cn } from "@dub/utils";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { ProgramStatusBadge } from "./program-status-badge";
 
 export function MarketplaceProgramCard({
   program,
+  showStatus = true,
+  className,
 }: {
   program: NetworkProgramProps;
+  showStatus?: boolean;
+  className?: string;
 }) {
-  const { queryParams } = useRouterStuff();
+  const router = useRouter();
 
   return (
     <Link
-      href={`/programs/marketplace/${program.slug}`}
-      className="border-border-subtle hover:drop-shadow-card-hover rounded-xl border bg-white p-6 transition-[filter]"
+      href={getMarketplaceProgramHref(program.slug)}
+      className={cn(
+        "border-border-subtle hover:drop-shadow-card-hover flex h-full flex-col rounded-xl border bg-white p-4 transition-[filter] sm:p-6",
+        className,
+      )}
     >
       <div className="flex justify-between gap-4">
         <img
           src={program.logo || `${OG_AVATAR_URL}${program.name}`}
           alt={program.name}
-          className="size-12 rounded-full"
+          className="size-12 shrink-0 rounded-full object-cover"
         />
 
-        <ProgramStatusBadge program={program} />
+        {showStatus ? <ProgramStatusBadge program={program} /> : null}
       </div>
 
-      <div className="mt-4 flex flex-col">
-        <span className="text-content-emphasis text-base font-semibold">
+      <div className="mt-6 flex flex-col sm:mt-8">
+        <h3 className="text-content-emphasis text-base font-semibold">
           {program.name}
-        </span>
+        </h3>
 
         <div className="text-content-subtle mt-1 line-clamp-2 text-sm">
           {program.description ||
             `${program.name} is a program in the Dub Partner Network. Join the network to start partnering with them.`}
         </div>
 
-        <div className="mt-4 flex gap-4">
+        <div className="mt-5 flex gap-4">
           {Boolean(program.rewards?.length) && (
             <div>
               <span className="text-content-muted block text-xs font-medium">
@@ -47,37 +62,31 @@ export function MarketplaceProgramCard({
               <ProgramRewardsDisplay
                 rewards={program.rewards}
                 onRewardClick={(reward) =>
-                  queryParams({
-                    set: {
-                      rewardType: reward.event,
-                    },
-                    del: "page",
-                  })
+                  router.push(
+                    getMarketplaceAllHref({ rewardType: reward.event }),
+                  )
                 }
-                className="mt-1"
+                className="mt-2"
               />
             </div>
           )}
           {Boolean(program.categories.length) && (
-            <div className="min-w-0">
+            <div className="hidden min-w-0 sm:block">
               <span className="text-content-muted block text-xs font-medium">
                 Category
               </span>
-              <div className="mt-1 flex items-center gap-1.5">
-                {program.categories.slice(0, 1)?.map((category) => (
-                  <ProgramCategory
-                    key={category}
-                    category={category}
-                    onClick={() =>
-                      queryParams({
-                        set: {
-                          category,
-                        },
-                        del: "page",
-                      })
-                    }
-                  />
-                ))}
+              <div className="mt-2 flex items-center gap-1.5">
+                {program.categories
+                  .slice(0, 1)
+                  ?.map((category) => (
+                    <ProgramCategory
+                      key={category}
+                      category={category}
+                      onClick={() =>
+                        router.push(getMarketplaceCategoryHref(category))
+                      }
+                    />
+                  ))}
                 {program.categories.length > 1 && (
                   <Tooltip
                     content={
@@ -87,12 +96,7 @@ export function MarketplaceProgramCard({
                             key={category}
                             category={category}
                             onClick={() =>
-                              queryParams({
-                                set: {
-                                  category,
-                                },
-                                del: "page",
-                              })
+                              router.push(getMarketplaceCategoryHref(category))
                             }
                           />
                         ))}
@@ -113,9 +117,18 @@ export function MarketplaceProgramCard({
   );
 }
 
-export function MarketplaceProgramCardSkeleton() {
+export function MarketplaceProgramCardSkeleton({
+  className,
+}: {
+  className?: string;
+} = {}) {
   return (
-    <div className="border-border-subtle rounded-xl border bg-white p-6">
+    <div
+      className={cn(
+        "border-border-subtle h-full rounded-xl border bg-white p-6",
+        className,
+      )}
+    >
       <div className="flex justify-between gap-4">
         <div className="size-12 animate-pulse rounded-full bg-neutral-200" />
       </div>
diff --git a/apps/web/ui/program-marketplace/program-category.tsx b/apps/web/ui/program-marketplace/program-category.tsx
new file mode 100644
index 00000000000..2d81fdf0a31
--- /dev/null
+++ b/apps/web/ui/program-marketplace/program-category.tsx
@@ -0,0 +1,96 @@
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { Category } from "@dub/prisma/client";
+import { CircleInfo } from "@dub/ui";
+import { cn } from "@dub/utils";
+import Link from "next/link";
+
+export const programCategorySurfaceClassName =
+  "inline-flex h-5 max-h-5 min-w-0 items-center gap-1 rounded-full bg-neutral-900/[0.06] px-2 text-xs font-medium text-neutral-900 shadow-[0_0.5px_1px_0_rgba(0,0,0,0.03)] ring-1 ring-inset ring-neutral-900/[0.05] backdrop-blur-[3px] backdrop-saturate-150 transition-[background-color,transform] duration-150 ease-out [@media(hover:hover)]:hover:bg-neutral-900/[0.09] active:scale-[0.97] motion-reduce:transition-none motion-reduce:active:scale-100 [@media(hover:none)]:hover:bg-neutral-900/[0.06]";
+
+export const ProgramCategory = ({
+  category,
+  onClick,
+  href,
+  variant = "default",
+  className,
+}: {
+  category: Category;
+  onClick?: () => void;
+  href?: string;
+  variant?: "default" | "pill" | "surface";
+  className?: string;
+}) => {
+  const categoryData = PROGRAM_CATEGORIES_MAP[category];
+  const { icon: Icon, label } = categoryData ?? {
+    icon: CircleInfo,
+    label: category.replaceAll("_", " "),
+  };
+
+  const sharedClassName = cn(
+    variant === "surface"
+      ? programCategorySurfaceClassName
+      : variant === "pill"
+        ? "inline-flex min-w-0 items-center gap-1.5 rounded-full bg-neutral-100 px-2 py-0.5 text-xs font-medium text-neutral-600"
+        : "text-content-default -ml-1 flex h-6 min-w-0 items-center gap-1 rounded-md px-1",
+    (href || onClick) &&
+      (variant === "pill"
+        ? "hover:bg-neutral-200/80 active:bg-neutral-200"
+        : variant === "default"
+          ? "hover:bg-bg-subtle active:bg-bg-emphasis"
+          : undefined),
+    className,
+  );
+
+  const content = (
+    <>
+      <Icon
+        className={cn(
+          "shrink-0",
+          variant === "surface"
+            ? "size-3 text-neutral-900"
+            : variant === "pill"
+              ? "size-3.5 text-neutral-500"
+              : "size-4",
+        )}
+      />
+      <span
+        className={cn(
+          "min-w-0 truncate",
+          variant === "surface"
+            ? "text-xs font-medium text-neutral-900"
+            : variant === "pill"
+              ? "font-medium"
+              : "text-sm font-medium",
+        )}
+      >
+        {label}
+      </span>
+    </>
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={sharedClassName}>
+        {content}
+      </Link>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          onClick?.();
+        }}
+        className={sharedClassName}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return <div className={sharedClassName}>{content}</div>;
+};
diff --git a/apps/web/ui/partners/program-marketplace/program-marketplace-banner.tsx b/apps/web/ui/program-marketplace/program-marketplace-banner.tsx
similarity index 95%
rename from apps/web/ui/partners/program-marketplace/program-marketplace-banner.tsx
rename to apps/web/ui/program-marketplace/program-marketplace-banner.tsx
index 3f0e4fa7e6e..872502285d2 100644
--- a/apps/web/ui/partners/program-marketplace/program-marketplace-banner.tsx
+++ b/apps/web/ui/program-marketplace/program-marketplace-banner.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
-import { useProgramMarketplacePromo } from "@/ui/partners/program-marketplace/use-program-marketplace-promo";
+import { useProgramMarketplacePromo } from "@/ui/program-marketplace/use-program-marketplace-promo";
+import { getMarketplaceHref } from "@/ui/program-marketplace/utils/urls";
 import { X } from "@/ui/shared/icons";
 import { Button, Grid, buttonVariants } from "@dub/ui";
 import { cn } from "@dub/utils";
@@ -68,7 +69,7 @@ export function ProgramMarketplaceBanner() {
 
               <div className="flex items-center gap-2 p-3 sm:px-2 sm:py-0">
                 <Link
-                  href="/programs/marketplace"
+                  href={getMarketplaceHref()}
                   className={cn(
                     buttonVariants({ variant: "primary" }),
                     "flex h-8 w-fit items-center justify-center whitespace-nowrap rounded-lg border px-3 text-sm",
diff --git a/apps/web/ui/partners/program-marketplace/program-marketplace-card.tsx b/apps/web/ui/program-marketplace/program-marketplace-card.tsx
similarity index 89%
rename from apps/web/ui/partners/program-marketplace/program-marketplace-card.tsx
rename to apps/web/ui/program-marketplace/program-marketplace-card.tsx
index 619173164dc..b15f79aa2ac 100644
--- a/apps/web/ui/partners/program-marketplace/program-marketplace-card.tsx
+++ b/apps/web/ui/program-marketplace/program-marketplace-card.tsx
@@ -1,7 +1,8 @@
 "use client";
 
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
-import { useProgramMarketplacePromo } from "@/ui/partners/program-marketplace/use-program-marketplace-promo";
+import { useProgramMarketplacePromo } from "@/ui/program-marketplace/use-program-marketplace-promo";
+import { getMarketplaceHref } from "@/ui/program-marketplace/utils/urls";
 import { Grid, buttonVariants } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { AnimatePresence, motion } from "motion/react";
@@ -20,7 +21,7 @@ export function ProgramMarketplaceCard() {
 
   return (
     <AnimatePresence>
-      {!pathname.endsWith("/programs/marketplace") && (
+      {!pathname.endsWith("/marketplace") && (
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
@@ -54,7 +55,7 @@ export function ProgramMarketplaceCard() {
             </div>
 
             <Link
-              href="/programs/marketplace"
+              href={getMarketplaceHref()}
               className={cn(
                 buttonVariants({ variant: "primary" }),
                 "flex h-6 w-fit items-center justify-center whitespace-nowrap rounded-md border px-1.5 text-xs",
diff --git a/apps/web/ui/program-marketplace/program-marketplace-logos.tsx b/apps/web/ui/program-marketplace/program-marketplace-logos.tsx
new file mode 100644
index 00000000000..ed9b843e855
--- /dev/null
+++ b/apps/web/ui/program-marketplace/program-marketplace-logos.tsx
@@ -0,0 +1,211 @@
+import { cn } from "@dub/utils";
+import type { CSSProperties } from "react";
+
+const PROGRAM_MARKETPLACE_LOGOS_URL =
+  "https://assets.dub.co/misc/program-marketplace-logos.png";
+
+// x, y, rotation, size, z (/shadow)
+const LOGOS = [
+  // Perplexity
+  { x: 0, y: 16, r: 22, s: 1 },
+  // Dub
+  { x: 23, y: 0, r: -7, s: 0.7 },
+  // Tella
+  { x: 44, y: 24, r: 13, s: 0.8 },
+  // Buffer
+  { x: 62, y: 0, r: -49, s: 0.8 },
+  // Superhuman
+  { x: 82, y: 28, r: -26, s: 0.75 },
+  // Framer
+  { x: 12, y: 50, r: -11, s: 0.75 },
+  // Polymarket
+  { x: 26, y: 34, r: -10, s: 0.9, z: 1 },
+  // Fillout
+  { x: 40, y: 48, r: -11, s: 0.75 },
+  // Copper
+  { x: 60, y: 54, r: -18, s: 0.9 },
+  // Firecrawl
+  { x: 78, y: 50, r: -37, s: 0.75, z: 1 },
+  // Wispr Flow
+  { x: 0, y: 72, r: 15, s: 0.8, z: 1 },
+  // Granola
+  { x: 26, y: 70, r: 4, s: 0.8 },
+];
+
+export const PROGRAM_MARKETPLACE_LOGO_COUNT = LOGOS.length;
+
+function getProgramMarketplaceLogoStyle(index: number, size?: number) {
+  const count = PROGRAM_MARKETPLACE_LOGO_COUNT;
+  const normalizedIndex = index % count;
+
+  if (size !== undefined) {
+    return {
+      backgroundImage: `url(${PROGRAM_MARKETPLACE_LOGOS_URL})`,
+      backgroundSize: `${count * size}px ${size}px`,
+      backgroundPosition: `-${normalizedIndex * size}px 0px`,
+      backgroundRepeat: "no-repeat",
+    };
+  }
+
+  return {
+    backgroundImage: `url(${PROGRAM_MARKETPLACE_LOGOS_URL})`,
+    backgroundSize: `${count * 100}% 100%`,
+    backgroundPositionX: `${(normalizedIndex / (count - 1)) * 100}%`,
+    backgroundRepeat: "no-repeat",
+  };
+}
+
+function ProgramMarketplaceLogoSprite({
+  index,
+  className,
+  style,
+}: {
+  index: number;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  const size =
+    typeof style?.width === "number"
+      ? style.width
+      : typeof style?.height === "number"
+        ? style.height
+        : undefined;
+
+  return (
+    <div
+      className={cn("rounded-full", className)}
+      style={{
+        ...getProgramMarketplaceLogoStyle(index, size),
+        ...style,
+      }}
+    />
+  );
+}
+
+// Framer, Perplexity, Wispr Flow
+const VIEW_ALL_CLUSTER = {
+  originLeft: 138.29,
+  originTop: 56,
+  width: 137.03,
+  height: 120.75,
+} as const;
+
+const VIEW_ALL_LOGOS = [
+  {
+    index: 10,
+    left: 156 - VIEW_ALL_CLUSTER.originLeft,
+    top: 56 - VIEW_ALL_CLUSTER.originTop,
+    size: 71,
+    rotation: 11.4,
+    ringClassName: "ring-[1px]",
+    zIndex: 0,
+    hoverClassName: "group-hover:-translate-y-1",
+  },
+  {
+    index: 0,
+    left: 204.32 - VIEW_ALL_CLUSTER.originLeft,
+    top: 74.82 - VIEW_ALL_CLUSTER.originTop,
+    size: 71,
+    rotation: -22.07,
+    ringClassName: "ring-4",
+    zIndex: 10,
+    hoverClassName: "group-hover:translate-x-1 group-hover:translate-y-0.5",
+  },
+  {
+    index: 5,
+    left: 138.29 - VIEW_ALL_CLUSTER.originLeft,
+    top: 96 - VIEW_ALL_CLUSTER.originTop,
+    size: 80.75,
+    rotation: 4.84,
+    ringClassName: "ring-4",
+    zIndex: 20,
+    hoverClassName: "group-hover:-translate-x-1 group-hover:translate-y-0.5",
+  },
+] as const;
+
+export function ProgramMarketplaceLogosCluster({
+  className,
+}: {
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn("relative", className)}
+      style={{
+        width: VIEW_ALL_CLUSTER.width,
+        height: VIEW_ALL_CLUSTER.height,
+      }}
+    >
+      {VIEW_ALL_LOGOS.map(
+        ({
+          index,
+          left,
+          top,
+          size,
+          rotation,
+          ringClassName,
+          zIndex,
+          hoverClassName,
+        }) => (
+          <div
+            key={index}
+            className={cn(
+              "absolute transition-transform duration-300 ease-out will-change-transform",
+              hoverClassName,
+            )}
+            style={{ left, top, zIndex }}
+          >
+            <ProgramMarketplaceLogoSprite
+              index={index}
+              className={cn("ring-white", ringClassName)}
+              style={{
+                width: size,
+                height: size,
+                transform: `rotate(${rotation}deg)`,
+              }}
+            />
+          </div>
+        ),
+      )}
+    </div>
+  );
+}
+
+export function ProgramMarketplaceLogos({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "relative z-0 flex size-full flex-wrap gap-2 [--logo-size:32px]",
+        className,
+      )}
+    >
+      {LOGOS.map(({ x, y, r, s, z }, index) => {
+        return (
+          <div
+            key={index}
+            className={cn(
+              "animate-float absolute",
+              index % 2 === 0 && "[animation-direction:reverse]",
+            )}
+            style={{
+              left: `${x}%`,
+              top: `${y}%`,
+              animationDelay: `-${index * 0.1}s`,
+            }}
+          >
+            <ProgramMarketplaceLogoSprite
+              index={index}
+              className={cn(z && "drop-shadow-sm")}
+              style={{
+                transform: `rotate(${r}deg)`,
+                width: `calc(var(--logo-size, 32px) * ${s})`,
+                height: `calc(var(--logo-size, 32px) * ${s})`,
+                zIndex: z,
+              }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/apps/web/ui/partners/program-marketplace/program-reward-icon.tsx b/apps/web/ui/program-marketplace/program-reward-icon.tsx
similarity index 52%
rename from apps/web/ui/partners/program-marketplace/program-reward-icon.tsx
rename to apps/web/ui/program-marketplace/program-reward-icon.tsx
index 1316989a32b..3463e12f2d8 100644
--- a/apps/web/ui/partners/program-marketplace/program-reward-icon.tsx
+++ b/apps/web/ui/program-marketplace/program-reward-icon.tsx
@@ -7,13 +7,24 @@ export const ProgramRewardIcon = ({
   description,
   onClick,
   className,
+  iconClassName,
 }: {
   icon: Icon;
   description: string;
   onClick?: () => void;
   className?: string;
+  iconClassName?: string;
 }) => {
-  const As = onClick ? "button" : "div";
+  const iconSurface = (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center rounded-md p-1",
+        onClick && "hover:bg-bg-subtle active:bg-bg-emphasis transition-colors",
+      )}
+    >
+      <Icon className={cn("size-4", iconClassName)} />
+    </span>
+  );
 
   return (
     <HoverCard.Root openDelay={100}>
@@ -27,24 +38,27 @@ export const ProgramRewardIcon = ({
           <span>{description}</span>
         </HoverCard.Content>
       </HoverCard.Portal>
-      <HoverCard.Trigger>
-        <As
-          {...(onClick && {
-            type: "button",
-            onClick: (e) => {
+      <HoverCard.Trigger asChild>
+        {onClick ? (
+          <button
+            type="button"
+            onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-              onClick?.();
-            },
-          })}
-          className={cn(
-            "text-content-default flex size-6 items-center justify-center rounded-md",
-            onClick && "hover:bg-bg-subtle active:bg-bg-emphasis",
-            className,
-          )}
-        >
-          <Icon className="size-4" />
-        </As>
+              onClick();
+            }}
+            className={cn(
+              "inline-flex shrink-0 border-0 bg-transparent p-0",
+              className,
+            )}
+          >
+            {iconSurface}
+          </button>
+        ) : (
+          <div className={cn("inline-flex shrink-0", className)}>
+            {iconSurface}
+          </div>
+        )}
       </HoverCard.Trigger>
     </HoverCard.Root>
   );
diff --git a/apps/web/ui/partners/program-marketplace/program-rewards-display.tsx b/apps/web/ui/program-marketplace/program-rewards-display.tsx
similarity index 85%
rename from apps/web/ui/partners/program-marketplace/program-rewards-display.tsx
rename to apps/web/ui/program-marketplace/program-rewards-display.tsx
index 4232b60462c..9fe4a7f359d 100644
--- a/apps/web/ui/partners/program-marketplace/program-rewards-display.tsx
+++ b/apps/web/ui/program-marketplace/program-rewards-display.tsx
@@ -1,10 +1,10 @@
 import { DiscountProps, RewardProps } from "@/lib/types";
 import { formatDiscountDescription } from "@/ui/partners/format-discount-description";
 import { formatRewardDescription } from "@/ui/partners/format-reward-description";
+import { REWARD_EVENT_ICON } from "@/ui/partners/rewards/reward-event-icon";
 import { Gift, Icon } from "@dub/ui";
 import { cn } from "@dub/utils";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import { REWARD_EVENT_ICON } from "../rewards/reward-event-icon";
 import { ProgramRewardIcon } from "./program-reward-icon";
 
 type RewardItem = {
@@ -18,6 +18,7 @@ interface ProgramRewardsDisplayProps {
   rewards?: RewardProps[] | null;
   discount?: DiscountProps | null;
   isDarkImage?: boolean;
+  iconsOnly?: boolean;
   className?: string;
   onRewardClick?: (reward: RewardProps) => void;
   onDiscountClick?: (discount: DiscountProps) => void;
@@ -29,6 +30,7 @@ export function ProgramRewardsDisplay({
   rewards,
   discount,
   isDarkImage = false,
+  iconsOnly = false,
   className,
   onRewardClick,
   onDiscountClick,
@@ -65,6 +67,23 @@ export function ProgramRewardsDisplay({
   // shouldn't happen, but just in case
   if (items.length === 0) return null;
 
+  if (iconsOnly) {
+    return (
+      <div className={cn("flex min-h-6 items-center gap-1.5", className)}>
+        {items.map((item) => (
+          <ProgramRewardIcon
+            key={item.id}
+            icon={item.icon}
+            description={item.description}
+            onClick={item.onClick}
+            className={cn(isDarkImage && "text-content-inverted")}
+            iconClassName={cn("text-neutral-600", iconClassName)}
+          />
+        ))}
+      </div>
+    );
+  }
+
   // If there's only one item, show the full description
   if (items.length === 1) {
     const item = items[0];
@@ -108,7 +127,7 @@ export function ProgramRewardsDisplay({
             </div>
             <span
               className={cn(
-                "text-content-default max-w-[160px] truncate text-sm font-medium",
+                "text-content-default max-w-[120px] truncate text-sm font-medium sm:max-w-[160px]",
                 isDarkImage && "text-content-inverted",
                 descriptionClassName,
               )}
diff --git a/apps/web/ui/program-marketplace/program-sort.tsx b/apps/web/ui/program-marketplace/program-sort.tsx
new file mode 100644
index 00000000000..55c8fd54189
--- /dev/null
+++ b/apps/web/ui/program-marketplace/program-sort.tsx
@@ -0,0 +1,73 @@
+import { IconMenu, Popover, Tick, useRouterStuff } from "@dub/ui";
+import { cn } from "@dub/utils";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { MARKETPLACE_SORT_OPTIONS } from "./constants";
+
+export default function ProgramSort({
+  forceDropdown = false,
+}: {
+  forceDropdown?: boolean;
+}) {
+  const { queryParams, searchParams } = useRouterStuff();
+
+  const [openPopover, setOpenPopover] = useState(false);
+
+  const sortOrder = searchParams.get("sortOrder") === "asc" ? "asc" : "desc";
+
+  const selectedSort =
+    MARKETPLACE_SORT_OPTIONS.find(
+      (s) => s.value === searchParams.get("sortBy") && s.order === sortOrder,
+    ) ?? MARKETPLACE_SORT_OPTIONS[0];
+
+  return (
+    <Popover
+      forceDropdown={forceDropdown}
+      content={
+        <div className="w-full p-2 md:w-48">
+          {MARKETPLACE_SORT_OPTIONS.map(
+            ({ label, value, order, icon: Icon }) => (
+              <button
+                key={`${value}-${order}`}
+                onClick={() => {
+                  queryParams({
+                    set: {
+                      sortBy: value,
+                      sortOrder: order,
+                    },
+                    del: "page",
+                  });
+                  setOpenPopover(false);
+                }}
+                className="flex w-full items-center justify-between space-x-2 rounded-md px-1 py-2 hover:bg-neutral-100 active:bg-neutral-200"
+              >
+                <IconMenu text={label} icon={<Icon className="size-4" />} />
+                {value === selectedSort.value &&
+                  order === selectedSort.order && (
+                    <Tick className="size-4" aria-hidden="true" />
+                  )}
+              </button>
+            ),
+          )}
+        </div>
+      }
+      openPopover={openPopover}
+      setOpenPopover={setOpenPopover}
+    >
+      <button
+        onClick={() => setOpenPopover(!openPopover)}
+        className={cn(
+          "group flex h-9 cursor-pointer appearance-none items-center gap-x-2 truncate rounded-lg border px-3 text-sm outline-none transition-all",
+          "border-neutral-200 bg-white text-neutral-900 placeholder-neutral-400",
+          "focus-visible:border-neutral-500 data-[state=open]:border-neutral-500 data-[state=open]:ring-4 data-[state=open]:ring-neutral-200",
+        )}
+      >
+        <span className="text-content-emphasis flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-left">
+          Sort by{" "}
+          <strong className="font-semibold">{selectedSort.label}</strong>
+        </span>
+        <ChevronDown className="size-4 flex-shrink-0 text-neutral-400 transition-transform duration-75 group-data-[state=open]:rotate-180" />
+      </button>
+    </Popover>
+  );
+}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-status-badge.tsx b/apps/web/ui/program-marketplace/program-status-badge.tsx
similarity index 100%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/program-status-badge.tsx
rename to apps/web/ui/program-marketplace/program-status-badge.tsx
diff --git a/apps/web/ui/partners/program-marketplace/programs-promo-banner.tsx b/apps/web/ui/program-marketplace/programs-promo-banner.tsx
similarity index 84%
rename from apps/web/ui/partners/program-marketplace/programs-promo-banner.tsx
rename to apps/web/ui/program-marketplace/programs-promo-banner.tsx
index 577d8bac9a8..0debb0c3bde 100644
--- a/apps/web/ui/partners/program-marketplace/programs-promo-banner.tsx
+++ b/apps/web/ui/program-marketplace/programs-promo-banner.tsx
@@ -2,7 +2,7 @@
 
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { IdentityVerificationBanner } from "@/ui/partners/identity-verification/identity-verification-banner";
-import { ProgramMarketplaceBanner } from "@/ui/partners/program-marketplace/program-marketplace-banner";
+import { ProgramMarketplaceBanner } from "@/ui/program-marketplace/program-marketplace-banner";
 
 // Single promo banner slot for the programs page
 export function ProgramsPromoBanner() {
diff --git a/apps/web/ui/partners/program-marketplace/programs-promo-card.tsx b/apps/web/ui/program-marketplace/programs-promo-card.tsx
similarity index 84%
rename from apps/web/ui/partners/program-marketplace/programs-promo-card.tsx
rename to apps/web/ui/program-marketplace/programs-promo-card.tsx
index 81ddf9f8b50..93023641740 100644
--- a/apps/web/ui/partners/program-marketplace/programs-promo-card.tsx
+++ b/apps/web/ui/program-marketplace/programs-promo-card.tsx
@@ -2,7 +2,7 @@
 
 import usePartnerProfile from "@/lib/swr/use-partner-profile";
 import { IdentityVerificationCard } from "@/ui/partners/identity-verification/identity-verification-card";
-import { ProgramMarketplaceCard } from "@/ui/partners/program-marketplace/program-marketplace-card";
+import { ProgramMarketplaceCard } from "@/ui/program-marketplace/program-marketplace-card";
 
 // Single promo card slot for the sidebar
 export function ProgramsPromoCard() {
diff --git a/apps/web/ui/program-marketplace/use-image-accent-color.ts b/apps/web/ui/program-marketplace/use-image-accent-color.ts
new file mode 100644
index 00000000000..f157b151a4d
--- /dev/null
+++ b/apps/web/ui/program-marketplace/use-image-accent-color.ts
@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+// Mix a color toward white to produce a soft, "50"-level tint that keeps
+// dark content readable on top.
+function rgbToTint(r: number, g: number, b: number, whiteMix = 0.88) {
+  const mix = (c: number) => Math.round(c + (255 - c) * whiteMix);
+  return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`;
+}
+
+function saturation(r: number, g: number, b: number) {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  return max === 0 ? 0 : (max - min) / max;
+}
+
+function extractTint(img: HTMLImageElement): string | null {
+  const size = 32;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d", { willReadFrequently: true });
+  if (!ctx) return null;
+
+  ctx.drawImage(img, 0, 0, size, size);
+  const { data } = ctx.getImageData(0, 0, size, size);
+
+  const buckets = new Map<
+    string,
+    { count: number; r: number; g: number; b: number }
+  >();
+
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] < 125) continue; // skip transparent
+
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+
+    // Ignore near-white and near-black so backgrounds/sky don't win.
+    if (r > 232 && g > 232 && b > 232) continue;
+    if (r < 24 && g < 24 && b < 24) continue;
+
+    const key = `${r >> 5}-${g >> 5}-${b >> 5}`;
+    const bucket = buckets.get(key) ?? { count: 0, r: 0, g: 0, b: 0 };
+    bucket.count++;
+    bucket.r += r;
+    bucket.g += g;
+    bucket.b += b;
+    buckets.set(key, bucket);
+  }
+
+  let best: { r: number; g: number; b: number } | null = null;
+  let bestScore = -1;
+
+  for (const bucket of buckets.values()) {
+    const r = bucket.r / bucket.count;
+    const g = bucket.g / bucket.count;
+    const b = bucket.b / bucket.count;
+    // Favor vivid colors over merely frequent muddy ones.
+    const score = bucket.count * (0.2 + saturation(r, g, b));
+    if (score > bestScore) {
+      bestScore = score;
+      best = { r, g, b };
+    }
+  }
+
+  return best ? rgbToTint(best.r, best.g, best.b) : null;
+}
+
+// Persist results across mounts so an image is only decoded once per session.
+// `null` means "extracted but no usable color"; `undefined` means "not computed".
+const cache = new Map<string, string | null>();
+
+export type ImageAccentColor = {
+  color: string | null;
+  ready: boolean;
+};
+
+export function useImageAccentColor(src?: string | null): ImageAccentColor {
+  const [state, setState] = useState<ImageAccentColor>(() => {
+    if (src && cache.has(src)) {
+      return { color: cache.get(src) ?? null, ready: true };
+    }
+    return { color: null, ready: false };
+  });
+
+  useEffect(() => {
+    if (!src) {
+      setState({ color: null, ready: true });
+      return;
+    }
+
+    if (cache.has(src)) {
+      setState({ color: cache.get(src) ?? null, ready: true });
+      return;
+    }
+
+    setState({ color: null, ready: false });
+
+    let cancelled = false;
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+
+    const finish = (color: string | null) => {
+      cache.set(src, color);
+      if (!cancelled) setState({ color, ready: true });
+    };
+
+    img.onload = () => {
+      try {
+        finish(extractTint(img));
+      } catch {
+        finish(null);
+      }
+    };
+    img.onerror = () => finish(null);
+
+    img.src = src;
+
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+
+  return state;
+}
diff --git a/apps/web/ui/partners/program-marketplace/use-program-marketplace-promo.tsx b/apps/web/ui/program-marketplace/use-program-marketplace-promo.tsx
similarity index 100%
rename from apps/web/ui/partners/program-marketplace/use-program-marketplace-promo.tsx
rename to apps/web/ui/program-marketplace/use-program-marketplace-promo.tsx
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/use-program-network-filters.tsx b/apps/web/ui/program-marketplace/use-program-network-filters.tsx
similarity index 53%
rename from apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/use-program-network-filters.tsx
rename to apps/web/ui/program-marketplace/use-program-network-filters.tsx
index 9111483d1e5..2dc782bf9fe 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/marketplace/use-program-network-filters.tsx
+++ b/apps/web/ui/program-marketplace/use-program-network-filters.tsx
@@ -1,34 +1,27 @@
 import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
 import useNetworkProgramsCount from "@/lib/swr/use-network-programs-count";
-import { REWARD_EVENT_ICON } from "@/ui/partners/rewards/reward-event-icon";
+import { Category } from "@dub/prisma/client";
 import { useRouterStuff } from "@dub/ui";
 import { CircleDotted, Gift, Suitcase } from "@dub/ui/icons";
-import { capitalize, cn, nFormatter } from "@dub/utils";
+import { capitalize, nFormatter } from "@dub/utils";
+import { usePathname, useRouter } from "next/navigation";
 import { useCallback, useMemo } from "react";
+import { MARKETPLACE_REWARD_TYPES } from "./constants";
 import { ProgramNetworkStatusBadges } from "./program-status-badge";
-
-const REWARD_TYPES = {
-  sale: {
-    icon: REWARD_EVENT_ICON.sale,
-    label: "Sale reward (CPS)",
-  },
-  lead: {
-    icon: REWARD_EVENT_ICON.lead,
-    label: "Lead reward (CPL)",
-  },
-  click: {
-    icon: REWARD_EVENT_ICON.click,
-    label: "Click reward (CPC)",
-  },
-  discount: {
-    icon: Gift,
-    label: "Dual-sided incentives",
-  },
-};
+import {
+  getMarketplaceAllHref,
+  getMarketplaceCategoryFromPathname,
+  getMarketplaceCategoryHref,
+  getPreservedMarketplaceSearchParams,
+} from "./utils/urls";
 
 export function useProgramNetworkFilters() {
+  const router = useRouter();
+  const pathname = usePathname();
   const { searchParamsObj, queryParams } = useRouterStuff();
 
+  const routeCategory = getMarketplaceCategoryFromPathname(pathname);
+
   const { data: categoriesCount } = useNetworkProgramsCount<
     | {
         category: string;
@@ -74,11 +67,11 @@ export function useProgramNetworkFilters() {
         key: "rewardType",
         icon: Gift,
         label: "Reward type",
-        options: Object.entries(REWARD_TYPES).map(
-          ([key, { label, icon: Icon }]) => ({
+        singleSelect: true,
+        options: Object.entries(MARKETPLACE_REWARD_TYPES).map(
+          ([key, label]) => ({
             value: key,
             label,
-            icon: <Icon className="size-4" />,
             right: nFormatter(
               rewardTypesCount?.find(({ type }) => type === key)?._count || 0,
               { full: true },
@@ -91,10 +84,7 @@ export function useProgramNetworkFilters() {
         icon: Suitcase,
         label: "Category",
         labelPlural: "categories",
-        getOptionIcon: (value) => {
-          const Icon = PROGRAM_CATEGORIES_MAP[value]?.icon || Suitcase;
-          return <Icon className="size-4" />;
-        },
+        singleSelect: true,
         getOptionLabel: (value) =>
           PROGRAM_CATEGORIES_MAP[value]?.label || value.replaceAll("_", " "),
         options:
@@ -108,25 +98,18 @@ export function useProgramNetworkFilters() {
         key: "status",
         icon: CircleDotted,
         label: "Status",
+        singleSelect: true,
         options:
           statusCount?.map(({ status, _count }) => {
-            const {
-              label,
-              icon: Icon,
-              className,
-            } = status
-              ? ProgramNetworkStatusBadges[status]
-              : {
-                  label: "Not applied",
-                  icon: CircleDotted,
-                  className: "text-neutral-500",
-                };
+            const label = status
+              ? ProgramNetworkStatusBadges[
+                  status as keyof typeof ProgramNetworkStatusBadges
+                ]?.label ?? capitalize(status)
+              : "Not applied";
+
             return {
               value: status ?? "null",
-              label: label || capitalize(status),
-              icon: (
-                <Icon className={cn("size-4", className, "bg-transparent")} />
-              ),
+              label,
               right: nFormatter(_count, { full: true }),
             };
           }) ?? null,
@@ -136,42 +119,89 @@ export function useProgramNetworkFilters() {
   );
 
   const activeFilters = useMemo(() => {
-    const { rewardType, category, status } = searchParamsObj;
+    const { rewardType, status } = searchParamsObj;
 
     return [
       ...(rewardType ? [{ key: "rewardType", value: rewardType }] : []),
-      ...(category ? [{ key: "category", value: category }] : []),
+      ...(routeCategory ? [{ key: "category", value: routeCategory }] : []),
       ...(status ? [{ key: "status", value: status }] : []),
     ];
-  }, [searchParamsObj]);
+  }, [routeCategory, searchParamsObj]);
+
+  const setCategoryFilter = useCallback(
+    (category: Category | null) => {
+      const preserved = getPreservedMarketplaceSearchParams(searchParamsObj);
+
+      router.replace(
+        category
+          ? getMarketplaceCategoryHref(category, preserved)
+          : getMarketplaceAllHref(preserved),
+      );
+    },
+    [router, searchParamsObj],
+  );
 
   const onSelect = useCallback(
-    (key: string, value: any) =>
+    (key: string, value: string) => {
+      if (key === "category") {
+        setCategoryFilter(value as Category);
+        return;
+      }
+
       queryParams({
         set: {
           [key]: value,
         },
         del: "page",
-      }),
-    [queryParams],
+      });
+    },
+    [queryParams, setCategoryFilter],
   );
 
   const onRemove = useCallback(
-    (key: string) => {
+    (key: string, _value?: string) => {
+      if (key === "category") {
+        setCategoryFilter(null);
+        return;
+      }
+
       queryParams({
         del: [key, "page"],
       });
     },
-    [queryParams],
+    [queryParams, setCategoryFilter],
   );
 
-  const onRemoveAll = useCallback(
-    () =>
-      queryParams({
-        del: ["rewardType", "category", "status", "search", "page"],
-      }),
-    [queryParams],
-  );
+  const onClearFilters = useCallback(() => {
+    const preserved = getPreservedMarketplaceSearchParams(searchParamsObj);
+
+    if (routeCategory) {
+      router.replace(
+        getMarketplaceAllHref({
+          rewardType: preserved.rewardType,
+          search: preserved.search,
+          sortBy: preserved.sortBy,
+          sortOrder: preserved.sortOrder,
+        }),
+      );
+      return;
+    }
+
+    queryParams({
+      del: ["rewardType", "category", "status", "page"],
+    });
+  }, [queryParams, routeCategory, router, searchParamsObj]);
+
+  const onRemoveAll = useCallback(() => {
+    if (routeCategory) {
+      router.replace(getMarketplaceAllHref());
+      return;
+    }
+
+    queryParams({
+      del: ["rewardType", "category", "status", "search", "page"],
+    });
+  }, [queryParams, routeCategory, router]);
 
   const isFiltered = Boolean(
     activeFilters.length > 0 || searchParamsObj.search,
@@ -182,6 +212,7 @@ export function useProgramNetworkFilters() {
     activeFilters,
     onSelect,
     onRemove,
+    onClearFilters,
     onRemoveAll,
     isFiltered,
   };
diff --git a/apps/web/ui/program-marketplace/use-public-marketplace-filters.tsx b/apps/web/ui/program-marketplace/use-public-marketplace-filters.tsx
new file mode 100644
index 00000000000..272057fc234
--- /dev/null
+++ b/apps/web/ui/program-marketplace/use-public-marketplace-filters.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { PROGRAM_CATEGORIES_MAP } from "@/lib/network/program-categories";
+import { Category } from "@dub/prisma/client";
+import { useRouterStuff } from "@dub/ui";
+import { Gift, Suitcase } from "@dub/ui/icons";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo } from "react";
+import {
+  MARKETPLACE_REWARD_TYPES,
+  type MarketplaceRewardType,
+} from "./constants";
+import {
+  buildExternalMarketplaceFilterHref,
+  getMarketplaceAllHref,
+} from "./utils/urls";
+
+export function usePublicMarketplaceFilters({
+  basePath,
+  activeCategory,
+  categoryCounts,
+  rewardTypeCounts,
+}: {
+  basePath: string;
+  activeCategory?: Category;
+  categoryCounts: { category: Category; count: number }[];
+  rewardTypeCounts: {
+    type: MarketplaceRewardType;
+    count: number;
+  }[];
+}) {
+  const router = useRouter();
+  const { searchParamsObj } = useRouterStuff();
+
+  const search =
+    typeof searchParamsObj.search === "string"
+      ? searchParamsObj.search
+      : undefined;
+  const sortBy =
+    typeof searchParamsObj.sortBy === "string"
+      ? searchParamsObj.sortBy
+      : undefined;
+  const sortOrder =
+    typeof searchParamsObj.sortOrder === "string"
+      ? searchParamsObj.sortOrder
+      : undefined;
+  const activeRewardType = searchParamsObj.rewardType as
+    | MarketplaceRewardType
+    | undefined;
+
+  const filters = useMemo(
+    () => [
+      {
+        key: "rewardType",
+        icon: Gift,
+        label: "Reward type",
+        singleSelect: true,
+        options: rewardTypeCounts.map(({ type, count }) => ({
+          value: type,
+          label: MARKETPLACE_REWARD_TYPES[type],
+          right: String(count),
+        })),
+      },
+      {
+        key: "category",
+        icon: Suitcase,
+        label: "Category",
+        singleSelect: true,
+        options: categoryCounts.map(({ category, count }) => ({
+          value: category,
+          label:
+            PROGRAM_CATEGORIES_MAP[category]?.label ??
+            category.replaceAll("_", " "),
+          right: String(count),
+        })),
+      },
+    ],
+    [categoryCounts, rewardTypeCounts],
+  );
+
+  const activeFilters = useMemo(() => {
+    return [
+      ...(activeRewardType
+        ? [{ key: "rewardType", value: activeRewardType }]
+        : []),
+      ...(activeCategory ? [{ key: "category", value: activeCategory }] : []),
+    ];
+  }, [activeCategory, activeRewardType]);
+
+  const buildHref = useCallback(
+    (params: {
+      category?: Category | null;
+      rewardType?: MarketplaceRewardType | null;
+    }) =>
+      buildExternalMarketplaceFilterHref({
+        basePath,
+        activeRewardType,
+        search,
+        sortBy,
+        sortOrder,
+        ...params,
+      }),
+    [activeRewardType, basePath, search, sortBy, sortOrder],
+  );
+
+  const onSelect = useCallback(
+    (key: string, value: string) => {
+      if (key === "category") {
+        router.push(buildHref({ category: value as Category }));
+        return;
+      }
+
+      if (key === "rewardType") {
+        router.push(
+          buildHref({
+            rewardType: value as MarketplaceRewardType,
+          }),
+        );
+      }
+    },
+    [activeRewardType, buildHref, router],
+  );
+
+  const onRemove = useCallback(
+    (key: string) => {
+      if (key === "category") {
+        router.push(buildHref({ category: null }));
+        return;
+      }
+
+      if (key === "rewardType") {
+        router.push(buildHref({ rewardType: null }));
+      }
+    },
+    [buildHref, router],
+  );
+
+  const onClearFilters = useCallback(() => {
+    router.push(
+      getMarketplaceAllHref({
+        search,
+      }),
+    );
+  }, [router, search]);
+
+  const onSortChange = useCallback(
+    (nextSortBy: string, nextSortOrder: string) => {
+      router.push(
+        buildExternalMarketplaceFilterHref({
+          basePath,
+          activeRewardType,
+          search,
+          sortBy: nextSortBy,
+          sortOrder: nextSortOrder,
+          category: activeCategory,
+          rewardType: activeRewardType,
+        }),
+      );
+    },
+    [activeCategory, activeRewardType, basePath, router, search],
+  );
+
+  return {
+    filters,
+    activeFilters,
+    onSelect,
+    onRemove,
+    onClearFilters,
+    onSortChange,
+  };
+}
diff --git a/apps/web/ui/program-marketplace/utils/urls.ts b/apps/web/ui/program-marketplace/utils/urls.ts
new file mode 100644
index 00000000000..93e6968c508
--- /dev/null
+++ b/apps/web/ui/program-marketplace/utils/urls.ts
@@ -0,0 +1,224 @@
+import { MarketplaceRewardType } from "@/ui/program-marketplace/constants";
+import { Category } from "@dub/prisma/client";
+
+const MARKETPLACE_BASE = "/marketplace";
+
+export const MARKETPLACE_RESERVED_SLUGS = new Set(["all", "popular", "c"]);
+
+export function categoryToSlug(category: Category): string {
+  return category.toLowerCase().replaceAll("_", "-");
+}
+
+export function slugToCategory(slug: string): Category | null {
+  if (MARKETPLACE_RESERVED_SLUGS.has(slug)) {
+    return null;
+  }
+
+  const normalizedSlug = slug.toLowerCase();
+
+  return (
+    (Object.values(Category) as Category[]).find(
+      (category) => categoryToSlug(category) === normalizedSlug,
+    ) ?? null
+  );
+}
+
+function buildMarketplaceHref(
+  path: string,
+  params?: Record<string, string | undefined>,
+) {
+  const searchParams = new URLSearchParams();
+
+  if (params) {
+    Object.entries(params).forEach(([key, value]) => {
+      if (value) {
+        searchParams.set(key, value);
+      }
+    });
+  }
+
+  const queryString = searchParams.toString();
+
+  return `${path}${queryString ? `?${queryString}` : ""}`;
+}
+
+export function getMarketplaceHref() {
+  return MARKETPLACE_BASE;
+}
+
+export function getMarketplaceAllHref(
+  params?: Record<string, string | undefined>,
+) {
+  return buildMarketplaceHref(`${MARKETPLACE_BASE}/all`, params);
+}
+
+export function getPreservedMarketplaceSearchParams(
+  searchParamsObj: Record<string, string | string[] | undefined>,
+) {
+  const { rewardType, search, sortBy, sortOrder } = searchParamsObj;
+
+  return {
+    rewardType: typeof rewardType === "string" ? rewardType : undefined,
+    search: typeof search === "string" ? search : undefined,
+    sortBy: typeof sortBy === "string" ? sortBy : undefined,
+    sortOrder: typeof sortOrder === "string" ? sortOrder : undefined,
+  };
+}
+
+function parseMarketplaceSearchParam(
+  searchParams: Record<string, string | string[] | undefined>,
+  key: string,
+) {
+  const value = searchParams[key];
+  return typeof value === "string" ? value : undefined;
+}
+
+export function getMarketplacePopularRedirectHref(
+  searchParams: Record<string, string | string[] | undefined> = {},
+) {
+  const rewardType = parseMarketplaceSearchParam(searchParams, "rewardType");
+  const search = parseMarketplaceSearchParam(searchParams, "search");
+  const sortBy = parseMarketplaceSearchParam(searchParams, "sortBy");
+  const sortOrder = parseMarketplaceSearchParam(searchParams, "sortOrder");
+
+  if (!sortBy || sortBy === "popularity") {
+    return getMarketplaceAllHref({
+      rewardType,
+      search,
+      sortBy: "popularity",
+      sortOrder: sortOrder ?? "desc",
+    });
+  }
+
+  return getMarketplaceAllHref({
+    rewardType,
+    search,
+    sortBy,
+    sortOrder:
+      sortOrder ??
+      (sortBy === "recency" || sortBy === "popularity" ? "desc" : undefined),
+  });
+}
+
+export function getMarketplaceCategoryHref(
+  category: Category,
+  params?: Record<string, string | undefined>,
+) {
+  return buildMarketplaceHref(
+    `${MARKETPLACE_BASE}/c/${categoryToSlug(category)}`,
+    params,
+  );
+}
+
+export function getMarketplaceProgramHref(programSlug: string) {
+  return `${MARKETPLACE_BASE}/${programSlug}`;
+}
+
+export function getMarketplacePathFromSlug(slug?: string[]) {
+  const segments = slug ?? [];
+
+  if (segments.length === 0) {
+    return MARKETPLACE_BASE;
+  }
+
+  return `${MARKETPLACE_BASE}/${segments.join("/")}`;
+}
+
+export function getMarketplaceCanonicalUrl(pathname: string) {
+  return `https://dub.co${pathname.startsWith("/") ? pathname : `/${pathname}`}`;
+}
+
+function getMarketplacePartnersProgramUrl(programSlug: string) {
+  return `https://partners.dub.co${getMarketplaceProgramHref(programSlug)}`;
+}
+
+export function getMarketplacePublicApplyHref(programSlug: string) {
+  return getMarketplacePartnersProgramUrl(programSlug);
+}
+
+export function getMarketplaceCategoryFromPathname(
+  pathname: string,
+): Category | null {
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (
+    segments[0] === "marketplace" &&
+    segments.length === 3 &&
+    segments[1] === "c"
+  ) {
+    return slugToCategory(segments[2]);
+  }
+
+  return null;
+}
+
+export function isMarketplaceFilterSidebarPath(pathname: string): boolean {
+  const segments = pathname.split("/").filter(Boolean);
+
+  if (segments[0] !== "marketplace") {
+    return false;
+  }
+
+  if (segments.length === 1) {
+    return false;
+  }
+
+  if (segments[1] === "all") {
+    return true;
+  }
+
+  if (
+    segments.length === 3 &&
+    segments[1] === "c" &&
+    slugToCategory(segments[2])
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+export function buildExternalMarketplaceFilterHref({
+  basePath,
+  activeRewardType,
+  search,
+  sortBy,
+  sortOrder,
+  category,
+  rewardType,
+}: {
+  basePath: string;
+  activeRewardType?: MarketplaceRewardType;
+  search?: string;
+  sortBy?: string;
+  sortOrder?: string;
+  category?: Category | null;
+  rewardType?: MarketplaceRewardType | null;
+}) {
+  const resolvedRewardType =
+    rewardType === undefined ? activeRewardType : rewardType || undefined;
+
+  const queryParams = {
+    rewardType: resolvedRewardType,
+    search,
+    sortBy,
+    sortOrder,
+  };
+
+  if (category === null) {
+    return getMarketplaceAllHref(queryParams);
+  }
+
+  if (category) {
+    return getMarketplaceCategoryHref(category, queryParams);
+  }
+
+  const query = new URLSearchParams();
+  if (resolvedRewardType) query.set("rewardType", resolvedRewardType);
+  if (search) query.set("search", search);
+  if (sortBy && sortBy !== "popularity") query.set("sortBy", sortBy);
+  if (sortOrder && sortOrder !== "desc") query.set("sortOrder", sortOrder);
+  const queryString = query.toString();
+
+  return `${basePath}${queryString ? `?${queryString}` : ""}`;
+}
diff --git a/packages/email/src/templates/network-partner-application-approved.tsx b/packages/email/src/templates/network-partner-application-approved.tsx
index f38b72fdcd3..729e0c073ea 100644
--- a/packages/email/src/templates/network-partner-application-approved.tsx
+++ b/packages/email/src/templates/network-partner-application-approved.tsx
@@ -70,7 +70,7 @@ export default function NetworkPartnerApplicationApproved({
 
             <Section className="mb-8 text-center">
               <Link
-                href="https://partners.dub.co/programs/marketplace"
+                href="https://partners.dub.co/marketplace"
                 className="box-border inline-block rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-medium text-white no-underline"
               >
                 View the marketplace
diff --git a/packages/email/src/templates/notify-partner-reapply.tsx b/packages/email/src/templates/notify-partner-reapply.tsx
index 838ec383819..25067c07dd9 100644
--- a/packages/email/src/templates/notify-partner-reapply.tsx
+++ b/packages/email/src/templates/notify-partner-reapply.tsx
@@ -91,7 +91,7 @@ export default function NotifyPartnerReapply({
                   </Column>
                   <Column className="text-right text-sm">
                     <Link
-                      href={`https://partners.dub.co/programs/marketplace/${program.slug}`}
+                      href={`https://partners.dub.co/marketplace/${program.slug}`}
                       className="rounded-lg border border-neutral-200 px-2 py-1 text-sm font-medium text-neutral-600 no-underline"
                     >
                       Reapply
diff --git a/packages/ui/src/filter/filter-option-row.tsx b/packages/ui/src/filter/filter-option-row.tsx
new file mode 100644
index 00000000000..e4196cff1fb
--- /dev/null
+++ b/packages/ui/src/filter/filter-option-row.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { cn, truncate } from "@dub/utils";
+import { ComponentType, isValidElement, SVGProps } from "react";
+import { Check } from "../icons";
+import { Filter, FilterOption } from "./types";
+
+type FilterOptionRowProps = {
+  filter: Filter;
+  option: FilterOption;
+  checked: boolean;
+  onToggle: () => void;
+};
+
+export function FilterOptionRow({
+  filter,
+  option,
+  checked,
+  onToggle,
+}: FilterOptionRowProps) {
+  const Icon =
+    option.icon ??
+    filter.getOptionIcon?.(option.value, { key: filter.key, option });
+
+  const label =
+    option.label ??
+    filter.getOptionLabel?.(option.value, { key: filter.key, option }) ??
+    String(option.value);
+
+  return (
+    <button
+      type="button"
+      onClick={onToggle}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-3 whitespace-nowrap rounded-md px-2 py-2 text-left text-xs font-medium text-neutral-600",
+        "transition-colors duration-100 ease-out motion-reduce:transition-none",
+        "hover:bg-neutral-100",
+      )}
+    >
+      <div
+        className={cn(
+          "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
+          checked ? "border-neutral-900 bg-neutral-900" : "border-neutral-300",
+        )}
+      >
+        {checked && <Check className="h-3 w-3 text-white" />}
+      </div>
+      {Icon && (
+        <span className="shrink-0 text-neutral-500 [&_svg]:size-4">
+          {renderFilterIcon(Icon)}
+        </span>
+      )}
+      <span className="min-w-0 flex-1">{truncate(label, 48)}</span>
+      {option.right != null && (
+        <span className="shrink-0 text-xs font-medium tabular-nums text-neutral-400">
+          {option.right}
+        </span>
+      )}
+    </button>
+  );
+}
+
+function renderFilterIcon(
+  icon: NonNullable<
+    FilterOption["icon"] | ReturnType<NonNullable<Filter["getOptionIcon"]>>
+  >,
+) {
+  if (isValidElement(icon)) {
+    return icon;
+  }
+
+  const IconComponent = icon as ComponentType<SVGProps<SVGSVGElement>>;
+  return <IconComponent className="size-4" />;
+}
diff --git a/packages/ui/src/filter/filter-sidebar.tsx b/packages/ui/src/filter/filter-sidebar.tsx
new file mode 100644
index 00000000000..ecbe1e7c5ae
--- /dev/null
+++ b/packages/ui/src/filter/filter-sidebar.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { cn } from "@dub/utils";
+import { useCallback, useMemo } from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../accordion";
+import { LoadingSpinner } from "../icons";
+import { FilterOptionRow } from "./filter-option-row";
+import {
+  ActiveFilterInput,
+  Filter,
+  FilterOption,
+  normalizeActiveFilter,
+} from "./types";
+
+type FilterSidebarProps = {
+  filters: Filter[];
+  activeFilters?: ActiveFilterInput[];
+  onSelect: (key: string, value: FilterOption["value"]) => void;
+  onRemove: (key: string, value: FilterOption["value"]) => void;
+  className?: string;
+  defaultOpen?: string[];
+};
+
+export function FilterSidebar({
+  filters,
+  activeFilters,
+  onSelect,
+  onRemove,
+  className,
+  defaultOpen,
+}: FilterSidebarProps) {
+  const visibleFilters = useMemo(
+    () =>
+      filters.filter(
+        (filter) => !filter.hideInFilterDropdown && filter.type !== "range",
+      ),
+    [filters],
+  );
+
+  const defaultOpenSections = useMemo(
+    () => defaultOpen ?? visibleFilters.map(({ key }) => key),
+    [defaultOpen, visibleFilters],
+  );
+
+  const isOptionSelected = useCallback(
+    (filterKey: string, value: FilterOption["value"]) => {
+      const rawActiveFilter = activeFilters?.find(
+        (filter) => filter.key === filterKey,
+      );
+      if (!rawActiveFilter) return false;
+
+      return normalizeActiveFilter(rawActiveFilter).values.some((v) =>
+        valuesMatch(v, value),
+      );
+    },
+    [activeFilters],
+  );
+
+  const toggleOption = useCallback(
+    (filter: Filter, value: FilterOption["value"]) => {
+      const filterKey = filter.key;
+
+      if (isOptionSelected(filterKey, value)) {
+        onRemove(filterKey, value);
+        return;
+      }
+
+      if (filter.singleSelect) {
+        onSelect(filterKey, value);
+        return;
+      }
+
+      onSelect(filterKey, value);
+    },
+    [isOptionSelected, onRemove, onSelect],
+  );
+
+  return (
+    <Accordion
+      type="multiple"
+      defaultValue={defaultOpenSections}
+      className={cn("flex flex-col gap-1", className)}
+    >
+      {visibleFilters.map((filter) => (
+        <AccordionItem
+          key={filter.key}
+          value={filter.key}
+          className="border-none py-0"
+        >
+          <AccordionTrigger
+            className={cn(
+              "rounded-md px-2 py-2 text-sm font-semibold text-neutral-600 sm:text-sm",
+              "hover:bg-bg-subtle hover:no-underline",
+              "[&>svg]:size-4 [&>svg]:text-neutral-400",
+            )}
+          >
+            {filter.label}
+          </AccordionTrigger>
+          <AccordionContent className="pb-2 pt-0">
+            {filter.options === null ? (
+              <div className="flex items-center justify-center py-4">
+                <LoadingSpinner />
+              </div>
+            ) : filter.options.length === 0 ? (
+              <p className="px-2 py-2 text-sm text-neutral-400">No options</p>
+            ) : (
+              <div className="flex flex-col gap-1">
+                {filter.options.map((option) => (
+                  <FilterOptionRow
+                    key={String(option.value)}
+                    filter={filter}
+                    option={option}
+                    checked={isOptionSelected(filter.key, option.value)}
+                    onToggle={() => toggleOption(filter, option.value)}
+                  />
+                ))}
+              </div>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}
+
+function valuesMatch(a: FilterOption["value"], b: FilterOption["value"]) {
+  if (typeof a === "string" && typeof b === "string") {
+    return a.toLowerCase() === b.toLowerCase();
+  }
+
+  return a === b;
+}
diff --git a/packages/ui/src/filter/index.ts b/packages/ui/src/filter/index.ts
index 968e8202744..41f06ac4349 100644
--- a/packages/ui/src/filter/index.ts
+++ b/packages/ui/src/filter/index.ts
@@ -1,7 +1,22 @@
 import { FilterList } from "./filter-list";
 import { FilterSelect } from "./filter-select";
+import { FilterSidebar } from "./filter-sidebar";
 
-const Filter = { Select: FilterSelect, List: FilterList };
+const Filter = {
+  Select: FilterSelect,
+  List: FilterList,
+  Sidebar: FilterSidebar,
+};
 
-export { encodeRangeToken, parseRangeToken } from "./types";
+export { FilterOptionRow } from "./filter-option-row";
+export {
+  encodeRangeToken,
+  normalizeActiveFilter,
+  parseRangeToken,
+} from "./types";
+export type {
+  ActiveFilterInput,
+  Filter as FilterConfig,
+  FilterOption,
+} from "./types";
 export { Filter };
diff --git a/packages/ui/src/nav/nav-mobile.tsx b/packages/ui/src/nav/nav-mobile.tsx
index d9a40ed7afc..7eee44ae4f6 100644
--- a/packages/ui/src/nav/nav-mobile.tsx
+++ b/packages/ui/src/nav/nav-mobile.tsx
@@ -15,7 +15,7 @@ import {
   DubLinksIcon,
   DubPartnersIcon,
 } from "../icons";
-import { navItems, type NavTheme } from "./nav";
+import { navItems, type NavItem, type NavTheme } from "./nav";
 
 const specialIcons: Record<string, ReactNode> = {
   "Dub Links": (
@@ -43,9 +43,11 @@ const specialIcons: Record<string, ReactNode> = {
 export function NavMobile({
   theme = "light",
   staticDomain,
+  navItems: items = navItems,
 }: {
   theme?: NavTheme;
   staticDomain?: string;
+  navItems?: NavItem[];
 }) {
   let { domain = "dub.co" } = useParams() as { domain: string };
   if (staticDomain) {
@@ -110,7 +112,7 @@ export function NavMobile({
         )}
       >
         <ul className="grid divide-y divide-neutral-200 dark:divide-white/[0.15]">
-          {navItems.map(({ name, href, childItems }, idx) => (
+          {items.map(({ name, href, childItems }, idx) => (
             <MobileNavItem
               key={idx}
               name={name}
diff --git a/packages/ui/src/nav/nav.tsx b/packages/ui/src/nav/nav.tsx
index a35b77ec2bc..17ab9d3fc0a 100644
--- a/packages/ui/src/nav/nav.tsx
+++ b/packages/ui/src/nav/nav.tsx
@@ -5,10 +5,22 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import { LayoutGroup } from "motion/react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { PropsWithChildren, SVGProps, createContext, useId } from "react";
+import {
+  ComponentType,
+  PropsWithChildren,
+  ReactNode,
+  SVGProps,
+  createContext,
+  useId,
+} from "react";
 import useSWR from "swr";
 import { buttonVariants } from "../button";
-import { FEATURES_LIST, RESOURCES, SOLUTIONS } from "../content";
+import {
+  FEATURES_LIST,
+  RESOURCES,
+  SOLUTIONS,
+  type NavItemChildren,
+} from "../content";
 import { useScroll } from "../hooks";
 import { MaxWidthWrapper } from "../max-width-wrapper";
 import { NavWordmark } from "../nav-wordmark";
@@ -22,6 +34,14 @@ export const NavContext = createContext<{ theme: NavTheme }>({
   theme: "light",
 });
 
+export type NavItem = {
+  name: string;
+  href?: string;
+  segments?: string[];
+  content?: ComponentType<{ domain: string }>;
+  childItems?: NavItemChildren;
+};
+
 export const navItems = [
   {
     name: "Product",
@@ -88,10 +108,14 @@ export function Nav({
   theme = "light",
   staticDomain,
   maxWidthWrapperClassName,
+  navItems: items = navItems,
+  logo,
 }: {
   theme?: NavTheme;
   staticDomain?: string;
   maxWidthWrapperClassName?: string;
+  navItems?: NavItem[];
+  logo?: ReactNode;
 }) {
   let { domain = "dub.co" } = useParams() as { domain: string };
   if (staticDomain) {
@@ -130,65 +154,65 @@ export function Nav({
           <MaxWidthWrapper className={cn("relative", maxWidthWrapperClassName)}>
             <div className="flex h-14 items-center justify-between">
               <div className="grow basis-0">
-                <Link
-                  className="block w-fit py-2 pr-2"
-                  href={createHref("/home", domain, {
-                    utm_source: "Custom Domain",
-                    utm_medium: "Navbar",
-                    utm_campaign: domain,
-                    utm_content: "Logo",
-                  })}
-                >
-                  <NavWordmark />
-                </Link>
+                {logo ?? (
+                  <Link
+                    className="block w-fit py-2 pr-2"
+                    href={createHref("/home", domain, {
+                      utm_source: "Custom Domain",
+                      utm_medium: "Navbar",
+                      utm_campaign: domain,
+                      utm_content: "Logo",
+                    })}
+                  >
+                    <NavWordmark />
+                  </Link>
+                )}
               </div>
               <NavigationMenuPrimitive.Root
                 delayDuration={0}
                 className="relative hidden lg:block"
               >
                 <NavigationMenuPrimitive.List className="group relative z-0 flex">
-                  {navItems.map(
-                    ({ name, href, segments, content: Content }) => {
-                      const isActive = segments.some((segment) =>
-                        pathname?.startsWith(segment),
-                      );
-                      return (
-                        <NavigationMenuPrimitive.Item key={name}>
-                          <WithTrigger trigger={!!Content}>
-                            {href !== undefined ? (
-                              <Link
-                                id={`nav-${href}`}
-                                href={createHref(href, domain, {
-                                  utm_source: "Custom Domain",
-                                  utm_medium: "Navbar",
-                                  utm_campaign: domain,
-                                  utm_content: name,
-                                })}
-                                className={navItemClassName}
-                                data-active={isActive}
-                              >
-                                {name}
-                              </Link>
-                            ) : (
-                              <button
-                                className={navItemClassName}
-                                data-active={isActive}
-                              >
-                                {name}
-                                <AnimatedChevron className="ml-1.5 size-2.5 text-neutral-700" />
-                              </button>
-                            )}
-                          </WithTrigger>
-
-                          {Content && (
-                            <NavigationMenuPrimitive.Content className="data-[motion=from-start]:animate-enter-from-left data-[motion=from-end]:animate-enter-from-right data-[motion=to-start]:animate-exit-to-left data-[motion=to-end]:animate-exit-to-right absolute left-0 top-0">
-                              <Content domain={domain} />
-                            </NavigationMenuPrimitive.Content>
+                  {items.map(({ name, href, segments, content: Content }) => {
+                    const isActive = (segments ?? []).some((segment) =>
+                      pathname?.startsWith(segment),
+                    );
+                    return (
+                      <NavigationMenuPrimitive.Item key={name}>
+                        <WithTrigger trigger={!!Content}>
+                          {href !== undefined ? (
+                            <Link
+                              id={`nav-${href}`}
+                              href={createHref(href, domain, {
+                                utm_source: "Custom Domain",
+                                utm_medium: "Navbar",
+                                utm_campaign: domain,
+                                utm_content: name,
+                              })}
+                              className={navItemClassName}
+                              data-active={isActive}
+                            >
+                              {name}
+                            </Link>
+                          ) : (
+                            <button
+                              className={navItemClassName}
+                              data-active={isActive}
+                            >
+                              {name}
+                              <AnimatedChevron className="ml-1.5 size-2.5 text-neutral-700" />
+                            </button>
                           )}
-                        </NavigationMenuPrimitive.Item>
-                      );
-                    },
-                  )}
+                        </WithTrigger>
+
+                        {Content && (
+                          <NavigationMenuPrimitive.Content className="data-[motion=from-start]:animate-enter-from-left data-[motion=from-end]:animate-enter-from-right data-[motion=to-start]:animate-exit-to-left data-[motion=to-end]:animate-exit-to-right absolute left-0 top-0">
+                            <Content domain={domain} />
+                          </NavigationMenuPrimitive.Content>
+                        )}
+                      </NavigationMenuPrimitive.Item>
+                    );
+                  })}
                 </NavigationMenuPrimitive.List>
 
                 <div className="absolute left-1/2 top-full mt-3 -translate-x-1/2">