From 351a3e8bda3dc323d66d9e0b64fd1d4f1c4900bd Mon Sep 17 00:00:00 2001
From: Ronald Urbina <140639086+ronalduQualabs@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:19:27 -0300
Subject: [PATCH] feat(site): new home page, docs, and design system (#566)

Co-authored-by: Darius Cepulis <dcepulis@mux.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
---
 .claude/skills/api-reference/SKILL.md         |   4 +-
 .../api-reference/references/demo-patterns.md |   8 +-
 .claude/skills/docs/patterns/code-examples.md |   8 +-
 .prettierignore                               |   4 +
 .prettierrc.json                              |  14 +
 .vscode/extensions.json                       |   1 +
 .vscode/settings.json                         |   9 +-
 .zed/settings.json                            |   4 +-
 biome.json                                    |  17 +
 package.json                                  |   5 +
 .../sandbox/templates/html-tailwind/main.ts   |   2 +-
 packages/sandbox/templates/html/main.ts       |   2 +-
 .../sandbox/templates/react-tailwind/main.tsx |   2 +-
 pnpm-lock.yaml                                | 149 ++++++-
 site/CLAUDE.md                                |   3 +-
 site/astro.config.mjs                         |   7 +-
 site/env.d.ts                                 |   1 +
 site/package.json                             |   9 +-
 .../public/built-bg-horizontal-line-black.svg |   3 +
 site/public/built-bg-horizontal-line-gray.svg |   3 +
 site/public/data-bar-black.svg                |   3 +
 site/public/data-bar-orange.svg               |   3 +
 site/public/data-bar-white.svg                |   3 +
 site/public/docs/demos/thumbnail/basic.vtt    |   6 +-
 site/public/horizontal-bar-orange.svg         |   3 +
 site/public/horizontal-bar-white.svg          |   3 +
 site/src/components/Aside.astro               |  34 +-
 site/src/components/Code/Shared.tsx           |   4 +-
 site/src/components/Code/createHighlighter.ts |   4 +-
 site/src/components/CopyMarkdownButton.tsx    |   4 +-
 site/src/components/DialNav.tsx               | 104 +++++
 site/src/components/FilmGrain/FilmGrain.tsx   |   2 +-
 site/src/components/Footer.astro              | 104 +++--
 site/src/components/FooterDocs.astro          |  92 ++++
 site/src/components/FooterEasterEgg.astro     |  34 +-
 site/src/components/FormattedDate.astro       |   8 +-
 site/src/components/HomePageDemo/index.tsx    |  28 --
 site/src/components/ImageRadioGroup.tsx       |  15 +-
 site/src/components/NavBar/MobileNav.tsx      |  81 ++--
 site/src/components/NavBar/NavBar.astro       |  73 ++--
 site/src/components/NavBar/NavBarDocs.astro   |  98 +++++
 site/src/components/Search/Search.astro       |  62 +--
 site/src/components/Search/Search.tsx         |   4 +-
 site/src/components/Select.tsx                |  17 +-
 site/src/components/Tabs.tsx                  |  79 +++-
 site/src/components/ThemeInit.astro           |  30 +-
 site/src/components/ThemeToggle.tsx           |  12 +-
 site/src/components/ToggleGroup.tsx           |  62 ++-
 site/src/components/Tooltip.tsx               |   3 +-
 .../src/components/blog/AuthorSocialLinks.tsx |   2 +-
 site/src/components/blog/BlogPagination.astro |  21 +-
 site/src/components/blog/BlogPostCard.astro   |  34 +-
 site/src/components/docs/DocsNavigation.astro |  14 +-
 site/src/components/docs/DocsSidebar.astro    |   8 +-
 .../docs/DocsSidebarRestoration.astro         |  44 +-
 site/src/components/docs/EditPageButton.astro |   9 +-
 site/src/components/docs/FrameworkCase.astro  |   4 +-
 site/src/components/docs/Selectors.tsx        |   6 +-
 site/src/components/docs/SidebarItem.astro    |  47 ++-
 site/src/components/docs/StyleCase.astro      |  14 +-
 site/src/components/docs/StyleInit.astro      |  32 +-
 .../TableOfContents.desktop.tsx               |   9 +-
 .../TableOfContents.mobile.tsx                |   4 +-
 .../docs/api-reference/ApiCSSVarsTable.astro  |  34 +-
 .../api-reference/ApiDataAttrsTable.astro     |  40 +-
 .../docs/api-reference/ApiPropsTable.astro    |  46 +-
 .../docs/api-reference/ApiStateTable.astro    |  40 +-
 .../docs/api-reference/CSSVarRow.astro        |   6 +-
 .../api-reference/ComponentReference.astro    | 231 ++++++----
 .../docs/api-reference/DataAttrRow.astro      |  21 +-
 .../docs/api-reference/DetailRow.astro        | 156 ++++---
 .../docs/api-reference/PropRow.astro          |  37 +-
 .../docs/api-reference/StateRow.astro         |  21 +-
 .../docs/api-reference/UtilParamsTable.astro  |  46 +-
 .../docs/api-reference/UtilReference.astro    | 106 +++--
 .../docs/api-reference/UtilReturnTable.astro  | 100 ++---
 site/src/components/docs/demos/Demo.astro     |  36 +-
 .../html/css/BasicUsage.astro                 |   2 +-
 .../html/css/BasicUsage.html                  |   2 +-
 .../react/css/BasicUsage.tsx                  |   2 +-
 .../demos/controls/html/css/BasicUsage.astro  |   2 +-
 .../demos/controls/html/css/BasicUsage.html   |   2 +-
 .../demos/controls/react/css/BasicUsage.tsx   |   2 +-
 .../create-player/react/css/BasicUsage.tsx    |   2 +-
 .../html/css/BasicUsage.astro                 |   2 +-
 .../html/css/BasicUsage.html                  |   2 +-
 .../react/css/BasicUsage.tsx                  |   2 +-
 .../html/css/BasicUsage.astro                 |   2 +-
 .../html/css/BasicUsage.html                  |   2 +-
 .../mute-button/html/css/BasicUsage.astro     |   2 +-
 .../mute-button/html/css/BasicUsage.html      |   2 +-
 .../mute-button/html/css/VolumeLevels.astro   |   2 +-
 .../mute-button/html/css/VolumeLevels.html    |   2 +-
 .../mute-button/react/css/BasicUsage.tsx      |   2 +-
 .../mute-button/react/css/VolumeLevels.tsx    |   2 +-
 .../pip-button/html/css/BasicUsage.astro      |   2 +-
 .../demos/pip-button/html/css/BasicUsage.html |   2 +-
 .../demos/pip-button/react/css/BasicUsage.tsx |   2 +-
 .../play-button/html/css/BasicUsage.astro     |   2 +-
 .../play-button/html/css/BasicUsage.html      |   2 +-
 .../play-button/react/css/BasicUsage.tsx      |   2 +-
 .../html/css/BasicUsage.astro                 |   2 +-
 .../html/css/BasicUsage.html                  |   2 +-
 .../react/css/BasicUsage.tsx                  |   2 +-
 .../html/css/BasicUsage.astro                 |   2 +-
 .../html/css/BasicUsage.html                  |   2 +-
 .../demos/popover/html/css/BasicUsage.astro   |   2 +-
 .../demos/popover/html/css/BasicUsage.html    |   2 +-
 .../demos/popover/react/css/BasicUsage.tsx    |   2 +-
 .../demos/poster/html/css/BasicUsage.astro    |   2 +-
 .../demos/poster/html/css/BasicUsage.html     |   4 +-
 .../demos/poster/react/css/BasicUsage.tsx     |   4 +-
 .../seek-button/html/css/BasicUsage.astro     |   2 +-
 .../seek-button/html/css/BasicUsage.html      |   2 +-
 .../seek-button/react/css/BasicUsage.tsx      |   2 +-
 .../demos/thumbnail/html/css/BasicUsage.astro |   2 +-
 .../demos/thumbnail/html/css/BasicUsage.html  |   2 +-
 .../thumbnail/html/css/JsonSpriteUsage.astro  |   2 +-
 .../thumbnail/html/css/JsonSpriteUsage.ts     |   6 +-
 .../demos/thumbnail/html/css/JsonUsage.astro  |   2 +-
 .../demos/thumbnail/html/css/JsonUsage.ts     |   6 +-
 .../demos/thumbnail/react/css/BasicUsage.tsx  |   2 +-
 .../thumbnail/react/css/JsonSpriteUsage.tsx   |   6 +-
 .../demos/thumbnail/react/css/JsonUsage.tsx   |   6 +-
 .../time-slider/html/css/WithParts.astro      |   2 +-
 .../demos/time-slider/html/css/WithParts.html |   2 +-
 .../demos/time-slider/react/css/WithParts.tsx |   2 +-
 .../demos/time/html/css/CurrentDuration.astro |   2 +-
 .../demos/time/html/css/CurrentDuration.html  |   2 +-
 .../demos/time/html/css/CurrentTime.astro     |   2 +-
 .../docs/demos/time/html/css/CurrentTime.html |   2 +-
 .../time/html/css/CustomNegativeSign.astro    |   2 +-
 .../time/html/css/CustomNegativeSign.html     |   2 +-
 .../demos/time/html/css/CustomSeparator.astro |   2 +-
 .../demos/time/html/css/CustomSeparator.html  |   2 +-
 .../docs/demos/time/html/css/Remaining.astro  |   2 +-
 .../docs/demos/time/html/css/Remaining.html   |   2 +-
 .../demos/time/react/css/CurrentDuration.tsx  |   2 +-
 .../docs/demos/time/react/css/CurrentTime.tsx |   2 +-
 .../time/react/css/CustomNegativeSign.tsx     |   2 +-
 .../demos/time/react/css/CustomSeparator.tsx  |   2 +-
 .../docs/demos/time/react/css/Remaining.tsx   |   2 +-
 .../demos/use-media/react/css/BasicUsage.tsx  |   2 +-
 .../demos/use-player/react/css/Selector.tsx   |   2 +-
 .../use-player/react/css/StoreAccess.tsx      |   2 +-
 .../demos/use-store/react/css/Selector.tsx    |   2 +-
 .../demos/use-store/react/css/StoreAccess.tsx |   2 +-
 .../volume-slider/html/css/WithParts.astro    |   2 +-
 .../volume-slider/html/css/WithParts.html     |   2 +-
 .../volume-slider/react/css/WithParts.tsx     |   2 +-
 site/src/components/frames/ContentWidth.astro |   4 +-
 site/src/components/frames/Minimal.astro      |   4 +-
 site/src/components/home/AnimatedBars.tsx     |  13 +
 .../components/home/Built/BuiltSection.astro  |  35 ++
 site/src/components/home/Built/DataViz.astro  |  83 ++++
 site/src/components/home/Built/Intro.astro    |  17 +
 site/src/components/home/Built/Marquee.astro  |  26 ++
 .../components/home/Built/SocialProof.astro   |  57 +++
 .../{HomePageDemo => home/Demo}/Base.tsx      |  18 +-
 site/src/components/home/Demo/Demo.tsx        |  38 ++
 .../{HomePageDemo => home/Demo}/Eject.tsx     |  37 +-
 site/src/components/home/FrameworkControl.tsx |  22 +
 .../components/home/GetStartedBanner.astro    |  48 +++
 site/src/components/home/Header.astro         |  64 +++
 site/src/components/home/HeroVideo.tsx        |  21 +-
 site/src/components/home/HomePageControls.tsx |  47 ---
 site/src/components/home/Roadmap.astro        | 127 ++++++
 site/src/components/home/SkinControl.tsx      |  22 +
 site/src/components/home/Sponsors.astro       | 106 +++++
 site/src/components/icons/Discord.tsx         |  19 -
 site/src/components/icons/GitHub.tsx          |  23 -
 .../src/components/icons/SocialProofLogos.tsx | 209 +++++++++
 site/src/components/icons/arrow.svg           |   4 +
 site/src/components/icons/check.svg           |   3 +
 site/src/components/icons/computer.svg        |   5 +
 site/src/components/icons/copy-icon.svg       |   7 +
 site/src/components/icons/dial-inner.svg      |   7 +
 site/src/components/icons/dial-outer.svg      |   7 +
 site/src/components/icons/discord.svg         |   4 +
 site/src/components/icons/dropdown-arrow.svg  |   3 +
 site/src/components/icons/github.svg          |   8 +
 site/src/components/icons/logo-docs.svg       |  13 +
 site/src/components/icons/logo-mono.svg       |  16 +
 site/src/components/icons/logo.svg            |   9 +
 site/src/components/icons/moon.svg            |   6 +
 site/src/components/icons/mux-logo-small.svg  |  21 +
 site/src/components/icons/mux-logo.svg        |  14 +
 .../components/icons/sponsors/brightcove.svg  |  22 +
 .../icons/sponsors/browserstack.svg           |  34 ++
 site/src/components/icons/sponsors/fastly.svg |   6 +
 .../src/components/icons/sponsors/netlify.svg |   8 +
 site/src/components/icons/sun.svg             |   7 +
 site/src/components/icons/triangle-arrow.svg  |   3 +
 .../installation/HTMLInstallTabs.tsx          |   2 +-
 .../installation/MuxUploaderPanel.tsx         |   8 +-
 .../installation/RendererPicker.tsx           |   4 +-
 .../installation/RendererSelect.tsx           |   6 +-
 .../installation/SkinPickerSection.astro      |   6 +-
 .../installation/UploaderOverlay.tsx          |  20 +-
 site/src/components/typography/A.astro        |   4 +-
 .../components/typography/Blockquote.astro    |   8 +-
 site/src/components/typography/Em.astro       |   4 +-
 site/src/components/typography/H1.astro       |  10 +-
 .../src/components/typography/H1Warning.astro |   3 +-
 site/src/components/typography/H2.astro       |  11 +-
 .../components/typography/H2Markdown.astro    |  10 +-
 site/src/components/typography/H3.astro       |  11 +-
 .../components/typography/H3Markdown.astro    |   6 +-
 site/src/components/typography/H4.astro       |   5 +-
 .../components/typography/H4Markdown.astro    |   6 +-
 site/src/components/typography/H5.astro       |   4 +-
 .../components/typography/H5Markdown.astro    |   6 +-
 site/src/components/typography/H6.astro       |   7 +-
 .../components/typography/H6Markdown.astro    |   6 +-
 site/src/components/typography/Hr.astro       |  13 +-
 site/src/components/typography/Img.astro      |   4 +-
 site/src/components/typography/Li.astro       |   4 +-
 .../components/typography/MarkdownCode.astro  |  20 +-
 site/src/components/typography/Ol.astro       |  16 +-
 site/src/components/typography/P.astro        |   7 +-
 site/src/components/typography/Pre.astro      |   8 +-
 site/src/components/typography/Strong.astro   |   4 +-
 site/src/components/typography/Table.astro    |  34 +-
 site/src/components/typography/Tbody.astro    |   2 +-
 site/src/components/typography/Td.astro       |   4 +-
 site/src/components/typography/Th.astro       |   7 +-
 site/src/components/typography/Thead.astro    |  10 +-
 site/src/components/typography/Tr.astro       |  10 +-
 site/src/components/typography/Ul.astro       |  16 +-
 site/src/components/typography/styles.ts      |   8 +-
 site/src/consts.ts                            |   7 +
 site/src/content/docs/reference/thumbnail.mdx |   4 +-
 .../docs/reference/write-references.mdx       |   4 +-
 .../react/FrostedSkin/FrostedSkinDemo.tsx     |   6 +-
 .../react/MinimalSkin/MinimalSkinDemo.tsx     |   6 +-
 site/src/hooks/useIntersection.ts             |  27 ++
 site/src/layouts/AuthResult.astro             |   6 +-
 site/src/layouts/Base.astro                   |  65 ++-
 site/src/layouts/Blog.astro                   |   4 +-
 site/src/layouts/Docs.astro                   |  45 +-
 site/src/layouts/ErrorPage.astro              |  47 ++-
 site/src/layouts/Markdown.astro               |   8 +-
 site/src/pages/404.astro                      |   7 +-
 site/src/pages/500.astro                      |   7 +-
 site/src/pages/auth/error.astro               |  41 +-
 site/src/pages/auth/success.astro             |  28 +-
 site/src/pages/blog/[...page].astro           |  35 +-
 site/src/pages/blog/[...slug].astro           |  33 +-
 site/src/pages/blog/authors/[author].astro    |  31 +-
 .../framework/[framework]/[...slug].astro     |  36 +-
 site/src/pages/index.astro                    | 109 +----
 site/src/styles/globals.css                   | 396 ++++++++++++------
 .../__tests__/renderInlineMarkdown.test.ts    |   6 +-
 site/src/utils/docs/renderInlineMarkdown.ts   |   2 +-
 site/src/utils/twMerge.ts                     |  21 +
 255 files changed, 3574 insertions(+), 1532 deletions(-)
 create mode 100644 .prettierignore
 create mode 100644 .prettierrc.json
 create mode 100644 site/public/built-bg-horizontal-line-black.svg
 create mode 100644 site/public/built-bg-horizontal-line-gray.svg
 create mode 100644 site/public/data-bar-black.svg
 create mode 100644 site/public/data-bar-orange.svg
 create mode 100644 site/public/data-bar-white.svg
 create mode 100644 site/public/horizontal-bar-orange.svg
 create mode 100644 site/public/horizontal-bar-white.svg
 create mode 100644 site/src/components/DialNav.tsx
 create mode 100644 site/src/components/FooterDocs.astro
 delete mode 100644 site/src/components/HomePageDemo/index.tsx
 create mode 100644 site/src/components/NavBar/NavBarDocs.astro
 create mode 100644 site/src/components/home/AnimatedBars.tsx
 create mode 100644 site/src/components/home/Built/BuiltSection.astro
 create mode 100644 site/src/components/home/Built/DataViz.astro
 create mode 100644 site/src/components/home/Built/Intro.astro
 create mode 100644 site/src/components/home/Built/Marquee.astro
 create mode 100644 site/src/components/home/Built/SocialProof.astro
 rename site/src/components/{HomePageDemo => home/Demo}/Base.tsx (74%)
 create mode 100644 site/src/components/home/Demo/Demo.tsx
 rename site/src/components/{HomePageDemo => home/Demo}/Eject.tsx (50%)
 create mode 100644 site/src/components/home/FrameworkControl.tsx
 create mode 100644 site/src/components/home/GetStartedBanner.astro
 create mode 100644 site/src/components/home/Header.astro
 delete mode 100644 site/src/components/home/HomePageControls.tsx
 create mode 100644 site/src/components/home/Roadmap.astro
 create mode 100644 site/src/components/home/SkinControl.tsx
 create mode 100644 site/src/components/home/Sponsors.astro
 delete mode 100644 site/src/components/icons/Discord.tsx
 delete mode 100644 site/src/components/icons/GitHub.tsx
 create mode 100644 site/src/components/icons/SocialProofLogos.tsx
 create mode 100644 site/src/components/icons/arrow.svg
 create mode 100644 site/src/components/icons/check.svg
 create mode 100644 site/src/components/icons/computer.svg
 create mode 100644 site/src/components/icons/copy-icon.svg
 create mode 100644 site/src/components/icons/dial-inner.svg
 create mode 100644 site/src/components/icons/dial-outer.svg
 create mode 100644 site/src/components/icons/discord.svg
 create mode 100644 site/src/components/icons/dropdown-arrow.svg
 create mode 100644 site/src/components/icons/github.svg
 create mode 100644 site/src/components/icons/logo-docs.svg
 create mode 100644 site/src/components/icons/logo-mono.svg
 create mode 100644 site/src/components/icons/logo.svg
 create mode 100644 site/src/components/icons/moon.svg
 create mode 100644 site/src/components/icons/mux-logo-small.svg
 create mode 100644 site/src/components/icons/mux-logo.svg
 create mode 100644 site/src/components/icons/sponsors/brightcove.svg
 create mode 100644 site/src/components/icons/sponsors/browserstack.svg
 create mode 100644 site/src/components/icons/sponsors/fastly.svg
 create mode 100644 site/src/components/icons/sponsors/netlify.svg
 create mode 100644 site/src/components/icons/sun.svg
 create mode 100644 site/src/components/icons/triangle-arrow.svg
 create mode 100644 site/src/hooks/useIntersection.ts
 create mode 100644 site/src/utils/twMerge.ts

diff --git a/.claude/skills/api-reference/SKILL.md b/.claude/skills/api-reference/SKILL.md
index ebf0a95e..88de6a6d 100644
--- a/.claude/skills/api-reference/SKILL.md
+++ b/.claude/skills/api-reference/SKILL.md
@@ -80,8 +80,8 @@ Create at least a BasicUsage demo in both HTML and React. Load `references/demo-
 - Follow BEM naming: `{framework}-{component}-{variant}__{element}`
 - CSS uses data-attribute selectors for state-based styling
 - React uses `render` prop for state-based rendering
-- Video source: `https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4`
-- Poster image: `https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg`
+- Video source: `https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4`
+- Poster image: `https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg`
 - Consider additional demos for features not covered by BasicUsage
 
 ### Step 5: Create MDX reference page
diff --git a/.claude/skills/api-reference/references/demo-patterns.md b/.claude/skills/api-reference/references/demo-patterns.md
index 56535131..5f599d7d 100644
--- a/.claude/skills/api-reference/references/demo-patterns.md
+++ b/.claude/skills/api-reference/references/demo-patterns.md
@@ -52,7 +52,7 @@ The `.astro` wrapper is required because only Astro `<script>` tags go through V
 ```html
 <video-player class="html-mute-button-basic">
     <video
-        src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
         autoplay
         muted
         playsinline
@@ -130,7 +130,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-mute-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
@@ -253,8 +253,8 @@ render={(props, state) => (
 
 ## Video Sources
 
-- **Video**: `https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4`
-- **Poster**: `https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg`
+- **Video**: `https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4`
+- **Poster**: `https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg`
 
 ## Base Button Styles
 
diff --git a/.claude/skills/docs/patterns/code-examples.md b/.claude/skills/docs/patterns/code-examples.md
index 850eba31..6c0c0597 100644
--- a/.claude/skills/docs/patterns/code-examples.md
+++ b/.claude/skills/docs/patterns/code-examples.md
@@ -33,7 +33,7 @@ function App() {
   return (
     <Player.Provider>
       <Player.Container>
-        <Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
         <PlayButton />
       </Player.Container>
     </Player.Provider>
@@ -88,7 +88,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="player">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
@@ -109,7 +109,7 @@ export default function BasicUsage() {
 ```html
 <video-player class="player">
   <video
-    src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+    src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
     autoplay
     muted
     playsinline
@@ -234,7 +234,7 @@ export default function App() {
   return (
     <Player.Provider>
       <Player.Container className="player">
-        <Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
         <PlayButton />
       </Player.Container>
     </Player.Provider>
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..91c9562e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,4 @@
+# Prettier is only used for Astro template formatting.
+# Biome handles everything else.
+*.*
+!*.astro
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..d1a1f0d6
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,14 @@
+{
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "./site/src/styles/globals.css",
+  "tailwindFunctions": ["clsx"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro",
+        "astroSkipFrontmatter": true
+      }
+    }
+  ]
+}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 4ec208c8..5daf6328 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,6 +4,7 @@
     "hyrious.import-cost",
     "streetsidesoftware.code-spell-checker",
     "DavidAnson.vscode-markdownlint",
+    "esbenp.prettier-vscode",
     "astro-build.astro-vscode",
     "unifiedjs.vscode-mdx"
   ]
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 762a064d..f5b3f676 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,8 @@
 {
   // We use Biome for linting and formatting.
   "eslint.enable": false,
-  "prettier.enable": false,
+  // Prettier is enabled only for Astro template formatting (biome handles frontmatter).
+  "prettier.enable": true,
   "editor.formatOnSave": true,
 
   // Auto fix
@@ -18,6 +19,12 @@
   "typescript.tsdk": "node_modules/typescript/lib",
 
   "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[css]": {
     "editor.defaultFormatter": "biomejs.biome"
   }
 }
diff --git a/.zed/settings.json b/.zed/settings.json
index 45a8efa4..f075eb8e 100644
--- a/.zed/settings.json
+++ b/.zed/settings.json
@@ -70,12 +70,12 @@
       "prettier": { "allowed": false }
     },
     "Astro": {
-      "formatter": { "language_server": { "name": "biome" } },
+      "formatter": "prettier",
       "code_actions_on_format": {
         "source.fixAll.biome": true,
         "source.organizeImports.biome": true
       },
-      "prettier": { "allowed": false }
+      "prettier": { "allowed": true }
     }
   }
 }
diff --git a/biome.json b/biome.json
index 3ed24a3d..bc8862f6 100644
--- a/biome.json
+++ b/biome.json
@@ -78,6 +78,23 @@
     }
   },
   "overrides": [
+    {
+      "includes": ["site/src/**", "!site/src/utils/twMerge.ts"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noRestrictedImports": {
+              "level": "error",
+              "options": {
+                "paths": {
+                  "tailwind-merge": "Use '@/utils/twMerge' instead — it's configured for our custom theme."
+                }
+              }
+            }
+          }
+        }
+      }
+    },
     {
       "includes": ["packages/element/**"],
       "linter": {
diff --git a/package.json b/package.json
index cc65b51a..42e7e653 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "link:aliases": "node scripts/link-aliases.mjs",
     "size": "node .github/scripts/bundle-size.js | node .github/scripts/bundle-size-report.js",
     "test": "turbo run test",
+    "format:astro": "prettier --write 'site/src/**/*.astro'",
     "typecheck": "tsc --build"
   },
   "devDependencies": {
@@ -43,6 +44,9 @@
     "@types/node": "^22.18.6",
     "esbuild": "^0.27.3",
     "lint-staged": "^16.2.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "react": "^18.0.0",
     "react-compiler-runtime": "^1.0.0",
     "react-dom": "^18.0.0",
@@ -56,6 +60,7 @@
     "commit-msg": "pnpm commitlint"
   },
   "lint-staged": {
+    "*.astro": "prettier --write",
     "*": "biome check --write --no-errors-on-unmatched"
   }
 }
diff --git a/packages/sandbox/templates/html-tailwind/main.ts b/packages/sandbox/templates/html-tailwind/main.ts
index 467b0262..dce2c1a0 100644
--- a/packages/sandbox/templates/html-tailwind/main.ts
+++ b/packages/sandbox/templates/html-tailwind/main.ts
@@ -9,7 +9,7 @@ import type { Skin } from '../types';
 
 const html = String.raw;
 
-const VIDEO_SRC = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4';
+const VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4';
 
 const skinTags: Record<Skin, string> = {
   default: 'video-skin-tailwind',
diff --git a/packages/sandbox/templates/html/main.ts b/packages/sandbox/templates/html/main.ts
index 4871f2ba..86c5d9e0 100644
--- a/packages/sandbox/templates/html/main.ts
+++ b/packages/sandbox/templates/html/main.ts
@@ -9,7 +9,7 @@ import type { Skin } from '../types';
 
 const html = String.raw;
 
-const VIDEO_SRC = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4';
+const VIDEO_SRC = 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4';
 
 const skinTags: Record<Skin, string> = {
   default: 'video-skin',
diff --git a/packages/sandbox/templates/react-tailwind/main.tsx b/packages/sandbox/templates/react-tailwind/main.tsx
index 6bccdcb8..050055a1 100644
--- a/packages/sandbox/templates/react-tailwind/main.tsx
+++ b/packages/sandbox/templates/react-tailwind/main.tsx
@@ -42,7 +42,7 @@ function App() {
 
       <Provider>
         <SkinComponent skin={skin} className="w-full aspect-video max-w-4xl mx-auto">
-          <Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" />
+          <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" />
         </SkinComponent>
       </Provider>
     </div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fb3b31f..80f96aef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,15 @@ importers:
       lint-staged:
         specifier: ^16.2.3
         version: 16.2.7
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1)
       react:
         specifier: ^18.0.0
         version: 18.3.1
@@ -494,7 +503,7 @@ importers:
         specifier: ^10.32.1
         version: 10.32.1(astro@5.16.5(@netlify/blobs@10.5.0)(@types/node@22.19.3)(@vercel/functions@2.2.13)(jiti@2.6.1)(lightningcss@1.31.1)(rollup@4.53.3)(tsx@4.21.0)(typescript@5.9.3)(yaml@2.8.2))
       '@tailwindcss/vite':
-        specifier: ^4.2.0
+        specifier: ^4.2.1
         version: 4.2.1(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       '@videojs/html':
         specifier: workspace:*
@@ -560,10 +569,10 @@ importers:
         specifier: ^3.28.0
         version: 3.30.0
       tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.4.0
+        specifier: ^3.5.0
+        version: 3.5.0
       tailwindcss:
-        specifier: ^4.2.0
+        specifier: ^4.2.1
         version: 4.2.1
       unist-util-visit:
         specifier: ^5.0.0
@@ -571,7 +580,7 @@ importers:
     devDependencies:
       '@astrojs/check':
         specifier: ^0.9.6
-        version: 0.9.6(prettier@3.8.1)(typescript@5.9.3)
+        version: 0.9.6(prettier-plugin-astro@0.14.1)(prettier@3.8.1)(typescript@5.9.3)
       '@netlify/edge-functions':
         specifier: ^3.0.3
         version: 3.0.3
@@ -608,6 +617,12 @@ importers:
       jsdom:
         specifier: ^27.0.0
         version: 27.3.0(postcss@8.5.6)
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
       sirv:
         specifier: ^3.0.2
         version: 3.0.2
@@ -623,6 +638,9 @@ importers:
       typescript-api-extractor:
         specifier: ^1.0.0-alpha.13
         version: 1.0.0-alpha.13(typescript@5.9.3)
+      vite-plugin-svgr:
+        specifier: ^4.5.0
+        version: 4.5.0(rollup@4.53.3)(typescript@5.9.3)(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2))
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
@@ -6033,6 +6051,65 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -6365,6 +6442,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  s.color@0.0.15:
+    resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
+
   safe-buffer@5.1.2:
     resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
 
@@ -6378,6 +6458,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass-formatter@0.7.9:
+    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
+
   sax@1.4.3:
     resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
 
@@ -6569,6 +6652,9 @@ packages:
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
+  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'}
@@ -6600,8 +6686,8 @@ packages:
   tabbable@6.4.0:
     resolution: {integrity: sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==}
 
-  tailwind-merge@3.4.0:
-    resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
   tailwindcss@4.1.18:
     resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
@@ -7093,6 +7179,11 @@ packages:
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
 
+  vite-plugin-svgr@4.5.0:
+    resolution: {integrity: sha512-W+uoSpmVkSmNOGPSsDCWVW/DDAyv+9fap9AZXBvWiQqrboJ08j2vh0tFxTD/LjwqwAd3yYSVJgm54S/1GhbdnA==}
+    peerDependencies:
+      vite: '>=2.6.0'
+
   vite@6.4.1:
     resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
@@ -7591,9 +7682,9 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
-  '@astrojs/check@0.9.6(prettier@3.8.1)(typescript@5.9.3)':
+  '@astrojs/check@0.9.6(prettier-plugin-astro@0.14.1)(prettier@3.8.1)(typescript@5.9.3)':
     dependencies:
-      '@astrojs/language-server': 2.16.3(prettier@3.8.1)(typescript@5.9.3)
+      '@astrojs/language-server': 2.16.3(prettier-plugin-astro@0.14.1)(prettier@3.8.1)(typescript@5.9.3)
       chokidar: 4.0.3
       kleur: 4.1.5
       typescript: 5.9.3
@@ -7606,7 +7697,7 @@ snapshots:
 
   '@astrojs/internal-helpers@0.7.5': {}
 
-  '@astrojs/language-server@2.16.3(prettier@3.8.1)(typescript@5.9.3)':
+  '@astrojs/language-server@2.16.3(prettier-plugin-astro@0.14.1)(prettier@3.8.1)(typescript@5.9.3)':
     dependencies:
       '@astrojs/compiler': 2.13.0
       '@astrojs/yaml2ts': 0.2.2
@@ -7628,6 +7719,7 @@ snapshots:
       vscode-uri: 3.1.0
     optionalDependencies:
       prettier: 3.8.1
+      prettier-plugin-astro: 0.14.1
     transitivePeerDependencies:
       - typescript
 
@@ -10575,7 +10667,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@22.19.3)(@vitest/ui@3.2.4)(happy-dom@18.0.1)(jiti@2.6.1)(jsdom@27.3.0(postcss@8.5.6))(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
 
   '@vitest/utils@3.2.4':
     dependencies:
@@ -13660,6 +13752,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.13.0
+      prettier: 3.8.1
+      sass-formatter: 0.7.9
+
+  prettier-plugin-tailwindcss@0.7.2(prettier-plugin-astro@0.14.1)(prettier@3.8.1):
+    dependencies:
+      prettier: 3.8.1
+    optionalDependencies:
+      prettier-plugin-astro: 0.14.1
+
   prettier@2.8.8: {}
 
   prettier@3.8.1: {}
@@ -14104,6 +14208,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  s.color@0.0.15: {}
+
   safe-buffer@5.1.2: {}
 
   safe-buffer@5.2.1: {}
@@ -14112,6 +14218,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass-formatter@0.7.9:
+    dependencies:
+      suf-log: 2.5.3
+
   sax@1.4.3: {}
 
   saxes@6.0.0:
@@ -14335,6 +14445,10 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.7
 
+  suf-log@2.5.3:
+    dependencies:
+      s.color: 0.0.15
+
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -14369,7 +14483,7 @@ snapshots:
 
   tabbable@6.4.0: {}
 
-  tailwind-merge@3.4.0: {}
+  tailwind-merge@3.5.0: {}
 
   tailwindcss@4.1.18: {}
 
@@ -14816,6 +14930,17 @@ snapshots:
       - tsx
       - yaml
 
+  vite-plugin-svgr@4.5.0(rollup@4.53.3)(typescript@5.9.3)(vite@7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.53.3)
+      '@svgr/core': 8.1.0(typescript@5.9.3)
+      '@svgr/plugin-jsx': 8.1.0(@svgr/core@8.1.0(typescript@5.9.3))
+      vite: 7.2.7(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+      - typescript
+
   vite@6.4.1(@types/node@22.19.3)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.25.12
diff --git a/site/CLAUDE.md b/site/CLAUDE.md
index 6a39b229..3ad0258f 100644
--- a/site/CLAUDE.md
+++ b/site/CLAUDE.md
@@ -85,6 +85,7 @@ The `intent:` variant is defined as:
 <div style="transform: rotate(45deg)">Content</div>
 
 <!-- ❌ WORSE: Arbitrary variant -->
+<div class="transform-[rotate(45deg)]">Content</div>
 <div class="[transform:rotate(45deg)]">Content</div>
 ```
 
@@ -98,7 +99,7 @@ import clsx from 'clsx';
 <button class={clsx(
   'text-base bg-dark-100',
   isActive && 'bg-dark-80',
-  isPrimary ? 'text-yellow' : 'text-light-100'
+  isPrimary ? 'text-bright-yellow' : 'text-light-100'
 )}>
   Click me
 </button>
diff --git a/site/astro.config.mjs b/site/astro.config.mjs
index 4852496a..6a454185 100644
--- a/site/astro.config.mjs
+++ b/site/astro.config.mjs
@@ -9,6 +9,7 @@ import sitemap from '@astrojs/sitemap';
 import sentry from '@sentry/astro';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig, envField, fontProviders } from 'astro/config';
+import svgr from 'vite-plugin-svgr';
 import checkV8Urls from './integrations/check-v8-urls';
 import llmsMarkdown from './integrations/llms-markdown';
 import pagefind from './integrations/pagefind';
@@ -86,8 +87,8 @@ export default defineConfig({
     syntaxHighlight: 'shiki',
     shikiConfig: {
       themes: {
-        light: 'gruvbox-light-hard',
-        dark: 'gruvbox-dark-medium',
+        light: 'gruvbox-dark-hard',
+        dark: 'gruvbox-dark-soft',
       },
       // TODO more shiki transformers
       transformers: [shikiTransformMetadata],
@@ -101,7 +102,7 @@ export default defineConfig({
   },
 
   vite: {
-    plugins: [tailwindcss()],
+    plugins: [tailwindcss(), svgr()],
     optimizeDeps: {
       exclude: ['@videojs/react', '@videojs/html'],
     },
diff --git a/site/env.d.ts b/site/env.d.ts
index 3ee6a312..75e53da0 100644
--- a/site/env.d.ts
+++ b/site/env.d.ts
@@ -1,4 +1,5 @@
 /// <reference types="astro/client" />
+/// <reference types="vite-plugin-svgr/client" />
 
 declare namespace App {
   interface Locals {
diff --git a/site/package.json b/site/package.json
index 14c6fb72..3e4ffd70 100644
--- a/site/package.json
+++ b/site/package.json
@@ -26,7 +26,7 @@
     "@nanostores/react": "^1.0.0",
     "@pagefind/default-ui": "^1.4.0",
     "@sentry/astro": "^10.32.1",
-    "@tailwindcss/vite": "^4.2.0",
+    "@tailwindcss/vite": "^4.2.1",
     "@videojs/html": "workspace:*",
     "@videojs/react": "workspace:*",
     "astro": "^5.14.4",
@@ -48,8 +48,8 @@
     "sharp": "^0.34.3",
     "shiki": "^3.13.0",
     "simple-git": "^3.28.0",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss": "^4.2.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
     "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
@@ -66,11 +66,14 @@
     "@vitest/ui": "^3.2.4",
     "babel-plugin-react-compiler": "1.0.0",
     "jsdom": "^27.0.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
     "sirv": "^3.0.2",
     "tsx": "^4.20.3",
     "turndown": "^7.2.2",
     "typescript": "^5.9.3",
     "typescript-api-extractor": "^1.0.0-alpha.13",
+    "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4"
   }
 }
diff --git a/site/public/built-bg-horizontal-line-black.svg b/site/public/built-bg-horizontal-line-black.svg
new file mode 100644
index 00000000..28598651
--- /dev/null
+++ b/site/public/built-bg-horizontal-line-black.svg
@@ -0,0 +1,3 @@
+<svg width="1476" height="1" viewBox="0 0 1476 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1476 0.5L5.29289e-05 0.5" stroke="#1e1d1d"/>
+</svg>
diff --git a/site/public/built-bg-horizontal-line-gray.svg b/site/public/built-bg-horizontal-line-gray.svg
new file mode 100644
index 00000000..341d3ef2
--- /dev/null
+++ b/site/public/built-bg-horizontal-line-gray.svg
@@ -0,0 +1,3 @@
+<svg width="1476" height="1" viewBox="0 0 1476 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1476 0.5L5.29289e-05 0.5" stroke="#403C38"/>
+</svg>
diff --git a/site/public/data-bar-black.svg b/site/public/data-bar-black.svg
new file mode 100644
index 00000000..83f7578a
--- /dev/null
+++ b/site/public/data-bar-black.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="40" viewBox="0 0 4 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0L0.500002 40" stroke="#EFE6D2"/>
+</svg>
diff --git a/site/public/data-bar-orange.svg b/site/public/data-bar-orange.svg
new file mode 100644
index 00000000..afd9bbd8
--- /dev/null
+++ b/site/public/data-bar-orange.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="40" viewBox="0 0 4 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0L0.500002 40" stroke="#FF6200"/>
+</svg>
diff --git a/site/public/data-bar-white.svg b/site/public/data-bar-white.svg
new file mode 100644
index 00000000..83f7578a
--- /dev/null
+++ b/site/public/data-bar-white.svg
@@ -0,0 +1,3 @@
+<svg width="4" height="40" viewBox="0 0 4 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 0L0.500002 40" stroke="#EFE6D2"/>
+</svg>
diff --git a/site/public/docs/demos/thumbnail/basic.vtt b/site/public/docs/demos/thumbnail/basic.vtt
index 771094e9..a9a98d4a 100644
--- a/site/public/docs/demos/thumbnail/basic.vtt
+++ b/site/public/docs/demos/thumbnail/basic.vtt
@@ -1,10 +1,10 @@
 WEBVTT
 
 00:00:00.000 --> 00:00:10.000
-https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=0
+https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=0
 
 00:00:10.000 --> 00:00:20.000
-https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=10
+https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=10
 
 00:00:20.000 --> 00:00:30.000
-https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=20
+https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=20
diff --git a/site/public/horizontal-bar-orange.svg b/site/public/horizontal-bar-orange.svg
new file mode 100644
index 00000000..4b2d4508
--- /dev/null
+++ b/site/public/horizontal-bar-orange.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="1" viewBox="0 0 32 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 0.5H1.19209e-07" stroke="#FF6200"/>
+</svg>
diff --git a/site/public/horizontal-bar-white.svg b/site/public/horizontal-bar-white.svg
new file mode 100644
index 00000000..06bbb19f
--- /dev/null
+++ b/site/public/horizontal-bar-white.svg
@@ -0,0 +1,3 @@
+<svg width="32" height="1" viewBox="0 0 32 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32 0.5H1.19209e-07" stroke="#BFB39E"/>
+</svg>
diff --git a/site/src/components/Aside.astro b/site/src/components/Aside.astro
index 046fb5bd..854c3f75 100644
--- a/site/src/components/Aside.astro
+++ b/site/src/components/Aside.astro
@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import { Info, Lightbulb, OctagonX, TriangleAlert } from 'lucide-react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type AsideType = 'note' | 'tip' | 'caution' | 'danger';
 
@@ -38,37 +38,39 @@ const renderTitle = title ?? defaultTitles[type];
 
 <aside
   class={twMerge(
-    clsx('w-full max-w-3xl mx-auto flex my-6 rounded-lg overflow-hidden border border-light-40 dark:border-dark-80 '),
+    clsx(
+      "mx-auto my-6 flex w-full max-w-3xl overflow-hidden rounded-xs border border-manila-75 dark:border-warm-gray",
+    ),
     className,
   )}
 >
   <div
     class={clsx(
-      'w-2 self-stretch',
-      type === 'note' && 'bg-blue',
-      type === 'tip' && 'bg-purple',
-      type === 'caution' && 'bg-orange',
-      type === 'danger' && 'bg-red',
+      "w-2 self-stretch",
+      type === "note" && "bg-magenta",
+      type === "tip" && "bg-magenta",
+      type === "caution" && "bg-orange",
+      type === "danger" && "bg-red",
     )}
   >
   </div>
-  <div class={clsx('flex-1 flex p-6 pl-4 gap-4')}>
-    <div class="shrink-0 mt-[3px]">
+  <div class={clsx("flex flex-1 gap-4 p-6 pl-4")}>
+    <div class="mt-0.75 shrink-0">
       <Icon
         size={18}
         className={clsx(
           clsx(
-            type === 'note' && 'text-blue',
-            type === 'tip' && ' text-purple',
-            type === 'caution' && 'text-orange',
-            type === 'danger' && 'text-red',
+            type === "note" && "text-magenta",
+            type === "tip" && "text-magenta",
+            type === "caution" && "text-orange",
+            type === "danger" && "text-red",
           ),
         )}
       />
     </div>
-    <div class="flex-1 min-w-0">
-      <p class="text-md font-semibold mb-2">{renderTitle}</p>
-      <div class="[&>.my-6]:my-2 [&>.my-12]:my-4 [&>*:last-child]:!mb-0">
+    <div class="min-w-0 flex-1">
+      <p class="mb-2 font-bold">{renderTitle}</p>
+      <div class="[&>*:last-child]:mb-0! [&>.my-12]:my-4 [&>.my-6]:my-2">
         <slot />
       </div>
     </div>
diff --git a/site/src/components/Code/Shared.tsx b/site/src/components/Code/Shared.tsx
index 1a572064..027ac8c4 100644
--- a/site/src/components/Code/Shared.tsx
+++ b/site/src/components/Code/Shared.tsx
@@ -12,7 +12,7 @@ export default function Shared({ code, lang, highlighter }: SharedProps) {
   const hast = highlighter.codeToHast(code, {
     lang,
     themes: {
-      light: 'gruvbox-light-hard',
+      light: 'gruvbox-dark-hard',
       dark: 'gruvbox-dark-soft',
     },
   });
@@ -39,7 +39,7 @@ export default function Shared({ code, lang, highlighter }: SharedProps) {
   const { class: codeClassName } = codeProps;
 
   return (
-    <pre className={clsx('shiki', preClassName)}>
+    <pre className={clsx('shiki text-manila-light', preClassName)}>
       <code className={clsx('font-mono text-code', codeClassName)} dangerouslySetInnerHTML={{ __html: html }} />
     </pre>
   );
diff --git a/site/src/components/Code/createHighlighter.ts b/site/src/components/Code/createHighlighter.ts
index 2ec9328d..411007d2 100644
--- a/site/src/components/Code/createHighlighter.ts
+++ b/site/src/components/Code/createHighlighter.ts
@@ -1,10 +1,10 @@
 import { createHighlighter as libCreateHighlighter } from 'shiki';
+import gruvboxDarkHard from 'shiki/themes/gruvbox-dark-hard.mjs';
 import gruvboxDarkSoft from 'shiki/themes/gruvbox-dark-soft.mjs';
-import gruvboxLightHard from 'shiki/themes/gruvbox-light-hard.mjs';
 
 export default function createHighlighter(config: Omit<Parameters<typeof libCreateHighlighter>[0], 'themes'>) {
   return libCreateHighlighter({
     ...config,
-    themes: [gruvboxLightHard, gruvboxDarkSoft],
+    themes: [gruvboxDarkHard, gruvboxDarkSoft],
   });
 }
diff --git a/site/src/components/CopyMarkdownButton.tsx b/site/src/components/CopyMarkdownButton.tsx
index f4f68d87..53d5d04a 100644
--- a/site/src/components/CopyMarkdownButton.tsx
+++ b/site/src/components/CopyMarkdownButton.tsx
@@ -87,8 +87,8 @@ export default function CopyMarkdownButton({ className, style }: CopyMarkdownBut
       disabled={disabled}
       onClick={handleCopy}
       className={clsx(
-        'relative border border-light-40 dark:border-dark-80 px-3 py-1 rounded-lg whitespace-nowrap text-sm',
-        state.status === 'idle' && 'intent:border-dark-40 dark:intent:border-dark-40',
+        'relative border border-manila-75 dark:border-soot bg-manila-50 dark:bg-warm-gray px-3 py-1 rounded-xs whitespace-nowrap text-p3',
+        state.status === 'idle' && 'intent:bg-manila-dark dark:intent:bg-soot',
         state.status === 'loading' ? 'opacity-70' : 'cursor-100',
         disabled ? 'cursor-wait' : 'cursor-pointer',
         className
diff --git a/site/src/components/DialNav.tsx b/site/src/components/DialNav.tsx
new file mode 100644
index 00000000..052c1ab5
--- /dev/null
+++ b/site/src/components/DialNav.tsx
@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+import DialInner from '@/components/icons/dial-inner.svg?react';
+import DialOuter from '@/components/icons/dial-outer.svg?react';
+
+type Link = { href: string; label: string; angle: number };
+
+export interface DialNavProps {
+  left: [Link, Link];
+  right: [Link, Link];
+}
+
+const TRANSITION_MS = 450;
+
+export default function DialNav({ left, right }: DialNavProps) {
+  const [activeAngle, setActiveAngle] = useState<number | null>(null);
+  const [activeHref, setActiveHref] = useState<string | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  function handleClick(e: React.MouseEvent, link: Link) {
+    e.preventDefault();
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    setActiveAngle(link.angle);
+    setActiveHref(link.href);
+    timeoutRef.current = setTimeout(() => {
+      window.location.href = link.href;
+    }, TRANSITION_MS);
+  }
+
+  function dotStyle(href: string): React.CSSProperties {
+    const active = activeHref === href;
+    return {
+      transition: 'background-color 0.3s ease, border-color 0.3s ease',
+      backgroundColor: active ? 'var(--color-orange)' : '',
+    };
+  }
+
+  // design
+  const needleStyle: React.CSSProperties = {
+    transformBox: 'view-box',
+    transformOrigin: '50% 50%',
+    transition: `transform ${TRANSITION_MS}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+    transform: activeAngle !== null ? `rotate(${activeAngle}deg)` : undefined,
+  };
+
+  return (
+    <div className="flex items-center gap-0">
+      {/* Left links */}
+      <div className="flex flex-col gap-2">
+        {left.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            onClick={(e) => handleClick(e, link)}
+            className={clsx(
+              'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
+              'justify-end pr-15 -mr-12 bg-manila-50 dark:bg-black'
+            )}
+          >
+            {link.label}
+            <span
+              className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
+              style={dotStyle(link.href)}
+            />
+          </a>
+        ))}
+      </div>
+
+      <a
+        key={left[0].href}
+        href={left[0].href}
+        onClick={(e) => handleClick(e, left[0])}
+        className="w-20 h-20 md:w-32 md:h-32 shrink-0 relative z-10 text-manila-light dark:text-faded-black"
+      >
+        <DialOuter
+          className="outline-8 rounded-full outline-manila-dark dark:outline-faded-black"
+          width={'100%'}
+          height={'auto'}
+        />
+        <DialInner style={needleStyle} className="absolute inset-0" width={'100%'} height={'auto'} />
+      </a>
+
+      <div className="flex flex-col gap-2">
+        {right.map((link) => (
+          <a
+            key={link.href}
+            href={link.href}
+            onClick={(e) => handleClick(e, link)}
+            className={clsx(
+              'flex rounded-xs min-w-44 items-center gap-2 px-6 py-6 text-h5 font-display-compact font-bold uppercase text-faded-black dark:text-manila-light',
+              'pl-15 -ml-12 bg-manila-50 dark:bg-black'
+            )}
+          >
+            <span
+              className="w-2.5 h-2.5 rounded-full border border-faded-black dark:border-manila-light"
+              style={dotStyle(link.href)}
+            />
+            {link.label}
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/site/src/components/FilmGrain/FilmGrain.tsx b/site/src/components/FilmGrain/FilmGrain.tsx
index dcfc4be4..60c99ed7 100644
--- a/site/src/components/FilmGrain/FilmGrain.tsx
+++ b/site/src/components/FilmGrain/FilmGrain.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 import texture from './texture.svg?raw';
 
 const textureUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(texture)}`;
diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
index ee70b20d..1c1d6550 100644
--- a/site/src/components/Footer.astro
+++ b/site/src/components/Footer.astro
@@ -1,9 +1,9 @@
 ---
-
 import { ArrowUpRight } from 'lucide-react';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
-import Discord from './icons/Discord';
-import GitHub from './icons/GitHub';
+import Discord from './icons/discord.svg?react';
+import GitHub from './icons/github.svg?react';
+import LogoMonoVersion from './icons/logo-mono.svg?react';
 import { ThemeToggle } from './ThemeToggle';
 
 type NavLink = {
@@ -12,7 +12,6 @@ type NavLink = {
   external?: boolean;
 };
 const navLinks: NavLink[] = [
-  { href: '/', label: 'Home' },
   { href: '/docs', label: 'Docs' },
   { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
@@ -24,57 +23,84 @@ type Props = {
 const { class: className } = Astro.props;
 ---
 
-<footer class:list={['border-t border-light-40 dark:border-dark-80 py-6 px-3 grid gap-3', className]}>
-  <div class="flex items-center justify-between flex-col sm:flex-row gap-3 mb-2 sm:mb-0">
-    <nav class="flex flex-col sm:flex-row gap-1">
-      <div class="flex justify-center sm:justify-start">
+<footer
+  class:list={[
+    "mx-auto mt-30 grid w-full max-w-305 gap-3 px-5 pb-11 md:mt-32 md:pt-0",
+    className,
+  ]}
+>
+  <nav
+    class="mb-2 items-start justify-between gap-3 border-faded-black pt-5 sm:mb-0 md:flex-row md:items-start md:border-t dark:border-manila-light"
+  >
+    <nav
+      class="flex flex-col gap-0 text-faded-black md:-ml-5 md:flex-row dark:text-manila-light"
+    >
+      <div
+        class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 md:justify-center md:border-0 md:pt-0 md:pb-0 dark:border-manila-light"
+      >
         {
           navLinks.map((link) => (
-            <a href={link.href} class="intent:underline px-3 py-2 inline-flex gap-1 items-center">
+            <a
+              href={link.href}
+              class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            >
               {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
             </a>
           ))
         }
       </div>
-      <div class="flex justify-center sm:justify-start">
-        <a
-          href={GITHUB_REPO_URL}
-          class="group px-3 py-2 inline-flex items-center"
-          aria-label="GitHub"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <GitHub
-            size="1em"
-            className="text-dark-80 dark:text-light-80 group-intent:text-dark-100 dark:group-intent:text-light-40"
-          />
-        </a>
+      <div
+        class="flex flex-1 justify-start gap-4 pt-5 pb-8 md:justify-center md:gap-0 md:py-0 md:pb-0"
+      >
         <a
           href={DISCORD_INVITE_URL}
-          class="group px-3 py-2 inline-flex items-center"
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
           aria-label="Discord"
           target="_blank"
           rel="noopener noreferrer"
         >
-          <Discord
-            size="1em"
-            className="text-dark-80 dark:text-light-80 group-intent:text-dark-100 dark:group-intent:text-light-40"
-          />
+          <Discord width="1.5em" height="1.5em" />
         </a>
+        <a
+          href={GITHUB_REPO_URL}
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase md:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          aria-label="GitHub"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <GitHub width="1.5em" height="1.5em" />
+        </a>
+        <div class="ml-auto">
+          <ThemeToggle client:idle />
+        </div>
       </div>
     </nav>
-    <ThemeToggle client:visible />
-  </div>
 
-  <p class="text-sm text-center sm:text-left text-dark-40 dark:text-light-40 px-3">
-    Video.js is a free and open source HTML5 <a href="/" class="intent:decoration-wavy">video player</a>.
-    <br />The term <strong>VIDEO.JS</strong> is a registered trademark of Brightcove Inc.
-    <br />
-    &copy; 2010&ndash;{new Date().getFullYear()} Video.js contributors &nbsp;|&nbsp; Sponsored by <a
-      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
-      class="underline intent:decoration-wavy"
+    <div
+      class="mt-10 flex flex-col-reverse justify-between gap-15 text-end md:mt-15 lg:flex-row"
     >
-      Mux
-    </a>
-  </p>
+      <div class="relative w-80 lg:w-92">
+        <LogoMonoVersion width="100%" />
+      </div>
+      <p
+        class="flex-1 text-left font-sans text-p2 text-faded-black lg:text-right dark:text-manila-light"
+      >
+        Video.js is a free and open source HTML5 <a
+          href="/"
+          class="underline intent:no-underline">video player.</a
+        >
+        <br />
+        Video hosting and streaming <a
+          href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+          class="underline intent:no-underline"
+          >sponsored by Mux
+        </a>
+
+        <br /><br />The term VIDEO.JS is a registered trademark of Brightcove
+        Inc.
+        <br />
+        &copy; 2010&ndash;{new Date().getFullYear()} Video.js contributors
+      </p>
+    </div>
+  </nav>
 </footer>
diff --git a/site/src/components/FooterDocs.astro b/site/src/components/FooterDocs.astro
new file mode 100644
index 00000000..53deed6e
--- /dev/null
+++ b/site/src/components/FooterDocs.astro
@@ -0,0 +1,92 @@
+---
+import { ArrowUpRight } from 'lucide-react';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
+import Discord from './icons/discord.svg?react';
+import GitHub from './icons/github.svg?react';
+import LogoMonoVersion from './icons/logo-mono.svg?react';
+import { ThemeToggle } from './ThemeToggle';
+
+type NavLink = {
+  href: string;
+  label: string;
+  external?: boolean;
+};
+const navLinks: NavLink[] = [
+  { href: '/docs', label: 'Docs' },
+  { href: '/blog', label: 'Blog' },
+  { href: '/privacy', label: 'Privacy' },
+];
+
+type Props = {
+  class?: string;
+};
+const { class: className } = Astro.props;
+---
+
+<footer class:list={["mt-30 grid gap-3 pb-11 lg:mt-32 lg:pt-0", className]}>
+  <nav
+    class="mb-2 items-start justify-between gap-3 border-faded-black px-5 pt-5 sm:mb-0 lg:flex-row lg:items-start lg:border-t lg:px-10 dark:border-warm-gray"
+  >
+    <nav
+      class="flex flex-col gap-0 text-faded-black lg:-ml-5 lg:flex-row dark:text-manila-light"
+    >
+      <div
+        class="flex justify-between border-t border-b border-faded-black pt-3 pb-3 lg:justify-center lg:border-0 lg:pt-0 lg:pb-0 dark:border-manila-light"
+      >
+        {
+          navLinks.map((link) => (
+            <a
+              href={link.href}
+              class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+            >
+              {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
+            </a>
+          ))
+        }
+      </div>
+      <div
+        class="flex flex-1 justify-start gap-4 pt-5 pb-8 lg:justify-center lg:gap-0 lg:py-0 lg:pb-0"
+      >
+        <a
+          href={DISCORD_INVITE_URL}
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          aria-label="Discord"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Discord width="1.5em" height="1.5em" />
+        </a>
+        <a
+          href={GITHUB_REPO_URL}
+          class="flex items-center rounded-xs px-2 py-2 font-display font-bold uppercase lg:px-5 intent:bg-manila-dark dark:intent:bg-warm-gray"
+          aria-label="GitHub"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <GitHub width="1.5em" height="1.5em" />
+        </a>
+        <div class="ml-auto">
+          <ThemeToggle client:idle />
+        </div>
+      </div>
+    </nav>
+
+    <p
+      class="mt-10 text-left font-sans text-p2 text-faded-black dark:text-manila-light"
+    >
+      Video.js is a free and open source HTML5 <a
+        href="/"
+        class="underline intent:no-underline">video player.</a
+      >
+      <br class="xl:hidden" />Video hosting and streaming <a
+        href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+        class="underline intent:no-underline"
+        >sponsored by Mux.
+      </a>
+      <br />
+      The term VIDEO.JS is a registered trademark of Brightcove Inc. <br
+        class="xl:hidden"
+      />&copy; 2010&ndash;{new Date().getFullYear()} Video.js contributors
+    </p>
+  </nav>
+</footer>
diff --git a/site/src/components/FooterEasterEgg.astro b/site/src/components/FooterEasterEgg.astro
index c6602df0..2429a9dc 100644
--- a/site/src/components/FooterEasterEgg.astro
+++ b/site/src/components/FooterEasterEgg.astro
@@ -1,14 +1,22 @@
-{/* TODO: hide this behind an overscroll animation........... somehow.  */}
-<div class="@container relative overflow-hidden not-supports-container:hidden">
-  {/* The weird bottom-0 approach I used here avoids some rounding problems on low-dpi screen  */}
-  <div class="absolute h-full bottom-0 left-0 right-0 bg-yellow"></div>
-  <div class="absolute h-3/4 bottom-0 left-0 right-0 bg-orange"></div>
-  <div class="absolute h-1/2 bottom-0 left-0 right-0 bg-red"></div>
-  <div class="absolute h-1/4 bottom-0 left-0 right-0 bg-purple"></div>
-  <div
-    class="relative font-semibold tracking-tighter text-light-80 dark:text-dark-100 select-none text-center"
-    style="font-size:28cqi;line-height:0.718;"
-  >
-    VideoJS
-  </div>
+---
+interface Props {
+  variant?: 'extra-short' | 'short' | 'normal';
+  class?: string;
+}
+const { variant = 'normal', class: className } = Astro.props;
+---
+
+<div
+  class:list={[
+    "relative grid",
+    variant === "extra-short" ? "h-20" : variant === "short" ? "h-25" : "h-52",
+    className,
+  ]}
+  style="grid-template-rows: 80fr 60fr 45fr 20fr 10fr"
+>
+  <div class="bg-bright-yellow"></div>
+  <div class="bg-gold"></div>
+  <div class="bg-orange"></div>
+  <div class="bg-red"></div>
+  <div class="bg-magenta"></div>
 </div>
diff --git a/site/src/components/FormattedDate.astro b/site/src/components/FormattedDate.astro
index 881955ab..716fd4e0 100644
--- a/site/src/components/FormattedDate.astro
+++ b/site/src/components/FormattedDate.astro
@@ -11,10 +11,10 @@ const { date, ...rest } = Astro.props;
 
 <time {...rest} datetime={date.toISOString()}>
   {
-    date.toLocaleDateString('en-us', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
+    date.toLocaleDateString("en-us", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
     })
   }
 </time>
diff --git a/site/src/components/HomePageDemo/index.tsx b/site/src/components/HomePageDemo/index.tsx
deleted file mode 100644
index d50a6dfc..00000000
--- a/site/src/components/HomePageDemo/index.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import clsx from 'clsx';
-import BaseDemo from './Base';
-import EjectDemo from './Eject';
-
-interface Props {
-  className?: string;
-}
-
-export default function HomePageDemo({ className }: Props) {
-  return (
-    <section className={clsx('grid gap-x-9 gap-y-6 lg:grid-cols-2', className)}>
-      <section className="grid grid-rows-subgrid row-span-2 mb-6 lg:mb-0">
-        <header className="max-w-3xl">
-          <h2 className="text-h5 font-semibold lg:text-h4 mb-1">Assemble your player</h2>
-          <p>Feel at home with your framework, skin, and media source</p>
-        </header>
-        <BaseDemo className="lg:h-100 m-0" />
-      </section>
-      <section className="grid grid-rows-subgrid row-span-2 mb-6 lg:mb-0">
-        <header className="max-w-3xl">
-          <h2 className="text-h5 font-semibold lg:text-h4 mb-1">Take full control</h2>
-          <p>Make your player truly your own with fully-editable components</p>
-        </header>
-        <EjectDemo className="lg:h-100 m-0" />
-      </section>
-    </section>
-  );
-}
diff --git a/site/src/components/ImageRadioGroup.tsx b/site/src/components/ImageRadioGroup.tsx
index cf54c3fd..16979de1 100644
--- a/site/src/components/ImageRadioGroup.tsx
+++ b/site/src/components/ImageRadioGroup.tsx
@@ -2,7 +2,7 @@ import { Radio } from '@base-ui/react/radio';
 import { RadioGroup } from '@base-ui/react/radio-group';
 import clsx from 'clsx';
 import type { ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 export interface ImageRadioOption<T = string> {
   value: T;
@@ -52,19 +52,18 @@ export default function ImageRadioGroup<T extends string = string>({
           >
             <div
               className={clsx(
-                'relative flex items-center justify-center aspect-square w-full rounded-xl',
-                'border border-light-40 dark:border-dark-80',
+                'relative flex items-center justify-center aspect-square w-full rounded-xs',
+                'border border-manila-75 dark:border-warm-gray',
                 isSelected
-                  ? 'bg-light-60 dark:bg-dark-90'
-                  : !isDisabled &&
-                      'bg-light-80 dark:bg-dark-100 group-intent:bg-light-60/50 dark:group-intent:bg-dark-90/50',
-                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow/50'
+                  ? 'bg-manila-75 dark:bg-warm-gray'
+                  : !isDisabled && 'group-intent:bg-manila-50 dark:group-intent:bg-soot',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bright-yellow/50'
               )}
             >
               <Radio.Indicator className="sr-only" />
               <div className="flex items-center justify-center w-full h-full">{option.image}</div>
             </div>
-            <span className={clsx('text-sm', isSelected && 'font-medium')}>{option.label}</span>
+            <span className={clsx('text-p3', isSelected && 'font-bold')}>{option.label}</span>
           </Radio.Root>
         );
       })}
diff --git a/site/src/components/NavBar/MobileNav.tsx b/site/src/components/NavBar/MobileNav.tsx
index 78ed7768..9a95028e 100644
--- a/site/src/components/NavBar/MobileNav.tsx
+++ b/site/src/components/NavBar/MobileNav.tsx
@@ -1,8 +1,8 @@
 import { Dialog } from '@base-ui/react/dialog';
 import clsx from 'clsx';
-import { ArrowUpRight, Menu, X } from 'lucide-react';
+import { ArrowUpRight } from 'lucide-react';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
-import FilmGrain from '../FilmGrain';
+import Logo from '../icons/logo.svg?react';
 import GetStartedLink from './GetStartedLink';
 
 interface NavLink {
@@ -15,24 +15,26 @@ interface NavLink {
 export interface MobileNavProps {
   navLinks: NavLink[];
   currentPath: string;
-  dark?: boolean;
   children?: React.ReactNode;
 }
 
-export default function MobileNav({ navLinks, currentPath, dark = false, children }: MobileNavProps) {
+export default function MobileNav({ navLinks, currentPath, children }: MobileNavProps) {
   return (
     <Dialog.Root modal>
       {/* Trigger button - hamburger menu */}
       <Dialog.Trigger
         className={clsx(
-          'md:hidden flex items-center justify-center p-3 h-full aspect-square',
-          dark
-            ? 'bg-light-80 text-dark-100 intent:bg-light-40'
-            : 'bg-dark-100 dark:bg-light-80 text-light-80 dark:text-dark-100 intent:bg-dark-80 dark:intent:bg-light-40'
+          'md:hidden',
+          'inline-flex items-stretch p-0.75 border-2 border-faded-black dark:border-manila-light rounded-xs'
         )}
         aria-label="Open navigation menu"
       >
-        <Menu size={24} />
+        <span
+          className="font-display tracking-normal leading-none uppercase font-bold text-manila-light bg-faded-black dark:bg-manila-light dark:text-faded-black px-4 py-2.5"
+          style={{ fontSize: '0.75rem' }}
+        >
+          Menu
+        </span>
       </Dialog.Trigger>
 
       {/* Portal renders outside DOM hierarchy */}
@@ -41,44 +43,38 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
         <Dialog.Popup
           className={clsx(
             'fixed inset-0 z-50 flex flex-col',
-            dark ? 'bg-dark-100 text-light-100 dark' : 'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100'
+            'bg-manila-light dark:bg-faded-black text-faded-black dark:text-manila-light'
           )}
         >
-          <FilmGrain currentPath={currentPath} />
           {/* Header with close button */}
-          <div
-            className={clsx(
-              'flex justify-between items-center pl-3 border-b',
-              dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80'
-            )}
-            style={{ height: 'var(--nav-h)' }}
-          >
+          <div className={clsx('flex justify-between items-center px-5 py-7')}>
             <Dialog.Title className="sr-only">Navigation</Dialog.Title>
-            <p className="text-h5 px-3">Video.js v10</p>
+            <Logo width="10rem" />
             <Dialog.Close
               className={clsx(
-                'flex items-center justify-center p-3 h-full aspect-square',
-                dark
-                  ? 'bg-light-80 text-dark-100 intent:bg-light-40'
-                  : 'bg-dark-100 text-light-80 intent:bg-dark-80 dark:bg-light-80 dark:text-dark-100 dark:intent:bg-light-40'
+                'inline-flex items-stretch p-0.75 border-2 border-faded-black dark:border-manila-light rounded-xs'
               )}
               aria-label="Close navigation menu"
             >
-              <X size={24} />
+              <span
+                className="font-display tracking-normal leading-none uppercase font-bold text-manila-light bg-faded-black dark:bg-manila-light dark:text-faded-black px-4 py-2.5"
+                style={{ fontSize: '0.75rem' }}
+              >
+                Close
+              </span>
             </Dialog.Close>
           </div>
 
-          <div className="overflow-y-scroll">
-            {/* Astro makes it hard to know if we have children, so, we use -mt-px to hide the border-b if we don't */}
-            <div className={clsx('-mt-px border-b', dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80')}>
-              {children}
-            </div>
-
+          <div className="overflow-y-auto">
+            <div className={clsx('')}>{children}</div>
             {/* Navigation links */}
-            <nav className="flex flex-col py-3">
+            <nav className="flex flex-col p-5">
               {navLinks.map((link) => {
                 const isActive = link.matchPath && currentPath.startsWith(link.matchPath);
-                const className = clsx('text-lg px-6 py-3', isActive ? 'underline' : 'intent:underline');
+                const className = clsx(
+                  'intent:bg-manila-dark dark:intent:bg-warm-gray flex items-center justify-center px-5 py-3.5 font-display uppercase font-bold text-h5 text-center border-t border-faded-black dark:border-manila-dark',
+                  isActive ? 'text-stroke-faded-black dark:text-stroke-manila-light' : ''
+                );
 
                 if (link.href === '/docs') {
                   return (
@@ -99,17 +95,28 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
                   </a>
                 );
               })}
-              <a href={GITHUB_REPO_URL} className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline">
-                GitHub <ArrowUpRight size="1em" />
-              </a>
               <a
                 href={DISCORD_INVITE_URL}
-                className="text-lg px-6 py-3 inline-flex items-center gap-1 intent:underline"
+                className={clsx(
+                  'intent:bg-manila-dark dark:intent:bg-warm-gray flex items-center justify-center px-5 py-3.5 font-display uppercase font-bold text-h5 text-center border-t border-faded-black dark:border-manila-dark'
+                )}
+                target="_blank"
               >
-                Discord <ArrowUpRight size="1em" />
+                Discord
+              </a>
+              <a
+                href={GITHUB_REPO_URL}
+                className={clsx(
+                  'intent:bg-manila-dark dark:intent:bg-warm-gray flex items-center justify-center px-5 py-3.5 font-display uppercase font-bold text-h5 text-center border-t border-faded-black dark:border-manila-dark',
+                  'border-b'
+                )}
+                target="_blank"
+              >
+                GitHub
               </a>
             </nav>
           </div>
+          <p className="text-center p-6 mt-auto text-p2">The open source player for the web</p>
         </Dialog.Popup>
       </Dialog.Portal>
     </Dialog.Root>
diff --git a/site/src/components/NavBar/NavBar.astro b/site/src/components/NavBar/NavBar.astro
index b1b0be2a..754e3e82 100644
--- a/site/src/components/NavBar/NavBar.astro
+++ b/site/src/components/NavBar/NavBar.astro
@@ -1,12 +1,11 @@
 ---
-
 import clsx from 'clsx';
 import { ArrowUpRight } from 'lucide-react';
-import Discord from '@/components/icons/Discord';
-import GitHub from '@/components/icons/GitHub';
-import Search from '@/components/Search';
+import Discord from '@/components/icons/discord.svg?react';
+import GitHub from '@/components/icons/github.svg?react';
+import Logo from '@/components/icons/logo.svg?react';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
-import FilmGrain from '../FilmGrain';
+import Search from '../Search';
 import GetStartedLink from './GetStartedLink';
 import MobileNav from './MobileNav';
 
@@ -34,30 +33,27 @@ const { class: className, dark = false } = Astro.props;
 
 <nav
   class:list={[
-    'pl-3 flex justify-between sticky top-0 z-40 border-b',
-    dark
-      ? 'bg-dark-100 text-light-80 border-dark-100 dark:border-dark-80'
-      : 'bg-light-80 border-light-40 dark:bg-dark-100 dark:border-dark-80',
+    "flex justify-between",
+    "mx-auto w-full max-w-305 items-center px-5 py-7 md:py-10",
     className,
   ]}
-  style="height: var(--nav-h);"
 >
-  {/* Grain */}
-  <FilmGrain currentPath={Astro.url.pathname} />
-  {/* Logo */}
-  <a href="/" class="flex items-center px-3 text-h5">Video.js v10</a>
-
-  <Search dark={dark} class="ml-auto mr-4 sm:self-center" />
-
+  <a
+    href="/"
+    class="flex w-40 items-center lg:w-56"
+    aria-label="Video.js v10 home"
+  >
+    <Logo width="100%" />
+  </a>
+  <Search class="mr-4 ml-auto sm:self-center" />
   {/* Desktop nav links */}
-  <div class="hidden md:flex -mb-px pr-3">
+  <div class="hidden md:flex">
     <GetStartedLink
       client:idle
       className={clsx(
-        'h-full flex items-center px-3 border-b gap-1',
-        isDocsActive ? 'border-current' : 'border-transparent intent:border-current',
+        "flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
       )}
-      aria-current={isDocsActive ? 'page' : undefined}
+      aria-current={isDocsActive ? "page" : undefined}
     >
       Docs
     </GetStartedLink>
@@ -66,39 +62,38 @@ const { class: className, dark = false } = Astro.props;
         <a
           href={link.href}
           class:list={[
-            'h-full flex items-center px-3 border-b gap-1',
-            link.matchPath && currentPath.startsWith(link.matchPath)
-              ? 'border-current'
-              : 'border-transparent intent:border-current',
+            "flex items-center rounded-xs px-5 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
           ]}
-          aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
         >
           {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
         </a>
       ))
     }
-    <a
-      href={GITHUB_REPO_URL}
-      class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
-      aria-label="GitHub"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      <GitHub size="1.1em" strokeWidth="0.0625em" />
-    </a>
     <a
       href={DISCORD_INVITE_URL}
-      class="h-full flex items-center px-3 border-b border-transparent intent:border-current"
+      class={clsx(
+        "flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
       aria-label="Discord"
       target="_blank"
       rel="noopener noreferrer"
     >
-      <Discord size="1.1em" strokeWidth="0.0625em" />
+      <Discord width="1.5em" height="1.5em" />
+    </a>
+    <a
+      href={GITHUB_REPO_URL}
+      class={clsx(
+        "flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
+      aria-label="GitHub"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <GitHub width="1.5em" height="1.5em" />
     </a>
   </div>
 
-  {/* Mobile nav */}
-  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath} dark={dark}>
+  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
     <slot name="mobile-nav" />
   </MobileNav>
 </nav>
diff --git a/site/src/components/NavBar/NavBarDocs.astro b/site/src/components/NavBar/NavBarDocs.astro
new file mode 100644
index 00000000..118ec130
--- /dev/null
+++ b/site/src/components/NavBar/NavBarDocs.astro
@@ -0,0 +1,98 @@
+---
+import clsx from 'clsx';
+import { ArrowUpRight } from 'lucide-react';
+import Discord from '@/components/icons/discord.svg?react';
+import GitHub from '@/components/icons/github.svg?react';
+import LogoDocs from '@/components/icons/logo-docs.svg?react';
+import Search from '@/components/Search';
+import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
+import GetStartedLink from './GetStartedLink';
+import MobileNav from './MobileNav';
+
+export interface Props {
+  class?: string;
+}
+
+type NavLink = {
+  href: string;
+  label: string;
+  matchPath: string | null;
+  external?: boolean;
+};
+const navLinks: NavLink[] = [
+  { href: '/docs', label: 'Docs', matchPath: '/docs' },
+  { href: '/blog', label: 'Blog', matchPath: '/blog' },
+];
+
+const currentPath = Astro.url.pathname;
+const isDocsActive = currentPath.startsWith('/docs');
+const otherNavLinks = navLinks.filter((link) => link.href !== '/docs');
+const { class: className } = Astro.props;
+---
+
+<nav
+  class:list={[
+    "sticky top-0 z-30 mx-auto flex w-full items-center justify-between border-b border-b-manila-75 bg-manila-light px-5 dark:border-warm-gray dark:bg-faded-black",
+    className,
+  ]}
+  style="height:var(--nav-h)"
+>
+  <a href="/" class="flex items-center" aria-label="Video.js v10 home">
+    <div class="relative w-40 md:w-49.5">
+      <LogoDocs width="100%" />
+    </div>
+  </a>
+  <Search class="mr-4 ml-auto sm:self-center" />
+  {/* Desktop nav links */}
+  <div class="hidden h-full md:flex">
+    <GetStartedLink
+      client:idle
+      className={clsx(
+        "flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+        isDocsActive ? "relative z-10 text-orange" : "",
+      )}
+      aria-current={isDocsActive ? "page" : undefined}
+    >
+      Docs
+      <hr class="absolute right-0 -bottom-px left-0 h-px bg-orange" />
+    </GetStartedLink>
+    {
+      otherNavLinks.map((link) => (
+        <a
+          href={link.href}
+          class:list={[
+            "flex items-center rounded-xs px-5 py-2 font-display text-h3 uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+          ]}
+        >
+          {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
+        </a>
+      ))
+    }
+    <a
+      href={DISCORD_INVITE_URL}
+      class={clsx(
+        "my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
+      aria-label="Discord"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Discord width="1.5em" height="1.5em" />
+    </a>
+    <a
+      href={GITHUB_REPO_URL}
+      class={clsx(
+        "my-1 flex items-center rounded-xs px-3 py-2 font-display font-bold uppercase intent:bg-manila-dark dark:intent:bg-warm-gray",
+      )}
+      aria-label="GitHub"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <GitHub width="1.5em" height="1.5em" />
+    </a>
+  </div>
+
+  <MobileNav client:idle navLinks={navLinks} currentPath={currentPath}>
+    <slot name="mobile-nav" />
+  </MobileNav>
+</nav>
diff --git a/site/src/components/Search/Search.astro b/site/src/components/Search/Search.astro
index a1a9ed4a..c2604775 100644
--- a/site/src/components/Search/Search.astro
+++ b/site/src/components/Search/Search.astro
@@ -16,28 +16,30 @@ const bundlePath = join(baseUrl, 'pagefind/');
 
 interface Props {
   class?: string;
-  dark: boolean;
 }
-const { class: className, dark } = Astro.props;
+const { class: className } = Astro.props;
 ---
 
 <SearchClient
   client:load
   className={clsx(
-    'inline-flex items-center gap-2 cursor-pointer min-h-6 px-2 sm:border intent:border-current rounded-full',
-    dark ? 'border-dark-80' : 'border-light-40 dark:border-dark-80',
+    "inline-flex min-h-6 cursor-pointer items-center gap-2 rounded-full border-faded-black px-2 sm:border dark:border-manila-dark intent:border-manila-dark dark:intent:border-warm-gray",
     className,
   )}
   baseUrl={baseUrl}
   bundlePath={bundlePath}
   searchId="pagefind-ui"
   searchStyle={{
-    '--search-icon-url': `url('data:image/svg+xml;utf8,${encodeURIComponent(searchIconString)}')`,
+    "--search-icon-url": `url('data:image/svg+xml;utf8,${encodeURIComponent(searchIconString)}')`,
   } as React.CSSProperties}
 >
-  <SearchIcon class="w-4 h-4 sm:w-3 sm:h-3" />
-  <kbd data-platform-key="default" class="font-sans text-sm hidden sm:inline">Ctrl K</kbd>
-  <kbd data-platform-key="mac" class="font-sans text-sm hidden sm:inline">⌘K</kbd>
+  <SearchIcon class="h-4 w-4 sm:h-3 sm:w-3" />
+  <kbd data-platform-key="default" class="hidden font-display text-h4 sm:inline"
+    >Ctrl K</kbd
+  >
+  <kbd data-platform-key="mac" class="hidden font-display text-h4 sm:inline"
+    >⌘K</kbd
+  >
 </SearchClient>
 
 {
@@ -50,35 +52,39 @@ const { class: className, dark } = Astro.props;
 }
 <script is:inline>
   (() => {
-    const defaultPlatformKey = document.querySelector('kbd[data-platform-key="default"]');
-    const macPlatformKey = document.querySelector('kbd[data-platform-key="mac"]');
+    const defaultPlatformKey = document.querySelector(
+      'kbd[data-platform-key="default"]',
+    );
+    const macPlatformKey = document.querySelector(
+      'kbd[data-platform-key="mac"]',
+    );
     if (/Mac|iPhone|iPod|iPad/i.test(navigator.platform)) {
-      if (defaultPlatformKey) defaultPlatformKey.style.display = 'none';
+      if (defaultPlatformKey) defaultPlatformKey.style.display = "none";
     } else {
-      if (macPlatformKey) macPlatformKey.style.display = 'none';
+      if (macPlatformKey) macPlatformKey.style.display = "none";
     }
   })();
 </script>
 
 <style is:global>
-  @import url('@pagefind/default-ui/css/ui.css');
+  @import url("@pagefind/default-ui/css/ui.css");
 
   #pagefind-ui {
     --pagefind-ui-scale: 1;
-    --pagefind-ui-primary: var(--color-yellow);
-    --pagefind-ui-text: var(--color-dark-100);
-    --pagefind-ui-background: var(--color-light-100);
-    --pagefind-ui-border: var(--color-light-40);
+    --pagefind-ui-primary: var(--color-gold);
+    --pagefind-ui-text: var(--color-faded-black);
+    --pagefind-ui-background: var(--color-manila-50);
+    --pagefind-ui-border: var(--color-manila-75);
     --pagefind-ui-tag: green;
     --pagefind-ui-border-width: 1px;
-    --pagefind-ui-border-radius: var(--radius-lg);
+    --pagefind-ui-border-radius: var(--radius-xs);
     --pagefind-ui-font: inherit;
   }
 
   .dark #pagefind-ui {
-    --pagefind-ui-text: var(--color-light-80);
-    --pagefind-ui-background: var(--color-dark-100);
-    --pagefind-ui-border: var(--color-dark-80);
+    --pagefind-ui-text: var(--color-manila-light);
+    --pagefind-ui-background: var(--color-warm-gray);
+    --pagefind-ui-border: var(--color-soot);
   }
 
   #pagefind-ui .pagefind-ui__form::before {
@@ -86,10 +92,10 @@ const { class: className, dark } = Astro.props;
     mask-image: var(--search-icon-url);
   }
   #pagefind-ui .pagefind-ui__search-input {
-    font-size: var(--text-lg);
-    line-height: var(--text-lg--line-height);
-    letter-spacing: var(--text-lg--letter-spacing);
-    font-weight: var(--text-lg--font-weight);
+    font-size: var(--text-p2);
+    line-height: var(--text-p2--line-height);
+    letter-spacing: var(--text-p2--letter-spacing);
+    font-weight: var(--text-p2--font-weight);
   }
   #pagefind-ui .pagefind-ui__filter-block {
     border-bottom: solid 1px var(--pagefind-ui-border);
@@ -99,14 +105,14 @@ const { class: className, dark } = Astro.props;
   }
   #pagefind-ui .pagefind-ui__result-title,
   #pagefind-ui .pagefind-ui__filter-name {
-    font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-bold);
   }
   #pagefind-ui .pagefind-ui__result-nested .pagefind-ui__result-link::before {
     font-weight: var(--font-weight-normal);
     font-size: 0.9em;
   }
   #pagefind-ui mark {
-    background-color: var(--color-yellow);
-    color: var(--color-dark-100);
+    background-color: var(--color-gold);
+    color: var(--color-faded-black);
   }
 </style>
diff --git a/site/src/components/Search/Search.tsx b/site/src/components/Search/Search.tsx
index 6c58483b..e766865f 100644
--- a/site/src/components/Search/Search.tsx
+++ b/site/src/components/Search/Search.tsx
@@ -72,12 +72,12 @@ export default function Search({ children, className, baseUrl, bundlePath, searc
         {children}
       </Dialog.Trigger>
       <Dialog.Portal>
-        <Dialog.Backdrop className="fixed inset-0 flex items-start justify-center bg-dark-110/20 backdrop-blur-xs z-50">
+        <Dialog.Backdrop className="fixed inset-0 flex items-start justify-center bg-faded-black/20 backdrop-blur-xs z-50">
           <Dialog.Popup
             initialFocus={false} // pagefind.autofocus = true
             id={searchId}
             ref={searchRef}
-            className="w-full max-w-5xl mx-4 mb-4 p-4 rounded-3xl bg-light-80 dark:bg-dark-110 overflow-y-scroll overflow-x-hidden"
+            className="w-full max-w-5xl mx-4 mb-4 p-4 rounded-xs bg-manila-light dark:bg-faded-black dark:border-warm-gray border-manila-75 border overflow-y-scroll overflow-x-hidden"
             style={{
               minHeight: '50svh',
               maxHeight: '75svh',
diff --git a/site/src/components/Select.tsx b/site/src/components/Select.tsx
index 7f8eb6dc..bced7152 100644
--- a/site/src/components/Select.tsx
+++ b/site/src/components/Select.tsx
@@ -1,7 +1,8 @@
 import { Select as BaseSelect } from '@base-ui/react/select';
 import clsx from 'clsx';
-import { Check, ChevronDown } from 'lucide-react';
-import { twMerge } from 'tailwind-merge';
+import Check from '@/components/icons/check.svg?react';
+import DropdownArrow from '@/components/icons/dropdown-arrow.svg?react';
+import { twMerge } from '@/utils/twMerge';
 
 export interface SelectOption<T = string> {
   value: T | null;
@@ -31,7 +32,7 @@ export function Select<T extends string = string>({
       <BaseSelect.Trigger
         className={twMerge(
           clsx(
-            'inline-flex items-center gap-2 text-left bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg text-sm p-2'
+            'inline-flex items-center gap-2 bg-manila-50 dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot border border-manila-dark dark:border-warm-gray rounded-xs text-p3 p-2 text-left'
           ),
           className
         )}
@@ -41,7 +42,7 @@ export function Select<T extends string = string>({
         <BaseSelect.Value className="flex-1 min-w-0 truncate" />
         &nbsp;
         <BaseSelect.Icon>
-          <ChevronDown size={12} />
+          <DropdownArrow width={'1rem'} />
         </BaseSelect.Icon>
       </BaseSelect.Trigger>
 
@@ -49,7 +50,7 @@ export function Select<T extends string = string>({
         <BaseSelect.Positioner sideOffset={4} className="z-50">
           <BaseSelect.Popup
             className={clsx(
-              'border border-light-40 dark:border-dark-80 rounded-lg bg-light-60 dark:bg-dark-80 shadow-xl text-sm',
+              'border border-manila-dark dark:border-soot rounded-xs bg-manila-light dark:bg-soot shadow-xl text-p3',
               'overflow-y-auto'
             )}
             style={
@@ -69,13 +70,13 @@ export function Select<T extends string = string>({
                     'flex items-center gap-2 p-2',
                     option.disabled
                       ? 'opacity-50 cursor-default'
-                      : 'cursor-pointer intent:bg-light-80 dark:intent:bg-dark-100',
-                    option.value === value && 'bg-light-80 dark:bg-dark-100'
+                      : 'cursor-pointer intent:bg-manila-75 dark:intent:bg-warm-gray',
+                    option.value === value && 'bg-manila-75 dark:bg-warm-gray'
                   )}
                 >
                   <BaseSelect.ItemText>{option.label}</BaseSelect.ItemText>
                   <BaseSelect.ItemIndicator className="ml-auto inline-flex items-center">
-                    <Check size={16} />
+                    <Check width={'1rem'} />
                   </BaseSelect.ItemIndicator>
                 </BaseSelect.Item>
               ))}
diff --git a/site/src/components/Tabs.tsx b/site/src/components/Tabs.tsx
index 20c94500..3fa701d6 100644
--- a/site/src/components/Tabs.tsx
+++ b/site/src/components/Tabs.tsx
@@ -16,21 +16,25 @@
 
 import clsx from 'clsx';
 
-import { Check, Copy } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import useIsHydrated from '@/utils/useIsHydrated';
 
 import CopyButton from './CopyButton';
+import CopyIcon from './icons/copy-icon.svg?react';
+
+export type TabsVariant = 'expanded' | 'compact';
 
 interface TabsRootProps {
   children: React.ReactNode;
   maxWidth?: boolean;
   className?: string;
   id?: string;
+  variant?: TabsVariant;
 }
-export function TabsRoot({ children, maxWidth = true, className, id: propId }: TabsRootProps) {
+export function TabsRoot({ children, maxWidth = true, className, id: propId, variant = 'compact' }: TabsRootProps) {
   const ref = useRef<HTMLDivElement>(null);
   const isHydrated = useIsHydrated();
   /**
@@ -71,9 +75,8 @@ export function TabsRoot({ children, maxWidth = true, className, id: propId }: T
       ref={ref}
       className={twMerge(
         clsx(
-          'rounded-lg overflow-hidden border border-light-40 dark:border-dark-80',
-          'bg-light-100 dark:bg-dark-110 flex flex-col',
-          'my-6',
+          'overflow-hidden flex flex-col my-6 border border-faded-black dark:border-manila-dark rounded-xs bg-manila-light dark:bg-faded-black',
+          variant === 'compact' && 'border px-2.5 pb-2.5',
           maxWidth && 'w-full max-w-3xl mx-auto',
           className
         )
@@ -88,11 +91,19 @@ export function TabsRoot({ children, maxWidth = true, className, id: propId }: T
 interface TabsListProps {
   label: string;
   children: React.ReactNode;
+  variant?: TabsVariant;
 }
-export function TabsList({ label, children }: TabsListProps) {
+export function TabsList({ label, children, variant = 'compact' }: TabsListProps) {
   return (
-    <div className="w-full border-b border-light-40 dark:border-dark-80 flex bg-light-80 dark:bg-dark-100 overflow-x-scroll not-content">
-      <ul data-orientation="horizontal" aria-label={label} className="flex list-none p-0 m-0">
+    <div className={clsx('w-full flex items-center p-0 h-12', variant === 'compact' ? 'p-0' : 'px-2.5')}>
+      <ul
+        data-orientation="horizontal"
+        aria-label={label}
+        className={clsx(
+          'flex list-none p-0 m-0',
+          variant === 'compact' ? 'gap-0 border-y border-l border-manila-75' : 'gap-5 px-2.5'
+        )}
+      >
         {children}
       </ul>
       <CopyButton
@@ -100,10 +111,12 @@ export function TabsList({ label, children }: TabsListProps) {
           container: `[data-tabs-root]`,
           target: '[role="tabpanel"]:not([hidden])',
         }}
-        className="ml-auto sticky right-0 border-l border-light-40 dark:border-dark-80 h-9 w-9 flex items-center justify-center not-disabled:intent:bg-light-100 dark:not-disabled:intent:bg-dark-110 cursor-pointer disabled:cursor-wait"
-        copied={<Check size={16} />}
+        className={clsx(
+          'ml-auto sticky right-0 h-7 px-2.5 flex items-center justify-center cursor-pointer disabled:cursor-wait intent:bg-warm-gray rounded-xs'
+        )}
+        copied={<Check size={20} />}
       >
-        <Copy size={16} />
+        <CopyIcon width="1.25rem" height="1.25rem" />
       </CopyButton>
     </div>
   );
@@ -113,8 +126,9 @@ interface TabProps {
   value: string;
   children: React.ReactNode;
   initial?: boolean;
+  variant?: TabsVariant;
 }
-export function Tab({ value, children, initial }: TabProps) {
+export function Tab({ value, children, initial, variant = 'compact' }: TabProps) {
   const isHydrated = useIsHydrated();
   const ref = useRef<HTMLButtonElement>(null);
   const [isActive, setIsActive] = useState(initial);
@@ -207,7 +221,7 @@ export function Tab({ value, children, initial }: TabProps) {
   }, []);
 
   return (
-    <li key={value} role="presentation" className="flex">
+    <li key={value} role="presentation" className={clsx('flex', variant === 'compact' && 'border-r border-manila-75')}>
       <button
         ref={ref}
         type="button"
@@ -218,14 +232,31 @@ export function Tab({ value, children, initial }: TabProps) {
         onKeyDown={onKeyDown}
         data-value={value}
         className={clsx(
-          'flex items-center h-9 px-4 py-2 text-sm',
-          'border-x border-light-40 dark:border-dark-80',
-          'first:-ml-px last:-mr-px -mx-[0.5px] no-underline',
-          isActive ? 'bg-light-100 dark:bg-dark-110' : 'bg-light-80 dark:bg-dark-100',
-          isHydrated ? 'cursor-pointer intent:bg-light-100 dark:intent:bg-dark-110' : 'cursor-wait'
+          'group flex items-center gap-2 text-p3',
+          'no-underline',
+          variant === 'expanded' && 'uppercase font-display',
+          variant === 'expanded' && isActive && 'text-orange',
+          variant === 'compact' && 'px-2.5 z-0 h-7',
+          variant === 'compact' && isActive
+            ? 'bg-manila-50 dark:bg-warm-gray'
+            : 'intent:bg-manila-dark dark:intent:bg-soot',
+          isHydrated ? 'cursor-pointer' : 'cursor-wait'
         )}
       >
-        {children}
+        {variant === 'expanded' && (
+          <span
+            className={clsx(
+              'w-3 h-3 rounded-full border group-hover:bg-manila-dark',
+              variant === 'expanded' && 'border-faded-black dark:border-manila-light',
+              isActive && 'bg-orange group-hover:bg-orange'
+            )}
+          />
+        )}
+        <span className="relative">
+          {/* to prevent layout shift on state change, we have an invisible bold version of the text preserving space */}
+          <span className="font-bold invisible">{children}</span>
+          <span className={clsx('absolute top-0 left-0', isActive && 'font-bold')}>{children}</span>
+        </span>
       </button>
     </li>
   );
@@ -236,8 +267,9 @@ interface TabsPanelProps {
   children: React.ReactNode;
   initial?: boolean;
   className?: string;
+  variant?: TabsVariant;
 }
-export function TabsPanel({ value, children, initial, className }: TabsPanelProps) {
+export function TabsPanel({ value, children, initial, className, variant = 'compact' }: TabsPanelProps) {
   const ref = useRef<HTMLDivElement>(null);
   const [isActive, setIsActive] = useState(initial);
 
@@ -272,7 +304,10 @@ export function TabsPanel({ value, children, initial, className }: TabsPanelProp
       role="tabpanel"
       hidden={!isActive}
       data-value={value}
-      className={twMerge(clsx('overflow-scroll p-6 max-h-96 flex-1'), className)}
+      className={twMerge(
+        clsx('overflow-scroll p-6 max-h-96 flex-1', variant === 'compact' && 'bg-faded-black dark:bg-soot'),
+        className
+      )}
     >
       {children}
     </div>
diff --git a/site/src/components/ThemeInit.astro b/site/src/components/ThemeInit.astro
index 4640865d..e750e2ff 100644
--- a/site/src/components/ThemeInit.astro
+++ b/site/src/components/ThemeInit.astro
@@ -5,29 +5,35 @@ import { THEME_KEY } from '@/consts';
 {/* Dark mode initialization script - runs before paint to prevent FOUC */}
 <script is:inline define:vars={{ localStorageKey: THEME_KEY }}>
   if (
-    typeof localStorage !== 'undefined' &&
-    typeof document !== 'undefined' &&
-    typeof document.documentElement !== 'undefined'
+    typeof localStorage !== "undefined" &&
+    typeof document !== "undefined" &&
+    typeof document.documentElement !== "undefined"
   ) {
     let localStorageValue = localStorage[localStorageKey];
-    const isValidKey = localStorageValue === 'light' || localStorageValue === 'dark' || localStorageValue === 'system';
+    const isValidKey =
+      localStorageValue === "light" ||
+      localStorageValue === "dark" ||
+      localStorageValue === "system";
     if (!localStorageValue || !isValidKey) {
-      localStorage[localStorageKey] = 'system';
-      localStorageValue = 'system';
+      localStorage[localStorageKey] = "system";
+      localStorageValue = "system";
     }
     let isDark = false;
-    if (localStorageValue === 'dark') {
-      document.documentElement.classList.add('dark');
+    if (localStorageValue === "dark") {
+      document.documentElement.classList.add("dark");
       isDark = true;
-    } else if (localStorageValue === 'system') {
-      if (typeof window.matchMedia !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
+    } else if (localStorageValue === "system") {
+      if (
+        typeof window.matchMedia !== "undefined" &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        document.documentElement.classList.add("dark");
         isDark = true;
       }
     }
     const themeColorMeta = document.querySelector('meta[name="theme-color"]');
     if (themeColorMeta) {
-      themeColorMeta.setAttribute('content', isDark ? '#393836' : '#ebe4c1');
+      themeColorMeta.setAttribute("content", isDark ? "#393836" : "#ebe4c1");
     }
   }
 </script>
diff --git a/site/src/components/ThemeToggle.tsx b/site/src/components/ThemeToggle.tsx
index 50bbd731..c6a05301 100644
--- a/site/src/components/ThemeToggle.tsx
+++ b/site/src/components/ThemeToggle.tsx
@@ -1,16 +1,17 @@
-import { Monitor, Moon, Sun } from 'lucide-react';
-
 import { useEffect, useState } from 'react';
 import { THEME_KEY } from '@/consts';
+import Computer from './icons/computer.svg?react';
+import Moon from './icons/moon.svg?react';
+import Sun from './icons/sun.svg?react';
 import ToggleGroup from './ToggleGroup';
 
 type Preference = 'system' | 'light' | 'dark';
 type Theme = 'light' | 'dark';
 
 const themeOptions = [
-  { value: 'system' as const, label: <Monitor size={14} aria-hidden="true" />, 'aria-label': 'System' },
-  { value: 'light' as const, label: <Sun size={14} aria-hidden="true" />, 'aria-label': 'Light' },
-  { value: 'dark' as const, label: <Moon size={14} aria-hidden="true" />, 'aria-label': 'Dark' },
+  { value: 'system' as const, label: <Computer width="1.5rem" aria-hidden="true" />, 'aria-label': 'System' },
+  { value: 'light' as const, label: <Sun width="1.5rem" aria-hidden="true" />, 'aria-label': 'Light' },
+  { value: 'dark' as const, label: <Moon width="1.5rem" aria-hidden="true" />, 'aria-label': 'Dark' },
 ];
 
 function initPreference(): Preference {
@@ -90,6 +91,7 @@ export function ThemeToggle() {
         if (values.length > 0) setPreference(values[0]);
       }}
       options={themeOptions}
+      minimal
     />
   );
 }
diff --git a/site/src/components/ToggleGroup.tsx b/site/src/components/ToggleGroup.tsx
index 3fe6256f..f9a59bf6 100644
--- a/site/src/components/ToggleGroup.tsx
+++ b/site/src/components/ToggleGroup.tsx
@@ -1,7 +1,8 @@
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Fragment } from 'react';
+import { twMerge } from '@/utils/twMerge';
 
 export interface ToggleOption<T = string> {
   value: T;
@@ -19,6 +20,7 @@ export interface ToggleGroupProps<T = string> {
   disabled?: boolean;
   'aria-label'?: string;
   multiple?: boolean;
+  minimal?: boolean;
 }
 
 export default function ToggleGroup<T extends string = string>({
@@ -30,6 +32,7 @@ export default function ToggleGroup<T extends string = string>({
   disabled,
   'aria-label': ariaLabel,
   multiple = false,
+  minimal,
 }: ToggleGroupProps<T>) {
   return (
     <BaseToggleGroup
@@ -37,38 +40,51 @@ export default function ToggleGroup<T extends string = string>({
       onValueChange={onChange}
       disabled={disabled}
       className={twMerge(
-        'inline-flex items-center gap-1 bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg p-1',
+        minimal ? 'flex gap-0' : 'grid max-w-95 mx-auto',
+        'w-full items-stretch p-0.75 border rounded-xs',
         className
       )}
       aria-label={ariaLabel}
       multiple={multiple}
+      style={{ gridTemplateColumns: '1fr auto 1fr' }}
     >
-      {options.map((option) => {
+      {options.map((option, index) => {
         const isPressed = value.includes(option.value as T);
         const isDisabled = disabled || option.disabled;
+        const isLast = index === options.length - 1;
 
         return (
-          <Toggle
-            key={option.value}
-            value={option.value}
-            disabled={isDisabled}
-            className={twMerge(
-              clsx(
-                'relative',
-                'flex items-center gap-1.5 px-2.5 py-1.5 rounded text-sm',
-                isDisabled ? 'cursor-wait opacity-50' : 'cursor-pointer',
-                isPressed
-                  ? 'bg-light-80 dark:bg-dark-100'
-                  : !isDisabled
-                    ? 'intent:bg-light-80/50 dark:intent:bg-dark-100/50'
-                    : ''
-              ),
-              toggleClassName
+          <Fragment key={option.value as string}>
+            <Toggle
+              value={option.value}
+              disabled={isDisabled}
+              className={twMerge(
+                clsx(
+                  'relative',
+                  'flex items-center justify-center font-display tracking-normal leading-none uppercase font-bold',
+                  minimal ? 'px-3 py-2' : 'px-4 py-3',
+                  'text-(length:--text) md:text-h4',
+                  isDisabled ? 'cursor-wait opacity-50' : 'cursor-pointer',
+                  isPressed
+                    ? 'bg-faded-black dark:bg-manila-light text-manila-light dark:text-faded-black'
+                    : 'bg-transparent'
+                ),
+                toggleClassName
+              )}
+              style={{ '--text': '0.75rem' } as React.CSSProperties}
+              aria-label={option['aria-label']}
+            >
+              {option.label}
+            </Toggle>
+            {!isLast && minimal && <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />}
+            {!isLast && !minimal && (
+              <span className="flex px-0.75 gap-0.75 h-full">
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+              </span>
             )}
-            aria-label={option['aria-label']}
-          >
-            {option.label}
-          </Toggle>
+          </Fragment>
         );
       })}
     </BaseToggleGroup>
diff --git a/site/src/components/Tooltip.tsx b/site/src/components/Tooltip.tsx
index d08e7213..f5f41aa6 100644
--- a/site/src/components/Tooltip.tsx
+++ b/site/src/components/Tooltip.tsx
@@ -32,13 +32,12 @@ export function Tooltip({ content, children, side = 'top', sideOffset = 5, class
         <BaseTooltip.Positioner side={side} sideOffset={sideOffset}>
           <BaseTooltip.Popup
             className={clsx(
-              'bg-dark-100 dark:bg-dark-90 text-light-80 dark:text-light-100 text-sm px-3 py-2 rounded-lg shadow-lg',
+              'bg-manila-50 dark:bg-soot text-p3 px-3 py-2 rounded-xs border border-manila-75 dark:border-warm-gray',
               'z-50 max-w-xs',
               className
             )}
           >
             {content}
-            <BaseTooltip.Arrow className="fill-dark-100 dark:fill-dark-90" />
           </BaseTooltip.Popup>
         </BaseTooltip.Positioner>
       </BaseTooltip.Portal>
diff --git a/site/src/components/blog/AuthorSocialLinks.tsx b/site/src/components/blog/AuthorSocialLinks.tsx
index 0db7ca43..755e052f 100644
--- a/site/src/components/blog/AuthorSocialLinks.tsx
+++ b/site/src/components/blog/AuthorSocialLinks.tsx
@@ -67,7 +67,7 @@ export function AuthorSocialLinks({ socialLinks, className }: AuthorSocialLinksP
                   target="_blank"
                   rel="noopener noreferrer"
                   aria-label={`${config.label} profile`}
-                  className="inline-flex items-center justify-center p-2 rounded-lg intent:text-dark-40 dark:text-light-40"
+                  className="inline-flex items-center justify-center p-2 rounded-xs intent:text-warm-gray dark:intent:text-manila-50"
                 >
                   <Icon size={20} strokeWidth={1.5} />
                 </a>
diff --git a/site/src/components/blog/BlogPagination.astro b/site/src/components/blog/BlogPagination.astro
index ef99fd13..21186e4b 100644
--- a/site/src/components/blog/BlogPagination.astro
+++ b/site/src/components/blog/BlogPagination.astro
@@ -10,7 +10,10 @@ interface Props {
 const { page } = Astro.props;
 ---
 
-<nav aria-label="Blog pagination" class="w-full max-w-3xl mx-auto mt-10 flex items-center justify-end gap-4">
+<nav
+  aria-label="Blog pagination"
+  class="mx-auto mt-10 flex w-full max-w-3xl items-center justify-end gap-4"
+>
   <span>
     Page {page.currentPage} of {page.lastPage}
   </span>
@@ -20,17 +23,17 @@ const { page } = Astro.props;
         <a
           href={page.url.prev}
           aria-label={`Go to page ${page.currentPage - 1}`}
-          class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
+          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
         >
-          <ChevronDown size={12} className="rotate-90" />
+          <ChevronDown size={16} className="rotate-90" />
         </a>
       ) : (
         <button
           disabled
           aria-label="Previous page (unavailable)"
-          class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
+          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 opacity-40 dark:border-soot dark:bg-warm-gray"
         >
-          <ChevronDown size={12} className="rotate-90" />
+          <ChevronDown size={16} className="rotate-90" />
         </button>
       )
     }
@@ -39,17 +42,17 @@ const { page } = Astro.props;
         <a
           href={page.url.next}
           aria-label={`Go to page ${page.currentPage + 1}`}
-          class="grid items-center p-2 border border-light-40 rounded-lg intent:border-dark-40"
+          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
         >
-          <ChevronDown size={12} className="-rotate-90" />
+          <ChevronDown size={16} className="-rotate-90" />
         </a>
       ) : (
         <button
           disabled
           aria-label="Next page (unavailable)"
-          class="grid items-center p-2 border border-light-40 rounded-lg opacity-40"
+          class="grid items-center rounded-xs border border-manila-75 bg-manila-50 p-4 opacity-40 dark:border-soot dark:bg-warm-gray"
         >
-          <ChevronDown size={12} className="-rotate-90" />
+          <ChevronDown size={16} className="-rotate-90" />
         </button>
       )
     }
diff --git a/site/src/components/blog/BlogPostCard.astro b/site/src/components/blog/BlogPostCard.astro
index b27d7347..b22c04ab 100644
--- a/site/src/components/blog/BlogPostCard.astro
+++ b/site/src/components/blog/BlogPostCard.astro
@@ -15,21 +15,31 @@ const { post, authors, asLink } = Astro.props;
 
 <article>
   <a href={`/blog/${post.id}`} class="group grid max-w-3xl">
-    <time datetime={post.data.pubDate.toISOString()} class="text-dark-40 dark:text-light-40 mb-2">
+    <time
+      datetime={post.data.pubDate.toISOString()}
+      class="mb-1 font-display text-h4 font-bold text-orange"
+    >
       <FormattedDate date={post.data.pubDate} />
     </time>
     <div class="mb-3">
-      <h2 class="text-lg font-medium md:text-h4 group-intent:underline mb-1">{post.data.title}</h2>
-      <p class="font-medium text-dark-40 dark:text-light-40">{post.data.description}</p>
+      <h2
+        class="mb-3 font-display text-h25 leading-tight uppercase underline group-intent:no-underline"
+      >
+        {post.data.title}
+      </h2>
+      {
+        authors.length > 0 && (
+          <div class="mb-4 font-bold">
+            {new Intl.ListFormat("en", {
+              style: "long",
+              type: "conjunction",
+            }).format(authors.map((author) => author.data.name))}
+          </div>
+        )
+      }
+      <p class="">
+        {post.data.description}
+      </p>
     </div>
-    {
-      authors.length > 0 && (
-        <div class="text-dark-40 dark:text-light-40">
-          {new Intl.ListFormat('en', { style: 'long', type: 'conjunction' }).format(
-            authors.map((author) => author.data.name),
-          )}
-        </div>
-      )
-    }
   </a>
 </article>
diff --git a/site/src/components/docs/DocsNavigation.astro b/site/src/components/docs/DocsNavigation.astro
index d1b6f236..d9e60967 100644
--- a/site/src/components/docs/DocsNavigation.astro
+++ b/site/src/components/docs/DocsNavigation.astro
@@ -16,18 +16,18 @@ function getGuideUrl(framework: SupportedFramework, slug: string): string {
 }
 ---
 
-<nav class="w-full max-w-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-5">
+<nav class="mx-auto grid w-full max-w-3xl grid-cols-1 gap-5 md:grid-cols-2">
   {
     prev ? (
       <a
         href={getGuideUrl(framework, prev.slug)}
-        class="grid items-center gap-x-2 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 dark:intent:border-dark-40"
+        class="grid items-center gap-x-2 rounded-xs border border-manila-75 bg-manila-50 p-4 dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
         style="grid-template-areas: 'empty direction' 'icon title'; grid-template-columns: auto minmax(0,1fr); grid-template-rows: auto minmax(0,1fr);"
       >
-        <div class="text-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
+        <div class="text-p3" style="grid-area: direction;">
           Previous
         </div>
-        <div class="text-base font-medium text-balance" style="grid-area: title">
+        <div class="text-p2 font-bold text-balance" style="grid-area: title">
           {prev.sidebarLabel || docTitles.get(prev.slug)}
         </div>
         <div style="grid-area: icon">
@@ -42,13 +42,13 @@ function getGuideUrl(framework: SupportedFramework, slug: string): string {
     next ? (
       <a
         href={getGuideUrl(framework, next.slug)}
-        class="grid items-center gap-x-2 p-4 border border-light-40 dark:border-dark-80 rounded-lg intent:border-dark-40 text-right dark:intent:border-dark-40"
+        class="grid items-center gap-x-2 rounded-xs border border-manila-75 bg-manila-50 p-4 text-right dark:border-soot dark:bg-warm-gray intent:bg-manila-dark dark:intent:bg-soot"
         style="grid-template-areas: 'direction empty' 'title icon';grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto minmax(0,1fr);"
       >
-        <div class="text-sm text-dark-80 dark:text-light-40" style="grid-area: direction;">
+        <div class="text-p3" style="grid-area: direction;">
           Next
         </div>
-        <div class="text-base font-medium text-balance" style="grid-area: title">
+        <div class="text-p2 font-bold text-balance" style="grid-area: title">
           {next.sidebarLabel || docTitles.get(next.slug)}
         </div>
         <div style="grid-area: icon">
diff --git a/site/src/components/docs/DocsSidebar.astro b/site/src/components/docs/DocsSidebar.astro
index 8ccfca42..49ede4e2 100644
--- a/site/src/components/docs/DocsSidebar.astro
+++ b/site/src/components/docs/DocsSidebar.astro
@@ -16,10 +16,14 @@ const { framework, docTitles, class: className } = Astro.props;
 const filteredSidebar = filterSidebar(framework);
 ---
 
-<div class={clsx('bg-light-80 dark:bg-dark-100', className)}>
+<div class={clsx("bg-manila-light dark:bg-faded-black", className)}>
   <slot />
   <PreferenceUpdater client:idle currentFramework={framework} />
   <nav class="p-6">
-    {filteredSidebar.map((item) => <SidebarItem item={item} framework={framework} docTitles={docTitles} />)}
+    {
+      filteredSidebar.map((item) => (
+        <SidebarItem item={item} framework={framework} docTitles={docTitles} />
+      ))
+    }
   </nav>
 </div>
diff --git a/site/src/components/docs/DocsSidebarRestoration.astro b/site/src/components/docs/DocsSidebarRestoration.astro
index cea274bf..184c9afc 100644
--- a/site/src/components/docs/DocsSidebarRestoration.astro
+++ b/site/src/components/docs/DocsSidebarRestoration.astro
@@ -12,9 +12,9 @@ const { docsSidebarId } = Astro.props;
 ---
 
 <script is:inline define:vars={{ docsSidebarId }}>
-  const STORAGE_KEY = 'vjs-sidebar-state';
+  const STORAGE_KEY = "vjs-sidebar-state";
 
-  window.addEventListener('pagereveal', () => {
+  window.addEventListener("pagereveal", () => {
     // Restore sidebar state
     const aside = document.getElementById(docsSidebarId);
     if (aside) {
@@ -29,36 +29,40 @@ const { docsSidebarId } = Astro.props;
           }
 
           if (state.detailsState) {
-            document.querySelectorAll(`#${docsSidebarId} details[id]`).forEach((details) => {
-              const savedState = state.detailsState[details.id];
-              if (savedState !== undefined) {
-                details.open = savedState;
-              }
-            });
+            document
+              .querySelectorAll(`#${docsSidebarId} details[id]`)
+              .forEach((details) => {
+                const savedState = state.detailsState[details.id];
+                if (savedState !== undefined) {
+                  details.open = savedState;
+                }
+              });
           }
         } catch (e) {
-          console.error('[Sidebar] Failed to restore state', e);
+          console.error("[Sidebar] Failed to restore state", e);
         }
       }
 
       // Auto-expand sections containing active link (override saved state)
       const activeLink = aside.querySelector('a[aria-current="page"]');
       if (activeLink) {
-        let parent = activeLink.closest('details');
+        let parent = activeLink.closest("details");
         while (parent && aside.contains(parent)) {
           parent.open = true;
-          parent = parent.parentElement?.closest('details') ?? null;
+          parent = parent.parentElement?.closest("details") ?? null;
         }
       }
     }
 
     // Restore page scroll position (set by framework switch)
     try {
-      const scrollData = sessionStorage.getItem('vjs-page-scroll');
+      const scrollData = sessionStorage.getItem("vjs-page-scroll");
       if (scrollData) {
-        sessionStorage.removeItem('vjs-page-scroll');
+        sessionStorage.removeItem("vjs-page-scroll");
         const { url, scrollY } = JSON.parse(scrollData);
-        if (url.replace(/\/$/, '') === window.location.pathname.replace(/\/$/, '')) {
+        if (
+          url.replace(/\/$/, "") === window.location.pathname.replace(/\/$/, "")
+        ) {
           window.scrollTo(0, scrollY);
         }
       }
@@ -67,13 +71,15 @@ const { docsSidebarId } = Astro.props;
     }
   });
 
-  window.addEventListener('pageswap', () => {
+  window.addEventListener("pageswap", () => {
     const aside = document.getElementById(docsSidebarId);
     if (!aside) return;
     const detailsState = {};
-    document.querySelectorAll(`#${docsSidebarId} details[id]`).forEach((details) => {
-      detailsState[details.id] = details.open;
-    });
+    document
+      .querySelectorAll(`#${docsSidebarId} details[id]`)
+      .forEach((details) => {
+        detailsState[details.id] = details.open;
+      });
 
     const state = {
       sidebarScroll: aside.scrollTop,
@@ -83,7 +89,7 @@ const { docsSidebarId } = Astro.props;
     try {
       sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
     } catch (e) {
-      console.error('[Sidebar] Failed to save state', e);
+      console.error("[Sidebar] Failed to save state", e);
     }
   });
 </script>
diff --git a/site/src/components/docs/EditPageButton.astro b/site/src/components/docs/EditPageButton.astro
index 85956c4f..ad25349e 100644
--- a/site/src/components/docs/EditPageButton.astro
+++ b/site/src/components/docs/EditPageButton.astro
@@ -10,8 +10,13 @@ const { filePath } = Astro.props;
 const editUrl = `${GITHUB_REPO_URL}edit/main/${filePath}`;
 ---
 
-<div class="w-full max-w-3xl mx-auto">
-  <a href={editUrl} target="_blank" rel="noopener noreferrer" class="underline intent:no-underline text-sm">
+<div class="mx-auto w-full max-w-3xl">
+  <a
+    href={editUrl}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="text-p3 underline intent:no-underline"
+  >
     Edit page
   </a>
 </div>
diff --git a/site/src/components/docs/FrameworkCase.astro b/site/src/components/docs/FrameworkCase.astro
index e379705a..90bdb036 100644
--- a/site/src/components/docs/FrameworkCase.astro
+++ b/site/src/components/docs/FrameworkCase.astro
@@ -30,8 +30,8 @@ const shouldRender = !frameworks || frameworks.includes(framework as SupportedFr
 <div
   class="contents"
   hidden={!shouldRender}
-  data-pagefind-ignore={shouldRender ? undefined : 'all'}
-  data-llms-ignore={shouldRender ? undefined : 'all'}
+  data-pagefind-ignore={shouldRender ? undefined : "all"}
+  data-llms-ignore={shouldRender ? undefined : "all"}
 >
   <slot />
 </div>
diff --git a/site/src/components/docs/Selectors.tsx b/site/src/components/docs/Selectors.tsx
index 6b6b38c7..52d19c24 100644
--- a/site/src/components/docs/Selectors.tsx
+++ b/site/src/components/docs/Selectors.tsx
@@ -78,12 +78,12 @@ export function Selectors({ currentFramework, currentSlug }: SelectorProps) {
   }));
 
   return (
-    <div className="px-6 pb-6 pt-2.5 md:py-2.5 xl:p-6 border-b border-light-40 dark:border-dark-80">
+    <div className="px-6 pb-6 pt-2.5 md:py-6 xl:p-6 border-b border-manila-75 dark:border-faded-black">
       <div
         className="max-w-3xl mx-auto w-full grid grid-flow-col grid-cols-2 grid-rows-2 gap-x-2 md:grid-flow-row md:grid-cols-(--md-grid-cols) md:gap-x-6 md:gap-y-2 items-center"
         style={{ '--md-grid-cols': 'auto minmax(0, 1fr)' } as React.CSSProperties}
       >
-        <span>Framework</span>
+        <span className="text-p3 text-faded-black dark:text-manila-light">Framework</span>
         <Select
           value={currentFramework}
           onChange={handleFrameworkChange}
@@ -91,7 +91,7 @@ export function Selectors({ currentFramework, currentSlug }: SelectorProps) {
           aria-label="Select framework"
           data-testid="select-framework"
         />
-        <span>Style</span>
+        <span className="text-p3 text-faded-black dark:text-manila-light">Style</span>
         <Select
           value={hydrationSafeCurrentStyle}
           onChange={handleStyleChange}
diff --git a/site/src/components/docs/SidebarItem.astro b/site/src/components/docs/SidebarItem.astro
index 9fb2f445..b71c9380 100644
--- a/site/src/components/docs/SidebarItem.astro
+++ b/site/src/components/docs/SidebarItem.astro
@@ -1,6 +1,6 @@
 ---
 import GithubSlugger from 'github-slugger';
-import { ChevronDown } from 'lucide-react';
+import DropdownIcon from '@/components/icons/dropdown-arrow.svg?react';
 import type { Guide, Section, SupportedFramework } from '@/types/docs';
 import { isSection } from '@/types/docs';
 
@@ -51,45 +51,50 @@ function getGroupRotate(depth: number) {
     <details
       id={slugger.slug(item.sidebarLabel)}
       open={isActive || item.defaultOpen !== false}
-      class:list={[
-        getGroup(depth),
-        depth === 0 && 'my-4 first:mt-0',
-      ]}
+      class:list={[getGroup(depth), depth === 0 && "my-4 first:mt-0"]}
     >
       <summary
         class:list={[
-          'py-2 flex items-center gap-4 ',
-          'intent:text-dark-100 dark:intent:text-light-80 cursor-pointer',
-          (depth === 0 || depth === 1) && 'font-medium',
-          depth > 0 && 'border-l pl-4',
-          isActive ? 'text-dark-100 dark:text-light-100 border-dark-100' : 'border-light-40 dark:border-dark-40',
-          getGroupMargin(depth)
+          "flex items-center gap-4 py-2 text-faded-black dark:text-manila-light",
+          "cursor-pointer",
+          depth === 0 ? "font-display text-h4 uppercase" : "text-p3",
+          depth > 0 && "border-l pl-4",
+          isActive ? "border-orange" : "border-manila-75 dark:border-warm-gray",
+          getGroupMargin(depth),
         ]}
-        style={depth ? `margin-left: calc(var(--spacing) * ${(depth - 1) * 4})` : ``}
+        style={
+          depth ? `margin-left: calc(var(--spacing) * ${(depth - 1) * 4})` : ``
+        }
       >
         <span class="flex-1">{item.sidebarLabel}</span>
-        <ChevronDown size={12} className={getGroupRotate(depth)} />
+        <DropdownIcon width={"0.65rem"} className={getGroupRotate(depth)} />
       </summary>
       <div>
         {item.contents.map((contentItem) => (
-          <Astro.self item={contentItem} framework={framework} docTitles={docTitles} depth={depth + 1} />
+          <Astro.self
+            item={contentItem}
+            framework={framework}
+            docTitles={docTitles}
+            depth={depth + 1}
+          />
         ))}
       </div>
     </details>
   ) : (
     <a
-      aria-current={isActive ? 'page' : undefined}
+      aria-current={isActive ? "page" : undefined}
       class:list={[
-        'py-2 flex items-center gap-4 ',
-        'intent:text-dark-100 dark:intent:text-light-100 cursor-pointer',
-        depth === 0 && 'font-medium',
-        depth > 0 && 'border-l pl-4',
-        isActive ? 'text-dark-100 dark:text-light-100 border-current ' : 'border-light-40 dark:border-dark-40',
+        "flex items-center gap-4 py-2 text-p3 text-faded-black dark:text-manila-light",
+        "cursor-pointer",
+        depth === 0 && "font-bold",
+        depth > 0 && "border-l pl-4",
+        depth > 0 && isActive && "font-bold",
+        isActive ? "border-orange" : "border-manila-75 dark:border-warm-gray",
       ]}
       style={`margin-left: calc(var(--spacing) * ${(depth - 1) * 4})`}
       href={`/docs/framework/${framework}/${item.slug}`}
     >
-      {item.devOnly ? '[Dev only] ' : ''}
+      {item.devOnly ? "[Dev only] " : ""}
       {item.sidebarLabel || docTitles.get(item.slug) || item.slug}
     </a>
   )
diff --git a/site/src/components/docs/StyleCase.astro b/site/src/components/docs/StyleCase.astro
index 0f5389b7..3303034b 100644
--- a/site/src/components/docs/StyleCase.astro
+++ b/site/src/components/docs/StyleCase.astro
@@ -28,11 +28,11 @@ const { styles } = Astro.props;
 ---
 
 {
-    !styles ? (
-        <slot />
-    ) : (
-        <div class="contents" data-for-style={styles.join(" ")}>
-            <slot />
-        </div>
-    )
+  !styles ? (
+    <slot />
+  ) : (
+    <div class="contents" data-for-style={styles.join(" ")}>
+      <slot />
+    </div>
+  )
 }
diff --git a/site/src/components/docs/StyleInit.astro b/site/src/components/docs/StyleInit.astro
index dbb2d25a..e5db47d9 100644
--- a/site/src/components/docs/StyleInit.astro
+++ b/site/src/components/docs/StyleInit.astro
@@ -12,27 +12,39 @@ const defaultStyleConfig = getDefaultStyle(SUPPORTED_FRAMEWORKS[0]);
 const allStyles = [...new Set(Object.values(FRAMEWORK_STYLES).flat())];
 ---
 
-{/* Style visibility CSS rules - generated from FRAMEWORK_STYLES to stay in sync */}
-<style set:html={`
+{
+  /* Style visibility CSS rules - generated from FRAMEWORK_STYLES to stay in sync */
+}
+<style
+  set:html={`
   [data-for-style] { display: none; }
-  ${allStyles.map(style => `html[data-style='${style}'] [data-for-style~='${style}'] { display: contents; }`).join('\n  ')}
-`}></style>
+  ${allStyles.map((style) => `html[data-style='${style}'] [data-for-style~='${style}'] { display: contents; }`).join("\n  ")}
+`}
+></style>
 
-{/*
+{
+  /*
   Style initialization script - runs before paint to prevent FOUC.
 
   Supports ?style= query param for deep-linking (e.g., ?style=tailwind).
   This allows external links to specify a style preference. The style is
   validated against valid styles for the current framework and persisted
   to localStorage.
-*/}
+*/
+}
 <script
   is:inline
-  define:vars={{ keyPrefix: STYLE_KEY_PREFIX, frameworkStyles: frameworkStylesConfig, defaultStyle: defaultStyleConfig }}
+  define:vars={{
+    keyPrefix: STYLE_KEY_PREFIX,
+    frameworkStyles: frameworkStylesConfig,
+    defaultStyle: defaultStyleConfig,
+  }}
 >
-  if (typeof localStorage !== 'undefined' && typeof document !== 'undefined') {
+  if (typeof localStorage !== "undefined" && typeof document !== "undefined") {
     // Extract framework from URL: /docs/framework/{framework}/...
-    const pathMatch = window.location.pathname.match(/\/docs\/framework\/([^/]+)/);
+    const pathMatch = window.location.pathname.match(
+      /\/docs\/framework\/([^/]+)/,
+    );
     const framework = pathMatch?.[1];
 
     const validStyles = frameworkStyles[framework];
@@ -41,7 +53,7 @@ const allStyles = [...new Set(Object.values(FRAMEWORK_STYLES).flat())];
 
       // Check for ?style= query param (enables deep-linking)
       const urlParams = new URLSearchParams(window.location.search);
-      const queryStyle = urlParams.get('style');
+      const queryStyle = urlParams.get("style");
 
       let style;
       if (queryStyle && validStyles.includes(queryStyle)) {
diff --git a/site/src/components/docs/TableOfContents/TableOfContents.desktop.tsx b/site/src/components/docs/TableOfContents/TableOfContents.desktop.tsx
index a0e44e7c..d26b7c69 100644
--- a/site/src/components/docs/TableOfContents/TableOfContents.desktop.tsx
+++ b/site/src/components/docs/TableOfContents/TableOfContents.desktop.tsx
@@ -23,19 +23,14 @@ export function TableOfContentsDesktop({ headings, activeId, onNavigate, classNa
   return (
     <nav ref={navRef} className={clsx('', className)}>
       <div className="py-8 pr-6">
-        <h2 className="text-sm mb-3 font-semibold">On this page</h2>
+        <h2 className="text-p3 mb-3 font-bold">On this page</h2>
         <ul className="space-y-3">
           {headings.map((heading) => (
             <li key={heading.slug}>
               <a
                 href={`#${heading.slug}`}
                 onClick={(e) => handleClick(e, heading.slug)}
-                className={clsx(
-                  'text-sm block',
-                  activeId === heading.slug
-                    ? 'text-dark-100 dark:text-light-100'
-                    : 'text-dark-40 dark:text-light-40 intent:text-dark-100 dark:intent:text-light-100'
-                )}
+                className={clsx('text-p3 block', activeId === heading.slug && 'font-bold')}
                 style={{ paddingLeft: `calc(${heading.depth - 2} * var(--spacing) * 4)` }}
               >
                 {heading.text}
diff --git a/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx b/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
index f828d42d..b6388132 100644
--- a/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
+++ b/site/src/components/docs/TableOfContents/TableOfContents.mobile.tsx
@@ -25,10 +25,10 @@ export function TableOfContentsMobile({ headings, activeId, onNavigate, classNam
   return (
     <div
       className={clsx(
-        'border-b border-light-40 dark:border-dark-80 bg-light-80 dark:bg-dark-100 px-6 lg:px-12 h-(--h) flex items-center',
+        'border-y md:border-t-0 border-manila-75 dark:border-warm-gray bg-manila-light dark:bg-faded-black px-6 lg:px-12 flex items-center',
         className
       )}
-      style={{ '--h': 'var(--mobile-toc-h)' } as React.CSSProperties}
+      style={{ height: 'var(--mobile-toc-h)' }}
     >
       <div className="w-full max-w-3xl mx-auto">
         <Select
diff --git a/site/src/components/docs/api-reference/ApiCSSVarsTable.astro b/site/src/components/docs/api-reference/ApiCSSVarsTable.astro
index 9c6ce8cb..b8ef5914 100644
--- a/site/src/components/docs/api-reference/ApiCSSVarsTable.astro
+++ b/site/src/components/docs/api-reference/ApiCSSVarsTable.astro
@@ -21,21 +21,21 @@ const vars = Object.entries(cssCustomProperties);
 ---
 
 <Table maxWidth={false} outerClass="my-6">
-    <Thead>
-        <Tr>
-            <Th>Variable</Th>
-            <Th />
-        </Tr>
-    </Thead>
-    <Tbody>
-        {
-            vars.map(([name, def]) => (
-                <CSSVarRow
-                    name={name}
-                    description={def.description}
-                    componentName={componentName}
-                />
-            ))
-        }
-    </Tbody>
+  <Thead>
+    <Tr>
+      <Th>Variable</Th>
+      <Th />
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      vars.map(([name, def]) => (
+        <CSSVarRow
+          name={name}
+          description={def.description}
+          componentName={componentName}
+        />
+      ))
+    }
+  </Tbody>
 </Table>
diff --git a/site/src/components/docs/api-reference/ApiDataAttrsTable.astro b/site/src/components/docs/api-reference/ApiDataAttrsTable.astro
index cd56c4bf..82869533 100644
--- a/site/src/components/docs/api-reference/ApiDataAttrsTable.astro
+++ b/site/src/components/docs/api-reference/ApiDataAttrsTable.astro
@@ -21,24 +21,24 @@ const attrs = Object.entries(dataAttributes);
 ---
 
 <Table maxWidth={false} outerClass="my-6">
-    <Thead>
-        <Tr>
-            <Th>Attribute</Th>
-            <Th>Type</Th>
-            <Th />
-        </Tr>
-    </Thead>
-    <Tbody>
-        {
-            attrs.map(([name, def]) => (
-                <DataAttrRow
-                    name={name}
-                    type={def.type}
-                    detailedType={def.detailedType}
-                    description={def.description}
-                    componentName={componentName}
-                />
-            ))
-        }
-    </Tbody>
+  <Thead>
+    <Tr>
+      <Th>Attribute</Th>
+      <Th>Type</Th>
+      <Th />
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      attrs.map(([name, def]) => (
+        <DataAttrRow
+          name={name}
+          type={def.type}
+          detailedType={def.detailedType}
+          description={def.description}
+          componentName={componentName}
+        />
+      ))
+    }
+  </Tbody>
 </Table>
diff --git a/site/src/components/docs/api-reference/ApiPropsTable.astro b/site/src/components/docs/api-reference/ApiPropsTable.astro
index f08efb77..aa2c7080 100644
--- a/site/src/components/docs/api-reference/ApiPropsTable.astro
+++ b/site/src/components/docs/api-reference/ApiPropsTable.astro
@@ -21,27 +21,27 @@ const { props, componentName } = Astro.props;
 ---
 
 <Table maxWidth={false} outerClass="my-6">
-    <Thead>
-        <Tr>
-            <Th>Prop</Th>
-            <Th>Type</Th>
-            <Th>Default</Th>
-            <Th />
-        </Tr>
-    </Thead>
-    <Tbody>
-        {
-            Object.entries(props).map(([name, prop]) => (
-                <PropRow
-                    name={name}
-                    type={prop.type}
-                    detailedType={prop.detailedType}
-                    description={prop.description}
-                    defaultValue={prop.default}
-                    required={prop.required}
-                    componentName={componentName}
-                />
-            ))
-        }
-    </Tbody>
+  <Thead>
+    <Tr>
+      <Th>Prop</Th>
+      <Th>Type</Th>
+      <Th>Default</Th>
+      <Th />
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      Object.entries(props).map(([name, prop]) => (
+        <PropRow
+          name={name}
+          type={prop.type}
+          detailedType={prop.detailedType}
+          description={prop.description}
+          defaultValue={prop.default}
+          required={prop.required}
+          componentName={componentName}
+        />
+      ))
+    }
+  </Tbody>
 </Table>
diff --git a/site/src/components/docs/api-reference/ApiStateTable.astro b/site/src/components/docs/api-reference/ApiStateTable.astro
index 7a6badd0..42879db0 100644
--- a/site/src/components/docs/api-reference/ApiStateTable.astro
+++ b/site/src/components/docs/api-reference/ApiStateTable.astro
@@ -21,24 +21,24 @@ const stateEntries = Object.entries(state);
 ---
 
 <Table maxWidth={false} outerClass="my-6">
-    <Thead>
-        <Tr>
-            <Th>Property</Th>
-            <Th>Type</Th>
-            <Th />
-        </Tr>
-    </Thead>
-    <Tbody>
-        {
-            stateEntries.map(([name, def]) => (
-                <StateRow
-                    name={name}
-                    type={def.type}
-                    detailedType={def.detailedType}
-                    description={def.description}
-                    componentName={componentName}
-                />
-            ))
-        }
-    </Tbody>
+  <Thead>
+    <Tr>
+      <Th>Property</Th>
+      <Th>Type</Th>
+      <Th />
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      stateEntries.map(([name, def]) => (
+        <StateRow
+          name={name}
+          type={def.type}
+          detailedType={def.detailedType}
+          description={def.description}
+          componentName={componentName}
+        />
+      ))
+    }
+  </Tbody>
 </Table>
diff --git a/site/src/components/docs/api-reference/CSSVarRow.astro b/site/src/components/docs/api-reference/CSSVarRow.astro
index 6589b5f0..ee1cbe5b 100644
--- a/site/src/components/docs/api-reference/CSSVarRow.astro
+++ b/site/src/components/docs/api-reference/CSSVarRow.astro
@@ -15,7 +15,7 @@ const id = `${componentName}-css-var-${name.replace(/^--/, '')}`;
 ---
 
 <DetailRow id={id} name={name} type="" description={description} colspan={2}>
-    <Td class="align-top">
-        <MarkdownCode>{name}</MarkdownCode>
-    </Td>
+  <Td class="align-top">
+    <MarkdownCode>{name}</MarkdownCode>
+  </Td>
 </DetailRow>
diff --git a/site/src/components/docs/api-reference/ComponentReference.astro b/site/src/components/docs/api-reference/ComponentReference.astro
index 51deb649..156638f2 100644
--- a/site/src/components/docs/api-reference/ComponentReference.astro
+++ b/site/src/components/docs/api-reference/ComponentReference.astro
@@ -51,105 +51,152 @@ const singleCssCustomPropertiesSection = !apiReferenceModel.hasParts
 <ContentWidth>
   <H2 id={apiReferenceModel.heading.id}>{apiReferenceModel.heading.text}</H2>
 
-  {apiReferenceModel.hasParts ? (
-    apiReferenceModel.parts.map((part) => {
-      const partPropsSection = part.sections.find((section) => section.key === 'props');
-      const partStateSection = part.sections.find((section) => section.key === 'state');
-      const partDataAttributesSection = part.sections.find((section) => section.key === 'dataAttributes');
-      const partCssCustomPropertiesSection = part.sections.find((section) => section.key === 'cssCustomProperties');
+  {
+    apiReferenceModel.hasParts ? (
+      apiReferenceModel.parts.map((part) => {
+        const partPropsSection = part.sections.find(
+          (section) => section.key === "props",
+        );
+        const partStateSection = part.sections.find(
+          (section) => section.key === "state",
+        );
+        const partDataAttributesSection = part.sections.find(
+          (section) => section.key === "dataAttributes",
+        );
+        const partCssCustomPropertiesSection = part.sections.find(
+          (section) => section.key === "cssCustomProperties",
+        );
 
-      return (
-        <FrameworkCase frameworks={part.frameworks}>
-          <H3 id={part.id}>
-            <FrameworkCase frameworks={["react"]}>{part.labelByFramework.react}</FrameworkCase>
-            <FrameworkCase frameworks={["html"]}>{part.labelByFramework.html}</FrameworkCase>
-          </H3>
+        return (
+          <FrameworkCase frameworks={part.frameworks}>
+            <H3 id={part.id}>
+              <FrameworkCase frameworks={["react"]}>
+                {part.labelByFramework.react}
+              </FrameworkCase>
+              <FrameworkCase frameworks={["html"]}>
+                {part.labelByFramework.html}
+              </FrameworkCase>
+            </H3>
 
-          {part.description && (
-            <P><InlineMarkdown content={part.description} /></P>
-          )}
-
-          {partPropsSection && (
-            <>
-              <H4 id={partPropsSection.id}>{partPropsSection.title}</H4>
-              <ApiPropsTable props={part.data.props} componentName={part.componentName} />
-            </>
-          )}
-
-          {partStateSection && (
-            <>
-              <H4 id={partStateSection.id}>{partStateSection.title}</H4>
+            {part.description && (
               <P>
-                <FrameworkCase frameworks={["react"]}>
-                  State is accessible via the{" "}
-                  <MarkdownCode>render</MarkdownCode>,{" "}
-                  <MarkdownCode>className</MarkdownCode>, and{" "}
-                  <MarkdownCode>style</MarkdownCode> props.
-                </FrameworkCase>
-                <FrameworkCase frameworks={["html"]}>
-                  State is reflected as data attributes for CSS styling.
-                </FrameworkCase>
+                <InlineMarkdown content={part.description} />
               </P>
-              <ApiStateTable state={part.data.state} componentName={part.componentName} />
-            </>
-          )}
+            )}
 
-          {partDataAttributesSection && (
-            <>
-              <H4 id={partDataAttributesSection.id}>{partDataAttributesSection.title}</H4>
-              <ApiDataAttrsTable dataAttributes={part.data.dataAttributes} componentName={part.componentName} />
-            </>
-          )}
+            {partPropsSection && (
+              <>
+                <H4 id={partPropsSection.id}>{partPropsSection.title}</H4>
+                <ApiPropsTable
+                  props={part.data.props}
+                  componentName={part.componentName}
+                />
+              </>
+            )}
 
-          {partCssCustomPropertiesSection && (
-            <>
-              <H4 id={partCssCustomPropertiesSection.id}>{partCssCustomPropertiesSection.title}</H4>
-              <ApiCSSVarsTable cssCustomProperties={part.data.cssCustomProperties} componentName={part.componentName} />
-            </>
-          )}
-        </FrameworkCase>
-      );
-    })
-  ) : (
-    <>
-      {singlePropsSection && (
-        <>
-          <H3 id={singlePropsSection.id}>{singlePropsSection.title}</H3>
-          <ApiPropsTable props={apiReferenceModel.data.props} componentName={component} />
-        </>
-      )}
+            {partStateSection && (
+              <>
+                <H4 id={partStateSection.id}>{partStateSection.title}</H4>
+                <P>
+                  <FrameworkCase frameworks={["react"]}>
+                    State is accessible via the{" "}
+                    <MarkdownCode>render</MarkdownCode>,{" "}
+                    <MarkdownCode>className</MarkdownCode>, and{" "}
+                    <MarkdownCode>style</MarkdownCode> props.
+                  </FrameworkCase>
+                  <FrameworkCase frameworks={["html"]}>
+                    State is reflected as data attributes for CSS styling.
+                  </FrameworkCase>
+                </P>
+                <ApiStateTable
+                  state={part.data.state}
+                  componentName={part.componentName}
+                />
+              </>
+            )}
 
-      {singleStateSection && (
-        <>
-          <H3 id={singleStateSection.id}>{singleStateSection.title}</H3>
-          <P>
-            <FrameworkCase frameworks={["react"]}>
-              State is accessible via the{" "}
-              <MarkdownCode>render</MarkdownCode>,{" "}
-              <MarkdownCode>className</MarkdownCode>, and{" "}
-              <MarkdownCode>style</MarkdownCode> props.
-            </FrameworkCase>
-            <FrameworkCase frameworks={["html"]}>
-              State is reflected as data attributes for CSS styling.
-            </FrameworkCase>
-          </P>
-          <ApiStateTable state={apiReferenceModel.data.state} componentName={component} />
-        </>
-      )}
+            {partDataAttributesSection && (
+              <>
+                <H4 id={partDataAttributesSection.id}>
+                  {partDataAttributesSection.title}
+                </H4>
+                <ApiDataAttrsTable
+                  dataAttributes={part.data.dataAttributes}
+                  componentName={part.componentName}
+                />
+              </>
+            )}
 
-      {singleDataAttributesSection && (
-        <>
-          <H3 id={singleDataAttributesSection.id}>{singleDataAttributesSection.title}</H3>
-          <ApiDataAttrsTable dataAttributes={apiReferenceModel.data.dataAttributes} componentName={component} />
-        </>
-      )}
+            {partCssCustomPropertiesSection && (
+              <>
+                <H4 id={partCssCustomPropertiesSection.id}>
+                  {partCssCustomPropertiesSection.title}
+                </H4>
+                <ApiCSSVarsTable
+                  cssCustomProperties={part.data.cssCustomProperties}
+                  componentName={part.componentName}
+                />
+              </>
+            )}
+          </FrameworkCase>
+        );
+      })
+    ) : (
+      <>
+        {singlePropsSection && (
+          <>
+            <H3 id={singlePropsSection.id}>{singlePropsSection.title}</H3>
+            <ApiPropsTable
+              props={apiReferenceModel.data.props}
+              componentName={component}
+            />
+          </>
+        )}
 
-      {singleCssCustomPropertiesSection && (
-        <>
-          <H3 id={singleCssCustomPropertiesSection.id}>{singleCssCustomPropertiesSection.title}</H3>
-          <ApiCSSVarsTable cssCustomProperties={apiReferenceModel.data.cssCustomProperties} componentName={component} />
-        </>
-      )}
-    </>
-  )}
+        {singleStateSection && (
+          <>
+            <H3 id={singleStateSection.id}>{singleStateSection.title}</H3>
+            <P>
+              <FrameworkCase frameworks={["react"]}>
+                State is accessible via the <MarkdownCode>render</MarkdownCode>,{" "}
+                <MarkdownCode>className</MarkdownCode>, and{" "}
+                <MarkdownCode>style</MarkdownCode> props.
+              </FrameworkCase>
+              <FrameworkCase frameworks={["html"]}>
+                State is reflected as data attributes for CSS styling.
+              </FrameworkCase>
+            </P>
+            <ApiStateTable
+              state={apiReferenceModel.data.state}
+              componentName={component}
+            />
+          </>
+        )}
+
+        {singleDataAttributesSection && (
+          <>
+            <H3 id={singleDataAttributesSection.id}>
+              {singleDataAttributesSection.title}
+            </H3>
+            <ApiDataAttrsTable
+              dataAttributes={apiReferenceModel.data.dataAttributes}
+              componentName={component}
+            />
+          </>
+        )}
+
+        {singleCssCustomPropertiesSection && (
+          <>
+            <H3 id={singleCssCustomPropertiesSection.id}>
+              {singleCssCustomPropertiesSection.title}
+            </H3>
+            <ApiCSSVarsTable
+              cssCustomProperties={apiReferenceModel.data.cssCustomProperties}
+              componentName={component}
+            />
+          </>
+        )}
+      </>
+    )
+  }
 </ContentWidth>
diff --git a/site/src/components/docs/api-reference/DataAttrRow.astro b/site/src/components/docs/api-reference/DataAttrRow.astro
index f3842144..5bbf32b5 100644
--- a/site/src/components/docs/api-reference/DataAttrRow.astro
+++ b/site/src/components/docs/api-reference/DataAttrRow.astro
@@ -16,11 +16,18 @@ const { name, type, detailedType, description, componentName } = Astro.props;
 const id = `${componentName}-attr-${name}`;
 ---
 
-<DetailRow id={id} name={name} type={type ?? ""} detailedType={detailedType} description={description} colspan={3}>
-    <Td class="align-top">
-        <MarkdownCode>{name}</MarkdownCode>
-    </Td>
-    <Td class="align-top">
-        {type ? <MarkdownCode>{type}</MarkdownCode> : null}
-    </Td>
+<DetailRow
+  id={id}
+  name={name}
+  type={type ?? ""}
+  detailedType={detailedType}
+  description={description}
+  colspan={3}
+>
+  <Td class="align-top">
+    <MarkdownCode>{name}</MarkdownCode>
+  </Td>
+  <Td class="align-top">
+    {type ? <MarkdownCode>{type}</MarkdownCode> : null}
+  </Td>
 </DetailRow>
diff --git a/site/src/components/docs/api-reference/DetailRow.astro b/site/src/components/docs/api-reference/DetailRow.astro
index 210400a5..55f2609f 100644
--- a/site/src/components/docs/api-reference/DetailRow.astro
+++ b/site/src/components/docs/api-reference/DetailRow.astro
@@ -30,94 +30,92 @@ const hasDetail = Boolean(detailedType || description);
 ---
 
 <Tr
-    id={id}
-    data-detail-row
-    class={clsx(
-        hasDetail &&
-            "group cursor-pointer intent:bg-light-60 dark:intent:bg-dark-110 data-expanded:border-transparent dark:data-expanded:border-transparent",
-    )}
+  id={id}
+  data-detail-row
+  class={clsx(
+    hasDetail &&
+      "group cursor-pointer data-expanded:border-transparent dark:data-expanded:border-transparent intent:bg-manila-75 dark:intent:bg-soot",
+  )}
 >
-    <slot />
-        <Td class="align-top">
-        {
-            hasDetail && (<button
-                aria-expanded="false"
-                aria-controls={`${id}-detail`}
-                aria-label={`Details for ${name}`}
-                data-detail-toggle
-            >
-                <span
-                    aria-hidden="true"
-                    class="inline-block group-data-expanded:rotate-90"
-                >
-                    ▸
-                </span>
-            </button>)}
-        </Td>
+  <slot />
+  <Td class="align-top">
+    {
+      hasDetail && (
+        <button
+          aria-expanded="false"
+          aria-controls={`${id}-detail`}
+          aria-label={`Details for ${name}`}
+          data-detail-toggle
+        >
+          <span
+            aria-hidden="true"
+            class="inline-block group-data-expanded:rotate-90"
+          >
+            ▸
+          </span>
+        </button>
+      )
+    }
+  </Td>
 </Tr>
 
 {
-    hasDetail && (
-        <Tr id={`${id}-detail`} hidden>
-            <Td colspan={String(colspan)} class="p-0">
-                <div class="px-6 py-4">
-                    <dl class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-3">
-                        {description && (
-                            <>
-                                <dt class="text-dark-40 dark:text-light-40">
-                                    Description
-                                </dt>
-                                <dd><InlineMarkdown content={description} /></dd>
-                            </>
-                        )}
+  hasDetail && (
+    <Tr id={`${id}-detail`} hidden>
+      <Td colspan={String(colspan)} class="p-0">
+        <div class="px-6 py-4">
+          <dl
+            class="grid grid-cols-(--cols) gap-x-6 gap-y-3"
+            style="--cols: auto 1fr"
+          >
+            {description && (
+              <>
+                <dt class="font-bold">Description</dt>
+                <dd>
+                  <InlineMarkdown content={description} />
+                </dd>
+              </>
+            )}
 
-                        {detailedType && (
-                            <>
-                                <dt class="text-dark-40 dark:text-light-40">
-                                    Type
-                                </dt>
-                                <dd>
-                                    <MarkdownCode>
-                                        {detailedType}
-                                    </MarkdownCode>
-                                </dd>
-                            </>
-                        )}
-                    </dl>
-                </div>
-            </Td>
-        </Tr>
-    )
+            {detailedType && (
+              <>
+                <dt class="font-bold">Type</dt>
+                <dd>
+                  <MarkdownCode>{detailedType}</MarkdownCode>
+                </dd>
+              </>
+            )}
+          </dl>
+        </div>
+      </Td>
+    </Tr>
+  )
 }
 
 <script>
-    document
-        .querySelectorAll<HTMLButtonElement>("[data-detail-toggle]")
-        .forEach((button) => {
-            button.addEventListener("click", () => {
-                const expanded =
-                    button.getAttribute("aria-expanded") === "true";
-                button.setAttribute("aria-expanded", String(!expanded));
+  document
+    .querySelectorAll<HTMLButtonElement>("[data-detail-toggle]")
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        const expanded = button.getAttribute("aria-expanded") === "true";
+        button.setAttribute("aria-expanded", String(!expanded));
 
-                const row =
-                    button.closest<HTMLTableRowElement>("[data-detail-row]");
-                if (row) row.toggleAttribute("data-expanded", !expanded);
+        const row = button.closest<HTMLTableRowElement>("[data-detail-row]");
+        if (row) row.toggleAttribute("data-expanded", !expanded);
 
-                const detail = document.getElementById(
-                    button.getAttribute("aria-controls")!,
-                );
-                if (detail) detail.hidden = expanded;
-            });
-        });
+        const detail = document.getElementById(
+          button.getAttribute("aria-controls")!,
+        );
+        if (detail) detail.hidden = expanded;
+      });
+    });
 
-    document
-        .querySelectorAll<HTMLTableRowElement>("[data-detail-row]")
-        .forEach((row) => {
-            row.addEventListener("click", (e) => {
-                if ((e.target as Element).closest("a, button")) return;
-                row.querySelector<HTMLButtonElement>(
-                    "[data-detail-toggle]",
-                )?.click();
-            });
-        });
+  document
+    .querySelectorAll<HTMLTableRowElement>("[data-detail-row]")
+    .forEach((row) => {
+      row.addEventListener("click", (e) => {
+        if ((e.target as Element).closest("a, button")) return;
+        row.querySelector<HTMLButtonElement>("[data-detail-toggle]")?.click();
+      });
+    });
 </script>
diff --git a/site/src/components/docs/api-reference/PropRow.astro b/site/src/components/docs/api-reference/PropRow.astro
index 5e465fc7..c5161b04 100644
--- a/site/src/components/docs/api-reference/PropRow.astro
+++ b/site/src/components/docs/api-reference/PropRow.astro
@@ -18,19 +18,26 @@ const { name, type, detailedType, description, defaultValue, required, component
 const id = `${componentName}-${name}`;
 ---
 
-<DetailRow id={id} name={name} type={type} detailedType={detailedType} description={description} colspan={4}>
-    <Td class="align-top">
-        <MarkdownCode>
-            {name}
-            {required && <span class="text-orange">*</span>}
-        </MarkdownCode>
-    </Td>
-    <Td class="align-top">
-        <MarkdownCode>{type}</MarkdownCode>
-    </Td>
-    <Td class="align-top">
-        <MarkdownCode>
-            {defaultValue ?? "—"}
-        </MarkdownCode>
-    </Td>
+<DetailRow
+  id={id}
+  name={name}
+  type={type}
+  detailedType={detailedType}
+  description={description}
+  colspan={4}
+>
+  <Td class="align-top">
+    <MarkdownCode>
+      {name}
+      {required && <span class="text-orange">*</span>}
+    </MarkdownCode>
+  </Td>
+  <Td class="align-top">
+    <MarkdownCode>{type}</MarkdownCode>
+  </Td>
+  <Td class="align-top">
+    <MarkdownCode>
+      {defaultValue ?? "—"}
+    </MarkdownCode>
+  </Td>
 </DetailRow>
diff --git a/site/src/components/docs/api-reference/StateRow.astro b/site/src/components/docs/api-reference/StateRow.astro
index d3edaeaf..e640a833 100644
--- a/site/src/components/docs/api-reference/StateRow.astro
+++ b/site/src/components/docs/api-reference/StateRow.astro
@@ -16,11 +16,18 @@ const { name, type, detailedType, description, componentName } = Astro.props;
 const id = `${componentName}-state-${name}`;
 ---
 
-<DetailRow id={id} name={name} type={type} detailedType={detailedType} description={description} colspan={3}>
-    <Td class="align-top">
-        <MarkdownCode>{name}</MarkdownCode>
-    </Td>
-    <Td class="align-top">
-        <MarkdownCode>{type}</MarkdownCode>
-    </Td>
+<DetailRow
+  id={id}
+  name={name}
+  type={type}
+  detailedType={detailedType}
+  description={description}
+  colspan={3}
+>
+  <Td class="align-top">
+    <MarkdownCode>{name}</MarkdownCode>
+  </Td>
+  <Td class="align-top">
+    <MarkdownCode>{type}</MarkdownCode>
+  </Td>
 </DetailRow>
diff --git a/site/src/components/docs/api-reference/UtilParamsTable.astro b/site/src/components/docs/api-reference/UtilParamsTable.astro
index 707bbd60..3d659e39 100644
--- a/site/src/components/docs/api-reference/UtilParamsTable.astro
+++ b/site/src/components/docs/api-reference/UtilParamsTable.astro
@@ -20,27 +20,27 @@ const { params, utilName } = Astro.props;
 ---
 
 <Table maxWidth={false} outerClass="my-6">
-    <Thead>
-        <Tr>
-            <Th>Parameter</Th>
-            <Th>Type</Th>
-            <Th>Default</Th>
-            <Th />
-        </Tr>
-    </Thead>
-    <Tbody>
-        {
-            Object.entries(params).map(([name, param]) => (
-                <PropRow
-                    name={name}
-                    type={param.type}
-                    detailedType={param.detailedType}
-                    description={param.description}
-                    defaultValue={param.default}
-                    required={param.required}
-                    componentName={utilName}
-                />
-            ))
-        }
-    </Tbody>
+  <Thead>
+    <Tr>
+      <Th>Parameter</Th>
+      <Th>Type</Th>
+      <Th>Default</Th>
+      <Th />
+    </Tr>
+  </Thead>
+  <Tbody>
+    {
+      Object.entries(params).map(([name, param]) => (
+        <PropRow
+          name={name}
+          type={param.type}
+          detailedType={param.detailedType}
+          description={param.description}
+          defaultValue={param.default}
+          required={param.required}
+          componentName={utilName}
+        />
+      ))
+    }
+  </Tbody>
 </Table>
diff --git a/site/src/components/docs/api-reference/UtilReference.astro b/site/src/components/docs/api-reference/UtilReference.astro
index 6b2daec4..8afe7d02 100644
--- a/site/src/components/docs/api-reference/UtilReference.astro
+++ b/site/src/components/docs/api-reference/UtilReference.astro
@@ -30,51 +30,73 @@ if (!model) return;
 <ContentWidth>
   <H2 id={model.heading.id}>{model.heading.text}</H2>
 
-  {model.isMultiOverload ? (
-    model.overloads.map((overload) => {
-      const paramsSection = overload.sections.find((s) => s.key === 'parameters');
-      const returnSection = overload.sections.find((s) => s.key === 'returnValue');
-      const hasParams = Object.keys(overload.data.parameters).length > 0;
+  {
+    model.isMultiOverload ? (
+      model.overloads.map((overload) => {
+        const paramsSection = overload.sections.find(
+          (s) => s.key === "parameters",
+        );
+        const returnSection = overload.sections.find(
+          (s) => s.key === "returnValue",
+        );
+        const hasParams = Object.keys(overload.data.parameters).length > 0;
 
-      return (
-        <>
-          <H3 id={overload.id}>{overload.label ?? `Overload ${overload.index}`}</H3>
+        return (
+          <>
+            <H3 id={overload.id}>
+              {overload.label ?? `Overload ${overload.index}`}
+            </H3>
 
-          {overload.description && (
-            <P><InlineMarkdown content={overload.description} /></P>
-          )}
+            {overload.description && (
+              <P>
+                <InlineMarkdown content={overload.description} />
+              </P>
+            )}
 
-          {paramsSection && hasParams && (
-            <>
-              <H4 id={paramsSection.id}>{paramsSection.title}</H4>
-              <UtilParamsTable params={overload.data.parameters} utilName={`${util}-${overload.id}`} />
-            </>
-          )}
+            {paramsSection && hasParams && (
+              <>
+                <H4 id={paramsSection.id}>{paramsSection.title}</H4>
+                <UtilParamsTable
+                  params={overload.data.parameters}
+                  utilName={`${util}-${overload.id}`}
+                />
+              </>
+            )}
 
-          {returnSection && (
-            <>
-              <H4 id={returnSection.id}>{returnSection.title}</H4>
-              <UtilReturnTable returnValue={overload.data.returnValue} utilName={`${util}-${overload.id}`} />
-            </>
-          )}
-        </>
-      );
-    })
-  ) : (
-    <>
-      {model.sections.find((s) => s.key === 'parameters') && (
-        <>
-          <H3 id="parameters">Parameters</H3>
-          <UtilParamsTable params={model.overload.parameters} utilName={util} />
-        </>
-      )}
+            {returnSection && (
+              <>
+                <H4 id={returnSection.id}>{returnSection.title}</H4>
+                <UtilReturnTable
+                  returnValue={overload.data.returnValue}
+                  utilName={`${util}-${overload.id}`}
+                />
+              </>
+            )}
+          </>
+        );
+      })
+    ) : (
+      <>
+        {model.sections.find((s) => s.key === "parameters") && (
+          <>
+            <H3 id="parameters">Parameters</H3>
+            <UtilParamsTable
+              params={model.overload.parameters}
+              utilName={util}
+            />
+          </>
+        )}
 
-      {model.sections.find((s) => s.key === 'returnValue') && (
-        <>
-          <H3 id="return-value">Return Value</H3>
-          <UtilReturnTable returnValue={model.overload.returnValue} utilName={util} />
-        </>
-      )}
-    </>
-  )}
+        {model.sections.find((s) => s.key === "returnValue") && (
+          <>
+            <H3 id="return-value">Return Value</H3>
+            <UtilReturnTable
+              returnValue={model.overload.returnValue}
+              utilName={util}
+            />
+          </>
+        )}
+      </>
+    )
+  }
 </ContentWidth>
diff --git a/site/src/components/docs/api-reference/UtilReturnTable.astro b/site/src/components/docs/api-reference/UtilReturnTable.astro
index 665619e1..747f2553 100644
--- a/site/src/components/docs/api-reference/UtilReturnTable.astro
+++ b/site/src/components/docs/api-reference/UtilReturnTable.astro
@@ -31,58 +31,60 @@ const hasFields = returnValue.fields && Object.keys(returnValue.fields).length >
 const hasDetail = !hasFields && Boolean(returnValue.detailedType || returnValue.description);
 ---
 
-{hasFields ? (
+{
+  hasFields ? (
     <Table maxWidth={false} outerClass="my-6">
-        <Thead>
-            <Tr>
-                <Th>Property</Th>
-                <Th>Type</Th>
-                <Th />
-            </Tr>
-        </Thead>
-        <Tbody>
-            {
-                Object.entries(returnValue.fields!).map(([name, field]) => (
-                    <StateRow
-                        name={name}
-                        type={field.type}
-                        detailedType={field.detailedType}
-                        description={field.description}
-                        componentName={`${utilName}-return`}
-                    />
-                ))
-            }
-        </Tbody>
+      <Thead>
+        <Tr>
+          <Th>Property</Th>
+          <Th>Type</Th>
+          <Th />
+        </Tr>
+      </Thead>
+      <Tbody>
+        {Object.entries(returnValue.fields!).map(([name, field]) => (
+          <StateRow
+            name={name}
+            type={field.type}
+            detailedType={field.detailedType}
+            description={field.description}
+            componentName={`${utilName}-return`}
+          />
+        ))}
+      </Tbody>
     </Table>
-) : hasDetail ? (
+  ) : hasDetail ? (
     <Table maxWidth={false} outerClass="my-6">
-        <Thead>
-            <Tr>
-                <Th>Type</Th>
-                <Th />
-            </Tr>
-        </Thead>
-        <Tbody>
-            <DetailRow
-                id={`${utilName}-return-type`}
-                name="return type"
-                type={returnValue.type}
-                detailedType={returnValue.detailedType}
-                description={returnValue.description}
-                colspan={2}
-            >
-                <Td><MarkdownCode>{returnValue.type}</MarkdownCode></Td>
-            </DetailRow>
-        </Tbody>
+      <Thead>
+        <Tr>
+          <Th>Type</Th>
+          <Th />
+        </Tr>
+      </Thead>
+      <Tbody>
+        <DetailRow
+          id={`${utilName}-return-type`}
+          name="return type"
+          type={returnValue.type}
+          detailedType={returnValue.detailedType}
+          description={returnValue.description}
+          colspan={2}
+        >
+          <Td>
+            <MarkdownCode>{returnValue.type}</MarkdownCode>
+          </Td>
+        </DetailRow>
+      </Tbody>
     </Table>
-) : (
+  ) : (
     <P>
-        <MarkdownCode>{returnValue.type}</MarkdownCode>
-        {returnValue.description && (
-            <>
-                {" — "}
-                <InlineMarkdown content={returnValue.description} />
-            </>
-        )}
+      <MarkdownCode>{returnValue.type}</MarkdownCode>
+      {returnValue.description && (
+        <>
+          {" — "}
+          <InlineMarkdown content={returnValue.description} />
+        </>
+      )}
     </P>
-)}
+  )
+}
diff --git a/site/src/components/docs/demos/Demo.astro b/site/src/components/docs/demos/Demo.astro
index 226218f2..f5f006a4 100644
--- a/site/src/components/docs/demos/Demo.astro
+++ b/site/src/components/docs/demos/Demo.astro
@@ -17,22 +17,32 @@ interface Props {
 const { files } = Astro.props;
 ---
 
-<div class="my-6 w-full max-w-3xl mx-auto flex flex-col rounded-lg overflow-hidden border border-light-40 dark:border-dark-80">
-  <div class="relative z-20 bg-light-80 dark:bg-dark-100">
+<div
+  class="mx-auto my-6 flex w-full max-w-3xl flex-col overflow-hidden rounded-xs border border-faded-black dark:border-manila-dark"
+>
+  <div class="relative z-20 bg-manila-light dark:bg-faded-black">
     <slot />
   </div>
-  <TabsRoot client:idle maxWidth={false} className="my-0 rounded-none border-0 border-t border-light-40 dark:border-dark-80">
+  <TabsRoot
+    client:idle
+    maxWidth={false}
+    className="my-0 rounded-none border-0 border-t border-faded-black dark:border-manila-dark"
+  >
     <TabsList client:idle label="Demo source code">
-      {files.map((file, i) => (
-        <Tab client:idle value={file.title} initial={i === 0}>
-          {file.title}
-        </Tab>
-      ))}
+      {
+        files.map((file, i) => (
+          <Tab client:idle value={file.title} initial={i === 0}>
+            {file.title}
+          </Tab>
+        ))
+      }
     </TabsList>
-    {files.map((file, i) => (
-      <TabsPanel client:idle value={file.title} initial={i === 0}>
-        <ServerCode code={file.code} lang={file.lang} />
-      </TabsPanel>
-    ))}
+    {
+      files.map((file, i) => (
+        <TabsPanel client:idle value={file.title} initial={i === 0}>
+          <ServerCode code={file.code} lang={file.lang} />
+        </TabsPanel>
+      ))
+    }
   </TabsRoot>
 </div>
diff --git a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
index fdd3f595..b5e594ef 100644
--- a/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/buffering-indicator/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-buffering-indicator-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
index a5738c80..d2ceb265 100644
--- a/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/buffering-indicator/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-buffering-indicator-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/controls/html/css/BasicUsage.astro b/site/src/components/docs/demos/controls/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/controls/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/controls/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/controls/html/css/BasicUsage.html b/site/src/components/docs/demos/controls/html/css/BasicUsage.html
index 2caa3b91..11542785 100644
--- a/site/src/components/docs/demos/controls/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/controls/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-controls-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
index b955134a..0df5bdae 100644
--- a/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/controls/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-controls-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
index 71743f90..3ce57252 100644
--- a/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/create-player/react/css/BasicUsage.tsx
@@ -29,7 +29,7 @@ export default function BasicUsage() {
     <Provider>
       <Container className="react-create-player-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
index 0384682b..e68b2d32 100644
--- a/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/fullscreen-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-fullscreen-button-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
index 108eb024..5fed354f 100644
--- a/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/fullscreen-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-fullscreen-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.astro b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
index 4aadfc79..fd291214 100644
--- a/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/html-create-player/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <demo-video-player class="html-create-player-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
index 39799edd..12f61c55 100644
--- a/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/mute-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-mute-button-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.astro b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.astro
index ddba2960..fb3ebdec 100644
--- a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.astro
+++ b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.astro
@@ -6,5 +6,5 @@ import './VolumeLevels.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './VolumeLevels.ts';
+  import "./VolumeLevels.ts";
 </script>
diff --git a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
index ddd2f809..88ccace0 100644
--- a/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
+++ b/site/src/components/docs/demos/mute-button/html/css/VolumeLevels.html
@@ -1,7 +1,7 @@
 <video-player class="html-mute-button-volume-levels">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
index 5fa98b42..73f710fe 100644
--- a/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/mute-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-mute-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
index decc67cb..b2ea1e04 100644
--- a/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
+++ b/site/src/components/docs/demos/mute-button/react/css/VolumeLevels.tsx
@@ -10,7 +10,7 @@ export default function VolumeLevels() {
     <Player.Provider>
       <Player.Container className="react-mute-button-volume-levels">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
index 77d0252e..3589d0dc 100644
--- a/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/pip-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-pip-button-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
index 9628a4bc..249417a0 100644
--- a/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/pip-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-pip-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
index e7a0ae96..b5ff5243 100644
--- a/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/play-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-play-button-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
index d3f0a723..d51baa51 100644
--- a/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/play-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-play-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
index c99fda43..fa51f03c 100644
--- a/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/playback-rate-button/html/css/BasicUsage.html
@@ -1,6 +1,6 @@
 <video-player class="html-playback-rate-button-basic">
     <video
-        src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
         autoplay
         muted
         playsinline
diff --git a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
index 47e37053..1b9d9183 100644
--- a/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/playback-rate-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-playback-rate-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.astro b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
index cf8ca55b..e45a277d 100644
--- a/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/player-controller/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <demo-ctrl-player class="html-player-controller-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/popover/html/css/BasicUsage.astro b/site/src/components/docs/demos/popover/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/popover/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/popover/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/popover/html/css/BasicUsage.html b/site/src/components/docs/demos/popover/html/css/BasicUsage.html
index bddccd88..7cbc671d 100644
--- a/site/src/components/docs/demos/popover/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/popover/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-popover-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx b/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
index 3e914f41..6fdd0d65 100644
--- a/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/popover/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-popover-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/poster/html/css/BasicUsage.astro b/site/src/components/docs/demos/poster/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/poster/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/poster/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/poster/html/css/BasicUsage.html b/site/src/components/docs/demos/poster/html/css/BasicUsage.html
index 4369eca1..b75e1594 100644
--- a/site/src/components/docs/demos/poster/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/poster/html/css/BasicUsage.html
@@ -2,13 +2,13 @@
 <video-player class="html-poster-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             playsinline
         ></video>
 
         <media-poster class="html-poster-basic__poster">
             <img
-                src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
+                src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
                 alt="Video thumbnail"
                 />
             </media-poster>
diff --git a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
index 595a9ffb..3e4048a9 100644
--- a/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/poster/react/css/BasicUsage.tsx
@@ -9,11 +9,11 @@ export default function BasicUsage() {
   return (
     <Player.Provider>
       <Player.Container className="react-poster-basic">
-        <Video src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4" playsInline />
+        <Video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsInline />
 
         <Poster
           className="react-poster-basic__poster"
-          src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg"
+          src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg"
         />
 
         <PlayButton
diff --git a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.astro b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
index 41ecb5a1..65fe1993 100644
--- a/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/seek-button/html/css/BasicUsage.html
@@ -1,7 +1,7 @@
 <video-player class="html-seek-button-basic">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
index 935b66c5..633b57f0 100644
--- a/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/seek-button/react/css/BasicUsage.tsx
@@ -10,7 +10,7 @@ export default function BasicUsage() {
     <Player.Provider>
       <Player.Container className="react-seek-button-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.astro b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.astro
index e7e95f49..bf311233 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.astro
+++ b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.astro
@@ -6,5 +6,5 @@ import './BasicUsage.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './BasicUsage.ts';
+  import "./BasicUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
index ae7a88c2..0de7658a 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
+++ b/site/src/components/docs/demos/thumbnail/html/css/BasicUsage.html
@@ -3,7 +3,7 @@
         <media-container>
             <video
                 class="html-thumbnail-text-track__media"
-                src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+                src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
                 preload="auto"
                 muted
                 playsinline
diff --git a/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.astro b/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.astro
index b6a0c8ec..4d312ad5 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.astro
+++ b/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.astro
@@ -5,5 +5,5 @@ import html from './JsonSpriteUsage.html?raw';
 
 <HtmlDemo html={html} />
 <script>
-  import './JsonSpriteUsage.ts';
+  import "./JsonSpriteUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.ts b/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.ts
index 6f2d9665..182d4193 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.ts
+++ b/site/src/components/docs/demos/thumbnail/html/css/JsonSpriteUsage.ts
@@ -15,7 +15,7 @@ const thumbnail = document.querySelector<ThumbnailDemoElement>('media-thumbnail'
 if (thumbnail) {
   thumbnail.thumbnails = [
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
       startTime: 0,
       endTime: 10,
       width: 284,
@@ -23,7 +23,7 @@ if (thumbnail) {
       coords: { x: 0, y: 0 },
     },
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
       startTime: 10,
       endTime: 20,
       width: 284,
@@ -31,7 +31,7 @@ if (thumbnail) {
       coords: { x: 284, y: 0 },
     },
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
       startTime: 20,
       width: 284,
       height: 160,
diff --git a/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.astro b/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.astro
index dc0b9f22..ce477f4d 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.astro
+++ b/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.astro
@@ -5,5 +5,5 @@ import html from './JsonUsage.html?raw';
 
 <HtmlDemo html={html} />
 <script>
-  import './JsonUsage.ts';
+  import "./JsonUsage.ts";
 </script>
diff --git a/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.ts b/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.ts
index eac5407f..50df8551 100644
--- a/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.ts
+++ b/site/src/components/docs/demos/thumbnail/html/css/JsonUsage.ts
@@ -12,17 +12,17 @@ const thumbnail = document.querySelector<ThumbnailDemoElement>('media-thumbnail'
 if (thumbnail) {
   thumbnail.thumbnails = [
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=0',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=0',
       startTime: 0,
       endTime: 10,
     },
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=10',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=10',
       startTime: 10,
       endTime: 20,
     },
     {
-      url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=20',
+      url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=20',
       startTime: 20,
     },
   ];
diff --git a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
index 49f521d7..61634751 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/BasicUsage.tsx
@@ -11,7 +11,7 @@ export default function TextTrackUsage() {
       <Player.Container className="react-thumbnail-text-track">
         <Video
           className="react-thumbnail-text-track__media"
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           preload="auto"
           muted
           playsInline
diff --git a/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
index 8dfed78c..73711317 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/JsonSpriteUsage.tsx
@@ -2,7 +2,7 @@ import { Thumbnail } from '@videojs/react';
 
 const THUMBNAILS = [
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
     startTime: 0,
     endTime: 10,
     width: 284,
@@ -10,7 +10,7 @@ const THUMBNAILS = [
     coords: { x: 0, y: 0 },
   },
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
     startTime: 10,
     endTime: 20,
     width: 284,
@@ -18,7 +18,7 @@ const THUMBNAILS = [
     coords: { x: 284, y: 0 },
   },
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.jpg',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.jpg',
     startTime: 20,
     width: 284,
     height: 160,
diff --git a/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx b/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
index 553c7dc5..206145db 100644
--- a/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
+++ b/site/src/components/docs/demos/thumbnail/react/css/JsonUsage.tsx
@@ -2,17 +2,17 @@ import { Thumbnail } from '@videojs/react';
 
 const THUMBNAILS = [
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=0',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=0',
     startTime: 0,
     endTime: 10,
   },
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=10',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=10',
     startTime: 10,
     endTime: 20,
   },
   {
-    url: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg?time=20',
+    url: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg?time=20',
     startTime: 20,
   },
 ];
diff --git a/site/src/components/docs/demos/time-slider/html/css/WithParts.astro b/site/src/components/docs/demos/time-slider/html/css/WithParts.astro
index acb39eea..0edaa50c 100644
--- a/site/src/components/docs/demos/time-slider/html/css/WithParts.astro
+++ b/site/src/components/docs/demos/time-slider/html/css/WithParts.astro
@@ -6,5 +6,5 @@ import './WithParts.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './WithParts.ts';
+  import "./WithParts.ts";
 </script>
diff --git a/site/src/components/docs/demos/time-slider/html/css/WithParts.html b/site/src/components/docs/demos/time-slider/html/css/WithParts.html
index 15d0fdd0..05ca05ac 100644
--- a/site/src/components/docs/demos/time-slider/html/css/WithParts.html
+++ b/site/src/components/docs/demos/time-slider/html/css/WithParts.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-slider-parts">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx b/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
index e0c06cb9..6783318e 100644
--- a/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
+++ b/site/src/components/docs/demos/time-slider/react/css/WithParts.tsx
@@ -10,7 +10,7 @@ export default function WithParts() {
     <Player.Provider>
       <Player.Container className="react-time-slider-parts">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.astro b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro
index 522a1b68..6879f056 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.astro
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.astro
@@ -6,5 +6,5 @@ import './CurrentDuration.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './CurrentDuration.ts';
+  import "./CurrentDuration.ts";
 </script>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentDuration.html b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
index 70e99b00..87568008 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentDuration.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentDuration.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-current-duration">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.astro b/site/src/components/docs/demos/time/html/css/CurrentTime.astro
index 05634a70..b935f08a 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.astro
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.astro
@@ -6,5 +6,5 @@ import './CurrentTime.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './CurrentTime.ts';
+  import "./CurrentTime.ts";
 </script>
diff --git a/site/src/components/docs/demos/time/html/css/CurrentTime.html b/site/src/components/docs/demos/time/html/css/CurrentTime.html
index 8caa1487..1683d666 100644
--- a/site/src/components/docs/demos/time/html/css/CurrentTime.html
+++ b/site/src/components/docs/demos/time/html/css/CurrentTime.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-current-time">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro
index 74984772..6fee408b 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.astro
@@ -6,5 +6,5 @@ import './CustomNegativeSign.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './CustomNegativeSign.ts';
+  import "./CustomNegativeSign.ts";
 </script>
diff --git a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
index 5f199e3f..c977b3c8 100644
--- a/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
+++ b/site/src/components/docs/demos/time/html/css/CustomNegativeSign.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-custom-negative-sign">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.astro b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro
index d731bc42..6b0fe167 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.astro
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.astro
@@ -6,5 +6,5 @@ import './CustomSeparator.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './CustomSeparator.ts';
+  import "./CustomSeparator.ts";
 </script>
diff --git a/site/src/components/docs/demos/time/html/css/CustomSeparator.html b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
index bd2e7fd0..3530b56a 100644
--- a/site/src/components/docs/demos/time/html/css/CustomSeparator.html
+++ b/site/src/components/docs/demos/time/html/css/CustomSeparator.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-custom-separator">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.astro b/site/src/components/docs/demos/time/html/css/Remaining.astro
index b48e23a6..099504ed 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.astro
+++ b/site/src/components/docs/demos/time/html/css/Remaining.astro
@@ -6,5 +6,5 @@ import './Remaining.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './Remaining.ts';
+  import "./Remaining.ts";
 </script>
diff --git a/site/src/components/docs/demos/time/html/css/Remaining.html b/site/src/components/docs/demos/time/html/css/Remaining.html
index d123fe56..436602ca 100644
--- a/site/src/components/docs/demos/time/html/css/Remaining.html
+++ b/site/src/components/docs/demos/time/html/css/Remaining.html
@@ -1,7 +1,7 @@
 <video-player class="html-time-remaining">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
index 347e5ab5..71ac9241 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
+++ b/site/src/components/docs/demos/time/react/css/CurrentDuration.tsx
@@ -10,7 +10,7 @@ export default function CurrentDuration() {
     <Player.Provider>
       <Player.Container className="react-time-current-duration">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
index e7f3618f..09ed9f6d 100644
--- a/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
+++ b/site/src/components/docs/demos/time/react/css/CurrentTime.tsx
@@ -10,7 +10,7 @@ export default function CurrentTime() {
     <Player.Provider>
       <Player.Container className="react-time-current-time">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
index d72353ce..2ffc4c45 100644
--- a/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
+++ b/site/src/components/docs/demos/time/react/css/CustomNegativeSign.tsx
@@ -10,7 +10,7 @@ export default function CustomNegativeSign() {
     <Player.Provider>
       <Player.Container className="react-time-custom-negative-sign">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
index 76b2a613..5f823acb 100644
--- a/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
+++ b/site/src/components/docs/demos/time/react/css/CustomSeparator.tsx
@@ -10,7 +10,7 @@ export default function CustomSeparator() {
     <Player.Provider>
       <Player.Container className="react-time-custom-separator">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/time/react/css/Remaining.tsx b/site/src/components/docs/demos/time/react/css/Remaining.tsx
index 20696658..36c56460 100644
--- a/site/src/components/docs/demos/time/react/css/Remaining.tsx
+++ b/site/src/components/docs/demos/time/react/css/Remaining.tsx
@@ -10,7 +10,7 @@ export default function Remaining() {
     <Player.Provider>
       <Player.Container className="react-time-remaining">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
index d86dbd14..1d00d290 100644
--- a/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
+++ b/site/src/components/docs/demos/use-media/react/css/BasicUsage.tsx
@@ -39,7 +39,7 @@ export default function BasicUsage() {
     <Provider>
       <Container className="react-use-media-basic">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/use-player/react/css/Selector.tsx b/site/src/components/docs/demos/use-player/react/css/Selector.tsx
index a60cafb6..da5f6e6b 100644
--- a/site/src/components/docs/demos/use-player/react/css/Selector.tsx
+++ b/site/src/components/docs/demos/use-player/react/css/Selector.tsx
@@ -35,7 +35,7 @@ export default function Selector() {
     <Provider>
       <Container className="react-use-player-selector">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
index 52f40bef..56edb16b 100644
--- a/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
+++ b/site/src/components/docs/demos/use-player/react/css/StoreAccess.tsx
@@ -27,7 +27,7 @@ export default function StoreAccess() {
     <Provider>
       <Container className="react-use-player-store">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/use-store/react/css/Selector.tsx b/site/src/components/docs/demos/use-store/react/css/Selector.tsx
index fab27b7c..8691b6c3 100644
--- a/site/src/components/docs/demos/use-store/react/css/Selector.tsx
+++ b/site/src/components/docs/demos/use-store/react/css/Selector.tsx
@@ -33,7 +33,7 @@ export default function Selector() {
     <Provider>
       <Container className="react-use-store-selector">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
index 7b82470e..ff5f1c6b 100644
--- a/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
+++ b/site/src/components/docs/demos/use-store/react/css/StoreAccess.tsx
@@ -28,7 +28,7 @@ export default function StoreAccess() {
     <Provider>
       <Container className="react-use-store-access">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/docs/demos/volume-slider/html/css/WithParts.astro b/site/src/components/docs/demos/volume-slider/html/css/WithParts.astro
index acb39eea..0edaa50c 100644
--- a/site/src/components/docs/demos/volume-slider/html/css/WithParts.astro
+++ b/site/src/components/docs/demos/volume-slider/html/css/WithParts.astro
@@ -6,5 +6,5 @@ import './WithParts.css';
 
 <HtmlDemo html={html} />
 <script>
-  import './WithParts.ts';
+  import "./WithParts.ts";
 </script>
diff --git a/site/src/components/docs/demos/volume-slider/html/css/WithParts.html b/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
index 63f3810a..451d8a04 100644
--- a/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
+++ b/site/src/components/docs/demos/volume-slider/html/css/WithParts.html
@@ -1,7 +1,7 @@
 <video-player class="html-volume-slider-parts">
     <media-container>
         <video
-            src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+            src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
             autoplay
             muted
             playsinline
diff --git a/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx b/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
index 5c133bc3..2686af3a 100644
--- a/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
+++ b/site/src/components/docs/demos/volume-slider/react/css/WithParts.tsx
@@ -10,7 +10,7 @@ export default function WithParts() {
     <Player.Provider>
       <Player.Container className="react-volume-slider-parts">
         <Video
-          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
+          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
           autoPlay
           muted
           playsInline
diff --git a/site/src/components/frames/ContentWidth.astro b/site/src/components/frames/ContentWidth.astro
index 478cd4c1..f3e78e51 100644
--- a/site/src/components/frames/ContentWidth.astro
+++ b/site/src/components/frames/ContentWidth.astro
@@ -1,5 +1,5 @@
 ---
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 /**
  * ContentWidth frame component for constraining content width.
@@ -27,6 +27,6 @@ const { class: className, margins = 'default' } = Astro.props;
 const marginClass = margins === 'lg' ? 'my-12' : 'my-6';
 ---
 
-<div class={twMerge('max-w-3xl mx-auto', marginClass, className)}>
+<div class={twMerge("max-w-3xl mx-auto", marginClass, className)}>
   <slot />
 </div>
diff --git a/site/src/components/frames/Minimal.astro b/site/src/components/frames/Minimal.astro
index 64ceabf3..d3541712 100644
--- a/site/src/components/frames/Minimal.astro
+++ b/site/src/components/frames/Minimal.astro
@@ -1,6 +1,6 @@
 ---
 
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 /**
  * Minimal frame component for wrapping documentation demos.
@@ -30,7 +30,7 @@ const marginClass = margins === 'lg' ? 'my-12' : 'my-6';
 
 <div
   class={twMerge(
-    'relative w-full max-w-3xl mx-auto flex rounded-lg overflow-hidden border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110',
+    "relative w-full max-w-3xl mx-auto flex rounded-xs overflow-hidden border border-faded-black dark:border-manila-dark",
     marginClass,
     className,
   )}
diff --git a/site/src/components/home/AnimatedBars.tsx b/site/src/components/home/AnimatedBars.tsx
new file mode 100644
index 00000000..1d0e3333
--- /dev/null
+++ b/site/src/components/home/AnimatedBars.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+import { useIntersection } from '@/hooks/useIntersection';
+
+export function AnimatedBars({ children, className }: { children: ReactNode; className?: string }) {
+  const [ref, isIntersecting] = useIntersection({ threshold: 0.01, rootMargin: '0px 0px -25% 0px' });
+
+  return (
+    <div ref={ref} className={className} data-animate={isIntersecting ? '' : undefined}>
+      {children}
+    </div>
+  );
+}
diff --git a/site/src/components/home/Built/BuiltSection.astro b/site/src/components/home/Built/BuiltSection.astro
new file mode 100644
index 00000000..0644aa85
--- /dev/null
+++ b/site/src/components/home/Built/BuiltSection.astro
@@ -0,0 +1,35 @@
+---
+import DataViz from './DataViz.astro';
+import Intro from './Intro.astro';
+import SocialProof from './SocialProof.astro';
+---
+
+<section
+  class="relative mb-32.5 flex flex-col bg-faded-black lg:mb-40 dark:bg-soot"
+>
+  <div class="absolute inset-0 z-0 built-bg-gray dark:built-bg-black"></div>
+  <header
+    class="relative mx-auto -mt-13.5 mb-5 flex h-27.5 w-full max-w-305 flex-col items-center justify-center px-10 text-center md:-mt-10 md:h-20.5"
+  >
+    <div
+      class="absolute top-0 right-5 bottom-0 left-5 z-0 grid overflow-hidden rounded-xs"
+      style="grid-template-rows: 1fr auto 1fr"
+    >
+      <div class="bg-gold"></div>
+      <div class="h-0.5 bg-faded-black dark:bg-soot"></div>
+      <div class="bg-orange"></div>
+    </div>
+    <h2
+      class="relative inline rounded-xs bg-faded-black p-2.5 text-center font-display text-h2 text-manila-light uppercase dark:bg-soot"
+    >
+      v10 is built different
+    </h2>
+  </header>
+  <div
+    class="relative mx-auto grid w-full max-w-305 auto-rows-auto grid-cols-1 gap-5 px-5 md:grid-cols-2"
+  >
+    <Intro />
+    <DataViz />
+    <SocialProof />
+  </div>
+</section>
diff --git a/site/src/components/home/Built/DataViz.astro b/site/src/components/home/Built/DataViz.astro
new file mode 100644
index 00000000..15af9c88
--- /dev/null
+++ b/site/src/components/home/Built/DataViz.astro
@@ -0,0 +1,83 @@
+---
+import clsx from 'clsx';
+import { AnimatedBars } from '../AnimatedBars';
+
+const seconds = [0, 5, 10, 15, 20];
+---
+
+<AnimatedBars
+  className="rounded-xs border border-manila-dark bg-faded-black p-5 md:p-10 lg:p-15"
+  client:idle
+>
+  <header class="text-p2">
+    <h3 class="font-bold text-manila-light">Download speeds</h3>
+    <span class="whitespace-nowrap text-manila-dark"
+      >(based on slow 4G connection)</span
+    >
+  </header>
+  <p
+    class="mt-6 inline-block items-center rounded-full border border-manila-light bg-faded-black px-8 py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:hidden"
+  >
+    VJS 8
+  </p>
+  <div class="mt-4 mb-2 data-bar w-full md:mt-5 md:mb-2.5"></div>
+  <div class="flex items-center gap-2.5">
+    <p
+      class="hidden min-w-30 items-center justify-center rounded-full border border-manila-light bg-faded-black py-0.5 text-center font-display text-h5 font-bold text-manila-light uppercase md:flex"
+    >
+      VJS 8
+    </p>
+    <p
+      class="flex gap-1 text-center font-display text-h5 text-manila-light uppercase lg:gap-2.5"
+    >
+      <span class="font-bold">3.96s</span>
+      <span>/</span>
+      <span class="whitespace-nowrap">722 KB</span>
+    </p>
+  </div>
+  <p
+    class="mt-6 inline-block items-center rounded-full border border-orange bg-faded-black px-8 py-0.5 text-center font-display text-h5 font-bold text-orange uppercase md:hidden"
+  >
+    VJS 10
+  </p>
+  <div
+    class="mt-4 mb-2 data-bar data-bar-orange md:mt-5 md:mb-2.5"
+    style="max-width: 32.25%"
+  >
+  </div>
+
+  <div class="flex items-center gap-2.5">
+    <p
+      class="hidden min-w-30 items-center justify-center rounded-full border border-orange bg-faded-black py-0 text-center font-display text-h5 font-bold text-orange uppercase md:flex"
+    >
+      VJS 10
+    </p>
+    <p
+      class="2xl flex gap-1 text-center font-display text-h5 text-orange uppercase lg:gap-2.5"
+    >
+      <span class="font-bold">1.29s</span>
+      <span>/</span>
+      <span class="whitespace-nowrap">198 KB</span>
+    </p>
+  </div>
+
+  <div class="flex w-full justify-between px-1 pt-4 pb-2">
+    {
+      Array.from({ length: 21 }, (_, i) => (
+        <div
+          class={clsx(
+            "h-4 w-px",
+            seconds.includes(i) ? "bg-manila-light" : "bg-warm-gray",
+          )}
+        />
+      ))
+    }
+  </div>
+  <div class="-mx-1.5 flex justify-between" style="width: calc(100% + 0.85rem)">
+    {
+      Array.from({ length: 5 }, (_, i) => (
+        <div class="w-5 text-center text-p3 text-manila-light">{i}s</div>
+      ))
+    }
+  </div>
+</AnimatedBars>
diff --git a/site/src/components/home/Built/Intro.astro b/site/src/components/home/Built/Intro.astro
new file mode 100644
index 00000000..0b14feef
--- /dev/null
+++ b/site/src/components/home/Built/Intro.astro
@@ -0,0 +1,17 @@
+---
+---
+
+<div
+  class="rounded-xs border border-manila-dark bg-faded-black p-5 md:p-10 lg:p-15"
+>
+  <p class="text-p2 text-manila-light">
+    VideoJS 10 is complete ground-up rewrite of the player for the modern web.
+    The UI is separated from the underlying media renderer. Every component is
+    independent and works together through open API contracts. We've structured
+    the project for modern JavaScript bundlers to support tree-shaking and
+    intelligent code splitting.
+    <br />
+    <br />
+    Start with a small player and only add what you need.
+  </p>
+</div>
diff --git a/site/src/components/home/Built/Marquee.astro b/site/src/components/home/Built/Marquee.astro
new file mode 100644
index 00000000..3b2f5d14
--- /dev/null
+++ b/site/src/components/home/Built/Marquee.astro
@@ -0,0 +1,26 @@
+---
+import TriangleArrow from '../../icons/triangle-arrow.svg?react';
+
+const REPEAT_COUNT = 4;
+const items = Array.from({ length: REPEAT_COUNT });
+---
+
+<div
+  class="relative z-1 col-span-full overflow-hidden border-b border-b-manila-dark py-8"
+  aria-label="Streaming bits on millions of sites"
+  role="marquee"
+>
+  <div
+    id="logos"
+    class="flex animate-marquee font-display text-h5 whitespace-nowrap text-manila-light uppercase"
+  >
+    {
+      [...items, ...items].map(() => (
+        <span class="inline-flex shrink-0 items-center gap-7 pr-7">
+          <span>Streaming bits on millions of sites</span>
+          <TriangleArrow width="0.75rem" />
+        </span>
+      ))
+    }
+  </div>
+</div>
diff --git a/site/src/components/home/Built/SocialProof.astro b/site/src/components/home/Built/SocialProof.astro
new file mode 100644
index 00000000..99d164e9
--- /dev/null
+++ b/site/src/components/home/Built/SocialProof.astro
@@ -0,0 +1,57 @@
+---
+import clsx from 'clsx';
+import {
+  AdobeLogo,
+  AmazonLogo,
+  AwgeLogo,
+  CNNLogo,
+  ConsumerReports,
+  CourseraLogo,
+  DropboxLogo,
+  LinkedinLogo,
+  SAPLogo,
+  TheOnionLogo,
+  UdemyLogo,
+  ZoomLogo,
+} from '../../icons/SocialProofLogos';
+import Marquee from './Marquee.astro';
+
+const LOGOS = [
+  { Logo: AdobeLogo, alt: 'Adobe' },
+  { Logo: LinkedinLogo, alt: 'Linkedin' },
+  { Logo: UdemyLogo, alt: 'Udemy' },
+  { Logo: AmazonLogo, alt: 'Amazon' },
+  { Logo: AwgeLogo, alt: 'AWGE' },
+  { Logo: ZoomLogo, alt: 'Zoom' },
+  { Logo: CourseraLogo, alt: 'Coursera' },
+  { Logo: CNNLogo, alt: 'CNN' },
+  { Logo: ConsumerReports, alt: 'Consumer Reports' },
+  { Logo: TheOnionLogo, alt: 'The Onion' },
+  { Logo: SAPLogo, alt: 'SAP' },
+  { Logo: DropboxLogo, alt: 'Dropbox' },
+];
+---
+
+<div
+  class="relative z-1 col-span-full -mb-12.5 overflow-hidden rounded-xs border border-manila-dark bg-faded-black md:-mb-10"
+>
+  <header class="px-2.5">
+    <Marquee />
+  </header>
+  <div
+    class="grid-separator-container relative z-0 grid auto-rows-auto grid-cols-2 gap-0 border-faded-black md:grid-cols-4 lg:grid-cols-6"
+  >
+    {
+      LOGOS.map((logo, index) => (
+        <div
+          class={clsx(
+            "grid-separators relative h-27.5 w-full items-center justify-center border-warm-gray bg-faded-black md:h-32 lg:h-40",
+            index >= 10 ? "hidden md:flex" : "flex",
+          )}
+        >
+          <logo.Logo width="6" />
+        </div>
+      ))
+    }
+  </div>
+</div>
diff --git a/site/src/components/HomePageDemo/Base.tsx b/site/src/components/home/Demo/Base.tsx
similarity index 74%
rename from site/src/components/HomePageDemo/Base.tsx
rename to site/src/components/home/Demo/Base.tsx
index 6ab6830c..59b0229c 100644
--- a/site/src/components/HomePageDemo/Base.tsx
+++ b/site/src/components/home/Demo/Base.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
 import type { Skin } from '@/stores/homePageDemos';
 import { framework, skin } from '@/stores/homePageDemos';
-import ClientCode from '../Code/ClientCode';
+import ClientCode from '../../Code/ClientCode';
 
 function generateHTMLCode(skin: Skin): string {
   const skinTag = skin === 'frosted' ? 'video-skin' : 'video-minimal-skin';
@@ -49,13 +49,13 @@ export default function BaseDemo({ className }: { className?: string }) {
 
   if ($framework === 'html') {
     return (
-      <TabsRoot key={$framework} className={className} maxWidth={false}>
-        <TabsList label="HTML implementation">
-          <Tab value="html" initial>
+      <TabsRoot variant="expanded" key={$framework} className={className} maxWidth={false}>
+        <TabsList variant="expanded" label="HTML implementation">
+          <Tab variant="expanded" value="html" initial>
             HTML
           </Tab>
         </TabsList>
-        <TabsPanel value="html" initial>
+        <TabsPanel variant="expanded" value="html" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
           <ClientCode code={generateHTMLCode($skin)} lang="html" />
         </TabsPanel>
       </TabsRoot>
@@ -63,13 +63,13 @@ export default function BaseDemo({ className }: { className?: string }) {
   }
 
   return (
-    <TabsRoot key={$framework} className={className} maxWidth={false}>
-      <TabsList label="React implementation">
-        <Tab value="react" initial>
+    <TabsRoot variant="expanded" key={$framework} className={className} maxWidth={false}>
+      <TabsList variant="expanded" label="React implementation">
+        <Tab variant="expanded" value="react" initial>
           React
         </Tab>
       </TabsList>
-      <TabsPanel value="react" initial>
+      <TabsPanel variant="expanded" value="react" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
         <ClientCode code={generateReactCode($skin)} lang="tsx" />
       </TabsPanel>
     </TabsRoot>
diff --git a/site/src/components/home/Demo/Demo.tsx b/site/src/components/home/Demo/Demo.tsx
new file mode 100644
index 00000000..7d61b6cb
--- /dev/null
+++ b/site/src/components/home/Demo/Demo.tsx
@@ -0,0 +1,38 @@
+import FrameworkControl from '../FrameworkControl';
+import BaseDemo from './Base';
+import EjectDemo from './Eject';
+
+/**
+ * Both BaseDemo and EjectDemo use ClientCode which has a top-level await (Shiki highlighter).
+ * If they're in separate Astro islands, Safari may throw a hydration error.
+ * https://github.com/withastro/astro/issues/10055
+ *
+ * Keep them in a single island to work around this.
+ */
+export default function Demo() {
+  return (
+    <section className="grid gap-y-20 lg:gap-y-0 gap-x-5 lg:grid-cols-2 mb-10 lg:mb-0 w-full max-w-305 mx-auto px-5">
+      <section className="grid lg:grid-rows-subgrid row-span-4 lg:border-t lg:py-10 border-faded-black dark:border-manila-light">
+        <h2 className="text-h2 dark:text-manila-light text-faded-black text-center font-display uppercase mb-2.5 lg:mb-1.25">
+          Assemble your player
+        </h2>
+        <p className="text-p2 mb-8 md:mb-10 dark:text-manila-dark text-warm-gray text-center font-instrument-sans font-light">
+          Feel at home with your framework, skin, and media source
+        </p>
+
+        <FrameworkControl className="mb-5 md:hidden" />
+        <BaseDemo className="lg:h-100 m-0" />
+      </section>
+      <section className="grid lg:grid-rows-subgrid row-span-4 lg:border-t lg:py-10 border-y border-faded-black dark:border-manila-light">
+        <h2 className="text-h2 dark:text-manila-light text-faded-black text-center font-display uppercase mb-2.5 lg:mb-1.25">
+          Take full control
+        </h2>
+        <p className="text-p2 mb-8 md:mb-10 dark:text-manila-dark text-warm-gray text-center font-instrument-sans font-light">
+          Make your player truly your own with fully-editable components
+        </p>
+        <FrameworkControl className="mb-5 md:hidden" />
+        <EjectDemo className="lg:h-100 m-0" />
+      </section>
+    </section>
+  );
+}
diff --git a/site/src/components/HomePageDemo/Eject.tsx b/site/src/components/home/Demo/Eject.tsx
similarity index 50%
rename from site/src/components/HomePageDemo/Eject.tsx
rename to site/src/components/home/Demo/Eject.tsx
index 19c65278..2f619436 100644
--- a/site/src/components/HomePageDemo/Eject.tsx
+++ b/site/src/components/home/Demo/Eject.tsx
@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { Tab, TabsList, TabsPanel, TabsRoot } from '@/components/Tabs';
 import type { Skin } from '@/stores/homePageDemos';
 import { framework, skin } from '@/stores/homePageDemos';
-import ClientCode from '../Code/ClientCode';
+import ClientCode from '../../Code/ClientCode';
 
 function generateReactCode(skin: Skin): string {
   return `react`;
@@ -30,21 +30,26 @@ export default function EjectDemo({ className }: { className?: string }) {
 
   if ($framework === 'html') {
     return (
-      <TabsRoot key={$framework} className={className} maxWidth={false}>
-        <TabsList label="HTML implementation">
-          <Tab value="html" initial>
+      <TabsRoot variant="expanded" key={$framework} className={className} maxWidth={false}>
+        <TabsList variant="expanded" label="HTML implementation">
+          <Tab variant="expanded" value="html" initial>
             HTML
           </Tab>
-          <Tab value="css">CSS</Tab>
-          <Tab value="javascript">JavaScript</Tab>
+          <Tab variant="expanded" value="css">
+            CSS
+          </Tab>
+          <Tab variant="expanded" value="javascript">
+            <span className="sm:hidden">JS</span>
+            <span className="hidden sm:inline">JavaScript</span>
+          </Tab>
         </TabsList>
-        <TabsPanel value="html" initial>
+        <TabsPanel variant="expanded" value="html" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
           <ClientCode code={generateHTMLCode($skin)} lang="html" />
         </TabsPanel>
-        <TabsPanel value="css">
+        <TabsPanel variant="expanded" value="css" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
           <ClientCode code={generateCSS($skin)} lang="css" />
         </TabsPanel>
-        <TabsPanel value="javascript">
+        <TabsPanel variant="expanded" value="javascript" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
           <ClientCode code={generateJS($skin)} lang="javascript" />
         </TabsPanel>
       </TabsRoot>
@@ -52,17 +57,19 @@ export default function EjectDemo({ className }: { className?: string }) {
   }
 
   return (
-    <TabsRoot key={$framework} className={className} maxWidth={false}>
-      <TabsList label="React implementation">
-        <Tab value="react" initial>
+    <TabsRoot variant="expanded" key={$framework} className={className} maxWidth={false}>
+      <TabsList variant="expanded" label="React implementation">
+        <Tab variant="expanded" value="react" initial>
           React
         </Tab>
-        <Tab value="css">CSS</Tab>
+        <Tab variant="expanded" value="css">
+          CSS
+        </Tab>
       </TabsList>
-      <TabsPanel value="react" initial>
+      <TabsPanel variant="expanded" value="react" initial className="bg-faded-black dark:bg-soot m-2.5 mt-0">
         <ClientCode code={generateReactCode($skin)} lang="tsx" />
       </TabsPanel>
-      <TabsPanel value="css">
+      <TabsPanel variant="expanded" value="css" className="bg-faded-black dark:bg-soot m-2.5 mt-0">
         <ClientCode code={generateReactCSS($skin)} lang="css" />
       </TabsPanel>
     </TabsRoot>
diff --git a/site/src/components/home/FrameworkControl.tsx b/site/src/components/home/FrameworkControl.tsx
new file mode 100644
index 00000000..5904003f
--- /dev/null
+++ b/site/src/components/home/FrameworkControl.tsx
@@ -0,0 +1,22 @@
+import { useStore } from '@nanostores/react';
+import { framework } from '@/stores/homePageDemos';
+import ToggleGroup from '../ToggleGroup';
+
+export default function FrameworkControl({ className }: { className?: string }) {
+  const $framework = useStore(framework);
+
+  return (
+    <ToggleGroup
+      className={className}
+      value={[$framework]}
+      onChange={(values) => {
+        if (values.length > 0) framework.set(values[0]);
+      }}
+      options={[
+        { value: 'react', label: 'React' },
+        { value: 'html', label: 'HTML' },
+      ]}
+      aria-label="Select framework"
+    />
+  );
+}
diff --git a/site/src/components/home/GetStartedBanner.astro b/site/src/components/home/GetStartedBanner.astro
new file mode 100644
index 00000000..2267047a
--- /dev/null
+++ b/site/src/components/home/GetStartedBanner.astro
@@ -0,0 +1,48 @@
+---
+import clsx from 'clsx';
+import ArrowIcon from '../icons/arrow.svg?react';
+import GetStartedLink from '../NavBar/GetStartedLink';
+---
+
+<section class="mx-auto w-full max-w-305 px-5">
+  <div
+    class="group relative mb-20 items-center bg-faded-black py-2.5 text-center text-manila-light transition-colors duration-200 has-[a:hover]:text-faded-black lg:mb-30 lg:flex lg:text-left lg:duration-300 dark:bg-manila-light dark:text-faded-black dark:has-[a:hover]:text-manila-light"
+  >
+    <div
+      class="absolute top-(--top) right-2.5 bottom-2.5 left-2.5 z-0 bg-orange duration-200 group-has-[a:hover]:top-2.5 lg:top-2.5 lg:left-(--lg-left) lg:duration-300 lg:group-has-[a:hover]:left-2.5 dark:bg-black"
+      style={{
+        "--top": "calc(100% - var(--spacing) * 15 - var(--spacing) * 2.5)",
+        "--lg-left": "calc(100% - var(--spacing) * 40 - var(--spacing) * 2.5)",
+        transitionProperty: "top, left",
+      }}
+    >
+    </div>
+    <h2
+      class={clsx(
+        "relative z-10 my-2.5 px-2.5 font-display text-h15 uppercase lg:m-0 lg:pr-14 lg:pl-9 xl:text-h1",
+      )}
+    >
+      Get<br class="md:hidden" />
+      <span
+        class="text-stroke-manila-light duration-200 group-has-[a:hover]:text-stroke-faded-black lg:duration-300 dark:text-stroke-faded-black dark:group-has-[a:hover]:text-stroke-manila-light"
+        style={{ transitionProperty: "-webkit-text-stroke" }}>Started</span
+      >
+    </h2>
+    <p
+      class={clsx(
+        "relative z-10 mb-8 px-2.5 text-p2 lg:mb-0 lg:max-w-54 lg:px-0",
+      )}
+    >
+      Everything you need to install and launch your player
+    </p>
+
+    <GetStartedLink
+      client:idle
+      className={clsx(
+        "relative z-10 ml-auto flex h-15 items-center justify-center text-faded-black lg:h-25 lg:w-40 lg:pr-2.5 dark:text-orange",
+      )}
+    >
+      <ArrowIcon width="3.8rem" />
+    </GetStartedLink>
+  </div>
+</section>
diff --git a/site/src/components/home/Header.astro b/site/src/components/home/Header.astro
new file mode 100644
index 00000000..01076532
--- /dev/null
+++ b/site/src/components/home/Header.astro
@@ -0,0 +1,64 @@
+---
+import FrameworkControl from '@/components/home/FrameworkControl';
+import HeroVideo from '@/components/home/HeroVideo';
+import SkinControl from '@/components/home/SkinControl';
+import MuxLogoSmall from '@/components/icons/mux-logo-small.svg?react';
+import { VJS10_DEMO_VIDEO } from '@/consts';
+
+const poster = `${VJS10_DEMO_VIDEO.poster}?time=0`;
+---
+
+<link
+  rel="preload"
+  href={poster}
+  as="image"
+  type="image/webp"
+  fetchpriority="high"
+  slot="priority-head"
+/>
+<header
+  class="relative mx-auto mb-25 grid w-full max-w-305 grid-cols-1 px-5 pt-19 [grid-template-areas:var(--grid-template-areas)] md:py-0 md:[grid-template-areas:var(--md-grid-template-areas)]"
+  style="--grid-template-areas: 'title' 'description' 'video' 'mux' 'control'; --md-grid-template-areas: 'video' 'mux' 'description' 'control'"
+>
+  <h1
+    class="z-10 mb-5 w-full self-center justify-self-center text-center font-display text-h2 text-balance uppercase [grid-area:var(--grid-area)] md:mb-0 md:px-5 md:text-h15 md:text-manila-light md:[grid-area:var(--md-grid-area)] lg:text-h1"
+    style="--grid-area: title; --md-grid-area: video;"
+  >
+    The Open Source Player <br class="lg:hidden" /><span
+      class="text-stroke-faded-black md:text-stroke-manila-light"
+      >for the Web</span
+    >
+  </h1>
+  {/* the additional px-5 is intentional */}
+  <p
+    class="mx-auto mb-20 w-full max-w-195 px-5 text-center text-p2 text-balance text-warm-gray md:mb-25 lg:text-p1 dark:text-manila-light"
+    style="grid-area:description"
+  >
+    For over 15 years, Video.js has been the world's web video player. Now
+    rebuilt in v10 for modern development and performance.
+  </p>
+
+  <HeroVideo
+    client:load
+    className="mb-3 aspect-2/1 md:mb-4 md:aspect-1180/570"
+    style={{ gridArea: "video" }}
+    poster={poster}
+  />
+  <p
+    class="mb-11 flex items-center justify-center gap-2.5 md:mb-20 md:justify-end md:pr-6 md:font-display md:text-(length:--md-text) md:uppercase"
+    style="grid-area:mux;--md-text:0.75rem;"
+  >
+    Video hosting by <a
+      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+      target="_blank"
+      rel="noopener"><MuxLogoSmall className="inline" width="3.25rem" /></a
+    >
+  </p>
+  <div
+    class="grid grid-cols-1 items-center justify-center gap-9 md:grid-cols-2"
+    style="grid-area:control"
+  >
+    <SkinControl client:idle />
+    <FrameworkControl client:idle className="hidden md:grid" />
+  </div>
+</header>
diff --git a/site/src/components/home/HeroVideo.tsx b/site/src/components/home/HeroVideo.tsx
index e4feb822..68121825 100644
--- a/site/src/components/home/HeroVideo.tsx
+++ b/site/src/components/home/HeroVideo.tsx
@@ -1,21 +1,34 @@
 import { useStore } from '@nanostores/react';
 import { createPlayer, Poster } from '@videojs/react';
+import { HlsVideo } from '@videojs/react/media/hls-video';
 import { MinimalVideoSkin, Video, VideoSkin, videoFeatures } from '@videojs/react/video';
-import { VJS8_DEMO_VIDEO } from '@/consts';
+import { VJS10_DEMO_VIDEO } from '@/consts';
 import { skin } from '@/stores/homePageDemos';
 import '@videojs/react/video/skin.css';
 import '@videojs/react/video/minimal-skin.css';
 
 const Player = createPlayer({ features: [...videoFeatures] });
 
-export default function HeroVideo({ className, poster }: { className?: string; poster: string }) {
+export default function HeroVideo({
+  className,
+  poster,
+  style,
+}: {
+  className?: string;
+  style?: React.CSSProperties;
+  poster: string;
+}) {
   const $skin = useStore(skin);
   const SkinComponent = $skin === 'frosted' ? VideoSkin : MinimalVideoSkin;
 
   return (
     <Player.Provider>
-      <SkinComponent className={className}>
-        <Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
+      <SkinComponent
+        className={className}
+        style={{ '--media-border-radius': `calc(var(--spacing) * 6)`, ...style } as React.CSSProperties}
+      >
+        {/*<HlsVideo src={VJS10_DEMO_VIDEO.hls} playsInline style={{ objectFit: 'cover' }} />*/}
+        <Video src={VJS10_DEMO_VIDEO.mp4} playsInline style={{ objectFit: 'cover' }} />
         <Poster src={poster} />
       </SkinComponent>
     </Player.Provider>
diff --git a/site/src/components/home/HomePageControls.tsx b/site/src/components/home/HomePageControls.tsx
deleted file mode 100644
index ea3156b2..00000000
--- a/site/src/components/home/HomePageControls.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useStore } from '@nanostores/react';
-import clsx from 'clsx';
-import { framework, skin } from '@/stores/homePageDemos';
-import ToggleGroup from '../ToggleGroup';
-
-export default function HomePageControls({ className }: { className?: string }) {
-  const $framework = useStore(framework);
-  const $skin = useStore(skin);
-
-  return (
-    <section
-      className={clsx(
-        'flex flex-row flex-wrap sm:grid sm:grid-cols-2 gap-2 sm:gap-9 items-center justify-center',
-        className
-      )}
-    >
-      <div className="flex justify-end">
-        <ToggleGroup
-          toggleClassName="md:text-base md:py-1"
-          value={[$skin]}
-          onChange={(values) => {
-            if (values.length > 0) skin.set(values[0]);
-          }}
-          options={[
-            { value: 'frosted', label: 'Frosted' },
-            { value: 'minimal', label: 'Minimal' },
-          ]}
-          aria-label="Select skin"
-        />
-      </div>
-      <div>
-        <ToggleGroup
-          toggleClassName="md:text-base md:py-1"
-          value={[$framework]}
-          onChange={(values) => {
-            if (values.length > 0) framework.set(values[0]);
-          }}
-          options={[
-            { value: 'react', label: 'React' },
-            { value: 'html', label: 'HTML' },
-          ]}
-          aria-label="Select framework"
-        />
-      </div>
-    </section>
-  );
-}
diff --git a/site/src/components/home/Roadmap.astro b/site/src/components/home/Roadmap.astro
new file mode 100644
index 00000000..a8dc0dd8
--- /dev/null
+++ b/site/src/components/home/Roadmap.astro
@@ -0,0 +1,127 @@
+---
+import clsx from 'clsx';
+import Check from '../icons/check.svg?react';
+import { AnimatedBars } from './AnimatedBars';
+
+const milestones = [
+  {
+    date: 'Oct 2025',
+    title: 'Tech Preview',
+    description: 'Kick the tires, and light the fires',
+    completed: true,
+  },
+  {
+    date: 'Mar 2026',
+    title: 'Beta',
+    description: 'Close to stable. Experimental adoption in real projects',
+    completed: true,
+  },
+  {
+    date: 'Mid 2026',
+    title: 'GA',
+    description: 'Stable APIs. Feature parity w/ Media Chrome, Vidstack, Plyr.',
+    completed: false,
+  },
+  {
+    date: 'End of 2026',
+    title: 'Core Feature Parity',
+    description: 'Video.js core/contrib plugins migrated',
+    completed: false,
+  },
+];
+---
+
+<section class="mx-auto w-full max-w-305 px-5">
+  <header
+    class="mb-12 border-y border-faded-black py-4 dark:border-manila-light"
+  >
+    <h2
+      class="text-center font-display text-h2 text-faded-black uppercase dark:text-manila-light"
+    >
+      Roadmap
+    </h2>
+  </header>
+
+  <div class="relative mb-20 h-full lg:mb-30">
+    <div class="relative grid gap-15 md:grid-cols-4 md:gap-8 lg:gap-12">
+      {
+        milestones.map((milestone) => (
+          <div class="relative flex gap-12 text-left md:flex-col md:items-center md:gap-0 md:text-center">
+            <p class="relative z-10 hidden pb-4 font-display text-h4 text-faded-black uppercase md:block dark:text-manila-light">
+              {milestone.date}
+            </p>
+            <div class="relative flex w-auto justify-center py-0.5 md:w-full">
+              <div
+                class={clsx(
+                  "relative z-10 flex h-10 w-10 items-center justify-center rounded-full border bg-manila-light dark:bg-faded-black",
+                  milestone.completed ? "border-orange" : "border-manila-dark",
+                )}
+              >
+                {milestone.completed && (
+                  <span class="contents text-orange">
+                    <Check width={"1.03rem"} />
+                  </span>
+                )}
+              </div>
+            </div>
+            <div>
+              <p class="relative z-10 block font-display text-h3 text-faded-black uppercase md:hidden dark:text-manila-light">
+                {milestone.date}
+              </p>
+              <h3 class="font-display text-h3 leading-none text-orange uppercase md:mt-5 md:px-1 lg:text-h2">
+                {milestone.title}
+              </h3>
+              <p class="mt-2.5 max-w-55 text-p2 text-warm-gray md:mx-auto dark:text-manila-light">
+                {milestone.description}
+              </p>
+            </div>
+          </div>
+        ))
+      }
+      <AnimatedBars
+        className="absolute left-0 mt-9 hidden w-full md:block"
+        client:idle
+      >
+        <div
+          class="absolute top-0 left-0 z-0 data-bar h-8 w-full brightness-50 dark:brightness-100"
+        >
+        </div>
+        <div
+          class="absolute top-0 left-0 z-2 data-bar h-8 bg-manila-light data-bar-orange dark:bg-faded-black"
+          style="max-width: 37.5%"
+        >
+        </div>
+        <div
+          class="absolute top-0 left-0 z-3 h-10 w-50 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
+        >
+        </div>
+        <div
+          class="absolute top-0 right-0 z-4 h-10 w-50 bg-linear-to-r from-transparent to-manila-light dark:to-faded-black"
+        >
+        </div>
+      </AnimatedBars>
+      <AnimatedBars
+        className="absolute top-0 left-0 mt-0 block h-full w-10 md:hidden"
+        client:idle
+      >
+        <div
+          class="absolute top-0 left-0 z-0 h-8 horizontal-bars w-full brightness-50 dark:brightness-100"
+        >
+        </div>
+        <div
+          class="absolute top-0 left-0 z-2 h-10 horizontal-bars bg-manila-light horizontal-bars-orange dark:bg-faded-black"
+          style="max-height: 30%"
+        >
+        </div>
+        <div
+          class="absolute right-0 bottom-0 z-4 h-50 w-10 bg-linear-to-b from-transparent to-manila-light dark:to-faded-black"
+        >
+        </div>
+        <div
+          class="absolute top-0 right-0 z-4 h-20 w-10 bg-linear-to-b from-manila-light to-transparent dark:from-faded-black"
+        >
+        </div>
+      </AnimatedBars>
+    </div>
+  </div>
+</section>
diff --git a/site/src/components/home/SkinControl.tsx b/site/src/components/home/SkinControl.tsx
new file mode 100644
index 00000000..9176576c
--- /dev/null
+++ b/site/src/components/home/SkinControl.tsx
@@ -0,0 +1,22 @@
+import { useStore } from '@nanostores/react';
+import { skin } from '@/stores/homePageDemos';
+import ToggleGroup from '../ToggleGroup';
+
+export default function SkinControl({ className }: { className?: string }) {
+  const $skin = useStore(skin);
+
+  return (
+    <ToggleGroup
+      className={className}
+      value={[$skin]}
+      onChange={(values) => {
+        if (values.length > 0) skin.set(values[0]);
+      }}
+      options={[
+        { value: 'frosted', label: 'Frosted' },
+        { value: 'minimal', label: 'Minimal' },
+      ]}
+      aria-label="Select skin"
+    />
+  );
+}
diff --git a/site/src/components/home/Sponsors.astro b/site/src/components/home/Sponsors.astro
new file mode 100644
index 00000000..876ec9a6
--- /dev/null
+++ b/site/src/components/home/Sponsors.astro
@@ -0,0 +1,106 @@
+---
+import clsx from 'clsx';
+import type { ComponentType, SVGProps } from 'react';
+import MuxLogo from '../icons/mux-logo.svg?react';
+import BrightcoveLogo from '../icons/sponsors/brightcove.svg?react';
+import BrowserStackLogo from '../icons/sponsors/browserstack.svg?react';
+import FastlyLogo from '../icons/sponsors/fastly.svg?react';
+import NetlifyLogo from '../icons/sponsors/netlify.svg?react';
+
+type SponsorItem = {
+  Logo: ComponentType<SVGProps<SVGSVGElement>>;
+  label: string;
+  href: string;
+  width: string;
+  className?: string;
+};
+
+const sponsors: SponsorItem[] = [
+  { Logo: FastlyLogo, label: 'CDN', href: 'https://fastly.com/', width: '7.8rem' },
+  { Logo: BrightcoveLogo, label: 'Emeritus Sponsor', href: 'https://brightcove.com/', width: '11rem' },
+  { Logo: BrowserStackLogo, label: 'Device Testing', href: 'https://browserstack.com/', width: '12rem' },
+  { Logo: NetlifyLogo, label: 'Static Hosting', href: 'https://netlify.com/', width: '11rem' },
+];
+---
+
+<section
+  class="row-span-2 mx-auto grid w-full max-w-305 grid-rows-subgrid px-5"
+>
+  <header class="border-t border-faded-black py-4 dark:border-manila-light">
+    <h2
+      class="border-b-0 text-center font-display text-h2 text-faded-black uppercase dark:text-manila-light"
+    >
+      Sponsors
+    </h2>
+  </header>
+  <div
+    class="grid grid-cols-1 rounded-xs border border-faded-black p-2 text-manila-light md:grid-cols-2 md:items-center dark:border-manila-light dark:text-faded-black"
+  >
+    <a
+      href="https://www.mux.com?utm_source=videojs&utm_campaign=vjs10"
+      target="_blank"
+      rel="noopener"
+      class="flex h-45 items-center justify-center bg-faded-black md:h-full md:min-h-74 dark:bg-soot dark:text-manila-light"
+    >
+      <div class="relative w-40 md:w-48">
+        <MuxLogo width="100%" />
+      </div>
+    </a>
+    <div class="flex flex-col gap-2 p-2.5 md:px-15">
+      <h3
+        class="mb-2.5 border-b border-manila-dark py-3 text-center font-display text-h5 font-bold text-orange uppercase md:mb-0 md:border-0 md:py-0 md:text-left dark:border-warm-gray"
+      >
+        Corporate Shepherd
+      </h3>
+      <p class="text-p2 text-warm-gray dark:text-manila-light">
+        The role of Corporate Shepherd is held by the company that has been
+        elected by the Video.js Technical Steering Committee (TSC) to be a
+        steward of the project and make significant investment into the
+        development of Video.js. The role is currently held by Mux, taking over
+        for Brigthcove in 2025. Mux is a leader in streaming video technology
+        and was founded by Steve Heffernan, the creator of Video.js.
+      </p>
+    </div>
+  </div>
+  <div
+    class="relative z-0 mt-5 h-max overflow-hidden rounded-xs md:border md:border-faded-black dark:border-manila-light"
+  >
+    <div
+      class="grid gap-4 md:grid-separator-container md:grid-cols-4 md:gap-0 md:border md:border-manila-light dark:border-faded-black dark:text-manila-light"
+    >
+      {
+        sponsors.map(({ Logo, label, href, width, className }) => (
+          <div
+            class={clsx(
+              "h-auto rounded-xs border border-faded-black px-2.5 md:border-0 md:border-manila-dark md:px-0 dark:border-manila-light md:dark:border-warm-gray",
+              className,
+            )}
+          >
+            <a
+              href={href}
+              target="_blank"
+              rel="noopener"
+              class="relative flex h-32.5 items-center justify-center bg-manila-light md:grid-separators md:h-37.5 dark:bg-faded-black"
+            >
+              <div class="mx-2.5 max-w-full" style={{ width }}>
+                <Logo width="100%" />
+              </div>
+            </a>
+            <h3 class="relative block border-t border-manila-dark py-5 text-center font-display text-h5 font-bold text-orange uppercase md:hidden">
+              {label}
+            </h3>
+          </div>
+        ))
+      }
+      {
+        sponsors.map(({ label }) => (
+          <div class="hidden border-manila-dark md:block dark:border-warm-gray">
+            <h3 class="relative grid h-full grid-cols-1 items-center bg-manila-light px-2.5 py-5 text-center font-display text-h5 font-bold text-orange uppercase md:grid-separators dark:bg-faded-black">
+              {label}
+            </h3>
+          </div>
+        ))
+      }
+    </div>
+  </div>
+</section>
diff --git a/site/src/components/icons/Discord.tsx b/site/src/components/icons/Discord.tsx
deleted file mode 100644
index 93b8a203..00000000
--- a/site/src/components/icons/Discord.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-interface DiscordProps extends React.SVGProps<SVGSVGElement> {
-  size?: number | string;
-}
-
-export default function Discord({ size = 24, ...props }: DiscordProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 126.644 96"
-      width={size}
-      height={size}
-      fill="currentColor"
-      {...props}
-    >
-      <title>Discord</title>
-      <path d="M81.15 0a73.742 73.742 0 00-3.36 6.794 97.868 97.868 0 00-28.994 0A67.874 67.874 0 0045.437 0a105.547 105.547 0 00-26.14 8.057C2.779 32.53-1.691 56.373.53 79.887a105.038 105.038 0 0032.05 16.088 76.912 76.912 0 006.87-11.063c-3.738-1.389-7.35-3.131-10.81-5.152.91-.657 1.794-1.338 2.653-1.995a75.255 75.255 0 0064.075 0c.86.707 1.743 1.389 2.652 1.995a68.772 68.772 0 01-10.835 5.178A76.903 76.903 0 0094.056 96a104.99 104.99 0 0032.051-16.063c2.626-27.277-4.496-50.917-18.817-71.855A103.923 103.923 0 0081.175.05L81.15 0zM42.28 65.414c-6.238 0-11.416-5.657-11.416-12.653s4.976-12.679 11.391-12.679 11.517 5.708 11.416 12.679c-.101 6.97-5.026 12.653-11.39 12.653zm42.078 0c-6.264 0-11.391-5.657-11.391-12.653s4.975-12.679 11.39-12.679S95.85 45.79 95.749 52.761c-.1 6.97-5.026 12.653-11.39 12.653z" />
-    </svg>
-  );
-}
diff --git a/site/src/components/icons/GitHub.tsx b/site/src/components/icons/GitHub.tsx
deleted file mode 100644
index 765bfc03..00000000
--- a/site/src/components/icons/GitHub.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-interface GitHubProps extends React.SVGProps<SVGSVGElement> {
-  size?: number | string;
-}
-
-export default function GitHub({ size = 24, ...props }: GitHubProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 98 96"
-      width={size}
-      height={size}
-      fill="currentColor"
-      {...props}
-    >
-      <title>GitHub</title>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-      />
-    </svg>
-  );
-}
diff --git a/site/src/components/icons/SocialProofLogos.tsx b/site/src/components/icons/SocialProofLogos.tsx
new file mode 100644
index 00000000..bd3ad7f0
--- /dev/null
+++ b/site/src/components/icons/SocialProofLogos.tsx
@@ -0,0 +1,209 @@
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  width?: string;
+}
+
+export const AdobeLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Adobe Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 100 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.71039 0.691421H16.5092L26.1112 23.6466H18.9252L12.8543 8.40461L8.84312 18.4072H13.6131L15.518 23.6466H0L9.71039 0.691421ZM34.118 5.45454C34.8149 5.45454 35.5738 5.516 36.3327 5.70038V0.0153638H42.3416V22.6325C40.9633 23.2471 37.9898 24 35.0163 24C29.6268 24 24.9961 20.9577 24.9961 14.8886C24.9961 8.81946 29.4564 5.46991 34.118 5.46991V5.45454ZM34.8769 19.0832C35.4344 19.0832 35.8835 18.9757 36.3327 18.8374V10.5096C35.8835 10.3406 35.4344 10.2638 34.8459 10.2638C32.879 10.2638 31.0516 11.7081 31.0516 14.7503C31.0516 17.7926 32.91 19.0679 34.8769 19.0679V19.0832ZM53.0432 5.45454C58.0455 5.45454 62.3045 8.8041 62.3045 14.7042C62.3045 20.6044 58.061 23.9539 53.0432 23.9539C48.0254 23.9539 43.751 20.6044 43.751 14.7042C43.751 8.8041 47.9635 5.45454 53.0432 5.45454ZM53.0432 18.991C54.7623 18.991 56.3574 17.6236 56.3574 14.7042C56.3574 11.7849 54.7623 10.4174 53.0432 10.4174C51.3241 10.4174 49.76 11.7849 49.76 14.7042C49.76 17.6236 51.2467 18.991 53.0432 18.991ZM63.7448 0.0153638H69.7847V5.70038C70.5126 5.5621 71.2715 5.45454 72.0304 5.45454C76.7229 5.45454 81.0748 8.4968 81.0748 14.4584C81.0748 20.758 76.4442 23.9539 70.9617 23.9539C68.6077 23.9539 65.6032 23.4776 63.7448 22.6172V0V0.0153638ZM71.1011 19.0525C73.1764 19.0525 75.0658 17.5775 75.0658 14.5352C75.0658 11.6927 73.2074 10.356 71.1941 10.356C70.6365 10.356 70.1874 10.4174 69.7847 10.6018V18.822C70.1255 18.9603 70.5746 19.0679 71.1011 19.0679V19.0525ZM91.3272 5.45454C95.8495 5.45454 100 8.32778 100 14.1204C100 14.904 99.969 15.6569 99.8606 16.4097H88.6015C89.221 18.4379 91.0175 19.3905 93.2631 19.3905C95.0906 19.3905 96.7787 18.9449 98.6836 18.1306V22.694C96.9181 23.5851 94.8118 23.9539 92.6436 23.9539C86.9134 23.9539 82.4532 20.5275 82.4532 14.7042C82.4532 8.88092 86.4953 5.45454 91.3272 5.45454ZM94.3627 12.6761C94.053 10.7247 92.7366 9.9411 91.3892 9.9411C90.0418 9.9411 88.9422 10.7708 88.4931 12.6761H94.3627Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const LinkedinLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 110 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M33.5789 15.8783V23.9167H29.5263V16.8467C29.5263 14.6883 28.3279 13.79 27.2105 13.79C26.4437 13.768 25.6995 14.0536 25.1416 14.5841C24.5836 15.1146 24.2574 15.8465 24.2347 16.6192C24.2285 16.7182 24.2285 16.8176 24.2347 16.9167V23.9167H20.2632V10.5H24.0842V12.3958H24.1363C24.5358 11.5733 26.2437 10.2083 28.5711 10.2083C30.8984 10.2083 33.5789 11.795 33.5789 15.8783ZM13.8947 23.9167H17.9474V10.5H13.8947V23.9167ZM15.9211 3.7625C15.4586 3.76825 15.0081 3.91169 14.6264 4.17475C14.2446 4.43782 13.9486 4.80877 13.7755 5.24094C13.6025 5.6731 13.5602 6.14718 13.6539 6.60352C13.7476 7.05986 13.9732 7.47809 14.3022 7.80558C14.6313 8.13307 15.0491 8.35519 15.5031 8.44401C15.9571 8.53283 16.4271 8.48437 16.8539 8.30474C17.2806 8.1251 17.6451 7.82231 17.9015 7.43445C18.1579 7.0466 18.2947 6.59101 18.2947 6.125C18.2947 5.50616 18.0508 4.91267 17.6165 4.47508C17.1822 4.0375 16.5931 3.79167 15.9789 3.79167L15.9211 3.7625ZM110 2.04167V25.9583C110 26.4998 109.787 27.0191 109.407 27.402C109.026 27.7849 108.511 28 107.974 28H84.2368C83.6994 28 83.184 27.7849 82.804 27.402C82.424 27.0191 82.2105 26.4998 82.2105 25.9583V2.04167C82.2105 1.50018 82.424 0.980877 82.804 0.59799C83.184 0.215104 83.6994 0 84.2368 0L107.974 0C108.511 0 109.026 0.215104 109.407 0.59799C109.787 0.980877 110 1.50018 110 2.04167ZM90.3158 10.5H86.2632V23.9167H90.3158V10.5ZM90.6632 6.125C90.6689 5.65202 90.5352 5.18797 90.2792 4.79151C90.0231 4.39505 89.6561 4.084 89.2246 3.89769C88.7931 3.71138 88.3165 3.65817 87.8549 3.74479C87.3934 3.83142 86.9678 4.05399 86.6318 4.38435C86.2958 4.71472 86.0646 5.13805 85.9674 5.60081C85.8702 6.06357 85.9114 6.54498 86.0857 6.98417C86.26 7.42336 86.5597 7.8006 86.9468 8.06818C87.3339 8.33577 87.7911 8.4817 88.2605 8.4875H88.2895C88.5936 8.49526 88.8963 8.44255 89.1802 8.33241C89.4641 8.22226 89.7237 8.05682 89.9442 7.84555C90.1646 7.63428 90.3415 7.38131 90.4649 7.10111C90.5883 6.8209 90.6557 6.51895 90.6632 6.2125V6.125ZM105.947 15.8783C105.947 11.795 103.267 10.2083 100.939 10.2083C98.6121 10.2083 96.8868 11.5733 96.5047 12.3958H96.4526V10.5H92.6316V23.9167H96.6842V16.9167C96.6842 14.7642 98.1374 13.8075 99.55 13.8075C100.708 13.8075 101.895 14.7058 101.895 16.8642V23.9167H105.947V15.8783ZM4.63158 4.08333H0V23.9167H12.1579V19.8333H4.63158V4.08333ZM62.5263 17.3658V18.5325H52.6842C52.691 18.6192 52.7126 18.704 52.7479 18.7833C53.0837 19.9092 54.2937 20.86 56.0768 20.86C56.6393 20.8885 57.2007 20.7853 57.717 20.5586C58.2332 20.3319 58.6904 19.9878 59.0526 19.5533L62.0053 21.4083C61.2859 22.321 60.3633 23.0501 59.3122 23.5365C58.2611 24.023 57.1111 24.2531 55.9553 24.2083C52.0705 24.2083 48.6316 21.8283 48.6316 17.2608C48.6316 12.6933 52.1053 10.2083 55.8337 10.2083C59.5621 10.2083 62.5263 12.7225 62.5263 17.3658ZM58.4737 15.75C58.4737 14.35 57.5705 13.195 55.7237 13.195C53.9868 13.195 52.7768 14.3617 52.6842 15.75H58.4737ZM49.3611 10.5H44.3937L40.0284 15.9658H39.9474V4.08333H35.8947V23.9167H39.9474V17.5H40.0284L44.4979 23.9167H49.5753L44.1158 16.5842L49.3611 10.5ZM74.1053 4.08333H78.1579V23.9167H74.3368V22.1667H74.2847C73.7753 23.0533 72.409 24.2025 70.0005 24.2025C67.1058 24.2025 63.6842 22.085 63.6842 17.2025C63.6842 12.81 66.6368 10.2317 69.9484 10.2317C70.7157 10.2204 71.4769 10.3702 72.1836 10.6715C72.8902 10.9727 73.5269 11.4189 74.0532 11.9817H74.1053V4.08333ZM74.2789 17.2025C74.2905 16.7628 74.2159 16.325 74.0595 15.9143C73.9031 15.5036 73.6679 15.128 73.3674 14.8089C73.0668 14.4898 72.7068 14.2336 72.3079 14.0547C71.909 13.8759 71.4791 13.778 71.0426 13.7667H70.9558C70.1061 13.7463 69.283 14.0666 68.6675 14.6572C68.052 15.2479 67.6944 16.0605 67.6732 16.9167V17.1733C67.6473 17.6023 67.7055 18.0322 67.8446 18.4386C67.9836 18.8449 68.2007 19.2196 68.4835 19.5414C68.7663 19.8631 69.1092 20.1256 69.4927 20.3138C69.8761 20.502 70.2927 20.6123 70.7184 20.6383H70.95C71.8432 20.626 72.6951 20.2575 73.3191 19.6135C73.9431 18.9695 74.2882 18.1025 74.2789 17.2025Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const UdemyLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 102 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M92.6016 25.3809L97.7803 12.873H102C102 12.873 95.2404 28.6661 93.5059 32.7207C91.82 36.6597 90.0591 38 87.3584 38H85.4873V34.3545H87C87.9293 34.3545 88.7941 34.0086 89.6172 32.125C90.4403 30.2417 90.4404 30.2412 90.4404 30.2412L83.3398 12.873H87.5586L92.6016 25.3809ZM4.15039 22.8662C4.15062 25.4484 6.09533 26.7058 7.92285 26.7061C9.76457 26.7061 11.696 25.4144 11.6963 22.832V12.873H15.8467V23.1035C15.8467 25.4823 15.0925 27.3184 13.583 28.5762C12.0735 29.8339 10.1868 30.4453 7.88867 30.4453C5.59079 30.4453 3.70441 29.8337 2.22949 28.5762C0.754488 27.3184 0 25.5509 0 23.2051V12.873H4.15039V22.8662ZM47.168 12.3965C49.6718 12.3965 51.7295 13.2124 53.3066 14.8779C54.9184 16.5436 55.707 18.5831 55.707 21.0303C55.707 21.8177 55.6195 22.6566 55.6191 22.6602H42.209C42.434 25.2632 44.4316 26.9443 47.4072 26.9443C49.0394 26.9443 50.4712 26.4003 51.7275 25.292L54.8105 27.0557C52.9292 29.1798 50.4211 30.4111 47.2705 30.4111C44.5608 30.4111 42.3312 29.5952 40.6504 27.998C38.9698 26.3995 38.1123 24.2586 38.1123 21.5732V21.4375C38.1124 18.7183 38.9699 16.5435 40.6504 14.8779C42.3657 13.2124 44.5273 12.3965 47.168 12.3965ZM36.1201 30.0029H32.0049V28.4258C31.0667 29.2833 29.2918 30.377 26.4824 30.377C24.0478 30.3769 21.9902 29.5267 20.3096 27.8271C18.6633 26.0932 17.8399 23.9863 17.8398 21.4365C17.8398 18.8867 18.6633 16.7799 20.3096 15.0801C21.9902 13.3476 24.0478 12.4981 26.4824 12.498C28.5287 12.498 30.6449 13.2154 32.0049 14.4238V6.3125H36.1201V30.0029ZM76.9414 12.5332C80.5215 12.5332 82.9434 14.9312 82.9434 19.3975V30.002H78.8281V19.9746C78.828 17.6302 77.6967 16.169 75.7412 16.1689C73.718 16.1689 72.3117 17.7998 72.3115 20.1455V30.0029H68.2305V19.9766C68.2305 17.632 67.0991 16.1699 65.1436 16.1699C63.2227 16.1702 61.7822 17.836 61.7822 20.1475V30.0039H57.7012V12.874H61.7822V14.6572C62.5095 13.7731 63.9706 12.5332 66.4463 12.5332C69.3771 12.5332 70.6314 14.2155 71.0762 15.0566C72.1895 13.8191 73.815 12.5332 76.9414 12.5332ZM27.0312 16.2021C25.5563 16.2021 24.3557 16.7128 23.3613 17.6982C22.4015 18.6836 21.921 19.9416 21.9209 21.4375C21.9209 22.9333 22.4015 24.1913 23.3613 25.1768C24.3557 26.1622 25.5562 26.6729 27.0312 26.6729C28.5062 26.6728 29.7751 26.1621 30.7695 25.1768C31.7984 24.1913 32.3135 22.9334 32.3135 21.4375C32.3134 19.9416 31.7984 18.6836 30.7695 17.6982C29.7751 16.713 28.506 16.2022 27.0312 16.2021ZM47.167 15.8633C45.8979 15.8633 44.7651 16.2368 43.8398 16.9512C42.9541 17.6338 42.4465 18.4725 42.3135 19.4668H51.5186C51.4801 18.5042 51.038 17.6667 50.2188 16.9854C49.3612 16.237 48.367 15.8633 47.167 15.8633ZM15.8467 4.5332V9.06641H15.8457L7.92188 4.5332L0 9.06641V4.5332L7.92285 0L15.8467 4.5332Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const AmazonLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 100 30"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.2871 19.9736C13.7439 19.4853 14.2307 18.8199 14.8828 19.2002C22.3478 23.5173 31.5778 26.1152 41.1123 26.1152C47.5426 26.1152 54.6169 24.792 61.1211 22.0479C62.1035 21.6334 62.9246 22.6879 61.9639 23.3965C56.1597 27.6487 47.7471 29.918 40.5039 29.918C30.3476 29.918 21.2044 26.1836 14.2871 19.9736ZM57.459 19.6484C60.7762 17.3279 66.2196 17.9976 66.8545 18.7754C67.4892 19.5575 66.6892 24.9806 63.5723 27.5693C63.094 27.9669 62.6375 27.7557 62.8506 27.2285C63.5505 25.4913 65.1193 21.5979 64.376 20.6514C63.6369 19.7093 59.4721 20.2064 57.6025 20.4268C57.033 20.4959 56.946 20.0028 57.459 19.6484ZM77.8018 0.150391C82.3886 0.150391 84.8711 4.06563 84.8711 9.04395C84.8711 13.8537 82.1278 17.6699 77.8018 17.6699C73.2977 17.6697 70.8457 13.7538 70.8457 8.875C70.8458 3.96614 73.3283 0.150578 77.8018 0.150391ZM7.43066 0C8.93493 6.77655e-05 10.9001 0.398148 12.0869 1.53027C13.5907 2.92596 13.4473 4.78803 13.4473 6.81445V11.6035C13.4474 13.0422 14.0472 13.6734 14.6123 14.4512C14.8122 14.7276 14.8563 15.0601 14.6045 15.2676C13.9741 15.7905 12.8518 16.7631 12.2344 17.3076L12.2256 17.2988C12.0212 17.4802 11.7255 17.493 11.4951 17.3721C10.4694 16.5253 10.2867 16.1321 9.72168 15.3242C8.02611 17.0441 6.82589 17.5576 4.62598 17.5576C2.02604 17.5576 0 15.9631 0 12.7695C0.000138381 10.2763 1.36126 8.57772 3.2959 7.74805C4.97408 7.01356 7.31728 6.88375 9.1084 6.68066V6.2832C9.10841 5.55292 9.16476 4.68849 8.73438 4.05762C8.3561 3.49174 7.63464 3.25883 7 3.25879C5.82179 3.25879 4.76924 3.85898 4.5127 5.10352C4.46054 5.37997 4.25659 5.65186 3.97852 5.66504L0.978516 5.3457C0.726424 5.28954 0.448248 5.08653 0.517578 4.70215C1.20887 1.08941 4.49159 0 7.43066 0ZM47.9561 0C49.4603 6.77655e-05 51.4255 0.398148 52.6123 1.53027C54.1161 2.92596 53.9727 4.78803 53.9727 6.81445V11.6035C53.9728 13.0422 54.5726 13.6734 55.1377 14.4512C55.3376 14.7276 55.3817 15.0601 55.1299 15.2676C54.4995 15.7905 53.3771 16.7631 52.7598 17.3076L52.751 17.2988C52.5466 17.4802 52.2509 17.493 52.0205 17.3721C50.9948 16.5253 50.8121 16.1321 50.2471 15.3242C48.5515 17.0441 47.3513 17.5576 45.1514 17.5576C42.5514 17.5576 40.5254 15.9631 40.5254 12.7695C40.5255 10.2763 41.8866 8.57772 43.8213 7.74805C45.4995 7.01356 47.8427 6.88375 49.6338 6.68066V6.2832C49.6338 5.55292 49.6902 4.68849 49.2598 4.05762C48.8815 3.49174 48.16 3.25883 47.5254 3.25879C46.3472 3.25879 45.2946 3.85898 45.0381 5.10352C44.9859 5.37997 44.782 5.65186 44.5039 5.66504L41.5039 5.3457C41.2518 5.28954 40.9736 5.08653 41.043 4.70215C41.7343 1.08941 45.017 0 47.9561 0ZM33.4717 0.150391C34.7673 0.150391 36.1846 0.682277 37.0498 1.875C38.028 3.20167 37.8281 5.12872 37.8281 6.81836L37.8242 16.7705C37.8242 17.0859 37.5589 17.3407 37.2285 17.3408H34.1416C33.8329 17.3192 33.585 17.073 33.585 16.7705V8.41309C33.585 7.74758 33.6459 6.08797 33.498 5.45703C33.2676 4.39836 32.5763 4.10059 31.6807 4.10059C30.9329 4.10059 30.1504 4.59743 29.833 5.39258C29.595 5.98902 29.5522 6.88677 29.5459 7.67578V16.7705C29.5459 17.086 29.2806 17.3408 28.9502 17.3408H25.8633C25.5503 17.3192 25.3066 17.073 25.3066 16.7705L25.3027 8.41309C25.3027 6.65432 25.5938 4.06562 23.3984 4.06543C21.4546 4.06543 21.2774 5.9975 21.2637 7.70215V16.7705C21.2637 17.0859 20.9983 17.3407 20.668 17.3408H17.5762C17.2808 17.319 17.0462 17.0991 17.0244 16.8184V1.04883C17.0247 0.733563 17.2898 0.483398 17.6201 0.483398H20.5029C20.8028 0.496513 21.0417 0.725634 21.0635 1.01074V3.07129H21.1201C21.8723 1.07937 23.2853 0.150393 25.1895 0.150391C27.1241 0.150391 28.3326 1.0794 29.2021 3.07129C29.95 1.07936 31.6501 0.150465 33.4717 0.150391ZM95.4629 0.150391C96.8498 0.150391 98.2017 0.647586 99.0713 2.00879C99.88 3.27066 99.8809 5.3925 99.8809 6.91797V16.8438C99.8461 17.1202 99.5893 17.3406 99.2852 17.3408H96.1846C95.9021 17.3191 95.6671 17.1116 95.6367 16.8438V8.2793C95.6367 6.55504 95.8369 4.03125 93.7021 4.03125C92.95 4.0313 92.2585 4.53243 91.915 5.29297C91.4803 6.25661 91.4238 7.21627 91.4238 8.2793V16.7705C91.4195 17.086 91.1498 17.3408 90.8193 17.3408H87.7412C87.4327 17.3191 87.1846 17.0729 87.1846 16.7705L87.1807 0.99707C87.2069 0.707688 87.4634 0.483398 87.7764 0.483398H90.6416C90.911 0.496414 91.1324 0.677633 91.1934 0.923828V3.33496H91.25C92.1152 1.17879 93.3284 0.150456 95.4629 0.150391ZM68.4668 0.441406C68.7928 0.441406 69.0536 0.67471 69.0537 1.01172V2.94336C69.0494 3.26747 68.776 3.6915 68.2891 4.36133L63.0234 11.833C64.9799 11.7855 67.0455 12.0745 68.8193 13.0684C69.2193 13.2931 69.328 13.6222 69.3584 13.9463V16.3525C69.3584 16.681 68.993 17.066 68.6104 16.8672C65.4844 15.2381 61.3323 15.0611 57.876 16.8848C57.5239 17.0747 57.1545 16.6946 57.1543 16.3662V14.0801C57.1543 13.7128 57.1588 13.0858 57.5283 12.5283L63.6279 3.83398H58.3193C57.9933 3.83391 57.7324 3.6046 57.7324 3.26758V1.01172C57.7325 0.67039 57.9936 0.441406 58.3066 0.441406H68.4668ZM9.1084 9.14453C6.87372 9.14455 4.51275 9.6196 4.5127 12.2383C4.5127 13.565 5.20467 14.4639 6.3916 14.4639C7.26091 14.4637 8.03905 13.9324 8.53027 13.0684C9.13895 12.0053 9.1084 11.0066 9.1084 9.80957V9.14453ZM49.6338 9.14453C47.3991 9.14455 45.0381 9.6196 45.0381 12.2383C45.0381 13.565 45.7301 14.4639 46.917 14.4639C47.7863 14.4637 48.5644 13.9324 49.0557 13.0684C49.6643 12.0053 49.6338 11.0066 49.6338 9.80957V9.14453ZM77.8281 3.37012C75.55 3.37016 75.4062 6.45587 75.4062 8.37891C75.4062 10.3064 75.3762 14.4195 77.8018 14.4199C80.1974 14.4199 80.3105 11.1006 80.3105 9.07812C80.3105 7.74722 80.2539 6.15724 79.8496 4.89551C79.5018 3.79786 78.8107 3.37012 77.8281 3.37012Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const AwgeLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg width="128" height="36" viewBox="0 0 128 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M91.266 0.36761C92.3464 0.906089 93.4271 0.810135 93.9896 4.16448L82.4691 13.2192C80.2878 14.934 78.4868 16.9197 76.597 18.9535C74.4123 21.3064 72.7036 23.9815 71.3832 26.9242C71.0093 27.7577 70.2071 30.591 70.6976 31.5034C73.6883 32.779 80.3484 27.2647 82.0912 25.1723L84.1839 22.6616L85.5042 21.4125L81.7171 22.8569C80.9284 23.1587 80.1393 23.7798 79.306 23.893C78.5277 23.999 78.1405 23.0965 77.6878 22.685C76.8784 21.9476 76.1134 21.2891 75.599 20.267C76.4837 19.5367 77.475 19.2352 78.514 18.8168L89.4857 14.3881L97.3949 11.2739C98.2214 10.9481 99.0927 10.6295 99.9671 10.434C100.118 10.3997 100.396 10.0879 100.55 10.0326C102.872 9.24036 103.644 9.66896 103.535 8.37249C103.518 8.18047 103.99 7.83796 104.179 7.92327L105.619 8.57464L122.141 2.0932L124.051 1.33831C124.051 1.33831 125.564 0.652559 126.548 0.607844C127.533 0.563257 127.999 1.33831 127.999 1.33831C127.759 1.55779 127.282 1.58873 126.97 1.75335C125.9 2.31913 124.864 2.70967 123.705 3.07659C122.618 3.423 121.579 3.90711 120.519 4.34613L118.039 5.37542L113.275 7.41253L113.183 7.82757C113.155 7.95094 112.716 7.95385 112.592 8.01214C112.229 8.18706 111.717 8.43448 111.313 8.59222L106.871 10.3139C106.614 10.4134 106.261 10.7157 106.028 10.9008L103.709 17.976L107.517 16.5112C109.328 15.8149 110.957 14.8724 112.768 14.183L115.518 13.1401C116.348 12.8245 117.165 12.3477 118.067 12.3032C118.547 12.2791 118.876 12.2383 119.264 11.9262C119.549 11.6932 119.84 11.8642 120.063 11.8471L121.301 11.7651C121.476 11.7548 121.716 11.7918 121.877 11.8364L122.477 11.8432C121.668 13.1499 120.961 12.8861 119.641 13.517C119.96 13.7228 121.835 12.5711 122.161 13.1059C120.865 13.8603 119.624 14.3752 118.314 14.8657C119.01 14.8553 119.562 14.725 120.289 14.5981L119.085 15.3285C118.489 15.6885 116.24 16.737 116.18 16.8852C116.177 16.8955 116.252 16.9746 116.352 17.0912L115.018 17.6606L115.563 17.1157C113.965 17.637 112.572 18.2167 111.083 18.9301L111.728 18.9467L109.942 19.9584C108.824 20.5895 107.616 20.9635 106.45 21.4643C105.969 21.6701 105.524 21.9686 104.975 22.1469C103.685 22.5722 102.299 23.0043 101.14 23.728L99.0453 28.1938L107.207 25.0073L109.245 24.1606C110.432 23.6667 111.598 23.0213 112.873 22.7846C113.748 22.6234 114.623 22.6542 115.37 22.0678C115.696 22.7298 116.472 22.0751 116.4 22.3803L116.334 22.6508C116.321 22.716 116.18 22.6412 116.033 22.6069L115.827 23.1L114.143 24.0502L114.63 24.3832C113.145 25.4602 112.441 25.5254 110.843 26.352C111.755 26.5269 112.281 25.5973 113.231 25.81C110.809 27.0241 108.515 28.2521 106.059 29.3119C104.852 29.8333 102.639 30.1556 101.545 31.3149C101.655 31.8703 100.924 31.7198 100.609 31.9565C99.3401 32.8994 99.3601 32.4839 98.3382 33.0668C98.3382 33.0668 95.4441 34.9706 94.264 34.5766C93.0842 34.1822 92.5931 33.2524 92.5931 33.2524C92.6136 33.0398 92.3397 32.7759 92.2025 32.6147C92.0104 32.3883 91.5952 31.2733 92.1302 31.016L93.9515 30.1489L94.9398 28.4985C95.5468 27.4835 96.222 26.5575 96.5033 25.3676C96.0609 25.5013 95.6421 25.4843 95.2992 25.1791C94.8636 24.7882 92.7585 22.768 93.221 22.1127C94.1711 21.6017 95.2034 21.1452 96.2289 20.8022L99.3773 19.7524C99.9568 18.607 100.324 17.4242 100.77 16.2514L101.611 14.0561L100.239 14.5737L101.106 14.5844L92.2406 18.2367L92.6625 18.2094C92.7411 18.2035 92.8228 18.435 92.7513 18.4662L88.6283 20.103L88.388 21.6459L88.8031 20.8432C89.2524 22.1602 87.507 24.8424 87.3011 25.4633L87.0306 26.2836C86.914 26.6367 86.8108 26.8186 86.3822 27.0414L86.7865 27.2299C86.0013 27.182 86.1589 27.7992 85.9017 28.101C85.1643 28.9584 84.3757 29.7751 83.5423 30.5434C82.9524 31.0887 82.1975 31.476 81.6488 32.059C80.6509 33.122 81.2442 32.1621 80.2601 33.0707C80.2601 33.0707 77.4679 35.0219 74.5697 35.0219C71.6715 35.0219 69.555 33.0707 69.555 33.0707C69.2908 32.4979 68.0393 31.5649 67.4974 30.8207L67.0345 29.1235C66.743 28.0466 66.9075 26.7087 67.2367 25.6284C67.7443 23.9649 68.6536 22.6199 69.5111 21.1176C70.221 19.8727 71.1948 18.4221 72.1859 17.4789C72.3094 17.3623 72.752 17.3451 72.8275 17.2114L73.6986 15.644C74.5114 14.183 75.8904 13.264 77.0736 12.1391C78.0819 11.1753 79.0454 10.2621 80.1498 9.41156L80.2533 8.91156C81.1313 8.24618 81.9615 7.55995 82.8978 7.00433C83.3436 6.74031 83.7691 6.53081 84.1703 6.19476L86.3988 4.32855L88.2406 2.66253L89.7054 1.34808L91.2523 0.377375L91.266 0.36761ZM74.7757 0.0180005C75.7983 -0.17969 77.3801 1.31578 77.3998 1.33441L77.7396 1.57464C77.8251 1.63306 77.6398 1.94147 77.5677 2.03753L73.2084 7.67327L64.7269 19.2895C62.6313 22.1602 56.8315 30.6049 54.3929 32.3129C52.7912 33.4345 51.5494 32.453 50.0677 31.6332C49.6699 31.4138 48.929 31.2289 48.682 30.7592C48.315 29.4559 48.0995 28.1038 48.096 26.7182C48.0961 26.3618 48.1677 25.9335 48.1917 25.601L48.2806 24.2797C48.3424 23.3984 48.5109 22.5818 48.7201 21.7416C48.8057 21.3989 48.823 21.0082 48.8812 20.6586C48.9464 20.2779 49.0941 19.9207 49.0941 19.5434L38.8519 33.0737C38.8519 33.0737 37.3299 34.977 36.349 34.9262C35.3681 34.8748 31.5707 33.0737 31.5707 33.0737C30.8648 32.1677 32.2393 28.3762 32.7093 27.2953L32.8128 28.0151L33.097 26.7084C33.3783 26.1562 33.5569 25.6484 33.7318 25.0688L34.1976 23.519L34.4105 22.8432L33.8822 23.3159C34.2011 22.1534 34.4827 20.8745 35.1205 19.8285C35.3571 19.441 35.6929 19.0873 35.9125 18.645L36.5511 17.3588L37.1136 15.1606L37.7757 13.5004C37.8992 13.1917 38.0844 12.831 38.2113 12.5532L37.388 12.7114L37.6927 12.3686C37.0377 12.1218 36.7191 12.5777 36.431 12.9721C35.9303 13.6615 34.8734 13.4868 34.1566 13.6274C32.5003 13.9498 32.6713 14.3507 31.7796 14.4467C31.2967 14.4983 31.2414 15.0016 31.0326 15.1254C30.5627 15.4067 30.0998 15.3387 29.8529 15.9526L25.1644 27.6381L23.4906 31.6371L22.1595 34.9711C22.1595 34.9711 19.9028 33.4996 19.6556 32.7621C19.4087 32.0247 20.4955 30.4261 20.9105 29.0473L21.1166 28.3617C20.7055 29.7357 24.1311 20.9295 23.8705 21.5434L24.8548 19.2211L25.4828 17.6811L25.7816 16.8754L24.4847 16.7826C23.936 16.7415 23.2262 17.0813 22.7084 17.27L22.4955 17.7465C21.4734 18.1203 20.4684 18.4904 19.3949 18.6996C19.1035 18.7579 18.9765 18.8503 18.7162 18.9428L14.4007 20.4594C13.5298 20.7648 12.9845 21.6907 12.3089 22.3285C9.86697 24.6368 6.01542 28.104 3.04527 29.476C2.55827 29.7024 1.98917 29.7158 1.54331 29.3969L0.178078 28.4194C0.0923361 28.3576 -0.0207328 28.1042 0.00327329 28.0151C0.0273619 27.9259 0.143157 27.7677 0.235695 27.7162L2.57554 26.4409C4.28002 25.5114 5.59724 24.0711 7.11655 22.6616L2.75327 23.5561C2.26638 23.2714 1.75514 22.8502 1.31968 22.4867C0.969923 22.4147 0.794906 22.2699 0.609719 21.9819L0.328469 21.5463C0.0417968 21.0969 3.77243 20.223 4.18394 20.0961L8.32359 18.8305L11.2728 17.8598C12.1131 17.582 12.8131 17.3346 13.4613 16.6899L14.6205 15.5375L15.2621 14.8481L19.0042 11.0991L22.7084 7.55316C23.3188 6.97011 23.8671 6.36578 24.5599 5.90277C24.92 5.66268 25.2664 5.37108 25.5716 5.07269L26.224 4.43206C26.7487 3.9176 27.222 3.35163 27.8119 2.88519C28.4018 2.41873 28.9817 1.92429 29.4242 1.34808C29.4503 1.33304 30.6111 0.66899 31.8216 0.621516C33.0334 0.574191 33.8319 1.33262 33.848 1.34808L33.8617 1.34124L34.7777 2.22991C34.5753 3.31366 34.2599 4.33915 33.8792 5.39202L31.6595 11.5385L35.4359 10.6362C35.9058 10.523 36.3487 10.3583 36.8529 10.3618C38.2554 10.3719 38.4063 9.32639 38.9584 10.2211C39.2738 9.60385 39.6377 8.95588 39.888 8.24261L40.2142 7.31292C40.3239 6.99746 40.4166 6.57226 40.4818 6.26702C40.5332 6.02694 40.859 5.64545 40.931 5.36077L41.5755 2.86761C41.61 2.73744 41.8495 2.58375 41.9593 2.59027C42.4807 2.62113 41.6989 3.7324 41.8841 4.14398L42.4125 2.92913L43.5511 3.0014C43.9968 3.02883 44.518 3.46418 44.9671 3.79339C44.24 5.78262 43.9796 7.70704 43.3246 9.68597L37.7923 26.4789C38.3205 26.1874 38.65 25.7202 38.9964 25.2846L39.2396 25.4809L41.2875 23.309L42.2855 22.2534L42.6048 21.725L43.9623 19.808L45.7533 17.2455C46.9194 15.5718 48.8574 13.925 49.9584 11.8569C50.1093 11.5685 50.3664 10.8319 50.8119 10.9448C52.0912 11.2672 53.6077 11.6069 54.6195 12.5844C54.0742 13.8877 53.6314 15.047 53.4222 16.4291L51.9955 25.8852C51.8377 26.921 51.9437 27.8471 51.9505 28.9653L52.4652 28.4272L52.1664 28.4028L53.6654 26.3959C53.8369 26.1662 54.1358 25.8752 54.3587 25.6352L54.6332 25.7719L55.6341 24.9867C56.4058 24.3831 56.7797 22.8567 57.4896 21.9203L57.2699 21.7524C57.534 21.6701 57.8401 21.5529 58.0013 21.3471C58.4127 20.8124 58.8855 20.3564 59.2386 19.808C60.1372 18.419 61.023 17.1356 62.2337 16.0141C62.5902 15.6848 62.6959 15.1325 62.9222 14.7553C63.3578 14.0248 63.8861 13.27 64.4486 12.6801C64.7367 12.3817 64.9534 12.2553 65.1214 11.8403C65.2723 11.4665 66.3074 10.2047 66.6781 9.80316C67.8785 8.51012 68.6405 6.93513 69.6351 5.48089C70.6297 4.02685 71.881 2.7096 72.975 1.33441C72.975 1.33441 73.747 0.217141 74.7757 0.0180005ZM29.6195 5.67327C26.1005 8.73952 22.8726 11.8953 19.5697 15.1948C22.3339 14.4197 24.8173 13.624 27.3998 12.7426L29.1253 8.24554L29.1214 8.24261L28.721 8.5512C29.0537 7.57028 29.3588 6.75709 29.6195 5.67327Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const ZoomLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 100 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M81.4186 6.59723C81.8008 7.24286 81.9259 7.97743 81.9672 8.80324L82.0214 9.90393V17.6007L82.0769 18.7025C82.1878 20.502 83.5433 21.8325 85.3956 21.9457L86.5152 22V9.90393L86.5706 8.80324C86.6166 7.98667 86.7405 7.23824 87.1287 6.58799C87.5242 5.92103 88.092 5.36767 88.775 4.98348C89.4581 4.59928 90.2323 4.39777 91.0201 4.39918C91.8079 4.40058 92.5814 4.60485 93.263 4.99148C93.9446 5.37811 94.5103 5.93348 94.9034 6.60185C95.2856 7.24748 95.4048 7.99591 95.4508 8.80324L95.5062 9.90046V17.6007L95.5617 18.7025C95.6773 20.5112 97.0223 21.8418 98.8804 21.9457L100 22V8.80324C100 6.46969 99.0533 4.23166 97.3682 2.58127C95.683 0.930875 93.3973 0.00323181 91.0137 0.00231305C89.7379 0.000995875 88.4765 0.266231 87.3138 0.780298C86.151 1.29437 85.1138 2.04543 84.2713 2.98331C83.4283 2.0458 82.391 1.29492 81.2284 0.780697C80.0658 0.266477 78.8046 0.000728203 77.5288 0.00115785C75.6624 0.00115785 73.9305 0.555547 72.4959 1.51302C71.6205 0.556701 69.6621 0.00115785 68.5378 0.00115785V22L69.6621 21.9457C71.5427 21.8244 72.9018 20.5297 72.9749 18.7025L73.0351 17.6007V9.90393L73.0905 8.80324C73.1377 7.97281 73.2557 7.24286 73.6391 6.59261C74.035 5.92606 74.6025 5.37284 75.2851 4.98817C75.9676 4.60351 76.7413 4.40086 77.5288 4.40046C78.317 4.40063 79.0913 4.60368 79.774 4.98925C80.4567 5.37482 81.0239 5.92935 81.4186 6.59723ZM4.49376 21.9469L5.61808 22H22.4712L22.4157 20.9028C22.2635 19.0941 20.9551 17.7728 19.1017 17.655L17.9774 17.6007H7.86673L21.3468 4.39931L21.2914 3.30324C21.2041 1.47606 19.8403 0.155925 17.9774 0.0554414L16.8531 0.00577766L0 0.00115785L0.0554494 1.10185C0.202921 2.89322 1.53017 4.24223 3.36825 4.34618L4.49376 4.40046H14.6044L1.12432 17.6018L1.17977 18.7025C1.29067 20.5159 2.62736 21.8291 4.49376 21.9457V21.9469ZM64.1266 3.22123C65.1701 4.2426 65.9979 5.45521 66.5627 6.7898C67.1274 8.1244 67.4181 9.55484 67.4181 10.9994C67.4181 12.444 67.1274 13.8744 66.5627 15.209C65.9979 16.5436 65.1701 17.7562 64.1266 18.7776C62.0184 20.8399 59.16 21.9983 56.1797 21.9983C53.1993 21.9983 50.341 20.8399 48.2327 18.7776C43.8451 14.4823 43.8451 7.51659 48.2327 3.22123C49.2753 2.20021 50.5131 1.39022 51.8754 0.837517C53.2377 0.284816 54.6979 0.000228005 56.1726 2.65159e-06C57.6497 -0.00100129 59.1124 0.283085 60.4773 0.836013C61.8421 1.38894 63.0822 2.19986 64.1266 3.22239V3.22123ZM60.9471 6.33621C62.2109 7.57436 62.9208 9.25311 62.9208 11.0035C62.9208 12.7538 62.2109 14.4326 60.9471 15.6707C59.6824 16.908 57.9676 17.6029 56.1797 17.6029C54.3917 17.6029 52.6769 16.908 51.4122 15.6707C50.1484 14.4326 49.4385 12.7538 49.4385 11.0035C49.4385 9.25311 50.1484 7.57436 51.4122 6.33621C52.6769 5.09898 54.3917 4.404 56.1797 4.404C57.9676 4.404 59.6824 5.09898 60.9471 6.33621ZM32.5913 2.65159e-06C34.066 0.000379687 35.5263 0.28515 36.8886 0.83805C38.2509 1.39095 39.4887 2.20115 40.5311 3.22239C44.9199 7.51659 44.9199 14.4834 40.5311 18.7776C38.4229 20.8399 35.5645 21.9983 32.5842 21.9983C29.6039 21.9983 26.7455 20.8399 24.6372 18.7776C20.2496 14.4823 20.2496 7.51659 24.6372 3.22123C25.6798 2.20021 26.9176 1.39022 28.2799 0.837517C29.6422 0.284816 31.1024 0.000228005 32.5771 2.65159e-06H32.5913ZM37.3516 6.3339C38.6158 7.5721 39.3259 9.25109 39.3259 11.0017C39.3259 12.7524 38.6158 14.4314 37.3516 15.6696C36.0869 16.9068 34.3721 17.6018 32.5842 17.6018C30.7962 17.6018 29.0815 16.9068 27.8167 15.6696C26.5529 14.4314 25.843 12.7527 25.843 11.0023C25.843 9.25195 26.5529 7.57321 27.8167 6.33505C29.0815 5.09783 30.7962 4.40284 32.5842 4.40284C34.3721 4.40284 36.0869 5.09783 37.3516 6.33505V6.3339Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const CourseraLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg width="120" height="17" viewBox="0 0 120 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M24.9043 0.000190532C29.6875 0.000190532 33.542 3.78794 33.542 8.48554C33.542 13.1832 29.7211 17.0021 24.9043 17.0021C20.0877 17.0019 16.2988 13.1173 16.2988 8.48554C16.2989 3.78809 20.1213 0.000423392 24.9043 0.000190532ZM84.2236 0.000190532C88.997 0.000359865 92.3612 3.87786 92.3613 8.40253C92.3613 8.85491 92.3304 9.33917 92.2656 9.75996L79.9297 9.72871C80.4097 11.6991 82.0128 13.0905 84.415 13.1223C85.8886 13.1223 87.4585 12.5725 88.4209 11.3439L91.2744 13.6721C89.8009 15.7714 87.2043 17.0001 84.4492 17.0002C79.5774 16.9345 75.8283 13.2515 75.8281 8.46894C75.8281 3.87836 79.0972 -0.0314351 84.2236 0.000190532ZM110.686 0.000190532C113.265 0.000207801 114.746 0.776188 115.747 2.29902L116.134 0.292183H120.002V16.6769H116.134L115.648 14.9934C114.52 16.2242 113.102 17.0002 110.717 17.0002C107.064 17.0002 103.017 13.8997 102.768 9.0832L102.756 8.61445C102.756 3.46681 106.915 0.000190532 110.686 0.000190532ZM39.3262 9.75117C39.3263 11.8527 40.4614 13.0831 42.4482 13.0832C44.6562 13.0832 45.9482 11.6919 45.9482 9.04023V0.238472H50.0781V16.6115H45.9482V14.7014C44.9715 16.2534 43.3944 16.9982 41.2178 16.9982C37.6139 17.0289 35.3405 14.4494 35.2021 10.6408L35.1963 10.2717V0.238472H39.3262V9.75117ZM68.0742 0.000190532C70.7715 0.000324341 73.1809 1.19216 74.4961 3.44453L70.8027 5.40839C70.2579 4.31369 69.2306 3.70042 67.9131 3.70039C66.5955 3.70039 66.0195 4.15078 66.0195 4.89277C66.0203 7.43694 74.8828 5.8273 74.8828 11.9113C74.8826 15.0663 72.3144 16.9982 68.1699 16.9982C64.6373 16.9666 62.165 15.8059 60.9434 13.135L60.9453 13.1369L64.6709 11.174C65.2805 12.5264 66.533 13.298 68.2656 13.298C69.8712 13.298 70.4814 12.7814 70.4814 12.0734C70.4804 9.46624 61.6186 11.0444 61.6182 5.05585C61.6206 1.74003 64.5102 0.000190532 68.0742 0.000190532ZM8.53418 0.000190532C11.5918 0.000190532 14.2349 1.53328 15.7637 3.83222L12.1973 5.90644C11.3693 4.75823 10.0629 3.99238 8.53418 3.99238C6.08148 3.9925 4.1084 6.0359 4.1084 8.3664C4.10841 10.6969 6.11508 12.7403 8.53418 12.7404C10.1254 12.7404 11.5274 11.9108 12.293 10.6652L15.8281 12.7717C14.3305 15.1655 11.6254 16.7639 8.53418 16.7639C3.78948 16.7929 0 12.9614 0 8.39765C0.00019687 3.73433 3.78961 0.000306197 8.53418 0.000190532ZM60.1709 3.883C60.0414 3.85141 59.9116 3.85078 59.751 3.85078C57.4902 3.85078 56.1982 5.22091 56.1982 7.83125L56.2324 16.5207H52.0029L51.9697 0.413276H56.1982V2.29218C57.1678 0.764517 58.7495 0.0319027 60.9453 0.000190532L60.1709 3.883ZM102.005 3.883C101.88 3.85138 101.753 3.85078 101.597 3.85078C99.3719 3.8508 98.1191 5.22094 98.1191 7.83125V16.5207H94.0156V0.413276H98.1191V2.29218C99.0911 0.764438 100.625 0.0318319 102.756 0.000190532L102.005 3.883ZM111.362 4.08027C108.847 4.08027 106.882 6.12072 106.882 8.6457C106.882 10.913 108.912 12.9523 111.362 12.9523C113.909 12.9207 115.908 10.8792 115.908 8.58027C115.908 6.08682 113.877 4.08029 111.362 4.08027ZM24.9043 4.08222C22.3989 4.08247 20.4405 6.15513 20.4404 8.48554C20.4404 10.816 22.4637 12.9228 24.9043 12.923C27.3451 12.923 29.4336 10.8502 29.4336 8.48554C29.4336 6.155 27.4099 4.08222 24.9043 4.08222ZM84.2236 3.84589C82.2364 3.84589 80.6975 5.00934 80.0879 6.75605L88.1641 6.7873C87.9384 5.13808 86.2106 3.84603 84.2236 3.84589Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const CNNLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 80 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M33.5048 0.000737453C29.9564 -0.0527816 26.8071 2.81173 26.8071 6.95726V25.6248C26.8107 26.2967 26.3081 26.8927 25.5764 26.8927H19.7324C7.08673 26.9078 8.21672 10.7504 18.9806 10.7352C23.7657 10.7284 25.4382 10.7352 25.4382 10.7352V6.20822H18.751C14.5607 6.21498 11.3883 7.80835 9.25448 10.1839C7.12056 12.5594 6.02809 15.7231 6.02979 18.867C6.03145 21.8938 7.06533 25.0351 9.22495 27.4159C11.3846 29.7966 14.6682 31.4247 19.2065 31.4247H30.2368C30.8745 31.4247 31.4151 30.8855 31.4151 30.2565V7.44981C31.4081 6.25717 32.0276 5.29835 33.0237 4.98098H33.0239C33.9901 4.67399 35.0514 5.07381 35.691 5.9823L35.6939 5.98636L35.6964 5.99057C37.2465 8.52683 41.1198 14.7486 44.6184 20.3572C46.3677 23.1614 48.0234 25.8126 49.2485 27.7736C49.8611 28.7541 50.3661 29.5621 50.7212 30.1304C51.0736 30.6943 51.2694 31.0075 51.2912 31.043C51.5492 31.4071 51.874 31.5439 52.1445 31.4588H52.1446L52.145 31.4586C52.2984 31.411 52.4191 31.303 52.5095 31.1253C52.5998 30.9477 52.6534 30.7009 52.6534 30.4045V7.45308C52.6496 6.26423 53.2653 5.30341 54.2648 4.98785C55.2251 4.68039 56.2896 5.08025 56.9229 5.98964L56.9254 5.99322L56.9276 5.99697C58.4812 8.53162 62.3562 14.7534 65.8556 20.362C69.353 25.9673 72.48 30.9681 72.529 31.0459C72.5292 31.0461 72.5292 31.0462 72.5293 31.0464C72.7822 31.4082 73.1275 31.5526 73.4159 31.4619C73.572 31.4126 73.6968 31.3024 73.7898 31.1246C73.8828 30.9467 73.9384 30.7017 73.9384 30.408V0.14209V0.140529H69.364V17.8147C69.364 17.8147 66.5314 13.0183 61.7024 4.74009C56.978 -3.36972 48.062 -0.0177988 48.0584 6.96053V17.8114C48.0584 17.8114 45.2937 13.0116 40.4679 4.73338C38.5473 1.4401 35.9326 0.0373557 33.5048 0.000737453ZM19.5774 0.140529C-6.70865 0.137262 -6.45928 37.5312 19.9315 37.5483H30.2434C34.6812 37.5515 37.5308 34.9234 37.5273 30.0796V20.6079C37.5273 20.6079 43.3108 30.1825 45.5803 33.9302C49.4415 40.3026 58.7855 39.0496 58.762 31.0898V20.6146C58.762 20.6146 64.5452 30.1857 66.8179 33.9385C70.6792 40.309 80.0237 39.0547 80 31.0929V0.140529H75.4326V30.4077V30.408C75.4358 31.8382 74.6329 32.6376 73.8678 32.8791L73.8673 32.8793C72.9341 33.1764 71.9189 32.7788 71.2876 31.8759L71.2854 31.8728L71.2834 31.8697C71.1528 31.6615 58.7751 11.8698 55.6804 6.81325C55.4237 6.4492 55.0476 6.29962 54.7139 6.40495C54.3674 6.51578 54.1471 6.88196 54.1471 7.45246V30.4008V30.4011C54.1508 31.8372 53.3614 32.6343 52.5996 32.8791L52.5992 32.8793L52.5987 32.8795C51.6791 33.168 50.6801 32.7712 50.0528 31.8691L50.0512 31.8669L50.0498 31.8647C50.0248 31.8259 49.8251 31.5068 49.4679 30.9361C49.1108 30.3654 48.6041 29.5553 47.9901 28.5731C46.762 26.6085 45.1046 23.9551 43.3546 21.1502C39.8563 15.543 35.9911 9.33429 34.4459 6.80654C34.1894 6.44306 33.8099 6.29614 33.4756 6.40183V6.40168C33.1252 6.51269 32.9028 6.87882 32.906 7.44481V7.44528V30.2563C32.906 31.7204 31.7041 32.9132 30.2368 32.9132H19.2064C14.1877 32.9132 10.5128 31.0941 8.10198 28.4258C5.69112 25.7575 4.54244 22.2479 4.53901 18.867C4.53558 15.3591 5.75227 11.828 8.14042 9.16834C10.5286 6.5087 14.0912 4.72645 18.7476 4.71965H18.7478H25.4382V0.140529H19.5774Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const ConsumerReports = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 130 33"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M76.2129 19.6602C78.6822 19.6602 80.7119 21.6899 80.7119 24.1592C80.7117 26.6282 78.7072 28.657 76.2871 28.6572C74.7957 28.6572 73.4747 27.8504 72.7168 26.6035V32.1289H71.7637V19.7334H72.7168V21.6895C73.4502 20.4671 74.7217 19.6603 76.2129 19.6602ZM14.5713 0C18.5075 0 22.0284 1.56482 24.7178 4.05859V0.391602H37.0645C42.2719 0.391653 46.575 4.62068 46.5752 9.85254C46.5752 13.5199 44.4721 16.6491 41.4404 18.2139L47.8467 28.5566H39.4111L34.1553 19.583H32.0039V28.5811H24.6934V24.9131C22.0284 27.4069 18.5075 28.9717 14.5713 28.9717C6.57662 28.9716 0 22.5416 0 14.498C4.43527e-05 6.4545 6.5522 0.000101068 14.5713 0ZM99.3164 19.7578H102.422V20.6631H99.3164V26.3105C99.3164 27.2395 99.7079 27.7528 100.588 27.7529C101.199 27.7529 101.713 27.6059 102.227 27.2881L102.471 28.0703C101.859 28.4615 101.224 28.6572 100.539 28.7061C99.0478 28.706 98.3389 27.8018 98.3389 26.3594V16.7266H99.3164V19.7578ZM66.2383 19.6602C68.4876 19.6602 70.2969 21.3227 70.2969 23.7676V24.4277H62.9619C63.1086 26.3835 64.5757 27.8015 66.4092 27.8018C67.5827 27.8018 68.586 27.3372 69.2217 26.457L69.9062 27.0195C69.0505 28.0953 67.8272 28.6816 66.4092 28.6816C64.0135 28.6814 61.9846 26.7504 61.9844 24.1348C61.9844 21.4699 63.9402 19.6603 66.2383 19.6602ZM106.701 19.6855C107.899 19.6857 108.804 20.1017 109.635 20.7617L109.072 21.5439C108.412 20.9817 107.532 20.5412 106.701 20.541C105.846 20.541 104.892 20.9324 104.892 21.9346C104.892 22.7413 105.502 23.1089 106.603 23.4756L107.36 23.7197C109.34 24.3798 109.952 24.9175 109.952 26.1641C109.952 27.7532 108.608 28.6582 106.945 28.6582C105.503 28.6582 104.427 28.1934 103.596 27.46L104.134 26.7021C104.867 27.3623 105.845 27.8271 106.945 27.8271C107.997 27.8271 108.999 27.3375 108.999 26.1885C108.999 25.4065 108.412 25.1617 107.165 24.7217L106.31 24.4287C104.623 23.8419 103.938 23.1325 103.938 21.9834C103.938 20.4922 105.185 19.6855 106.701 19.6855ZM86.4824 19.6602C88.9516 19.6604 91.0049 21.69 91.0049 24.1592C91.0046 26.6282 89.0003 28.657 86.4824 28.6572C83.9643 28.6572 81.9592 26.6527 81.959 24.1592C81.959 21.6899 83.9886 19.6602 86.4824 19.6602ZM57.2158 15.7246C59.9541 15.7246 61.4453 17.3387 61.4453 19.5146C61.4451 21.3481 60.1738 22.9127 57.9736 23.2305L61.6904 28.585H60.4434L56.7764 23.3037H53.8906V28.585H52.8643V15.7246H57.2158ZM93.4004 21.4941C94.0605 20.1984 95.4061 19.4655 96.8975 19.6855V20.6875C95.2349 20.4675 93.6204 21.4211 93.4004 23.377V28.5605H92.4229V19.7588H93.376L93.4004 21.4941ZM76.2129 20.6133C74.2816 20.6135 72.7168 22.2034 72.7168 24.1592C72.717 26.1147 74.2574 27.7039 76.2129 27.7041C78.1442 27.7041 79.7097 26.1149 79.71 24.1592C79.71 22.2033 78.1688 20.6133 76.2129 20.6133ZM86.4824 20.6133C84.5265 20.6133 82.9365 22.2033 82.9365 24.1592C82.9368 26.1149 84.5267 27.7041 86.4824 27.7041C88.4624 27.7039 90.0515 26.1147 90.0518 24.1592C90.0518 22.2034 88.4626 20.6135 86.4824 20.6133ZM19.7549 9.36426C18.4346 8.04402 16.6005 7.2373 14.5713 7.2373C10.5618 7.23741 7.26176 10.513 7.26172 14.498C7.26172 18.4831 10.5618 21.7353 14.5713 21.7354C16.6005 21.7354 18.4346 20.9277 19.7549 19.583L24.6934 24.4736V4.44922L19.7549 9.36426ZM66.1895 20.54C64.5759 20.5401 63.2064 21.7387 62.9619 23.5234H69.2705C69.1727 21.7387 67.8031 20.54 66.1895 20.54ZM53.8662 16.6777V22.3506H57.1426C59.3672 22.3506 60.3943 21.0058 60.3945 19.5146C60.3945 17.8277 59.1962 16.6777 57.167 16.6777H53.8662ZM120.025 4.37891C122.275 4.37891 124.084 6.04145 124.084 8.48633V9.14648H116.749C116.896 11.1022 118.363 12.5203 120.196 12.5205C121.37 12.5205 122.373 12.0559 123.009 11.1758L123.693 11.7383C122.838 12.814 121.614 13.4004 120.196 13.4004C117.801 13.4002 115.772 11.4691 115.771 8.85352C115.771 6.18867 117.727 4.379 120.025 4.37891ZM92.8135 10.0527C92.8135 11.6175 93.7675 12.498 95.1855 12.498C96.9701 12.498 98.2898 11.2998 98.3145 8.95312V4.47852H99.2686V13.2803H98.3145V11.4219C97.7766 12.5953 96.5302 13.3778 95.0879 13.3779C93.0342 13.3779 91.8604 12.1308 91.8604 10.0771V4.47852H92.8135V10.0527ZM58.5859 0.296875C60.6639 0.297005 62.5218 1.25095 63.7441 2.71777L62.9619 3.47559C61.9596 2.15545 60.395 1.34876 58.5859 1.34863C55.5545 1.34863 53.0608 3.84168 53.0605 6.82422C53.0605 9.88032 55.5543 12.3252 58.5859 12.3252C60.3461 12.3251 61.9351 11.5428 62.9619 10.2227L63.7197 10.9072C62.5218 12.3985 60.6639 13.3524 58.5859 13.3525C54.9675 13.3525 52.0088 10.4182 52.0088 6.82422C52.0091 3.23047 54.9677 0.296875 58.5859 0.296875ZM69.2949 4.35547C71.7885 4.35569 73.8418 6.3853 73.8174 8.85449C73.8171 11.3235 71.8128 13.3523 69.2949 13.3525C66.7768 13.3525 64.7717 11.3481 64.7715 8.85449C64.7715 6.38516 66.8011 4.35547 69.2949 4.35547ZM87.166 4.37891C88.3638 4.37902 89.2685 4.79505 90.0996 5.45508L89.5371 6.2373C88.8771 5.67509 87.9971 5.23454 87.166 5.23438C86.3104 5.23438 85.3566 5.62573 85.3564 6.62793C85.3564 7.43469 85.9673 7.80223 87.0674 8.16895L87.8252 8.41309C89.8053 9.07313 90.4169 9.61083 90.417 10.8574C90.417 12.4466 89.0726 13.3515 87.4102 13.3516C85.9677 13.3516 84.8918 12.8868 84.0605 12.1533L84.5986 11.3955C85.3076 12.0556 86.2855 12.5205 87.4102 12.5205C88.4614 12.5205 89.4639 12.0309 89.4639 10.8818C89.4636 10.0998 88.8765 9.85503 87.6299 9.41504L86.7744 9.12207C85.0874 8.5353 84.4033 7.82585 84.4033 6.67676C84.4035 5.1856 85.6503 4.37891 87.166 4.37891ZM126.504 6.21289C127.164 4.91713 128.51 4.18426 130.001 4.4043V5.40625C128.338 5.18621 126.724 6.1398 126.504 8.0957V13.2793H125.526V4.47754H126.479L126.504 6.21289ZM79.4893 4.37891C81.543 4.37891 82.7168 5.62599 82.7168 7.67969V13.2783H81.7627V7.7041C81.7627 6.1394 80.8096 5.25881 79.3916 5.25879C77.6069 5.25879 76.2863 6.45691 76.2617 8.80371V13.2783H75.3086V4.47656H76.2617V6.33496C76.7996 5.16144 78.0468 4.37893 79.4893 4.37891ZM111.126 4.37891C113.131 4.37905 114.304 5.62611 114.279 7.67969V13.2783H113.326V7.7041C113.326 6.13956 112.422 5.25899 111.028 5.25879C109.39 5.25879 108.192 6.45691 108.167 8.80371V13.2783H107.214V7.7041C107.214 6.13952 106.309 5.25895 104.916 5.25879C103.278 5.25879 102.079 6.4569 102.055 8.80371H102.006V13.2783H101.053V4.47656H102.006V6.2373C102.519 5.13711 103.669 4.37891 104.989 4.37891C106.529 4.379 107.581 5.16133 107.972 6.48145C108.51 5.23457 109.708 4.37891 111.126 4.37891ZM32.0039 13.2754H35.9639C37.7974 13.2754 39.2888 11.8334 39.2891 10.0244C39.2891 8.2152 37.7975 6.72363 35.9639 6.72363H32.0039V13.2754ZM69.2949 5.33301C67.339 5.33301 65.749 6.923 65.749 8.87891C65.7492 10.8346 67.3392 12.4238 69.2949 12.4238C71.2749 12.4236 72.864 10.8345 72.8643 8.87891C72.8643 6.92314 71.2751 5.33323 69.2949 5.33301ZM120.001 5.25879C118.387 5.25886 117.018 6.45748 116.773 8.24219H123.082C122.984 6.45743 121.615 5.25879 120.001 5.25879Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const TheOnionLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg width="130" height="21" viewBox="0 0 130 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.5585 0C17.0252 0 16.5587 1.25138 17.0253 1.43848C17.5232 1.65141 17.8139 0.295803 18.3065 0.72168C18.9859 1.30855 17.6583 1.84415 18.0214 2.21289C18.2808 2.47687 18.9024 1.97921 19.1151 2.32129C19.4782 2.88221 18.4929 3.2563 17.6112 3.41211C14.3857 3.97853 21.2985 18.4166 10.0761 20.4111C7.11489 20.972 5.73544 18.3028 3.52627 19.6113C2.98172 19.9333 2.59188 21.1584 2.25479 20.6494C2.04821 20.3378 2.59691 19.829 2.25479 19.6162C2.02143 19.4873 1.68432 20.0732 1.45107 19.8604C1.26994 19.6734 1.52893 19.3775 1.34756 19.1387C1.192 18.8998 0.828905 19.1127 0.647364 18.8428L0.631739 18.8271L0.626856 18.832C0.34164 18.4114 1.48777 18.1673 1.69522 17.6895C2.73237 15.664 0.886254 16.4949 0.108301 11.8574C-1.39558 3.09634 13.2271 3.09496 15.1786 2.74707C16.973 2.42507 15.148 0.000103837 16.5585 0ZM105.615 3.8584C109.645 3.85861 113.534 7.15649 113.534 11.7891C113.534 16.7227 110.122 20.2488 105.615 20.249V20.2539C101.103 20.2539 97.6905 16.728 97.6903 11.7891C97.6903 7.16155 101.565 3.8584 105.615 3.8584ZM64.4892 3.84277C68.5186 3.84296 72.4032 7.14576 72.4032 11.7783C72.4032 16.7123 68.9953 20.2441 64.4833 20.2441V20.249C59.9715 20.2489 56.5644 16.7222 56.5644 11.7832C56.5646 7.15077 60.4332 3.84292 64.4833 3.84277H64.4892ZM47.8124 9.43652C50.7568 9.43753 52.82 11.3843 52.8202 14.5098V15.7979H45.5028C45.5028 16.9612 46.8197 17.5644 47.8153 17.5645C48.8318 17.5645 49.3502 17.2679 49.8895 16.8213L52.078 18.3584C51.6424 18.8155 50.3099 20.208 47.6962 20.208C44.0816 20.208 42.0899 17.8551 42.0897 14.4482C42.0897 11.4109 44.4689 9.43769 47.8124 9.43652ZM83.8075 10.75L83.8017 10.7393V4.41895L88.869 4.07617V20.1143L79.0565 13.2842V19.709H73.9745V3.63867L83.8075 10.75ZM124.928 10.75V4.41406L130 4.07129V20.1094L120.183 13.2793V19.7041H115.095V3.63477L124.928 10.75ZM26.0907 10.0176L28.5019 9.96094V12.9365L26.0858 12.8584V15.2734C26.0858 16.3639 26.407 16.7645 27.1796 16.7646C27.5789 16.7646 28.1184 16.6808 28.3622 16.499L29.1767 19.0957C28.7981 19.3554 28.1598 19.958 25.9608 19.958L25.9765 19.9736C22.9429 19.9735 22.3828 17.6577 22.3827 15.3623V12.8799L20.7489 12.9414V9.96094L22.3827 10.002V6.12793L26.0907 5.74316V10.0176ZM34.1815 10.5889C34.2642 10.5392 35.7616 9.62317 38.0702 9.62305C39.8696 9.62305 40.7673 11.2328 40.7675 13.0244V19.7559H37.0546V14.957C37.0546 13.4405 36.9862 12.4229 35.7157 12.4229C35.0306 12.4231 34.2045 12.9273 34.1815 12.9414V19.7559H30.4521V4.07617L34.1815 3.77539V10.5889ZM96.1034 19.709H90.995V4.41895H96.1034V19.709ZM11.621 17.9756C15.7803 16.459 15.7288 10.9223 15.0546 12.4648C14.3804 13.9813 13.9344 15.2072 12.4823 16.0537C11.3414 16.7185 10.5323 16.8017 9.12686 16.7705C7.96005 16.7445 6.89693 15.7576 6.55459 17.2529C6.19159 18.8992 10.0909 18.5306 11.621 17.9697V17.9756ZM15.5214 4.07715C14.8757 3.41497 12.0377 4.30842 12.0155 4.31543C7.57103 5.90987 2.73716 8.89694 2.4208 12.626C2.31717 13.7167 2.629 15.7674 3.98232 16.6191C4.91581 17.206 6.52822 13.0204 8.11514 10.7871C11.3096 6.25852 16.0653 4.63814 15.5214 4.07715ZM14.5829 9.59277C15.9106 4.79386 15.2357 5.75438 11.3876 9.82617C9.31322 12.0387 7.67498 14.8333 8.27139 14.9424C9.46449 15.15 13.2865 14.251 14.5829 9.59277ZM105.62 9.11426C104.142 9.11426 102.804 10.3449 102.804 11.7939C102.804 13.5857 104.142 14.8584 105.62 14.8584C107.072 14.8584 108.41 13.5857 108.41 11.7939C108.41 10.3397 107.077 9.11427 105.62 9.11426ZM64.4911 9.1084C63.0091 9.11002 61.6779 10.3353 61.6776 11.7832C61.6776 13.575 63.0111 14.8477 64.4892 14.8477V14.8525C65.941 14.8523 67.2839 13.5857 67.2841 11.7891C67.2841 10.3356 65.9475 9.10968 64.4911 9.1084ZM47.7685 11.8516C45.9798 11.8517 45.3836 13.3255 45.539 13.7412H49.7392C49.8428 13.7412 49.8224 13.5336 49.8017 13.4453C49.7044 12.9826 49.4469 12.569 49.0751 12.2773C48.7032 11.9858 48.2403 11.8353 47.7685 11.8516ZM9.43838 4.39941C6.9699 4.47732 1.96021 6.54899 1.72647 9.74805C1.64349 10.7608 3.22991 8.12291 4.99307 6.78809H4.99893C6.76198 5.45876 10.1683 4.36858 9.43838 4.39941ZM73.9745 3.63477V3.63867L73.9687 3.63477H73.9745Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const SAPLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 100 50"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 0L50.5391 49.4688H0V0H100ZM13.5996 8.77734C9.41014 8.77734 5.91819 10.1349 3.75391 12.3721C2.24535 13.9345 1.43239 15.9189 1.39844 18.1143C1.34342 21.1342 2.45113 23.2777 4.77832 24.9863C6.74342 26.4276 9.25659 27.3611 11.4717 28.0479C14.2043 28.8946 16.4347 29.6301 16.4092 31.2002C16.3891 31.7712 16.1724 32.3045 15.7617 32.7373C15.0811 33.4398 14.034 33.7043 12.5889 33.7314C9.80098 33.7904 7.73236 33.3534 4.43848 31.4072L1.39844 37.4453C4.68327 39.3137 8.57332 40.4092 12.542 40.4092L13.0527 40.4043C16.5073 40.3421 19.2955 39.3569 21.5225 37.5635C21.6501 37.4627 21.7648 37.3586 21.8828 37.2539L20.8955 39.8906H29.8379L31.3379 35.3271C32.9085 35.864 34.6962 36.1602 36.5947 36.1602C38.442 36.1601 40.1821 35.8759 41.7246 35.3711L43.1709 39.8906H57.7539V30.4414H60.9346C68.6228 30.4412 73.1689 26.5254 73.1689 19.9648C73.1689 12.6563 68.7514 9.30278 59.3447 9.30273V9.30176L49.501 9.2959V32.7012L40.9023 9.2959H32.376L25.0342 28.8691C24.2523 23.934 19.1472 22.2298 15.1309 20.9521C12.4787 20.1005 9.66448 18.8473 9.69043 17.4629C9.71283 16.3265 11.201 15.2709 14.1475 15.4297C16.1285 15.5347 17.8752 15.6947 21.3516 17.3711L24.7715 11.416C21.5977 9.80149 17.2129 8.78122 13.6201 8.77734H13.5996ZM39.6865 28.8057C38.7649 29.1328 37.713 29.3291 36.5957 29.3291C35.4471 29.3291 34.3699 29.1282 33.4414 28.7773L36.5615 18.9336H36.6201L39.6865 28.8057ZM59.9229 15.7412C62.815 15.7412 65.121 16.7013 65.1211 19.6543C65.1211 22.7102 62.8151 23.6729 59.9229 23.6729H57.7549V15.7412H59.9229Z"
+        fill="#EFE6D2"
+      />
+    </svg>
+  );
+};
+export const DropboxLogo = ({ width = '1', ...props }: IconProps) => {
+  return (
+    <svg
+      aria-label="Linkedin Logo"
+      role="img"
+      width={`${width}rem`}
+      preserveAspectRatio="true"
+      viewBox="0 0 120 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M33.2598 4.44545H38.8894C42.482 4.44545 45.4449 6.5204 45.4449 11.2631V12.2636C45.4449 17.0433 42.6672 19.1924 39.0005 19.1924H33.2598V4.44545ZM36.4079 7.11324V16.4876H38.8153C40.8523 16.4876 42.2227 15.1537 42.2227 12.1894V11.4113C42.2227 8.44713 40.7783 7.11324 38.7042 7.11324H36.4079ZM47.1116 7.26145H49.6301L50.0375 10.0404C50.519 8.15071 51.7412 7.15029 53.9634 7.15029H54.7412V10.3368H53.4449C50.8894 10.3368 50.2597 11.2261 50.2597 13.7457V19.2294H47.1486V7.26145H47.1116ZM55.3708 13.4863V13.1528C55.3708 9.15113 57.9264 6.96503 61.4079 6.96503C64.9634 6.96503 67.4449 9.15113 67.4449 13.1528V13.4863C67.4449 17.4139 65.0375 19.5259 61.4079 19.5259C57.556 19.4888 55.3708 17.4139 55.3708 13.4863ZM64.2597 13.4492V13.1528C64.2597 10.9297 63.1486 9.59576 61.3708 9.59576C59.6301 9.59576 58.4819 10.8185 58.4819 13.1528V13.4492C58.4819 15.5983 59.5931 16.821 61.3708 16.821C63.1486 16.784 64.2597 15.5983 64.2597 13.4492ZM69.0745 7.26145H71.6671L71.9634 9.52166C72.593 8.0025 73.9264 6.96503 75.8893 6.96503C78.9264 6.96503 80.9263 9.15113 80.9263 13.1899V13.5233C80.9263 17.4509 78.7041 19.5259 75.8893 19.5259C74.0004 19.5259 72.7041 18.6737 72.0745 17.3027V23.3423H69.0375L69.0745 7.26145ZM77.7782 13.4492V13.1899C77.7782 10.8185 76.556 9.63282 74.9264 9.63282C73.1856 9.63282 72.0375 10.9667 72.0375 13.1899V13.4122C72.0375 15.5242 73.1486 16.8581 74.8893 16.8581C76.6671 16.821 77.7782 15.6724 77.7782 13.4492ZM85.5189 17.0063L85.2597 19.1924H82.593V3.25977H85.6301V9.37345C86.2967 7.81724 87.6301 6.96503 89.5189 6.96503C92.3708 7.00208 94.4819 8.96587 94.4819 12.9305V13.301C94.4819 17.2657 92.4819 19.5259 89.4449 19.5259C87.4449 19.4888 86.1486 18.5625 85.5189 17.0063ZM91.2967 13.301V13.0046C91.2967 10.8185 90.1115 9.59576 88.4449 9.59576C86.7412 9.59576 85.556 10.9667 85.556 13.0417V13.301C85.556 15.5242 86.7041 16.821 88.4078 16.821C90.2226 16.821 91.2967 15.6724 91.2967 13.301ZM95.8152 13.4863V13.1528C95.8152 9.15113 98.3708 6.96503 101.852 6.96503C105.408 6.96503 107.889 9.15113 107.889 13.1528V13.4863C107.889 17.4139 105.445 19.5259 101.852 19.5259C98.0004 19.4888 95.8152 17.4139 95.8152 13.4863ZM104.741 13.4492V13.1528C104.741 10.9297 103.63 9.59576 101.852 9.59576C100.112 9.59576 98.9634 10.8185 98.9634 13.1528V13.4492C98.9634 15.5983 100.074 16.821 101.852 16.821C103.63 16.784 104.741 15.5983 104.741 13.4492ZM111.963 13.0046L107.778 7.26145H111.371L113.778 10.8556L116.223 7.26145H119.778L115.519 12.9676L120 19.1924H116.482L113.741 15.2278L111.074 19.1924H107.408L111.963 13.0046Z"
+        fill="#EFE6D2"
+      />
+      <path
+        d="M13.9259 4.44631L6.96295 8.89263L13.9259 13.3389L6.96295 17.7853L0 13.3019L6.96295 8.85558L0 4.44631L6.96295 0L13.9259 4.44631L20.8518 0L27.8148 4.44631L20.8518 8.89263L27.8148 13.3389L20.8518 17.7853L13.9259 13.3019L20.8889 8.85558L13.9259 4.44631Z"
+        fill="#EFE6D2"
+      />
+      <path d="M13.8889 14.7469L6.92592 19.1933L13.8889 23.6396L20.8518 19.1933L13.8889 14.7469Z" fill="#EFE6D2" />
+    </svg>
+  );
+};
diff --git a/site/src/components/icons/arrow.svg b/site/src/components/icons/arrow.svg
new file mode 100644
index 00000000..c840cb0a
--- /dev/null
+++ b/site/src/components/icons/arrow.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 62 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M60 17L0 17" stroke="currentColor" stroke-width="2" />
+    <path d="M44 1L60 17.3019L44.5926 33" stroke="currentColor" stroke-width="2" />
+</svg>
diff --git a/site/src/components/icons/check.svg b/site/src/components/icons/check.svg
new file mode 100644
index 00000000..3cd795cb
--- /dev/null
+++ b/site/src/components/icons/check.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.353516 6.85352L5.35352 11.8535L16.8535 0.353516" stroke="currentColor"/>
+</svg>
diff --git a/site/src/components/icons/computer.svg b/site/src/components/icons/computer.svg
new file mode 100644
index 00000000..9da4537f
--- /dev/null
+++ b/site/src/components/icons/computer.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="7" y="17" width="10" height="4" stroke="currentColor" />
+  <rect x="2" y="3" width="20" height="14" rx="1" stroke="currentColor" />
+  <path d="M2 14H22V16C22 16.5523 21.5523 17 21 17H3C2.44772 17 2 16.5523 2 16V14Z" stroke="currentColor" />
+</svg>
diff --git a/site/src/components/icons/copy-icon.svg b/site/src/components/icons/copy-icon.svg
new file mode 100644
index 00000000..462f3a7e
--- /dev/null
+++ b/site/src/components/icons/copy-icon.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="6" y="5" width="12" height="14" rx="1" stroke="currentColor" />
+  <path d="M3.5 15H3C2.44772 15 2 14.5523 2 14V2C2 1.44772 2.44772 1 3 1H13C13.5523 1 14 1.44772 14 2V2.5" stroke="currentColor" />
+  <path d="M9 10H15" stroke="currentColor" />
+  <path d="M9 12H15" stroke="currentColor" />
+  <path d="M9 14H12" stroke="currentColor" />
+</svg>
diff --git a/site/src/components/icons/dial-inner.svg b/site/src/components/icons/dial-inner.svg
new file mode 100644
index 00000000..ccb35f64
--- /dev/null
+++ b/site/src/components/icons/dial-inner.svg
@@ -0,0 +1,7 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.5 60C6.5 30.4528 30.4528 6.5 60 6.5C89.5472 6.5 113.5 30.4528 113.5 60C113.5 89.5472 89.5472 113.5 60 113.5C30.4528 113.5 6.5 89.5472 6.5 60Z" fill="currentColor" stroke="#fff"/>
+<path d="M87 54L87 48C87 43.5817 83.4183 40 79 40L41 40C36.5817 40 33 43.5817 33 48L33 54" stroke="#fff"/>
+<path d="M33 14L33 106" stroke="#fff" stroke-linecap="round"/>
+<path d="M87 14L87 106" stroke="#fff" stroke-linecap="round"/>
+<path d="M61.5 6.5C62.0523 6.5 62.5 6.94772 62.5 7.5L62.5 25C62.5 26.3807 61.3807 27.5 60 27.5C58.6193 27.5 57.5 26.3807 57.5 25L57.5 7.5C57.5 6.94771 57.9477 6.5 58.5 6.5L61.5 6.5Z" fill="#FF6200" stroke="#fff"/>
+</svg>
diff --git a/site/src/components/icons/dial-outer.svg b/site/src/components/icons/dial-outer.svg
new file mode 100644
index 00000000..460aacc2
--- /dev/null
+++ b/site/src/components/icons/dial-outer.svg
@@ -0,0 +1,7 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="60" cy="60" r="59.5" fill="currentColor" stroke="#fff"/>
+<path d="M107 33.8867L112 31" stroke="#fff"/>
+<path d="M13 33.8867L8 31" stroke="#fff"/>
+<path d="M13 86L8 88.8867" stroke="#fff"/>
+<path d="M107 86L112 88.8867" stroke="#fff"/>
+</svg>
diff --git a/site/src/components/icons/discord.svg b/site/src/components/icons/discord.svg
new file mode 100644
index 00000000..16474e14
--- /dev/null
+++ b/site/src/components/icons/discord.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96" fill="currentColor">
+  <title>Discord</title>
+  <path d="M81.15 0a73.742 73.742 0 00-3.36 6.794 97.868 97.868 0 00-28.994 0A67.874 67.874 0 0045.437 0a105.547 105.547 0 00-26.14 8.057C2.779 32.53-1.691 56.373.53 79.887a105.038 105.038 0 0032.05 16.088 76.912 76.912 0 006.87-11.063c-3.738-1.389-7.35-3.131-10.81-5.152.91-.657 1.794-1.338 2.653-1.995a75.255 75.255 0 0064.075 0c.86.707 1.743 1.389 2.652 1.995a68.772 68.772 0 01-10.835 5.178A76.903 76.903 0 0094.056 96a104.99 104.99 0 0032.051-16.063c2.626-27.277-4.496-50.917-18.817-71.855A103.923 103.923 0 0081.175.05L81.15 0zM42.28 65.414c-6.238 0-11.416-5.657-11.416-12.653s4.976-12.679 11.391-12.679 11.517 5.708 11.416 12.679c-.101 6.97-5.026 12.653-11.39 12.653zm42.078 0c-6.264 0-11.391-5.657-11.391-12.653s4.975-12.679 11.39-12.679S95.85 45.79 95.749 52.761c-.1 6.97-5.026 12.653-11.39 12.653z" />
+</svg>
diff --git a/site/src/components/icons/dropdown-arrow.svg b/site/src/components/icons/dropdown-arrow.svg
new file mode 100644
index 00000000..d4a5cc0a
--- /dev/null
+++ b/site/src/components/icons/dropdown-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.99992 6L0 0H10L4.99992 6Z" fill="currentColor"/>
+</svg>
diff --git a/site/src/components/icons/github.svg b/site/src/components/icons/github.svg
new file mode 100644
index 00000000..22769f4b
--- /dev/null
+++ b/site/src/components/icons/github.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 96" fill="currentColor">
+  <title>GitHub</title>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0112.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+  />
+</svg>
diff --git a/site/src/components/icons/logo-docs.svg b/site/src/components/icons/logo-docs.svg
new file mode 100644
index 00000000..271fc53b
--- /dev/null
+++ b/site/src/components/icons/logo-docs.svg
@@ -0,0 +1,13 @@
+<svg width="198" height="24" viewBox="0 0 198 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.3067 0V5.27923H25.1299V0H31.3067ZM31.3067 6.67479V23.3755H25.1299V6.67479H31.3067Z" fill="currentColor"/>
+<path d="M17.1681 0V18.3901L7.38275 0H0L12.4457 23.3847H17.1681H19.8285H23.345V0H17.1681Z" fill="currentColor"/>
+<path d="M53.0598 0V23.3847H41.5254C36.8214 23.3847 33.084 18.6288 33.084 14.2952C33.084 9.3649 36.5268 5.28842 41.4057 5.28842H45.4653V10.5677H43.4677C41.3228 10.5677 39.5554 12.2662 39.5554 14.3503C39.5554 16.4345 41.2952 18.1055 43.4401 18.1055H46.8829V0H53.0598Z" fill="currentColor"/>
+<path d="M74.9499 23.3848H64.5109C59.2178 23.3848 54.5967 19.951 54.5967 14.2586C54.5967 9.62203 58.9785 5.27929 64.5385 5.27929H74.9499V10.5585L70.835 16.5723H63.8389L68.1931 10.5585H65.0172C62.6606 10.5585 61.0773 12.0826 61.0773 14.1943C61.0773 16.4529 62.8447 18.0963 65.0172 18.0963H74.9591V23.3756L74.9499 23.3848Z" fill="currentColor"/>
+<path d="M86.4947 24C80.907 24 75.8809 20.153 75.8809 14.3505C75.8809 8.54791 81.0543 4.67341 86.5315 4.67341C92.0088 4.67341 97.1178 8.57545 97.1178 14.3505C97.1178 20.1255 92.0548 24 86.5039 24H86.4947ZM82.3431 14.3413C82.3431 16.9212 84.1381 18.7116 86.5223 18.7116C88.9065 18.7116 90.6372 16.9212 90.6372 14.3413C90.6372 11.7614 88.9341 9.94346 86.5499 9.94346C84.1657 9.94346 82.3431 11.8164 82.3431 14.3413Z" fill="currentColor"/>
+<path d="M126.308 8.86912H122.543C121.512 8.86912 120.684 8.37333 120.684 7.3542C120.684 6.33508 121.485 5.93111 122.488 5.91274H122.93H132.77V0H122.258C118.3 0 114.203 2.80947 114.203 7.3083C114.203 11.8071 118.3 14.4513 122.258 14.4513H126.023C127.072 14.4513 127.919 14.9288 127.919 15.9754C127.919 17.0221 127.063 17.4812 126.023 17.4812H114.332V23.3847H126.317C130.294 23.3847 134.409 20.8507 134.409 15.9754C134.409 11.4399 130.294 8.85993 126.317 8.85993L126.308 8.86912Z" fill="#FF6200"/>
+<path d="M106.075 12.9089C106.075 14.1392 105.422 17.472 101.786 17.4812H97.7998V23.3939L102.559 23.4398H103.737C109.178 23.4306 112.418 19.9326 112.418 13.726V0H106.075V12.9089Z" fill="#FF6200"/>
+<rect x="144" width="54" height="23.44" rx="11.72" fill="#FF6200"/>
+<path d="M181.097 6C183.58 6 186 6.15748 186 10.1417V13.8583C186 17.8425 183.58 18 181.097 18C178.614 18 176.194 17.8425 176.194 13.8583V10.1417C176.194 6.15748 178.614 6 181.097 6ZM181.097 8.59843C179.542 8.59843 179.18 8.62992 179.18 10.6457V13.3543C179.18 15.3701 179.542 15.4016 181.097 15.4016C182.653 15.4016 183.015 15.3701 183.015 13.3543V10.6457C183.015 8.62992 182.653 8.59843 181.097 8.59843Z" fill="#EFE6D2"/>
+<path d="M173.842 6.09449V17.9055H170.699V8.88189L167.65 11.6693L165.874 9.65354L170.164 6.09449H173.842Z" fill="#EFE6D2"/>
+<path d="M164.549 9.63779L162.522 17.9055H158.279L156 9.63779H158.829L160.322 16.0945H160.4L161.752 9.63779H164.549Z" fill="#EFE6D2"/>
+</svg>
diff --git a/site/src/components/icons/logo-mono.svg b/site/src/components/icons/logo-mono.svg
new file mode 100644
index 00000000..6945d217
--- /dev/null
+++ b/site/src/components/icons/logo-mono.svg
@@ -0,0 +1,16 @@
+<svg viewBox="0 0 381 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_549_3634)">
+    <path d="M88.7051 0V14.9579H71.204V0H88.7051ZM88.7051 18.912V66.2311H71.204V18.912H88.7051Z" fill="currentColor" />
+    <path d="M48.6432 0V52.1057L20.9179 0H0L35.2631 66.2572H48.6432H56.181H66.1444V0H48.6432Z" fill="currentColor" />
+    <path d="M150.337 0V66.2572H117.656C104.328 66.2572 93.7389 52.782 93.7389 40.5035C93.7389 26.5341 103.494 14.984 117.317 14.984H128.819V29.9419H123.16C117.082 29.9419 112.075 34.7544 112.075 40.6596C112.075 46.5647 117.004 51.2992 123.081 51.2992H132.836V0H150.337Z" fill="currentColor" />
+    <path d="M212.36 66.2572H182.783C167.786 66.2572 154.692 56.5281 154.692 40.3995C154.692 27.2625 167.107 14.958 182.861 14.958H212.36V29.9159L200.701 46.955H180.879L193.216 29.9159H184.217C177.54 29.9159 173.054 34.2342 173.054 40.2174C173.054 46.6168 178.062 51.2733 184.217 51.2733H212.386V66.2312L212.36 66.2572Z" fill="currentColor" />
+    <path d="M245.069 67.9993C229.237 67.9993 214.997 57.0995 214.997 40.6588C214.997 24.2181 229.655 13.2402 245.174 13.2402C260.693 13.2402 275.168 24.2961 275.168 40.6588C275.168 57.0215 260.823 67.9993 245.095 67.9993H245.069ZM233.306 40.6328C233.306 47.9426 238.392 53.0153 245.148 53.0153C251.903 53.0153 256.806 47.9426 256.806 40.6328C256.806 33.3229 251.981 28.1722 245.226 28.1722C238.471 28.1722 233.306 33.479 233.306 40.6328Z" fill="currentColor" />
+    <path d="M357.876 25.1293H347.208C344.287 25.1293 341.94 23.7246 341.94 20.837C341.94 17.9495 344.209 16.8049 347.052 16.7529H348.304H376.186V0H346.4C335.184 0 323.578 7.96022 323.578 20.707C323.578 33.4537 335.184 40.9457 346.4 40.9457H357.067C360.041 40.9457 362.44 42.2984 362.44 45.264C362.44 48.2295 360.015 49.5302 357.067 49.5302H323.943V66.2571H357.902C369.169 66.2571 380.828 59.0773 380.828 45.264C380.828 32.4132 369.169 25.1033 357.902 25.1033L357.876 25.1293ZM339.853 25.1293H327.516C327.151 23.7506 326.916 22.2938 326.916 20.707C326.916 19.3022 327.099 18.0015 327.412 16.7529H339.749C338.966 17.8975 338.523 19.2762 338.523 20.837C338.523 22.4759 339.018 23.9327 339.853 25.1293ZM346.374 3.38179H372.769V13.3451H347.208C347.208 13.3451 347.13 13.3451 347.078 13.3451H328.742C332.054 7.04973 339.41 3.35578 346.374 3.35578V3.38179ZM328.899 28.5111H348.304H357.876C364.788 28.5111 371.986 31.6588 375.403 37.5639H356.259H346.374C339.331 37.5639 332.237 34.4683 328.899 28.4851V28.5111ZM377.411 45.29C377.411 46.7988 377.229 48.2295 376.916 49.5562H364.501C365.335 48.3856 365.805 46.9288 365.805 45.29C365.805 43.6511 365.335 42.1683 364.501 40.9717H376.812C377.177 42.3244 377.411 43.7552 377.411 45.29ZM357.876 62.9013H327.308V52.938H356.259H375.716C372.482 59.4935 365.153 62.9013 357.876 62.9013Z" fill="currentColor" />
+    <path d="M300.547 36.5754C300.547 40.0612 298.695 49.5042 288.393 49.5302H277.099V66.2831L290.584 66.4132H293.922C309.337 66.3872 318.518 56.4759 318.518 38.8906V0H300.547V36.5754ZM303.468 40.9457H315.075C314.918 44.1454 314.449 47.0069 313.64 49.5562H298.095C300.573 47.6572 302.608 44.8477 303.494 40.9457H303.468ZM303.938 28.5111H315.127V37.5639H303.886C303.886 37.2257 303.938 36.9135 303.938 36.5494V28.4851V28.5111ZM303.938 25.1293V16.7529H315.127V25.1293H303.938ZM293.896 63.0054H290.636L280.516 62.9273V52.912H288.419H312.232C308.867 59.4675 302.634 62.9793 293.896 62.9793V63.0054ZM315.127 3.38179V13.3711H303.938V3.38179H315.127Z" fill="currentColor" />
+  </g>
+  <defs>
+    <clipPath id="clip0_549_3634">
+      <rect width="380.8" height="68" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/site/src/components/icons/logo.svg b/site/src/components/icons/logo.svg
new file mode 100644
index 00000000..3d822d5d
--- /dev/null
+++ b/site/src/components/icons/logo.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 225 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M52.1796 0V8.79878H41.8848V0H52.1796ZM52.1796 11.1247V38.9594H41.8848V11.1247H52.1796Z" fill="currentColor" />
+  <path d="M28.6137 0V30.6503L12.3047 0H0L20.743 38.9748H28.6137H33.0477H38.9085V0H28.6137Z" fill="currentColor" />
+  <path d="M88.4338 0V38.9748H69.2097C61.3697 38.9748 55.1406 31.0482 55.1406 23.8256C55.1406 15.6083 60.8787 8.81408 69.0102 8.81408H75.7762V17.6129H72.4469C68.8721 17.6129 65.9264 20.4438 65.9264 23.9174C65.9264 27.391 68.8261 30.176 72.4009 30.176H78.139V0H88.4338Z" fill="currentColor" />
+  <path d="M124.918 38.9748H107.519C98.6975 38.9748 90.9956 33.2518 90.9956 23.7644C90.9956 16.0368 98.2986 8.79886 107.565 8.79886H124.918V17.5976L118.06 27.6206H106.399L113.656 17.5976H108.363C104.436 17.5976 101.797 20.1378 101.797 23.6573C101.797 27.4217 104.742 30.1608 108.363 30.1608H124.933V38.9595L124.918 38.9748Z" fill="currentColor" />
+  <path d="M144.159 40.0002C134.846 40.0002 126.469 33.5886 126.469 23.9176C126.469 14.2466 135.091 7.78906 144.22 7.78906C153.349 7.78906 161.864 14.2925 161.864 23.9176C161.864 33.5427 153.425 40.0002 144.174 40.0002H144.159ZM137.239 23.9023C137.239 28.2022 140.231 31.1862 144.205 31.1862C148.178 31.1862 151.063 28.2022 151.063 23.9023C151.063 19.6024 148.224 16.5725 144.251 16.5725C140.277 16.5725 137.239 19.6942 137.239 23.9023Z" fill="currentColor" />
+  <path d="M210.515 14.7819H204.24C202.522 14.7819 201.141 13.9556 201.141 12.2571C201.141 10.5585 202.476 9.88523 204.148 9.85463H204.884H221.286V0H203.765C197.167 0 190.34 4.68248 190.34 12.1806C190.34 19.6787 197.167 24.0857 203.765 24.0857H210.04C211.789 24.0857 213.2 24.8814 213.2 26.6259C213.2 28.3703 211.773 29.1354 210.04 29.1354H190.555V38.9748H210.531C217.158 38.9748 224.017 34.7513 224.017 26.6259C224.017 19.0666 217.158 14.7666 210.531 14.7666L210.515 14.7819Z" fill="#FF6200" />
+  <path d="M176.792 21.5149C176.792 23.5654 175.703 29.1201 169.643 29.1354H163V38.9901L170.932 39.0666H172.895C181.963 39.0513 187.363 33.2211 187.363 22.8768V0H176.792V21.5149Z" fill="#FF6200" />
+</svg>
diff --git a/site/src/components/icons/moon.svg b/site/src/components/icons/moon.svg
new file mode 100644
index 00000000..aea5aa6e
--- /dev/null
+++ b/site/src/components/icons/moon.svg
@@ -0,0 +1,6 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.66602 7.83301L8.16602 7.83298V7.83301H8.66602ZM2 12H1.5V12L2 12ZM21.7831 12.8002L22.1575 13.1315L21.7831 12.8002ZM21.9605 12.8732L21.4624 12.8301L21.9605 12.8732ZM11.1969 2.217L11.5283 2.59137L11.1969 2.217ZM11.1969 2.217L10.8655 1.84263C9.21105 3.30733 8.16614 5.44808 8.16602 7.83298L8.66602 7.83301L9.16602 7.83303C9.16613 5.74663 10.079 3.87451 11.5283 2.59137L11.1969 2.217ZM8.66602 7.83301H8.16602C8.16602 12.2513 11.7477 15.833 16.166 15.833V15.333V14.833C12.3 14.833 9.16602 11.699 9.16602 7.83301H8.66602ZM16.166 15.333V15.833C18.552 15.833 20.6928 14.787 22.1575 13.1315L21.7831 12.8002L21.4086 12.4689C20.1254 13.9193 18.2532 14.833 16.166 14.833V15.333ZM21.9605 12.8732L21.4624 12.8301C21.0421 17.6879 16.9667 21.5 12 21.5V22V22.5C17.4904 22.5 21.9941 18.2863 22.4587 12.9163L21.9605 12.8732ZM12 22V21.5C6.75333 21.5 2.50005 17.2467 2.5 12L2 12L1.5 12C1.50005 17.7989 6.20104 22.5 12 22.5V22ZM2 12H2.5C2.5 7.03415 6.31064 2.95921 11.1671 2.53768L11.1238 2.03955L11.0806 1.54142C5.71207 2.0074 1.5 6.51065 1.5 12H2ZM21.7831 12.8002L22.1575 13.1315C22.0328 13.2725 21.846 13.2917 21.7101 13.2362C21.5715 13.1797 21.4453 13.0276 21.4624 12.8301L21.9605 12.8732L22.4587 12.9163C22.5118 12.3021 21.7669 12.0639 21.4086 12.4689L21.7831 12.8002ZM11.1969 2.217L11.5283 2.59137C11.9332 2.23292 11.6949 1.48811 11.0806 1.54142L11.1238 2.03955L11.1671 2.53768C10.9696 2.55482 10.8175 2.42865 10.7609 2.29011C10.7054 2.15421 10.7246 1.96738 10.8655 1.84263L11.1969 2.217Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/site/src/components/icons/mux-logo-small.svg b/site/src/components/icons/mux-logo-small.svg
new file mode 100644
index 00000000..05305f8e
--- /dev/null
+++ b/site/src/components/icons/mux-logo-small.svg
@@ -0,0 +1,21 @@
+<svg viewBox="0 0 52 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_503_2888)">
+    <path
+      d="M32.2365 0C31.1287 0 30.2309 0.89536 30.2309 1.99968V8C30.2309 10.2061 28.4305 12.001 26.2176 12.001C24.0047 12.001 22.2043 10.2061 22.2043 8V1.99968C22.2043 0.89536 21.3062 0 20.1988 0C19.0914 0 18.1933 0.89536 18.1933 1.99968V8C18.1933 12.4112 21.7931 16 26.2179 16C30.6428 16 34.2426 12.4112 34.2426 8V1.99968C34.2426 0.89536 33.3445 0 32.2371 0H32.2365Z"
+      fill="currentColor"
+    />
+    <path
+      d="M41.1383 8L36.5376 12.5866C35.7544 13.3674 35.7544 14.6336 36.5376 15.4144C37.3208 16.1952 38.591 16.1952 39.3742 15.4144L43.9749 10.8278L48.5756 15.4144C49.3588 16.1952 50.629 16.1952 51.4122 15.4144C52.1954 14.6336 52.1954 13.3674 51.4122 12.5866L46.8115 8L51.4122 3.41344C52.1954 2.63264 52.1954 1.3664 51.4122 0.5856C50.629 -0.1952 49.3588 -0.1952 48.5756 0.5856L43.9749 5.17216L39.3742 0.5856C38.591 -0.1952 37.3208 -0.1952 36.5376 0.5856C35.7544 1.3664 35.7544 2.63264 36.5376 3.41344L41.1383 8Z"
+      fill="currentColor"
+    />
+    <path
+      d="M14.8113 0.152462C14.0618 -0.156978 13.199 0.013902 12.6254 0.585742L8.02469 5.1723L3.42398 0.585742C2.85037 0.013902 1.98756 -0.156978 1.23805 0.152462C0.488543 0.461902 0 1.19086 0 1.99982V14.0005C0 15.1048 0.898124 16.0001 2.00585 16.0001C3.11358 16.0001 4.0117 15.1048 4.0117 14.0005V6.82702L6.60657 9.4139C7.38978 10.1947 8.65993 10.1947 9.44314 9.4139L12.038 6.82702V14.0005C12.038 15.1048 12.9361 16.0001 14.0439 16.0001C15.1516 16.0001 16.0497 15.1048 16.0497 14.0005V1.99982C16.0497 1.19118 15.5612 0.461902 14.8117 0.152462H14.8113Z"
+      fill="currentColor"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_503_2888">
+      <rect width="52" height="16" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/site/src/components/icons/mux-logo.svg b/site/src/components/icons/mux-logo.svg
new file mode 100644
index 00000000..a0873827
--- /dev/null
+++ b/site/src/components/icons/mux-logo.svg
@@ -0,0 +1,14 @@
+<svg viewBox="0 0 200 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M124.207 0C119.87 0 116.355 3.46059 116.355 7.72882V30.9202C116.355 39.4468 109.305 46.384 100.641 46.384C91.9767 46.384 84.9273 39.4468 84.9273 30.9202V7.72882C84.9273 3.46059 81.4109 0 77.0749 0C72.739 0 69.2225 3.46059 69.2225 7.72882V30.9202C69.2225 47.9696 83.3174 61.8405 100.642 61.8405C117.967 61.8405 132.062 47.9696 132.062 30.9202V7.72882C132.062 3.46059 128.545 0 124.209 0H124.207ZM124.207 13.0471C121.222 13.0471 118.803 10.6662 118.803 7.72882C118.803 4.7914 121.222 2.41054 124.207 2.41054C127.192 2.41054 129.611 4.7914 129.611 7.72882C129.611 10.6662 127.192 13.0471 124.207 13.0471Z"
+    fill="currentColor"
+  />
+  <path
+    d="M157.303 30.9202L139.29 48.6474C136.223 51.6652 136.223 56.5593 139.29 59.5771C142.356 62.5949 147.329 62.5949 150.396 59.5771L168.409 41.8499L186.423 59.5771C189.489 62.5949 194.463 62.5949 197.529 59.5771C200.596 56.5593 200.596 51.6652 197.529 48.6474L179.516 30.9202L197.529 13.193C200.596 10.1752 200.596 5.28117 197.529 2.26336C194.463 -0.754454 189.489 -0.754454 186.423 2.26336L168.409 19.9905L150.396 2.26336C147.329 -0.754454 142.356 -0.754454 139.29 2.26336C136.223 5.28117 136.223 10.1752 139.29 13.193L157.303 30.9202ZM191.975 59.4299C188.991 59.4299 186.571 57.0491 186.571 54.1116C186.571 51.1742 188.991 48.7934 191.975 48.7934C194.96 48.7934 197.38 51.1742 197.38 54.1116C197.38 57.0491 194.96 59.4299 191.975 59.4299Z"
+    fill="currentColor"
+  />
+  <path
+    d="M57.9919 0.588807C55.0573 -0.607188 51.6791 0.053268 49.4332 2.26345L31.4197 19.9906L13.4061 2.26345C11.1603 0.053268 7.78202 -0.607188 4.84743 0.588807C1.91283 1.7848 0 4.60225 0 7.72891V54.1117C0 58.38 3.51649 61.8405 7.85366 61.8405C12.1908 61.8405 15.7073 58.38 15.7073 54.1117V26.3862L25.8672 36.3845C28.9337 39.4023 33.9069 39.4023 36.9734 36.3845L47.1333 26.3862V54.1117C47.1333 58.38 50.6498 61.8405 54.9869 61.8405C59.3241 61.8405 62.8406 58.38 62.8406 54.1117V7.72891C62.8406 4.60349 60.9278 1.7848 57.9932 0.588807H57.9919ZM54.9869 59.4312C52.0021 59.4312 49.5828 57.0504 49.5828 54.113C49.5828 51.1755 52.0021 48.7947 54.9869 48.7947C57.9718 48.7947 60.3911 51.1755 60.3911 54.113C60.3911 57.0504 57.9718 59.4312 54.9869 59.4312Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/site/src/components/icons/sponsors/brightcove.svg b/site/src/components/icons/sponsors/brightcove.svg
new file mode 100644
index 00000000..b8a74ec0
--- /dev/null
+++ b/site/src/components/icons/sponsors/brightcove.svg
@@ -0,0 +1,22 @@
+<svg aria-label="Brightcove Logo" role="img" viewBox="0 0 189 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_503_2096)">
+    <path d="M188.314 0H0V39H188.314V0Z" fill="#1E1D1D" />
+    <path
+      d="M44.8487 5.71275H50.6987V33.1775H44.8487V5.71275ZM41.3665 12.936V14.0071C41.3665 17.4951 40.113 19.0606 36.8258 19.3902V19.8846C40.113 20.2142 41.3665 21.7797 41.3665 25.2677V33.1775H35.5165V25.0754C35.5165 22.8782 34.848 22.2191 33.093 22.2191H31.143V33.1775H25.293V5.71275H34.263C39.4723 5.71275 41.3665 7.85501 41.3665 12.936ZM35.5165 13.2381C35.5165 11.0409 34.848 10.3818 33.093 10.3818H31.143V17.5501H32.8144C34.7644 17.5501 35.5165 16.8635 35.5165 14.6113V13.2381ZM22.0894 24.5811V25.9543C22.0894 31.0353 20.1951 33.1775 14.9858 33.1775H5.79297V5.71275H14.8465C20.0558 5.71275 21.9501 7.85501 21.9501 12.936V13.3205C21.9501 16.8085 20.6965 18.374 17.4094 18.7036V19.198C20.8358 19.5275 22.0894 21.093 22.0894 24.5811ZM11.643 16.8909H13.4537C15.4037 16.8909 16.1558 16.2043 16.1558 13.9522V13.2381C16.1558 11.0409 15.4873 10.3818 13.7323 10.3818H11.643V16.8909ZM16.2394 24.4163C16.2394 22.2191 15.5708 21.5599 13.8158 21.5599H11.643V28.5085H13.8158C15.5708 28.5085 16.2394 27.8494 16.2394 25.6522V24.4163ZM62.2873 5.30078C56.9944 5.30078 54.2923 8.18458 54.2923 13.5402V26.174C54.2923 31.1726 56.3815 33.5895 60.978 33.5895C64.8223 33.5895 66.3823 31.9966 66.5494 28.124H66.9673L67.7194 33.1775H70.2823V17.9895H62.343V22.1642H64.7108V26.229C64.7108 28.1515 63.9587 28.9754 62.4265 28.9754C60.8944 28.9754 60.1423 28.1515 60.1423 26.229V12.6613C60.1423 10.7388 60.8944 9.91487 62.3151 9.91487C63.7358 9.91487 64.488 10.7388 64.488 12.6613V15.5726H70.2823V13.2656C70.2823 8.0198 67.6358 5.30078 62.2873 5.30078ZM152.182 28.4261H151.653L149.536 5.71275H143.491L146.75 33.1775H156.444L159.592 5.71275H154.188L152.182 28.4261ZM141.569 13.5402V25.3501C141.569 30.7057 138.783 33.5895 133.49 33.5895C128.197 33.5895 125.412 30.7057 125.412 25.3501V13.5402C125.412 8.18458 128.197 5.30078 133.49 5.30078C138.783 5.30078 141.569 8.18458 141.569 13.5402ZM135.719 12.6613C135.719 10.7388 134.911 9.91487 133.49 9.91487C132.069 9.91487 131.262 10.7388 131.262 12.6613V26.229C131.262 28.1515 132.069 28.9754 133.49 28.9754C134.911 28.9754 135.719 28.1515 135.719 26.229V12.6613ZM175.276 10.4642V5.71275H162.044V33.1775H175.276V28.4261H167.894V21.6149H174.774V17.0008H167.894V10.4642H175.276ZM91.788 10.4642H95.883V33.1775H101.733V10.4642H105.828V5.71275H91.788V10.4642ZM114.965 5.30078C109.839 5.30078 107.082 8.18458 107.082 13.5402V25.3501C107.082 30.7057 109.839 33.5895 114.965 33.5895C120.174 33.5895 122.849 30.8705 122.849 25.6247V22.274H117.054V26.229C117.054 28.1515 116.302 28.9754 114.993 28.9754C113.684 28.9754 112.932 28.1515 112.932 26.229V12.6613C112.932 10.7388 113.684 9.91487 114.993 9.91487C116.302 9.91487 117.054 10.7388 117.054 12.6613V16.3416H122.849V13.2656C122.849 8.0198 120.174 5.30078 114.965 5.30078ZM83.988 17.0282H79.893V5.71275H74.043V33.1775H79.893V21.6423H83.988V33.1775H89.838V5.71275H83.988V17.0282Z"
+      fill="#EFE6D2"
+    />
+    <path
+      d="M180.958 7.36105V7.27866C180.958 6.83922 180.624 6.53711 180.011 6.53711H178.98V8.89908H179.482V8.1026H180.039L180.457 8.89908H181.014L180.513 7.96528C180.791 7.88288 180.958 7.66317 180.958 7.36105ZM179.482 6.97655H180.039C180.345 6.97655 180.485 7.08641 180.485 7.30612V7.33359C180.485 7.52584 180.345 7.66317 180.039 7.66317H179.482V6.97655Z"
+      fill="#EFE6D2"
+    />
+    <path
+      d="M179.929 5.30078C178.536 5.30078 177.449 6.34444 177.449 7.74515C177.449 9.14585 178.508 10.1895 179.929 10.1895C181.321 10.1895 182.408 9.14585 182.408 7.74515C182.408 6.34444 181.321 5.30078 179.929 5.30078ZM179.929 9.83247C178.703 9.83247 177.811 8.9536 177.811 7.74515C177.811 6.5367 178.703 5.65782 179.929 5.65782C181.154 5.65782 182.046 6.5367 182.046 7.74515C182.046 8.9536 181.126 9.83247 179.929 9.83247Z"
+      fill="#EFE6D2"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_503_2096">
+      <rect width="188.314" height="39" fill="white" />
+    </clipPath>
+  </defs>
+</svg>
diff --git a/site/src/components/icons/sponsors/browserstack.svg b/site/src/components/icons/sponsors/browserstack.svg
new file mode 100644
index 00000000..cbff9ab2
--- /dev/null
+++ b/site/src/components/icons/sponsors/browserstack.svg
@@ -0,0 +1,34 @@
+<svg aria-label="Browser Stack logo" role="img" viewBox="0 0 206 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M17.7393 0.5C27.3003 0.5002 34.9775 8.24954 34.9775 17.9219C34.9775 27.5942 27.3003 35.3436 17.7393 35.3438C8.178 35.3438 0.5 27.5943 0.5 17.9219C0.5 8.24942 8.178 0.5 17.7393 0.5Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M15.3359 0.5C23.6195 0.500217 30.2852 7.53657 30.2852 16.1875C30.2852 24.8396 23.6191 31.8717 15.4541 31.874C7.16037 31.7608 0.5 24.8313 0.5 16.1875C0.5 7.53396 7.16903 0.5 15.3359 0.5Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M18.3105 0.5C25.5617 0.500145 31.4287 6.725 31.4287 14.3379C31.4285 22.0635 25.5642 28.1747 18.3105 28.1748C11.0594 28.1748 5.19161 21.9507 5.19141 14.3379C5.19141 6.72771 11.171 0.5 18.3105 0.5Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M18.3115 2.92773C24.8797 2.92794 30.2851 8.57811 30.2852 15.4932C30.2852 22.5269 24.877 28.1746 18.3115 28.1748C11.7517 28.1748 6.45117 22.5332 6.45117 15.4932C6.45127 8.57183 11.749 2.92773 18.3115 2.92773Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M15.335 5.24023C20.3183 5.24031 24.3339 9.28959 24.334 14.3369C24.334 19.3843 20.3184 23.4335 15.335 23.4336C10.3515 23.4336 6.33594 19.3844 6.33594 14.3369C6.33604 9.28955 10.3515 5.24023 15.335 5.24023Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M18.9979 6.51172C22.5736 6.51181 25.5936 9.71592 25.5936 13.7588C25.5935 17.8016 22.5735 21.0058 18.9979 21.0059C15.4222 21.0059 12.4023 17.8016 12.4022 13.7588C12.4022 9.71587 15.4222 6.51172 18.9979 6.51172Z"
+    stroke="currentColor"
+  />
+  <path
+    d="M17.7402 8.32422C21.0591 8.32425 23.6914 11.2151 23.6914 14.915C23.6913 18.6149 21.059 21.5058 17.7402 21.5059C14.4214 21.5059 11.7892 18.6149 11.7891 14.915C11.7891 11.215 14.4213 8.32422 17.7402 8.32422ZM20.4863 10.8691C19.6852 10.6379 18.54 11.2166 17.9678 12.1416C17.396 13.0664 17.625 14.1065 18.4258 14.3379C19.2268 14.5691 20.3711 13.9912 20.9434 13.0664C21.5155 12.1415 21.4017 11.1005 20.4863 10.8691Z"
+    fill="currentColor"
+  />
+  <path
+    d="M111.29 14.8477C113.464 14.8477 115.182 15.5418 116.44 16.4668C116.555 16.5824 116.555 16.6979 116.44 16.8135L115.067 18.4316C114.953 18.5473 114.838 18.5473 114.724 18.4316C113.922 17.8536 112.549 17.3916 111.176 17.3916C109.803 17.3917 109.116 17.97 109.116 18.7793C109.116 19.4728 109.575 19.9348 111.405 20.166L112.893 20.2822C115.754 20.5135 117.127 21.9008 117.127 24.0977C117.127 26.6413 115.182 28.4911 111.405 28.4912C108.659 28.26 106.713 27.2193 105.568 26.1787C105.454 26.0631 105.454 25.9476 105.568 25.832L107.171 24.2129C107.285 24.0978 107.399 24.0977 107.514 24.2129C108.544 25.0223 110.146 25.7168 111.52 25.7168C113.236 25.7168 114.037 25.0222 114.037 24.2129C114.037 23.4038 113.579 22.9418 111.748 22.8262L110.261 22.71C107.514 22.4787 106.026 21.0914 106.026 18.8945C106.026 16.3509 107.971 14.8478 111.29 14.8477ZM150.201 9.5293C152.604 9.52934 154.893 10.2228 156.381 11.3789C156.495 11.4945 156.495 11.6109 156.381 11.7266L155.008 13.6914C154.893 13.807 154.779 13.8076 154.664 13.8076C153.062 12.8827 151.689 12.42 150.087 12.4199C148.142 12.4199 147.112 13.4604 147.111 14.8477C147.111 16.1195 148.027 16.9295 150.659 17.2764L151.688 17.3916C155.351 17.8541 157.411 19.5891 157.411 22.7109C157.411 25.9482 154.893 28.3759 150.201 28.376C147.34 28.2604 144.593 27.1039 143.105 25.832C142.991 25.7165 142.991 25.6009 143.105 25.4854L144.822 23.5195C144.936 23.4043 145.051 23.4044 145.165 23.5195C146.424 24.4445 148.255 25.4853 150.43 25.4854C152.719 25.4854 154.092 24.4449 154.092 22.8262C154.092 21.5543 153.291 20.6291 150.544 20.2822L149.515 20.167C145.853 19.7045 143.678 17.97 143.678 14.9639C143.678 11.7264 146.196 9.5293 150.201 9.5293ZM78.2158 14.6172C80.9623 14.6172 83.022 15.889 83.8232 18.2012C84.1666 19.1262 84.2812 19.9363 84.2812 21.4395C84.2812 22.8267 84.1665 23.7518 83.8232 24.6768C83.022 26.8734 80.9623 28.2607 78.2158 28.2607C75.4693 28.2607 73.4096 26.8735 72.6084 24.6768C72.2651 23.7518 72.1504 22.9423 72.1504 21.4395C72.1504 20.052 72.2651 19.1262 72.6084 18.2012C73.4096 16.0046 75.4694 14.6172 78.2158 14.6172ZM124.909 14.7324C127.656 14.7324 129.715 16.1198 130.517 18.3164C130.86 19.2414 130.975 20.1668 130.975 22.248C130.975 22.3636 130.861 22.4794 130.632 22.4795H122.277C122.163 22.4795 122.163 22.4793 122.163 22.5947C122.163 22.9416 122.277 23.2889 122.392 23.6357C122.849 24.9075 123.879 25.6015 125.481 25.6016C126.969 25.6016 127.999 25.0228 128.686 24.3291C128.8 24.2135 128.915 24.2136 129.144 24.3291L130.86 25.7168C130.975 25.8324 130.975 25.9479 130.86 26.0635C129.716 27.3353 127.771 28.2607 125.253 28.2607C122.163 28.2607 120.103 26.8727 119.302 24.6758C119.073 23.8665 118.844 22.8262 118.844 21.5547C118.844 20.1672 118.958 19.2414 119.302 18.3164C120.103 16.1198 122.163 14.7325 124.909 14.7324ZM172.289 14.8477C176.409 14.8478 178.011 16.2357 178.011 19.3574V27.7979C178.011 27.9133 177.897 28.0291 177.782 28.0293H175.265V27.9131C175.15 27.9131 175.035 27.7973 175.035 27.6816V26.7568C174.349 27.6818 173.09 28.2597 171.145 28.2598C168.627 28.2598 166.567 26.9883 166.566 24.3291C166.566 21.5541 168.626 20.2823 172.06 20.2822H174.807C174.921 20.2822 174.921 20.2816 174.921 20.166V19.4727C174.921 17.9695 174.234 17.2754 171.945 17.2754C170.458 17.2754 169.428 17.623 168.855 18.2012C168.741 18.3166 168.512 18.3164 168.512 18.2012L167.482 16.4668C167.368 16.3512 167.482 16.2348 167.482 16.1191C168.627 15.4255 170.115 14.8477 172.289 14.8477ZM186.022 14.6172C188.082 14.6172 189.685 15.4268 190.715 16.583C190.829 16.6986 190.829 16.8141 190.715 16.9297L188.884 18.4326C188.769 18.5482 188.654 18.5482 188.54 18.4326C187.853 17.739 187.167 17.2764 186.022 17.2764C184.764 17.2764 183.848 17.8547 183.505 19.0107C183.276 19.7045 183.276 20.3988 183.276 21.4395C183.276 22.4799 183.276 23.1735 183.505 23.8672C183.848 24.9078 184.878 25.4863 186.022 25.4863C187.167 25.4863 187.853 25.1392 188.54 24.3301C188.654 24.2145 188.769 24.2145 188.884 24.3301L190.715 25.833C190.829 25.9486 190.829 26.0641 190.715 26.1797C189.685 27.3359 188.082 28.1455 186.022 28.1455C183.276 28.2611 181.216 26.9891 180.415 24.6768C180.186 23.8675 179.957 22.8268 179.957 21.4395C179.957 20.052 180.072 19.0105 180.415 18.2012C181.216 15.889 183.276 14.6172 186.022 14.6172ZM162.331 11.1484C162.445 11.1485 162.56 11.2643 162.56 11.3799V14.9639C162.56 15.0793 162.56 15.0801 162.674 15.0801H164.506C164.62 15.0804 164.734 15.1952 164.734 15.3105V17.0449C164.734 17.1604 164.62 17.276 164.506 17.2764H162.674C162.56 17.2764 162.56 17.2771 162.56 17.3926V24.0986C162.56 25.0234 162.903 25.2548 163.818 25.2549H164.506C164.62 25.2552 164.734 25.3709 164.734 25.4863V27.6826C164.734 27.7981 164.62 27.9137 164.506 27.9141H163.246L162.994 28.1416C160.437 28.0646 159.47 26.7941 159.47 24.3301V17.623C159.47 17.5078 159.47 17.5078 159.355 17.5078H158.439C158.325 17.5076 158.211 17.3919 158.211 17.2764V15.4268C158.211 15.3113 158.325 15.1956 158.439 15.1953H159.355C159.47 15.1953 159.47 15.1953 159.47 15.0801V11.3799C159.47 11.2644 159.584 11.1488 159.698 11.1484H162.331ZM195.865 9.76172C195.98 9.76186 196.094 9.87761 196.094 9.99316V20.5146L200.786 15.3115C200.901 15.0804 201.13 15.0801 201.358 15.0801H204.22C204.334 15.0803 204.448 15.196 204.334 15.3115L199.985 20.0527L205.021 27.6836C205.135 27.7992 205.021 27.915 204.906 27.915H201.816C201.588 27.915 201.473 27.7992 201.358 27.6836L197.925 22.249L196.094 24.2148V27.5684C196.093 27.6838 195.979 27.7987 195.865 27.7988H193.232C193.118 27.7986 193.004 27.6837 193.004 27.5684V9.99316C193.004 9.87766 193.118 9.76197 193.232 9.76172H195.865ZM88.0576 15.0801C88.2865 15.0801 88.4014 15.1959 88.4014 15.3115L91.0332 23.8672L93.665 15.3115C93.665 15.1959 93.8943 15.0801 94.0088 15.0801H96.0684C96.1828 15.0801 96.4121 15.1959 96.4121 15.3115L99.1592 23.8672L101.677 15.3115C101.677 15.0804 101.791 15.0801 102.02 15.0801H104.767C104.881 15.0802 104.995 15.1959 104.995 15.3115L100.646 27.6836C100.646 27.7991 100.531 27.9141 100.303 27.9141H98.0146C97.9003 27.9141 97.7853 27.7992 97.6709 27.6836L95.0391 19.4736L92.4062 27.6836C92.406 27.799 92.2919 27.9139 92.0635 27.9141H89.7744C89.66 27.9141 89.5451 27.7992 89.4307 27.6836L85.082 15.3115C85.082 15.196 85.082 15.0802 85.3105 15.0801H88.0576ZM69.1748 14.7324C70.2048 14.7324 71.3495 15.0797 72.0361 15.7734C72.1503 15.889 72.1505 16.0046 72.0361 16.1201L70.5479 17.9697C70.4334 18.0853 70.3195 18.0853 70.2051 17.9697C69.6329 17.6229 68.9456 17.3916 68.1445 17.3916C66.3138 17.3918 65.5128 18.548 65.5127 20.6289V27.5664C65.5127 27.6819 65.3985 27.7976 65.2842 27.7979H62.7656L62.7236 27.9082C62.625 27.8846 62.5372 27.7838 62.5371 27.6826V15.3105C62.5371 15.195 62.6513 15.0794 62.7656 15.0791H65.3984C65.5128 15.0792 65.627 15.195 65.627 15.3105V16.3516C66.3136 15.311 67.4582 14.7324 69.1748 14.7324ZM139.673 14.7324C140.703 14.7324 141.848 15.0797 142.534 15.7734C142.648 15.889 142.649 16.0046 142.534 16.1201L141.161 17.9697C141.047 18.0854 140.932 18.0854 140.817 17.9697C140.245 17.6229 139.559 17.3917 138.758 17.3916C136.927 17.3916 136.125 18.5479 136.125 20.6289V27.5664C136.125 27.682 136.011 27.7977 135.896 27.7979H133.264L133.222 27.9082C133.123 27.8846 133.035 27.7838 133.035 27.6826V15.3105C133.035 15.195 133.149 15.0793 133.264 15.0791H135.896C136.011 15.0792 136.125 15.195 136.125 15.3105V16.3516C136.812 15.311 137.956 14.7324 139.673 14.7324ZM54.0674 9.75977C58.1874 9.75977 60.0186 11.7256 60.0186 14.6162C60.0185 16.6971 58.9891 17.8535 57.7305 18.4316C58.8749 18.8943 60.3623 20.2819 60.3623 22.4785C60.3623 26.0628 57.959 27.7968 53.7246 27.7969H46.8574C46.7432 27.7966 46.6292 27.6818 46.6289 27.5664V9.99121C46.6289 9.87571 46.7431 9.76002 46.8574 9.75977H54.0674ZM172.518 22.4785C170.458 22.4785 169.542 23.0569 169.542 24.2129C169.542 25.2535 170.343 25.832 171.945 25.832C173.891 25.832 174.921 25.0223 174.921 23.6348V22.5947C174.921 22.4792 174.921 22.4785 174.807 22.4785H172.518ZM78.3301 17.2764C77.0714 17.2765 76.156 17.8547 75.6982 19.0107C75.4694 19.7045 75.4697 20.2832 75.4697 21.4395C75.4697 22.4799 75.4694 23.1735 75.6982 23.8672C76.0416 24.9077 76.9569 25.6015 78.3301 25.6016C79.4745 25.6016 80.3909 24.9078 80.8486 23.8672C81.0774 23.1736 81.0771 22.5954 81.0771 21.4395C81.0771 20.3988 81.0775 19.7045 80.8486 19.0107C80.5053 17.9701 79.589 17.2764 78.3301 17.2764ZM50.0625 20.0508C49.9481 20.0508 49.9482 20.0504 49.9482 20.166V24.9062C49.9482 25.1375 49.9481 25.1377 50.0625 25.1377H54.1826C56.0135 25.1376 57.043 24.0968 57.043 22.5938C57.0428 21.0909 56.0133 20.0509 54.1826 20.0508H50.0625ZM124.909 17.2764C123.651 17.2764 122.621 17.8542 122.277 18.8945C122.163 19.2414 122.163 19.5887 122.163 19.9355C122.163 20.0512 122.163 20.0508 122.277 20.0508H127.656C127.77 20.0508 127.771 20.0511 127.771 19.9355C127.656 19.5887 127.656 19.2414 127.542 18.8945C127.199 17.854 126.168 17.2764 124.909 17.2764ZM50.0625 12.4189C49.9481 12.4189 49.9482 12.4195 49.9482 12.5352V17.0439C49.9482 17.1596 49.9481 17.1602 50.0625 17.1602H53.9531V17.2754C55.6696 17.2754 56.7 16.3506 56.7002 14.8477C56.7002 13.4602 55.6698 12.4189 53.9531 12.4189H50.0625Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/site/src/components/icons/sponsors/fastly.svg b/site/src/components/icons/sponsors/fastly.svg
new file mode 100644
index 00000000..3203721f
--- /dev/null
+++ b/site/src/components/icons/sponsors/fastly.svg
@@ -0,0 +1,6 @@
+<svg  aria-label="Fastly Logo" role="img" viewBox="0 0 125 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M107.692 16.3721H104.487L109.215 27.7305L113.942 16.3721H110.737V11.6719H124.198V16.3721H120.993L112.74 36.1904C110.336 41.752 106.49 47 100.561 47C99.1182 47 97.1952 46.8436 95.833 46.5303L96.3936 40.7334C97.2749 40.8901 98.3971 40.9687 98.958 40.9688C101.682 40.9688 104.807 39.3231 105.769 36.4248L97.4355 16.3721H94.2305V11.6719H107.692V16.3721ZM11.1377 0C12.58 0 14.3429 0.234734 15.7852 0.469727L14.9043 5.63965C13.9428 5.48298 13.4613 5.4834 12.8203 5.4834C10.4166 5.48341 9.85547 5.71863 9.85547 7.99023V11.6719H14.7432V16.3721H9.85547V31.6465H13.1406V36.5029H0.0800781V31.6465H3.28516V16.3721H0V12.1416L3.28516 11.5938V7.36328C3.28516 2.19335 4.40706 2.7125e-05 11.1377 0ZM31.4893 8.38086H30.6875V10.5742C32.2901 10.8876 33.7325 11.4364 35.0947 12.2197V10.3398H41.585V30.1582H43.1875V36.5029H36.2969L35.0947 34.623C33.0916 35.798 30.768 36.5029 28.2041 36.5029C20.8323 36.5029 14.8223 30.6276 14.8223 23.4209C14.8225 16.9978 19.5499 11.6709 25.7998 10.5742H25.7197V8.38086H24.918V6.73633H31.4893V8.38086ZM56.25 10.3398C60.4167 10.3398 63.542 10.9667 66.5869 11.75V16.4502H61.5391V15.5098C59.5362 15.1965 57.6131 15.1182 56.5713 15.1182C53.5264 15.1182 53.2051 16.6852 53.2051 17.5469C53.2052 18.7217 53.6067 19.4269 56.8916 20.1318C61.6991 21.1501 66.5066 22.2466 66.5068 28.1211C66.5068 33.6044 63.622 36.5029 57.4521 36.5029C53.3657 36.5029 49.3593 35.6417 46.3945 34.8584V30.0801H51.3623V30.9414C53.4456 31.3331 55.6897 31.333 56.8916 31.333C60.0965 31.3329 60.6572 29.6097 60.6572 28.748C60.6572 27.4949 59.6957 26.8686 56.7314 26.3203C51.0423 25.3803 46.4746 23.4212 46.4746 17.7812C46.4747 12.3765 50.1605 10.3399 56.25 10.3398ZM76.1211 11.6719H81.249V16.3721H76.1211V27.1035C76.1211 29.61 75.9613 30.4719 78.6055 30.3936C79.2464 30.3153 80.1275 30.3931 81.1689 30.1582L82.1309 35.7979C80.6085 36.1112 78.6054 36.5029 77.1631 36.5029C71.0733 36.5029 69.6309 33.9181 69.6309 28.3564V0H76.1211V11.6719ZM91.0254 31.6465H94.2305V36.5029H84.5352V0H91.0254V31.6465ZM28.5244 17.3896H27.7227V16.6064C24.1972 16.8416 21.4729 19.583 21.2324 22.9512H22.0342V23.7344H21.2324C21.3927 27.1026 24.1971 29.845 27.7227 30.0801V29.2959H28.5244V30.0801C31.9698 29.9233 34.6941 27.2596 35.0146 23.9697V23.7344H34.2129V22.9512H35.0146V22.7168C34.6941 19.4269 31.9698 16.7632 28.5244 16.6064V17.3896ZM31.5693 20.5225L29.3252 22.9512C29.4053 23.1078 29.4062 23.1861 29.4062 23.3428C29.4062 24.0477 28.845 24.5956 28.2041 24.5957C27.5631 24.5957 27.002 24.0478 27.002 23.3428C27.002 22.6378 27.5631 22.0898 28.2041 22.0898C28.3642 22.0898 28.4443 22.0897 28.6045 22.168L31.0889 20.0527L31.5693 20.5225Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/site/src/components/icons/sponsors/netlify.svg b/site/src/components/icons/sponsors/netlify.svg
new file mode 100644
index 00000000..db474b21
--- /dev/null
+++ b/site/src/components/icons/sponsors/netlify.svg
@@ -0,0 +1,8 @@
+<svg aria-label="Netlify Logo" role="img" viewBox="0 0 181 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M170.116 30.7159L174.918 14.9141H180.459L171.225 41.7412C169.747 45.6612 167.408 47.6211 163.96 47.6211C163.221 47.6211 162.359 47.4989 161.374 47.2539V43.211L162.359 43.334C163.714 43.334 164.699 43.0887 165.314 42.5987C165.93 42.1087 166.546 41.2509 166.915 40.1485L167.653 38.1885L159.527 14.9141H165.191L170.116 30.7159ZM25.9805 45.5391C25.2418 46.274 24.8723 46.6421 24.3799 46.7647C23.8875 46.8872 23.3947 46.8871 22.9023 46.7647C22.2867 46.6422 21.7936 46.1523 20.8086 45.0498L9.72754 34.0245L12.5596 29.6143H12.6826C13.2982 29.8592 14.0368 29.7372 14.6523 29.4922H14.7754L25.9805 45.5391ZM28.5664 30.8399H28.6895C28.8127 31.4521 29.3046 32.0646 29.9199 32.3096V32.4317C29.7968 33.4116 28.4427 41.3738 28.0732 43.5791L27.0889 44.5596L16.0068 28.7569V28.6348L16.1299 28.5118C16.1307 28.511 16.1404 28.5016 16.2529 28.3897H16.376L28.5664 30.8399ZM38.7861 32.9219L29.9199 41.7422L31.3984 32.4317H31.5215C31.8906 32.3091 32.1367 32.0643 32.3828 31.8194L32.5059 31.6973L38.7861 32.9219ZM115.57 14.9141H119.634V18.834H115.57V31.8184C115.57 32.6757 115.693 33.2884 116.062 33.7784C116.432 34.1458 117.047 34.3916 117.909 34.3916C118.525 34.3916 119.141 34.269 119.757 34.1465V38.1885C118.526 38.556 117.417 38.6787 116.309 38.6787C112.246 38.6786 110.275 36.4734 110.275 32.0635V18.711H106.459V14.9141H110.275V9.27836H115.57V14.9141ZM94.8848 14.4239C98.0859 14.4239 100.549 15.4039 102.272 17.4864C103.996 19.5688 104.857 22.3867 104.857 26.0616V28.1436H89.7129C89.836 30.1034 90.5747 31.5734 91.6826 32.6758C92.7907 33.7782 94.2685 34.3916 95.9922 34.3916C98.4547 34.3916 100.302 33.4111 101.902 31.4512L104.734 34.1465C103.749 35.4938 102.518 36.5962 101.041 37.3311C99.1941 38.1886 97.4701 38.5557 95.5 38.5557C92.1755 38.5557 89.4662 37.4536 87.373 35.3711C85.28 33.2887 84.2949 30.4709 84.2949 27.0411V26.4288C84.2949 24.1013 84.7875 22.0182 85.6494 20.1807C86.5113 18.3433 87.8662 16.8735 89.4668 15.8936C91.0675 14.9136 92.9147 14.4239 94.8848 14.4239ZM72.4746 14.4239C77.3998 14.4239 79.8623 17.2414 79.8623 22.7539V38.1885H74.5684V23.1211C74.5684 21.6512 74.1986 20.5485 73.583 19.8135C72.9674 19.0786 71.8592 18.711 70.3818 18.711C68.2888 18.711 66.6882 19.6911 65.7031 21.5284V38.1885H60.4082V14.9141H65.5801L65.7031 17.6084C67.4268 15.5262 69.6429 14.4239 72.4746 14.4239ZM129.237 38.1885H123.943V5.11332H129.237V38.1885ZM140.565 38.1885H135.271V14.9141H140.565V38.1885ZM156.449 4.74613C157.311 4.74615 158.296 4.86834 159.404 5.11332L159.281 9.15629C158.666 9.03379 157.926 9.03324 157.311 9.03324C154.848 9.03337 153.494 10.2588 153.494 12.8311V14.9141H158.296V18.834H153.494V38.1885H148.199V18.711H144.629V14.9141H148.199V12.8311C148.199 10.2587 148.939 8.29912 150.416 6.82914C151.894 5.48164 153.864 4.74613 156.449 4.74613ZM11.2051 28.5118C11.2119 28.5119 11.3281 28.5159 11.3281 28.6348C11.3284 28.757 11.4512 28.7575 11.4512 28.8799L8.74219 33.167L6.15625 30.5948L11.2051 28.5118ZM47.0352 24.5918C46.7889 25.0818 46.2964 25.5717 45.5576 26.3067L40.1406 31.6973L33.1221 30.2266C33.1221 30.2266 32.9991 30.227 32.999 30.1045C32.999 29.4921 32.6292 29.0023 32.1367 28.6348V28.5118L33.4912 20.5498C33.4912 20.5498 33.4912 20.4268 33.6143 20.4268C34.2299 20.3043 34.7224 20.0594 35.0918 19.5694H35.2148L47.0352 24.5918ZM10.3428 27.042C10.3428 27.042 10.4656 27.042 10.4658 27.1641L10.3428 27.2871L5.04785 29.4922L1.84668 26.3067C1.35425 25.8168 0.861448 25.327 0.615234 25.0821L10.3428 27.042ZM31.8906 20.0596C31.8919 20.0609 31.9038 20.0724 32.0137 20.1817L30.6592 28.1446C30.6591 28.1488 30.657 28.2666 30.5361 28.2666C29.7974 28.2666 29.1819 28.7571 28.8125 29.2471V29.3692C28.8125 29.3692 28.8122 29.3692 28.6895 29.3692L16.6221 26.919C16.7446 26.7969 16.501 26.1894 16.499 26.1846L31.6445 19.8145C31.7675 19.9368 31.7676 19.9372 31.8906 20.0596ZM11.5742 24.837C11.5765 24.8392 11.6961 24.959 11.5742 24.959C11.4511 25.204 11.2052 25.3273 11.082 25.5723C11.082 25.5723 11.0818 25.5722 10.959 25.6944L0 23.3672C0 23.1224 0.000121234 22.9997 0.123047 22.7549C0.246172 22.1424 0.861709 21.6518 1.84668 20.6719L5.91016 16.6299C7.75704 19.3248 9.72735 22.1421 11.5742 24.837ZM31.0283 17.7315C31.0283 17.7315 31.1514 17.732 31.1514 17.8545V18.5899C31.1512 18.5978 31.1472 18.712 31.0283 18.712C29.9186 19.2026 16.1299 25.0821 16.1299 25.0821H16.0068V24.959L21.5479 16.5069L21.6709 16.3848H22.04C22.9019 16.3848 23.6413 16.0173 24.1338 15.2823C24.1338 14.9148 24.1337 14.9141 24.2568 14.9141L31.0283 17.7315ZM94.8848 18.711C93.4073 18.711 92.2984 19.2008 91.4365 20.1807C90.5747 21.1606 89.9592 22.6309 89.7129 24.3457H99.6865V23.9786C99.5634 22.2636 99.0708 20.9161 98.332 20.0586C97.4702 19.0787 96.3621 18.711 94.8848 18.711ZM12.5596 10.0147C13.0527 10.2599 15.0219 10.9948 16.6221 11.7295C17.853 12.2194 19.0843 12.7091 19.4541 12.9541C19.4541 12.9541 19.5771 12.9547 19.5771 13.0772V13.1993C19.454 14.0568 19.7008 14.7918 20.1934 15.4043V15.5274L14.5293 24.2246H14.4062C14.16 24.2246 13.9132 24.1016 13.79 24.1016C13.5441 24.1016 13.4209 24.1022 13.1748 24.2246H13.0518C13.0518 24.2246 13.0518 24.2241 13.0518 24.1016L7.01855 15.5274L12.5596 10.0147ZM45.4346 20.6719C46.4196 21.6519 46.9119 22.1424 47.1582 22.7549C47.1582 22.8768 47.1587 22.8771 47.2812 22.9991L35.8311 18.2217C35.8311 18.2217 35.7072 18.222 35.707 18.0996C35.707 17.9771 35.7079 17.9766 35.8311 17.9766L40.6328 15.8946L45.4346 20.6719ZM39.5244 14.792L34.8457 16.752C34.5994 16.6295 34.4757 16.3843 34.2295 16.2618C34.1099 16.2615 34.1065 16.1455 34.1064 16.1397L35.0918 10.3819L39.5244 14.792ZM33.7373 9.03422L32.6289 16.0166C32.3827 16.1391 32.1368 16.2623 32.0137 16.3848L24.8721 13.3223C24.8697 13.3223 24.749 13.3206 24.749 13.1993C24.749 12.8318 24.6261 12.4642 24.3799 12.0967C24.3799 12.0967 24.2568 11.9746 24.3799 11.9746L29.0586 4.37992L33.7373 9.03422ZM22.9023 0.0918361C23.3948 -0.0305861 23.8875 -0.030638 24.3799 0.0918361C24.9954 0.214414 25.4879 0.704488 26.4727 1.80668L28.0732 3.39945L23.0254 11.2393H22.9023C22.0404 10.9943 21.1781 11.117 20.5625 11.7295H20.4395C19.5775 11.362 14.4058 9.15715 13.667 8.91215L20.8086 1.80668C21.7936 0.826688 22.2867 0.336835 22.9023 0.0918361ZM137.979 5.97074C138.965 5.97074 139.704 6.21664 140.196 6.82914C140.689 7.31914 140.935 8.0543 140.935 8.7891C140.934 9.52396 140.689 10.2592 140.196 10.7491C139.704 11.239 138.965 11.4834 137.979 11.4834C136.995 11.4834 136.256 11.2388 135.764 10.7491C135.271 10.2591 135.024 9.64638 135.024 8.7891C135.024 7.93163 135.271 7.31913 135.764 6.82914C136.256 6.33916 136.995 5.97078 137.979 5.97074Z"
+    fill="currentColor"
+  />
+</svg>
diff --git a/site/src/components/icons/sun.svg b/site/src/components/icons/sun.svg
new file mode 100644
index 00000000..a4cec157
--- /dev/null
+++ b/site/src/components/icons/sun.svg
@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.4941 17.9766C11.661 17.9905 11.8296 18 12 18C12.1664 18 12.3311 17.9908 12.4941 17.9775V23H11.4941V17.9766ZM17.9375 21.2734L17.0723 21.7744L14.5615 17.4258C14.8646 17.2824 15.1531 17.1139 15.4258 16.9238L17.9375 21.2734ZM8.57227 16.9238C8.84506 17.1141 9.1342 17.2823 9.4375 17.4258L6.92773 21.7734L6.0625 21.2734L8.57227 16.9238ZM6.56836 14.5508C6.71125 14.8545 6.87959 15.1437 7.06934 15.417L2.7207 17.9287L2.2207 17.0625L6.56836 14.5508ZM21.7793 17.0625L21.2793 17.9287L16.9297 15.417C17.1193 15.1439 17.2878 14.8552 17.4307 14.5518L21.7793 17.0625ZM23 11.4951V12.4951H17.9775C17.9909 12.3318 18 12.1668 18 12C18 11.8299 17.9914 11.6616 17.9775 11.4951H23ZM6.02246 11.4951C6.00859 11.6616 6 11.8299 6 12C6 12.1668 6.00911 12.3318 6.02246 12.4951H1V11.4951H6.02246ZM7.0752 8.57227C6.88482 8.84528 6.71678 9.13492 6.57324 9.43848L2.22656 6.92871L2.72656 6.0625L7.0752 8.57227ZM21.7734 6.92871L17.4258 9.4375C17.2823 9.1342 17.1141 8.84506 16.9238 8.57227L21.2734 6.0625L21.7734 6.92871ZM9.44727 6.56934C9.144 6.71214 8.85492 6.87981 8.58203 7.06934L6.07227 2.72168L6.9375 2.22168L9.44727 6.56934ZM17.9277 2.72168L15.416 7.06836C15.1434 6.87918 14.8547 6.71191 14.5518 6.56934L17.0625 2.22168L17.9277 2.72168ZM12.4941 6.02148C12.3311 6.00819 12.1664 6 12 6C11.8296 6 11.661 6.00853 11.4941 6.02246V1H12.4941V6.02148Z"
+    fill="currentColor"
+  />
+  <circle cx="12" cy="12" r="4.5" stroke="currentColor" />
+</svg>
diff --git a/site/src/components/icons/triangle-arrow.svg b/site/src/components/icons/triangle-arrow.svg
new file mode 100644
index 00000000..00269332
--- /dev/null
+++ b/site/src/components/icons/triangle-arrow.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 11 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5.89965e-05 13.2492L10.3459 6.62451L5.97761e-05 4.54849e-05L5.89965e-05 13.2492Z" fill="#EFE6D2" />
+</svg>
diff --git a/site/src/components/installation/HTMLInstallTabs.tsx b/site/src/components/installation/HTMLInstallTabs.tsx
index aaffb8e2..d1f8cfcd 100644
--- a/site/src/components/installation/HTMLInstallTabs.tsx
+++ b/site/src/components/installation/HTMLInstallTabs.tsx
@@ -37,7 +37,7 @@ export default function HTMLInstallTabs() {
       <TabsRoot>
         <TabsList label="Installation">
           <Tab value="cdn" initial>
-            cdn
+            cdns
           </Tab>
           <Tab value="npm">npm</Tab>
           <Tab value="pnpm">pnpm</Tab>
diff --git a/site/src/components/installation/MuxUploaderPanel.tsx b/site/src/components/installation/MuxUploaderPanel.tsx
index 89b0599c..037c158f 100644
--- a/site/src/components/installation/MuxUploaderPanel.tsx
+++ b/site/src/components/installation/MuxUploaderPanel.tsx
@@ -176,7 +176,7 @@ export default function MuxUploaderPanel() {
   }, []);
 
   return (
-    <div className="flex-1 relative rounded-xl border border-dashed border-light-40 overflow-hidden dark:border-dark-80">
+    <div className="flex-1 relative rounded-xs border border-dashed border-light-40 overflow-hidden border-faded-black dark:border-manila-dark">
       <MuxUploader
         ref={uploaderRef}
         id="mux-uploader"
@@ -195,16 +195,16 @@ export default function MuxUploaderPanel() {
         overlay
         overlayText="Let it go"
       >
-        <span slot="heading" className="text-lg font-medium mb-2">
+        <span slot="heading" className="text-p3 font-bold mb-2">
           Drop a video
         </span>
-        <span slot="separator" className="text-sm block text-dark-40 dark:text-light-40 mb-3">
+        <span slot="separator" className="text-p3 block mb-3">
           — or —
         </span>
         <MuxUploaderFileSelect muxUploader="mux-uploader">
           <button
             type="button"
-            className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 bg-yellow text-dark-100 rounded-lg text-sm font-medium intent:bg-yellow/70 transition-colors"
+            className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 bg-faded-black text-manila-light dark:bg-manila-light dark:text-faded-black rounded-xs text-p3 font-bold intent:bg-orange intent:text-faded-black"
           >
             Select a file
           </button>
diff --git a/site/src/components/installation/RendererPicker.tsx b/site/src/components/installation/RendererPicker.tsx
index d4700315..c1f56404 100644
--- a/site/src/components/installation/RendererPicker.tsx
+++ b/site/src/components/installation/RendererPicker.tsx
@@ -5,11 +5,11 @@ export default function RendererPicker() {
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
       <div className="flex flex-col gap-4">
-        <p className="font-medium">Select your source</p>
+        <p className="font-bold">Select your source</p>
         <RendererSelect />
       </div>
       <div className="flex flex-col gap-4">
-        <p className="font-medium">Or upload your media for free to Mux</p>
+        <p className="font-bold">Or upload your media for free to Mux</p>
         <MuxUploaderPanel />
       </div>
     </div>
diff --git a/site/src/components/installation/RendererSelect.tsx b/site/src/components/installation/RendererSelect.tsx
index 33a88eaf..004db797 100644
--- a/site/src/components/installation/RendererSelect.tsx
+++ b/site/src/components/installation/RendererSelect.tsx
@@ -63,7 +63,7 @@ export default function RendererSelect() {
     <div className="flex flex-col gap-3">
       {/* URL input */}
       <div className="flex flex-col gap-1.5">
-        <label htmlFor="source-url-input" className="text-sm text-dark-40 dark:text-light-40">
+        <label htmlFor="source-url-input" className="text-p3">
           Enter the URL to a video to auto-detect
         </label>
         <input
@@ -72,13 +72,13 @@ export default function RendererSelect() {
           value={$sourceUrl}
           onChange={(e) => sourceUrl.set(e.target.value)}
           placeholder="https://..."
-          className="bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg text-sm p-2"
+          className="bg-manila-50 dark:bg-warm-gray border border-manila-75 dark:border-soot rounded-xs text-p3 p-2"
         />
       </div>
 
       {/* Select dropdown */}
       <div className="flex flex-col gap-1.5">
-        <label htmlFor="renderer-select" className="text-sm text-dark-40 dark:text-light-40 flex flex-wrap gap-1">
+        <label htmlFor="renderer-select" className="text-p3 flex flex-wrap gap-1">
           {showDetectionMatch ? (
             `This looks like ${articleFor(detection.renderer)} ${detection.label} link`
           ) : showDetectionSuggestion ? (
diff --git a/site/src/components/installation/SkinPickerSection.astro b/site/src/components/installation/SkinPickerSection.astro
index 236dee43..87c8bac2 100644
--- a/site/src/components/installation/SkinPickerSection.astro
+++ b/site/src/components/installation/SkinPickerSection.astro
@@ -5,8 +5,6 @@ import SkinPickerSectionClient from './SkinPickerSectionClient.tsx';
 ---
 
 <SkinPickerSectionClient client:idle>
-    <H2Markdown>
-      Choose skin
-    </H2Markdown>
-    <P>Choose how your player looks.</P>
+  <H2Markdown> Choose skin </H2Markdown>
+  <P>Choose how your player looks.</P>
 </SkinPickerSectionClient>
diff --git a/site/src/components/installation/UploaderOverlay.tsx b/site/src/components/installation/UploaderOverlay.tsx
index 56eafec0..7a44d66e 100644
--- a/site/src/components/installation/UploaderOverlay.tsx
+++ b/site/src/components/installation/UploaderOverlay.tsx
@@ -17,7 +17,7 @@ function OverlayWrapper({ children, className }: { children: React.ReactNode; cl
     <div
       className={clsx(
         'absolute inset-0 flex flex-col items-center justify-center gap-3',
-        'bg-light-80 dark:bg-dark-100',
+        'bg-manila-light dark:bg-faded-black',
         className
       )}
     >
@@ -42,11 +42,11 @@ export default function UploaderOverlay({ state, error, playbackId, onLogin, onR
   if (state === 'needs_login') {
     return (
       <OverlayWrapper>
-        <p className="text-sm font-medium">To upload this video to Mux&hellip;</p>
+        <p className="text-p3 font-bold">To upload this video to Mux&hellip;</p>
         <button
           type="button"
           onClick={onLogin}
-          className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 bg-yellow text-dark-100 rounded-lg text-sm font-medium intent:bg-yellow/70 transition-colors"
+          className="cursor-pointer inline-flex items-center gap-2 px-4 py-2 bg-bright-yellow text-faded-black rounded-xs text-p3 font-bold intent:bg-bright-yellow/70"
         >
           Sign up or log in
         </button>
@@ -57,8 +57,8 @@ export default function UploaderOverlay({ state, error, playbackId, onLogin, onR
   if (state === 'preparing') {
     return (
       <OverlayWrapper>
-        <div className="w-6 h-6 border-2 border-yellow border-t-transparent rounded-full animate-spin" />
-        <p className="text-sm">Preparing video...</p>
+        <div className="w-6 h-6 border-2 border-bright-yellow border-t-transparent rounded-full animate-spin" />
+        <p className="text-p3">Preparing video...</p>
       </OverlayWrapper>
     );
   }
@@ -67,10 +67,10 @@ export default function UploaderOverlay({ state, error, playbackId, onLogin, onR
     return (
       <OverlayWrapper>
         <div className="flex items-center gap-2">
-          <CheckCircle size={18} className="text-orange text-sm" />
-          <p className="font-medium">Ready to play</p>
+          <CheckCircle size={18} className="text-orange text-p3" />
+          <p className="font-bold">Ready to play</p>
         </div>
-        <p className="text-center text-sm">
+        <p className="text-center text-p3">
           See code below, or{' '}
           <a
             href="https://dashboard.mux.com/my/video/assets"
@@ -89,11 +89,11 @@ export default function UploaderOverlay({ state, error, playbackId, onLogin, onR
   if (state === 'polling_error') {
     return (
       <OverlayWrapper className="border-solid border-red">
-        <p className="text-sm text-red">
+        <p className="text-p3 text-red">
           Error preparing video:
           {error}
         </p>
-        <button type="button" onClick={onRetry} className="text-sm underline intent:no-underline">
+        <button type="button" onClick={onRetry} className="text-p3 underline intent:no-underline">
           Try again
         </button>
       </OverlayWrapper>
diff --git a/site/src/components/typography/A.astro b/site/src/components/typography/A.astro
index c542af4d..595cbc74 100644
--- a/site/src/components/typography/A.astro
+++ b/site/src/components/typography/A.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -12,5 +12,5 @@ const { as: Tag = 'a', class: className, ...props } = Astro.props;
 ---
 
 <Tag class={twMerge(shared.a, className)} {...props}>
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/Blockquote.astro b/site/src/components/typography/Blockquote.astro
index 811d6e93..49981fcf 100644
--- a/site/src/components/typography/Blockquote.astro
+++ b/site/src/components/typography/Blockquote.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'blockquote'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -15,9 +15,9 @@ const { as: Tag = 'blockquote', maxWidth = true, class: className, ...props } =
 <Tag
   class={twMerge(
     clsx(
-      'border-l border-light-40 pl-6 my-12',
-      '[&>.my-6]:my-2 [&>.my-12]:my-4 [&>*:last-child]:!mb-0',
-      maxWidth && 'max-w-3xl mx-auto',
+      "my-12 border-l border-manila-75 pl-6 dark:border-warm-gray",
+      "[&>*:last-child]:mb-0! [&>.my-12]:my-4 [&>.my-6]:my-2",
+      maxWidth && "mx-auto max-w-3xl",
     ),
     className,
   )}
diff --git a/site/src/components/typography/Em.astro b/site/src/components/typography/Em.astro
index 4c3653f5..a45c818d 100644
--- a/site/src/components/typography/Em.astro
+++ b/site/src/components/typography/Em.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -12,5 +12,5 @@ const { as: Tag = 'em', class: className, ...props } = Astro.props;
 ---
 
 <Tag class={twMerge(shared.em, className)} {...props}>
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/H1.astro b/site/src/components/typography/H1.astro
index 5d3b8cad..5adc2c2f 100644
--- a/site/src/components/typography/H1.astro
+++ b/site/src/components/typography/H1.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h1'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -12,6 +12,12 @@ type Props<Tag extends HTMLTag = 'h1'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'h1', maxWidth = true, class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(clsx('text-h1 mb-6', maxWidth && 'max-w-3xl mx-auto'), className)} {...props}>
+<Tag
+  class={twMerge(
+    clsx("mb-6 text-h1", maxWidth && "mx-auto max-w-3xl"),
+    className,
+  )}
+  {...props}
+>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H1Warning.astro b/site/src/components/typography/H1Warning.astro
index d0d688fc..defa8aed 100644
--- a/site/src/components/typography/H1Warning.astro
+++ b/site/src/components/typography/H1Warning.astro
@@ -8,7 +8,8 @@ const isDev = import.meta.env.DEV;
 {
   isDev && (
     <h1 class="text-red">
-      don't use h1 in markdown. use frontmatter <MarkdownCode>title</MarkdownCode> instead
+      don't use h1 in markdown. use frontmatter{" "}
+      <MarkdownCode>title</MarkdownCode> instead
     </h1>
   )
 }
diff --git a/site/src/components/typography/H2.astro b/site/src/components/typography/H2.astro
index 0f139ffa..a20b175c 100644
--- a/site/src/components/typography/H2.astro
+++ b/site/src/components/typography/H2.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h2'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -13,8 +13,15 @@ const { as: Tag = 'h2', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-h4 @lg:text-h3 @3xl:text-h2 mb-6 mt-18', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx(
+      "mt-18 mb-6 font-display text-h2 uppercase",
+      maxWidth && "mx-auto max-w-3xl",
+    ),
+    className,
+  )}
   {...props}
+  style={{ fontSize: "1.5rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H2Markdown.astro b/site/src/components/typography/H2Markdown.astro
index 15a44ace..ec3c6e78 100644
--- a/site/src/components/typography/H2Markdown.astro
+++ b/site/src/components/typography/H2Markdown.astro
@@ -1,10 +1,14 @@
 ---
 
-import H4 from './H4.astro';
+import H2 from './H2.astro';
 
 const { class: className, ...props } = Astro.props;
 ---
 
-<H4 as="h2" class:list={['mt-18 [&+h3]:mt-6', className]} {...props}>
+<H2
+  as="h2"
+  class:list={["mt-18 [&+.contents>h3]:mt-6 [&+h3]:mt-6", className]}
+  {...props}
+>
   <slot />
-</H4>
+</H2>
diff --git a/site/src/components/typography/H3.astro b/site/src/components/typography/H3.astro
index 3d962132..14e13c58 100644
--- a/site/src/components/typography/H3.astro
+++ b/site/src/components/typography/H3.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h3'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -13,8 +13,15 @@ const { as: Tag = 'h3', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-h5 @lg:text-h4 @3xl:text-h3 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx(
+      "mt-12 mb-6 font-display text-h3 [&+.contents>h4]:mt-6 [&+h4]:mt-6",
+      maxWidth && "mx-auto max-w-3xl",
+    ),
+    className,
+  )}
   {...props}
+  style={{ fontSize: "1.25rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H3Markdown.astro b/site/src/components/typography/H3Markdown.astro
index 39493ab7..51bfecfc 100644
--- a/site/src/components/typography/H3Markdown.astro
+++ b/site/src/components/typography/H3Markdown.astro
@@ -1,10 +1,10 @@
 ---
 
-import H5 from './H5.astro';
+import H3 from './H3.astro';
 
 const { class: className, ...props } = Astro.props;
 ---
 
-<H5 as="h3" class:list={['mt-12', className]} {...props}>
+<H3 as="h3" class:list={["mt-12", className]} {...props}>
   <slot />
-</H5>
+</H3>
diff --git a/site/src/components/typography/H4.astro b/site/src/components/typography/H4.astro
index 34dcbd1a..51cfd339 100644
--- a/site/src/components/typography/H4.astro
+++ b/site/src/components/typography/H4.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h4'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -14,10 +14,11 @@ const { as: Tag = 'h4', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx('text-lg font-medium @lg:text-h5 @3xl:text-h4 mb-6 mt-12', maxWidth && 'max-w-3xl mx-auto'),
+    clsx("mt-12 mb-6 text-p2 font-bold", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
+  style={{ fontSize: "1.125rem" }}
 >
   <slot />
 </Tag>
diff --git a/site/src/components/typography/H4Markdown.astro b/site/src/components/typography/H4Markdown.astro
index c2040cd4..2c7571bd 100644
--- a/site/src/components/typography/H4Markdown.astro
+++ b/site/src/components/typography/H4Markdown.astro
@@ -1,10 +1,10 @@
 ---
 
-import H6 from './H6.astro';
+import H4 from './H4.astro';
 
 const props = Astro.props;
 ---
 
-<H6 as="h4" {...props}>
+<H4 as="h4" {...props}>
   <slot />
-</H6>
+</H4>
diff --git a/site/src/components/typography/H5.astro b/site/src/components/typography/H5.astro
index ed39b145..3e856ea3 100644
--- a/site/src/components/typography/H5.astro
+++ b/site/src/components/typography/H5.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h5'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -14,7 +14,7 @@ const { as: Tag = 'h5', maxWidth = true, class: className, ...props } = Astro.pr
 
 <Tag
   class={twMerge(
-    clsx('text-md font-medium @lg:text-lg @3xl:text-h5 mb-6 mt-9', maxWidth && 'max-w-3xl mx-auto'),
+    clsx("mt-9 mb-6 text-p2 italic", maxWidth && "mx-auto max-w-3xl"),
     className,
   )}
   {...props}
diff --git a/site/src/components/typography/H5Markdown.astro b/site/src/components/typography/H5Markdown.astro
index 657fe265..02fa73b5 100644
--- a/site/src/components/typography/H5Markdown.astro
+++ b/site/src/components/typography/H5Markdown.astro
@@ -1,10 +1,10 @@
 ---
 
-import P from './P.astro';
+import H5 from './H5.astro';
 
 const props = Astro.props;
 ---
 
-<P as="h5" class="text-sm font-medium" {...props}>
+<H5 as="h5" class="" {...props}>
   <slot />
-</P>
+</H5>
diff --git a/site/src/components/typography/H6.astro b/site/src/components/typography/H6.astro
index 6eebbac6..a64f3142 100644
--- a/site/src/components/typography/H6.astro
+++ b/site/src/components/typography/H6.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'h6'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -13,7 +13,10 @@ const { as: Tag = 'h6', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-  class={twMerge(clsx('text-base font-medium @3xl:text-lg my-6', maxWidth && 'max-w-3xl mx-auto'), className)}
+  class={twMerge(
+    clsx("text-p3 italic", maxWidth && "mx-auto max-w-3xl"),
+    className,
+  )}
   {...props}
 >
   <slot />
diff --git a/site/src/components/typography/H6Markdown.astro b/site/src/components/typography/H6Markdown.astro
index 13e8bf22..9a1e596f 100644
--- a/site/src/components/typography/H6Markdown.astro
+++ b/site/src/components/typography/H6Markdown.astro
@@ -1,10 +1,10 @@
 ---
 
-import P from './P.astro';
+import H6 from './H6.astro';
 
 const props = Astro.props;
 ---
 
-<P as="h6" class="text-sm italic" {...props}>
+<H6 as="h6" class="" {...props}>
   <slot />
-</P>
+</H6>
diff --git a/site/src/components/typography/Hr.astro b/site/src/components/typography/Hr.astro
index 695c0d1d..c2f05915 100644
--- a/site/src/components/typography/Hr.astro
+++ b/site/src/components/typography/Hr.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'hr'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -12,4 +12,13 @@ type Props<Tag extends HTMLTag = 'hr'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'hr', maxWidth = true, class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(clsx('border-t border-light-40 my-12', maxWidth && 'max-w-3xl mx-auto'), className)} {...props} />
+<Tag
+  class={twMerge(
+    clsx(
+      "my-12 border-t border-manila-75 dark:border-warm-gray",
+      maxWidth && "mx-auto max-w-3xl",
+      className,
+    ),
+  )}
+  {...props}
+/>
diff --git a/site/src/components/typography/Img.astro b/site/src/components/typography/Img.astro
index 6e0bb6e3..741aa19a 100644
--- a/site/src/components/typography/Img.astro
+++ b/site/src/components/typography/Img.astro
@@ -2,11 +2,11 @@
 
 import { Image } from 'astro:assets';
 import type { ComponentProps } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props = ComponentProps<typeof Image>;
 const { class: className, ...rest } = Astro.props;
 ---
 
 {/* @ts-expect-error tbh I don't know how to tell ts that inferSize is ok */}
-<Image class={twMerge('my-12', className)} inferSize {...rest} />
+<Image class={twMerge("my-12", className)} inferSize {...rest} />
diff --git a/site/src/components/typography/Li.astro b/site/src/components/typography/Li.astro
index b450341c..a0e99762 100644
--- a/site/src/components/typography/Li.astro
+++ b/site/src/components/typography/Li.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -12,5 +12,5 @@ const { as: Tag = 'li', class: className, ...props } = Astro.props;
 ---
 
 <Tag class={twMerge(shared.li, className)} {...props}>
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/MarkdownCode.astro b/site/src/components/typography/MarkdownCode.astro
index 60f6e70f..0d4fcd10 100644
--- a/site/src/components/typography/MarkdownCode.astro
+++ b/site/src/components/typography/MarkdownCode.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -17,13 +17,13 @@ const isCodeBlock = codeBlock === 'true';
 ---
 
 {
-    isCodeBlock ? (
-        <Tag class={twMerge(shared.codeBlock, className)} {...props}>
-            <slot />
-        </Tag>
-    ) : (
-        <Tag class={twMerge(shared.code, className)} {...props}>
-            <slot />
-        </Tag>
-    )
+  isCodeBlock ? (
+    <Tag class={twMerge(shared.codeBlock, className)} {...props}>
+      <slot />
+    </Tag>
+  ) : (
+    <Tag class={twMerge(shared.code, className)} {...props}>
+      <slot />
+    </Tag>
+  )
 }
diff --git a/site/src/components/typography/Ol.astro b/site/src/components/typography/Ol.astro
index de7b82e0..fa4cc46e 100644
--- a/site/src/components/typography/Ol.astro
+++ b/site/src/components/typography/Ol.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -14,12 +14,12 @@ const { as: Tag = 'ol', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-    class={twMerge(
-        shared.ol,
-        clsx("mb-6", maxWidth && "max-w-3xl mx-auto"),
-        className,
-    )}
-    {...props}
+  class={twMerge(
+    shared.ol,
+    clsx("mb-6", maxWidth && "mx-auto max-w-3xl"),
+    className,
+  )}
+  {...props}
 >
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/P.astro b/site/src/components/typography/P.astro
index 2d0e3a6d..d8cc0b09 100644
--- a/site/src/components/typography/P.astro
+++ b/site/src/components/typography/P.astro
@@ -2,7 +2,7 @@
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'p'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -12,6 +12,9 @@ type Props<Tag extends HTMLTag = 'p'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'p', maxWidth = true, class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge(clsx('my-6', maxWidth && 'max-w-3xl mx-auto'), className)} {...props}>
+<Tag
+  class={twMerge(clsx("my-6", maxWidth && "mx-auto max-w-3xl"), className)}
+  {...props}
+>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Pre.astro b/site/src/components/typography/Pre.astro
index 716a3a67..dfb0cfca 100644
--- a/site/src/components/typography/Pre.astro
+++ b/site/src/components/typography/Pre.astro
@@ -24,13 +24,13 @@ const value = 'code';
       <slot />
     </Tag>
   ) : (
-    <TabsRoot client:visible>
-      <TabsList client:visible label={`${label} code`}>
-        <Tab client:visible value={value} initial>
+    <TabsRoot client:idle>
+      <TabsList client:idle label={`${label} code`}>
+        <Tab client:idle value={value} initial>
           {label}
         </Tab>
       </TabsList>
-      <TabsPanel client:visible value={value} initial>
+      <TabsPanel client:idle value={value} initial>
         <Tag class={className} {...props}>
           <slot />
         </Tag>
diff --git a/site/src/components/typography/Strong.astro b/site/src/components/typography/Strong.astro
index 715fa394..d385227e 100644
--- a/site/src/components/typography/Strong.astro
+++ b/site/src/components/typography/Strong.astro
@@ -1,6 +1,6 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -12,5 +12,5 @@ const { as: Tag = 'strong', class: className, ...props } = Astro.props;
 ---
 
 <Tag class={twMerge(shared.strong, className)} {...props}>
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/Table.astro b/site/src/components/typography/Table.astro
index d3ddd7a0..4344966b 100644
--- a/site/src/components/typography/Table.astro
+++ b/site/src/components/typography/Table.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'table'> = Polymorphic<{ as: Tag }> & {
   maxWidth?: boolean;
@@ -12,20 +12,22 @@ type Props<Tag extends HTMLTag = 'table'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'table', maxWidth = true, outerClass, class: className, ...props } = Astro.props;
 ---
 
-<div class={twMerge(clsx("my-12", maxWidth && "mx-auto max-w-3xl"), outerClass)}>
-    <div class="overflow-x-auto flex -mx-6">
-        <div
-            class="sticky left-0 z-10 shrink-0 basis-6 bg-linear-to-r from-light-80 dark:from-dark-100 to-transparent pointer-events-none"
-            aria-hidden="true"
-        >
-        </div>
-        <Tag class={twMerge("w-full border-collapse", className)} {...props}>
-            <slot />
-        </Tag>
-        <div
-            class="sticky right-0 z-10 shrink-0 basis-6 bg-linear-to-l from-light-80 dark:from-dark-100 to-transparent pointer-events-none"
-            aria-hidden="true"
-        >
-        </div>
+<div
+  class={twMerge(clsx("my-12", maxWidth && "mx-auto max-w-3xl"), outerClass)}
+>
+  <div class="-mx-6 flex overflow-x-auto">
+    <div
+      class="pointer-events-none sticky left-0 z-10 shrink-0 basis-6 bg-linear-to-r from-manila-light to-transparent dark:from-faded-black"
+      aria-hidden="true"
+    >
     </div>
+    <Tag class={twMerge("w-full border-collapse", className)} {...props}>
+      <slot />
+    </Tag>
+    <div
+      class="pointer-events-none sticky right-0 z-10 shrink-0 basis-6 bg-linear-to-l from-manila-light to-transparent dark:from-faded-black"
+      aria-hidden="true"
+    >
+    </div>
+  </div>
 </div>
diff --git a/site/src/components/typography/Tbody.astro b/site/src/components/typography/Tbody.astro
index 98a6f491..85109d3e 100644
--- a/site/src/components/typography/Tbody.astro
+++ b/site/src/components/typography/Tbody.astro
@@ -1,7 +1,7 @@
 ---
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'tbody'> = Polymorphic<{ as: Tag }> & {
   class?: string;
diff --git a/site/src/components/typography/Td.astro b/site/src/components/typography/Td.astro
index 0d01d0a1..bd9eb94d 100644
--- a/site/src/components/typography/Td.astro
+++ b/site/src/components/typography/Td.astro
@@ -1,7 +1,7 @@
 ---
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'td'> = Polymorphic<{ as: Tag }> & {
   class?: string;
@@ -10,6 +10,6 @@ type Props<Tag extends HTMLTag = 'td'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'td', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge('px-6 py-3 text-base', className)} {...props}>
+<Tag class={twMerge("px-6 py-3 text-p2", className)} {...props}>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Th.astro b/site/src/components/typography/Th.astro
index 4ebb406d..85660ff4 100644
--- a/site/src/components/typography/Th.astro
+++ b/site/src/components/typography/Th.astro
@@ -1,7 +1,7 @@
 ---
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'th'> = Polymorphic<{ as: Tag }> & {
   class?: string;
@@ -10,6 +10,9 @@ type Props<Tag extends HTMLTag = 'th'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'th', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge('px-6 py-3 text-left text-sm font-semibold', className)} {...props}>
+<Tag
+  class={twMerge("px-6 py-3 text-left text-p3 font-bold", className)}
+  {...props}
+>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Thead.astro b/site/src/components/typography/Thead.astro
index 70980ed7..123a9d23 100644
--- a/site/src/components/typography/Thead.astro
+++ b/site/src/components/typography/Thead.astro
@@ -1,7 +1,7 @@
 ---
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'thead'> = Polymorphic<{ as: Tag }> & {
   class?: string;
@@ -10,6 +10,12 @@ type Props<Tag extends HTMLTag = 'thead'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'thead', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge('border-b-2 border-light-40 dark:border-dark-80', className)} {...props}>
+<Tag
+  class={twMerge(
+    "border-b border-faded-black [&>tr]:border-0 dark:border-manila-75",
+    className,
+  )}
+  {...props}
+>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Tr.astro b/site/src/components/typography/Tr.astro
index ea0bfc42..3dbb723d 100644
--- a/site/src/components/typography/Tr.astro
+++ b/site/src/components/typography/Tr.astro
@@ -1,7 +1,7 @@
 ---
 
 import type { HTMLTag, Polymorphic } from 'astro/types';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 type Props<Tag extends HTMLTag = 'tr'> = Polymorphic<{ as: Tag }> & {
   class?: string;
@@ -10,6 +10,12 @@ type Props<Tag extends HTMLTag = 'tr'> = Polymorphic<{ as: Tag }> & {
 const { as: Tag = 'tr', class: className, ...props } = Astro.props;
 ---
 
-<Tag class={twMerge('border-b border-light-40 dark:border-dark-80', className)} {...props}>
+<Tag
+  class={twMerge(
+    "border-b border-manila-dark dark:border-warm-gray",
+    className,
+  )}
+  {...props}
+>
   <slot />
 </Tag>
diff --git a/site/src/components/typography/Ul.astro b/site/src/components/typography/Ul.astro
index 087bb4bd..734c7631 100644
--- a/site/src/components/typography/Ul.astro
+++ b/site/src/components/typography/Ul.astro
@@ -1,7 +1,7 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { twMerge } from '@/utils/twMerge';
 
 import { shared } from './styles';
 
@@ -14,12 +14,12 @@ const { as: Tag = 'ul', maxWidth = true, class: className, ...props } = Astro.pr
 ---
 
 <Tag
-    class={twMerge(
-        shared.ul,
-        clsx("mb-6", maxWidth && "max-w-3xl mx-auto"),
-        className,
-    )}
-    {...props}
+  class={twMerge(
+    shared.ul,
+    clsx("mb-6", maxWidth && "mx-auto max-w-3xl"),
+    className,
+  )}
+  {...props}
 >
-    <slot />
+  <slot />
 </Tag>
diff --git a/site/src/components/typography/styles.ts b/site/src/components/typography/styles.ts
index 76330137..46bbe4f6 100644
--- a/site/src/components/typography/styles.ts
+++ b/site/src/components/typography/styles.ts
@@ -7,11 +7,11 @@
  */
 export const shared = {
   a: 'underline intent:no-underline',
-  code: 'bg-light-100 dark:bg-dark-110 dark:text-light-100 border border-light-40 dark:border-dark-80 px-1 rounded font-mono text-code',
+  code: 'border border-manila-75 bg-manila-25 dark:bg-soot dark:border-warm-gray px-1 rounded font-mono text-code normal-case',
   codeBlock: 'font-mono text-code',
-  em: 'font-medium',
-  li: 'text-base',
+  em: 'font-bold',
+  li: 'text-p2',
   ol: 'list-decimal list-outside pl-6 space-y-1',
-  strong: 'font-semibold',
+  strong: 'font-bold',
   ul: 'list-disc list-outside pl-6 space-y-1',
 } as const;
diff --git a/site/src/consts.ts b/site/src/consts.ts
index 371b721e..7565a8b9 100644
--- a/site/src/consts.ts
+++ b/site/src/consts.ts
@@ -22,3 +22,10 @@ export const VJS8_DEMO_VIDEO: VideoSource = {
   mp4: 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4',
   poster: 'https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.webp',
 };
+
+export const VJS10_DEMO_VIDEO: VideoSource = {
+  id: 'BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM',
+  hls: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8',
+  mp4: 'https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4',
+  poster: 'https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.webp',
+};
diff --git a/site/src/content/docs/reference/thumbnail.mdx b/site/src/content/docs/reference/thumbnail.mdx
index 648e7891..9a64d486 100644
--- a/site/src/content/docs/reference/thumbnail.mdx
+++ b/site/src/content/docs/reference/thumbnail.mdx
@@ -45,7 +45,7 @@ Mux provides this as `storyboard.vtt`:
     <track
       kind="metadata"
       label="thumbnails"
-      src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.vtt"
+      src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt"
       default
     />
   </Video>
@@ -59,7 +59,7 @@ Mux provides this as `storyboard.vtt`:
     <track
       kind="metadata"
       label="thumbnails"
-      src="https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/storyboard.vtt"
+      src="https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/storyboard.vtt"
       default
     />
   </video>
diff --git a/site/src/content/docs/reference/write-references.mdx b/site/src/content/docs/reference/write-references.mdx
index 5c19b506..ccbe50f8 100644
--- a/site/src/content/docs/reference/write-references.mdx
+++ b/site/src/content/docs/reference/write-references.mdx
@@ -101,8 +101,8 @@ React and HTML demos for the same variant should use matching BEM structures.
 All demos use these URLs:
 
 ```
-Video: https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4
-Poster: https://image.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/thumbnail.jpg
+Video: https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4
+Poster: https://image.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/thumbnail.jpg
 ```
 
 All demo videos use `autoplay muted playsinline loop` (React: `autoPlay muted playsInline loop`).
diff --git a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
index 7e25fe92..4e54e092 100644
--- a/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
+++ b/site/src/examples/react/FrostedSkin/FrostedSkinDemo.tsx
@@ -1,5 +1,5 @@
 
-import { VJS8_DEMO_VIDEO } from '@/consts';
+import { VJS10_DEMO_VIDEO } from '@/consts';
 import { createPlayer, Poster } from '@videojs/react';
 import { VideoSkin, Video, videoFeatures } from '@videojs/react/video';
 import '@videojs/react/video/skin.css';
@@ -20,8 +20,8 @@ export function FrostedSkinDemo() {
   return (
     <Player.Provider>
       <VideoSkin className="w-full aspect-video">
-        <Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
-        <Poster src={VJS8_DEMO_VIDEO.poster} />
+        <Video src={VJS10_DEMO_VIDEO.mp4} playsInline />
+        <Poster src={VJS10_DEMO_VIDEO.poster} />
       </VideoSkin>
     </Player.Provider>
   );
diff --git a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
index 5a2435c7..eb13e04a 100644
--- a/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
+++ b/site/src/examples/react/MinimalSkin/MinimalSkinDemo.tsx
@@ -1,4 +1,4 @@
-import { VJS8_DEMO_VIDEO } from '@/consts';
+import { VJS10_DEMO_VIDEO } from '@/consts';
 import { createPlayer, Poster } from '@videojs/react';
 import { MinimalVideoSkin, Video, videoFeatures } from '@videojs/react/video';
 import '@videojs/react/video/minimal-skin.css';
@@ -18,8 +18,8 @@ export function MinimalSkinDemo() {
   return (
     <Player.Provider>
       <MinimalVideoSkin className="w-full aspect-video">
-        <Video src={VJS8_DEMO_VIDEO.mp4} playsInline />
-        <Poster src={VJS8_DEMO_VIDEO.poster} />
+        <Video src={VJS10_DEMO_VIDEO.mp4} playsInline />
+        <Poster src={VJS10_DEMO_VIDEO.poster} />
       </MinimalVideoSkin>
     </Player.Provider>
   );
diff --git a/site/src/hooks/useIntersection.ts b/site/src/hooks/useIntersection.ts
new file mode 100644
index 00000000..0dfe164f
--- /dev/null
+++ b/site/src/hooks/useIntersection.ts
@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useIntersection(options?: IntersectionObserverInit): [React.RefCallback<Element>, boolean] {
+  const [isIntersecting, setIsIntersecting] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    return () => observerRef.current?.disconnect();
+  }, []);
+
+  const ref = (node: Element | null) => {
+    observerRef.current?.disconnect();
+
+    if (!node || isIntersecting) return;
+
+    observerRef.current = new IntersectionObserver(([entry]) => {
+      if (entry?.isIntersecting) {
+        setIsIntersecting(true);
+        observerRef.current?.disconnect();
+      }
+    }, options);
+
+    observerRef.current.observe(node);
+  };
+
+  return [ref, isIntersecting];
+}
diff --git a/site/src/layouts/AuthResult.astro b/site/src/layouts/AuthResult.astro
index 60112ccf..6bd3c69c 100644
--- a/site/src/layouts/AuthResult.astro
+++ b/site/src/layouts/AuthResult.astro
@@ -16,12 +16,12 @@ const iconClass = variant === 'error' ? 'text-red' : '';
 ---
 
 <Base title={title} {description}>
-  <main class="flex items-center justify-center min-h-screen p-6">
-    <div class="text-center max-w-md flex flex-col items-center gap-4">
+  <main class="flex min-h-screen items-center justify-center p-6">
+    <div class="flex max-w-md flex-col items-center gap-4 text-center">
       <Icon size={48} className={iconClass} />
       <div>
         <h1 class="text-h4">{title}</h1>
-        <p class="text-lg text-dark-40 dark:text-light-40">{description}</p>
+        <p class="text-p1">{description}</p>
       </div>
       <div data-action-container class="invisible">
         <slot name="action" />
diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index 2dece24c..f316d09e 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -1,6 +1,4 @@
 ---
-
-
 import { Font } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 
@@ -9,7 +7,6 @@ import { SEO_SUFFIX, SITE_TITLE } from '@/consts';
 import '@/styles/globals.css';
 
 import { PreferenceSync } from '@/components/docs/PreferenceSync';
-import FilmGrain from '@/components/FilmGrain';
 import ThemeInit from '@/components/ThemeInit.astro';
 
 interface Props {
@@ -40,7 +37,12 @@ const fullTitle =
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="sitemap" href="/sitemap-index.xml" />
-    <link rel="alternate" type="application/rss+xml" title={SITE_TITLE} href={new URL('rss.xml', Astro.site)} />
+    <link
+      rel="alternate"
+      type="application/rss+xml"
+      title={SITE_TITLE}
+      href={new URL("rss.xml", Astro.site)}
+    />
     <meta name="generator" content={Astro.generator} />
 
     {/* Important stuff */}
@@ -53,9 +55,27 @@ const fullTitle =
     {/* Font preloads */}
     <Font cssVariable="--font-instrument-sans" preload />
     <Font cssVariable="--font-ibm-plex-mono" preload />
-    <link rel="preload" href="https://static.mux.com/fonts/EurostileLTProBold/font.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="https://static.mux.com/fonts/EurostileLTProExtended2/font.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff2" as="font" type="font/woff2" crossorigin />
+    <link
+      rel="preload"
+      href="https://static.mux.com/fonts/EurostileLTProBold/font.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="https://static.mux.com/fonts/EurostileLTProExtended2/font.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
 
     {/* Canonical URL */}
     <link rel="canonical" href={canonicalURL} />
@@ -70,14 +90,25 @@ const fullTitle =
     <meta property="og:url" content={Astro.url} />
     <meta property="og:title" content={fullTitle} />
     <meta property="og:description" content={description} />
-    {image && <meta property="og:image" content={new URL(image.src, Astro.url)} />}
+    {
+      image && (
+        <meta property="og:image" content={new URL(image.src, Astro.url)} />
+      )
+    }
 
     {/* Twitter */}
     <meta property="twitter:card" content="summary_large_image" />
     <meta property="twitter:url" content={Astro.url} />
     <meta property="twitter:title" content={fullTitle} />
     <meta property="twitter:description" content={description} />
-    {image && <meta property="twitter:image" content={new URL(image.src, Astro.url)} />}
+    {
+      image && (
+        <meta
+          property="twitter:image"
+          content={new URL(image.src, Astro.url)}
+        />
+      )
+    }
 
     {/* Whatever else */}
     <slot name="head" />
@@ -86,24 +117,22 @@ const fullTitle =
   </head>
   <body
     class:list={[
-      'relative',
-      'font-sans antialiased text-pretty text-base',
-      'bg-light-80 dark:bg-dark-100 text-dark-100 dark:text-light-100',
-      'min-w-80',
-      '[--nav-h:calc(var(--spacing)*13)] sm:[--nav-h:calc(var(--spacing)*14)]',
-      'selection:bg-yellow selection:text-dark-100',
+      "relative",
+      "font-sans text-p2 text-pretty antialiased",
+      "bg-manila-light text-faded-black dark:bg-faded-black dark:text-manila-light",
+      "min-w-80",
+      "selection:bg-gold selection:text-faded-black",
     ]}
   >
     <div
       class:list={[
         // BaseUI requires body.relative and div.isolate
-        'isolate',
+        "isolate",
         // background colors are applied here for a more consistent FilmGrain blending
-        'bg-light-80 dark:bg-dark-100',
       ]}
     >
       <PreferenceSync client:idle />
-      <FilmGrain currentPath={Astro.url.pathname} />
+
       <slot />
     </div>
   </body>
diff --git a/site/src/layouts/Blog.astro b/site/src/layouts/Blog.astro
index b6622c4e..d113f106 100644
--- a/site/src/layouts/Blog.astro
+++ b/site/src/layouts/Blog.astro
@@ -16,9 +16,9 @@ const { title, description, canonical } = Astro.props;
 
 <Base title={title} description={description} canonical={canonical}>
   <slot name="head" slot="head" />
-  <div class="min-h-screen flex flex-col">
+  <div class="flex min-h-screen flex-col">
     <NavBar />
-    <main class="px-6 md:px-10 mt-10 md:mt-20 pb-20 md:pb-30">
+    <main class="mt-10 px-6 pb-20 md:mt-20 md:px-10 md:pb-30">
       <slot />
     </main>
     <Footer class="mt-auto" />
diff --git a/site/src/layouts/Docs.astro b/site/src/layouts/Docs.astro
index d09ce389..2c565e28 100644
--- a/site/src/layouts/Docs.astro
+++ b/site/src/layouts/Docs.astro
@@ -6,9 +6,9 @@ import DocsSidebarRestoration from '@/components/docs/DocsSidebarRestoration.ast
 import { Selectors } from '@/components/docs/Selectors';
 import StyleInit from '@/components/docs/StyleInit.astro';
 import FilmGrain from '@/components/FilmGrain';
-import Footer from '@/components/Footer.astro';
+import Footer from '@/components/FooterDocs.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
-import NavBar from '@/components/NavBar/NavBar.astro';
+import NavBarDocs from '@/components/NavBar/NavBarDocs.astro';
 import { FRAMEWORK_LABELS, type SupportedFramework } from '@/types/docs';
 import { getDocTitle } from '@/utils/docs/title';
 import Base from './Base.astro';
@@ -29,7 +29,11 @@ const seoCategory = `${FRAMEWORK_LABELS[framework]} Video Player`;
 const docsSidebarId = 'docs-sidebar';
 ---
 
-<Base title={getDocTitle(doc, framework)} suffix={`Open Source ${FRAMEWORK_LABELS[framework]} Video Player`} description={`${doc.data.description} — Video.js ${seoCategory}.`}>
+<Base
+  title={getDocTitle(doc, framework)}
+  suffix={`Open Source ${FRAMEWORK_LABELS[framework]} Video Player`}
+  description={`${doc.data.description} — Video.js ${seoCategory}.`}
+>
   <Fragment slot="priority-head">
     <StyleInit />
   </Fragment>
@@ -38,28 +42,43 @@ const docsSidebarId = 'docs-sidebar';
     <slot name="head" slot="head" />
   </Fragment>
   <div
-    class="grid grid-cols-1 md:grid-cols-(--md-grid-cols) lg:grid-cols-(--lg-grid-cols) min-h-screen"
-    style="--md-grid-cols: calc(var(--spacing) * 70) 1fr;--lg-grid-cols: calc(var(--spacing) * 75) 1fr;grid-template-rows:auto minmax(0,1fr);"
+    class:list={[
+      "grid min-h-screen grid-cols-1",
+      "md:grid-cols-(--md-grid-cols) lg:grid-cols-(--lg-grid-cols)",
+      "[--nav-h:calc(var(--spacing)*13)] sm:[--nav-h:calc(var(--spacing)*13.5)]",
+    ]}
+    style={{
+      "--md-grid-cols": `calc(var(--spacing) * 70) minmax(0,1fr)`,
+      "--lg-grid-cols": `calc(var(--spacing) * 75) minmax(0,1fr)`,
+      "grid-template-rows": "auto minmax(0,1fr)",
+    }}
   >
-    <NavBar class="col-span-full">
-      <DocsSidebar slot="mobile-nav" framework={framework} docTitles={docTitles} />
-    </NavBar>
+    <NavBarDocs class="col-span-full">
+      <DocsSidebar
+        slot="mobile-nav"
+        framework={framework}
+        docTitles={docTitles}
+      />
+    </NavBarDocs>
     <aside
       id={docsSidebarId}
-      class="hidden md:flex flex-col md:border-r border-light-40 dark:border-dark-80 z-10 sticky overflow-y-scroll"
+      class="sticky z-10 hidden flex-col overflow-y-auto border-manila-75 md:flex md:border-r dark:border-warm-gray"
       style="top: var(--nav-h); max-height: calc(100vh - var(--nav-h));"
     >
-      <FilmGrain currentPath={Astro.url.pathname} />
       <DocsSidebar framework={framework} docTitles={docTitles} class="flex-1">
-        <Selectors client:idle currentFramework={framework} currentSlug={slug} />
+        <Selectors
+          client:idle
+          currentFramework={framework}
+          currentSlug={slug}
+        />
       </DocsSidebar>
     </aside>
     <div>
       <div class="flex flex-col" style="min-height:calc(100vh - var(--nav-h));">
         <slot />
-        <Footer class="mt-auto" />
       </div>
-      <FooterEasterEgg class="md:col-start-2" />
+      <Footer class="mt-auto" />
+      <FooterEasterEgg variant="short" class="md:col-start-2" />
     </div>
   </div>
 </Base>
diff --git a/site/src/layouts/ErrorPage.astro b/site/src/layouts/ErrorPage.astro
index 16d648ff..e5c24d55 100644
--- a/site/src/layouts/ErrorPage.astro
+++ b/site/src/layouts/ErrorPage.astro
@@ -1,32 +1,57 @@
 ---
+import DialNav from '@/components/DialNav';
 import Footer from '@/components/Footer.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
-import GetStartedLink from '@/components/NavBar/GetStartedLink';
 import NavBar from '@/components/NavBar/NavBar.astro';
 import Base from '@/layouts/Base.astro';
 
 interface Props {
   title: string;
   description: string;
-  heading: string;
+  code?: string;
+  message?: string;
 }
 
-const { title, description, heading } = Astro.props;
+const { title, description, code = '404', message = 'NOT FOUND' } = Astro.props;
 ---
 
 <Base {title} {description}>
-  <div class="min-h-screen flex flex-col">
+  <div class="flex flex-col" style={{ minHeight: "80dvh" }}>
     <NavBar />
-    <main class="flex-1 px-6 md:px-10 py-10 sm:py-14 flex items-center justify-center">
-      <div class="text-center flex flex-col items-center gap-4">
-        <h1 class="text-h2 md:text-h1">{heading}</h1>
-        <div class="text-lg flex flex-col items-center gap-2">
-          <a href="/" class="intent:underline">Go home</a>
-          <GetStartedLink client:idle className="intent:underline">Read the docs</GetStartedLink>
+    <main class="w-full">
+      <div
+        class="mx-auto grid w-full max-w-305 justify-between gap-8 px-5 py-10 md:flex md:pt-32 md:pb-16"
+      >
+        <div class="flex flex-col leading-none">
+          <h1
+            class="font-display text-h2 font-bold text-faded-black md:text-h1 dark:text-manila-light"
+          >
+            {code}
+          </h1>
+          <h2
+            class="font-display text-h2 font-bold text-stroke-faded-black md:text-h1 dark:text-stroke-manila-light"
+          >
+            {message}
+          </h2>
         </div>
+        <DialNav
+          client:load
+          left={[
+            { href: "/", label: "Home", angle: -60 },
+            { href: "/docs", label: "Docs", angle: -120 },
+          ]}
+          right={[
+            {
+              href: "https://mux.com?utm_source=videojs&utm_campaign=vjs10",
+              label: "mux.com",
+              angle: 60,
+            },
+            { href: "/blog", label: "Blog", angle: 120 },
+          ]}
+        />
       </div>
     </main>
-    <Footer />
   </div>
+  <Footer />
   <FooterEasterEgg />
 </Base>
diff --git a/site/src/layouts/Markdown.astro b/site/src/layouts/Markdown.astro
index 8ed4e57e..54c91919 100644
--- a/site/src/layouts/Markdown.astro
+++ b/site/src/layouts/Markdown.astro
@@ -16,11 +16,11 @@ const { title, subtitle, description } = Astro.props;
 <Base title={subtitle ? [title, subtitle] : title} description={description}>
   <slot name="head" slot="head" />
   <NavBar />
-  <main class="px-6 md:px-10 mt-10 md:mt-20 pb-24">
+  <main class="mt-10 px-6 pb-24 md:mt-20 md:px-10">
     <article class="@container">
-      <header class="border-b border-light-40 max-w-3xl mx-auto pb-10 mb-10">
-        <h1 class="text-h4 md:text-h2 mb-2">{title}</h1>
-        <div class="font-medium md:text-lg text-dark-40">{description}</div>
+      <header class="border-light-40 mx-auto mb-10 max-w-3xl border-b pb-10">
+        <h1 class="mb-2 font-display text-h2 uppercase">{title}</h1>
+        <p class="">{description}</p>
       </header>
       <slot />
     </article>
diff --git a/site/src/pages/404.astro b/site/src/pages/404.astro
index c019f0b0..f822f553 100644
--- a/site/src/pages/404.astro
+++ b/site/src/pages/404.astro
@@ -2,4 +2,9 @@
 import ErrorPage from '@/layouts/ErrorPage.astro';
 ---
 
-<ErrorPage title="404" description="Page not found" heading="404 Not Found" />
+<ErrorPage
+  title="404"
+  description="Page not found"
+  code="404"
+  message="NOT FOUND"
+/>
diff --git a/site/src/pages/500.astro b/site/src/pages/500.astro
index b55a58ab..19c46f14 100644
--- a/site/src/pages/500.astro
+++ b/site/src/pages/500.astro
@@ -2,4 +2,9 @@
 import ErrorPage from '@/layouts/ErrorPage.astro';
 ---
 
-<ErrorPage title="500" description="Server error" heading="500 Server Error" />
+<ErrorPage
+  title="500"
+  description="Server error"
+  code="500"
+  message="SERVER ERROR"
+/>
diff --git a/site/src/pages/auth/error.astro b/site/src/pages/auth/error.astro
index f2497091..16e03df3 100644
--- a/site/src/pages/auth/error.astro
+++ b/site/src/pages/auth/error.astro
@@ -4,31 +4,48 @@ import { ArrowLeft, X } from 'lucide-react';
 import AuthResult from '@/layouts/AuthResult.astro';
 ---
 
-<AuthResult title="Authentication Failed" description="Please try again..." variant="error">
-  <a slot="action" data-action="home" href="/" class="hidden items-center gap-1 intent:underline group">
-    <ArrowLeft size="1em" className="group-intent:-translate-x-1 transition-transform" />
+<AuthResult
+  title="Authentication Failed"
+  description="Please try again..."
+  variant="error"
+>
+  <a
+    slot="action"
+    data-action="home"
+    href="/"
+    class="group hidden items-center gap-1 intent:underline"
+  >
+    <ArrowLeft
+      size="1em"
+      className="transition-transform group-intent:-translate-x-1"
+    />
     Back to Home
   </a>
-  <button slot="action" data-action="close" type="button" class="hidden items-center gap-1 intent:underline group">
-    <X size="1em" className="group-intent:scale-110 transition-transform" />
+  <button
+    slot="action"
+    data-action="close"
+    type="button"
+    class="group hidden items-center gap-1 intent:underline"
+  >
+    <X size="1em" className="transition-transform group-intent:scale-110" />
     Close
   </button>
 </AuthResult>
 
 <script>
   const isPopup = Boolean(window.opener);
-  const actionContainer = document.querySelector('[data-action-container]');
+  const actionContainer = document.querySelector("[data-action-container]");
   const homeAction = document.querySelector('[data-action="home"]');
   const closeAction = document.querySelector('[data-action="close"]');
 
   if (isPopup && closeAction) {
-    closeAction.classList.remove('hidden');
-    closeAction.classList.add('inline-flex');
-    closeAction.addEventListener('click', () => window.close());
+    closeAction.classList.remove("hidden");
+    closeAction.classList.add("inline-flex");
+    closeAction.addEventListener("click", () => window.close());
   } else if (homeAction) {
-    homeAction.classList.remove('hidden');
-    homeAction.classList.add('inline-flex');
+    homeAction.classList.remove("hidden");
+    homeAction.classList.add("inline-flex");
   }
 
-  actionContainer?.classList.remove('invisible');
+  actionContainer?.classList.remove("invisible");
 </script>
diff --git a/site/src/pages/auth/success.astro b/site/src/pages/auth/success.astro
index dbe88d11..2a4a7fa8 100644
--- a/site/src/pages/auth/success.astro
+++ b/site/src/pages/auth/success.astro
@@ -4,9 +4,20 @@ import { ArrowLeft } from 'lucide-react';
 import AuthResult from '@/layouts/AuthResult.astro';
 ---
 
-<AuthResult title="Authentication Successful" description="You may close this window." variant="success">
-  <a slot="action" href="/docs" class="inline-flex items-center gap-1 intent:underline group">
-    <ArrowLeft size="1em" className="group-intent:-translate-x-1 transition-transform" />
+<AuthResult
+  title="Authentication Successful"
+  description="You may close this window."
+  variant="success"
+>
+  <a
+    slot="action"
+    href="/docs"
+    class="group inline-flex items-center gap-1 intent:underline"
+  >
+    <ArrowLeft
+      size="1em"
+      className="transition-transform group-intent:-translate-x-1"
+    />
     Return to docs
   </a>
 </AuthResult>
@@ -17,9 +28,12 @@ import AuthResult from '@/layouts/AuthResult.astro';
   function tryClosePopup() {
     if (window.opener) {
       try {
-        window.opener.postMessage({ type: 'auth-complete' }, window.location.origin);
+        window.opener.postMessage(
+          { type: "auth-complete" },
+          window.location.origin,
+        );
       } catch (e) {
-        console.error('Failed to notify parent window:', e);
+        console.error("Failed to notify parent window:", e);
       }
     }
 
@@ -27,7 +41,9 @@ import AuthResult from '@/layouts/AuthResult.astro';
 
     // If window didn't close, show the action
     setTimeout(() => {
-      document.querySelector('[data-action-container]')?.classList.remove('invisible');
+      document
+        .querySelector("[data-action-container]")
+        ?.classList.remove("invisible");
     }, 100);
   }
 
diff --git a/site/src/pages/blog/[...page].astro b/site/src/pages/blog/[...page].astro
index 7937fab9..b7fb9431 100644
--- a/site/src/pages/blog/[...page].astro
+++ b/site/src/pages/blog/[...page].astro
@@ -5,6 +5,7 @@ import { getCollection, getEntries } from 'astro:content';
 import type { GetStaticPaths, Page } from 'astro';
 import BlogPagination from '@/components/blog/BlogPagination.astro';
 import BlogPostCard from '@/components/blog/BlogPostCard.astro';
+import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
 import JsonLd from '@/components/JsonLd.astro';
 import Blog from '@/layouts/Blog.astro';
 import { createBlogCollectionSchema } from '@/utils/jsonLd/schemas';
@@ -44,16 +45,34 @@ const jsonLdSchema = createBlogCollectionSchema({
 });
 ---
 
-<Blog title="Blog" description="News and updates from the Video.js open-source video player project">
+<Blog
+  title="Blog"
+  description="News and updates from the Video.js open-source video player project"
+>
   <JsonLd slot="head" schema={jsonLdSchema} />
-  <header class="mb-10 md:mb-20 w-full max-w-3xl mx-auto">
-    <h1 class="text-h4 md:text-h2 mb-2">Video.js Blog</h1>
-    <p class="text-lg font-medium md:text-h5 text-dark-40 dark:text-light-40">
-      {page.data.length === 0 ? 'Coming soon' : 'News and updates from the Video.js open-source video player project'}
-    </p>
+  <header
+    class="mx-auto mb-10 w-full max-w-4xl overflow-hidden rounded-xs border border-manila-dark text-center md:mb-20 dark:border-transparent dark:bg-soot"
+  >
+    <div class="mx-auto max-w-3xl px-5 py-20">
+      <h1 class="mb-4 font-display text-h2 uppercase lg:text-h1">
+        Video.js Blog
+      </h1>
+      <p class="font-display text-h5 leading-tight text-balance">
+        {
+          page.data.length === 0
+            ? "Coming soon"
+            : "News and updates from the Video.js open-source video player project"
+        }
+      </p>
+    </div>
+    <FooterEasterEgg variant="extra-short" />
   </header>
-  <div class="grid gap-10 w-full max-w-3xl mx-auto">
-    {page.data.map((post) => <BlogPostCard post={post} authors={post.authors} />)}
+  <div class="mx-auto grid w-full max-w-3xl gap-10">
+    {
+      page.data.map((post) => (
+        <BlogPostCard post={post} authors={post.authors} />
+      ))
+    }
   </div>
   {page.lastPage > 1 && <BlogPagination page={page} />}
 </Blog>
diff --git a/site/src/pages/blog/[...slug].astro b/site/src/pages/blog/[...slug].astro
index 0d30bedf..5ec104c8 100644
--- a/site/src/pages/blog/[...slug].astro
+++ b/site/src/pages/blog/[...slug].astro
@@ -37,7 +37,11 @@ const jsonLdSchema = createBlogPostingSchema({
 });
 ---
 
-<Blog title={[post.data.title, 'Blog']} description={post.data.description} canonical={post.data.canonical}>
+<Blog
+  title={[post.data.title, "Blog"]}
+  description={post.data.description}
+  canonical={post.data.canonical}
+>
   <JsonLd slot="head" schema={jsonLdSchema} />
   <article
     class="@container"
@@ -48,23 +52,32 @@ const jsonLdSchema = createBlogPostingSchema({
     data-site="blog"
     data-pagefind-filter="site[data-site]"
   >
-    <header class="border-b border-light-40 dark:border-dark-80 max-w-3xl mx-auto pb-10 mb-10 relative">
-      <div class="font-medium md:text-lg text-dark-40 dark:text-light-40 flex gap-4 mb-1">
-        <FormattedDate data-pagefind-sort={`date:${post.data.pubDate.toISOString()}`} date={post.data.pubDate} />
+    <header
+      class="relative mx-auto mb-10 max-w-3xl border-y border-faded-black py-10 dark:border-manila-light"
+    >
+      <div
+        class="mb-3 flex gap-4 font-display text-h4 font-bold text-orange uppercase"
+      >
+        <FormattedDate
+          data-pagefind-sort={`date:${post.data.pubDate.toISOString()}`}
+          date={post.data.pubDate}
+        />
         <span>&bull;</span>
-        <span data-pagefind-ignore data-llms-ignore>{remarkPluginFrontmatter.minutesRead}</span>
+        <span data-pagefind-ignore data-llms-ignore
+          >{remarkPluginFrontmatter.minutesRead}</span
+        >
       </div>
-      <h1 class="text-h4 md:text-h2 mb-2">{post.data.title}</h1>
-      <div class="font-medium md:text-lg text-dark-40 dark:text-light-40">
+      <h1 class="mb-2 font-display text-h15 uppercase">{post.data.title}</h1>
+      <div class="">
         By {
-          new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
+          new Intl.ListFormat("en", { style: "long", type: "conjunction" })
             .formatToParts(authors.map((author) => author.data.name))
             .map((part) =>
-              part.type === 'element' ? (
+              part.type === "element" ? (
                 // inline-block removes the whitespace that prettier+astro adds around the text
                 <a
                   href={`/blog/authors/${authors.find((a) => a.data.name === part.value)?.id}`}
-                  class="intent:underline inline-block"
+                  class="inline-block intent:underline"
                   data-pagefind-meta="author"
                 >
                   {part.value}
diff --git a/site/src/pages/blog/authors/[author].astro b/site/src/pages/blog/authors/[author].astro
index fb2b703e..47920614 100644
--- a/site/src/pages/blog/authors/[author].astro
+++ b/site/src/pages/blog/authors/[author].astro
@@ -45,30 +45,43 @@ const jsonLdSchema = createProfilePageSchema({
 });
 ---
 
-<Blog title={[author.data.name, 'Blog']} description={`Posts by ${author.data.name} on the Video.js blog`}>
+<Blog
+  title={[author.data.name, "Blog"]}
+  description={`Posts by ${author.data.name} on the Video.js blog`}
+>
   <JsonLd slot="head" schema={jsonLdSchema} />
   <header
-    class="mb-10 w-full max-w-3xl mx-auto grid gap-y-5 gap-x-10 grid-cols-1 md:grid-cols-(--md-grid-cols)"
-    style={author.data.avatar ? '--md-grid-cols: auto minmax(0, 1fr);' : undefined}
+    class="mx-auto mb-10 grid w-full max-w-3xl grid-cols-1 gap-x-10 md:grid-cols-(--md-grid-cols)"
+    style={author.data.avatar
+      ? "--md-grid-cols: auto minmax(0, 1fr);"
+      : undefined}
   >
     {
       author.data.avatar && (
         <img
           src={author.data.avatar}
           alt={author.data.name}
-          class="w-24 h-24 md:w-36 md:h-36 rounded-full border border-light-40 dark:border-dark-80 bg-light-100 dark:bg-dark-110 row-span-3"
+          class="row-span-3 h-24 w-24 rounded-full border border-current md:h-36 md:w-36"
         />
       )
     }
-    <h1 class="text-h2 mb-1">{author.data.name}</h1>
-    {author.data.bio && <p class="text-lg text-dark-80 dark:text-light-80 mb-4">{author.data.bio}</p>}
+    <h1 class="mb-1 font-display text-h15 uppercase">{author.data.name}</h1>
+    {author.data.bio && <p class="mb-4">{author.data.bio}</p>}
     {
       author.data.socialLinks && (
-        <AuthorSocialLinks client:idle socialLinks={author.data.socialLinks} className="flex gap-2" />
+        <AuthorSocialLinks
+          client:idle
+          socialLinks={author.data.socialLinks}
+          className="flex gap-2"
+        />
       )
     }
   </header>
-  <section class="w-full max-w-3xl mx-auto grid gap-10">
-    {postsWithAuthors.map((post) => <BlogPostCard post={post} authors={post.authors} />)}
+  <section class="mx-auto grid w-full max-w-3xl gap-10">
+    {
+      postsWithAuthors.map((post) => (
+        <BlogPostCard post={post} authors={post.authors} />
+      ))
+    }
   </section>
 </Blog>
diff --git a/site/src/pages/docs/framework/[framework]/[...slug].astro b/site/src/pages/docs/framework/[framework]/[...slug].astro
index 19b92fad..c7636ceb 100644
--- a/site/src/pages/docs/framework/[framework]/[...slug].astro
+++ b/site/src/pages/docs/framework/[framework]/[...slug].astro
@@ -8,7 +8,7 @@ import { Selectors } from '@/components/docs/Selectors';
 import { TableOfContents } from '@/components/docs/TableOfContents';
 import JsonLd from '@/components/JsonLd.astro';
 import defaultMarkdownComponents from '@/components/typography/defaultMarkdownComponents';
-import H3 from '@/components/typography/H3.astro';
+import H2Markdown from '@/components/typography/H2Markdown.astro';
 import DocsLayout from '@/layouts/Docs.astro';
 import type { SupportedFramework } from '@/types/docs';
 import { SUPPORTED_FRAMEWORKS } from '@/types/docs';
@@ -95,11 +95,11 @@ const jsonLdSchema = createTechArticleSchema({
   <JsonLd slot="head" schema={jsonLdSchema} />
   <main
     class:list={[
-      'flex-1',
-      'grid grid-cols-1 xl:grid-cols-(--xl-grid-cols)',
-      '[grid-template-areas:var(--grid-template-areas)] xl:[grid-template-areas:var(--xl-grid-template-areas)]',
-      'grid-rows-(--grid-rows) xl:grid-rows-1',
-      '[--scroll-mt:var(--mobile-toc-h)] xl:[--scroll-mt:0px]',
+      "flex-1",
+      "grid grid-cols-1 xl:grid-cols-(--xl-grid-cols)",
+      "[grid-template-areas:var(--grid-template-areas)] xl:[grid-template-areas:var(--xl-grid-template-areas)]",
+      "grid-rows-(--grid-rows) xl:grid-rows-1",
+      "[--scroll-mt:var(--mobile-toc-h)] xl:[--scroll-mt:0px]",
     ]}
     style="
       --xl-grid-cols: minmax(0, 1fr) calc(var(--spacing) * 59);
@@ -113,12 +113,15 @@ const jsonLdSchema = createTechArticleSchema({
       <Selectors client:idle currentFramework={framework} currentSlug={slug} />
     </div>
     <div
-      class="sticky overflow-y-auto z-30"
+      class="sticky z-20 overflow-y-auto"
       style="grid-area: toc; top: var(--nav-h); max-height: calc(100vh - var(--nav-h));"
     >
       <TableOfContents client:idle headings={filteredHeadings} />
     </div>
-    <div class="@container px-6 lg:px-12 flex flex-col" style="grid-area: article;">
+    <div
+      class="@container flex flex-col px-6 lg:px-12"
+      style="grid-area: article;"
+    >
       <article
         class="mb-18 flex-1"
         data-pagefind-body
@@ -131,20 +134,27 @@ const jsonLdSchema = createTechArticleSchema({
       >
         <header
           class:list={[
-            'border-b border-light-40 dark:border-dark-80 max-w-3xl mx-auto py-8 mb-8',
-            'flex flex-col lg:flex-row gap-4 items-start lg:items-end justify-between',
+            "mx-auto mb-8 max-w-3xl border-b border-manila-75 py-8 dark:border-warm-gray",
+            "flex flex-col items-start justify-between gap-4 lg:flex-row lg:items-end",
           ]}
         >
           <div>
-            <H3 as="h1" class="mt-0 mb-2">{getDocTitle(doc, framework)}</H3>
-            <p class="@lg:font-medium">{doc.data.description}</p>
+            <H2Markdown as="h1" class="mt-0 mb-4"
+              >{getDocTitle(doc, framework)}</H2Markdown
+            >
+            <p class="text-p2">{doc.data.description}</p>
           </div>
           <CopyMarkdownButton client:idle />
         </header>
         <Content components={{ ...defaultMarkdownComponents }} />
       </article>
       <footer class="mb-18 grid gap-5">
-        <DocsNavigation prev={prev} next={next} framework={framework} docTitles={docTitles} />
+        <DocsNavigation
+          prev={prev}
+          next={next}
+          framework={framework}
+          docTitles={docTitles}
+        />
         <EditPageButton filePath={`site/src/content/docs/${doc.id}.mdx`} />
       </footer>
     </div>
diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index 5021ad3a..5714dcb7 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -1,106 +1,27 @@
 ---
-import { CircleCheck, Clock } from 'lucide-react';
 
-import construction from '@/assets/construction.svg?raw';
 import Footer from '@/components/Footer.astro';
 import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
-import HomePageDemo from '@/components/HomePageDemo';
-import HeroVideo from '@/components/home/HeroVideo';
-import HomePageControls from '@/components/home/HomePageControls';
+import Built from '@/components/home/Built/BuiltSection.astro';
+import Demo from '@/components/home/Demo/Demo';
+import GetStartedBanner from '@/components/home/GetStartedBanner.astro';
+import Header from '@/components/home/Header.astro';
+import RoadMap from '@/components/home/Roadmap.astro';
+import Sponsors from '@/components/home/Sponsors.astro';
 import NavBar from '@/components/NavBar/NavBar.astro';
-import { SITE_DESCRIPTION, SITE_TITLE, VJS8_DEMO_VIDEO } from '@/consts';
+import { SITE_DESCRIPTION, SITE_TITLE } from '@/consts';
 import Base from '@/layouts/Base.astro';
-
-const poster = `${VJS8_DEMO_VIDEO.poster}?time=0`;
 ---
 
 <Base title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <link rel="preload" href={poster} as="image" type="image/webp" fetchpriority="high" slot="priority-head" />
-  <NavBar dark />
-  <header class="relative bg-dark-100 text-light-80 flex flex-col">
-    <div class="w-full max-w-7xl mx-auto px-6 md:px-10 mt-20 md:mt-30">
-      <div
-        class="gap-5 lg:gap-12 grid lg:grid-cols-(--lg-grid-cols) items-center mb-10"
-        style={{ '--lg-grid-cols': 'auto auto' }}
-      >
-        <h1 class="text-h4 md:text-h1 text-balance lg:text-pretty">The Open Source Player for the Web</h1>
-        <p class="md:text-lg text-balance max-w-100">
-          The open-source video player for React and HTML. Lightweight, accessible components built for performance and
-          streaming.
-        </p>
-      </div>
-      <div class="vjs relative z-10 w-full -mb-11 md:-mb-21 lg:-mb-32 grid grid-cols-1 grid-rows-1">
-        <HeroVideo
-          client:load
-          className="aspect-video rounded-3xl bg-dark-80 dark:bg-dark-40 shadow-2xl"
-          poster={poster}
-        />
-      </div>
-    </div>
-    <div class="absolute bottom-0 left-0 right-0 h-28 md:h-67 grid grid-rows-4">
-      <div class="bg-yellow"></div>
-      <div class="bg-orange"></div>
-      <div class="bg-red"></div>
-      <div class="bg-purple"></div>
-    </div>
-  </header>
-  <!-- padding corresponds to negative margin on player -->
-  <main class="@container pt-11 pb-30 lg:pb-50 md:pt-21 lg:pt-32 px-6 md:px-10 w-full max-w-7xl mx-auto min-h-64">
-    <HomePageControls client:idle className="col-span-full my-10 sm:my-12 lg:mb-15" />
-    <HomePageDemo client:idle className="mb-6 lg:mb-30" />
-    <section class="rounded-3xl">
-      <header class="max-w-3xl mb-3">
-        <h2 class="text-h5 font-semibold lg:text-h4">Roadmap</h2>
-        <p class="mb-3">Video.js 10 is under construction</p>
-      </header>
-      <div class="relative h-3 w-full bg-yellow rounded-full overflow-hidden mb-6">
-        <div
-          style={`background-image:url('data:image/svg+xml,${encodeURIComponent(construction)}');`}
-          class="w-600 bg-repeat-x absolute top-0 bottom-0 left-0 animate-marquee motion-reduce:animate-none"
-        >
-        </div>
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
-        <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
-          <CircleCheck size={20} className="flex-shrink-0 relative top-1" />
-          <div>
-            <h3 class="font-semibold text-lg">Preview</h3>
-            <p class="font-medium mb-3">October 28, 2025</p>
-            <p class="max-w-3xl">Vibe check. First public look, with limited features. Not production ready.</p>
-          </div>
-        </section>
-        <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
-          <div>
-            <Clock size={20} className="flex-shrink-0 relative top-1" />
-          </div>
-          <div>
-            <h3 class="font-semibold text-lg">Beta</h3>
-            <p class="font-medium mb-3">February 2026</p>
-            <p class="max-w-3xl">Core controls. Adaptive streaming with existing engines. Try it out!</p>
-          </div>
-        </section>
-        <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
-          <div>
-            <Clock size={20} className="flex-shrink-0 relative top-1" />
-          </div>
-          <div>
-            <h3 class="font-semibold text-lg">Release</h3>
-            <p class="font-medium mb-3">Mid-2026</p>
-            <p class="max-w-3xl">Stable, with all the basics: Media Chrome, Vidstack, Plyr feature parity.</p>
-          </div>
-        </section>
-        <section class="flex gap-3 rounded-xl border border-light-40 dark:border-dark-80 p-6">
-          <div>
-            <Clock size={20} className="flex-shrink-0 relative top-1" />
-          </div>
-          <div>
-            <h3 class="font-semibold text-lg">Beyond</h3>
-            <p class="font-medium mb-3">Late-2026</p>
-            <p class="max-w-3xl">Collab with the community, migrate major v8 plugins, develop streaming engines</p>
-          </div>
-        </section>
-      </div>
-    </section>
+  <NavBar />
+  <Header />
+  <main>
+    <Demo client:idle />
+    <GetStartedBanner />
+    <Built />
+    <RoadMap />
+    <Sponsors />
   </main>
   <Footer />
   <FooterEasterEgg />
diff --git a/site/src/styles/globals.css b/site/src/styles/globals.css
index 635432ab..6e48aba9 100644
--- a/site/src/styles/globals.css
+++ b/site/src/styles/globals.css
@@ -21,6 +21,7 @@
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
   font-family: "Eurostile LT Pro Extended";
   src:
@@ -28,7 +29,8 @@
     url("https://static.mux.com/fonts/EurostileLTProExtended2/font.woff") format("woff");
   font-weight: normal;
   font-style: normal;
-  font-display: swap;
+  /* the metrics of this font are wack, so, let's block instead of swap. TODO precompute metrics */
+  font-display: block;
 }
 @font-face {
   font-family: "Eurostile LT Pro Extended";
@@ -37,68 +39,8 @@
     url("https://static.mux.com/fonts/EurostileLTProBoldExtended2/font.woff") format("woff");
   font-weight: bold;
   font-style: normal;
-  font-display: swap;
-}
-
-/* before we begin with tailwind, let's go over some global rules */
-/* nested lists should have lower-alpha style */
-.list-decimal .list-decimal {
-  list-style-type: lower-alpha;
-}
-
-/* slightly thinner decorations */
-* {
-  text-decoration-thickness: max(0.05em, 0.05rem);
-}
-
-/* global text decoration offset */
-.font-sans {
-  text-underline-offset: 0.25em;
-}
-.font-mono {
-  text-underline-offset: 0.125em;
-}
-
-/* no ligatures in code... */
-.font-mono {
-  font-variant-ligatures: none;
-}
-
-/* stuff should leave room for the nav when scroll margining */
-[id] {
-  scroll-margin-top: calc(var(--nav-h) + var(--spacing) * 5 + var(--scroll-mt, 0px));
-}
-
-/* basic HTML elements */
-b,
-strong {
-  font-weight: var(--font-weight-semibold);
-}
-mark {
-  background-color: var(--color-yellow);
-  color: var(--color-dark-100);
-}
-
-/* shiki dark mode */
-.dark .shiki,
-.dark .shiki span,
-.dark .astro-code,
-.dark .astro-code span {
-  /* biome-ignore lint/complexity/noImportantStyles: override shiki's inline styles */
-  color: var(--shiki-dark) !important;
-}
-
-/* Ok, now let's do some tailwind stuff */
-@custom-variant intent (&:hover,
-&:focus-within);
-@custom-variant supports-container {
-  @supports (container: size) {
-    @slot;
-  }
-}
-@custom-variant dark (&:where(.dark, .dark *));
-.dark * {
-  color-scheme: dark;
+  /* the metrics of this font are wack, so, let's block instead of swap. TODO precompute metrics */
+  font-display: block;
 }
 
 /* theme inline tells tailwind to reference the value of these properties */
@@ -108,99 +50,96 @@ mark {
   --font-sans: var(--font-instrument-sans);
   --font-mono: var(--font-ibm-plex-mono);
   --font-display-compact: "Eurostile LT Pro", sans-serif;
-  --font-display-extended: "Eurostile LT Pro Extended", sans-serif;
+  --font-display: "Eurostile LT Pro Extended", sans-serif;
 }
 
-/* Everything else can be configured here */
 @theme {
   --color-*: initial;
 
   --color-white: white;
   --color-black: black;
 
-  --color-dark-110: #2a2928;
-  --color-dark-100: #393836;
-  --color-dark-90: #494741;
-  --color-dark-80: #5a5850;
-  --color-dark-40: #7d796a;
+  --color-faded-black: #1e1d1d;
+  --color-soot: #32302f;
+  --color-warm-gray: #403c38;
+  --color-manila-dark: #bfb39e;
+  --color-manila-75: #ccc3ab;
+  --color-manila-50: #dcd2bb;
+  --color-manila-25: #e7ddc6;
+  --color-manila-light: #f3e7d2;
 
-  --color-light-100: #fbf5d8;
-  --color-light-80: #ebe4c1;
-  --color-light-60: #d8d2b2;
-  --color-light-40: #c7c2a4;
-
-  --color-yellow: #fcb116;
-  --color-orange: #f26222;
-  --color-red: #ea3837;
-  --color-purple: #a83b71;
-  --color-blue: #3870b7;
+  --color-bright-yellow: #ffca18;
+  --color-gold: #ffa81b;
+  --color-orange: #ff6200;
+  --color-red: #eb3132;
+  --color-magenta: #cc3566;
 
   /* Typography */
   --tracking-*: initial;
-  --tracking-tighter: -0.04em;
-  --tracking-tight: -0.02em;
+  --tracking-tightest: -0.03em;
+  --tracking-tighter: -0.02em;
+  --tracking-tight: -0.01em;
   --tracking-normal: 0;
-  --tracking-wide: 0.02em;
-  --tracking-wider: 0.04em;
-  --tracking-widest: 0.08em;
-
-  --font-weight-code-normal: 400;
-  --font-weight-normal: 450;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
 
   --text-*: initial;
-  --text-h1: 4rem; /* 64px */
-  --text-h1--line-height: 1;
-  --text-h1--letter-spacing: -0.04em;
-  --text-h1--font-weight: var(--font-weight-semibold);
-  --text-h2: 3rem; /* 48px */
-  --text-h2--line-height: calc(56 / 48);
-  --text-h2--letter-spacing: -0.04em;
-  --text-h2--font-weight: var(--font-weight-semibold);
-  --text-h3: 2.5rem; /* 40px */
+
+  --text-h1: 3.75rem; /* 60px */
+  --text-h1--line-height: 1.1;
+  --text-h1--letter-spacing: var(--tracking-tightest);
+  --text-h1--font-weight: var(--font-weight-bold);
+
+  --text-h15: 2.375rem; /* 38px */
+  --text-h15--line-height: 1.1;
+  --text-h15--letter-spacing: var(--tracking-tightest);
+  --text-h15--font-weight: var(--font-weight-bold);
+
+  --text-h2: 1.75rem; /* 28px */
+  --text-h2--line-height: 1;
+  --text-h2--letter-spacing: var(--tracking-tighter);
+  --text-h2--font-weight: var(--font-weight-bold);
+
+  --text-h25: 1.5rem; /* 24px */
+  --text-h25--line-height: 1;
+  --text-h25--letter-spacing: var(--tracking-tighter);
+  --text-h25--font-weight: var(--font-weight-bold);
+
+  --text-h3: 1.125rem; /* 18px */
   --text-h3--line-height: 1;
-  --text-h3--letter-spacing: -0.04em;
-  --text-h3--font-weight: var(--font-weight-semibold);
-  --text-h4: 2rem; /* 32px */
-  --text-h4--line-height: calc(40 / 32);
-  --text-h4--letter-spacing: -0.02em;
-  --text-h4--font-weight: var(--font-weight-semibold);
-  --text-h5: 1.5rem; /* 24px */
-  --text-h5--line-height: calc(32 / 24);
-  --text-h5--letter-spacing: -0.02em;
-  --text-h5--font-weight: var(--font-weight-medium);
+  --text-h3--letter-spacing: var(--tracking-normal);
+  --text-h3--font-weight: var(--font-weight-bold);
 
-  --text-lg: 1.25rem; /* 20px */
-  --text-lg--line-height: calc(28 / 20);
-  --text-lg--letter-spacing: -0.02em;
-  --text-lg--font-weight: var(--font-weight-normal);
-  --text-md: 1.125rem; /* 18px */
-  --text-md--line-height: calc(26 / 18);
-  --text-md--letter-spacing: -0.02em;
-  --text-md--font-weight: var(--font-weight-normal);
-  --text-base: 1rem; /* 16px */
-  --text-base--line-height: calc(24 / 16);
-  --text-base--letter-spacing: -0.02em;
-  --text-base--font-weight: var(--font-weight-normal);
-  --text-sm: 0.875rem; /* 14px */
-  --text-sm--line-height: calc(20 / 14);
-  --text-sm--letter-spacing: -0.02em;
-  --text-sm--font-weight: var(--font-weight-normal);
+  --text-h4: 0.875rem; /* 14px */
+  --text-h4--line-height: 1;
+  --text-h4--letter-spacing: var(--tracking-normal);
+  --text-h4--font-weight: var(--font-weight-bold);
 
-  /* Notice the use of em, so that code scales with, say, headers */
-  --text-code: clamp(0.875em, calc(0.8125em + 0.125rem), 0.9375em);
+  --text-h5: 0.875rem; /* 14px */
+  --text-h5--line-height: 1;
+  --text-h5--letter-spacing: var(--tracking-normal);
+  --text-h5--font-weight: var(--font-weight-normal);
+
+  --text-p1: 1.375rem; /* 22px */
+  --text-p1--line-height: 1.5;
+  --text-p1--letter-spacing: var(--tracking-tight);
+  --text-p1--font-weight: var(--font-weight-normal);
+
+  --text-p2: 1rem; /* 16px */
+  --text-p2--line-height: 1.5;
+  --text-p2--letter-spacing: var(--tracking-normal);
+  --text-p2--font-weight: var(--font-weight-normal);
+
+  --text-p3: 0.875rem; /* 14px */
+  --text-p3--line-height: 1.5;
+  --text-p3--letter-spacing: var(--tracking-normal);
+  --text-p3--font-weight: var(--font-weight-normal);
+
+  --text-code: 0.875em; /* 14px */
   --text-code--line-height: inherit;
-  --text-code--letter-spacing: -0.02em;
-  --text-code--font-weight: var(--font-weight-code-normal);
-  /* if you don't want this scaling, use text-base-code */
-  --text-base-code: 0.9375rem;
-  --text-base-code--line-height: calc(28 / 16);
-  --text-base-code--letter-spacing: -0.02em;
-  --text-base-code--font-weight: var(--font-weight-code-normal);
+  --text-code--letter-spacing: var(--tracking-normal);
+  --text-code--font-weight: var(--font-weight-normal);
 
   /* animations */
-  --animate-marquee: marquee 40s linear infinite;
+  --animate-marquee: marquee 30s linear infinite;
   @keyframes marquee {
     from {
       transform: translate3d(-50%, 0, 0);
@@ -210,3 +149,190 @@ mark {
     }
   }
 }
+
+@custom-variant intent (&:hover,
+&:focus-within);
+@custom-variant supports-container {
+  @supports (container: size) {
+    @slot;
+  }
+}
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  .list-decimal .list-decimal {
+    list-style-type: lower-alpha;
+  }
+
+  * {
+    text-decoration-thickness: max(0.05em, 0.05rem);
+  }
+
+  .font-display,
+  .font-display-compact {
+    text-underline-offset: 0.25em;
+  }
+
+  .font-sans {
+    text-underline-offset: 0.25em;
+  }
+
+  .font-mono {
+    text-underline-offset: 0.125em;
+    font-variant-ligatures: none;
+  }
+
+  [id] {
+    /* this only works where nav-h is defined. currently, docs */
+    scroll-margin-top: calc(var(--nav-h) + var(--spacing) * 5 + var(--scroll-mt, 0px));
+  }
+
+  b,
+  strong {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  mark {
+    background-color: var(--color-bright-yellow);
+    color: var(--color-faded-black);
+  }
+
+  .dark * {
+    color-scheme: dark;
+  }
+}
+
+* {
+  scrollbar-color: var(--color-manila-dark) transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-manila-dark);
+    border-radius: 9999px;
+  }
+}
+
+@utility data-bar {
+  height: 2.5rem;
+  background-image: url("/data-bar-white.svg");
+  background-repeat: repeat-x;
+  background-size: auto 100%;
+  animation: grow-bar 1.5s ease-out forwards;
+  animation-play-state: paused;
+
+  [data-animate] & {
+    animation-play-state: running;
+  }
+}
+
+@utility data-bar-orange {
+  background-image: url("/data-bar-orange.svg");
+}
+
+@utility horizontal-bars {
+  width: 2.5rem;
+  background-image: url("/horizontal-bar-white.svg");
+  background-repeat: repeat-y;
+  background-size: 100% 6px;
+  animation: horizontal-grow-bar 1.5s ease-out forwards;
+  animation-play-state: paused;
+
+  [data-animate] & {
+    animation-play-state: running;
+  }
+}
+
+@utility horizontal-bars-orange {
+  background-image: url("/horizontal-bar-orange.svg");
+}
+
+@utility built-bg-gray {
+  background-image: url("/built-bg-horizontal-line-gray.svg");
+  background-repeat: repeat-y;
+  background-size: 100% 9px;
+  background-clip: content-box;
+  padding: 8px 10px 0 10px;
+}
+
+@utility built-bg-black {
+  background-image: url("/built-bg-horizontal-line-black.svg");
+  background-repeat: repeat-y;
+  background-size: 100% 9px;
+  background-clip: content-box;
+  padding: 8px 10px 0 10px;
+}
+
+@utility text-stroke-faded-black {
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--color-faded-black);
+  -webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
+
+  &::selection {
+    color: transparent;
+    -webkit-text-stroke: 1.5px var(--color-faded-black);
+    -webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
+  }
+}
+
+@utility text-stroke-manila-light {
+  color: transparent;
+  -webkit-text-stroke: 1.5px var(--color-manila-light);
+  -webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-manila-light);
+
+  &::selection {
+    color: transparent;
+    -webkit-text-stroke: 1.5px var(--color-faded-black);
+    -webkit-text-stroke: clamp(1px, 0.035em, 1.5px) var(--color-faded-black);
+  }
+}
+
+@utility grid-separator-container {
+  position: relative;
+
+  &::before {
+    top: 0;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+    content: "";
+    position: absolute;
+    border: 10px solid;
+    border-color: inherit;
+    z-index: 1000;
+    pointer-events: none;
+  }
+}
+
+@utility grid-separators {
+  border-right: 1px solid;
+  border-bottom: 1px solid;
+  border-color: inherit;
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    right: -5px;
+    height: 10px;
+    width: 10px;
+    background: inherit;
+    z-index: 10;
+  }
+}
+
+@keyframes grow-bar {
+  from {
+    width: 0%;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes horizontal-grow-bar {
+  from {
+    height: 0%;
+  }
+  to {
+    height: 100%;
+  }
+}
diff --git a/site/src/utils/docs/__tests__/renderInlineMarkdown.test.ts b/site/src/utils/docs/__tests__/renderInlineMarkdown.test.ts
index 9786a4b5..3516b0e6 100644
--- a/site/src/utils/docs/__tests__/renderInlineMarkdown.test.ts
+++ b/site/src/utils/docs/__tests__/renderInlineMarkdown.test.ts
@@ -9,7 +9,7 @@ describe('renderInlineMarkdown', () => {
   it('unwraps a single paragraph', () => {
     const result = renderInlineMarkdown('Hello **world**.');
     expect(result).not.toMatch(/^<p/);
-    expect(result).toContain('<strong class="font-semibold">world</strong>');
+    expect(result).toContain('<strong class="font-bold">world</strong>');
   });
 
   it('preserves multiple paragraphs', () => {
@@ -29,12 +29,12 @@ describe('renderInlineMarkdown', () => {
 
   it('renders strong text', () => {
     const result = renderInlineMarkdown('**bold text**');
-    expect(result).toContain('<strong class="font-semibold">bold text</strong>');
+    expect(result).toContain('<strong class="font-bold">bold text</strong>');
   });
 
   it('renders emphasized text', () => {
     const result = renderInlineMarkdown('*italic text*');
-    expect(result).toContain('<em class="font-medium">italic text</em>');
+    expect(result).toContain('<em class="font-bold">italic text</em>');
   });
 
   it('renders links with correct classes', () => {
diff --git a/site/src/utils/docs/renderInlineMarkdown.ts b/site/src/utils/docs/renderInlineMarkdown.ts
index e1fb1b3f..8bd00c55 100644
--- a/site/src/utils/docs/renderInlineMarkdown.ts
+++ b/site/src/utils/docs/renderInlineMarkdown.ts
@@ -1,6 +1,6 @@
 import { Marked, type MarkedExtension, type Tokens } from 'marked';
-import { twMerge } from 'tailwind-merge';
 import { shared } from '@/components/typography/styles';
+import { twMerge } from '@/utils/twMerge';
 
 const classes = {
   p: 'mt-3 first:mt-0',
diff --git a/site/src/utils/twMerge.ts b/site/src/utils/twMerge.ts
new file mode 100644
index 00000000..c3945272
--- /dev/null
+++ b/site/src/utils/twMerge.ts
@@ -0,0 +1,21 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+
+export const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        'text-h1',
+        'text-h15',
+        'text-h2',
+        'text-h3',
+        'text-h4',
+        'text-h5',
+        'text-p1',
+        'text-p2',
+        'text-p3',
+        'text-code',
+      ],
+      'font-family': ['font-display-compact', 'font-display'],
+    },
+  },
+});