From 968d600d31d9838f2c53b21805b227a713102476 Mon Sep 17 00:00:00 2001
From: Jorge Lapa <2780099+heyjorgedev@users.noreply.github.com>
Date: Tue, 9 Sep 2025 10:21:41 +0100
Subject: [PATCH] wip

---
 src/app/page.tsx                              | 118 +++++++++---------
 src/components/logo-cloud.tsx                 |  14 +--
 src/components/navbar.tsx                     |  18 +--
 src/components/providers/providers.tsx        |  28 ++++-
 src/frontend/studio/components/Pricing.tsx    |  28 +++--
 .../studio/components/TestimonialCard.tsx     |  20 +--
 6 files changed, 126 insertions(+), 100 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e240445a..ee803a77 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,23 +1,22 @@
-import TestimonialCard from '@/frontend/studio/components/TestimonialCard'
 import { LogoCloud } from '@/components/logo-cloud'
 import Navbar from '@/components/navbar'
 import DuolingoButton from '@/components/ui/duolingo-button'
+import Pricing from '@/frontend/studio/components/Pricing'
+import TestimonialCard from '@/frontend/studio/components/TestimonialCard'
 import { auth } from '@/lib/auth'
 import MuxPlayer from '@mux/mux-player-react'
 import { headers } from 'next/headers'
 import Link from 'next/link'
-import Script from 'next/script'
-import Pricing from '@/frontend/studio/components/Pricing'
 
 const Footer = () => {
   return (
-    <footer className="bg-white border-t border-gray-200">
+    <footer className="bg-white dark:bg-zinc-900 border-t border-gray-200 dark:border-zinc-800">
       <div className="max-w-7xl mx-auto px-6 lg:px-8 py-12">
         <div className="text-center space-y-4">
-          <p className="text-gray-600 text-base">
+          <p className="text-gray-600 dark:text-zinc-500 text-base">
             Your content engine for growing on Twitter.
           </p>
-          <p className="text-gray-500 text-sm">
+          <p className="text-gray-500 dark:text-zinc-600  text-sm">
             © 2025 Contentport.
           </p>
         </div>
@@ -33,17 +32,17 @@ const Page = async () => {
 
   return (
     <>
-      <section className="bg-gray-100">
+      <section className="bg-gray-100 dark:bg-zinc-900">
         <div className="relative max-w-7xl mx-auto">
           <Navbar title={session ? 'Studio' : 'Get Started'} />
         </div>
 
-        <div className="relative isolate pt-20">
+        <div className="relative isolate pt-32">
           <section className="py-24">
             <div className="mx-auto max-w-7xl px-6 lg:px-8 space-y-20">
               <div className="max-w-4xl mx-auto text-center">
                 <div className="flex flex-col justify-center items-center">
-                  <h1 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">
+                  <h1 className="text-5xl font-semibold tracking-tight text-balance text-gray-900 dark:text-white sm:text-6xl">
                     Your{' '}
                     <span className="relative whitespace-nowrap text-indigo-600">
                       <span className="absolute z-0 bg-indigo-500/10 w-[103%] h-[100%] -left-[1%] -top-[2.5%] -rotate-1" />
@@ -51,9 +50,9 @@ const Page = async () => {
                     </span>{' '}
                     for growing on Twitter
                   </h1>
-                  <p className="mt-6 text-gray-500 text-lg sm:text-xl max-w-2xl">
+                  <p className="mt-6 text-gray-500 dark:text-zinc-500 text-lg sm:text-xl max-w-2xl">
                     Contentport helps you{' '}
-                    <span className="text-gray-900">
+                    <span className="text-gray-900 dark:text-white">
                       create, schedule & manage twitter content
                     </span>{' '}
                     at scale. Perfect for busy founders & content managers.
@@ -79,27 +78,27 @@ const Page = async () => {
                     <div className="mt-2 flex flex-col sm:flex-row items-center justify-center gap-4">
                       <div className="flex -space-x-2">
                         <img
-                          className="h-10 w-10 rounded-full ring-2 ring-white"
+                          className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-800"
                           src="/images/user/ahmet_128.png"
                           alt="User testimonial"
                         />
                         <img
-                          className="h-10 w-10 rounded-full ring-2 ring-white"
+                          className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-800"
                           src="/images/user/chris_128.png"
                           alt="User testimonial"
                         />
                         <img
-                          className="h-10 w-10 rounded-full ring-2 ring-white"
+                          className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-800"
                           src="/images/user/justin_128.png"
                           alt="User testimonial"
                         />
                         <img
-                          className="h-10 w-10 rounded-full ring-2 ring-white"
+                          className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-800"
                           src="/images/user/rohit_128.png"
                           alt="User testimonial"
                         />
                         <img
-                          className="h-10 w-10 rounded-full ring-2 ring-white"
+                          className="h-10 w-10 rounded-full ring-2 ring-white dark:ring-zinc-800"
                           src="/images/user/vladan_128.png"
                           alt="User testimonial"
                         />
@@ -116,9 +115,9 @@ const Page = async () => {
                             </svg>
                           ))}
                         </div>
-                        <p className="text-base text-left text-gray-600">
+                        <p className="text-base text-left text-gray-600 dark:text-zinc-500">
                           Trusted by{' '}
-                          <span className="font-medium text-gray-900">1.370</span>{' '}
+                          <span className="font-medium text-gray-900 dark:text-white">1.370</span>{' '}
                           founders
                         </p>
                       </div>
@@ -127,11 +126,10 @@ const Page = async () => {
                 </div>
               </div>
 
-              <div className="relative flex items-center h-fit -m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-gray-900/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-4 shadow-2xl">
+              <div className="relative z-0 flex items-center h-fit -m-2 rounded-xl bg-white/15 dark:bg-white/5 p-2 ring-1 ring-zinc-300/50 dark:ring-white/10 ring-inset lg:-m-4 lg:rounded-2xl lg:p-2.5 shadow-2xl backdrop-blur-sm after:absolute after:inset-0 after:bg-indigo-500 after:-z-10 after:rounded-xl after:filter after:blur-xl after:opacity-25">
                 <MuxPlayer
                   accentColor="#4f46e5"
-                  style={{ aspectRatio: 16 / 9 }}
-                  className="w-full h-full overflow-hidden rounded-lg lg:rounded-xl shadow-lg"
+                  className="w-full h-full overflow-hidden rounded-lg lg:rounded-xl shadow-lg aspect-video border dark:border-white/10"
                   poster="https://image.mux.com/01ddBxgG7W53ZCMZ02LLP692sLD4w009XzUtoCd00NcSBO8/thumbnail.png?time=10"
                   playbackId="01ddBxgG7W53ZCMZ02LLP692sLD4w009XzUtoCd00NcSBO8"
                   playsInline
@@ -142,17 +140,17 @@ const Page = async () => {
             </div>
           </section>
 
-          <section className="py-24 bg-white">
+          <section className="py-24 bg-white dark:bg-zinc-800">
             <div className="mx-auto max-w-7xl px-6 lg:px-8">
               <div className="text-center mb-16">
-                <h2 className="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                <h2 className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
                   How does Contentport compare?
                 </h2>
               </div>
 
               <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
                 <div className="relative">
-                  <div className="rounded-3xl border-4 border-gray-200 bg-gray-100 p-8 h-full">
+                  <div className="rounded-3xl border-4 border-gray-200 dark:border-zinc-600 bg-gray-100 dark:bg-zinc-700 p-8 h-full">
                     <div className="text-left">
                       <div className="w-full h-80 bg-gray-100 rounded-2xl mb-6 overflow-hidden">
                         <img
@@ -161,7 +159,7 @@ const Page = async () => {
                           className="w-full h-full object-cover"
                         />
                       </div>
-                      <h3 className="text-2xl sm:text-3xl  font-semibold text-gray-900 mb-6">
+                      <h3 className="text-2xl sm:text-3xl  font-semibold text-gray-900 dark:text-white mb-6">
                         Competitors
                       </h3>
                     </div>
@@ -179,7 +177,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-300">
                           Can't manage multiple accounts / pay per account
                         </p>
                       </div>
@@ -195,7 +193,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-300">
                           Tweets look boring & perform poorly
                         </p>
                       </div>
@@ -211,7 +209,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">Outdated AI models from 2024</p>
+                        <p className="text-gray-600 dark:text-zinc-300">Outdated AI models from 2024</p>
                       </div>
                       <div className="flex items-start gap-3">
                         <svg
@@ -225,7 +223,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">Closed source, zero transparency</p>
+                        <p className="text-gray-600 dark:text-zinc-300">Closed source, zero transparency</p>
                       </div>
                       <div className="flex items-start gap-3">
                         <svg
@@ -239,7 +237,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-300">
                           Generic output that tries to work for everyone
                         </p>
                       </div>
@@ -248,7 +246,7 @@ const Page = async () => {
                 </div>
 
                 <div className="relative">
-                  <div className="rounded-3xl border-4 border-indigo-600 bg-gray-100 p-8 h-full text-white">
+                  <div className="rounded-3xl border-4 border-indigo-600 dark:border-indigo-500 bg-gray-100 dark:bg-zinc-700 p-8 h-full text-white">
                     <div className="text-left">
                       <div className="w-full h-80 bg-purple-800/30 rounded-2xl mb-6 overflow-hidden border border-purple-400/20">
                         <img
@@ -257,7 +255,7 @@ const Page = async () => {
                           className="w-full h-full object-cover object-top opacity-90"
                         />
                       </div>
-                      <h3 className="text-2xl sm:text-3xl font-semibold text-gray-900 mb-6">
+                      <h3 className="text-2xl sm:text-3xl font-semibold text-gray-900 dark:text-white mb-6">
                         Contentport
                       </h3>
                     </div>
@@ -275,7 +273,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-400">
                           All personal & company accounts in one place
                         </p>
                       </div>
@@ -291,7 +289,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-400">
                           Create beautiful tweet visuals without design skills
                         </p>
                       </div>
@@ -307,7 +305,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-400">
                           The most modern AI models available
                         </p>
                       </div>
@@ -323,7 +321,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-400">
                           100% open-source, transparent & auditable
                         </p>
                       </div>
@@ -339,7 +337,7 @@ const Page = async () => {
                             clipRule="evenodd"
                           />
                         </svg>
-                        <p className="text-gray-600">
+                        <p className="text-gray-600 dark:text-zinc-400">
                           Designed for technical founders & content managers
                         </p>
                       </div>
@@ -352,12 +350,12 @@ const Page = async () => {
 
           <section className="py-24">
             <div className="space-y-12">
-              <h2 className="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl text-center">
+              <h2 className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white sm:text-5xl text-center">
                 <span className="relative text-indigo-600">
                   <span className="absolute z-0 bg-indigo-500/10 w-[105%] h-[105%] -left-[2.5%] -top-[2.5%] -rotate-1" />
                   Within 60 seconds:
                 </span>
-                <span className="block mt-4 text-gray-800 text-3xl sm:text-4xl space-y-2">
+                <span className="block mt-4 text-gray-800 dark:text-zinc-200 text-3xl sm:text-4xl space-y-2">
                   <span className="block opacity-70">get an idea.</span>
                   <span className="block opacity-80">draft a tweet.</span>
                   <span className="block opacity-90">add a beautiful visual.</span>
@@ -376,10 +374,10 @@ const Page = async () => {
             </div>
           </section>
 
-          <section className="py-24 bg-white">
+          <section className="py-24 bg-white dark:bg-zinc-900">
             <div className="space-y-12">
               <div className="text-center max-w-3xl mx-auto">
-                <h2 className="text-4xl text-balance font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                <h2 className="text-4xl text-balance font-semibold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
                   Used by busy founders & content managers
                 </h2>
               </div>
@@ -399,7 +397,7 @@ const Page = async () => {
             <div className="mx-auto max-w-7xl px-6 lg:px-8">
               <div className="space-y-6">
                 <div className="text-center max-w-3xl mx-auto">
-                  <h2 className="text-4xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
+                  <h2 className="text-4xl font-semibold tracking-tight text-gray-900 dark:text-white sm:text-5xl">
                     What you can achieve with Contentport{' '}
                     <span className="relative text-indigo-600">
                       <span className="absolute z-0 bg-indigo-500/10 w-[105%] h-[105%] -left-[2.5%] -top-[2.5%] -rotate-1" />
@@ -413,8 +411,8 @@ const Page = async () => {
                     <div className="px-8 py-3 bg-gray-800 text-white rounded-full text-sm font-medium mb-4 w-fit mx-auto">
                       Today
                     </div>
-                    <div className="bg-white border border-gray-200 rounded-2xl p-8 space-y-6">
-                      <h3 className="text-xl font-semibold text-gray-900">
+                    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-2xl p-8 space-y-6">
+                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Start creating
                       </h3>
                       <div className="space-y-4">
@@ -430,7 +428,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">Contentport learns your style</p>
+                          <p className="text-gray-600 dark:text-zinc-400">Contentport learns your style</p>
                         </div>
                         <div className="flex items-start gap-3">
                           <svg
@@ -444,7 +442,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             Go from idea to ready-to-post tweets
                           </p>
                         </div>
@@ -460,7 +458,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             Queue 3+ days of content so you're instantly consistent
                           </p>
                         </div>
@@ -469,11 +467,11 @@ const Page = async () => {
                   </div>
 
                   <div>
-                    <div className="px-8 py-3 bg-gray-200 text-gray-600 rounded-full text-sm font-medium mb-4 w-fit mx-auto">
+                    <div className="px-8 py-3 bg-gray-200 dark:bg-zinc-700 text-gray-600 dark:text-zinc-300 rounded-full text-sm font-medium mb-4 w-fit mx-auto">
                       Day 3
                     </div>
-                    <div className="bg-white border border-gray-200 rounded-2xl p-8 space-y-6">
-                      <h3 className="text-xl font-semibold text-gray-900">
+                    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-2xl p-8 space-y-6">
+                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Grow without losing focus
                       </h3>
                       <div className="space-y-4">
@@ -489,7 +487,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             Multiple posts lined up and scheduled
                           </p>
                         </div>
@@ -505,7 +503,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             You keep posting, even when you're busy coding
                           </p>
                         </div>
@@ -521,18 +519,18 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">Engagement starts building</p>
+                          <p className="text-gray-600 dark:text-zinc-400">Engagement starts building</p>
                         </div>
                       </div>
                     </div>
                   </div>
 
                   <div>
-                    <div className="px-8 py-3 bg-gray-200 text-gray-600 rounded-full text-sm font-medium mb-4 w-fit mx-auto">
+                    <div className="px-8 py-3 bg-gray-200 dark:bg-zinc-700 text-gray-600 dark:text-zinc-300 rounded-full text-sm font-medium mb-4 w-fit mx-auto">
                       Day 7
                     </div>
-                    <div className="bg-white border border-gray-200 rounded-2xl p-8 space-y-6">
-                      <h3 className="text-xl font-semibold text-gray-900">
+                    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-2xl p-8 space-y-6">
+                      <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
                         Build a system
                       </h3>
                       <div className="space-y-4">
@@ -548,7 +546,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             Save 5+ hours per week on content creation{' '}
                           </p>
                         </div>
@@ -564,7 +562,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">
+                          <p className="text-gray-600 dark:text-zinc-400">
                             Post consistently, even on busy days
                           </p>
                         </div>
@@ -580,7 +578,7 @@ const Page = async () => {
                               clipRule="evenodd"
                             />
                           </svg>
-                          <p className="text-gray-600">Repeatable, proven workflow</p>
+                          <p className="text-gray-600 dark:text-zinc-400">Repeatable, proven workflow</p>
                         </div>
                       </div>
                     </div>
@@ -601,7 +599,7 @@ const Page = async () => {
           </section>
 
           {/* Pricing */}
-          <section className=" bg-white ">
+          <section className=" bg-white dark:bg-zinc-900">
             <div className="mx-auto max-w-7xl px-6 lg:px-8">
               <Pricing targetUrl="/login" />
             </div>
diff --git a/src/components/logo-cloud.tsx b/src/components/logo-cloud.tsx
index 9d42a610..3a60ba3e 100644
--- a/src/components/logo-cloud.tsx
+++ b/src/components/logo-cloud.tsx
@@ -3,14 +3,14 @@ import { Icons } from './icons'
 export const LogoCloud = () => {
   return (
     <div className="mx-auto max-w-7xl px-6 lg:px-8">
-      <h2 className="text-center text-base/7 text-gray-500">Trusted by teams at</h2>
+      <h2 className="text-center text-base/7 text-gray-500 dark:text-zinc-500">Trusted by teams at</h2>
       <div className="mx-auto mt-10 grid grid-cols-1 sm:grid-cols-2 max-w-lg items-center gap-x-8 gap-y-10 sm:max-w-xl sm:gap-x-10 lg:mx-0 lg:max-w-none md:grid-cols-5 grayscale opacity-50">
         <img
           alt="zerodotemail"
           src="/logo/zerodotemail.svg"
           width={158}
           height={48}
-          className="max-h-12 w-full object-contain lg:col-span-1"
+          className="max-h-12 w-full object-contain lg:col-span-1 dark:invert"
         />
 
         <img
@@ -18,7 +18,7 @@ export const LogoCloud = () => {
           src="/logo/upstash.png"
           width={158}
           height={48}
-          className="max-h-12 w-full object-contain lg:col-span-1 dark:hidden"
+          className="max-h-12 w-full object-contain lg:col-span-1 dark:invert"
         />
 
         <img
@@ -26,19 +26,19 @@ export const LogoCloud = () => {
           src="/logo/v0.svg"
           width={158}
           height={48}
-          className="max-h-10 w-full object-contain lg:col-span-1"
+          className="max-h-10 w-full object-contain lg:col-span-1 dark:invert"
         />
 
         <div className="flex justify-center w-full items-center">
-          <div className="flex shrink-0 size-12 items-center justify-center rounded bg-stone-800">
+          <div className="flex shrink-0 size-12 items-center justify-center rounded bg-stone-800 dark:invert">
             <Icons.context7 className="size-8" />
           </div>
-          <span className="px-2 text-lg font-inter font-semibold leading-none text-stone-800">
+          <span className="px-2 text-lg font-inter font-semibold leading-none text-stone-800 dark:text-zinc-600">
             Context7
           </span>
         </div>
 
-        <div className="w-full flex items-center justify-center">
+        <div className="w-full flex items-center justify-center dark:invert">
           <Icons.databuddy className="size-12" />
         </div>
       </div>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 351f9625..3384d81b 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,13 +1,13 @@
 'use client'
 
-import * as React from 'react'
 import { Icons } from '@/components/icons'
 import { baseStyles, sizeStyles, variantStyles } from '@/components/ui/duolingo-button'
+import { GITHUB_REPO } from '@/constants/misc'
+import { authClient } from '@/lib/auth-client'
 import { cn } from '@/lib/utils'
 import { Menu, X } from 'lucide-react'
 import Link from 'next/link'
-import { GITHUB_REPO } from '@/constants/misc'
-import { authClient } from '@/lib/auth-client'
+import * as React from 'react'
 
 const Logo = ({ className }: { className?: string }) => (
   <Link href="/" className={cn('-m-1.5 p-1.5 flex items-center gap-1.5', className)}>
@@ -28,7 +28,7 @@ const NavigationLinks = ({
       href={`https://github.com/${GITHUB_REPO}`}
       target="_blank"
       rel="noopener noreferrer"
-      className="text-gray-700 w-fit hover:text-gray-900 transition-colors font-medium"
+      className="text-gray-700 dark:text-white w-fit hover:text-gray-900 transition-colors font-medium"
     >
       GitHub
     </Link>
@@ -80,9 +80,9 @@ const Navbar = ({ title }: { title: string }) => {
   return (
     <>
       {mobileMenuOpen && (
-        <div className="fixed inset-0 z-[50] bg-black bg-opacity-50" />
+        <div className="fixed inset-0 z-[50] bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => setMobileMenuOpen(false)} />
       )}
-      <header className="fixed inset-x-0 top-0 z-50 bg-white/80 backdrop-blur-md border-b border-black border-opacity-[0.1] h-16">
+      <header className="fixed inset-x-0 top-0 z-50 bg-white/80 dark:bg-zinc-800/60 backdrop-blur-md border-b dark:border-zinc-700/60 h-16">
         <nav className="max-w-7xl mx-auto h-full flex items-center px-6 lg:px-8">
           <div className="flex sm:flex-1">
             <Logo />
@@ -91,7 +91,7 @@ const Navbar = ({ title }: { title: string }) => {
             <button
               type="button"
               onClick={() => setMobileMenuOpen(true)}
-              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700 dark:text-white"
             >
               <span className="sr-only">Open main menu</span>
               <Menu aria-hidden="true" className="size-6" />
@@ -108,13 +108,13 @@ const Navbar = ({ title }: { title: string }) => {
               mobileMenuOpen ? 'fixed inset-0 z-[100]' : 'hidden',
             )}
           >
-            <div className="absolute top-0 inset-x-0 bg-white right-0 z-[100] w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+            <div className="absolute top-0 inset-x-0 bg-white dark:bg-zinc-900 right-0 z-[100] w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
               <div className="flex items-center justify-between">
                 <Logo />
                 <button
                   type="button"
                   onClick={() => setMobileMenuOpen(false)}
-                  className="-m-2.5 rounded-md p-2.5 text-gray-700"
+                  className="-m-2.5 rounded-md p-2.5 text-gray-700 dark:text-zinc-400"
                 >
                   <span className="sr-only">Close menu</span>
                   <X aria-hidden="true" className="size-6" />
diff --git a/src/components/providers/providers.tsx b/src/components/providers/providers.tsx
index dca02cca..0f671fb4 100644
--- a/src/components/providers/providers.tsx
+++ b/src/components/providers/providers.tsx
@@ -1,8 +1,8 @@
 'use client'
 
-import { ConfettiProvider } from '@/hooks/use-confetti'
 import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { HTTPException } from 'hono/http-exception'
+import { ThemeProvider as NextThemesProvider } from "next-themes"
 import { ReactNode, useState } from 'react'
 import toast from 'react-hot-toast'
 
@@ -11,6 +11,30 @@ interface ProvidersProps {
 }
 
 export function Providers({ children }: ProvidersProps) {
+  return (
+    <QueryProvider>
+      <ThemeProvider>
+        {children}
+      </ThemeProvider>
+    </QueryProvider>
+  )
+}
+
+function ThemeProvider({
+  children,
+}: { children: ReactNode }) {
+  return (
+    <NextThemesProvider 
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange>
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+function QueryProvider({ children }: { children: ReactNode }) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -42,4 +66,4 @@ export function Providers({ children }: ProvidersProps) {
   )
 
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-}
+}
\ No newline at end of file
diff --git a/src/frontend/studio/components/Pricing.tsx b/src/frontend/studio/components/Pricing.tsx
index 4e0e02e4..d7067f96 100644
--- a/src/frontend/studio/components/Pricing.tsx
+++ b/src/frontend/studio/components/Pricing.tsx
@@ -1,8 +1,7 @@
 'use client'
+import DuolingoButton from '@/components/ui/duolingo-button'
 import { cn } from '@/lib/utils'
-import dynamic from 'next/dynamic'
 import { CheckIcon } from '@phosphor-icons/react'
-import DuolingoButton from '@/components/ui/duolingo-button'
 import Link from 'next/link'
 
 interface PricingProps {
@@ -49,7 +48,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
     },
   ]
   return (
-    <div className="relative isolate bg-white px-6 py-24">
+    <div className="relative isolate bg-white dark:bg-zinc-900 px-6 py-24">
       <div
         aria-hidden="true"
         className="absolute inset-x-0 -top-3 -z-10 transform-gpu overflow-hidden px-36 blur-3xl"
@@ -64,7 +63,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
       </div>
       <div className="mx-auto max-w-4xl text-center">
         <h2 className="text-base/7 font-semibold text-indigo-600">Pricing</h2>
-        <p className="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 sm:text-6xl">
+        <p className="mt-2 text-5xl font-semibold tracking-tight text-balance text-gray-900 dark:text-white sm:text-6xl">
           Get started with Contentport
         </p>
       </div>
@@ -73,15 +72,20 @@ export default function Pricing({ targetUrl }: PricingProps) {
           <div
             key={tier.id}
             className={cn(
-              tier.featured
-                ? 'relative bg-gray-900 shadow-2xl'
-                : 'bg-white/60 sm:mx-8 lg:mx-0',
+              {
+                'relative bg-gray-900 dark:bg-slate-800 shadow-2xl': tier.featured,
+                'bg-white/60 dark:bg-zinc-800 sm:mx-8 lg:mx-0': !tier.featured,
+              },
               tier.featured
                 ? ''
                 : tierIdx === 0
                   ? 'rounded-t-3xl sm:rounded-b-none lg:rounded-tr-none lg:rounded-bl-3xl'
                   : 'sm:rounded-t-none lg:rounded-tr-3xl lg:rounded-bl-none',
-              'rounded-3xl p-8 ring-1 ring-gray-900/10 sm:p-10',
+              'rounded-3xl p-8 ring-1 ring-gray-900/10  sm:p-10',
+              {
+                'dark:ring-slate-700': tier.featured,
+                'dark:ring-zinc-700': !tier.featured,
+              }
             )}
           >
             {/* Most value badge for Pro plan */}
@@ -105,7 +109,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
             <p className="mt-4 flex items-baseline gap-x-2">
               <span
                 className={cn(
-                  tier.featured ? 'text-white' : 'text-gray-900',
+                  tier.featured ? 'text-white' : 'text-gray-900 dark:text-zinc-300',
                   'text-5xl font-semibold tracking-tight',
                 )}
               >
@@ -113,7 +117,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
               </span>
               <span
                 className={cn(
-                  tier.featured ? 'text-gray-400' : 'text-gray-500',
+                  tier.featured ? 'text-gray-400' : 'text-gray-500 dark:text-zinc-500',
                   'text-base',
                 )}
               >
@@ -122,7 +126,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
             </p>
             <p
               className={cn(
-                tier.featured ? 'text-gray-300' : 'text-gray-600',
+                tier.featured ? 'text-gray-300 dark:text-white' : 'text-gray-600 dark:text-zinc-400',
                 'mt-6 text-base/7',
               )}
             >
@@ -131,7 +135,7 @@ export default function Pricing({ targetUrl }: PricingProps) {
             <ul
               role="list"
               className={cn(
-                tier.featured ? 'text-gray-300' : 'text-gray-600',
+                tier.featured ? 'text-gray-300 dark:text-zinc-200' : 'text-gray-600 dark:text-zinc-400',
                 'mt-8 space-y-3 text-sm/6 sm:mt-10',
               )}
             >
diff --git a/src/frontend/studio/components/TestimonialCard.tsx b/src/frontend/studio/components/TestimonialCard.tsx
index ad596bef..2f92d82a 100644
--- a/src/frontend/studio/components/TestimonialCard.tsx
+++ b/src/frontend/studio/components/TestimonialCard.tsx
@@ -43,11 +43,11 @@ const testimonials = organizeTestimonials(transformedTestimonials)
 
 export default function Example() {
   return (
-    <div className="relative isolate bg-white">
+    <div className="relative isolate bg-white dark:bg-zinc-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
-        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
-          <figure className="rounded-2xl bg-white shadow-lg ring-1 ring-gray-900/5 sm:col-span-2 xl:col-start-2 xl:row-end-1">
-            <blockquote className="p-6 space-y-4 whitespace-pre-wrap text-lg font-semibold tracking-tight text-gray-900 sm:p-10 sm:text-xl/8">
+        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 grid-rows-1 gap-8 text-sm/6 text-gray-900 dark:text-white sm:mt-20 sm:grid-cols-2 xl:mx-0 xl:max-w-none xl:grid-flow-col xl:grid-cols-4">
+          <figure className="rounded-2xl bg-white dark:bg-zinc-800 shadow-lg ring-1 ring-gray-900/5 dark:ring-zinc-700 sm:col-span-2 xl:col-start-2 xl:row-end-1">
+            <blockquote className="p-6 space-y-4 whitespace-pre-wrap text-lg font-semibold tracking-tight text-gray-900 dark:text-white sm:p-10 sm:text-xl/8">
               {featuredTestimonial.body.split('\n\n').map((part, index) => (
                 <p key={index}>{part}</p>
               ))}
@@ -59,10 +59,10 @@ export default function Example() {
                 className="size-10 flex-none rounded-full bg-gray-50"
               />
               <div className="flex-auto">
-                <p className="font-semibold text-gray-900 leading-none">
+                <p className="font-semibold text-gray-900 dark:text-white leading-none">
                   {featuredTestimonial.author.name}
                 </p>
-                <p className="text-gray-600">{`@${featuredTestimonial.author.handle} `}</p>
+                <p className="text-gray-600 dark:text-zinc-500">{`@${featuredTestimonial.author.handle} `}</p>
               </div>
             </figcaption>
           </figure>
@@ -83,9 +83,9 @@ export default function Example() {
                   {column.map((testimonial) => (
                     <figure
                       key={testimonial.author.handle}
-                      className="rounded-2xl bg-white p-6 shadow-lg ring-1 ring-gray-900/5"
+                      className="rounded-2xl bg-white dark:bg-zinc-800 p-6 shadow-lg ring-1 ring-gray-900/5 dark:ring-zinc-700"
                     >
-                      <blockquote className="text-gray-900">
+                      <blockquote className="text-gray-900 dark:text-white">
                         <p className="whitespace-pre-wrap">{testimonial.body}</p>
                       </blockquote>
                       <figcaption className="mt-6 flex items-center gap-x-4">
@@ -95,10 +95,10 @@ export default function Example() {
                           className="size-10 rounded-full bg-gray-50"
                         />
                         <div>
-                          <p className="font-semibold text-gray-900 leading-none">
+                          <p className="font-semibold text-gray-900 dark:text-white leading-none">
                             {testimonial.author.name}
                           </p>
-                          <p className="text-gray-600">{`@${testimonial.author.handle} `}</p>
+                          <p className="text-gray-600 dark:text-zinc-500">{`@${testimonial.author.handle} `}</p>
                         </div>
                       </figcaption>
                     </figure>