diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index dc73d4b..1e2da11 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,444 +1,15 @@
-'use client'
-import { Navbar } from '@/components/about-navbar'
-import { Container } from '@/components/container'
-import { Footer } from '@/components/footer'
-import { Link } from '@/components/link'
-import { ChevronRightIcon } from '@heroicons/react/16/solid'
+import AboutPage from '@/components/about-page'
+import type { Metadata } from 'next'
 
-const people = [
-  {
-    name: 'Brandon Saldan',
-    role: 'Software Engineer',
-    imageUrl: 'https://usenocturne.com/map/1.jpg',
-    href: 'https://github.com/brandonsaldan',
+export const metadata: Metadata = {
+  title: 'About',
+  description:
+    'The team behind Nocturne and our mission to give Car Thing hardware a second life.',
+  alternates: {
+    canonical: 'https://usenocturne.com/about',
   },
-  {
-    name: 'bbaovanc',
-    role: 'Software Engineer',
-    imageUrl: 'https://usenocturne.com/map/3.jpg',
-    href: 'https://github.com/bbaovanc',
-  },
-  {
-    name: 'Dominic Frye',
-    role: 'Software Engineer',
-    imageUrl: 'https://usenocturne.com/map/2.jpg',
-    href: 'https://github.com/itsnebulalol',
-  },
-  {
-    name: 'shadow',
-    role: 'Software Engineer',
-    imageUrl: 'https://usenocturne.com/map/4.jpg',
-    href: 'https://github.com/68p',
-  },
-]
-
-const testimonials = [
-  {
-    body: 'Thank you for helping revive this device!',
-    author: {
-      name: 'Jade Robbins',
-      handle: 'jaderobbins',
-      imageUrl: 'testimonials/1.jpg',
-    },
-    href: 'https://x.com/jaderobbins/status/1861117484927197615',
-  },
-  {
-    body: 'This is awesome thank you!',
-    author: {
-      name: 'Alex Fife',
-      handle: 'alextfife',
-      imageUrl: 'testimonials/2.jpg',
-    },
-    href: 'https://x.com/alextfife/status/1861080147954180142',
-  },
-  {
-    body: 'These people are doing amazing work.',
-    author: {
-      name: 'Jeff Xu',
-      handle: 'JSandals1',
-      imageUrl: 'testimonials/3.jpg',
-    },
-    href: 'https://x.com/JSandals1/status/1861238960548163770',
-  },
-  {
-    body: 'I love when people take matters into their own hands.',
-    author: {
-      name: 'Ray Wong',
-      handle: 'raywongy',
-      imageUrl: 'testimonials/4.jpg',
-    },
-    href: 'https://x.com/raywongy/status/1861248921877569892',
-  },
-  {
-    body: 'Sick!!!!!!!!!',
-    author: {
-      name: 'alistair',
-      handle: 'alistaiir',
-      imageUrl: 'testimonials/5.jpg',
-    },
-    href: 'https://x.com/alistaiir/status/1856887872370217401',
-  },
-  {
-    body: 'So excited for this!',
-    author: {
-      name: 'Jim England',
-      handle: 'JimEngland',
-      imageUrl: 'testimonials/6.jpg',
-    },
-    href: 'https://x.com/JimEngland/status/1852470793684635941',
-  },
-  {
-    body: 'lfg, this is the news i’ve been waiting for!!!',
-    author: {
-      name: 'janniks',
-      handle: 'janniksco',
-      imageUrl: 'testimonials/7.jpg',
-    },
-    href: 'https://x.com/janniksco/status/1852361766283444334',
-  },
-  {
-    body: 'Incredible stuff!',
-    author: {
-      name: 'brian',
-      handle: 'officialbois',
-      imageUrl: 'testimonials/8.jpg',
-    },
-    href: 'https://x.com/officialbois/status/1852280293320999021',
-  },
-  {
-    body: 'Oh this is cool.',
-    author: {
-      name: 'Parker Rex',
-      handle: 'ParkerRex',
-      imageUrl: 'testimonials/9.jpg',
-    },
-    href: 'https://x.com/ParkerRex/status/1861615461676241376',
-  },
-]
-
-function Hero() {
-  return (
-    <div className="relative">
-      <Container className="relative px-8 sm:px-0">
-        <Navbar
-          banner={
-            <Link
-              href="https://github.com/usenocturne/nocturne-image"
-              className="duration-350 flex items-center gap-1 rounded-full bg-gray-950/40 px-3 py-0.5 text-sm/6 font-medium text-white transition ease-in-out data-[hover]:bg-gray-950/30"
-            >
-              Nocturne Public Beta Now Available
-              <ChevronRightIcon className="size-4" />
-            </Link>
-          }
-        />
-      </Container>
-    </div>
-  )
-}
-
-function About() {
-  return (
-    <div className="bg-white">
-      <main className="isolate">
-        <div className="relative isolate -z-10">
-          <svg
-            aria-hidden="true"
-            className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
-          >
-            <defs>
-              <pattern
-                x="50%"
-                y={-1}
-                id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
-                width={200}
-                height={200}
-                patternUnits="userSpaceOnUse"
-              >
-                <path d="M.5 200V.5H200" fill="none" />
-              </pattern>
-            </defs>
-            <svg x="50%" y={-1} className="overflow-visible fill-gray-50">
-              <path
-                d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
-                strokeWidth={0}
-              />
-            </svg>
-            <rect
-              fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
-              width="100%"
-              height="100%"
-              strokeWidth={0}
-            />
-          </svg>
-          <div
-            aria-hidden="true"
-            className="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
-          >
-            <div
-              style={{
-                clipPath:
-                  'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
-              }}
-              className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
-            />
-          </div>
-          <div className="overflow-hidden">
-            <div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
-              <div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
-                <div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
-                  <h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
-                    Giving Hardware a Second Life.
-                  </h1>
-                  <p className="mt-8 text-pretty text-lg text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none">
-                    When Spotify ended Car Thing support, thousands of devices
-                    became paperweights overnight. We're changing that by
-                    creating open source software that transforms these
-                    forgotten devices into powerful car companions, proving that
-                    great hardware deserves a second chance.
-                  </p>
-                </div>
-                <div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
-                  <div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
-                    <div className="relative">
-                      <img
-                        alt=""
-                        src="/about/1.webp"
-                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-                      />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-                    </div>
-                  </div>
-                  <div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
-                    <div className="relative">
-                      <img
-                        alt=""
-                        src="/about/2.webp"
-                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-                      />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-                    </div>
-                    <div className="relative">
-                      <img
-                        alt=""
-                        src="/about/3.webp"
-                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-                      />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-                    </div>
-                  </div>
-                  <div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
-                    <div className="relative">
-                      <img
-                        alt=""
-                        src="/about/4.webp"
-                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-                      />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-                    </div>
-                    <div className="relative">
-                      <img
-                        alt=""
-                        src="/about/5.webp"
-                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-                      />
-                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-2 sm:px-0">
-          <div className="relative hidden sm:block">
-            <img
-              alt=""
-              src="/about/6.webp"
-              className="aspect-[3/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
-            />
-            <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
-          </div>
-          <div className="mx-auto max-w-2xl sm:mt-10 sm:px-0 lg:mx-0 lg:max-w-none">
-            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-              The Mission.
-            </h2>
-            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
-              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
-                <p className="text-lg/8 text-gray-600">
-                  At Nocturne, we believe abandoned hardware doesn't have to
-                  stay abandoned. When Spotify discontinued Car Thing support,
-                  we saw an opportunity to transform disappointment into
-                  innovation. Our mission is to breathe new life into these
-                  devices through open source software, enabling users to keep
-                  their Car Things not just functional, but better than ever.
-                </p>
-                <p className="mt-6 text-lg/8 text-gray-600">
-                  We believe that innovation thrives in unexpected places.
-                  Through open source principles, we empower users to
-                  experiment, customize, and discover new and exciting uses for
-                  their Car Things. Through our mission, we're not just creating
-                  software - we're creating a community. A community of
-                  developers, car enthusiasts, and tinkerers united by a simple
-                  belief: great hardware deserves great software.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="py-12 sm:py-40">
-          <div className="mx-auto grid max-w-7xl gap-12 px-8 sm:px-0 xl:grid-cols-3">
-            <div className="max-w-xl">
-              <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-                The Team.
-              </h2>
-              <p className="mt-6 text-lg/8 text-gray-600">
-                We're builders, creators, and explorers, working together to
-                unlock the full potential of the Car Thing.
-              </p>
-            </div>
-            <ul
-              role="list"
-              className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
-            >
-              {people.map((person) => (
-                <li key={person.name}>
-                  <div className="flex items-center gap-x-6">
-                    <div className="group flex items-center gap-x-6">
-                      <a target="_blank" href={person.href}>
-                        <img
-                          alt=""
-                          src={person.imageUrl}
-                          className="size-16 rounded-full"
-                        />
-                      </a>
-                      <div>
-                        <h3 className="text-base/7 font-semibold tracking-tight text-gray-900">
-                          {person.name}
-                        </h3>
-                        <p className="bg-gradient-to-r from-[#ff8a5b] from-[28%] via-[#fe7e98] via-[70%] to-[#f984ff] bg-clip-text text-sm/6 font-normal text-transparent">
-                          {person.role}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </div>
-        </div>
-
-        <div className="mx-auto mb-32 hidden max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-3 sm:px-0">
-          <div className="mx-auto max-w-2xl sm:col-span-2 sm:px-0 lg:mx-0 lg:max-w-none">
-            <div className="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
-              {testimonials.map((testimonial) => (
-                <div
-                  key={testimonial.author.handle}
-                  className="pt-8 sm:inline-block sm:w-full sm:px-4"
-                >
-                  <a target="_blank" href={testimonial.href}>
-                    <figure className="flex flex-col justify-between rounded-2xl bg-gray-50 p-8 text-sm/6">
-                      <blockquote className="flex-1 text-gray-900">
-                        <p className="h-12 overflow-hidden">{`“${testimonial.body}”`}</p>
-                      </blockquote>
-                      <figcaption className="mt-6 flex items-center gap-x-4">
-                        <img
-                          alt=""
-                          src={testimonial.author.imageUrl}
-                          className="size-10 rounded-full bg-gray-50"
-                        />
-                        <div>
-                          <div className="font-semibold text-gray-900">
-                            {testimonial.author.name}
-                          </div>
-                          <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
-                        </div>
-                      </figcaption>
-                    </figure>
-                  </a>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="mx-auto max-w-2xl sm:col-span-1 sm:px-0 lg:mx-0 lg:max-w-none">
-            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-              The Results.
-            </h2>
-            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
-              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
-                <p className="text-lg/8 text-gray-600">
-                  The positive feedback from our community means a lot to us.
-                  Here are just a few of the kind words people have shared about
-                  our work.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mx-auto mb-20 grid max-w-7xl gap-12 px-8 sm:mb-32 sm:hidden sm:grid-cols-3 sm:px-0">
-          <div className="mx-auto max-w-2xl sm:col-span-1 sm:px-0 lg:mx-0 lg:max-w-none">
-            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-              The Results.
-            </h2>
-            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
-              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
-                <p className="text-lg/8 text-gray-600">
-                  The positive feedback from our community means a lot to us.
-                  Here are just a few of the kind words people have shared about
-                  our work.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="mx-auto max-w-2xl sm:col-span-2 sm:px-0 lg:mx-0 lg:max-w-none">
-            <div className="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
-              {testimonials.map((testimonial) => (
-                <div
-                  key={testimonial.author.handle}
-                  className="pt-8 sm:inline-block sm:w-full sm:px-4"
-                >
-                  <a target="_blank" href={testimonial.href}>
-                    <figure className="flex flex-col justify-between rounded-2xl bg-gray-50 p-8 text-sm/6">
-                      <blockquote className="flex-1 text-gray-900">
-                        <p className="h-12 overflow-hidden">{`“${testimonial.body}”`}</p>
-                      </blockquote>
-                      <figcaption className="mt-6 flex items-center gap-x-4">
-                        <img
-                          alt=""
-                          src={testimonial.author.imageUrl}
-                          className="size-10 rounded-full bg-gray-50"
-                        />
-                        <div>
-                          <div className="font-semibold text-gray-900">
-                            {testimonial.author.name}
-                          </div>
-                          <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
-                        </div>
-                      </figcaption>
-                    </figure>
-                  </a>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  )
 }
 
-export default function Home() {
-  return (
-    <div className="overflow-hidden">
-      <Hero />
-      <main>
-        <div className="mb-6 bg-gradient-to-b from-white from-50% to-gray-100 sm:mb-0">
-          <About />
-        </div>
-      </main>
-      <Footer />
-    </div>
-  )
+export default function Page() {
+  return <AboutPage />
 }
diff --git a/src/app/installation/page.tsx b/src/app/installation/page.tsx
index 1a5a443..a2db78f 100644
--- a/src/app/installation/page.tsx
+++ b/src/app/installation/page.tsx
@@ -1,702 +1,25 @@
-'use client'
-import { Container } from '@/components/container'
-import { Footer } from '@/components/footer'
-import { Gradient } from '@/components/gradient'
-import { Link } from '@/components/link'
-import { Navbar } from '@/components/navbar'
-import { SectionLink } from '@/components/section-link'
-import { Heading, SectionTitle, SubSectionTitle } from '@/components/text'
-import { ChevronRightIcon } from '@heroicons/react/16/solid'
-
-function Hero() {
-  return (
-    <div className="relative">
-      <Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-inset ring-black/5 sm:h-[35rem]" />
-      <Container className="relative px-8 sm:px-0">
-        <Navbar
-          banner={
-            <Link
-              href="https://github.com/usenocturne/nocturne-image"
-              className="duration-350 flex items-center gap-1 rounded-full bg-gray-950/40 px-3 py-0.5 text-sm/6 font-medium text-white transition ease-in-out data-[hover]:bg-gray-950/30"
-            >
-              Nocturne Public Beta Now Available
-              <ChevronRightIcon className="size-4" />
-            </Link>
-          }
-        />
-        <div className="pt-2 sm:pt-24">
-          <h1 className="font-display text-balance text-head/[0.9] font-medium leading-[50px] tracking-tight text-white sm:text-8xl/[0.8] md:text-9xl/[0.8]">
-            Installation Guide
-          </h1>
-          <p className="mt-4 max-w-2xl pb-12 text-xl/7 font-medium text-white/90 sm:mt-8 sm:pb-32 sm:text-2xl/8">
-            Whether you're a tech enthusiast or just getting started, we'll walk
-            you through every step of the process.
-          </p>
-        </div>
-      </Container>
-    </div>
-  )
-}
-
-function InstallationGuide() {
-  return (
-    <Container>
-      <div className="prose prose-lg mx-auto max-w-7xl prose-h2:!mt-10 [&>*]:text-gray-800 [&>div>h2]:!mb-6 [&>h2.text-2xl]:!mt-3 [&>h2.text-3xl]:!mt-12 sm:[&>h2.text-4xl]:!mt-20 [&>h2]:mb-6">
-        <Heading as="h2">Prerequisites</Heading>
-        <p>
-          Unless receiving power through a Linux computer, running Nocturne on
-          your Car Thing requires a host device such as a Raspberry Pi, a
-          microSD card, a microUSB to USB-C cable, a microUSB/your power
-          source's connector, as well as a Spotify Premium account. You will
-          also need{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            superbird-tool
-          </a>{' '}
-          to flash the image regardless of your computer's operating system.
-        </p>
-
-        <Heading as="h2">Installation</Heading>
-        <p>
-          Installing Nocturne differs slightly depending on your operating
-          system.
-        </p>
-
-        <SectionLink id="windows">
-          <SectionTitle as="h2">Windows</SectionTitle>
-        </SectionLink>
-        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
-        <p>
-          Download and open{' '}
-          <a
-            href="https://downloads.raspberrypi.org/imager/imager_latest.exe"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Raspberry Pi Imager
-          </a>
-          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
-          Settings", check "Set hostname", check "Set username and password"
-          (set a password), check "Configure wireless LAN", (enter your
-          network's SSID and password), check "Set local settings". Open the
-          Services tab, enable SSH, and use password authentication. Write the
-          configured OS to your microSD card and insert it into your Raspberry
-          Pi.
-        </p>
-
-        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
-        <p>
-          If you haven't already, download{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            superbird-tool
-          </a>{' '}
-          and run the setup process detailed{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          .
-        </p>
-        <p>
-          Download and unzip the latest image from{' '}
-          <a
-            href="https://github.com/brandonsaldan/nocturne-image/releases"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Releases
-          </a>
-          , connect Car Thing to your computer in USB Mode (hold preset buttons
-          1 and 4 while connecting), and run the following from your command
-          line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the superbird-tool repository
-$ cd C:\\path\\to\\superbird-tool-main
-
-# Find device
-$ python superbird_tool.py --find_device
-
-# Flash Nocturne image, without resetting the data partition 
-$ python superbird_tool.py --dont_reset --restore_device C:\\path\\to\\nocturne-image\\image`}
-          </code>
-        </pre>
-
-        <p>
-          After the flashing completes, connect your Raspberry Pi to your
-          computer, and change directories to the scripts folder.
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the setup-scripts folder
-$ cd \\path\\to\\nocturne-image\\setup-scripts`}
-          </code>
-        </pre>
-
-        <p>
-          There are two different ways to use Nocturne. You can either use it at
-          your desk, or in your car.
-        </p>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne at your desk (Windows)
-        </SubSectionTitle>
-        <p>
-          Connect your Car Thing to the Raspberry Pi and run the following from
-          your command line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_host_rpi.sh to Raspberry Pi
-$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Make setup_host_rpi.sh executable
-$ chmod +x /home/pi/setup_host_rpi.sh
-
-# Execute setup_host_rpi.sh
-$ sudo ./setup_host_rpi.sh
-
-# Reboot Raspberry Pi
-$ sudo reboot`}
-          </code>
-        </pre>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne in your car (Windows)
-        </SubSectionTitle>
-        <p>
-          Connect your Car Thing to the Raspberry Pi and run the following from
-          your command line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_host_rpi.sh to Raspberry Pi
-$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Make setup_host_rpi.sh executable
-$ chmod +x /home/pi/setup_host_rpi.sh
-
-# Execute setup_host_rpi.sh
-$ sudo ./setup_host_rpi.sh
-
-# Reboot Raspberry Pi
-$ sudo reboot`}
-          </code>
-        </pre>
-
-        <p>
-          For car usage, you will also need to run the setup_hotspot.py script:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_hotspot.py to Raspberry Pi
-$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_hotspot.py pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Execute setup_hotspot.py
-$ sudo python3 ./setup_hotspot.py`}
-          </code>
-        </pre>
-
-        <p>
-          The script will ask you to input the name of your hotspot, as well as
-          the password for the hotspot. After the script completes, Nocturne is
-          almost ready to be used in your car!
-        </p>
-
-        <SectionLink id="macos">
-          <SectionTitle as="h2">macOS</SectionTitle>
-        </SectionLink>
-        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
-        <p>
-          Download and open{' '}
-          <a
-            href="https://downloads.raspberrypi.org/imager/imager_latest.dmg"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Raspberry Pi Imager
-          </a>
-          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
-          Settings", check "Set hostname", check "Set username and password"
-          (set a password), check "Configure wireless LAN", (enter your
-          network's SSID and password), check "Set local settings". Open the
-          Services tab, enable SSH, and use password authentication. Write the
-          configured OS to your microSD card and insert it into your Raspberry
-          Pi.
-        </p>
-
-        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
-        <p>
-          If you haven't already, download{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            superbird-tool
-          </a>{' '}
-          and run the setup process detailed{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          .
-        </p>
-
-        <p>
-          Download and unzip the latest image from{' '}
-          <a
-            href="https://github.com/brandonsaldan/nocturne-image/releases"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Releases
-          </a>
-          , connect Car Thing to your computer in USB Mode (hold preset buttons
-          1 and 4 while connecting), and run the following from your command
-          line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the superbird-tool repository
-$ cd /path/to/superbird-tool-main
-
-# Find device
-$ /opt/homebrew/bin/python3 superbird_tool.py --find_device
-
-# Flash Nocturne image, without resetting the data partition 
-$ /opt/homebrew/bin/python3 superbird_tool.py --dont_reset --restore_device /path/to/nocturne-image/image`}
-          </code>
-        </pre>
-
-        <p>
-          After the flashing completes, connect your Raspberry Pi to your
-          computer, and change directories to the scripts folder:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the setup-scripts folder
-$ cd /path/to/nocturne-image/setup-scripts`}
-          </code>
-        </pre>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne at your desk (macOS)
-        </SubSectionTitle>
-        <p>
-          Connect your Car Thing to the Raspberry Pi and run the following from
-          your command line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_host_rpi.sh to Raspberry Pi
-$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Make setup_host_rpi.sh executable
-$ chmod +x /home/pi/setup_host_rpi.sh
-
-# Execute setup_host_rpi.sh
-$ sudo ./setup_host_rpi.sh
-
-# Reboot Raspberry Pi
-$ sudo reboot`}
-          </code>
-        </pre>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne in your car (macOS)
-        </SubSectionTitle>
-        <p>
-          Connect your Car Thing to the Raspberry Pi and run the following from
-          your command line:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_host_rpi.sh to Raspberry Pi
-$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Make setup_host_rpi.sh executable
-$ chmod +x /home/pi/setup_host_rpi.sh
-
-# Execute setup_host_rpi.sh
-$ sudo ./setup_host_rpi.sh
-
-# Reboot Raspberry Pi
-$ sudo reboot`}
-          </code>
-        </pre>
-
-        <p>
-          For car usage on macOS, you will also need to run the setup_hotspot.py
-          script:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_hotspot.py to Raspberry Pi
-$ scp /path/to/nocturne-image/setup-scripts/setup_hotspot.py pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Execute setup_hotspot.py
-$ sudo python3 ./setup_hotspot.py`}
-          </code>
-        </pre>
-
-        <SectionLink id="linux">
-          <SectionTitle as="h2">Linux</SectionTitle>
-        </SectionLink>
-        <p>
-          A Raspberry Pi is not required on Linux, unless you want to use
-          Nocturne in your car.
-        </p>
-
-        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
-        <p>
-          Download and open{' '}
-          <a
-            href="https://downloads.raspberrypi.org/imager/imager_latest.dmg"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Raspberry Pi Imager
-          </a>
-          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
-          Settings", check "Set hostname", check "Set username and password"
-          (set a password), check "Configure wireless LAN", (enter your
-          network's SSID and password), check "Set local settings". Open the
-          Services tab, enable SSH, and use password authentication. Write the
-          configured OS to your microSD card and insert it into your Raspberry
-          Pi.
-        </p>
-
-        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
-        <p>
-          If you haven't already, download{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            superbird-tool
-          </a>{' '}
-          and run the setup process detailed{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          .
-        </p>
-
-        <p>
-          Download and unzip the latest image from{' '}
-          <a
-            href="https://github.com/brandonsaldan/nocturne-image/releases"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Releases
-          </a>
-          , connect Car Thing to your computer in USB Mode (hold preset buttons
-          1 and 4 while connecting), and run the following from your command
-          line:
-        </p>
-
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the superbird-tool repository
-$ cd /path/to/superbird-tool-main
-
-# Find device
-$ sudo python3 ./superbird_tool.py --find_device
-
-# Flash Nocturne image, without resetting the data partition 
-$ sudo python3 ./superbird_tool.py --dont_reset --restore_device /path/to/nocturne-image/image`}
-          </code>
-        </pre>
-
-        <p>
-          After the flashing completes, unplug and replug your Car Thing, and
-          change directories to the scripts folder:
-        </p>
-
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Go into the setup-scripts folder
-$ cd /path/to/nocturne-image/setup-scripts`}
-          </code>
-        </pre>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne at your desk (Linux)
-        </SubSectionTitle>
-        <p>
-          At this point, there are two different scripts that you can use. The
-          first one,{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            setup_host_apt.sh
-          </code>
-          , is used on Linux distros that utilize apt as it's package manager.
-          The second one,{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            setup_host_pacman.sh
-          </code>
-          , is used on Linux distros that utilize Pacman as it's package
-          manager. If you use Pacman, replace
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            setup_host_apt.sh
-          </code>{' '}
-          in the following commands with
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            setup_host_pacman.sh
-          </code>{' '}
-          to continue with setup.
-        </p>
-        <p>
-          It is important to note that{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            setup_host_pacman.sh
-          </code>{' '}
-          has not been tested very well, so it may not work as intended for
-          setup.
-        </p>
-
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Make setup_host_apt.sh executable
-$ chmod +x setup_host_apt.sh
-
-# Execute setup_host_apt.sh
-$ sudo ./setup_host_apt.sh`}
-          </code>
-        </pre>
-
-        <SubSectionTitle as="h2">
-          Using Nocturne in your car (Linux)
-        </SubSectionTitle>
-        <p>
-          To use Nocturne in your car, you will need to have a Raspberry Pi to
-          provide network.
-        </p>
-        <p>
-          Connect your Raspberry Pi to your computer, your Car Thing to the
-          Raspberry Pi, and run the following from your command line:
-        </p>
-
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`# Transfer setup_host_rpi.sh to Raspberry Pi
-$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
-
-# SSH into Raspberry Pi
-$ ssh pi@raspberrypi.local
-
-# Make setup_host_rpi.sh executable
-$ chmod +x /home/pi/setup_host_rpi.sh
-
-# Execute setup_host_rpi.sh
-$ sudo ./setup_host_rpi.sh
-
-# Reboot Raspberry Pi
-$ sudo reboot`}
-          </code>
-        </pre>
-
-        <p>
-          Continue setting up Nocturne by following the steps outlined{' '}
-          <a
-            href="https://github.com/usenocturne/nocturne-ui?tab=readme-ov-file#spotify-developer-setup"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          . Then, select Login with Phone, scan the QR Code, and enter the
-          Client ID and the Client Secret, and login to Spotify. After logging
-          in, you are ready to use Nocturne!
-        </p>
-
-        <SectionLink id="troubleshooting">
-          <Heading as="h2">Troubleshooting</Heading>
-        </SectionLink>
-
-        <SubSectionTitle as="h2">
-          superbird-tool: USBTimeoutError
-        </SubSectionTitle>
-        <p>
-          If you are running into this error while flashing your Car Thing, try
-          using the option{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            --slow_burn
-          </code>{' '}
-          or{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            --slower_burn
-          </code>{' '}
-          in the command used to flash.
-        </p>
-        <p>This will look like the following:</p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`$ python ./superbird_tool.py --dont_reset --slow_burn --restore_device /path/to/nocturne/image`}
-          </code>
-        </pre>
-        <p>
-          If this still does not resolve the error, then you will have to edit
-          line 164 (the one that says{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            MULTIPLIER = 8
-          </code>
-          ) in{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            superbird_device.py
-          </code>
-        </p>
-        <p>
-          If your flashing is failing at{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            executing bulkcmd: "amlmmc part 1"
-          </code>
-          , then try running the following command manually. This may take a few
-          tries to succeed:
-        </p>
-        <pre className="rounded-lg bg-gray-100 p-4">
-          <code className="language-bash">
-            {`$ python ./superbird_tool.py --bulkcmd "amlmmc part 1"`}
-          </code>
-        </pre>
-        <p>
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            python
-          </code>{' '}
-          in the above commands depends on what OS you are running:
-        </p>
-        <ul className="list-disc pl-6">
-          <li>
-            For Windows, it will be{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-              python
-            </code>
-          </li>
-          <li>
-            For macOS, it will be{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-              /opt/homebrew/bin/python3
-            </code>
-          </li>
-          <li>
-            For Linux, it will be{' '}
-            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-              python3
-            </code>
-          </li>
-        </ul>
-
-        <SubSectionTitle as="h2">
-          superbird-tool: "bulkcmd timed out or failed!" after system_b
-        </SubSectionTitle>
-        <p>
-          If you are running into this error while flashing your Car Thing, you
-          must replace the{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            superbird_partitions.py
-          </code>{' '}
-          file in the
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            superbird-tool
-          </code>{' '}
-          folder with the one provided in this repo.
-        </p>
-        <p>
-          This error occurs since some devices have a smaller data partition,
-          causing the error when attempting to flash the data partition.
-        </p>
-
-        <SubSectionTitle as="h2">
-          superbird-tool: AssertionError
-        </SubSectionTitle>
-        <p>
-          If you are running into this error while flashing your Car Thing, you
-          must install the{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            libusbk
-          </code>{' '}
-          driver in Zadig. You can do this with the steps found{' '}
-          <a
-            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#windows"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          , and replacing{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            libusb-win32
-          </code>{' '}
-          with{' '}
-          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
-            libusbk
-          </code>{' '}
-          instead.
-        </p>
-
-        <p>
-          If your issue is not listed here, or if you need help, join our{' '}
-          <a
-            href="https://discord.gg/GTP9AawHPt"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            Discord server
-          </a>{' '}
-          for assistance.
-        </p>
-
-        <SectionLink id="download">
-          <Heading as="h2">Download</Heading>
-        </SectionLink>
-        <p>
-          You can download the latest flashable version of Nocturne for Windows,
-          macOS and Linux{' '}
-          <a
-            href="https://github.com/brandonsaldan/nocturne-image/releases/latest"
-            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
-          >
-            here
-          </a>
-          .
-        </p>
-      </div>
-    </Container>
-  )
+import InstallationPage from '@/components/installation-page'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Installation Guide',
+  description:
+    'Step-by-step instructions for installing Nocturne on your Car Thing. Learn how to set up Nocturne for both desk and car use, with detailed guides for Windows, macOS, and Linux.',
+  alternates: {
+    canonical: 'https://usenocturne.com/installation',
+  },
+  keywords: [
+    'Nocturne installation',
+    'Car Thing setup',
+    'Car Thing software',
+    'Car Thing hack',
+    'Spotify Car Thing mod',
+    'Car Thing Linux setup',
+    'Car Thing Windows setup',
+    'Car Thing macOS setup',
+  ],
 }
 
-export default function Home() {
-  return (
-    <div className="overflow-hidden">
-      <Hero />
-      <main>
-        <div className="bg-gradient-to-b from-white from-50% to-gray-100 pb-20">
-          <InstallationGuide />
-        </div>
-      </main>
-      <Footer />
-    </div>
-  )
+export default function Page() {
+  return <InstallationPage />
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 401e2e8..2efb4a3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
     'When Spotify ended support, we created a new beginning. Join our growing community of users giving their Car Thing a second life with our free, open source solution.',
   metadataBase: new URL('https://usenocturne.com/'),
   alternates: {
-    canonical: '/',
+    canonical: 'https://usenocturne.com',
   },
   keywords: [
     'Nocturne',
diff --git a/src/app/lib/getLastModified.ts b/src/app/lib/getLastModified.ts
index 2393ca3..427d64e 100644
--- a/src/app/lib/getLastModified.ts
+++ b/src/app/lib/getLastModified.ts
@@ -38,7 +38,6 @@ export async function getLatestCommitDate() {
     const latestDate = new Date(latestTimestamp)
 
     const formattedDate = latestDate.toISOString().split('T')[0]
-    console.log('Formatted date for Schema.org:', formattedDate)
     return formattedDate
   } catch (error) {
     console.error('Error fetching commit dates:', error)
diff --git a/src/components/about-page.tsx b/src/components/about-page.tsx
new file mode 100644
index 0000000..dc73d4b
--- /dev/null
+++ b/src/components/about-page.tsx
@@ -0,0 +1,444 @@
+'use client'
+import { Navbar } from '@/components/about-navbar'
+import { Container } from '@/components/container'
+import { Footer } from '@/components/footer'
+import { Link } from '@/components/link'
+import { ChevronRightIcon } from '@heroicons/react/16/solid'
+
+const people = [
+  {
+    name: 'Brandon Saldan',
+    role: 'Software Engineer',
+    imageUrl: 'https://usenocturne.com/map/1.jpg',
+    href: 'https://github.com/brandonsaldan',
+  },
+  {
+    name: 'bbaovanc',
+    role: 'Software Engineer',
+    imageUrl: 'https://usenocturne.com/map/3.jpg',
+    href: 'https://github.com/bbaovanc',
+  },
+  {
+    name: 'Dominic Frye',
+    role: 'Software Engineer',
+    imageUrl: 'https://usenocturne.com/map/2.jpg',
+    href: 'https://github.com/itsnebulalol',
+  },
+  {
+    name: 'shadow',
+    role: 'Software Engineer',
+    imageUrl: 'https://usenocturne.com/map/4.jpg',
+    href: 'https://github.com/68p',
+  },
+]
+
+const testimonials = [
+  {
+    body: 'Thank you for helping revive this device!',
+    author: {
+      name: 'Jade Robbins',
+      handle: 'jaderobbins',
+      imageUrl: 'testimonials/1.jpg',
+    },
+    href: 'https://x.com/jaderobbins/status/1861117484927197615',
+  },
+  {
+    body: 'This is awesome thank you!',
+    author: {
+      name: 'Alex Fife',
+      handle: 'alextfife',
+      imageUrl: 'testimonials/2.jpg',
+    },
+    href: 'https://x.com/alextfife/status/1861080147954180142',
+  },
+  {
+    body: 'These people are doing amazing work.',
+    author: {
+      name: 'Jeff Xu',
+      handle: 'JSandals1',
+      imageUrl: 'testimonials/3.jpg',
+    },
+    href: 'https://x.com/JSandals1/status/1861238960548163770',
+  },
+  {
+    body: 'I love when people take matters into their own hands.',
+    author: {
+      name: 'Ray Wong',
+      handle: 'raywongy',
+      imageUrl: 'testimonials/4.jpg',
+    },
+    href: 'https://x.com/raywongy/status/1861248921877569892',
+  },
+  {
+    body: 'Sick!!!!!!!!!',
+    author: {
+      name: 'alistair',
+      handle: 'alistaiir',
+      imageUrl: 'testimonials/5.jpg',
+    },
+    href: 'https://x.com/alistaiir/status/1856887872370217401',
+  },
+  {
+    body: 'So excited for this!',
+    author: {
+      name: 'Jim England',
+      handle: 'JimEngland',
+      imageUrl: 'testimonials/6.jpg',
+    },
+    href: 'https://x.com/JimEngland/status/1852470793684635941',
+  },
+  {
+    body: 'lfg, this is the news i’ve been waiting for!!!',
+    author: {
+      name: 'janniks',
+      handle: 'janniksco',
+      imageUrl: 'testimonials/7.jpg',
+    },
+    href: 'https://x.com/janniksco/status/1852361766283444334',
+  },
+  {
+    body: 'Incredible stuff!',
+    author: {
+      name: 'brian',
+      handle: 'officialbois',
+      imageUrl: 'testimonials/8.jpg',
+    },
+    href: 'https://x.com/officialbois/status/1852280293320999021',
+  },
+  {
+    body: 'Oh this is cool.',
+    author: {
+      name: 'Parker Rex',
+      handle: 'ParkerRex',
+      imageUrl: 'testimonials/9.jpg',
+    },
+    href: 'https://x.com/ParkerRex/status/1861615461676241376',
+  },
+]
+
+function Hero() {
+  return (
+    <div className="relative">
+      <Container className="relative px-8 sm:px-0">
+        <Navbar
+          banner={
+            <Link
+              href="https://github.com/usenocturne/nocturne-image"
+              className="duration-350 flex items-center gap-1 rounded-full bg-gray-950/40 px-3 py-0.5 text-sm/6 font-medium text-white transition ease-in-out data-[hover]:bg-gray-950/30"
+            >
+              Nocturne Public Beta Now Available
+              <ChevronRightIcon className="size-4" />
+            </Link>
+          }
+        />
+      </Container>
+    </div>
+  )
+}
+
+function About() {
+  return (
+    <div className="bg-white">
+      <main className="isolate">
+        <div className="relative isolate -z-10">
+          <svg
+            aria-hidden="true"
+            className="absolute inset-x-0 top-0 -z-10 h-[64rem] w-full stroke-gray-200 [mask-image:radial-gradient(32rem_32rem_at_center,white,transparent)]"
+          >
+            <defs>
+              <pattern
+                x="50%"
+                y={-1}
+                id="1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84"
+                width={200}
+                height={200}
+                patternUnits="userSpaceOnUse"
+              >
+                <path d="M.5 200V.5H200" fill="none" />
+              </pattern>
+            </defs>
+            <svg x="50%" y={-1} className="overflow-visible fill-gray-50">
+              <path
+                d="M-200 0h201v201h-201Z M600 0h201v201h-201Z M-400 600h201v201h-201Z M200 800h201v201h-201Z"
+                strokeWidth={0}
+              />
+            </svg>
+            <rect
+              fill="url(#1f932ae7-37de-4c0a-a8b0-a6e3b4d44b84)"
+              width="100%"
+              height="100%"
+              strokeWidth={0}
+            />
+          </svg>
+          <div
+            aria-hidden="true"
+            className="absolute left-1/2 right-0 top-0 -z-10 -ml-24 transform-gpu overflow-hidden blur-3xl lg:ml-24 xl:ml-48"
+          >
+            <div
+              style={{
+                clipPath:
+                  'polygon(63.1% 29.5%, 100% 17.1%, 76.6% 3%, 48.4% 0%, 44.6% 4.7%, 54.5% 25.3%, 59.8% 49%, 55.2% 57.8%, 44.4% 57.2%, 27.8% 47.9%, 35.1% 81.5%, 0% 97.7%, 39.2% 100%, 35.2% 81.4%, 97.2% 52.8%, 63.1% 29.5%)',
+              }}
+              className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30"
+            />
+          </div>
+          <div className="overflow-hidden">
+            <div className="mx-auto max-w-7xl pb-20 pt-12 sm:pb-32 sm:pt-60 lg:pt-8">
+              <div className="mx-auto max-w-2xl gap-x-14 lg:mx-0 lg:flex lg:max-w-none lg:items-center">
+                <div className="relative w-full px-8 sm:px-0 lg:max-w-xl lg:shrink-0 xl:max-w-2xl">
+                  <h1 className="text-pretty text-5xl font-semibold tracking-tight text-gray-900 sm:text-7xl">
+                    Giving Hardware a Second Life.
+                  </h1>
+                  <p className="mt-8 text-pretty text-lg text-gray-500 sm:max-w-md sm:text-xl/8 lg:max-w-none">
+                    When Spotify ended Car Thing support, thousands of devices
+                    became paperweights overnight. We're changing that by
+                    creating open source software that transforms these
+                    forgotten devices into powerful car companions, proving that
+                    great hardware deserves a second chance.
+                  </p>
+                </div>
+                <div className="mt-14 flex justify-end gap-8 sm:-mt-44 sm:justify-start sm:pl-20 lg:mt-0 lg:pl-0">
+                  <div className="ml-auto w-44 flex-none space-y-8 pt-32 sm:ml-0 sm:pt-80 lg:order-last lg:pt-36 xl:order-none xl:pt-80">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        src="/about/1.webp"
+                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                      />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+                    </div>
+                  </div>
+                  <div className="mr-auto w-44 flex-none space-y-8 sm:mr-0 sm:pt-52 lg:pt-36">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        src="/about/2.webp"
+                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                      />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+                    </div>
+                    <div className="relative">
+                      <img
+                        alt=""
+                        src="/about/3.webp"
+                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                      />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+                    </div>
+                  </div>
+                  <div className="w-44 flex-none space-y-8 pt-32 sm:pt-0">
+                    <div className="relative">
+                      <img
+                        alt=""
+                        src="/about/4.webp"
+                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                      />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+                    </div>
+                    <div className="relative">
+                      <img
+                        alt=""
+                        src="/about/5.webp"
+                        className="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+                      />
+                      <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-2 sm:px-0">
+          <div className="relative hidden sm:block">
+            <img
+              alt=""
+              src="/about/6.webp"
+              className="aspect-[3/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
+            />
+            <div className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gray-900/10" />
+          </div>
+          <div className="mx-auto max-w-2xl sm:mt-10 sm:px-0 lg:mx-0 lg:max-w-none">
+            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+              The Mission.
+            </h2>
+            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
+              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
+                <p className="text-lg/8 text-gray-600">
+                  At Nocturne, we believe abandoned hardware doesn't have to
+                  stay abandoned. When Spotify discontinued Car Thing support,
+                  we saw an opportunity to transform disappointment into
+                  innovation. Our mission is to breathe new life into these
+                  devices through open source software, enabling users to keep
+                  their Car Things not just functional, but better than ever.
+                </p>
+                <p className="mt-6 text-lg/8 text-gray-600">
+                  We believe that innovation thrives in unexpected places.
+                  Through open source principles, we empower users to
+                  experiment, customize, and discover new and exciting uses for
+                  their Car Things. Through our mission, we're not just creating
+                  software - we're creating a community. A community of
+                  developers, car enthusiasts, and tinkerers united by a simple
+                  belief: great hardware deserves great software.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="py-12 sm:py-40">
+          <div className="mx-auto grid max-w-7xl gap-12 px-8 sm:px-0 xl:grid-cols-3">
+            <div className="max-w-xl">
+              <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                The Team.
+              </h2>
+              <p className="mt-6 text-lg/8 text-gray-600">
+                We're builders, creators, and explorers, working together to
+                unlock the full potential of the Car Thing.
+              </p>
+            </div>
+            <ul
+              role="list"
+              className="grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2"
+            >
+              {people.map((person) => (
+                <li key={person.name}>
+                  <div className="flex items-center gap-x-6">
+                    <div className="group flex items-center gap-x-6">
+                      <a target="_blank" href={person.href}>
+                        <img
+                          alt=""
+                          src={person.imageUrl}
+                          className="size-16 rounded-full"
+                        />
+                      </a>
+                      <div>
+                        <h3 className="text-base/7 font-semibold tracking-tight text-gray-900">
+                          {person.name}
+                        </h3>
+                        <p className="bg-gradient-to-r from-[#ff8a5b] from-[28%] via-[#fe7e98] via-[70%] to-[#f984ff] bg-clip-text text-sm/6 font-normal text-transparent">
+                          {person.role}
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+
+        <div className="mx-auto mb-32 hidden max-w-7xl gap-20 px-8 sm:grid sm:grid-cols-3 sm:px-0">
+          <div className="mx-auto max-w-2xl sm:col-span-2 sm:px-0 lg:mx-0 lg:max-w-none">
+            <div className="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
+              {testimonials.map((testimonial) => (
+                <div
+                  key={testimonial.author.handle}
+                  className="pt-8 sm:inline-block sm:w-full sm:px-4"
+                >
+                  <a target="_blank" href={testimonial.href}>
+                    <figure className="flex flex-col justify-between rounded-2xl bg-gray-50 p-8 text-sm/6">
+                      <blockquote className="flex-1 text-gray-900">
+                        <p className="h-12 overflow-hidden">{`“${testimonial.body}”`}</p>
+                      </blockquote>
+                      <figcaption className="mt-6 flex items-center gap-x-4">
+                        <img
+                          alt=""
+                          src={testimonial.author.imageUrl}
+                          className="size-10 rounded-full bg-gray-50"
+                        />
+                        <div>
+                          <div className="font-semibold text-gray-900">
+                            {testimonial.author.name}
+                          </div>
+                          <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
+                        </div>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="mx-auto max-w-2xl sm:col-span-1 sm:px-0 lg:mx-0 lg:max-w-none">
+            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+              The Results.
+            </h2>
+            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
+              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
+                <p className="text-lg/8 text-gray-600">
+                  The positive feedback from our community means a lot to us.
+                  Here are just a few of the kind words people have shared about
+                  our work.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="mx-auto mb-20 grid max-w-7xl gap-12 px-8 sm:mb-32 sm:hidden sm:grid-cols-3 sm:px-0">
+          <div className="mx-auto max-w-2xl sm:col-span-1 sm:px-0 lg:mx-0 lg:max-w-none">
+            <h2 className="text-pretty text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+              The Results.
+            </h2>
+            <div className="mt-6 flex flex-col gap-x-8 gap-y-8 lg:flex-row">
+              <div className="lg:w-full lg:max-w-2xl lg:flex-auto">
+                <p className="text-lg/8 text-gray-600">
+                  The positive feedback from our community means a lot to us.
+                  Here are just a few of the kind words people have shared about
+                  our work.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="mx-auto max-w-2xl sm:col-span-2 sm:px-0 lg:mx-0 lg:max-w-none">
+            <div className="-mt-8 sm:-mx-4 sm:columns-2 sm:text-[0] lg:columns-3">
+              {testimonials.map((testimonial) => (
+                <div
+                  key={testimonial.author.handle}
+                  className="pt-8 sm:inline-block sm:w-full sm:px-4"
+                >
+                  <a target="_blank" href={testimonial.href}>
+                    <figure className="flex flex-col justify-between rounded-2xl bg-gray-50 p-8 text-sm/6">
+                      <blockquote className="flex-1 text-gray-900">
+                        <p className="h-12 overflow-hidden">{`“${testimonial.body}”`}</p>
+                      </blockquote>
+                      <figcaption className="mt-6 flex items-center gap-x-4">
+                        <img
+                          alt=""
+                          src={testimonial.author.imageUrl}
+                          className="size-10 rounded-full bg-gray-50"
+                        />
+                        <div>
+                          <div className="font-semibold text-gray-900">
+                            {testimonial.author.name}
+                          </div>
+                          <div className="text-gray-600">{`@${testimonial.author.handle}`}</div>
+                        </div>
+                      </figcaption>
+                    </figure>
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default function Home() {
+  return (
+    <div className="overflow-hidden">
+      <Hero />
+      <main>
+        <div className="mb-6 bg-gradient-to-b from-white from-50% to-gray-100 sm:mb-0">
+          <About />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}
diff --git a/src/components/installation-page.tsx b/src/components/installation-page.tsx
new file mode 100644
index 0000000..1a5a443
--- /dev/null
+++ b/src/components/installation-page.tsx
@@ -0,0 +1,702 @@
+'use client'
+import { Container } from '@/components/container'
+import { Footer } from '@/components/footer'
+import { Gradient } from '@/components/gradient'
+import { Link } from '@/components/link'
+import { Navbar } from '@/components/navbar'
+import { SectionLink } from '@/components/section-link'
+import { Heading, SectionTitle, SubSectionTitle } from '@/components/text'
+import { ChevronRightIcon } from '@heroicons/react/16/solid'
+
+function Hero() {
+  return (
+    <div className="relative">
+      <Gradient className="absolute inset-2 bottom-0 rounded-4xl ring-1 ring-inset ring-black/5 sm:h-[35rem]" />
+      <Container className="relative px-8 sm:px-0">
+        <Navbar
+          banner={
+            <Link
+              href="https://github.com/usenocturne/nocturne-image"
+              className="duration-350 flex items-center gap-1 rounded-full bg-gray-950/40 px-3 py-0.5 text-sm/6 font-medium text-white transition ease-in-out data-[hover]:bg-gray-950/30"
+            >
+              Nocturne Public Beta Now Available
+              <ChevronRightIcon className="size-4" />
+            </Link>
+          }
+        />
+        <div className="pt-2 sm:pt-24">
+          <h1 className="font-display text-balance text-head/[0.9] font-medium leading-[50px] tracking-tight text-white sm:text-8xl/[0.8] md:text-9xl/[0.8]">
+            Installation Guide
+          </h1>
+          <p className="mt-4 max-w-2xl pb-12 text-xl/7 font-medium text-white/90 sm:mt-8 sm:pb-32 sm:text-2xl/8">
+            Whether you're a tech enthusiast or just getting started, we'll walk
+            you through every step of the process.
+          </p>
+        </div>
+      </Container>
+    </div>
+  )
+}
+
+function InstallationGuide() {
+  return (
+    <Container>
+      <div className="prose prose-lg mx-auto max-w-7xl prose-h2:!mt-10 [&>*]:text-gray-800 [&>div>h2]:!mb-6 [&>h2.text-2xl]:!mt-3 [&>h2.text-3xl]:!mt-12 sm:[&>h2.text-4xl]:!mt-20 [&>h2]:mb-6">
+        <Heading as="h2">Prerequisites</Heading>
+        <p>
+          Unless receiving power through a Linux computer, running Nocturne on
+          your Car Thing requires a host device such as a Raspberry Pi, a
+          microSD card, a microUSB to USB-C cable, a microUSB/your power
+          source's connector, as well as a Spotify Premium account. You will
+          also need{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            superbird-tool
+          </a>{' '}
+          to flash the image regardless of your computer's operating system.
+        </p>
+
+        <Heading as="h2">Installation</Heading>
+        <p>
+          Installing Nocturne differs slightly depending on your operating
+          system.
+        </p>
+
+        <SectionLink id="windows">
+          <SectionTitle as="h2">Windows</SectionTitle>
+        </SectionLink>
+        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
+        <p>
+          Download and open{' '}
+          <a
+            href="https://downloads.raspberrypi.org/imager/imager_latest.exe"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Raspberry Pi Imager
+          </a>
+          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
+          Settings", check "Set hostname", check "Set username and password"
+          (set a password), check "Configure wireless LAN", (enter your
+          network's SSID and password), check "Set local settings". Open the
+          Services tab, enable SSH, and use password authentication. Write the
+          configured OS to your microSD card and insert it into your Raspberry
+          Pi.
+        </p>
+
+        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
+        <p>
+          If you haven't already, download{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            superbird-tool
+          </a>{' '}
+          and run the setup process detailed{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          .
+        </p>
+        <p>
+          Download and unzip the latest image from{' '}
+          <a
+            href="https://github.com/brandonsaldan/nocturne-image/releases"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Releases
+          </a>
+          , connect Car Thing to your computer in USB Mode (hold preset buttons
+          1 and 4 while connecting), and run the following from your command
+          line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the superbird-tool repository
+$ cd C:\\path\\to\\superbird-tool-main
+
+# Find device
+$ python superbird_tool.py --find_device
+
+# Flash Nocturne image, without resetting the data partition 
+$ python superbird_tool.py --dont_reset --restore_device C:\\path\\to\\nocturne-image\\image`}
+          </code>
+        </pre>
+
+        <p>
+          After the flashing completes, connect your Raspberry Pi to your
+          computer, and change directories to the scripts folder.
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the setup-scripts folder
+$ cd \\path\\to\\nocturne-image\\setup-scripts`}
+          </code>
+        </pre>
+
+        <p>
+          There are two different ways to use Nocturne. You can either use it at
+          your desk, or in your car.
+        </p>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne at your desk (Windows)
+        </SubSectionTitle>
+        <p>
+          Connect your Car Thing to the Raspberry Pi and run the following from
+          your command line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_host_rpi.sh to Raspberry Pi
+$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Make setup_host_rpi.sh executable
+$ chmod +x /home/pi/setup_host_rpi.sh
+
+# Execute setup_host_rpi.sh
+$ sudo ./setup_host_rpi.sh
+
+# Reboot Raspberry Pi
+$ sudo reboot`}
+          </code>
+        </pre>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne in your car (Windows)
+        </SubSectionTitle>
+        <p>
+          Connect your Car Thing to the Raspberry Pi and run the following from
+          your command line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_host_rpi.sh to Raspberry Pi
+$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Make setup_host_rpi.sh executable
+$ chmod +x /home/pi/setup_host_rpi.sh
+
+# Execute setup_host_rpi.sh
+$ sudo ./setup_host_rpi.sh
+
+# Reboot Raspberry Pi
+$ sudo reboot`}
+          </code>
+        </pre>
+
+        <p>
+          For car usage, you will also need to run the setup_hotspot.py script:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_hotspot.py to Raspberry Pi
+$ scp \\path\\to\\nocturne-image\\setup-scripts\\setup_hotspot.py pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Execute setup_hotspot.py
+$ sudo python3 ./setup_hotspot.py`}
+          </code>
+        </pre>
+
+        <p>
+          The script will ask you to input the name of your hotspot, as well as
+          the password for the hotspot. After the script completes, Nocturne is
+          almost ready to be used in your car!
+        </p>
+
+        <SectionLink id="macos">
+          <SectionTitle as="h2">macOS</SectionTitle>
+        </SectionLink>
+        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
+        <p>
+          Download and open{' '}
+          <a
+            href="https://downloads.raspberrypi.org/imager/imager_latest.dmg"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Raspberry Pi Imager
+          </a>
+          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
+          Settings", check "Set hostname", check "Set username and password"
+          (set a password), check "Configure wireless LAN", (enter your
+          network's SSID and password), check "Set local settings". Open the
+          Services tab, enable SSH, and use password authentication. Write the
+          configured OS to your microSD card and insert it into your Raspberry
+          Pi.
+        </p>
+
+        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
+        <p>
+          If you haven't already, download{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            superbird-tool
+          </a>{' '}
+          and run the setup process detailed{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          .
+        </p>
+
+        <p>
+          Download and unzip the latest image from{' '}
+          <a
+            href="https://github.com/brandonsaldan/nocturne-image/releases"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Releases
+          </a>
+          , connect Car Thing to your computer in USB Mode (hold preset buttons
+          1 and 4 while connecting), and run the following from your command
+          line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the superbird-tool repository
+$ cd /path/to/superbird-tool-main
+
+# Find device
+$ /opt/homebrew/bin/python3 superbird_tool.py --find_device
+
+# Flash Nocturne image, without resetting the data partition 
+$ /opt/homebrew/bin/python3 superbird_tool.py --dont_reset --restore_device /path/to/nocturne-image/image`}
+          </code>
+        </pre>
+
+        <p>
+          After the flashing completes, connect your Raspberry Pi to your
+          computer, and change directories to the scripts folder:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the setup-scripts folder
+$ cd /path/to/nocturne-image/setup-scripts`}
+          </code>
+        </pre>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne at your desk (macOS)
+        </SubSectionTitle>
+        <p>
+          Connect your Car Thing to the Raspberry Pi and run the following from
+          your command line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_host_rpi.sh to Raspberry Pi
+$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Make setup_host_rpi.sh executable
+$ chmod +x /home/pi/setup_host_rpi.sh
+
+# Execute setup_host_rpi.sh
+$ sudo ./setup_host_rpi.sh
+
+# Reboot Raspberry Pi
+$ sudo reboot`}
+          </code>
+        </pre>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne in your car (macOS)
+        </SubSectionTitle>
+        <p>
+          Connect your Car Thing to the Raspberry Pi and run the following from
+          your command line:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_host_rpi.sh to Raspberry Pi
+$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Make setup_host_rpi.sh executable
+$ chmod +x /home/pi/setup_host_rpi.sh
+
+# Execute setup_host_rpi.sh
+$ sudo ./setup_host_rpi.sh
+
+# Reboot Raspberry Pi
+$ sudo reboot`}
+          </code>
+        </pre>
+
+        <p>
+          For car usage on macOS, you will also need to run the setup_hotspot.py
+          script:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_hotspot.py to Raspberry Pi
+$ scp /path/to/nocturne-image/setup-scripts/setup_hotspot.py pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Execute setup_hotspot.py
+$ sudo python3 ./setup_hotspot.py`}
+          </code>
+        </pre>
+
+        <SectionLink id="linux">
+          <SectionTitle as="h2">Linux</SectionTitle>
+        </SectionLink>
+        <p>
+          A Raspberry Pi is not required on Linux, unless you want to use
+          Nocturne in your car.
+        </p>
+
+        <SubSectionTitle as="h2">Raspberry Pi Setup</SubSectionTitle>
+        <p>
+          Download and open{' '}
+          <a
+            href="https://downloads.raspberrypi.org/imager/imager_latest.dmg"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Raspberry Pi Imager
+          </a>
+          , select Raspberry Pi OS (Legacy, 64-bit) Lite, select "Edit
+          Settings", check "Set hostname", check "Set username and password"
+          (set a password), check "Configure wireless LAN", (enter your
+          network's SSID and password), check "Set local settings". Open the
+          Services tab, enable SSH, and use password authentication. Write the
+          configured OS to your microSD card and insert it into your Raspberry
+          Pi.
+        </p>
+
+        <SubSectionTitle as="h2">Flashing Process</SubSectionTitle>
+        <p>
+          If you haven't already, download{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            superbird-tool
+          </a>{' '}
+          and run the setup process detailed{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#supported-platforms"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          .
+        </p>
+
+        <p>
+          Download and unzip the latest image from{' '}
+          <a
+            href="https://github.com/brandonsaldan/nocturne-image/releases"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Releases
+          </a>
+          , connect Car Thing to your computer in USB Mode (hold preset buttons
+          1 and 4 while connecting), and run the following from your command
+          line:
+        </p>
+
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the superbird-tool repository
+$ cd /path/to/superbird-tool-main
+
+# Find device
+$ sudo python3 ./superbird_tool.py --find_device
+
+# Flash Nocturne image, without resetting the data partition 
+$ sudo python3 ./superbird_tool.py --dont_reset --restore_device /path/to/nocturne-image/image`}
+          </code>
+        </pre>
+
+        <p>
+          After the flashing completes, unplug and replug your Car Thing, and
+          change directories to the scripts folder:
+        </p>
+
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Go into the setup-scripts folder
+$ cd /path/to/nocturne-image/setup-scripts`}
+          </code>
+        </pre>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne at your desk (Linux)
+        </SubSectionTitle>
+        <p>
+          At this point, there are two different scripts that you can use. The
+          first one,{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            setup_host_apt.sh
+          </code>
+          , is used on Linux distros that utilize apt as it's package manager.
+          The second one,{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            setup_host_pacman.sh
+          </code>
+          , is used on Linux distros that utilize Pacman as it's package
+          manager. If you use Pacman, replace
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            setup_host_apt.sh
+          </code>{' '}
+          in the following commands with
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            setup_host_pacman.sh
+          </code>{' '}
+          to continue with setup.
+        </p>
+        <p>
+          It is important to note that{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            setup_host_pacman.sh
+          </code>{' '}
+          has not been tested very well, so it may not work as intended for
+          setup.
+        </p>
+
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Make setup_host_apt.sh executable
+$ chmod +x setup_host_apt.sh
+
+# Execute setup_host_apt.sh
+$ sudo ./setup_host_apt.sh`}
+          </code>
+        </pre>
+
+        <SubSectionTitle as="h2">
+          Using Nocturne in your car (Linux)
+        </SubSectionTitle>
+        <p>
+          To use Nocturne in your car, you will need to have a Raspberry Pi to
+          provide network.
+        </p>
+        <p>
+          Connect your Raspberry Pi to your computer, your Car Thing to the
+          Raspberry Pi, and run the following from your command line:
+        </p>
+
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`# Transfer setup_host_rpi.sh to Raspberry Pi
+$ scp /path/to/nocturne-image/setup-scripts/setup_host_rpi.sh pi@raspberrypi.local:/home/pi/
+
+# SSH into Raspberry Pi
+$ ssh pi@raspberrypi.local
+
+# Make setup_host_rpi.sh executable
+$ chmod +x /home/pi/setup_host_rpi.sh
+
+# Execute setup_host_rpi.sh
+$ sudo ./setup_host_rpi.sh
+
+# Reboot Raspberry Pi
+$ sudo reboot`}
+          </code>
+        </pre>
+
+        <p>
+          Continue setting up Nocturne by following the steps outlined{' '}
+          <a
+            href="https://github.com/usenocturne/nocturne-ui?tab=readme-ov-file#spotify-developer-setup"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          . Then, select Login with Phone, scan the QR Code, and enter the
+          Client ID and the Client Secret, and login to Spotify. After logging
+          in, you are ready to use Nocturne!
+        </p>
+
+        <SectionLink id="troubleshooting">
+          <Heading as="h2">Troubleshooting</Heading>
+        </SectionLink>
+
+        <SubSectionTitle as="h2">
+          superbird-tool: USBTimeoutError
+        </SubSectionTitle>
+        <p>
+          If you are running into this error while flashing your Car Thing, try
+          using the option{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            --slow_burn
+          </code>{' '}
+          or{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            --slower_burn
+          </code>{' '}
+          in the command used to flash.
+        </p>
+        <p>This will look like the following:</p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`$ python ./superbird_tool.py --dont_reset --slow_burn --restore_device /path/to/nocturne/image`}
+          </code>
+        </pre>
+        <p>
+          If this still does not resolve the error, then you will have to edit
+          line 164 (the one that says{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            MULTIPLIER = 8
+          </code>
+          ) in{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            superbird_device.py
+          </code>
+        </p>
+        <p>
+          If your flashing is failing at{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            executing bulkcmd: "amlmmc part 1"
+          </code>
+          , then try running the following command manually. This may take a few
+          tries to succeed:
+        </p>
+        <pre className="rounded-lg bg-gray-100 p-4">
+          <code className="language-bash">
+            {`$ python ./superbird_tool.py --bulkcmd "amlmmc part 1"`}
+          </code>
+        </pre>
+        <p>
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            python
+          </code>{' '}
+          in the above commands depends on what OS you are running:
+        </p>
+        <ul className="list-disc pl-6">
+          <li>
+            For Windows, it will be{' '}
+            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+              python
+            </code>
+          </li>
+          <li>
+            For macOS, it will be{' '}
+            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+              /opt/homebrew/bin/python3
+            </code>
+          </li>
+          <li>
+            For Linux, it will be{' '}
+            <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+              python3
+            </code>
+          </li>
+        </ul>
+
+        <SubSectionTitle as="h2">
+          superbird-tool: "bulkcmd timed out or failed!" after system_b
+        </SubSectionTitle>
+        <p>
+          If you are running into this error while flashing your Car Thing, you
+          must replace the{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            superbird_partitions.py
+          </code>{' '}
+          file in the
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            superbird-tool
+          </code>{' '}
+          folder with the one provided in this repo.
+        </p>
+        <p>
+          This error occurs since some devices have a smaller data partition,
+          causing the error when attempting to flash the data partition.
+        </p>
+
+        <SubSectionTitle as="h2">
+          superbird-tool: AssertionError
+        </SubSectionTitle>
+        <p>
+          If you are running into this error while flashing your Car Thing, you
+          must install the{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            libusbk
+          </code>{' '}
+          driver in Zadig. You can do this with the steps found{' '}
+          <a
+            href="https://github.com/thinglabsoss/superbird-tool?tab=readme-ov-file#windows"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          , and replacing{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            libusb-win32
+          </code>{' '}
+          with{' '}
+          <code className="rounded bg-gray-100 px-1 py-0.5 text-sm text-gray-800">
+            libusbk
+          </code>{' '}
+          instead.
+        </p>
+
+        <p>
+          If your issue is not listed here, or if you need help, join our{' '}
+          <a
+            href="https://discord.gg/GTP9AawHPt"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            Discord server
+          </a>{' '}
+          for assistance.
+        </p>
+
+        <SectionLink id="download">
+          <Heading as="h2">Download</Heading>
+        </SectionLink>
+        <p>
+          You can download the latest flashable version of Nocturne for Windows,
+          macOS and Linux{' '}
+          <a
+            href="https://github.com/brandonsaldan/nocturne-image/releases/latest"
+            className="duration-350 text-blue-600 no-underline transition ease-in-out hover:text-blue-800"
+          >
+            here
+          </a>
+          .
+        </p>
+      </div>
+    </Container>
+  )
+}
+
+export default function Home() {
+  return (
+    <div className="overflow-hidden">
+      <Hero />
+      <main>
+        <div className="bg-gradient-to-b from-white from-50% to-gray-100 pb-20">
+          <InstallationGuide />
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}