diff --git a/apps/web/src/app/(home)/about/page.tsx b/apps/web/src/app/(home)/about/page.tsx
new file mode 100644
index 0000000..24a47e4
--- /dev/null
+++ b/apps/web/src/app/(home)/about/page.tsx
@@ -0,0 +1,127 @@
+import { ArrowLeft } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { twMerge } from 'tailwind-merge'
+
+import nivoIcon from '@/assets/nivo-icon.svg'
+import developersScreenshot from '@/assets/screenshots/nivo-developers-screenshot.png'
+import newUploadScreenshot from '@/assets/screenshots/nivo-new-upload-screenshot.png'
+import videoScreenshot from '@/assets/screenshots/nivo-video-screenshot.png'
+import webhooksScreenshot from '@/assets/screenshots/nivo-webhooks-screenshot.png'
+import { Button } from '@/components/ui/button'
+
+export default function About() {
+  return (
+    <div className="relative flex min-h-screen w-full flex-col items-center bg-zinc-950">
+      <div className="mx-auto w-full max-w-[800px] px-6 py-20">
+        <div className="flex flex-col gap-8">
+          <div className="mx-auto w-full max-w-[600px]">
+            <div className="-mx-8 flex items-center gap-4">
+              <Button
+                asChild
+                size="lg"
+                variant="link"
+                className="text-zinc-400"
+              >
+                <Link href="/">
+                  <ArrowLeft className="mr-2 size-4" />
+                  back to homepage
+                </Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="mx-auto w-full max-w-[600px]">
+            <Image
+              src={nivoIcon}
+              alt="nivo.video"
+              className="size-8"
+              width={32}
+              height={32}
+            />
+          </div>
+
+          <div className="flex flex-col gap-6">
+            <h1
+              className={twMerge(
+                'mx-auto w-full max-w-[600px] text-3xl font-bold text-white lg:text-4xl',
+              )}
+            >
+              What is nivo.video?
+            </h1>
+            <div className="text-base leading-relaxed text-zinc-200 lg:text-lg">
+              <p className="mx-auto w-full max-w-[600px]">
+                Nivo offers secure video hosting, fast video distribution,
+                transparent and fair pricing, seamless developer experience, and
+                AI content automation.
+              </p>
+
+              <h2 className="mx-auto mt-8 w-full max-w-[600px] text-xl font-bold text-white lg:text-2xl">
+                How does it works?
+              </h2>
+
+              <h2 className="mx-auto mt-8 w-full max-w-[600px] text-lg font-bold text-white lg:text-xl">
+                Upload a video
+              </h2>
+              <p className="mx-auto mt-6 w-full max-w-[600px]">
+                Start by uploading your video files with automatic AI title
+                generation, audio conversion and video transcription.
+              </p>
+              <Image
+                src={newUploadScreenshot}
+                alt="Screenshot of new upload page on nivo.video"
+                className="mt-6 rounded-lg"
+              />
+
+              <p className="mx-auto mt-6 w-full max-w-[600px]">
+                Inspect your new uploads and generate AI description with a
+                click of a button.
+              </p>
+              <Image
+                src={videoScreenshot}
+                alt="Screenshot of new upload page on nivo.video"
+                className="mt-6 rounded-lg"
+              />
+
+              <p className="mx-auto mt-6 w-full max-w-[600px]">
+                Integrate Nivo with your platform by using our API or listening
+                to webhook events.
+              </p>
+              <Image
+                src={developersScreenshot}
+                alt="Screenshot of new upload page on nivo.video"
+                className="mt-6 rounded-lg"
+              />
+
+              <p className="mx-auto mt-6 w-full max-w-[600px]">
+                Check webhook logs to keep track of any communication between
+                nivo and your platform.
+              </p>
+              <Image
+                src={webhooksScreenshot}
+                alt="Screenshot of new upload page on nivo.video"
+                className="mt-6 rounded-lg"
+              />
+            </div>
+          </div>
+
+          <div className="mx-auto w-full max-w-[600px]">
+            <div className="-mx-8 flex items-center gap-4">
+              <Button
+                asChild
+                size="lg"
+                variant="link"
+                className="text-zinc-400"
+              >
+                <Link href="/">
+                  <ArrowLeft className="mr-2 size-4" />
+                  back to homepage
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/web/src/app/(home)/page.tsx b/apps/web/src/app/(home)/page.tsx
index 9ba23bd..65becab 100644
--- a/apps/web/src/app/(home)/page.tsx
+++ b/apps/web/src/app/(home)/page.tsx
@@ -1,6 +1,7 @@
 import { ArrowRight } from 'lucide-react'
 import { Merriweather } from 'next/font/google'
 import Image from 'next/image'
+import Link from 'next/link'
 import { twMerge } from 'tailwind-merge'
 
 import nivoIcon from '@/assets/nivo-icon.svg'
@@ -15,7 +16,7 @@ const merriWeather = Merriweather({
 
 export default function Homepage() {
   return (
-    <div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-zinc-950 selection:bg-teal-400/30 selection:text-white">
+    <div className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-zinc-950">
       <div className="z-20 mx-auto max-w-[1280px] px-6">
         <div className="flex flex-col items-center gap-16">
           <Image
@@ -30,12 +31,12 @@ export default function Homepage() {
             <h1
               className={twMerge(
                 merriWeather.className,
-                'bg-gradient-to-br from-teal-400 to-sky-400 bg-clip-text text-6xl font-bold leading-snug text-transparent',
+                'text-balance bg-gradient-to-br from-teal-400 to-sky-400 bg-clip-text text-center text-5xl font-bold leading-snug text-transparent lg:text-6xl lg:leading-snug',
               )}
             >
               Redefining video content
             </h1>
-            <p className="max-w-2xl text-center text-xl leading-relaxed text-zinc-100">
+            <p className="max-w-2xl text-center text-lg leading-relaxed text-zinc-100 lg:text-xl lg:leading-relaxed">
               Nivo offers a{' '}
               <strong>
                 comprehensive video solution tailored for online content
@@ -47,6 +48,9 @@ export default function Homepage() {
           </div>
 
           <div className="flex items-center gap-4">
+            <Button asChild size="lg" variant="link" className="text-zinc-400">
+              <Link href="/about">What is Nivo?</Link>
+            </Button>
             <Button
               asChild
               className="bg-teal-400 text-teal-950 hover:bg-teal-500 dark:bg-teal-400 dark:text-teal-950 dark:hover:bg-teal-500"
diff --git a/apps/web/src/assets/app.png b/apps/web/src/assets/app.png
deleted file mode 100644
index 3564f63..0000000
Binary files a/apps/web/src/assets/app.png and /dev/null differ
diff --git a/apps/web/src/assets/screenshots/nivo-developers-screenshot.png b/apps/web/src/assets/screenshots/nivo-developers-screenshot.png
new file mode 100644
index 0000000..615a22f
Binary files /dev/null and b/apps/web/src/assets/screenshots/nivo-developers-screenshot.png differ
diff --git a/apps/web/src/assets/screenshots/nivo-new-upload-screenshot.png b/apps/web/src/assets/screenshots/nivo-new-upload-screenshot.png
new file mode 100644
index 0000000..d80459e
Binary files /dev/null and b/apps/web/src/assets/screenshots/nivo-new-upload-screenshot.png differ
diff --git a/apps/web/src/assets/screenshots/nivo-video-screenshot.png b/apps/web/src/assets/screenshots/nivo-video-screenshot.png
new file mode 100644
index 0000000..50e5d2c
Binary files /dev/null and b/apps/web/src/assets/screenshots/nivo-video-screenshot.png differ
diff --git a/apps/web/src/assets/screenshots/nivo-webhooks-screenshot.png b/apps/web/src/assets/screenshots/nivo-webhooks-screenshot.png
new file mode 100644
index 0000000..632d1e9
Binary files /dev/null and b/apps/web/src/assets/screenshots/nivo-webhooks-screenshot.png differ
diff --git a/packages/auth/auth.config.ts b/packages/auth/auth.config.ts
index 5e0ed05..74e71ca 100644
--- a/packages/auth/auth.config.ts
+++ b/packages/auth/auth.config.ts
@@ -66,7 +66,9 @@ export const authConfig = {
       const isLoggedIn = !!auth?.user
 
       const isOnPublicPages =
-        nextUrl.pathname.startsWith('/auth') || nextUrl.pathname === '/'
+        nextUrl.pathname.startsWith('/auth') ||
+        nextUrl.pathname === '/' ||
+        nextUrl.pathname === '/about'
       const isOnWebhooks = nextUrl.pathname.startsWith('/api/webhooks')
       const isOnPublicAPIRoutes = nextUrl.pathname.startsWith('/api/auth')
       const isOnAPIRoutes = nextUrl.pathname.startsWith('/api')