diff --git a/apps/web/.gitignore b/apps/web/.gitignore
index b3c2ea94a2..c740f35936 100644
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -30,4 +30,6 @@ Thumbs.db
 
 ## Environment variables
 ### Prevent `.env` files from being tracked by Git to avoid exposing sensitive information.
-.env*
\ No newline at end of file
+.env*
+
+next-env.d.ts
\ No newline at end of file
diff --git a/apps/web/license.md b/apps/web/license.md
index 5058f53ebb..2b4b9fc0ba 100644
--- a/apps/web/license.md
+++ b/apps/web/license.md
@@ -1,4 +1,4 @@
-Copyright 2024 Plus Five Five, Inc
+Copyright 2025 Plus Five Five, Inc
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts
deleted file mode 100644
index 830fb594ca..0000000000
--- a/apps/web/next-env.d.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/web/next.config.js b/apps/web/next.config.ts
similarity index 89%
rename from apps/web/next.config.js
rename to apps/web/next.config.ts
index 3bcd85fb2d..a19fa874ce 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.ts
@@ -1,10 +1,6 @@
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
 
-module.exports = {
-  devIndicators: {
-    appIsrStatus: false,
-  },
-  reactStrictMode: true,
+const nextConfig: NextConfig = {
   serverExternalPackages: ['@react-email/components', '@react-email/render'],
   async redirects() {
     return [
@@ -48,3 +44,5 @@ module.exports = {
     ];
   },
 };
+
+export default nextConfig;
diff --git a/apps/web/src/app/api/check-spam/route.ts b/apps/web/src/app/api/check-spam/route.ts
index 25599c0088..db63e84b19 100644
--- a/apps/web/src/app/api/check-spam/route.ts
+++ b/apps/web/src/app/api/check-spam/route.ts
@@ -2,8 +2,6 @@ import { type NextRequest, NextResponse } from 'next/server';
 import { ZodError, z } from 'zod';
 import { checkSpam } from './check-spam';
 
-export const dynamic = 'force-dynamic';
-
 export function OPTIONS() {
   return Promise.resolve(NextResponse.json({}));
 }
diff --git a/apps/web/src/app/api/send/test/route.ts b/apps/web/src/app/api/send/test/route.ts
index 6110e75a68..17800c1130 100644
--- a/apps/web/src/app/api/send/test/route.ts
+++ b/apps/web/src/app/api/send/test/route.ts
@@ -3,8 +3,6 @@ import { type NextRequest, NextResponse } from 'next/server';
 import { Resend } from 'resend';
 import { z } from 'zod';
 
-export const dynamic = 'force-dynamic';
-
 export function OPTIONS() {
   return Promise.resolve(NextResponse.json({}));
 }
diff --git a/apps/web/src/app/components/[slug]/page.tsx b/apps/web/src/app/components/[slug]/page.tsx
index d5b1575539..58c33526bd 100644
--- a/apps/web/src/app/components/[slug]/page.tsx
+++ b/apps/web/src/app/components/[slug]/page.tsx
@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 import { componentsStructure } from '../../../../components/structure';
 import { ComponentsView } from '../../../components/components-view';
 import { IconArrowLeft } from '../../../components/icons/icon-arrow-left';
-import PageTransition from '../../../components/page-transition';
+import { PageTransition } from '../../../components/page-transition';
 import { slugify } from '../../../utils/slugify';
 import { getImportedComponentsFor } from '../get-imported-components-for';
 
@@ -54,14 +54,16 @@ export const generateMetadata = async ({
   };
 };
 
-const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
+export default async function ComponentPage({ params }: ComponentPageParams) {
   const { slug: rawSlug } = await params;
   const slug = decodeURIComponent(rawSlug);
   const foundCategory = componentsStructure.find(
     (category) => slugify(category.name) === slug,
   );
 
-  if (!foundCategory) return <p>Component category not found.</p>;
+  if (!foundCategory) {
+    return <p>Component category not found.</p>;
+  }
 
   const importedComponents = await getImportedComponentsFor(foundCategory);
   return (
@@ -76,7 +78,7 @@ const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
         <div className="flex w-full flex-col gap-4 px-6 pt-16 pb-10 md:px-8">
           <div className="flex flex-inline">
             <Link
-              className="mr-2 flex scroll-m-2 items-center justify-center gap-2 self-start rounded-md px-2 py-1 text-slate-11 transition transition-colors duration-200 ease-in-out hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3"
+              className="mr-2 flex scroll-m-2 items-center justify-center gap-2 self-start rounded-md px-2 py-1 text-slate-11 transition-colors duration-200 ease-in-out hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3"
               href="/components"
             >
               <IconArrowLeft className="mt-[.0625rem]" size={14} />
@@ -93,6 +95,4 @@ const ComponentPage: React.FC<ComponentPageParams> = async ({ params }) => {
       </PageTransition>
     </>
   );
-};
-
-export default ComponentPage;
+}
diff --git a/apps/web/src/app/components/page.tsx b/apps/web/src/app/components/page.tsx
index f1954f8f5e..2702491b60 100644
--- a/apps/web/src/app/components/page.tsx
+++ b/apps/web/src/app/components/page.tsx
@@ -3,107 +3,98 @@ import type { Metadata } from 'next';
 import dynamic from 'next/dynamic';
 import Link from 'next/link';
 import { componentsStructure } from '../../../components/structure';
-import PageTransition from '../../components/page-transition';
+import { PageTransition } from '../../components/page-transition';
 import { Spotlight } from '../../components/spotlight';
 import { slugify } from '../../utils/slugify';
 
-const title = 'Components - React Email';
-const description =
-  'Build beautiful emails with pre-built components that you can copy-and-paste into your app.';
-
 export const metadata: Metadata = {
-  title,
-  description,
+  title: 'Components - React Email',
+  description:
+    'Build beautiful emails with pre-built components that you can copy-and-paste into your app.',
   openGraph: {
-    title,
-    description,
-    images: [
-      {
-        url: 'https://react.email/static/covers/patterns.png',
-      },
-    ],
+    images: [{ url: 'https://react.email/static/covers/patterns.png' }],
   },
   alternates: {
     canonical: '/components',
   },
 };
 
-const ComponentsPage = async () => (
-  <>
-    <div className="pointer-events-none absolute inset-0 flex justify-center">
-      <div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
-        <div className="border-r-slate-3 border-l border-l-slate-4" />
-        <div className="border-r border-r-slate-4" />
-      </div>
-    </div>
-    <PageTransition className="pb-10" key="about" tag="main">
-      <div className="flex w-full flex-col gap-2 px-6 pt-16 pb-10 md:px-8">
-        <h1 className="font-bold text-2xl text-slate-12">Components</h1>
-        <p>
-          Build beautiful emails with pre-built components that you can
-          copy-and-paste into your app.
-        </p>
+export default async function ComponentsPage() {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 flex justify-center">
+        <div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
+          <div className="border-r-slate-3 border-l border-l-slate-4" />
+          <div className="border-r border-r-slate-4" />
+        </div>
       </div>
-      <div className="relative grid grid-cols-1 gap-x-4 px-1 pb-10 md:grid-cols-2 md:px-0 lg:grid-cols-3">
-        <div className="-translate-x-1/2 absolute top-0 left-1/2 h-px w-[100dvw] border-slate-4 border-t" />
-        <div className="-translate-x-1/2 absolute bottom-0 left-1/2 h-px w-[100dvw] border-slate-4 border-b" />
-        {componentsStructure.map((category, index) => {
-          const slug = slugify(category.name);
-          const Illustration = dynamic(
-            () =>
-              import(
-                `@/illustrations/${category.name
-                  .toLowerCase()
-                  .replace(/ /g, '-')}`
-              ),
-          );
+      <PageTransition className="pb-10" key="about" tag="main">
+        <div className="flex w-full flex-col gap-2 px-6 pt-16 pb-10 md:px-8">
+          <h1 className="font-bold text-2xl text-slate-12">Components</h1>
+          <p>
+            Build beautiful emails with pre-built components that you can
+            copy-and-paste into your app.
+          </p>
+        </div>
+        <div className="relative grid grid-cols-1 gap-x-4 px-1 pb-10 md:grid-cols-2 md:px-0 lg:grid-cols-3">
+          <div className="-translate-x-1/2 absolute top-0 left-1/2 h-px w-[100dvw] border-slate-4 border-t" />
+          <div className="-translate-x-1/2 absolute bottom-0 left-1/2 h-px w-[100dvw] border-slate-4 border-b" />
+          {componentsStructure.map((category, index) => {
+            const slug = slugify(category.name);
+            const Illustration = dynamic(
+              () =>
+                import(
+                  `@/illustrations/${category.name
+                    .toLowerCase()
+                    .replace(/ /g, '-')}`
+                ),
+            );
 
-          return (
-            <Link
-              className={classNames(
-                'group relative isolate mt-7 cursor-pointer scroll-m-6 rounded-md focus:outline-none focus:ring focus:ring-slate-2 md:before:absolute md:before:inset-0 md:before:rounded-md md:before:border md:before:border-slate-4 md:before:border-dashed md:before:transition-colors md:before:duration-[720ms] md:before:ease-[cubic-bezier(.24,.9,.32,1.4)] md:focus:before:border-slate-6 md:hover:before:border-slate-6',
-                {
-                  'md:ml-6': index % 3 === 0,
-                  'md:mx-3': index % 3 === 1,
-                  'md:mr-6': index % 3 === 2,
-                },
-              )}
-              href={`/components/${slug}`}
-              key={category.name}
-              tabIndex={0}
-            >
-              <Spotlight
+            return (
+              <Link
                 className={classNames(
-                  'relative isolate flex cursor-pointer flex-col justify-end rounded-md bg-black p-4 group-focus:ring group-focus:ring-slate-2 md:transition-transform md:duration-[240ms] md:ease-[cubic-bezier(.36,.66,.6,1)]',
+                  'group relative isolate mt-7 cursor-pointer scroll-m-6 rounded-md focus:outline-none focus:ring focus:ring-slate-2 md:before:absolute md:before:inset-0 md:before:rounded-md md:before:border md:before:border-slate-4 md:before:border-dashed md:before:transition-colors md:before:duration-[720ms] md:before:ease-[cubic-bezier(.24,.9,.32,1.4)] md:focus:before:border-slate-6 md:hover:before:border-slate-6',
                   {
-                    'md:group-hover:-translate-x-2 md:group-hover:-translate-y-2 md:group-focus:-translate-x-2 md:group-focus:-translate-y-2':
-                      index % 3 === 0,
-                    'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2':
-                      index % 3 === 1,
-                    'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2 md:group-hover:translate-x-2':
-                      index % 3 === 2,
+                    'md:ml-6': index % 3 === 0,
+                    'md:mx-3': index % 3 === 1,
+                    'md:mr-6': index % 3 === 2,
                   },
                 )}
+                href={`/components/${slug}`}
+                key={category.name}
+                tabIndex={0}
               >
-                <div className="pointer-events-none absolute inset-0 rounded-md border border-slate-4 transition-colors duration-300 ease-[cubic-bezier(.36,.66,.6,1)] group-hover:border-slate-6 group-focus:border-slate-6" />
-                <div className="relative flex aspect-[2/1] items-center justify-center overflow-hidden rounded-sm text-slate-300">
-                  <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
-                  <Illustration />
-                </div>
-                <h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
-                  {category.name}
-                </h3>
-                <span className="relative z-[2] text-slate-11 text-xs">
-                  {category.components.length} component
-                  {category.components.length > 1 && 's'}
-                </span>
-              </Spotlight>
-            </Link>
-          );
-        })}
-      </div>
-    </PageTransition>
-  </>
-);
-
-export default ComponentsPage;
+                <Spotlight
+                  className={classNames(
+                    'relative isolate flex cursor-pointer flex-col justify-end rounded-md bg-black p-4 group-focus:ring group-focus:ring-slate-2 md:transition-transform md:duration-[240ms] md:ease-[cubic-bezier(.36,.66,.6,1)]',
+                    {
+                      'md:group-hover:-translate-x-2 md:group-hover:-translate-y-2 md:group-focus:-translate-x-2 md:group-focus:-translate-y-2':
+                        index % 3 === 0,
+                      'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2':
+                        index % 3 === 1,
+                      'md:group-hover:-translate-y-2 md:group-focus:-translate-y-2 md:group-focus:translate-x-2 md:group-hover:translate-x-2':
+                        index % 3 === 2,
+                    },
+                  )}
+                >
+                  <div className="pointer-events-none absolute inset-0 rounded-md border border-slate-4 transition-colors duration-300 ease-[cubic-bezier(.36,.66,.6,1)] group-hover:border-slate-6 group-focus:border-slate-6" />
+                  <div className="relative flex aspect-[2/1] items-center justify-center overflow-hidden rounded-sm text-slate-300">
+                    <div className="absolute inset-0 bg-[radial-gradient(#27272A_.0313rem,transparent_.0313rem),_radial-gradient(#27272A_.0313rem,transparent_.0313rem)] bg-transparent opacity-80 [background-position:0_0,.625rem_.625rem] [background-size:1.25rem_1.25rem]" />
+                    <Illustration />
+                  </div>
+                  <h3 className="relative z-[2] mt-4 font-semibold text-slate-12 capitalize leading-7 tracking-wide">
+                    {category.name}
+                  </h3>
+                  <span className="relative z-[2] text-slate-11 text-xs">
+                    {category.components.length} component
+                    {category.components.length > 1 && 's'}
+                  </span>
+                </Spotlight>
+              </Link>
+            );
+          })}
+        </div>
+      </PageTransition>
+    </>
+  );
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index f333c1dcec..943cd93eeb 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -82,7 +82,11 @@ export const viewport = {
   themeColor: '#25AEBA',
 };
 
-const RootLayout = ({ children }: { children: React.ReactNode }) => {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <html
       className={`${inter.variable} ${commitMono.variable} antialiased`}
@@ -102,6 +106,4 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
       </body>
     </html>
   );
-};
-
-export default RootLayout;
+}
diff --git a/apps/web/src/app/not-found.tsx b/apps/web/src/app/not-found.tsx
index b2dd3a1062..6b3ec203ec 100644
--- a/apps/web/src/app/not-found.tsx
+++ b/apps/web/src/app/not-found.tsx
@@ -1,4 +1,4 @@
-import PageTransition from '@/components/page-transition';
+import { PageTransition } from '@/components/page-transition';
 
 export const metadata = {
   title: '404 Not found',
@@ -7,29 +7,29 @@ export const metadata = {
   },
 };
 
-const NotFound = () => (
-  <>
-    <div className="pointer-events-none absolute inset-0 flex justify-center">
-      <div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
-        <div className="border-r-slate-3 border-l border-l-slate-4" />
-        <div className="border-r border-r-slate-4" />
+export default function NotFound() {
+  return (
+    <>
+      <div className="pointer-events-none absolute inset-0 flex justify-center">
+        <div className="hidden h-full w-full max-w-7xl grid-cols-2 gap-4 px-4 lg:grid">
+          <div className="border-r-slate-3 border-l border-l-slate-4" />
+          <div className="border-r border-r-slate-4" />
+        </div>
       </div>
-    </div>
-    <PageTransition
-      className="flex w-full flex-col items-center justify-center gap-2 px-8 pt-16 pb-10 text-center"
-      key="not-found"
-      tag="main"
-    >
-      <h1 className="font-bold text-2xl text-slate-12 uppercase italic">
-        <span className="font-mono">404</span> <br />
-        Not Found
-      </h1>
-      <div className="mt-1 leading-loose">
-        <p>This page does not exist.</p>
-        <p>Please check the URL and try again.</p>
-      </div>
-    </PageTransition>
-  </>
-);
-
-export default NotFound;
+      <PageTransition
+        className="flex w-full flex-col items-center justify-center gap-2 px-8 pt-16 pb-10 text-center"
+        key="not-found"
+        tag="main"
+      >
+        <h1 className="font-bold text-2xl text-slate-12 uppercase italic">
+          <span className="font-mono">404</span> <br />
+          Not Found
+        </h1>
+        <div className="mt-1 leading-loose">
+          <p>This page does not exist.</p>
+          <p>Please check the URL and try again.</p>
+        </div>
+      </PageTransition>
+    </>
+  );
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index ba105b156f..1f280bc05f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -6,51 +6,51 @@ import { Code } from '../components/code';
 import { Heading } from '../components/heading';
 import { Text } from '../components/text';
 
-const Home = () => (
-  <>
-    <Image
-      alt=""
-      className="pointer-events-none absolute inset-0 z-[3] select-none mix-blend-lighten"
-      fill
-      priority
-      src="/static/bg.png"
-    />
-    <main className="relative mx-auto flex max-w-3xl flex-col justify-center">
-      <div className="max-w-full text-center md:max-w-[45rem]">
-        <div className="mb-8 flex items-center justify-center">
-          <Image
-            alt="React Email Logo"
-            height="120"
-            src="/brand/logo.png"
-            width="120"
-          />
+export default function Home() {
+  return (
+    <>
+      <Image
+        alt=""
+        className="pointer-events-none absolute inset-0 z-[3] select-none mix-blend-lighten"
+        fill
+        priority
+        src="/static/bg.png"
+      />
+      <main className="relative mx-auto flex max-w-3xl flex-col justify-center">
+        <div className="max-w-full text-center md:max-w-[45rem]">
+          <div className="mb-8 flex items-center justify-center">
+            <Image
+              alt="React Email Logo"
+              height="120"
+              src="/brand/logo.png"
+              width="120"
+            />
+          </div>
+          <Heading
+            className="!text-white/80 relative mb-8 before:absolute before:top-0 before:left-0 before:w-full before:animate-[shine_2s_ease-in-out] before:bg-[length:200%] before:bg-shine before:bg-clip-text before:text-transparent before:content-['The_next_generation_of_writing_emails']"
+            size="10"
+          >
+            The next generation of writing emails
+          </Heading>
+          <div className="sm:px-20">
+            <Text size="5">
+              A collection of high-quality, unstyled components for creating
+              beautiful emails using React and TypeScript.
+            </Text>
+          </div>
         </div>
-        <Heading
-          className="!text-white/80 relative mb-8 before:absolute before:top-0 before:left-0 before:w-full before:animate-[shine_2s_ease-in-out] before:bg-[length:200%] before:bg-shine before:bg-clip-text before:text-transparent before:content-['The_next_generation_of_writing_emails']"
-          size="10"
-        >
-          The next generation of writing emails
-        </Heading>
-        <div className="sm:px-20">
-          <Text size="5">
-            A collection of high-quality, unstyled components for creating
-            beautiful emails using React and TypeScript.
-          </Text>
+        <div className="mt-10 flex items-center justify-center gap-4">
+          <Button asChild size="4">
+            <Link href="/components">
+              Explore components
+              <ArrowRightIcon size={16} />
+            </Link>
+          </Button>
+          <Code className="md:!inline-flex hidden max-w-max">
+            npx create-email@latest
+          </Code>
         </div>
-      </div>
-      <div className="mt-10 flex items-center justify-center gap-4">
-        <Button asChild size="4">
-          <Link href="/components">
-            Explore components
-            <ArrowRightIcon size={16} />
-          </Link>
-        </Button>
-        <Code className="md:!inline-flex hidden max-w-max">
-          npx create-email@latest
-        </Code>
-      </div>
-    </main>
-  </>
-);
-
-export default Home;
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/src/app/templates/page.tsx b/apps/web/src/app/templates/page.tsx
index d01e58cb39..f29ab788ed 100644
--- a/apps/web/src/app/templates/page.tsx
+++ b/apps/web/src/app/templates/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import Image from 'next/image';
 import { Anchor } from '../../components/anchor';
 import { Heading } from '../../components/heading';
-import PageTransition from '../../components/page-transition';
+import { PageTransition } from '../../components/page-transition';
 import { Template } from '../../components/template';
 import { Text } from '../../components/text';
 
@@ -99,63 +99,59 @@ const items = [
   },
 ];
 
-const title = 'Templates — React Email';
 const description = 'Open source templates built with React Email';
+
 export const metadata: Metadata = {
-  title,
+  title: 'Templates — React Email',
   description,
-  openGraph: {
-    title,
-    description,
-  },
 };
 
-const Templates = () => (
-  <>
-    <Image
-      alt=""
-      className="pointer-events-none absolute inset-0 z-[3] select-none mix-blend-lighten"
-      fill
-      priority
-      src="/static/bg.png"
-    />
-    <PageTransition
-      className="mx-auto flex max-w-3xl flex-col justify-center px-1 py-10 md:px-0"
-      key="about"
-      tag="main"
-    >
-      <div className="mb-12 text-pretty px-6 md:max-w-[46rem] md:px-0 md:text-center">
-        <Heading className="text-white" size="6">
-          Templates
-        </Heading>
-        <Text as="p" className="mt-4 text-slate-11" size="2">
-          {description}.
-        </Text>
-        <Text as="p" className="mt-2 text-slate-11" size="2">
-          Recreate an{' '}
-          <Anchor
-            href="https://github.com/resend/react-email/issues?q=is%3Aissue+is%3Aopen+label%3A%22app%3A+demo%22"
-            target="_blank"
-          >
-            existing email
-          </Anchor>{' '}
-          or submit a{' '}
-          <Anchor
-            href="https://github.com/resend/react-email/tree/main/demo"
-            target="_blank"
-          >
-            pull request
-          </Anchor>{' '}
-          to add your template here.
-        </Text>
-      </div>
-      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-        {items.map((item) => (
-          <Template key={item.path} {...item} />
-        ))}
-      </div>
-    </PageTransition>
-  </>
-);
-
-export default Templates;
+export default function Templates() {
+  return (
+    <>
+      <Image
+        alt=""
+        className="pointer-events-none absolute inset-0 z-[3] select-none mix-blend-lighten"
+        fill
+        priority
+        src="/static/bg.png"
+      />
+      <PageTransition
+        className="mx-auto flex max-w-3xl flex-col justify-center px-1 py-10 md:px-0"
+        key="about"
+        tag="main"
+      >
+        <div className="mb-12 text-pretty px-6 md:max-w-[46rem] md:px-0 md:text-center">
+          <Heading className="text-white" size="6">
+            Templates
+          </Heading>
+          <Text as="p" className="mt-4 text-slate-11" size="2">
+            {description}.
+          </Text>
+          <Text as="p" className="mt-2 text-slate-11" size="2">
+            Recreate an{' '}
+            <Anchor
+              href="https://github.com/resend/react-email/issues?q=is%3Aissue+is%3Aopen+label%3A%22app%3A+demo%22"
+              target="_blank"
+            >
+              existing email
+            </Anchor>{' '}
+            or submit a{' '}
+            <Anchor
+              href="https://github.com/resend/react-email/tree/main/demo"
+              target="_blank"
+            >
+              pull request
+            </Anchor>{' '}
+            to add your template here.
+          </Text>
+        </div>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          {items.map((item) => (
+            <Template key={item.path} {...item} />
+          ))}
+        </div>
+      </PageTransition>
+    </>
+  );
+}
diff --git a/apps/web/src/components/anchor.tsx b/apps/web/src/components/anchor.tsx
index 83452149ac..0e90c9bb11 100644
--- a/apps/web/src/components/anchor.tsx
+++ b/apps/web/src/components/anchor.tsx
@@ -1,19 +1,19 @@
 import classNames from 'classnames';
 import type * as React from 'react';
 
-export const Anchor: React.FC<
-  Readonly<React.ComponentPropsWithoutRef<'a'>>
-> = ({ className, ...props }) => (
-  <a
-    className={classNames(
-      'rounded-sm outline-none transition-transform duration-200 ease-in-out',
-      'hover:-translate-y-1',
-      'focus:ring-2 focus:ring-white/20 focus:ring-offset-4 focus:ring-offset-black',
-      'text-slate-12',
-      className,
-    )}
-    {...props}
-  >
-    {props.children}
-  </a>
-);
+export function Anchor({ className, ...props }: React.ComponentProps<'a'>) {
+  return (
+    <a
+      className={classNames(
+        'rounded-sm outline-none transition-transform duration-200 ease-in-out',
+        'hover:-translate-y-1',
+        'focus:ring-2 focus:ring-white/20 focus:ring-offset-4 focus:ring-offset-black',
+        'text-slate-12',
+        className,
+      )}
+      {...props}
+    >
+      {props.children}
+    </a>
+  );
+}
diff --git a/apps/web/src/components/button.tsx b/apps/web/src/components/button.tsx
index 99362d5e71..978cc42b44 100644
--- a/apps/web/src/components/button.tsx
+++ b/apps/web/src/components/button.tsx
@@ -1,53 +1,41 @@
 import { Slot } from '@radix-ui/react-slot';
 import classNames from 'classnames';
-import * as React from 'react';
 import { unreachable } from '../utils/unreachable';
 
 type Appearance = 'white' | 'gradient';
 type Size = '1' | '2' | '3' | '4';
 
-interface ButtonProps extends React.ComponentPropsWithoutRef<'button'> {
+interface ButtonProps extends React.ComponentProps<'button'> {
   asChild?: boolean;
   appearance?: Appearance;
   size?: Size;
 }
 
-export const Button = React.forwardRef<
-  HTMLButtonElement,
-  Readonly<ButtonProps>
->(
-  (
-    {
-      asChild,
-      appearance = 'white',
-      className,
-      children,
-      size = '2',
-      ...props
-    },
-    forwardedRef,
-  ) => {
-    const Comp = asChild ? Slot : 'button';
+export function Button({
+  asChild,
+  appearance = 'white',
+  className,
+  children,
+  size = '2',
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : 'button';
 
-    return (
-      <Comp
-        className={classNames(
-          getSize(size),
-          getAppearance(appearance),
-          'inline-flex items-center justify-center border font-medium',
-          className,
-        )}
-        ref={forwardedRef}
-        type="button"
-        {...props}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
-
-Button.displayName = 'Button';
+  return (
+    <Comp
+      className={classNames(
+        getSize(size),
+        getAppearance(appearance),
+        'inline-flex items-center justify-center border font-medium',
+        className,
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </Comp>
+  );
+}
 
 const getAppearance = (appearance: Appearance) => {
   switch (appearance) {
diff --git a/apps/web/src/components/code-block.tsx b/apps/web/src/components/code-block.tsx
index f74573adb6..751a5d534a 100644
--- a/apps/web/src/components/code-block.tsx
+++ b/apps/web/src/components/code-block.tsx
@@ -43,10 +43,7 @@ interface CodeBlockProps {
   language?: Language;
 }
 
-export const CodeBlock: React.FC<Readonly<CodeBlockProps>> = ({
-  children,
-  language = 'html',
-}) => {
+export function CodeBlock({ children, language = 'html' }: CodeBlockProps) {
   const value = children.trim();
 
   return (
@@ -105,4 +102,4 @@ export const CodeBlock: React.FC<Readonly<CodeBlockProps>> = ({
       )}
     </Highlight>
   );
-};
+}
diff --git a/apps/web/src/components/code.tsx b/apps/web/src/components/code.tsx
index ae32279273..1f01a048f3 100644
--- a/apps/web/src/components/code.tsx
+++ b/apps/web/src/components/code.tsx
@@ -46,11 +46,7 @@ const theme = {
   ],
 };
 
-export const Code: React.FC<Readonly<CodeProps>> = ({
-  children,
-  className,
-  language = 'html',
-}) => {
+export function Code({ children, className, language = 'html' }: CodeProps) {
   const [isCopied, setIsCopied] = React.useState(false);
   const value = children.trim();
 
@@ -130,4 +126,4 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
       )}
     </Highlight>
   );
-};
+}
diff --git a/apps/web/src/components/component-code-view.tsx b/apps/web/src/components/component-code-view.tsx
index 3f1bd20349..7c348332f6 100644
--- a/apps/web/src/components/component-code-view.tsx
+++ b/apps/web/src/components/component-code-view.tsx
@@ -20,11 +20,11 @@ import { TabTrigger } from './tab-trigger';
 
 type ReactCodeVariant = Exclude<CodeVariant, 'html' | 'react'>;
 
-export const ComponentCodeView = ({
+export function ComponentCodeView({
   component,
 }: {
   component: ImportedComponent;
-}) => {
+}) {
   const [selectedReactCodeVariant, setSelectedReactCodeVariant] =
     useStoredState<ReactCodeVariant>('code-variant', 'tailwind');
 
@@ -146,7 +146,7 @@ export const ComponentCodeView = ({
       </div>
     </div>
   );
-};
+}
 
 const ReactVariantSelect = ({
   value,
diff --git a/apps/web/src/components/component-preview.tsx b/apps/web/src/components/component-preview.tsx
index 5805dc2485..6491beeced 100644
--- a/apps/web/src/components/component-preview.tsx
+++ b/apps/web/src/components/component-preview.tsx
@@ -7,11 +7,11 @@ interface ComponentPreviewProps {
   html: string;
 }
 
-export const ComponentPreview = ({
+export function ComponentPreview({
   activeView,
   className,
   html,
-}: ComponentPreviewProps) => {
+}: ComponentPreviewProps) {
   const iframeRef = React.useRef<HTMLIFrameElement>(null);
 
   React.useEffect(() => {
@@ -57,4 +57,4 @@ export const ComponentPreview = ({
       title="Component preview"
     />
   );
-};
+}
diff --git a/apps/web/src/components/component-view.tsx b/apps/web/src/components/component-view.tsx
index 7714b41c85..87df9b99fb 100644
--- a/apps/web/src/components/component-view.tsx
+++ b/apps/web/src/components/component-view.tsx
@@ -11,7 +11,7 @@ import { IconMonitor } from './icons/icon-monitor';
 import { IconPhone } from './icons/icon-phone';
 import { IconSource } from './icons/icon-source';
 import { TabTrigger } from './tab-trigger';
-import { Tooltip } from './tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
 
 interface ComponentViewProps {
   component: ImportedComponent;
@@ -34,12 +34,12 @@ const TabTriggetWithTooltip = ({
   value: string;
 }) => (
   <Tooltip>
-    <Tooltip.Trigger asChild>
+    <TooltipTrigger asChild>
       <TabTrigger activeView={activeView} layoutId={layoutId} value={value}>
         {children}
       </TabTrigger>
-    </Tooltip.Trigger>
-    <Tooltip.Content>{tooltip}</Tooltip.Content>
+    </TooltipTrigger>
+    <TooltipContent>{tooltip}</TooltipContent>
   </Tooltip>
 );
 
@@ -56,10 +56,7 @@ const TabContent: React.FC<{
   </Tabs.Content>
 );
 
-export const ComponentView: React.FC<ComponentViewProps> = ({
-  component,
-  className,
-}) => {
+export function ComponentView({ component, className }: ComponentViewProps) {
   const [activeView, setActiveView] = React.useState<ActiveView>('desktop');
 
   React.useEffect(() => {
@@ -128,4 +125,4 @@ export const ComponentView: React.FC<ComponentViewProps> = ({
       </TooltipProvider>
     </Tabs.Root>
   );
-};
+}
diff --git a/apps/web/src/components/components-view.tsx b/apps/web/src/components/components-view.tsx
index 0c408d179a..00b7517b5e 100644
--- a/apps/web/src/components/components-view.tsx
+++ b/apps/web/src/components/components-view.tsx
@@ -5,9 +5,7 @@ interface ComponentsViewProps {
   components: ImportedComponent[];
 }
 
-export const ComponentsView: React.FC<ComponentsViewProps> = ({
-  components,
-}) => {
+export function ComponentsView({ components }: ComponentsViewProps) {
   return (
     <>
       {components.map((component, index) => (
@@ -19,4 +17,4 @@ export const ComponentsView: React.FC<ComponentsViewProps> = ({
       ))}
     </>
   );
-};
+}
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index 0e78649471..479f8882d0 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -1,26 +1,28 @@
 import Image from 'next/image';
-import type * as React from 'react';
 import { Anchor } from './anchor';
 import { Text } from './text';
 
-export const Footer: React.FC = () => (
-  <footer className="flex min-h-20 items-center justify-center text-center">
-    <Text className="inline-flex items-center gap-2">
-      Brought to you by{' '}
-      <Anchor
-        className="inline-flex items-center gap-2"
-        href="https://resend.com"
-        target="_blank"
-      >
-        <Image
-          alt=""
-          className="inline-block rounded-full border border-slate-7"
-          height="20"
-          src="/brand/resend.png"
-          width="20"
-        />
-        Resend
-      </Anchor>
-    </Text>
-  </footer>
-);
+export function Footer() {
+  return (
+    <footer className="flex min-h-20 items-center justify-center text-center">
+      <Text className="inline-flex items-center gap-2">
+        Brought to you by{' '}
+        <Anchor
+          className="inline-flex items-center gap-2"
+          href="https://resend.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            alt=""
+            className="inline-block rounded-full border border-slate-7"
+            height="20"
+            src="/brand/resend.png"
+            width="20"
+          />
+          Resend
+        </Anchor>
+      </Text>
+    </footer>
+  );
+}
diff --git a/apps/web/src/components/heading.tsx b/apps/web/src/components/heading.tsx
index dda1c9ca7d..80cf93f951 100644
--- a/apps/web/src/components/heading.tsx
+++ b/apps/web/src/components/heading.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import * as React from 'react';
 import type { As } from '../utils/as';
 import { unreachable } from '../utils/unreachable';
 
@@ -15,19 +14,17 @@ interface HeadingOwnProps {
 
 type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
 
-export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
-  (
-    {
-      as: Tag = 'h1',
-      size = '3',
-      className,
-      color = 'white',
-      children,
-      weight = 'bold',
-      ...props
-    },
-    ref,
-  ) => (
+export function Heading({
+  as: Tag = 'h1',
+  size = '3',
+  className,
+  color = 'white',
+  children,
+  weight = 'bold',
+  ref,
+  ...props
+}: HeadingProps) {
+  return (
     <Tag
       className={classNames(
         className,
@@ -40,8 +37,8 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
     >
       {children}
     </Tag>
-  ),
-);
+  );
+}
 
 const getSizesClassNames = (size: HeadingSize) => {
   switch (size) {
@@ -94,5 +91,3 @@ const getWeightClassNames = (weight: HeadingWeight) => {
       return unreachable(weight);
   }
 };
-
-Heading.displayName = 'Heading';
diff --git a/apps/web/src/components/icon-button.tsx b/apps/web/src/components/icon-button.tsx
index 65d6ebcda9..c1c6d8a111 100644
--- a/apps/web/src/components/icon-button.tsx
+++ b/apps/web/src/components/icon-button.tsx
@@ -3,19 +3,17 @@ import type * as React from 'react';
 
 type IconButtonProps = React.ComponentPropsWithoutRef<'button'>;
 
-export const IconButton: React.FC<Readonly<IconButtonProps>> = ({
-  children,
-  className,
-  ...props
-}) => (
-  <button
-    {...props}
-    className={classNames(
-      'rounded p-1 text-[#EEF7FE] transition duration-200 ease-in-out hover:text-white focus:text-white focus:outline-none focus:ring-2 focus:ring-slate-6',
-      className,
-    )}
-    type="button"
-  >
-    {children}
-  </button>
-);
+export function IconButton({ children, className, ...props }: IconButtonProps) {
+  return (
+    <button
+      {...props}
+      className={classNames(
+        'rounded p-1 text-[#EEF7FE] transition duration-200 ease-in-out hover:text-white focus:text-white focus:outline-none focus:ring-2 focus:ring-slate-6',
+        className,
+      )}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/apps/web/src/components/logo.tsx b/apps/web/src/components/logo.tsx
index 721a83f466..8ea61df0d2 100644
--- a/apps/web/src/components/logo.tsx
+++ b/apps/web/src/components/logo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const Logo = () => {
+export function Logo() {
   const id = React.useId();
   return (
     <svg
@@ -65,4 +65,4 @@ export const Logo = () => {
       </defs>
     </svg>
   );
-};
+}
diff --git a/apps/web/src/components/menu.tsx b/apps/web/src/components/menu.tsx
index e23e9ef40b..280b2332ba 100644
--- a/apps/web/src/components/menu.tsx
+++ b/apps/web/src/components/menu.tsx
@@ -15,74 +15,75 @@ interface MenuItemProps {
 
 const GITHUB_URL = 'https://github.com/resend/react-email';
 
-const MenuItem: React.FC<Readonly<MenuItemProps>> = ({
-  className,
-  children,
-  href,
-  onClick,
-}) => (
-  <li className="inline-flex w-full items-center justify-center md:w-fit">
-    <Link
-      className={classnames(
-        'inline-flex h-8 scroll-m-2 items-center rounded-md text-slate-11 text-sm transition-colors hover:bg-slate-6 hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3 md:justify-center',
-        className,
-      )}
-      href={href}
-      onClick={onClick}
-      tabIndex={0}
-    >
-      {children}
-    </Link>
-  </li>
-);
+function MenuItem({ className, children, href, onClick }: MenuItemProps) {
+  return (
+    <li className="inline-flex w-full items-center justify-center md:w-fit">
+      <Link
+        className={classnames(
+          'inline-flex h-8 scroll-m-2 items-center rounded-md text-slate-11 text-sm transition-colors hover:bg-slate-6 hover:text-slate-12 focus:bg-slate-6 focus:outline-none focus:ring focus:ring-slate-3 md:justify-center',
+          className,
+        )}
+        href={href}
+        onClick={onClick}
+        tabIndex={0}
+      >
+        {children}
+      </Link>
+    </li>
+  );
+}
 
-const MenuItems = ({ onItemClick }: { onItemClick: () => void }) => (
-  <>
-    <MenuItem
-      className="w-full px-2 md:w-fit"
-      href="/components"
-      onClick={onItemClick}
-    >
-      Components
-    </MenuItem>
-    <MenuItem
-      className="w-full px-2 md:w-fit"
-      href="/examples"
-      onClick={onItemClick}
-    >
-      Templates
-    </MenuItem>
+function MenuItems({ onItemClick }: { onItemClick: () => void }) {
+  return (
+    <>
+      <MenuItem
+        className="w-full px-2 md:w-fit"
+        href="/components"
+        onClick={onItemClick}
+      >
+        Components
+      </MenuItem>
+      <MenuItem
+        className="w-full px-2 md:w-fit"
+        href="/examples"
+        onClick={onItemClick}
+      >
+        Templates
+      </MenuItem>
+      <MenuItem
+        className="w-full px-2 md:w-fit"
+        href="/docs"
+        onClick={onItemClick}
+      >
+        Docs
+      </MenuItem>
+    </>
+  );
+}
+
+function SocialIcons({ onItemClick }: { onItemClick: () => void }) {
+  return (
     <MenuItem
-      className="w-full px-2 md:w-fit"
-      href="/docs"
+      className="w-8 justify-center"
+      href={GITHUB_URL}
       onClick={onItemClick}
     >
-      Docs
+      <svg
+        height="20"
+        viewBox="0 0 24 24"
+        width="20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+          fill="currentColor"
+        />
+      </svg>
     </MenuItem>
-  </>
-);
-
-const SocialIcons = ({ onItemClick }: { onItemClick: () => void }) => (
-  <MenuItem
-    className="w-8 justify-center"
-    href={GITHUB_URL}
-    onClick={onItemClick}
-  >
-    <svg
-      height="20"
-      viewBox="0 0 24 24"
-      width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-        fill="currentColor"
-      />
-    </svg>
-  </MenuItem>
-);
+  );
+}
 
-export const Menu: React.FC = () => {
+export function Menu() {
   const [isDrawerOpen, setDrawerOpen] = React.useState(false);
 
   const handleItemClick = () => {
@@ -129,4 +130,4 @@ export const Menu: React.FC = () => {
       </nav>
     </>
   );
-};
+}
diff --git a/apps/web/src/components/page-transition.tsx b/apps/web/src/components/page-transition.tsx
index e225bcdda8..7f86ce0540 100644
--- a/apps/web/src/components/page-transition.tsx
+++ b/apps/web/src/components/page-transition.tsx
@@ -13,12 +13,12 @@ interface PageTransitionProps {
   key: string;
 }
 
-const PageTransition = ({
+export function PageTransition({
   tag = 'div',
   children,
   className = '',
   key,
-}: PageTransitionProps) => {
+}: PageTransitionProps) {
   const MotionComponent = motion[
     tag as MotionComponentType
   ] as React.ComponentType<HTMLMotionProps<'div'> | SVGMotionProps<'svg'>>;
@@ -42,6 +42,4 @@ const PageTransition = ({
       </MotionComponent>
     </AnimatePresence>
   );
-};
-
-export default PageTransition;
+}
diff --git a/apps/web/src/components/spotlight.tsx b/apps/web/src/components/spotlight.tsx
index 76c1c7b543..e54e0f4356 100644
--- a/apps/web/src/components/spotlight.tsx
+++ b/apps/web/src/components/spotlight.tsx
@@ -9,7 +9,7 @@ interface SpotlightProps {
   className?: string;
 }
 
-export const Spotlight = ({ children, className }: SpotlightProps) => {
+export function Spotlight({ children, className }: SpotlightProps) {
   const mouseX = useMotionValue(0);
   const mouseY = useMotionValue(0);
 
@@ -40,4 +40,4 @@ export const Spotlight = ({ children, className }: SpotlightProps) => {
       />
     </div>
   );
-};
+}
diff --git a/apps/web/src/components/tab-trigger.tsx b/apps/web/src/components/tab-trigger.tsx
index b233460b24..3e4953e6bc 100644
--- a/apps/web/src/components/tab-trigger.tsx
+++ b/apps/web/src/components/tab-trigger.tsx
@@ -1,17 +1,23 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
-import * as React from 'react';
 
 interface TabTriggerProps {
   value: string;
   activeView: string;
   layoutId: string;
   children: React.ReactNode;
+  ref?: React.RefObject<HTMLButtonElement>;
 }
 
-export const TabTrigger = React.forwardRef<HTMLButtonElement, TabTriggerProps>(
-  ({ value, activeView, children, layoutId }: TabTriggerProps, ref) => (
+export function TabTrigger({
+  value,
+  activeView,
+  children,
+  ref,
+  layoutId,
+}: TabTriggerProps) {
+  return (
     <Tabs.Trigger
       className={classNames(
         'group relative scroll-m-2 rounded-md px-3 py-1.5 focus:outline-none',
@@ -39,5 +45,5 @@ export const TabTrigger = React.forwardRef<HTMLButtonElement, TabTriggerProps>(
       )}
       {children}
     </Tabs.Trigger>
-  ),
-);
+  );
+}
diff --git a/apps/web/src/components/template.tsx b/apps/web/src/components/template.tsx
index bf85fd3736..e839336019 100644
--- a/apps/web/src/components/template.tsx
+++ b/apps/web/src/components/template.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { Heading } from './heading';
 import { Text } from './text';
 
-export interface ExampleProps {
+interface TemplateProps {
   path: string;
   name: string;
   className?: string;
@@ -22,13 +22,13 @@ const imageLoader: ImageLoader = ({ src, width, quality }) => {
   return `${src}?w=${width}&q=${quality || 75}`;
 };
 
-export const Template: React.FC<Readonly<ExampleProps>> = ({
+export function Template({
   className,
   path,
   name,
   author,
   ...props
-}) => {
+}: TemplateProps) {
   const emailName = path.split('/').pop();
   if (!path || !emailName) {
     throw new Error('Cannot have an empty path for an Example!');
@@ -79,4 +79,4 @@ export const Template: React.FC<Readonly<ExampleProps>> = ({
       </div>
     </Link>
   );
-};
+}
diff --git a/apps/web/src/components/text.tsx b/apps/web/src/components/text.tsx
index a9984596bd..2f07387749 100644
--- a/apps/web/src/components/text.tsx
+++ b/apps/web/src/components/text.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import * as React from 'react';
 import type { As } from '../utils/as';
 import { unreachable } from '../utils/unreachable';
 
@@ -9,22 +8,21 @@ type TextColor = 'gray' | 'white';
 interface TextOwnProps {
   size?: TextSize;
   color?: TextColor;
+  ref?: React.RefObject<HTMLParagraphElement>;
 }
 
 type TextProps = As<'span', 'div', 'p'> & TextOwnProps;
 
-export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
-  (
-    {
-      as: Tag = 'span',
-      size = '2',
-      color = 'gray',
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => (
+export function Text({
+  as: Tag = 'span',
+  size = '2',
+  color = 'gray',
+  className,
+  children,
+  ref,
+  ...props
+}: TextProps) {
+  return (
     <Tag
       className={classNames(
         className,
@@ -36,10 +34,8 @@ export const Text = React.forwardRef<HTMLParagraphElement, TextProps>(
     >
       {children}
     </Tag>
-  ),
-);
-
-Text.displayName = 'Text';
+  );
+}
 
 const getSizesClassNames = (size: TextSize) => {
   switch (size) {
diff --git a/apps/web/src/components/tooltip-content.tsx b/apps/web/src/components/tooltip-content.tsx
index 4c521b3d00..3e7198dfd8 100644
--- a/apps/web/src/components/tooltip-content.tsx
+++ b/apps/web/src/components/tooltip-content.tsx
@@ -1,5 +1,4 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import * as React from 'react';
 
 type ContentElement = React.ComponentRef<typeof TooltipPrimitive.Content>;
 type ContentProps = Omit<
@@ -7,24 +6,27 @@ type ContentProps = Omit<
   'sideOffset'
 > & {
   sideOffset?: number;
+  ref?: React.RefObject<ContentElement>;
 };
 
 export type TooltipProps = ContentProps;
 
-export const TooltipContent = React.forwardRef<
-  ContentElement,
-  Readonly<TooltipProps>
->(({ sideOffset = 6, children, ...props }, forwardedRef) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      {...props}
-      className="z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs"
-      ref={forwardedRef}
-      sideOffset={sideOffset}
-    >
-      {children}
-    </TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-));
-
-TooltipContent.displayName = 'TooltipContent';
+export function TooltipContent({
+  sideOffset = 6,
+  children,
+  ref,
+  ...props
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        {...props}
+        className="z-20 rounded-md border border-slate-6 bg-black px-3 py-2 text-white text-xs"
+        ref={ref}
+        sideOffset={sideOffset}
+      >
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
diff --git a/apps/web/src/components/tooltip.tsx b/apps/web/src/components/tooltip.tsx
index bceb7a03b5..18001d03c3 100644
--- a/apps/web/src/components/tooltip.tsx
+++ b/apps/web/src/components/tooltip.tsx
@@ -2,18 +2,9 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import type * as React from 'react';
 import { TooltipContent } from './tooltip-content';
 
-type RootProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;
+export type TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>;
+export const Tooltip = TooltipPrimitive.Root;
 
-export type TooltipProps = RootProps;
+const TooltipTrigger = TooltipPrimitive.TooltipTrigger;
 
-export const TooltipRoot: React.FC<Readonly<TooltipProps>> = ({
-  children,
-  ...props
-}) => <TooltipPrimitive.Root {...props}>{children}</TooltipPrimitive.Root>;
-
-export const Tooltip = Object.assign(TooltipRoot, {
-  Arrow: TooltipPrimitive.TooltipArrow,
-  Provider: TooltipPrimitive.TooltipProvider,
-  Content: TooltipContent,
-  Trigger: TooltipPrimitive.TooltipTrigger,
-});
+export { TooltipContent, TooltipTrigger };
diff --git a/apps/web/src/components/topbar.tsx b/apps/web/src/components/topbar.tsx
index 50b6a7780a..e5ec7de95c 100644
--- a/apps/web/src/components/topbar.tsx
+++ b/apps/web/src/components/topbar.tsx
@@ -4,22 +4,25 @@ import type * as React from 'react';
 import { Logo } from './logo';
 import { Menu } from './menu';
 
-export const Topbar: React.FC<
-  Readonly<React.ComponentPropsWithoutRef<'header'>>
-> = ({ className, ...props }) => (
-  <header
-    className={classNames(
-      'z-[3] flex items-center justify-between px-6 py-8',
-      className,
-    )}
-    {...props}
-  >
-    <Link
-      className="-ml-[.375rem] flex scroll-m-2 rounded-md pr-[.375rem] transition-colors focus:outline-none focus:ring focus:ring-slate-4"
-      href="/"
+export function Topbar({
+  className,
+  ...props
+}: Omit<React.ComponentProps<'header'>, 'children'>) {
+  return (
+    <header
+      className={classNames(
+        'z-[3] flex items-center justify-between px-6 py-8',
+        className,
+      )}
+      {...props}
     >
-      <Logo />
-    </Link>
-    <Menu />
-  </header>
-);
+      <Link
+        className="-ml-[.375rem] flex scroll-m-2 rounded-md pr-[.375rem] transition-colors focus:outline-none focus:ring focus:ring-slate-4"
+        href="/"
+      >
+        <Logo />
+      </Link>
+      <Menu />
+    </header>
+  );
+}
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index b41171718f..bcf8c857f0 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -11,7 +11,7 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "next.config.js"
+    "next.config.ts"
   ],
   "exclude": ["node_modules"]
 }