diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index c0b534d..ca7d2eb 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -5,5 +5,5 @@ interface AuthLayoutProps {
 }
 
 export default function RootLayout({ children }: AuthLayoutProps) {
-  return <div className="grid min-h-screen grid-cols-2">{children}</div>
+  return <div className="min-h-screen">{children}</div>
 }
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index a3da97c..042421c 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -5,32 +5,30 @@ import { UserAuthForm } from "@/components/user-auth-form"
 
 export default function LoginPage() {
   return (
-    <div className="flex h-screen w-screen flex-col items-center justify-center">
+    <div className="container flex h-screen w-screen flex-col items-center justify-center">
       <Link
         href="/"
-        className="absolute top-8 left-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3  text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
+        className="absolute top-4 left-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm  font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:left-8"
       >
         <>
           <Icons.chevronLeft className="mr-2 h-4 w-4" />
           Back
         </>
       </Link>
-      <div className="p-8">
-        <div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
-          <div className="flex flex-col space-y-2 text-center">
-            <Icons.logo className="mx-auto h-6 w-6" />
-            <h1 className="text-2xl font-bold">Welcome back</h1>
-            <p className="text-sm text-slate-500">
-              Enter your email to sign in to your account
-            </p>
-          </div>
-          <UserAuthForm />
-          <p className="px-8 text-center text-sm text-slate-500">
-            <Link href="/register" className="underline hover:text-brand">
-              Don&apos;t have an account? Sign Up
-            </Link>
+      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+        <div className="flex flex-col space-y-2 text-center">
+          <Icons.logo className="mx-auto h-6 w-6" />
+          <h1 className="text-2xl font-bold">Welcome back</h1>
+          <p className="text-sm text-slate-500">
+            Enter your email to sign in to your account
           </p>
         </div>
+        <UserAuthForm />
+        <p className="px-8 text-center text-sm text-slate-500">
+          <Link href="/register" className="underline hover:text-brand">
+            Don&apos;t have an account? Sign Up
+          </Link>
+        </p>
       </div>
     </div>
   )
diff --git a/app/(auth)/register/page.tsx b/app/(auth)/register/page.tsx
index 30898b7..8489bf0 100644
--- a/app/(auth)/register/page.tsx
+++ b/app/(auth)/register/page.tsx
@@ -5,16 +5,16 @@ import { UserAuthForm } from "@/components/user-auth-form"
 
 export default function RegisterPage() {
   return (
-    <div className="grid h-screen w-screen grid-cols-2 flex-col items-center justify-center">
+    <div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <Link
         href="/login"
-        className="absolute top-8 right-8 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3  text-center text-sm font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white dark:focus:ring-slate-700"
+        className="absolute top-4 right-4 inline-flex items-center justify-center rounded-lg border border-transparent bg-transparent py-2 px-3 text-center text-sm  font-medium text-slate-900 hover:border-slate-100 hover:bg-slate-100 focus:z-10 focus:outline-none focus:ring-4 focus:ring-slate-200 md:top-8 md:right-8"
       >
         Login
       </Link>
-      <div className="h-full bg-slate-100" />
-      <div className="p-8">
-        <div className="mx-auto flex w-[350px] flex-col justify-center space-y-6">
+      <div className="hidden h-full bg-slate-100 lg:block" />
+      <div className="lg:p-8">
+        <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
           <div className="flex flex-col space-y-2 text-center">
             <Icons.logo className="mx-auto h-6 w-6" />
             <h1 className="text-2xl font-bold">Create an account</h1>
diff --git a/app/(marketing)/blog/[...slug]/page.tsx b/app/(marketing)/blog/[...slug]/page.tsx
index 0e21fa2..b5e3164 100644
--- a/app/(marketing)/blog/[...slug]/page.tsx
+++ b/app/(marketing)/blog/[...slug]/page.tsx
@@ -31,23 +31,26 @@ export default async function PostPage({ params }: PostPageProps) {
   const mdx = await serialize(post.content)
 
   return (
-    <article className="mx-auto max-w-2xl py-12">
-      <div className="flex flex-col space-y-2">
-        <h1 className="max-w-[90%] text-4xl font-bold leading-normal">
+    <article className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
+      <div className="flex flex-col space-y-4">
+        <h1 className="md:leading-12 text-2xl font-bold leading-[1.2] sm:text-3xl md:text-5xl">
           {post.frontMatter.title}
         </h1>
         {post.frontMatter.date && (
-          <p className="text-sm text-slate-600">
-            {formatDate(post.frontMatter.date)}
-          </p>
+          <p className="text-slate-800">{formatDate(post.frontMatter.date)}</p>
         )}
       </div>
-      <hr className="my-6" />
+      <div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
+        <hr className="border-slate-100" />
+      </div>
       {mdx && (
         <div className="prose max-w-none">
           <MdxContent source={mdx} />
         </div>
       )}
+      <div className="pt-12 pb-8 md:pt-10 md:pb-8 lg:pt-12 lg:pb-12">
+        <hr className="border-slate-100" />
+      </div>
     </article>
   )
 }
diff --git a/app/(marketing)/blog/page.tsx b/app/(marketing)/blog/page.tsx
index f9e4562..c4ba1a5 100644
--- a/app/(marketing)/blog/page.tsx
+++ b/app/(marketing)/blog/page.tsx
@@ -2,29 +2,33 @@ import Link from "next/link"
 
 import { Blog } from "@/lib/mdx/sources"
 import { formatDate } from "@/lib/utils"
-import { Icons } from "@/components/icons"
 
 export default async function BlogPage() {
   const posts = await Blog.getAllMdxNodes()
 
   return (
-    <div className="container mx-auto max-w-3xl px-6 py-12 xl:px-8">
-      <h1 className="text-3xl font-bold leading-tight sm:text-4xl md:text-5xl">
-        Blog
-      </h1>
-      <p className="mt-4 text-gray-700">
-        A blog built using MDX content. I copied some sample blog posts from my{" "}
-        <Link href="https://shadcn.com" target="_blank" className="underline">
-          personal site
-        </Link>
-        .
-      </p>
-      <hr className="mt-6 py-6" />
+    <div className="container pt-8 md:max-w-3xl md:pt-12 lg:pt-24">
+      <div className="mx-auto flex flex-col gap-4">
+        <h1 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
+          Blog
+        </h1>
+        <p className="max-w-[75%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
+          A blog built using MDX content. I copied some sample blog posts from
+          my{" "}
+          <Link href="https://shadcn.com" target="_blank" className="underline">
+            personal site
+          </Link>
+          .
+        </p>
+      </div>
+      <div className="md:pt-18 pt-12 pb-8 md:pb-10 lg:pt-24 lg:pb-12">
+        <hr className="border-slate-100" />
+      </div>
       {posts.map((post) => (
         <article key={post.slug} className="flex flex-col space-y-4">
           <div className="flex flex-col space-y-2">
             <Link href={post.url}>
-              <h2 className="max-w-[90%] text-2xl font-bold leading-normal sm:text-3xl md:text-3xl">
+              <h2 className="max-w-[80%] text-2xl font-bold leading-normal sm:text-3xl md:text-3xl">
                 {post.frontMatter.title}
               </h2>
             </Link>
@@ -37,7 +41,9 @@ export default async function BlogPage() {
           {post.frontMatter.excerpt && (
             <p className="text-slate-600">{post.frontMatter.excerpt}</p>
           )}
-          <hr className="mt-6 py-6" />
+          <div className="py-8 md:py-10 lg:py-12">
+            <hr className="border-slate-100" />
+          </div>
         </article>
       ))}
     </div>
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
index 65b4a0d..39c7a74 100644
--- a/app/(marketing)/layout.tsx
+++ b/app/(marketing)/layout.tsx
@@ -7,24 +7,41 @@ interface MarketingLayoutProps {
 
 export default function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
-    <div className="mx-auto w-full px-4">
-      <header className="mx-auto flex max-w-[1440px] items-center justify-between py-4">
-        <div className="flex gap-10">
+    <div className="flex min-h-screen flex-col">
+      <header className="container flex items-center justify-between py-4">
+        <div className="flex gap-6 md:gap-10">
           <Link href="/" className="flex items-center space-x-2">
             <Icons.logo />
-            <span className="font-bold">Taxonomy</span>
+            <span className="hidden font-bold sm:inline-block">Taxonomy</span>
           </Link>
-          <nav>
-            <Link href="/blog" className="hover:underline">
+          <nav className="flex items-center gap-6 sm:gap-8">
+            <Link href="/blog" className="text-sm font-medium hover:underline">
               Blog
             </Link>
+            <Link
+              href="#"
+              className="cursor-not-allowed text-sm font-medium opacity-40 hover:underline"
+            >
+              Pricing
+            </Link>
+            <Link
+              href="#"
+              className="cursor-not-allowed text-sm font-medium opacity-40 hover:underline"
+            >
+              Docs
+            </Link>
           </nav>
         </div>
-        <div>
-          <Link href="/login">Login</Link>
-        </div>
+        <nav>
+          <Link
+            href="/login"
+            className="relative inline-flex items-center rounded-md border border-transparent bg-brand-500 px-6 py-2 text-sm font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+          >
+            Login
+          </Link>
+        </nav>
       </header>
-      <main>{children}</main>
+      <main className="flex-1">{children}</main>
     </div>
   )
 }
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index a23c564..fd432bf 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -1,33 +1,149 @@
-import { Icons } from "@/components/icons"
-import Image from "next/image"
 import Link from "next/link"
 
+import { Icons } from "@/components/icons"
+
 export default function IndexPage() {
   return (
-    <section className="mx-auto grid max-w-[1100px] grid-cols-[1fr_380px] items-center gap-12 py-12">
-      <div>
-        <h1 className="text-6xl font-black leading-[1.1]">
-          Publishing Platform for Everyone
-        </h1>
-        <p className="my-4 max-w-[85%] text-xl leading-8 text-slate-500">
-          A Next.js 13 application built using layouts, server components and
-          everything new in React 18.
-        </p>
-        <Link
-          href="/login"
-          className="relative inline-flex h-11 items-center rounded-md border border-transparent bg-brand-500 px-8 py-2 font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
-        >
-          Get Started
-          <Icons.arrowRight className="ml-2 h-4 w-4" />
-        </Link>
+    <>
+      <section className="container grid items-center justify-center gap-6 pt-8 md:pt-12 lg:pt-24">
+        <div className="flex flex-col items-start gap-4 md:max-w-[800px]">
+          <Link
+            href="https://twitter.com/shadcn"
+            className="group inline-flex items-center space-x-2 rounded-full px-1 text-sm font-medium"
+          >
+            <span>Follow the development on Twitter</span>
+            <span className="rounded-full bg-slate-100 p-1 transition-colors group-hover:bg-slate-900 group-hover:text-white">
+              <Icons.arrowRight className="h-3 w-3" />
+            </span>
+          </Link>
+          <h1 className="text-3xl font-black leading-[1.1] sm:text-4xl md:text-6xl">
+            Publishing Platform for Everyone
+          </h1>
+          <p className="max-w-[85%] text-lg leading-normal text-slate-700 sm:text-xl sm:leading-8">
+            An open source application built using the new router, server
+            components and everything new in Next.js 13.
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <Link
+            href="/login"
+            className="relative inline-flex h-11 items-center rounded-md border border-transparent bg-brand-500 px-8 py-2 font-medium text-white hover:bg-brand-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+          >
+            Get Started
+            <Icons.arrowRight className="ml-2 h-4 w-4" />
+          </Link>
+          <Link
+            href="https://github.com/shadcn/taxonomy"
+            target="_blank"
+            rel="noreferrer"
+            className="relative inline-flex h-11 items-center rounded-md border border-slate-200 bg-white px-8 py-2 font-medium text-slate-900 transition-colors hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2"
+          >
+            GitHub
+          </Link>
+        </div>
+      </section>
+      <div className="md:py-18 container py-12 lg:py-24">
+        <hr className="border-slate-100" />
       </div>
-      <Image
-        src="/images/nextjs-icon-dark-background.png"
-        width={380}
-        height={380}
-        alt="Next.js logo"
-        priority
-      />
-    </section>
+      <section className="container grid justify-center gap-6">
+        <div className="mx-auto flex flex-col gap-4 md:max-w-[800px]">
+          <h2 className="text-2xl font-bold leading-[1.1] sm:text-3xl md:text-6xl">
+            Features
+          </h2>
+          <p className="max-w-[85%] leading-normal text-slate-700 sm:text-lg sm:leading-7">
+            This project is as an experiment to see how a modern app, with
+            features like authentication, subscriptions, API routes, and static
+            pages, would work in Next.js 13.
+          </p>
+        </div>
+        <div className="grid justify-center gap-4 sm:grid-cols-2 md:max-w-[860px] md:grid-cols-3">
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#000000]/20 p-6">
+              <svg viewBox="0 0 24 24" className="h-12 w-12">
+                <path d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z" />
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">Next.js 13</h3>
+                <p className="text-sm text-slate-900">
+                  App dir, Routing, Layouts, Loading UI and API routes.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#61DAFB]/20 p-6">
+              <svg viewBox="0 0 24 24" className="h-12 w-12">
+                <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38a2.167 2.167 0 0 0-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44a23.476 23.476 0 0 0-3.107-.534A23.892 23.892 0 0 0 12.769 4.7c1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442a22.73 22.73 0 0 0-3.113.538 15.02 15.02 0 0 1-.254-1.42c-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87a25.64 25.64 0 0 1-4.412.005 26.64 26.64 0 0 1-1.183-1.86c-.372-.64-.71-1.29-1.018-1.946a25.17 25.17 0 0 1 1.013-1.954c.38-.66.773-1.286 1.18-1.868A25.245 25.245 0 0 1 12 8.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933a25.952 25.952 0 0 0-1.345-2.32zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493a23.966 23.966 0 0 0-1.1-2.98c.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98a23.142 23.142 0 0 0-1.086 2.964c-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39a25.819 25.819 0 0 0 1.341-2.338zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143a22.005 22.005 0 0 1-2.006-.386c.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295a1.185 1.185 0 0 1-.553-.132c-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">React 18</h3>
+                <p className="text-sm text-slate-900">
+                  Server and Client Components. Use hook.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#f45e1e]/20 p-6">
+              <svg viewBox="0 0 24 24" className="h-12 w-12">
+                <path d="M0 12C0 5.373 5.373 0 12 0c4.873 0 9.067 2.904 10.947 7.077l-15.87 15.87a11.981 11.981 0 0 1-1.935-1.099L14.99 12H12l-8.485 8.485A11.962 11.962 0 0 1 0 12Zm12.004 12L24 12.004C23.998 18.628 18.628 23.998 12.004 24Z" />
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">Database</h3>
+                <p className="text-sm text-slate-900">
+                  ORM using Prisma and deployed on PlanetScale.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#06B6D4]/20 p-6">
+              <svg viewBox="0 0 24 24" className="h-12 w-12">
+                <path d="M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z" />
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">Components</h3>
+                <p className="text-sm text-slate-900">
+                  UI components built using Radix UI and styled with Tailwind
+                  CSS.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#29d7c4]/20 p-6">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1"
+                className="h-12 w-12"
+              >
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">Authentication</h3>
+                <p className="text-sm text-slate-900">
+                  Authentication using NextAuth.js and middlewares.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overflow-hidden rounded-lg border border-slate-100 bg-white p-2 shadow-2xl">
+            <div className="flex h-[180px] flex-col justify-between rounded-md bg-[#008CDD]/20 p-6">
+              <svg viewBox="0 0 24 24" className="h-12 w-12">
+                <path d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409 0-.831.683-1.305 1.901-1.305 2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0 9.667 0 7.589.654 6.104 1.872 4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219 2.585.92 3.445 1.574 3.445 2.583 0 .98-.84 1.545-2.354 1.545-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813 1.664-1.305 2.525-3.236 2.525-5.732 0-4.128-2.524-5.851-6.594-7.305h.003z" />
+              </svg>
+              <div className="space-y-2">
+                <h3 className="font-bold text-slate-900">Subscriptions</h3>
+                <p className="text-sm text-slate-900">
+                  Free and paid subscriptions using Stripe.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
   )
 }
diff --git a/components/icons.tsx b/components/icons.tsx
index a9027a0..4500cc4 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -5,6 +5,7 @@ import {
   Command,
   File,
   FileText,
+  Github,
   HelpCircle,
   Image,
   Loader2,
@@ -35,4 +36,5 @@ export const Icons = {
   arrowRight: ArrowRight,
   help: HelpCircle,
   pizza: Pizza,
+  gitHub: Github,
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 360faf7..158b7d1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,10 @@ module.exports = {
     "./ui/**/*.{ts,tsx}",
   ],
   theme: {
+    container: {
+      center: true,
+      padding: "1.5rem",
+    },
     extend: {
       colors: {
         ...colors,