diff --git a/package.json b/package.json
index 661d612675..629de17d51 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "husky": "^9.1.7",
     "jsdom": "^26.1.0",
     "lint-staged": "^16.1.4",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.8.0",
     "tailwindcss": "^4.1.11",
     "turbo": "^2.5.6",
diff --git a/packages/docs/.gitbook/assets/album.png b/packages/docs/.gitbook/assets/album.png
new file mode 100644
index 0000000000..57a21d06e9
Binary files /dev/null and b/packages/docs/.gitbook/assets/album.png differ
diff --git a/packages/docs/.gitbook/assets/app-layout-overview.png b/packages/docs/.gitbook/assets/app-layout-overview.png
index e0034a361b..6daccd0e87 100644
Binary files a/packages/docs/.gitbook/assets/app-layout-overview.png and b/packages/docs/.gitbook/assets/app-layout-overview.png differ
diff --git a/packages/docs/.gitbook/assets/dashboard-main.png b/packages/docs/.gitbook/assets/dashboard-main.png
index 6c646a139b..d66ab402b3 100644
Binary files a/packages/docs/.gitbook/assets/dashboard-main.png and b/packages/docs/.gitbook/assets/dashboard-main.png differ
diff --git a/packages/docs/.gitbook/assets/installed-plugins.png b/packages/docs/.gitbook/assets/installed-plugins.png
index 443510ac99..2354488319 100644
Binary files a/packages/docs/.gitbook/assets/installed-plugins.png and b/packages/docs/.gitbook/assets/installed-plugins.png differ
diff --git a/packages/docs/.gitbook/assets/log-viewer.png b/packages/docs/.gitbook/assets/log-viewer.png
index 917f79cc26..f3d02a5b69 100644
Binary files a/packages/docs/.gitbook/assets/log-viewer.png and b/packages/docs/.gitbook/assets/log-viewer.png differ
diff --git a/packages/docs/.gitbook/assets/my-themes.png b/packages/docs/.gitbook/assets/my-themes.png
index 57422e8f26..a9a2b6a544 100644
Binary files a/packages/docs/.gitbook/assets/my-themes.png and b/packages/docs/.gitbook/assets/my-themes.png differ
diff --git a/packages/docs/.gitbook/assets/playlist-detail-view.png b/packages/docs/.gitbook/assets/playlist-detail-view.png
index 459bbe0c53..174587a9cb 100644
Binary files a/packages/docs/.gitbook/assets/playlist-detail-view.png and b/packages/docs/.gitbook/assets/playlist-detail-view.png differ
diff --git a/packages/docs/.gitbook/assets/playlists.png b/packages/docs/.gitbook/assets/playlists.png
index 83323523e7..29844db428 100644
Binary files a/packages/docs/.gitbook/assets/playlists.png and b/packages/docs/.gitbook/assets/playlists.png differ
diff --git a/packages/docs/.gitbook/assets/plugin-store.png b/packages/docs/.gitbook/assets/plugin-store.png
index 3d9685ff4f..663aaad9c1 100644
Binary files a/packages/docs/.gitbook/assets/plugin-store.png and b/packages/docs/.gitbook/assets/plugin-store.png differ
diff --git a/packages/docs/.gitbook/assets/preferences.png b/packages/docs/.gitbook/assets/preferences.png
index 367b378cf7..2bc79ece61 100644
Binary files a/packages/docs/.gitbook/assets/preferences.png and b/packages/docs/.gitbook/assets/preferences.png differ
diff --git a/packages/docs/.gitbook/assets/search-albums.png b/packages/docs/.gitbook/assets/search-albums.png
index 5d9fe0c751..d0f177f9cd 100644
Binary files a/packages/docs/.gitbook/assets/search-albums.png and b/packages/docs/.gitbook/assets/search-albums.png differ
diff --git a/packages/docs/.gitbook/assets/search-artists.png b/packages/docs/.gitbook/assets/search-artists.png
index 2d8d0336cf..548a5f25fe 100644
Binary files a/packages/docs/.gitbook/assets/search-artists.png and b/packages/docs/.gitbook/assets/search-artists.png differ
diff --git a/packages/docs/.gitbook/assets/search-tracks.png b/packages/docs/.gitbook/assets/search-tracks.png
new file mode 100644
index 0000000000..03dc0acaa6
Binary files /dev/null and b/packages/docs/.gitbook/assets/search-tracks.png differ
diff --git a/packages/docs/.gitbook/assets/sources-view.png b/packages/docs/.gitbook/assets/sources-view.png
index a682288626..91c12c8d3d 100644
Binary files a/packages/docs/.gitbook/assets/sources-view.png and b/packages/docs/.gitbook/assets/sources-view.png differ
diff --git a/packages/docs/.gitbook/assets/theme store.png b/packages/docs/.gitbook/assets/theme store.png
new file mode 100644
index 0000000000..c5ffb63ca6
Binary files /dev/null and b/packages/docs/.gitbook/assets/theme store.png differ
diff --git a/packages/docs/.gitbook/assets/whats-new.png b/packages/docs/.gitbook/assets/whats-new.png
index 5c86436982..ab4d8cef54 100644
Binary files a/packages/docs/.gitbook/assets/whats-new.png and b/packages/docs/.gitbook/assets/whats-new.png differ
diff --git a/packages/website/package.json b/packages/website/package.json
index 96296c6b8a..fd61cc752c 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -16,10 +16,13 @@
   "dependencies": {
     "@astrojs/react": "^5.0.3",
     "@astrojs/sitemap": "^3.7.0",
+    "@fontsource-variable/bricolage-grotesque": "^5.2.10",
+    "@fontsource-variable/dm-sans": "^5.2.8",
     "@iconify-json/simple-icons": "^1.2.67",
-    "@lucide/astro": "^0.563.0",
     "astro": "^6.0.0",
     "astro-icon": "^1.1.5",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.542.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
diff --git a/packages/website/public/images/nuki-crawling-out.png b/packages/website/public/images/nuki-crawling-out.png
new file mode 100644
index 0000000000..021614eaa9
Binary files /dev/null and b/packages/website/public/images/nuki-crawling-out.png differ
diff --git a/packages/website/public/images/nuki-hello.png b/packages/website/public/images/nuki-hello.png
new file mode 100644
index 0000000000..fa3dd68759
Binary files /dev/null and b/packages/website/public/images/nuki-hello.png differ
diff --git a/packages/website/public/images/nuki-listening.png b/packages/website/public/images/nuki-listening.png
new file mode 100644
index 0000000000..da6813696f
Binary files /dev/null and b/packages/website/public/images/nuki-listening.png differ
diff --git a/packages/website/public/images/nuki-ready-to-work.png b/packages/website/public/images/nuki-ready-to-work.png
new file mode 100644
index 0000000000..f31e3b9518
Binary files /dev/null and b/packages/website/public/images/nuki-ready-to-work.png differ
diff --git a/packages/website/public/images/nuki-studying.png b/packages/website/public/images/nuki-studying.png
new file mode 100644
index 0000000000..e3f47f47c3
Binary files /dev/null and b/packages/website/public/images/nuki-studying.png differ
diff --git a/packages/website/src/components/Badge.astro b/packages/website/src/components/Badge.astro
index f1d6d5ae95..6ca97e4db7 100644
--- a/packages/website/src/components/Badge.astro
+++ b/packages/website/src/components/Badge.astro
@@ -14,7 +14,7 @@ const sizeClasses = {
 
 <h2
   class:list={[
-    'absolute left-1/2 -translate-x-1/2 themed-border border-border bg-[var(--color-badge)] rounded-md font-heading font-black uppercase tracking-widest whitespace-nowrap',
+    'themed-border border-border bg-background font-heading absolute left-1/2 -translate-x-1/2 rounded-md font-black tracking-widest whitespace-nowrap uppercase',
     sizeClasses[size],
     className,
   ]}
diff --git a/packages/website/src/components/Box.astro b/packages/website/src/components/Box.astro
index 7cf3a0786e..c5373b3ac6 100644
--- a/packages/website/src/components/Box.astro
+++ b/packages/website/src/components/Box.astro
@@ -1,8 +1,8 @@
 ---
-type Props = {
+import type { HTMLAttributes } from 'astro/types';
+
+type Props = HTMLAttributes<'div'> & {
   as?: string;
-  class?: string;
-  [key: string]: unknown;
 };
 
 const { as: Element = 'div', class: className, ...rest } = Astro.props;
@@ -10,11 +10,15 @@ const { as: Element = 'div', class: className, ...rest } = Astro.props;
 
 <Element
   class:list={[
-    'themed-border border-border bg-primary rounded-md shadow-shadow relative text-center',
+    'themed-border border-border bg-background shadow-shadow relative overflow-visible rounded-md text-center',
     className,
   ]}
   {...rest}
 >
   <slot name="badge" />
-  <slot />
+  <div
+    class="overflow-hidden rounded-[calc(var(--radius,0.375rem)-var(--border-width,2px))]"
+  >
+    <slot />
+  </div>
 </Element>
diff --git a/packages/website/src/components/Button.astro b/packages/website/src/components/Button.astro
index 438cc1ca2d..7df279c06c 100644
--- a/packages/website/src/components/Button.astro
+++ b/packages/website/src/components/Button.astro
@@ -18,7 +18,7 @@ const baseClasses =
 
 const variantClasses = {
   default: 'text-foreground bg-primary',
-  secondary: 'text-foreground bg-background',
+  secondary: 'text-foreground bg-background-secondary',
   text: 'text-foreground bg-transparent border-transparent shadow-none hover:translate-x-0 hover:translate-y-0',
   discord:
     'text-foreground bg-(--color-discord) prefers-dark:text-foreground prefers-dark:bg-background prefers-dark:border-(--color-discord)',
diff --git a/packages/website/src/components/CopyButton.tsx b/packages/website/src/components/CopyButton.tsx
new file mode 100644
index 0000000000..ada857fb0e
--- /dev/null
+++ b/packages/website/src/components/CopyButton.tsx
@@ -0,0 +1,44 @@
+import clsx from 'clsx';
+import { Check, Copy } from 'lucide-react';
+import { ReactNode, useState, type FC } from 'react';
+
+type CopyButtonProps = {
+  text: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+const RESET_DELAY = 2000;
+
+export const CopyButton: FC<CopyButtonProps> = ({
+  text,
+  className,
+  children,
+}) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), RESET_DELAY);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      className={clsx(
+        'inline-flex cursor-pointer flex-row items-center justify-center gap-2 rounded p-1 transition-colors',
+        className,
+      )}
+      aria-label="Copy to clipboard"
+    >
+      <span className="text-sm">{children}</span>
+      {copied ? (
+        <Check className="h-3.5 w-3.5 text-green-500" />
+      ) : (
+        <Copy className="h-3.5 w-3.5" />
+      )}
+    </button>
+  );
+};
diff --git a/packages/website/src/components/Downloads.astro b/packages/website/src/components/Downloads.astro
index 9573714d2d..070fdcb803 100644
--- a/packages/website/src/components/Downloads.astro
+++ b/packages/website/src/components/Downloads.astro
@@ -2,9 +2,10 @@
 import { Icon } from 'astro-icon/components';
 
 import { stars } from '../data/github';
-import { version, releaseUrl } from '../data/version';
+import { releaseUrl, version } from '../data/version';
 import Badge from './Badge.astro';
 import Box from './Box.astro';
+import { CopyButton } from './CopyButton';
 
 const platforms = [
   {
@@ -25,33 +26,37 @@ const platforms = [
 ];
 ---
 
-<Box class="md:hidden px-6 py-5 z-10">
+<Box class="z-10 px-6 py-5 md:hidden">
   <Badge slot="badge" size="sm">Desktop only</Badge>
   <div
-    class="flex flex-col items-center gap-3 mt-1 pointer-events-none select-none min-[400px]:flex-row min-[400px]:justify-center"
+    class="pointer-events-none mt-1 flex items-center justify-center gap-2 select-none min-[400px]:gap-3"
   >
     {
       platforms.map((platform) => (
-        <span class="inline-flex items-center justify-center gap-2 themed-border border-border/40 bg-background-secondary/40 text-foreground/40 rounded-md w-32 py-2 text-sm font-bold">
-          <Icon name={platform.icon} class="w-4 h-4" />
+        <span class="themed-border border-border/40 bg-background-secondary/40 text-foreground/40 inline-flex items-center justify-center gap-1.5 rounded-md px-3 py-2 text-xs font-bold min-[400px]:gap-2 min-[400px]:px-4 min-[400px]:text-sm">
+          <Icon name={platform.icon} class="h-4 w-4" />
           {platform.name}
         </span>
       ))
     }
   </div>
-  <p class="text-xs mt-3">Downloads are only available on a desktop device.</p>
+  <p class="mt-3 text-xs">Downloads are only available on a desktop device.</p>
 </Box>
 
-<Box as="section" id="downloads" class="hidden md:block px-8 py-6 z-10">
+<Box
+  as="section"
+  id="downloads"
+  class="bg-primary z-10 hidden px-8 py-6 md:block"
+>
   <Badge slot="badge">Downloads</Badge>
-  <div class="flex justify-center gap-4 mt-2">
+  <div class="mt-2 flex justify-center gap-3">
     {
       platforms.map((platform) => (
         <a
           href={platform.url}
-          class="themed-border btn-interactive inline-flex items-center justify-center gap-2.5 border-border bg-background-secondary rounded-md w-36 py-3 font-bold shadow-shadow transition-all hover:translate-x-shadow-x hover:translate-y-shadow-y hover:shadow-none"
+          class="themed-border btn-interactive border-border bg-background-secondary shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y inline-flex items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-bold transition-all hover:shadow-none"
         >
-          <Icon name={platform.icon} class="w-5 h-5" />
+          <Icon name={platform.icon} class="h-4 w-4" />
           {platform.name}
         </a>
       ))
@@ -59,75 +64,44 @@ const platforms = [
   </div>
   <a
     href="https://github.com/nukeop/nuclear/releases"
-    class="block text-center text-sm font-medium mt-4 underline underline-offset-2 hover:no-underline"
+    class="mt-4 block text-center text-sm font-medium underline underline-offset-2 hover:no-underline"
   >
     All downloads
   </a>
   <div
-    class="text-xs text-foreground/60 mt-4 max-w-md mx-auto text-center leading-relaxed"
+    class="text-foreground/60 mx-auto mt-4 max-w-md text-center text-xs leading-relaxed"
   >
     <p>
       <strong class="text-foreground/80">macOS users:</strong> macOS may block Nuclear
       from opening. Try right-clicking the app and selecting Open. If that doesn't
       work, run this in Terminal:
     </p>
-    <div class="relative mt-1.5 mb-0.5 group">
+    <div class="relative mt-1.5 mb-0.5">
       <code
-        id="xattr-cmd"
-        class="block px-2 py-1 pr-8 bg-background-secondary rounded text-[11px] break-all"
+        class="bg-background-secondary block rounded px-2 py-1 pr-8 text-[11px] break-all"
         >sudo xattr -r -d com.apple.quarantine /Applications/Nuclear.app</code
       >
-      <button
-        id="copy-xattr"
-        type="button"
-        class="absolute right-1 top-1/2 -translate-y-1/2 p-1 rounded text-foreground/40 hover:text-foreground/80 transition-colors"
-        aria-label="Copy command"
-      >
-        <svg
-          class="w-3.5 h-3.5"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-          ></path>
-        </svg>
-      </button>
+      <CopyButton
+        client:load
+        text="sudo xattr -r -d com.apple.quarantine /Applications/Nuclear.app"
+        className="absolute top-1/2 right-1 -translate-y-1/2"
+      />
     </div>
   </div>
-  <script>
-    document
-      .getElementById('copy-xattr')
-      ?.addEventListener('click', async () => {
-        const cmd = document.getElementById('xattr-cmd')?.textContent ?? '';
-        await navigator.clipboard.writeText(cmd);
-        const btn = document.getElementById('copy-xattr');
-        if (btn) {
-          btn.innerHTML = `<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`;
-          setTimeout(() => {
-            btn.innerHTML = `<svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>`;
-          }, 2000);
-        }
-      });
-  </script>
 </Box>
 
-<div class="relative mt-6 z-10">
+<div class="relative z-10 mt-6">
   <span
-    class="absolute -top-3 -right-3 themed-border border-border rounded-md px-2 py-0.5 text-xs font-black rotate-6 pointer-events-none whitespace-nowrap z-20"
+    class="themed-border border-border pointer-events-none absolute -top-3 -right-3 z-20 rotate-6 rounded-md px-2 py-0.5 text-xs font-black whitespace-nowrap"
     style={`color: var(--color-star); background: var(--color-star-bg)`}
   >
     {stars ?? '17k'} &#9733;
   </span>
   <a
     href="https://github.com/nukeop/nuclear"
-    class="themed-border btn-interactive inline-flex items-center justify-center gap-2.5 border-border bg-background-secondary rounded-md px-6 py-3 font-bold shadow-shadow transition-all hover:translate-x-shadow-x hover:translate-y-shadow-y hover:shadow-none"
+    class="themed-border btn-interactive border-border bg-background-secondary shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y inline-flex items-center justify-center gap-2.5 rounded-md px-6 py-3 font-bold transition-all hover:shadow-none"
   >
-    <Icon name="simple-icons:github" class="w-5 h-5" />
+    <Icon name="simple-icons:github" class="h-5 w-5" />
     Learn more
   </a>
 </div>
diff --git a/packages/website/src/components/FAQ.astro b/packages/website/src/components/FAQ.astro
new file mode 100644
index 0000000000..31cf65013d
--- /dev/null
+++ b/packages/website/src/components/FAQ.astro
@@ -0,0 +1,87 @@
+---
+type FaqItem = {
+  question: string;
+  answer: string;
+};
+
+const faqItems: FaqItem[] = [
+  {
+    question: 'Is Nuclear music player free?',
+    answer:
+      'Yes. Nuclear is completely free and open-source, released under the AGPL-3.0 license. There are no ads, no trackers, no premium tier, and no in-app purchases. Anyone can download it, use it, and audit the source code.',
+  },
+  {
+    question: 'What is Nuclear music player?',
+    answer:
+      'Nuclear is a free, open-source music player without ads or tracking. Search for any song or artist, build playlists, and start listening. Runs on Windows, macOS, and Linux.',
+  },
+  {
+    question: 'Is Nuclear music player safe?',
+    answer:
+      'Yes. Nuclear is open source, so the entire code is publicly auditable on GitHub. Releases are built by GitHub Actions from the public repository. There is no telemetry, no analytics, and no data collection.',
+  },
+  {
+    question: 'Is Nuclear music player available for Android?',
+    answer:
+      'No. Nuclear is a desktop application, available for Windows, macOS (Intel and Apple Silicon), and Linux (Flatpak, AUR, AppImage, and others). There is no official Android or iOS version.',
+  },
+  {
+    question: 'How do I install Nuclear?',
+    answer:
+      'Download the latest release for your platform from the GitHub releases page. Linux users can also install Nuclear from Flathub, the AUR, or as an AppImage, while Windows users can use winget, and Mac users can use homebrew. Full installation instructions are available in the documentation.',
+  },
+];
+
+const faqJsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqItems.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: item.answer,
+    },
+  })),
+};
+---
+
+<section id="faq" class="mx-auto w-full max-w-3xl px-4 py-16">
+  <h2
+    class="font-heading mb-8 text-center text-3xl font-black tracking-widest uppercase md:text-4xl"
+  >
+    FAQ
+  </h2>
+
+  <div class="relative flex flex-col gap-3">
+    <img
+      src="/images/nuki-crawling-out.png"
+      alt="Nuki peeking out with a magnifying glass"
+      class="pointer-events-none absolute right-4 bottom-full z-10 -mb-1.5 w-32 select-none md:w-40"
+    />
+    {
+      faqItems.map((item) => (
+        <details class="themed-border border-border bg-background-secondary shadow-shadow group rounded-md">
+          <summary class="font-heading cursor-pointer list-none px-5 py-4 text-base font-bold tracking-wide uppercase select-none [&::-webkit-details-marker]:hidden">
+            <span class="flex items-center justify-between gap-4">
+              <span>{item.question}</span>
+              <span
+                class="text-primary text-2xl leading-none transition-transform group-open:rotate-45"
+                aria-hidden="true"
+              >
+                +
+              </span>
+            </span>
+          </summary>
+          <div class="border-border border-t-2 px-5 py-4">
+            <p class="text-foreground/80 text-sm leading-relaxed">
+              {item.answer}
+            </p>
+          </div>
+        </details>
+      ))
+    }
+  </div>
+</section>
+
+<script type="application/ld+json" set:html={JSON.stringify(faqJsonLd)} />
diff --git a/packages/website/src/components/Features.astro b/packages/website/src/components/Features.astro
new file mode 100644
index 0000000000..f824f3d68c
--- /dev/null
+++ b/packages/website/src/components/Features.astro
@@ -0,0 +1,153 @@
+---
+import { Image } from 'astro:assets';
+
+import installedPlugins from '../../../docs/.gitbook/assets/installed-plugins.png';
+import logViewer from '../../../docs/.gitbook/assets/log-viewer.png';
+import playlistDetailView from '../../../docs/.gitbook/assets/playlist-detail-view.png';
+import playlists from '../../../docs/.gitbook/assets/playlists.png';
+import pluginStore from '../../../docs/.gitbook/assets/plugin-store.png';
+import preferences from '../../../docs/.gitbook/assets/preferences.png';
+import searchAlbums from '../../../docs/.gitbook/assets/search-albums.png';
+import searchArtists from '../../../docs/.gitbook/assets/search-artists.png';
+import searchTracks from '../../../docs/.gitbook/assets/search-tracks.png';
+import whatsNew from '../../../docs/.gitbook/assets/whats-new.png';
+import ThemeShowcase from './ThemeShowcase.astro';
+
+type ScreenshotEntry = {
+  src: typeof searchArtists;
+  alt: string;
+};
+
+type Nuki = {
+  src: string;
+  alt: string;
+};
+
+type FeatureBlock = {
+  heading: string;
+  description: string;
+  images: ScreenshotEntry[];
+  layout: 'text-left' | 'text-right';
+  nuki?: Nuki;
+};
+
+const featureBlocks: FeatureBlock[] = [
+  {
+    heading: 'Search',
+    description:
+      'Look up artists, albums, and tracks across multiple sources. More sources can be added with plugins.',
+    images: [
+      { src: searchArtists, alt: 'Search artists in Nuclear' },
+      { src: searchAlbums, alt: 'Search albums in Nuclear' },
+      { src: searchTracks, alt: 'Search tracks in Nuclear' },
+    ],
+    layout: 'text-left',
+  },
+  {
+    heading: 'Playlists',
+    description:
+      'Put together playlists from any source. Reorder, rename, and come back to them later. Import from any service, or from JSON files.',
+    images: [
+      { src: playlists, alt: 'Playlists view in Nuclear' },
+      { src: playlistDetailView, alt: 'Playlist detail view in Nuclear' },
+    ],
+    layout: 'text-right',
+    nuki: {
+      src: '/images/nuki-studying.png',
+      alt: 'Nuki studying at a desk',
+    },
+  },
+  {
+    heading: 'Plugins',
+    description:
+      'Nuclear can be extended with a powerful plugin API. Auto-update is built in.',
+    images: [
+      { src: pluginStore, alt: 'Plugin store in Nuclear' },
+      { src: installedPlugins, alt: 'Installed plugins in Nuclear' },
+    ],
+    layout: 'text-left',
+    nuki: {
+      src: '/images/nuki-ready-to-work.png',
+      alt: 'Nuki holding a wrench and toolbox',
+    },
+  },
+  {
+    heading: 'Settings for everything',
+    description:
+      'Preferences for everything. Power users can use the built-in log viewer for easy debugging and support.',
+    images: [
+      { src: preferences, alt: 'Preferences in Nuclear' },
+      { src: logViewer, alt: 'Log viewer in Nuclear' },
+      { src: whatsNew, alt: "What's new in Nuclear" },
+    ],
+    layout: 'text-right',
+  },
+];
+---
+
+<div class="flex w-full flex-col gap-16 md:gap-24">
+  {
+    featureBlocks.map((block, blockIndex) => {
+      const isReversed = block.layout === 'text-right';
+
+      return (
+        <>
+          <div
+            class:list={[
+              'grid items-center gap-8 md:grid-cols-2 md:gap-12',
+              isReversed && 'md:*:first:order-2',
+            ]}
+          >
+            <div class="flex flex-col gap-4">
+              <h3 class="font-heading text-[clamp(1.75rem,3vw,2.5rem)] leading-tight font-black tracking-wider uppercase">
+                {block.heading}
+              </h3>
+              <p class="max-w-[38ch] text-base leading-relaxed opacity-75">
+                {block.description}
+              </p>
+            </div>
+
+            <div class="relative flex min-h-50 items-center justify-center perspective-distant">
+              {block.nuki && (
+                <img
+                  src={block.nuki.src}
+                  alt={block.nuki.alt}
+                  class:list={[
+                    'pointer-events-none absolute -bottom-4 z-10 w-40 select-none md:w-36 xl:w-50',
+                    isReversed
+                      ? 'right-4 rotate-6 md:-right-8'
+                      : 'left-4 -rotate-6 md:-left-8',
+                  ]}
+                />
+              )}
+              {block.images.map((image, imageIndex) => (
+                <div
+                  class:list={[
+                    'themed-border border-border shadow-shadow bg-primary block w-[75vw] shrink-0 overflow-hidden rounded-md transition duration-200 last:mr-0 hover:shadow-lg hover:brightness-90',
+                    'mr-[-60vw] md:-mr-50 md:w-[320px] xl:-mr-70 xl:w-105',
+                    isReversed
+                      ? 'md:transform-[rotateY(28deg)]'
+                      : 'md:transform-[rotateY(-28deg)]',
+                  ]}
+                  style={{ zIndex: imageIndex + 1 }}
+                >
+                  <Image
+                    src={image.src}
+                    alt={image.alt}
+                    inferSize
+                    widths={[720, 1080, 1440]}
+                    sizes="(max-width: 768px) 75vw, (max-width: 1024px) 40vw, 420px"
+                    quality={90}
+                    class="block w-full"
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          {blockIndex === 1 && <ThemeShowcase />}
+        </>
+      );
+    })
+  }
+</div>
diff --git a/packages/website/src/components/Footer.astro b/packages/website/src/components/Footer.astro
index c82c5cd42b..6a04feda02 100644
--- a/packages/website/src/components/Footer.astro
+++ b/packages/website/src/components/Footer.astro
@@ -4,53 +4,132 @@ import { Icon } from 'astro-icon/components';
 import Button from './Button.astro';
 ---
 
-<footer class="border-t border-border py-8 flex flex-col items-center gap-4 bg-primary">
-  <a href="/">
-    <img
-      src="/images/logo-full-outlined.svg"
-      alt="Nuclear"
-      class="h-16 dark-mode-hidden"
-    />
-    <img
-      src="/images/logo-full-light-outlined.svg"
-      alt="Nuclear"
-      class="h-16 hidden dark-mode-block"
-    />
-  </a>
-  <p class="text-foreground-secondary text-center text-lg font-bold max-w-xl px-4">
-    Nuclear is a free, open-source music player without ads or tracking. Search for any song or artist, build playlists, and start listening.
-  </p>
-  <Button href="https://github.com/nukeop/nuclear/releases" variant="secondary" size="lg" class="font-bold">
-    Download →
-  </Button>
-  <div class="flex flex-col md:flex-row gap-12 md:gap-20 mt-4 px-4">
-    <div>
-      <h3 class="font-heading font-bold uppercase tracking-widest text-sm">Follow us</h3>
-      <div class="flex gap-3 mt-3">
-        <a href="https://github.com/nukeop/nuclear" aria-label="GitHub"><Icon name="simple-icons:github" class="w-5 h-5" /></a>
-        <a href="https://fosstodon.org/@nuclearplayer" aria-label="Mastodon"><Icon name="simple-icons:mastodon" class="w-5 h-5" /></a>
-        <a href="https://twitter.com/nuclear_player" aria-label="Twitter"><Icon name="simple-icons:twitter" class="w-5 h-5" /></a>
-        <a href="https://discord.gg/JqPjKxE" aria-label="Discord"><Icon name="simple-icons:discord" class="w-5 h-5" /></a>
-      </div>
+<footer
+  class="border-border bg-primary relative overflow-hidden border-t py-12"
+>
+  <div
+    class="mx-auto grid max-w-7xl grid-cols-1 gap-12 px-6 sm:grid-cols-2 lg:grid-cols-4 lg:gap-10"
+  >
+    <div class="flex flex-col items-start gap-4">
+      <a href="/" class="inline-block">
+        <img
+          src="/images/logo-full-outlined.svg"
+          alt="Nuclear"
+          class="dark-mode-hidden h-8"
+        />
+        <img
+          src="/images/logo-full-light-outlined.svg"
+          alt="Nuclear"
+          class="dark-mode-block hidden h-8"
+        />
+      </a>
+      <p class="text-foreground-secondary text-sm font-bold">
+        Nuclear is a free, open-source music player without ads or tracking.
+        Search for any song or artist, build playlists, and start listening.
+      </p>
+      <Button
+        href="https://github.com/nukeop/nuclear/releases"
+        variant="secondary"
+        class="font-bold"
+        size="sm"
+      >
+        Download →
+      </Button>
     </div>
+
     <div>
-      <h3 class="font-heading font-bold uppercase tracking-widest text-sm">Get started</h3>
+      <h3 class="font-heading text-sm font-bold tracking-widest uppercase">
+        Get started
+      </h3>
       <ul class="mt-3 flex flex-col gap-2 text-sm">
-        <li><a href="https://docs.nuclearplayer.com" class="hover:underline">Documentation</a></li>
-        <li><a href="https://docs.nuclearplayer.com/nuclear/user-manual/getting-started" class="hover:underline">Getting started</a></li>
-        <li><a href="https://docs.nuclearplayer.com/nuclear/theming/themes" class="hover:underline">Themes</a></li>
-        <li><a href="https://docs.nuclearplayer.com/nuclear/plugins/plugin-store" class="hover:underline">Plugin store</a></li>
-        <li><a href="https://github.com/nukeop/nuclear/releases" class="hover:underline">Releases</a></li>
+        <li>
+          <a href="https://docs.nuclearplayer.com" class="hover:underline"
+            >Documentation</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://docs.nuclearplayer.com/nuclear/user-manual/getting-started"
+            class="hover:underline">Getting started</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://docs.nuclearplayer.com/nuclear/theming/themes"
+            class="hover:underline">Themes</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://docs.nuclearplayer.com/nuclear/plugins/plugin-store"
+            class="hover:underline">Plugin store</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://github.com/nukeop/nuclear/releases"
+            class="hover:underline">Releases</a
+          >
+        </li>
       </ul>
     </div>
+
     <div>
-      <h3 class="font-heading font-bold uppercase tracking-widest text-sm">Resources</h3>
+      <h3 class="font-heading text-sm font-bold tracking-widest uppercase">
+        Resources
+      </h3>
       <ul class="mt-3 flex flex-col gap-2 text-sm">
-        <li><a href="https://docs.nuclearplayer.com/nuclear/user-manual/installation" class="hover:underline">Installation</a></li>
-        <li><a href="https://flathub.org/en/apps/com.nuclearplayer.Nuclear" class="hover:underline">Flathub</a></li>
-        <li><a href="https://aur.archlinux.org/packages/nuclear-player-bin" class="hover:underline">AUR</a></li>
-        <li><a href="https://github.com/nukeop/nuclear/discussions" class="hover:underline">Discuss</a></li>
+        <li>
+          <a
+            href="https://docs.nuclearplayer.com/nuclear/user-manual/installation"
+            class="hover:underline">Installation</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://flathub.org/en/apps/com.nuclearplayer.Nuclear"
+            class="hover:underline">Flathub</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://aur.archlinux.org/packages/nuclear-player-bin"
+            class="hover:underline">AUR</a
+          >
+        </li>
+        <li>
+          <a
+            href="https://github.com/nukeop/nuclear/discussions"
+            class="hover:underline">Discuss</a
+          >
+        </li>
       </ul>
     </div>
+
+    <div class="relative">
+      <h3 class="font-heading text-sm font-bold tracking-widest uppercase">
+        Follow us
+      </h3>
+      <div class="mt-3 flex gap-3">
+        <a href="https://github.com/nukeop/nuclear" aria-label="GitHub"
+          ><Icon name="simple-icons:github" class="h-5 w-5" /></a
+        >
+        <a href="https://fosstodon.org/@nuclearplayer" aria-label="Mastodon"
+          ><Icon name="simple-icons:mastodon" class="h-5 w-5" /></a
+        >
+        <a href="https://twitter.com/nuclear_player" aria-label="Twitter"
+          ><Icon name="simple-icons:twitter" class="h-5 w-5" /></a
+        >
+        <a href="https://discord.gg/JqPjKxE" aria-label="Discord"
+          ><Icon name="simple-icons:discord" class="h-5 w-5" /></a
+        >
+      </div>
+    </div>
   </div>
+
+  <img
+    src="/images/nuki-listening.png"
+    alt="Nuclear mascot Nuki listening to music"
+    class="pointer-events-none absolute right-8 -bottom-1 z-10 w-36 select-none lg:right-8 lg:w-48"
+  />
 </footer>
diff --git a/packages/website/src/components/Header.astro b/packages/website/src/components/Header.astro
index a2df459f7b..eb571157a6 100644
--- a/packages/website/src/components/Header.astro
+++ b/packages/website/src/components/Header.astro
@@ -31,7 +31,7 @@ import Button from './Button.astro';
       class="gap-2 font-bold text-white bg-(--color-discord) prefers-dark:text-foreground prefers-dark:bg-background prefers-dark:border-(--color-discord)"
     >
       <Icon name="simple-icons:discord" class="w-5 h-5" />
-      Join our Discord
+      <span class="hidden md:inline">Join our Discord</span>
     </Button>
     <Button
       href="https://github.com/nukeop/nuclear"
@@ -40,7 +40,7 @@ import Button from './Button.astro';
       class="gap-2 font-bold"
     >
       <Icon name="simple-icons:github" class="w-5 h-5" />
-      {stars ? `${stars} stars` : 'Star on GitHub'}
+      <span class="hidden md:inline">{stars ? `${stars} stars` : 'Star on GitHub'}</span>
     </Button>
   </div>
 </header>
diff --git a/packages/website/src/components/Hero.astro b/packages/website/src/components/Hero.astro
index d6914f50d7..d5008d3ea7 100644
--- a/packages/website/src/components/Hero.astro
+++ b/packages/website/src/components/Hero.astro
@@ -1,18 +1,20 @@
 ---
-import { versionTag } from '../data/version';
+import { Image } from 'astro:assets';
+
+import dashboardMain from '../../../docs/.gitbook/assets/dashboard-main.png';
+import Box from './Box.astro';
+import Downloads from './Downloads.astro';
 import { Typewriter } from './Typewriter';
 ---
 
-<section class="px-4 py-8 md:p-8 z-10 relative">
-  <div class="text-center">
-    <div
-      class="inline-block mb-6 themed-border border-border bg-[var(--color-badge)] rounded-md px-4 py-1 text-sm font-bold uppercase tracking-widest shadow-shadow"
+<section class="relative z-20 mx-auto w-full max-w-7xl px-4 py-8 md:px-8">
+  <div class="mb-10 text-center">
+    <span
+      class="font-heading text-foreground/50 mb-3 inline-block text-xs font-bold tracking-[0.3em] uppercase"
+      >Est. 2016</span
     >
-      {versionTag} Available Now
-    </div>
-
     <h1
-      class="font-heading mb-8 text-3xl font-black uppercase leading-tight md:text-4xl lg:text-5xl xl:text-6xl"
+      class="font-heading text-3xl leading-tight font-black uppercase md:text-4xl lg:text-5xl xl:text-6xl"
     >
       Nuclear is a
       <span
@@ -23,6 +25,31 @@ import { Typewriter } from './Typewriter';
       <Typewriter client:load />
     </h1>
   </div>
+
+  <div class="grid grid-cols-1 items-center gap-8 xl:grid-cols-[3fr_2fr]">
+    <div class="relative z-10 rotate-1">
+      <Box>
+        <div class="leading-0">
+          <Image
+            src={dashboardMain}
+            alt="Nuclear music player dashboard"
+            widths={[960, 1280, 1920, 2972]}
+            sizes="(max-width: 640px) 90vw, (max-width: 1024px) 80vw, 960px"
+            class="block w-full"
+          />
+        </div>
+      </Box>
+      <img
+        src="images/nuki-hello.png"
+        alt="Nuclear mascot Nuki waving"
+        class="pointer-events-none absolute right-0 bottom-0 z-10 w-36 select-none md:-right-8 md:w-48 lg:-right-12"
+      />
+    </div>
+
+    <div class="flex flex-col items-center">
+      <Downloads />
+    </div>
+  </div>
 </section>
 
 <style>
diff --git a/packages/website/src/components/McpShowcase.tsx b/packages/website/src/components/McpShowcase.tsx
new file mode 100644
index 0000000000..25c170f34b
--- /dev/null
+++ b/packages/website/src/components/McpShowcase.tsx
@@ -0,0 +1,107 @@
+import clsx from 'clsx';
+import { useState, type FC } from 'react';
+
+import { CopyButton } from './CopyButton';
+
+type Tab = {
+  id: string;
+  label: string;
+  content: string;
+};
+
+const tabs: Tab[] = [
+  {
+    id: 'claude-code',
+    label: 'Claude Code',
+    content:
+      'claude mcp add nuclear --transport http http://127.0.0.1:8800/mcp',
+  },
+  {
+    id: 'opencode',
+    label: 'OpenCode',
+    content: `{
+  "mcp": {
+    "nuclear": {
+      "type": "remote",
+      "url": "http://127.0.0.1:8800/mcp"
+    }
+  }
+}`,
+  },
+  {
+    id: 'codex',
+    label: 'Codex CLI',
+    content: 'codex mcp add nuclear --url http://127.0.0.1:8800/mcp',
+  },
+  {
+    id: 'claude-desktop',
+    label: 'Claude Desktop / Cursor',
+    content: `{
+  "mcpServers": {
+    "nuclear": {
+      "url": "http://127.0.0.1:8800/mcp"
+    }
+  }
+}`,
+  },
+];
+
+export const McpShowcase: FC = () => {
+  const [activeId, setActiveId] = useState(tabs[0].id);
+  const activeTab = tabs.find((tab) => tab.id === activeId) ?? tabs[0];
+
+  return (
+    <section
+      id="mcp"
+      className="mx-auto flex w-full max-w-3xl flex-col items-center gap-6 px-4 py-16"
+    >
+      <h2 className="font-heading text-3xl font-black tracking-widest uppercase md:text-4xl">
+        MCP
+      </h2>
+      <p className="text-foreground max-w-prose text-center text-base leading-relaxed">
+        Nuclear has a built-in{' '}
+        <strong className="font-bold">Model Context Protocol</strong> server.
+        Connect your AI agent and let it control playback, search for music,
+        manage queues and playlists.
+      </p>
+
+      <div className="themed-border border-border bg-background-secondary shadow-shadow flex w-full flex-col overflow-hidden rounded-md font-mono">
+        <div className="border-border bg-background flex overflow-x-auto border-b-2">
+          {tabs.map((tab) => {
+            const isActive = tab.id === activeId;
+
+            return (
+              <button
+                key={tab.id}
+                type="button"
+                onClick={() => setActiveId(tab.id)}
+                className={clsx(
+                  'text-foreground cursor-pointer px-4 py-2 text-xs whitespace-nowrap transition',
+                  {
+                    'bg-primary font-bold': isActive,
+                  },
+                )}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="bg-background-secondary relative block p-6">
+          <pre className="items-center gap-2 overflow-x-auto rounded bg-transparent px-2 py-1 text-sm leading-relaxed">
+            <code className="text-foreground font-mono">
+              {activeTab.content}
+            </code>
+          </pre>
+          <CopyButton
+            text={activeTab.content}
+            className="absolute top-2 right-2"
+          >
+            Copy
+          </CopyButton>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/packages/website/src/components/Screenshots.astro b/packages/website/src/components/Screenshots.astro
deleted file mode 100644
index 04c5819bba..0000000000
--- a/packages/website/src/components/Screenshots.astro
+++ /dev/null
@@ -1,130 +0,0 @@
----
-import { Image } from 'astro:assets';
-
-import dashboardAqua from '../../../docs/.gitbook/assets/dashboard-aqua.png';
-import dashboardGreen from '../../../docs/.gitbook/assets/dashboard-green.png';
-import dashboardMain from '../../../docs/.gitbook/assets/dashboard-main.png';
-import dashboardMint from '../../../docs/.gitbook/assets/dashboard-mint.png';
-import dashboardOrange from '../../../docs/.gitbook/assets/dashboard-orange.png';
-import dashboardRed from '../../../docs/.gitbook/assets/dashboard-red.png';
-import dashboardViolet from '../../../docs/.gitbook/assets/dashboard-violet.png';
-import installedPlugins from '../../../docs/.gitbook/assets/installed-plugins.png';
-import logViewer from '../../../docs/.gitbook/assets/log-viewer.png';
-import playlists from '../../../docs/.gitbook/assets/playlists.png';
-import pluginStore from '../../../docs/.gitbook/assets/plugin-store.png';
-import preferences from '../../../docs/.gitbook/assets/preferences.png';
-import searchAlbums from '../../../docs/.gitbook/assets/search-albums.png';
-import searchArtists from '../../../docs/.gitbook/assets/search-artists.png';
-import whatsNew from '../../../docs/.gitbook/assets/whats-new.png';
-import Badge from './Badge.astro';
-import Box from './Box.astro';
-
-const themes = [
-  { src: dashboardViolet, name: 'Aurora', rotate: '-rotate-1' },
-  { src: dashboardAqua, name: 'Lagoon', rotate: 'rotate-[0.7deg]' },
-  { src: dashboardMint, name: 'Arctic Moss', rotate: '-rotate-[0.5deg]' },
-  { src: dashboardOrange, name: 'Canyon', rotate: 'rotate-1' },
-  { src: dashboardRed, name: 'Molten Core', rotate: '-rotate-[0.8deg]' },
-  { src: dashboardGreen, name: 'Midnight Terminal', rotate: 'rotate-[0.6deg]' },
-];
-
-const features = [
-  { src: searchArtists, label: 'Search artists', rotate: 'rotate-[0.8deg]' },
-  { src: searchAlbums, label: 'Search albums', rotate: '-rotate-[0.6deg]' },
-  { src: playlists, label: 'Playlists', rotate: '-rotate-1' },
-  { src: pluginStore, label: 'Plugin store', rotate: 'rotate-[0.7deg]' },
-  {
-    src: installedPlugins,
-    label: 'Installed plugins',
-    rotate: 'rotate-[0.5deg]',
-  },
-  { src: preferences, label: 'Preferences', rotate: '-rotate-[0.8deg]' },
-  { src: whatsNew, label: "What's new", rotate: '-rotate-[0.6deg]' },
-  { src: logViewer, label: 'Log viewer', rotate: 'rotate-1' },
-];
----
-
-<section
-  class="px-4 py-16 md:px-8 z-10 relative w-full max-w-5xl mx-auto flex flex-col items-center gap-16"
->
-  {/* Section A - Hero screenshot */}
-  <div class="w-full rotate-1">
-    <Box>
-      <Badge slot="badge">Screenshots</Badge>
-      <div class="leading-0">
-        <Image
-          src={dashboardMain}
-          alt="Nuclear music player dashboard"
-          widths={[960, 1280, 1920, 2972]}
-          sizes="(max-width: 640px) 90vw, (max-width: 1024px) 80vw, 960px"
-          class="w-full block"
-        />
-      </div>
-    </Box>
-  </div>
-
-  {/* Section B - Theme showcase */}
-  <div class="w-full">
-    <h3
-      class="font-heading font-black text-2xl md:text-3xl uppercase tracking-widest text-center mb-8"
-    >
-      Built-in themes
-    </h3>
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
-      {
-        themes.map((theme) => (
-          <div class:list={['flex flex-col items-center gap-2', theme.rotate]}>
-            <div class="themed-border border-border rounded-md shadow-shadow overflow-hidden bg-primary">
-              <Image
-                src={theme.src}
-                alt={`Nuclear dashboard with ${theme.name} theme`}
-                widths={[480, 720, 960]}
-                sizes="(max-width: 640px) 45vw, (max-width: 1024px) 30vw, 300px"
-                class="w-full block"
-              />
-            </div>
-            <span class="font-heading font-bold text-sm uppercase tracking-wider">
-              {theme.name}
-            </span>
-          </div>
-        ))
-      }
-    </div>
-  </div>
-
-  {/* Section C - Feature grid */}
-  <div class="w-full">
-    <h3
-      class="font-heading font-black text-2xl md:text-3xl uppercase tracking-widest text-center mb-8"
-    >
-      Features
-    </h3>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-5 md:gap-6 items-start">
-      {
-        features.map((feature) => (
-          <div
-            class:list={[
-              'themed-border border-border rounded-md shadow-shadow overflow-hidden bg-primary',
-              feature.rotate,
-            ]}
-          >
-            <div class="leading-0">
-              <Image
-                src={feature.src}
-                alt={feature.label}
-                widths={[640, 960, 1280]}
-                sizes="(max-width: 640px) 90vw, (max-width: 1024px) 45vw, 480px"
-                class="w-full block"
-              />
-            </div>
-            <div class="px-3 py-2 border-t border-border bg-background-secondary">
-              <span class="font-heading font-bold text-sm uppercase tracking-wider">
-                {feature.label}
-              </span>
-            </div>
-          </div>
-        ))
-      }
-    </div>
-  </div>
-</section>
diff --git a/packages/website/src/components/ThemeShowcase.astro b/packages/website/src/components/ThemeShowcase.astro
new file mode 100644
index 0000000000..f156450c05
--- /dev/null
+++ b/packages/website/src/components/ThemeShowcase.astro
@@ -0,0 +1,164 @@
+---
+import { Image } from 'astro:assets';
+
+import dashboardAqua from '../../../docs/.gitbook/assets/dashboard-aqua.png';
+import dashboardGreen from '../../../docs/.gitbook/assets/dashboard-green.png';
+import dashboardMint from '../../../docs/.gitbook/assets/dashboard-mint.png';
+import dashboardOrange from '../../../docs/.gitbook/assets/dashboard-orange.png';
+import dashboardRed from '../../../docs/.gitbook/assets/dashboard-red.png';
+import dashboardViolet from '../../../docs/.gitbook/assets/dashboard-violet.png';
+
+const topRow = [
+  { src: dashboardViolet, name: 'Aurora' },
+  { src: dashboardAqua, name: 'Lagoon' },
+  { src: dashboardMint, name: 'Arctic Moss' },
+];
+
+const bottomRow = [
+  { src: dashboardOrange, name: 'Canyon' },
+  { src: dashboardRed, name: 'Molten Core' },
+  { src: dashboardGreen, name: 'Midnight Terminal' },
+];
+
+const allThemes = [...topRow, ...bottomRow];
+---
+
+<div class="w-full">
+  <h3
+    class="font-heading mb-8 text-center text-2xl font-black tracking-widest uppercase md:text-3xl"
+  >
+    Built-in themes
+  </h3>
+
+  <div class="themes-cascade desktop">
+    {
+      allThemes.map((theme, index) => (
+        <div
+          class="theme-card themed-border border-border shadow-shadow bg-primary overflow-hidden rounded-md"
+          style={`--index: ${index};`}
+        >
+          <Image
+            src={theme.src}
+            alt={`Nuclear dashboard with ${theme.name} theme`}
+            widths={[720, 1080, 1440]}
+            sizes="(max-width: 1024px) 30vw, 320px"
+            quality={90}
+            class="block w-full"
+          />
+        </div>
+      ))
+    }
+  </div>
+
+  <div class="mobile-rows">
+    <div class="themes-cascade mobile-row">
+      {
+        topRow.map((theme, index) => (
+          <div
+            class="theme-card themed-border border-border shadow-shadow bg-primary overflow-hidden rounded-md"
+            style={`--index: ${index};`}
+          >
+            <Image
+              src={theme.src}
+              alt={`Nuclear dashboard with ${theme.name} theme`}
+              widths={[720, 1080, 1440]}
+              sizes="45vw"
+              quality={90}
+              class="block w-full"
+            />
+          </div>
+        ))
+      }
+    </div>
+    <div class="themes-cascade mobile-row reverse">
+      {
+        bottomRow.map((theme, index) => (
+          <div
+            class="theme-card themed-border border-border shadow-shadow bg-primary overflow-hidden rounded-md"
+            style={`--index: ${index};`}
+          >
+            <Image
+              src={theme.src}
+              alt={`Nuclear dashboard with ${theme.name} theme`}
+              widths={[720, 1080, 1440]}
+              sizes="45vw"
+              quality={90}
+              class="block w-full"
+            />
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</div>
+
+<style>
+  .themes-cascade {
+    --card-width: 320px;
+    --overlap: 200px;
+    --rotate-y: 25deg;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    perspective: 1400px;
+  }
+
+  .theme-card {
+    flex-shrink: 0;
+    width: var(--card-width);
+    margin-right: calc(-1 * var(--overlap));
+    transform: rotateY(calc(-1 * var(--rotate-y)));
+  }
+
+  .theme-card:last-child {
+    margin-right: 0;
+  }
+
+  .mobile-rows {
+    display: none;
+  }
+
+  .desktop {
+    display: flex;
+  }
+
+  @media (max-width: 1024px) {
+    .desktop {
+      display: none;
+    }
+
+    .mobile-rows {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .mobile-row {
+      --card-width: 220px;
+      --overlap: 140px;
+      --rotate-y: 22deg;
+      perspective: 1000px;
+    }
+
+    .mobile-row.reverse .theme-card {
+      transform: rotateY(var(--rotate-y));
+    }
+  }
+
+  @media (max-width: 640px) {
+    .mobile-row {
+      --card-width: 160px;
+      --overlap: 100px;
+      --rotate-y: 20deg;
+      perspective: 800px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .mobile-row {
+      --card-width: 140px;
+      --overlap: 85px;
+    }
+  }
+</style>
diff --git a/packages/website/src/components/Typewriter.tsx b/packages/website/src/components/Typewriter.tsx
index c5775c48cf..e457bfe8b1 100644
--- a/packages/website/src/components/Typewriter.tsx
+++ b/packages/website/src/components/Typewriter.tsx
@@ -6,19 +6,33 @@ const TYPE_SPEED = 70;
 const DELETE_SPEED = 40;
 const PAUSE_AFTER_TYPE = 2000;
 const PAUSE_AFTER_DELETE = 400;
+const INITIAL_TEXT = "that's free and open-source";
 
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const Typewriter = () => {
-  const [text, setText] = useState('');
+  const [text, setText] = useState(INITIAL_TEXT);
 
   useEffect(() => {
     let cancelled = false;
 
     const loop = async () => {
-      let index = 0;
+      await sleep(PAUSE_AFTER_TYPE);
+      for (let i = INITIAL_TEXT.length; i >= 0 && !cancelled; i--) {
+        setText(INITIAL_TEXT.slice(0, i));
+        await sleep(DELETE_SPEED);
+      }
+      await sleep(PAUSE_AFTER_DELETE);
+
+      let lastIndex = -1;
       while (!cancelled) {
-        const phrase = taglines[index % taglines.length];
+        let nextIndex: number;
+        do {
+          nextIndex = Math.floor(Math.random() * taglines.length);
+        } while (nextIndex === lastIndex && taglines.length > 1);
+        lastIndex = nextIndex;
+
+        const phrase = taglines[nextIndex];
 
         for (let i = 0; i <= phrase.length && !cancelled; i++) {
           setText(phrase.slice(0, i));
@@ -31,8 +45,6 @@ export const Typewriter = () => {
           await sleep(DELETE_SPEED);
         }
         await sleep(PAUSE_AFTER_DELETE);
-
-        index++;
       }
     };
 
diff --git a/packages/website/src/data/taglines.ts b/packages/website/src/data/taglines.ts
index ef0ea23623..7e889ddb1f 100644
--- a/packages/website/src/data/taglines.ts
+++ b/packages/website/src/data/taglines.ts
@@ -5,5 +5,11 @@ export const taglines = [
   'for Linux',
   'for Mac',
   'for Windows',
-  "that's free as in freedom",
+  "that's free and open source",
+  'for AI agents',
+  'with a built-in MCP',
+  'for music discovery',
+  'with themes',
+  'with a ton of plugins',
+  'with a built-in log viewer',
 ];
diff --git a/packages/website/src/data/version.ts b/packages/website/src/data/version.ts
index 22b47589bb..f0fc53cced 100644
--- a/packages/website/src/data/version.ts
+++ b/packages/website/src/data/version.ts
@@ -1,4 +1,4 @@
-export const version = '1.33.0';
+export const version = '1.35.0';
 export const versionTag = `v${version}`;
 export const releaseTag = `player@${version}`;
 export const releaseUrl = (filename: string) =>
diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro
index 83714be129..40f0e443e5 100644
--- a/packages/website/src/layouts/BaseLayout.astro
+++ b/packages/website/src/layouts/BaseLayout.astro
@@ -10,28 +10,64 @@ type Props = {
 const { title, description } = Astro.props;
 const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 const ogImageUrl = new URL('/images/social-banner.png', Astro.site);
+const siteUrl = Astro.site?.toString() ?? 'https://nuclearplayer.com/';
+const logoUrl = new URL('/images/logo-full-outlined.svg', Astro.site).toString();
+
+const organizationId = `${siteUrl}#organization`;
+const websiteId = `${siteUrl}#website`;
+const softwareId = `${siteUrl}#software`;
 
 const jsonLd = {
   '@context': 'https://schema.org',
-  '@type': 'SoftwareApplication',
-  name: 'Nuclear',
-  description,
-  url: Astro.site?.toString(),
-  applicationCategory: 'MultimediaApplication',
-  operatingSystem: 'Windows, macOS, Linux',
-  offers: {
-    '@type': 'Offer',
-    price: '0',
-    priceCurrency: 'USD',
-  },
-  license: 'https://www.gnu.org/licenses/agpl-3.0.html',
-  image: ogImageUrl.toString(),
-  screenshot: new URL('/images/social-banner.png', Astro.site).toString(),
+  '@graph': [
+    {
+      '@type': 'Organization',
+      '@id': organizationId,
+      name: 'Nuclear',
+      url: siteUrl,
+      logo: logoUrl,
+      sameAs: [
+        'https://github.com/nukeop/nuclear',
+        'https://fosstodon.org/@nuclearplayer',
+        'https://twitter.com/nuclear_player',
+        'https://discord.gg/JqPjKxE',
+      ],
+    },
+    {
+      '@type': 'WebSite',
+      '@id': websiteId,
+      url: siteUrl,
+      name: 'Nuclear Music Player',
+      description,
+      publisher: { '@id': organizationId },
+      inLanguage: 'en',
+    },
+    {
+      '@type': 'SoftwareApplication',
+      '@id': softwareId,
+      name: 'Nuclear',
+      description,
+      url: siteUrl,
+      applicationCategory: 'MultimediaApplication',
+      operatingSystem: 'Windows, macOS, Linux',
+      offers: {
+        '@type': 'Offer',
+        price: '0',
+        priceCurrency: 'USD',
+      },
+      license: 'https://www.gnu.org/licenses/agpl-3.0.html',
+      downloadUrl: 'https://github.com/nukeop/nuclear/releases',
+      image: ogImageUrl.toString(),
+      screenshot: ogImageUrl.toString(),
+      author: { '@id': organizationId },
+      publisher: { '@id': organizationId },
+    },
+  ],
 };
 ---
 
 <!doctype html>
-<html lang="en" class="scroll-smooth">
+<html lang="en" class="scroll-smooth overflow-x-clip">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -41,8 +77,16 @@ const jsonLd = {
     <link rel="icon" href="/favicon.ico" sizes="any" />
     <link rel="icon" href="/icon.png" type="image/png" />
     <link rel="apple-touch-icon" href="/icon.png" />
-    <meta name="theme-color" content="#ff9cb4" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#2a2022" media="(prefers-color-scheme: dark)" />
+    <meta
+      name="theme-color"
+      content="#ff9cb4"
+      media="(prefers-color-scheme: light)"
+    />
+    <meta
+      name="theme-color"
+      content="#2a2022"
+      media="(prefers-color-scheme: dark)"
+    />
 
     <!-- Open Graph -->
     <meta property="og:type" content="website" />
@@ -64,14 +108,7 @@ const jsonLd = {
     <!-- Structured Data -->
     <script type="application/ld+json" set:html={JSON.stringify(jsonLd)} />
 
-    <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap"
-      rel="stylesheet"
-    />
-
+    <link rel="preconnect" href="https://umami.gumblert.tech" />
     <script
       async
       defer
@@ -79,7 +116,7 @@ const jsonLd = {
       src="https://umami.gumblert.tech/umami.js"></script>
   </head>
   <body
-    class="bg-background text-foreground antialiased selection:bg-primary selection:text-primary-foreground font-sans"
+    class="bg-background-secondary text-foreground selection:bg-primary selection:text-primary-foreground overflow-x-clip font-sans antialiased"
   >
     <Header />
     <slot />
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index 6abff0791c..43de73cb70 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -1,7 +1,8 @@
 ---
-import Downloads from '../components/Downloads.astro';
+import FAQ from '../components/FAQ.astro';
+import Features from '../components/Features.astro';
 import Hero from '../components/Hero.astro';
-import Screenshots from '../components/Screenshots.astro';
+import { McpShowcase } from '../components/McpShowcase';
 import Testimonials from '../components/Testimonials.astro';
 import BaseLayout from '../layouts/BaseLayout.astro';
 
@@ -13,24 +14,30 @@ const description =
 ---
 
 <BaseLayout title={title} description={description}>
-  <main class="relative bg-background flex flex-col items-center">
-    <div
-      class="relative min-h-screen flex flex-col items-center justify-center w-full"
-    >
+  <main
+    class="bg-background-secondary relative flex w-full flex-col items-center overflow-x-clip"
+  >
+    <div class="relative flex w-full flex-col items-center justify-center">
       <div
-        class="absolute inset-0 bg-grid-pattern opacity-10 pointer-events-none"
+        class="bg-grid-pattern pointer-events-none absolute inset-0 opacity-10"
         aria-hidden="true"
       >
       </div>
       <div
-        class="absolute inset-0 bg-radial-fade pointer-events-none"
+        class="bg-radial-fade pointer-events-none absolute inset-0"
         aria-hidden="true"
       >
       </div>
       <Hero />
-      <Downloads />
     </div>
-    <Screenshots />
+    <section
+      id="features"
+      class="relative z-10 mx-auto flex w-full max-w-7xl flex-col items-center gap-16 px-4 py-16 md:px-8"
+    >
+      <Features />
+    </section>
+    <McpShowcase client:load />
     <Testimonials />
+    <FAQ />
   </main>
 </BaseLayout>
diff --git a/packages/website/src/styles/global.css b/packages/website/src/styles/global.css
index f3991ca801..685931185f 100644
--- a/packages/website/src/styles/global.css
+++ b/packages/website/src/styles/global.css
@@ -1,15 +1,16 @@
+@import '@fontsource-variable/dm-sans';
+@import '@fontsource-variable/dm-sans/wght-italic.css';
+@import '@fontsource-variable/bricolage-grotesque';
 @import '@nuclearplayer/tailwind-config';
 @source '../components';
 @source '../layouts';
 @source '../pages';
 
-@custom-variant prefers-dark (@media (prefers-color-scheme: dark));
-
 :root {
   --page-bg: oklch(100% 0 0);
-  --background: oklch(100% 0 0);
+  --primary: oklch(0.8 0.12 4.56);
+  --background: oklch(0.9163 0.0361 7.16);
   --background-secondary: oklch(100% 0 0);
-  --color-badge: oklch(0.9135 0.0475 1.69);
   --color-heading-accent: var(--primary);
   --color-heading-shadow: var(--foreground);
   --color-star: var(--foreground);
@@ -18,48 +19,6 @@
   --border-width: 2px;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark-mode-hidden {
-    display: none;
-  }
-  .dark-mode-block {
-    display: block;
-  }
-
-  :root {
-    --page-bg: oklch(0.22 0.03 5);
-    --background: oklch(0.22 0.03 5);
-    --background-secondary: oklch(0.27 0.035 5);
-    --background-input: oklch(0.15 0.02 5);
-    --foreground: oklch(0.9 0.008 5);
-    --foreground-secondary: oklch(0.78 0.1 5);
-    --foreground-input: oklch(0.93 0 0);
-    --primary: oklch(0.5 0.1 5);
-    --border: oklch(0.48 0.04 5);
-    --shadow-x: 0px;
-    --shadow-y: 0px;
-    --color-badge: oklch(0.35 0.1 5);
-    --color-heading-accent: oklch(0.5 0.1 5);
-    --color-heading-shadow: none;
-    --color-star: oklch(0.9553 0.134 112.76);
-    --color-star-bg: oklch(0.27 0.035 5);
-    --color-discord: oklch(0.45 0.13 273.85);
-    --border-width: 1px;
-  }
-
-  .bg-grid-pattern {
-    opacity: 0.06;
-  }
-
-  .btn-interactive:hover {
-    filter: brightness(1.3);
-  }
-
-  .btn-interactive:active {
-    filter: brightness(0.9);
-  }
-}
-
 .themed-border {
   border-width: var(--border-width);
   border-style: solid;
@@ -92,6 +51,7 @@
   from {
     transform: translateX(0);
   }
+
   to {
     transform: translateX(-50%);
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4afa5d108c..4e24d9edb5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,9 +32,12 @@ importers:
       lint-staged:
         specifier: ^16.1.4
         version: 16.4.0
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
       prettier-plugin-tailwindcss:
         specifier: ^0.8.0
-        version: 0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier@3.8.3)
+        version: 0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier-plugin-astro@0.14.1)(prettier@3.8.3)
       tailwindcss:
         specifier: ^4.1.11
         version: 4.2.4
@@ -106,7 +109,7 @@ importers:
         version: 2.6.1
       prettier-plugin-tailwindcss:
         specifier: ^0.8.0
-        version: 0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier@3.8.3)
+        version: 0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier-plugin-astro@0.14.1)(prettier@3.8.3)
       tailwind-csstree:
         specifier: ^0.3.0
         version: 0.3.1(@eslint/css@1.1.0)
@@ -794,18 +797,27 @@ importers:
       '@astrojs/sitemap':
         specifier: ^3.7.0
         version: 3.7.2
+      '@fontsource-variable/bricolage-grotesque':
+        specifier: ^5.2.10
+        version: 5.2.10
+      '@fontsource-variable/dm-sans':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@iconify-json/simple-icons':
         specifier: ^1.2.67
         version: 1.2.80
-      '@lucide/astro':
-        specifier: ^0.563.0
-        version: 0.563.0(astro@6.2.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))
       astro:
         specifier: ^6.0.0
         version: 6.2.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
       astro-icon:
         specifier: ^1.1.5
         version: 1.1.5
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.542.0
+        version: 0.542.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -815,7 +827,7 @@ importers:
     devDependencies:
       '@astrojs/check':
         specifier: ^0.9.6
-        version: 0.9.9(prettier@3.8.3)(typescript@5.9.3)
+        version: 0.9.9(prettier-plugin-astro@0.14.1)(prettier@3.8.3)(typescript@5.9.3)
       '@nuclearplayer/eslint-config':
         specifier: workspace:*
         version: link:../eslint-config
@@ -1375,6 +1387,12 @@ packages:
   '@floating-ui/utils@0.2.11':
     resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
 
+  '@fontsource-variable/bricolage-grotesque@5.2.10':
+    resolution: {integrity: sha512-5EDsCqgGpKVcJWE4sg9ydli+t5WM97mISYw5lla/Ev4z71FwXh1oN0YUU8xjkRW9+wBCGD9R+ntAvI8G4bUFJg==}
+
+  '@fontsource-variable/dm-sans@5.2.8':
+    resolution: {integrity: sha512-AxkvMTvNWgfrmlyjiV05vlHYJa+nRQCf1EfvIrQAPBpFJW0O9VTz7oAFr9S3lvbWdmnFoBk7yFqQL86u64nl2g==}
+
   '@fontsource/bricolage-grotesque@5.2.10':
     resolution: {integrity: sha512-V2xS+1P7C8IrSypXLUx/bLtX/LsTlYtV2k2CsU+S/0t8qepZ2hvKSlyJIx7Ub/iY8Bbnj+IjAuUF9nvFz+BbIg==}
 
@@ -1620,11 +1638,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@lucide/astro@0.563.0':
-    resolution: {integrity: sha512-X9fNJvRR6pLJfkIEAFQkizWaNVvcduunJoFyR3fwPu30Y6jOu5S9k4k7HTSk3ZrEfqK2eFEqrBqqWH4fwSNKCg==}
-    peerDependencies:
-      astro: ^4 || ^5
-
   '@mdx-js/react@3.1.1':
     resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
     peerDependencies:
@@ -4946,6 +4959,10 @@ packages:
     resolution: {integrity: sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==}
     engines: {node: '>=6.0.0'}
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
   prettier-plugin-tailwindcss@0.8.0:
     resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==}
     engines: {node: '>=20.19'}
@@ -5269,6 +5286,9 @@ packages:
     resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
     engines: {node: '>=18'}
 
+  s.color@0.0.15:
+    resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
+
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -5284,6 +5304,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass-formatter@0.7.9:
+    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
+
   sax@1.6.0:
     resolution: {integrity: sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==}
     engines: {node: '>=11.0.0'}
@@ -5512,6 +5535,9 @@ packages:
     resolution: {integrity: sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==}
     engines: {node: '>=12'}
 
+  suf-log@2.5.3:
+    resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
+
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -6325,9 +6351,9 @@ snapshots:
       '@csstools/css-tokenizer': 3.0.4
       lru-cache: 10.4.3
 
-  '@astrojs/check@0.9.9(prettier@3.8.3)(typescript@5.9.3)':
+  '@astrojs/check@0.9.9(prettier-plugin-astro@0.14.1)(prettier@3.8.3)(typescript@5.9.3)':
     dependencies:
-      '@astrojs/language-server': 2.16.7(prettier@3.8.3)(typescript@5.9.3)
+      '@astrojs/language-server': 2.16.7(prettier-plugin-astro@0.14.1)(prettier@3.8.3)(typescript@5.9.3)
       chokidar: 4.0.3
       kleur: 4.1.5
       typescript: 5.9.3
@@ -6344,7 +6370,7 @@ snapshots:
     dependencies:
       picomatch: 4.0.4
 
-  '@astrojs/language-server@2.16.7(prettier@3.8.3)(typescript@5.9.3)':
+  '@astrojs/language-server@2.16.7(prettier-plugin-astro@0.14.1)(prettier@3.8.3)(typescript@5.9.3)':
     dependencies:
       '@astrojs/compiler': 2.13.1
       '@astrojs/yaml2ts': 0.2.3
@@ -6366,6 +6392,7 @@ snapshots:
       vscode-uri: 3.1.0
     optionalDependencies:
       prettier: 3.8.3
+      prettier-plugin-astro: 0.14.1
     transitivePeerDependencies:
       - typescript
 
@@ -6864,6 +6891,10 @@ snapshots:
 
   '@floating-ui/utils@0.2.11': {}
 
+  '@fontsource-variable/bricolage-grotesque@5.2.10': {}
+
+  '@fontsource-variable/dm-sans@5.2.8': {}
+
   '@fontsource/bricolage-grotesque@5.2.10': {}
 
   '@fontsource/dm-sans@5.2.8': {}
@@ -7081,10 +7112,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@lucide/astro@0.563.0(astro@6.2.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3))':
-    dependencies:
-      astro: 6.2.1(@types/node@25.6.0)(jiti@2.6.1)(lightningcss@1.32.0)(rollup@4.60.1)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.3)
-
   '@mdx-js/react@3.1.1(@types/react@18.3.28)(react@18.3.1)':
     dependencies:
       '@types/mdx': 2.0.13
@@ -10984,11 +11011,18 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
-  prettier-plugin-tailwindcss@0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier@3.8.3):
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.13.1
+      prettier: 3.8.3
+      sass-formatter: 0.7.9
+
+  prettier-plugin-tailwindcss@0.8.0(@ianvs/prettier-plugin-sort-imports@4.7.1(prettier@3.8.3))(prettier-plugin-astro@0.14.1)(prettier@3.8.3):
     dependencies:
       prettier: 3.8.3
     optionalDependencies:
       '@ianvs/prettier-plugin-sort-imports': 4.7.1(prettier@3.8.3)
+      prettier-plugin-astro: 0.14.1
 
   prettier@3.8.3: {}
 
@@ -11345,6 +11379,8 @@ snapshots:
 
   run-applescript@7.1.0: {}
 
+  s.color@0.0.15: {}
+
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -11366,6 +11402,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass-formatter@0.7.9:
+    dependencies:
+      suf-log: 2.5.3
+
   sax@1.6.0: {}
 
   saxes@6.0.0:
@@ -11688,6 +11728,10 @@ snapshots:
 
   strip-indent@4.1.1: {}
 
+  suf-log@2.5.3:
+    dependencies:
+      s.color: 0.0.15
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
diff --git a/prettier.config.js b/prettier.config.js
index 54d92d4e41..128833634f 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -18,7 +18,16 @@ export default {
   importOrderParserPlugins: ['typescript', 'jsx'],
   plugins: [
     '@ianvs/prettier-plugin-sort-imports',
+    'prettier-plugin-astro',
     'prettier-plugin-tailwindcss',
   ],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+  ],
   tailwindFunctions: ['clsx', 'cn', 'cva'],
 };