diff --git a/public/gallery/store.png b/public/gallery/store.png
index 7a594d2..0270e9d 100644
Binary files a/public/gallery/store.png and b/public/gallery/store.png differ
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 99e20f9..57a0690 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -25,14 +25,14 @@ function Header() {
       <section className="mt-16 grid grid-cols-1 lg:grid-cols-2 lg:gap-12">
         <div className="max-w-lg">
           <h2 className="text-2xl font-medium tracking-tight">Our mission</h2>
-          <p className="mt-6 text-sm/6 text-zinc-400">
+          <p className="mt-6 text-sm/6 text-gray-600">
             We aim to build a &quot;Steam-like experience for DRM-free
             games&quot;. One of the major sticking points of DRM games, and why
             platforms like Steam have done so well, is that they provide awesome
             features like worldwide play-together, social features, and useful
             overlays and tools. We aim to replicate this for <i>any</i> game.
           </p>
-          <p className="mt-8 text-sm/6 text-zinc-400">
+          <p className="mt-8 text-sm/6 text-gray-600">
             Don&apos;t get us wrong, we don&apos;t think Steam or Valve is bad.
             They are unusually consumer-friendly, and provide a great service.
             They will always have a place, providing a marketplace for DRM
@@ -41,16 +41,16 @@ function Header() {
         </div>
         <div className="max-lg:mt-16 lg:col-span-1">
           <Subheading>The Numbers</Subheading>
-          <hr className="mt-6 border-t border-zinc-800" />
+          <hr className="mt-6 border-t border-gray-200" />
           <dl className="mt-6 grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
-            <div className="flex flex-col gap-y-2 border-b border-dotted border-zinc-800 pb-4">
-              <dt className="text-sm/6 text-zinc-400">Lines of code</dt>
+            <div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
+              <dt className="text-sm/6 text-gray-600">Lines of code</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
                 <AnimatedNumber start={10} end={40} />k
               </dd>
             </div>
-            <div className="flex flex-col gap-y-2 border-b border-dotted border-zinc-800 pb-4">
-              <dt className="text-sm/6 text-zinc-400">
+            <div className="flex flex-col gap-y-2 border-b border-dotted border-gray-200 pb-4">
+              <dt className="text-sm/6 text-gray-600">
                 Individual open-source projects
               </dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
@@ -59,13 +59,13 @@ function Header() {
               </dd>
             </div>
             <div className="flex flex-col gap-y-2 max-sm:border-b max-sm:border-dotted max-sm:border-gray-200 max-sm:pb-4">
-              <dt className="text-sm/6 text-zinc-400">Docker pulls</dt>
+              <dt className="text-sm/6 text-gray-600">Docker pulls</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
                 <AnimatedNumber start={0} end={48.8} decimals={1} />k
               </dd>
             </div>
             <div className="flex flex-col gap-y-2">
-              <dt className="text-sm/6 text-zinc-400">Contributors</dt>
+              <dt className="text-sm/6 text-gray-600">Contributors</dt>
               <dd className="order-first text-6xl font-medium tracking-tight">
                 &gt;
                 <AnimatedNumber start={0} end={15} />
@@ -91,7 +91,7 @@ function FrequentlyAskedQuestions() {
             <dt className="text-sm font-semibold">
               Do you intend to replace Steam?
             </dt>
-            <dd className="mt-4 text-sm/6 text-zinc-400">
+            <dd className="mt-4 text-sm/6 text-gray-600">
               No. Drop is not a replacement for Steam, in the sense that we will
               ever offer a marketplace for developers to sell games. Drop can
               replace Steam <i>for an individual</i>, if they only played
@@ -102,7 +102,7 @@ function FrequentlyAskedQuestions() {
             <dt className="text-sm font-semibold">
               Will Drop ever cost money or require a subscription?
             </dt>
-            <dd className="mt-4 text-sm/6 text-zinc-400">
+            <dd className="mt-4 text-sm/6 text-gray-600">
               We believe in <strong>paying for services, not code</strong>. All
               our projects are and always will be open source (AGPLv3), and we
               endeavour to allow users to self-host as much of it as possible.
@@ -114,7 +114,7 @@ function FrequentlyAskedQuestions() {
           </dl>
           <dl>
             <dt className="text-sm font-semibold">Is Drop legal?</dt>
-            <dd className="mt-4 text-sm/6 text-zinc-400">
+            <dd className="mt-4 text-sm/6 text-gray-600">
               Yes. Officially, Drop is <strong>only</strong> for DRM-free games,
               like the ones you purchase from GOG or download from itch.io,{' '}
               <strong>and</strong> that you have a license to redistribute. We
@@ -126,7 +126,7 @@ function FrequentlyAskedQuestions() {
           </dl>
           <dl>
             <dt className="text-sm font-semibold">How can I support Drop or get involved?</dt>
-            <dd className="mt-4 text-sm/6 text-zinc-400">
+            <dd className="mt-4 text-sm/6 text-gray-600">
               Thank you for helping us out! If you&apos;re looking to contribute
               code, check out our{' '}
               <Link
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index d79d4cf..fe48e33 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,7 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="text-zinc-100 bg-zinc-950 antialiased">
+      <body className="text-gray-950 antialiased">
         {children}
       </body>
     </html>
diff --git a/src/app/news/[slug]/page.tsx b/src/app/news/[slug]/page.tsx
index 42380e6..873431a 100644
--- a/src/app/news/[slug]/page.tsx
+++ b/src/app/news/[slug]/page.tsx
@@ -61,7 +61,7 @@ export default async function BlogPost({
                     className="aspect-square size-6 rounded-full object-cover"
                   />
                 )}
-                <div className="text-sm/5 text-zinc-300">{author.name}</div>
+                <div className="text-sm/5 text-gray-700">{author.name}</div>
               </div>
             )}
             {
@@ -69,7 +69,7 @@ export default async function BlogPost({
                 {tags.map((tag) => (
                   <div
                     key={tag}
-                    className="rounded-full border border-dotted border-zinc-800 bg-zinc-900 px-2 text-sm/6 font-medium text-zinc-400"
+                    className="rounded-full border border-dotted border-gray-300 bg-gray-50 px-2 text-sm/6 font-medium text-gray-500"
                   >
                     {tag}
                   </div>
@@ -77,7 +77,7 @@ export default async function BlogPost({
               </div>
             }
           </div>
-          <div className="text-zinc-400">
+          <div className="text-gray-700">
             <div className="max-w-2xl xl:mx-auto">
               {post.image && (
                 <img
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6c5bb4f..8b12c69 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -17,7 +17,7 @@ export default function About() {
       <Container>
         <Navbar />
       </Container>
-      <main className="grid min-h-full place-items-center px-6 py-24 sm:py-32 lg:px-8">
+      <main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
         <div className="text-center">
           <Subheading>404</Subheading>
           <Heading>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b9bf0c0..d07260e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,8 +5,8 @@ import { Footer } from '@/components/footer'
 import { Gradient } from '@/components/gradient'
 import { LogoCluster } from '@/components/logo-cluster'
 import { Navbar } from '@/components/navbar'
+import { Screenshot } from '@/components/screenshot'
 import { Heading, Subheading } from '@/components/text'
-import { ArrowDownCircleIcon } from '@heroicons/react/24/solid'
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
@@ -21,18 +21,16 @@ function Hero() {
       <Container className="relative">
         <Navbar />
         <div className="pt-16 pb-24 sm:pt-24 sm:pb-32 md:pt-32 md:pb-48">
-          <h1 className="font-display text-6xl/[0.9] font-medium tracking-tight text-balance text-zinc-100 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
+          <h1 className="font-display text-6xl/[0.9] font-medium tracking-tight text-balance text-gray-950 sm:text-8xl/[0.8] md:text-9xl/[0.8]">
             An open Steam.
           </h1>
-          <p className="mt-8 max-w-lg text-xl/7 font-medium text-zinc-100/75 sm:text-2xl/8">
+          <p className="mt-8 max-w-lg text-xl/7 font-medium text-gray-950/75 sm:text-2xl/8">
             Drop is an open-source, self-hosted alternative to platforms like
             Steam and Epic.
           </p>
           <div className="mt-12 flex flex-col gap-x-6 gap-y-4 sm:flex-row">
-            <Button href="https://docs.droposs.org/docs/guides/quickstart">
-              Get started
-            </Button>
-            <Button variant="outline" href="/about">
+            <Button href="https://docs.droposs.org/docs/guides/quickstart">Get started</Button>
+            <Button variant="secondary" href="/about">
               About
             </Button>
           </div>
@@ -44,49 +42,18 @@ function Hero() {
 
 function FeatureSection() {
   return (
-    <div className="py-24 sm:py-32">
-      <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto max-w-2xl sm:text-center">
-          <Subheading>Drop OSS</Subheading>
-          <Heading as="h3" className="mt-2 max-w-4xl">
-            The ultimate self-hosted game manager.
-          </Heading>
-
-          <p className="mt-6 text-lg/8 text-zinc-400">
-            Drop is built from the ground up to be flexible, fast, and
-            beautiful. It's designed to scale with your library, and handle
-            thousands of games.
-          </p>
-        </div>
-      </div>
-      <div className="relative overflow-hidden pt-16">
-        <div className="mx-auto max-w-7xl px-6 lg:px-8">
-          <img
-            alt="App screenshot"
-            src="/gallery/store.png"
-            width={1920}
-            height={1071}
-            className="mb-[-5%] rounded-xl shadow-2xl ring-1 ring-gray-900/10"
-          />
-          <div aria-hidden="true" className="relative">
-            <div className="absolute -inset-x-20 bottom-0 bg-linear-to-t from-zinc-950 pt-[7%]" />
-          </div>
-        </div>
-      </div>
-      <div className="mx-auto mt-16 max-w-7xl px-6 sm:mt-20 md:mt-24 lg:px-8">
-        <dl className="mx-auto grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 text-base/7 text-zinc-400 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3 lg:gap-x-8 lg:gap-y-16">
-          <div className="relative pl-9">
-            <dt className="inline font-semibold text-zinc-100">
-              <ArrowDownCircleIcon
-                aria-hidden="true"
-                className="absolute top-1 left-1 size-5 text-blue-600"
-              />
-              ADASDASD
-            </dt>{' '}
-            <dd className="inline">ASDASDASDAS</dd>
-          </div>
-        </dl>
-      </div>
+    <div className="overflow-hidden">
+      <Container className="pb-24">
+        <Heading as="h2" className="max-w-3xl">
+          A better experience for DRM&#8209;free games.
+        </Heading>
+        <Screenshot
+          width={3408}
+          height={1846}
+          src="/screenshots/app.webp"
+          className="mt-16 h-144 sm:h-auto sm:w-304"
+        />
+      </Container>
     </div>
   )
 }
@@ -165,7 +132,7 @@ export default function Home() {
     <div className="overflow-hidden">
       <Hero />
       <main>
-        <div className="bg-linear-to-b pb-16">
+        <div className="bg-linear-to-b from-white from-50% to-gray-100 py-32">
           <FeatureSection />
           <BentoSection />
         </div>
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
index 5e1444f..5b7435a 100644
--- a/src/app/sponsors/page.tsx
+++ b/src/app/sponsors/page.tsx
@@ -26,7 +26,7 @@ function CTA() {
 
       <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
         <div className="max-w-lg">
-          <p className="text-sm/6 text-zinc-400">
+          <p className="text-sm/6 text-gray-600">
             If you&apos;re looking to give back to the project financially -
             first off, thank you. It really does help a lot. There are two
             options for contributing: our OpenCollective, which funds
@@ -45,6 +45,7 @@ function CTA() {
             <Button
               className="w-full sm:w-auto"
               href="/about#team"
+              variant="secondary"
             >
               Team &rarr;
             </Button>
diff --git a/src/components/bento-card.tsx b/src/components/bento-card.tsx
index 1fe8263..0d1262d 100644
--- a/src/components/bento-card.tsx
+++ b/src/components/bento-card.tsx
@@ -29,21 +29,28 @@ export function BentoCard({
       data-dark={dark ? 'true' : undefined}
       className={clsx(
         className,
-        'group relative flex flex-col overflow-hidden rounded-lg ring-1',
-        'bg-zinc-900 ring-white/15',
+        'group relative flex flex-col overflow-hidden rounded-lg',
+        'bg-white shadow-xs ring-1 ring-black/5',
+        'data-dark:bg-gray-800 data-dark:ring-white/15',
       )}
     >
       <div className="relative h-80 shrink-0">
         {graphic}
+        {fade.includes('top') && (
+          <div className="absolute inset-0 bg-linear-to-b from-white to-50% group-data-dark:from-gray-800 group-data-dark:from-[-25%]" />
+        )}
+        {fade.includes('bottom') && (
+          <div className="absolute inset-0 bg-linear-to-t from-white to-20% group-data-dark:from-gray-800 group-data-dark:from-[-25%]" />
+        )}
       </div>
       <div className="relative p-10">
         <Subheading as="h3" dark={dark}>
           {eyebrow}
         </Subheading>
-        <p className="mt-1 text-2xl/8 font-medium tracking-tight text-white">
+        <p className="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950 group-data-dark:text-white">
           {title}
         </p>
-        <p className="mt-2 max-w-[600px] text-sm/6 text-gray-400">
+        <p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-dark:text-gray-400">
           {description}
         </p>
       </div>
diff --git a/src/components/button.tsx b/src/components/button.tsx
index 05d72c3..d4240c8 100644
--- a/src/components/button.tsx
+++ b/src/components/button.tsx
@@ -5,22 +5,22 @@ import { Link } from './link'
 const variants = {
   primary: clsx(
     'inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
-    'rounded-lg border border-transparent bg-gray-950 shadow-md',
+    'rounded-full border border-transparent bg-gray-950 shadow-md',
     'text-base font-medium whitespace-nowrap text-white',
     'data-disabled:bg-gray-950 data-disabled:opacity-40 data-hover:bg-gray-800',
   ),
   secondary: clsx(
     'relative inline-flex items-center justify-center px-4 py-[calc(--spacing(2)-1px)]',
-    'rounded-lg border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
+    'rounded-full border border-transparent bg-white/15 shadow-md ring-1 ring-[#D15052]/15',
     'after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_0_2px_1px_#ffffff4d]',
-    'text-base font-medium whitespace-nowrap text-zinc-100',
+    'text-base font-medium whitespace-nowrap text-gray-950',
     'data-disabled:bg-white/15 data-disabled:opacity-40 data-hover:bg-white/20',
   ),
   outline: clsx(
-    'inline-flex items-center justify-center px-4 py-[calc(--spacing(1.5)-1px)]',
-    'rounded-lg border border-transparent shadow-sm ring-1 ring-white/5',
-    'text-sm font-medium whitespace-nowrap text-zinc-100',
-    'data-disabled:bg-transparent data-disabled:opacity-40 data-hover:bg-zinc-900',
+    'inline-flex items-center justify-center px-2 py-[calc(--spacing(1.5)-1px)]',
+    'rounded-lg border border-transparent shadow-sm ring-1 ring-black/10',
+    'text-sm font-medium whitespace-nowrap text-gray-950',
+    'data-disabled:bg-transparent data-disabled:opacity-40 data-hover:bg-gray-50',
   ),
 }
 
diff --git a/src/components/comparison.tsx b/src/components/comparison.tsx
index 38b6ad4..fec9e2d 100644
--- a/src/components/comparison.tsx
+++ b/src/components/comparison.tsx
@@ -39,7 +39,7 @@ function GameVaultLogo() {
   return (
     <div className="inline-flex items-center gap-x-2 text-xl font-bold">
       <img src="/icons/gamevault.png" alt="GameVault Logo" className="size-8" />
-      <span className="relative whitespace-nowrap text-zinc-100">
+      <span className="relative whitespace-nowrap text-purple-900">
         <svg
           aria-hidden="true"
           viewBox="0 0 418 42"
@@ -56,7 +56,7 @@ function GameVaultLogo() {
 
 function GameVaultPlus() {
   return (
-    <div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-800 px-2 py-1 text-xs">
+    <div className="inline-flex items-center gap-x-1 rounded-full bg-gray-100 px-2 py-1 text-xs">
       <img
         src="/icons/gamevault-plus.png"
         alt="GameVault+ icon"
@@ -69,7 +69,7 @@ function GameVaultPlus() {
 
 function ComingSoon() {
   return (
-    <div className="inline-flex items-center gap-x-1 rounded-full bg-zinc-900 px-2 py-1 text-xs">
+    <div className="inline-flex items-center gap-x-1 rounded-full bg-gray-100 px-2 py-1 text-xs">
       coming soon&trade;
     </div>
   )
@@ -121,7 +121,6 @@ const projects: Array<{
         'Installer/setup games': true,
         'Portable games': true,
         'Archives support': 'All 7-zip formats',
-        'Automatic import': 'Bulk-import tool',
       },
       Metadata: {
         'Additional with plugins': false,
@@ -231,7 +230,7 @@ const projects: Array<{
         'Non-versioned layout': true,
         'Automatic import': true,
         'Archives support': 'All 7-zip formats',
-        'Portable games': true,
+        'Portable games': true
       },
       Metadata: {
         IGDB: true,
@@ -280,14 +279,14 @@ function Header() {
   )
 }
 
-function ProjectCards() {
+function PricingCards() {
   return (
     <div className="relative py-24">
       <Gradient className="absolute inset-x-2 top-48 bottom-0 rounded-4xl ring-1 ring-black/5 ring-inset" />
       <Container className="relative">
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {projects.map((tier, tierIndex) => (
-            <ProjectCard key={tierIndex} tier={tier} />
+            <PricingCard key={tierIndex} tier={tier} />
           ))}
         </div>
       </Container>
@@ -295,22 +294,22 @@ function ProjectCards() {
   )
 }
 
-function ProjectCard({ tier }: { tier: (typeof projects)[number] }) {
+function PricingCard({ tier }: { tier: (typeof projects)[number] }) {
   return (
-    <div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-white/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
+    <div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
       <div className="grid grid-cols-1 rounded-4xl p-2 shadow-md shadow-black/5">
-        <div className="rounded-3xl bg-zinc-900 p-10 pb-9 shadow-2xl ring-1 ring-black/5">
+        <div className="rounded-3xl bg-white p-10 pb-9 shadow-2xl ring-1 ring-black/5">
           <div className="flex w-full items-center justify-center pb-8">
             {tier.logo()}
           </div>
 
           <Subheading>{tier.name}</Subheading>
-          <p className="mt-2 text-sm/6 text-zinc-100/75">{tier.description}</p>
+          <p className="mt-2 text-sm/6 text-gray-950/75">{tier.description}</p>
           <div className="mt-8">
             <Button href={tier.href}>Learn more &rarr;</Button>
           </div>
           <div className="mt-8">
-            <h3 className="text-sm/6 font-medium text-zinc-100">
+            <h3 className="text-sm/6 font-medium text-gray-950">
               Key features:
             </h3>
             <ul className="mt-3 space-y-3">
@@ -325,10 +324,10 @@ function ProjectCard({ tier }: { tier: (typeof projects)[number] }) {
   )
 }
 
-function ProjectTable({
-  selectedProject,
+function PricingTable({
+  selectedTier: selectedProject,
 }: {
-  selectedProject: (typeof projects)[number]
+  selectedTier: (typeof projects)[number]
 }) {
   function onlyUnique<T>(value: T, index: number, array: Array<T>) {
     return array.indexOf(value) === index
@@ -386,7 +385,7 @@ function ProjectTable({
                 <Menu>
                   <MenuButton className="flex items-center justify-between gap-2 font-medium">
                     {selectedProject.name}
-                    <ChevronUpDownIcon className="size-4 fill-zinc-100" />
+                    <ChevronUpDownIcon className="size-4 fill-gray-900" />
                   </MenuButton>
                   <MenuItems
                     anchor="bottom start"
@@ -445,7 +444,7 @@ function ProjectTable({
                 colSpan={4}
                 className="px-0 pt-10 pb-0 group-first-of-type:pt-5"
               >
-                <div className="-mx-4 rounded-lg bg-zinc-900 px-4 py-3 text-sm/6 font-semibold">
+                <div className="-mx-4 rounded-lg bg-gray-50 px-4 py-3 text-sm/6 font-semibold">
                   {section}
                 </div>
               </th>
@@ -453,11 +452,11 @@ function ProjectTable({
             {features[section].map((name) => (
               <tr
                 key={name}
-                className="border-b border-zinc-800 last:border-none"
+                className="border-b border-gray-100 last:border-none"
               >
                 <th
                   scope="row"
-                  className="px-0 py-4 text-sm/6 font-normal text-zinc-200"
+                  className="px-0 py-4 text-sm/6 font-normal text-gray-600"
                 >
                   {name}
                 </th>
@@ -489,7 +488,7 @@ function ProjectTable({
                           </span>
                         </>
                       ) : (
-                        <div className="text-xs text-zinc-400">{value}</div>
+                        <div className="text-xs">{value}</div>
                       )}
                     </td>
                   )
@@ -515,10 +514,10 @@ function FeatureItem({
   return (
     <li
       data-disabled={disabled ? true : undefined}
-      className="flex items-center gap-4 text-sm/6 text-zinc-100/75 data-disabled:text-zinc-100/40"
+      className="flex items-center gap-4 text-sm/6 text-gray-950/75 data-disabled:text-gray-950/25"
     >
       <span className="inline-flex h-6 items-center self-start">
-        <PlusIcon className="size-3.75 shrink-0 fill-zinc-100/25" />
+        <PlusIcon className="size-3.75 shrink-0 fill-gray-950/25" />
       </span>
       {disabled && <span className="sr-only">Coming soon:</span>}
       {description}
@@ -554,8 +553,8 @@ export default function Pricing() {
         <Navbar />
       </Container>
       <Header />
-      <ProjectCards />
-      <ProjectTable selectedProject={tier} />
+      <PricingCards />
+      <PricingTable selectedTier={tier} />
       <Footer />
     </main>
   )
diff --git a/src/components/downloads.tsx b/src/components/downloads.tsx
index fdd0a48..88b38e9 100644
--- a/src/components/downloads.tsx
+++ b/src/components/downloads.tsx
@@ -226,14 +226,14 @@ function DownloadCard({
   return (
     <div className="-m-2 grid grid-cols-1 rounded-4xl shadow-[inset_0_0_2px_1px_#ffffff4d] ring-1 ring-black/5 max-lg:mx-auto max-lg:w-full max-lg:max-w-md">
       <div className="grid grid-cols-1 rounded-4xl p-2 shadow-md shadow-black/5">
-        <div className="flex h-full flex-col justify-between rounded-3xl bg-zinc-900/50 p-10 pb-9 shadow-2xl ring-1 ring-white/5">
+        <div className="flex h-full flex-col justify-between rounded-3xl bg-white p-10 pb-9 shadow-2xl ring-1 ring-black/5">
           <div>
             <div className="flex w-full items-center justify-center gap-x-4">
               {data.icon()}
               <Heading>{data.name}</Heading>
             </div>
 
-            <p className="mt-3 text-sm/6 text-zinc-100/75">
+            <p className="mt-3 text-sm/6 text-gray-950/75">
               {data.description}
             </p>
           </div>
@@ -266,11 +266,11 @@ export default function DownloadCards() {
       <Container>
         <div className="flex flex-col items-center">
           <Listbox value={currentVersion} onChange={setCurrentVersion}>
-            <Label className="block text-sm/6 font-medium text-zinc-100">
+            <Label className="block text-sm/6 font-medium text-gray-900">
               Version
             </Label>
             <div className="relative mt-2">
-              <ListboxButton className="grid w-full min-w-[10rem] cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-100 outline-1 -outline-offset-1 outline-zinc-800 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 sm:text-sm/6">
+              <ListboxButton className="grid w-full min-w-[10rem] cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-600 sm:text-sm/6">
                 <span className="col-start-1 row-start-1 truncate pr-6">
                   {currentVersion}
                 </span>
@@ -282,13 +282,13 @@ export default function DownloadCards() {
 
               <ListboxOptions
                 transition
-                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-900 py-1 text-base shadow-lg outline-1 outline-white/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg outline-1 outline-black/5 data-leave:transition data-leave:duration-100 data-leave:ease-in data-closed:data-leave:opacity-0 sm:text-sm"
               >
                 {Object.keys(releasePages).map((version) => (
                   <ListboxOption
                     key={version}
                     value={version}
-                    className="group relative cursor-default py-2 pr-9 pl-3 text-zinc-100 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden"
+                    className="group relative cursor-default py-2 pr-9 pl-3 text-gray-900 select-none data-focus:bg-blue-600 data-focus:text-white data-focus:outline-hidden"
                   >
                     <span className="block truncate font-normal group-data-selected:font-semibold">
                       {version}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index a97cdd5..e65c3f2 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -12,11 +12,11 @@ function CallToAction() {
     <div className="relative pt-20 pb-16 text-center sm:py-24">
       <hgroup>
         <Subheading>Get started</Subheading>
-        <p className="mt-6 text-3xl font-medium tracking-tight text-white sm:text-5xl">
+        <p className="mt-6 text-3xl font-medium tracking-tight text-gray-950 sm:text-5xl">
           Ready to dive in?
         </p>
       </hgroup>
-      <p className="mx-auto mt-6 max-w-xs text-sm/6 text-zinc-400">
+      <p className="mx-auto mt-6 max-w-xs text-sm/6 text-gray-500">
         Get started hosting Drop in 10 minutes or less, and explore all the
         features it has to offer.
       </p>
@@ -33,7 +33,7 @@ function CallToAction() {
 }
 
 function SitemapHeading({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-sm/6 font-medium text-zinc-100/50">{children}</h3>
+  return <h3 className="text-sm/6 font-medium text-gray-950/50">{children}</h3>
 }
 
 function SitemapLinks({ children }: { children: React.ReactNode }) {
@@ -45,7 +45,7 @@ function SitemapLink(props: React.ComponentPropsWithoutRef<typeof Link>) {
     <li>
       <Link
         {...props}
-        className="font-medium text-zinc-100 data-hover:text-zinc-100/75"
+        className="font-medium text-gray-950 data-hover:text-gray-950/75"
       />
     </li>
   )
@@ -164,8 +164,8 @@ function SocialLinks() {
 
 function Copyright() {
   return (
-    <div className="text-xs text-zinc-400">
-      &copy; {new Date().getFullYear()} Drop OSS. Website licensed under AGPLv3 and
+    <div className="text-xs text-gray-500">
+      &copy; {new Date().getFullYear()} Drop OSS. Licensed under AGPLv3 and
       Tailwind UI Plus (where applicable).
     </div>
   )
@@ -173,37 +173,39 @@ function Copyright() {
 
 export function Footer() {
   return (
-    <footer className="relative m-2 overflow-hidden rounded-4xl">
-      <Gradient className="absolute inset-0 rounded-4xl" />
-      <Container>
-        <CallToAction />
-        <PlusGrid className="pb-16">
-          <PlusGridRow>
-            <div className="grid grid-cols-2 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">
-              <div className="col-span-2 flex">
-                <PlusGridItem className="pt-6 lg:pb-6">
-                  <Logo className="h-9" />
+    <footer>
+      <Gradient className="relative">
+        <div className="absolute inset-2 rounded-4xl bg-white/80" />
+        <Container>
+          <CallToAction />
+          <PlusGrid className="pb-16">
+            <PlusGridRow>
+              <div className="grid grid-cols-2 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">
+                <div className="col-span-2 flex">
+                  <PlusGridItem className="pt-6 lg:pb-6">
+                    <Logo className="h-9" />
+                  </PlusGridItem>
+                </div>
+                <div className="col-span-2 grid grid-cols-2 gap-x-8 gap-y-12 lg:col-span-4 lg:grid-cols-subgrid lg:pt-6">
+                  <Sitemap />
+                </div>
+              </div>
+            </PlusGridRow>
+            <PlusGridRow className="flex justify-between">
+              <div>
+                <PlusGridItem className="py-3">
+                  <Copyright />
                 </PlusGridItem>
               </div>
-              <div className="col-span-2 grid grid-cols-2 gap-x-8 gap-y-12 lg:col-span-4 lg:grid-cols-subgrid lg:pt-6">
-                <Sitemap />
+              <div className="flex">
+                <PlusGridItem className="flex items-center gap-8 py-3">
+                  <SocialLinks />
+                </PlusGridItem>
               </div>
-            </div>
-          </PlusGridRow>
-          <PlusGridRow className="flex justify-between">
-            <div>
-              <PlusGridItem className="py-3">
-                <Copyright />
-              </PlusGridItem>
-            </div>
-            <div className="flex">
-              <PlusGridItem className="flex items-center gap-8 py-3">
-                <SocialLinks />
-              </PlusGridItem>
-            </div>
-          </PlusGridRow>
-        </PlusGrid>
-      </Container>
+            </PlusGridRow>
+          </PlusGrid>
+        </Container>
+      </Gradient>
     </footer>
   )
 }
diff --git a/src/components/gradient.tsx b/src/components/gradient.tsx
index a05b5eb..d462277 100644
--- a/src/components/gradient.tsx
+++ b/src/components/gradient.tsx
@@ -9,7 +9,7 @@ export function Gradient({
       {...props}
       className={clsx(
         className,
-        'bg-linear-115 from-blue-900 from-28% via-sky-800 via-70% to-cyan-900 sm:bg-linear-145 opacity-30',
+        'bg-linear-115 from-blue-100 from-28% via-sky-200 via-70% to-cyan-100 sm:bg-linear-145',
       )}
     />
   )
@@ -21,7 +21,7 @@ export function GradientBackground() {
       <div
         className={clsx(
           'absolute -top-44 -right-60 h-60 w-xl transform-gpu md:right-0',
-          'bg-linear-115 from-blue-700 from-28% via-sky-800 via-70% to-blue-600',
+          'bg-linear-115 from-blue-200 from-28% via-sky-100 via-70% to-blue-200',
           'rotate-[-10deg] rounded-full blur-3xl',
         )}
       />
diff --git a/src/components/mdx-components.tsx b/src/components/mdx-components.tsx
index 8ad48af..7a3c78e 100644
--- a/src/components/mdx-components.tsx
+++ b/src/components/mdx-components.tsx
@@ -6,22 +6,22 @@ const components: MDXComponents = {
     <p className="my-8 text-base/8 first:mt-0 last:mb-0">{children}</p>
   ),
   h1: ({ children }) => (
-    <h2 className="mt-12 mb-10 text-4xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+    <h2 className="mt-12 mb-10 text-4xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">
       {children}
     </h2>
   ),
   h2: ({ children }) => (
-    <h2 className="mt-12 mb-10 text-2xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+    <h2 className="mt-12 mb-10 text-2xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">
       {children}
     </h2>
   ),
   h3: ({ children }) => (
-    <h3 className="mt-12 mb-10 text-xl/8 font-medium tracking-tight text-zinc-100 first:mt-0 last:mb-0">
+    <h3 className="mt-12 mb-10 text-xl/8 font-medium tracking-tight text-gray-950 first:mt-0 last:mb-0">
       {children}
     </h3>
   ),
   blockquote: ({ children }) => (
-    <blockquote className="my-10 border-l-2 border-l-zinc-700 pl-6 text-base/8 text-zinc-100 first:mt-0 last:mb-0">
+    <blockquote className="my-10 border-l-2 border-l-gray-300 pl-6 text-base/8 text-gray-950 first:mt-0 last:mb-0">
       {children}
     </blockquote>
   ),
@@ -32,9 +32,9 @@ const components: MDXComponents = {
       className="w-full rounded-2xl"
     />
   ),
-  hr: () => <hr className="my-8 border-t border-zinc-800" />,
+  hr: () => <hr className="my-8 border-t border-gray-200" />,
   strong: ({ children }) => (
-    <strong className="font-semibold text-zinc-100">{children}</strong>
+    <strong className="font-semibold text-gray-950">{children}</strong>
   ),
   code: ({ children }) => (
     <>
@@ -60,7 +60,7 @@ const components: MDXComponents = {
     return (
       <Link
         {...props}
-        className="font-medium text-blue-400 underline decoration-blue-400 underline-offset-4 data-hover:decoration-blue-600"
+        className="font-medium text-blue-600 underline decoration-blue-400 underline-offset-4 data-hover:decoration-blue-600"
       >
         {props.children}
       </Link>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 496711c..3696061 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -27,7 +27,7 @@ function DesktopNav() {
         <PlusGridItem key={href} className="relative flex">
           <Link
             href={href}
-            className="flex items-center px-4 py-3 text-base font-medium text-zinc-100 bg-blend-multiply data-hover:bg-white/2.5"
+            className="flex items-center px-4 py-3 text-base font-medium text-gray-950 bg-blend-multiply data-hover:bg-black/2.5"
           >
             {label}
           </Link>
@@ -40,7 +40,7 @@ function DesktopNav() {
 function MobileNavButton() {
   return (
     <DisclosureButton
-      className="flex size-12 items-center justify-center self-center rounded-lg data-hover:bg-white/5 lg:hidden"
+      className="flex size-12 items-center justify-center self-center rounded-lg data-hover:bg-black/5 lg:hidden"
       aria-label="Open main menu"
     >
       <Bars2Icon className="size-6" />
@@ -63,15 +63,15 @@ function MobileNav() {
             }}
             key={href}
           >
-            <Link href={href} className="text-base font-medium text-zinc-100">
+            <Link href={href} className="text-base font-medium text-gray-950">
               {label}
             </Link>
           </motion.div>
         ))}
       </div>
       <div className="absolute left-1/2 w-screen -translate-x-1/2">
-        <div className="absolute inset-x-0 top-0 border-t border-white/5" />
-        <div className="absolute inset-x-0 top-2 border-t border-white/5" />
+        <div className="absolute inset-x-0 top-0 border-t border-black/5" />
+        <div className="absolute inset-x-0 top-2 border-t border-black/5" />
       </div>
     </DisclosurePanel>
   )
diff --git a/src/components/news.tsx b/src/components/news.tsx
index b9acf4a..82543f3 100644
--- a/src/components/news.tsx
+++ b/src/components/news.tsx
@@ -26,14 +26,14 @@ function FeaturedPosts() {
   const postAuthors = fetchPostAuthors()
 
   return (
-    <div className="mt-16 pb-14">
+    <div className="mt-16 bg-linear-to-t from-gray-100 pb-14">
       <Container>
         <h2 className="text-2xl font-medium tracking-tight">Featured</h2>
         <div className="mt-6 grid grid-cols-1 gap-8 lg:grid-cols-3">
           {featuredPosts.map((post) => (
             <div
               key={post._meta.path}
-              className="relative flex flex-col rounded-3xl bg-zinc-900 p-2 shadow-md ring-1 shadow-white/5 ring-white/5"
+              className="relative flex flex-col rounded-3xl bg-white p-2 shadow-md ring-1 shadow-black/5 ring-black/5"
             >
               {post.image && (
                 <img
@@ -43,7 +43,7 @@ function FeaturedPosts() {
                 />
               )}
               <div className="flex flex-1 flex-col p-8">
-                <div className="text-sm/5 text-zinc-400">
+                <div className="text-sm/5 text-gray-700">
                   {dayjs(post.date).format('dddd, MMMM D, YYYY')}
                 </div>
                 <div className="mt-2 text-base/7 font-medium">
@@ -52,7 +52,7 @@ function FeaturedPosts() {
                     {post.title}
                   </Link>
                 </div>
-                <div className="mt-2 flex-1 text-sm/6 text-zinc-400">
+                <div className="mt-2 flex-1 text-sm/6 text-gray-500">
                   {post.excerpt}
                 </div>
                 {postAuthors[post.author ?? ''] && (
@@ -62,7 +62,7 @@ function FeaturedPosts() {
                       src={postAuthors[post.author ?? ''].avatar}
                       className="aspect-square size-6 rounded-full object-cover"
                     />
-                    <div className="text-sm/5 text-zinc-300">
+                    <div className="text-sm/5 text-gray-700">
                       {postAuthors[post.author ?? ''].name}
                     </div>
                   </div>
@@ -94,7 +94,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
       {posts.map((post) => (
         <div
           key={post._meta.path}
-          className="relative grid grid-cols-1 border-b border-b-zinc-900 py-10 first:border-t first:border-t-zinc-900 max-sm:gap-3 sm:grid-cols-3"
+          className="relative grid grid-cols-1 border-b border-b-gray-100 py-10 first:border-t first:border-t-gray-200 max-sm:gap-3 sm:grid-cols-3"
         >
           <div>
             <div className="text-sm/5 max-sm:text-gray-700 sm:font-medium">
@@ -109,7 +109,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
                     className="aspect-square size-6 rounded-full object-cover"
                   />
                 }
-                <div className="text-sm/5 text-zinc-300">
+                <div className="text-sm/5 text-gray-700">
                   {postAuthors[post.author ?? ''].name}
                 </div>
               </div>
@@ -117,7 +117,7 @@ function Posts({ page, category }: { page: number; category?: string }) {
           </div>
           <div className="sm:col-span-2 sm:max-w-2xl">
             <h2 className="text-sm/5 font-medium">{post.title}</h2>
-            <p className="mt-3 text-sm/6 text-zinc-300">{post.excerpt}</p>
+            <p className="mt-3 text-sm/6 text-gray-500">{post.excerpt}</p>
             <div className="mt-4">
               <Link
                 href={post.url}
@@ -180,9 +180,9 @@ function Pagination({
             data-active={i + 1 === page ? true : undefined}
             className={clsx(
               'size-7 rounded-lg text-center text-sm/7 font-medium',
-              'data-hover:bg-zinc-900',
-              'data-active:shadow-sm data-active:ring-1 data-active:ring-white/10',
-              'data-active:data-hover:bg-zinc-900',
+              'data-hover:bg-gray-100',
+              'data-active:shadow-sm data-active:ring-1 data-active:ring-black/10',
+              'data-active:data-hover:bg-gray-50',
             )}
           >
             {i + 1}
diff --git a/src/components/plus-grid.tsx b/src/components/plus-grid.tsx
index 8d29861..277bc24 100644
--- a/src/components/plus-grid.tsx
+++ b/src/components/plus-grid.tsx
@@ -28,10 +28,10 @@ export function PlusGridRow({
         aria-hidden="true"
         className="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2"
       >
-        <div className="absolute inset-x-0 top-0 border-t border-white/5"></div>
-        <div className="absolute inset-x-0 top-2 border-t border-white/5"></div>
-        <div className="absolute inset-x-0 bottom-0 hidden border-b border-white/5 group-last/row:block"></div>
-        <div className="absolute inset-x-0 bottom-2 hidden border-b border-white/5 group-last/row:block"></div>
+        <div className="absolute inset-x-0 top-0 border-t border-black/5"></div>
+        <div className="absolute inset-x-0 top-2 border-t border-black/5"></div>
+        <div className="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div>
+        <div className="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div>
       </div>
       {children}
     </div>
@@ -83,7 +83,7 @@ export function PlusGridIcon({
       aria-hidden="true"
       className={clsx(
         className,
-        'absolute size-[15px] fill-white/10',
+        'absolute size-[15px] fill-black/10',
         yClass,
         xClass,
       )}
diff --git a/src/components/sponsors.tsx b/src/components/sponsors.tsx
index 0c65602..7b60f89 100644
--- a/src/components/sponsors.tsx
+++ b/src/components/sponsors.tsx
@@ -76,10 +76,19 @@ function SponsorCard({
       ref={ref}
       style={{ opacity }}
       {...props}
-      className="relative flex w-64 rounded-3xl sm:w-72 bg-black"
+      className="relative flex aspect-9/16 w-64 shrink-0 snap-start scroll-ml-(--scroll-padding) flex-col justify-end overflow-hidden rounded-3xl sm:aspect-3/4 sm:w-72"
     >
+      <img
+        alt=""
+        src={img}
+        className="absolute inset-x-0 top-0 aspect-square w-full object-contain"
+      />
+      <div
+        aria-hidden="true"
+        className="absolute inset-0 rounded-3xl bg-linear-to-t from-black from-[calc(7/16*100%)] ring-1 ring-gray-950/10 ring-inset sm:from-25%"
+      />
       <figure className="relative p-10">
-        <figcaption className="pb-3 border-b border-white/20">
+        <figcaption className="mt-6 border-t border-white/20 pt-6">
           <p className="text-sm/6 font-medium text-white">{name}</p>
           <p className="text-sm/6 font-medium">
             <span className="bg-linear-to-r from-sky-300 from-28% via-blue-200 via-70% to-cyan-300 bg-clip-text text-transparent">
@@ -263,8 +272,8 @@ export function Sponsors() {
                   data-active={activeIndex === i ? true : undefined}
                   aria-label={`Scroll to sponsorship from ${name}`}
                   className={clsx(
-                    'size-2.5 cursor-pointer rounded-full border border-transparent bg-zinc-600 transition',
-                    'data-active:bg-blue-700 data-hover:bg-zinc-900',
+                    'size-2.5 cursor-pointer rounded-full border border-transparent bg-gray-300 transition',
+                    'data-active:bg-gray-400 data-hover:bg-gray-400',
                     'forced-colors:data-active:bg-[Highlight] forced-colors:data-focus:outline-offset-4',
                   )}
                 />
diff --git a/src/components/team.tsx b/src/components/team.tsx
index 0bb847b..a90b8e0 100644
--- a/src/components/team.tsx
+++ b/src/components/team.tsx
@@ -27,8 +27,8 @@ function Person({
         <img alt="" src={img} className="size-12 rounded-full" />
         <div className="text-sm/6">
           <h3 className="font-medium group-hover:underline">{name}</h3>
-          <p className="text-zinc-400">{description}</p>
-          <p className="text-xs font-semibold text-blue-600/80">
+          <p className="text-gray-500">{description}</p>
+          <p className="text-xs font-semibold text-gray-400 uppercase">
             {contributions} contribution(s)
           </p>
         </div>
@@ -105,14 +105,14 @@ export function Team() {
       </Lead>
       <div className="mt-12 grid grid-cols-1 gap-12 lg:grid-cols-2">
         <div className="max-w-lg">
-          <p className="text-sm/6 text-zinc-400">
+          <p className="text-sm/6 text-gray-600">
             Drop OSS was started, mostly on a whim, in response to frustrations
             with the controlled nature of DRM games, and the missing comforts of
             DRM-free games. Since then, we&apos;ve put together a small circle
             of dedicated maintainers and contributors to develop Drop and all
             its amazing features.
           </p>
-          <p className="mt-8 text-sm/6 text-zinc-400">
+          <p className="mt-8 text-sm/6 text-gray-600">
             If you know a little code, you can help out! We heavily encourage
             contributions, especially if you&apos;re passionate about the
             project and enjoy writing code. We use a variety of stacks across
@@ -124,9 +124,8 @@ export function Team() {
               className="w-full sm:w-auto"
               href="https://developer.droposs.org/contributing"
               target="_blank"
-              variant="outline"
             >
-              Contribute &rarr;
+              Contribute
             </Button>
           </div>
         </div>
@@ -134,7 +133,7 @@ export function Team() {
       <Subheading id="team" as="h3" className="mt-24">
         The team
       </Subheading>
-      <hr className="mt-6 border-t border-zinc-800" />
+      <hr className="mt-6 border-t border-gray-200" />
       <ul
         role="list"
         className="mx-auto mt-16 grid grid-cols-1 gap-8 sm:grid-cols-3 lg:grid-cols-4"
diff --git a/src/components/text.tsx b/src/components/text.tsx
index fd8e289..ca72224 100644
--- a/src/components/text.tsx
+++ b/src/components/text.tsx
@@ -19,7 +19,7 @@ export function Heading({
       data-dark={dark ? 'true' : undefined}
       className={clsx(
         className,
-        'text-4xl font-medium tracking-tighter text-pretty text-white sm:text-6xl',
+        'text-4xl font-medium tracking-tighter text-pretty text-gray-950 data-dark:text-white sm:text-6xl',
       )}
     />
   )
@@ -37,7 +37,7 @@ export function Subheading({
       data-dark={dark ? 'true' : undefined}
       className={clsx(
         className,
-        'font-mono text-xs/5 font-semibold tracking-widest uppercase text-zinc-500',
+        'font-mono text-xs/5 font-semibold tracking-widest text-gray-500 uppercase data-dark:text-gray-400',
       )}
     />
   )