diff --git a/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx b/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
index e3c981561..fe40b667b 100644
--- a/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
+++ b/apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx
@@ -3,7 +3,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function CookiePolicyPage() {
   return (
-    <div className={'mt-8'}>
+    <div>
       <div className={'container mx-auto'}>
         <SitePageHeader
           title={`Cookie Policy`}
diff --git a/apps/web/app/(marketing)/_components/site-footer.tsx b/apps/web/app/(marketing)/_components/site-footer.tsx
index 132c7044d..a6df3ab6d 100644
--- a/apps/web/app/(marketing)/_components/site-footer.tsx
+++ b/apps/web/app/(marketing)/_components/site-footer.tsx
@@ -9,7 +9,7 @@ const YEAR = new Date().getFullYear();
 
 export function SiteFooter() {
   return (
-    <footer className={'py-8 lg:py-24'}>
+    <footer className={'border-t py-8 xl:py-12 2xl:py-14'}>
       <div className={'container mx-auto'}>
         <div className={'flex flex-col space-y-8 lg:flex-row lg:space-y-0'}>
           <div
diff --git a/apps/web/app/(marketing)/_components/site-header-account-section.tsx b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
index 2c636bd1e..930e71ac0 100644
--- a/apps/web/app/(marketing)/_components/site-header-account-section.tsx
+++ b/apps/web/app/(marketing)/_components/site-header-account-section.tsx
@@ -10,6 +10,7 @@ import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown
 import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
 import { useUser } from '@kit/supabase/hooks/use-user';
 import { Button } from '@kit/ui/button';
+import { ModeToggle } from '@kit/ui/mode-toggle';
 import { Trans } from '@kit/ui/trans';
 
 import featuresFlagConfig from '~/config/feature-flags.config';
@@ -55,10 +56,18 @@ function SuspendedPersonalAccountDropdown(props: { user: User | null }) {
 
 function AuthButtons() {
   return (
-    <div className={'hidden space-x-2 lg:flex'}>
+    <div className={'hidden space-x-0.5 lg:flex'}>
+      <ModeToggle />
+
+      <Link href={pathsConfig.auth.signIn}>
+        <Button variant={'link'}>
+          <Trans i18nKey={'auth:signIn'} />
+        </Button>
+      </Link>
+
       <Link href={pathsConfig.auth.signUp}>
-        <Button variant={'outline'}>
-          <Trans i18nKey={'auth:signUp'} />
+        <Button className={'rounded-full'}>
+          <Trans i18nKey={'auth:getStarted'} />
           <ChevronRight className={'h-4'} />
         </Button>
       </Link>
diff --git a/apps/web/app/(marketing)/_components/site-header.tsx b/apps/web/app/(marketing)/_components/site-header.tsx
index 4a86dc731..124e14013 100644
--- a/apps/web/app/(marketing)/_components/site-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-header.tsx
@@ -1,27 +1,23 @@
 import type { User } from '@supabase/supabase-js';
 
-import { ModeToggle } from '@kit/ui/mode-toggle';
-
 import { SiteHeaderAccountSection } from '~/(marketing)/_components/site-header-account-section';
 import { SiteNavigation } from '~/(marketing)/_components/site-navigation';
 import { AppLogo } from '~/components/app-logo';
 
 export function SiteHeader(props: { user?: User | null }) {
   return (
-    <div className={'container mx-auto'}>
-      <div className="flex h-16 items-center justify-between">
-        <div className={'w-4/12'}>
-          <AppLogo />
-        </div>
+    <div className={'border-b'}>
+      <div className={'container mx-auto'}>
+        <div className="flex h-16 items-center justify-between">
+          <div className={'flex w-6/12 items-center space-x-8'}>
+            <AppLogo />
 
-        <div className={'hidden w-4/12 justify-center lg:flex'}>
-          <SiteNavigation />
-        </div>
+            <SiteNavigation />
+          </div>
 
-        <div className={'flex flex-1 items-center justify-end space-x-4'}>
-          <ModeToggle />
-
-          <SiteHeaderAccountSection user={props.user ?? null} />
+          <div className={'flex flex-1 items-center justify-end space-x-1'}>
+            <SiteHeaderAccountSection user={props.user ?? null} />
+          </div>
         </div>
       </div>
     </div>
diff --git a/apps/web/app/(marketing)/_components/site-navigation-item.tsx b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
index 39f81e495..576f313de 100644
--- a/apps/web/app/(marketing)/_components/site-navigation-item.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation-item.tsx
@@ -9,9 +9,8 @@ import { cn, isRouteActive } from '@kit/ui/utils';
 const getClassName = (path: string, currentPathName: string) => {
   const isActive = isRouteActive(path, currentPathName);
 
-  return cn(`text-sm transition-all px-4 py-2 rounded-full font-medium`, {
-    'bg-muted': isActive,
-    'hover:bg-muted active:bg-muted/50': !isActive,
+  return cn(`text-sm font-medium text-primary`, {
+    'hover:underline': !isActive,
   });
 };
 
diff --git a/apps/web/app/(marketing)/_components/site-navigation.tsx b/apps/web/app/(marketing)/_components/site-navigation.tsx
index 154fe7d50..a8d2c27de 100644
--- a/apps/web/app/(marketing)/_components/site-navigation.tsx
+++ b/apps/web/app/(marketing)/_components/site-navigation.tsx
@@ -45,11 +45,7 @@ export function SiteNavigation() {
     <>
       <div className={'hidden items-center lg:flex'}>
         <NavigationMenu>
-          <NavigationMenuList
-            className={
-              'space-x-1.5 rounded-full px-1 py-2 shadow-sm dark:shadow-primary/10'
-            }
-          >
+          <NavigationMenuList className={'space-x-6'}>
             {NavItems}
           </NavigationMenuList>
         </NavigationMenu>
diff --git a/apps/web/app/(marketing)/_components/site-page-header.tsx b/apps/web/app/(marketing)/_components/site-page-header.tsx
index 709a819be..9ddae6f8b 100644
--- a/apps/web/app/(marketing)/_components/site-page-header.tsx
+++ b/apps/web/app/(marketing)/_components/site-page-header.tsx
@@ -6,16 +6,18 @@ export function SitePageHeader(props: {
   className?: string;
 }) {
   return (
-    <div
-      className={cn('flex flex-col items-center space-y-4', props.className)}
-    >
-      <h1 className={'text-center text-3xl font-semibold xl:text-4xl'}>
-        {props.title}
-      </h1>
+    <div className={cn('border-b py-8 xl:py-12 2xl:py-14', props.className)}>
+      <div className={'container flex flex-col space-y-4'}>
+        <h1 className={'text-3xl font-semibold xl:text-5xl'}>{props.title}</h1>
 
-      <h2 className={'text-center text-xl text-muted-foreground xl:text-2xl'}>
-        <span className={'font-normal'}>{props.subtitle}</span>
-      </h2>
+        <h2
+          className={
+            'text-base text-secondary-foreground xl:text-lg 2xl:text-xl'
+          }
+        >
+          <span className={'font-normal'}>{props.subtitle}</span>
+        </h2>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/app/(marketing)/blog/[slug]/page.tsx b/apps/web/app/(marketing)/blog/[slug]/page.tsx
index 38a2e38ff..86ff9e83a 100644
--- a/apps/web/app/(marketing)/blog/[slug]/page.tsx
+++ b/apps/web/app/(marketing)/blog/[slug]/page.tsx
@@ -4,7 +4,7 @@ import { notFound } from 'next/navigation';
 
 import { createCmsClient } from '@kit/cms';
 
-import Post from '~/(marketing)/blog/_components/post';
+import { Post } from '~/(marketing)/blog/_components/post';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 export async function generateMetadata({
@@ -55,11 +55,7 @@ async function BlogPost({ params }: { params: { slug: string } }) {
     notFound();
   }
 
-  return (
-    <div className={'container mx-auto'}>
-      <Post post={post} content={post.content} />
-    </div>
-  );
+  return <Post post={post} content={post.content} />;
 }
 
 export default withI18n(BlogPost);
diff --git a/apps/web/app/(marketing)/blog/_components/post-header.tsx b/apps/web/app/(marketing)/blog/_components/post-header.tsx
index 2bcbd02a1..2035c3e63 100644
--- a/apps/web/app/(marketing)/blog/_components/post-header.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-header.tsx
@@ -1,6 +1,12 @@
+import Link from 'next/link';
+
+import { ArrowLeft } from 'lucide-react';
+
 import { Cms } from '@kit/cms';
-import { Heading } from '@kit/ui/heading';
+import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+import { cn } from '@kit/ui/utils';
 
 import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
 import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
@@ -11,27 +17,37 @@ export const PostHeader: React.FC<{
   const { title, publishedAt, description, image } = post;
 
   return (
-    <div className={'flex flex-col space-y-8'}>
-      <div className={'flex flex-col space-y-2'}>
-        <Heading level={1}>{title}</Heading>
+    <div className={'flex flex-col'}>
+      <div className={'container'}>
+        <Link href={'/blog'}>
+          <Button variant={'link'}>
+            <ArrowLeft className={'h-4'} />
 
-        <Heading level={3}>
-          <p
-            className={'font-normal text-muted-foreground'}
-            dangerouslySetInnerHTML={{ __html: description ?? '' }}
-          />
-        </Heading>
+            <span>
+              <Trans i18nKey={'marketing:backToBlog'} />
+            </span>
+          </Button>
+        </Link>
+      </div>
 
-        <div className="flex flex-row items-center space-x-2 text-muted-foreground">
-          <div className={'text-sm'}>
-            <DateFormatter dateString={publishedAt.toISOString()} />
-          </div>
+      <div className={cn('border-b py-8')}>
+        <div className={'container flex flex-col space-y-4'}>
+          <h1 className={'text-3xl font-semibold xl:text-5xl'}>{title}</h1>
+
+          <h2 className={'text-base text-secondary-foreground xl:text-lg'}>
+            <span
+              className={'font-normal'}
+              dangerouslySetInnerHTML={{ __html: description ?? '' }}
+            />
+          </h2>
+
+          <DateFormatter dateString={publishedAt.toISOString()} />
         </div>
       </div>
 
       <If condition={image}>
         {(imageUrl) => (
-          <div className="relative mx-auto h-[378px] w-full justify-center">
+          <div className="relative mx-auto mt-8 flex h-[378px] w-full max-w-2xl justify-center">
             <CoverImage
               preloadImage
               className="rounded-md"
diff --git a/apps/web/app/(marketing)/blog/_components/post-preview.tsx b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
index 067746cf7..58196a409 100644
--- a/apps/web/app/(marketing)/blog/_components/post-preview.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post-preview.tsx
@@ -24,7 +24,7 @@ export function PostPreview({
   const slug = `/blog/${post.slug}`;
 
   return (
-    <div className="rounded-xl transition-shadow duration-500">
+    <div className="flex flex-col space-y-4 rounded-lg transition-shadow duration-500">
       <If condition={image}>
         {(imageUrl) => (
           <div className="relative mb-2 w-full" style={{ height }}>
@@ -39,23 +39,23 @@ export function PostPreview({
         )}
       </If>
 
-      <div className={'px-1'}>
-        <div className="flex flex-col space-y-1 py-2">
-          <h3 className="text-2xl font-bold leading-snug dark:text-white">
+      <div className={'flex flex-col space-y-2 px-1'}>
+        <div className={'flex flex-col space-y-1'}>
+          <h3 className="text-2xl font-semibold leading-snug">
             <Link href={slug} className="hover:underline">
               {title}
             </Link>
           </h3>
-        </div>
 
-        <div className="mb-2 flex flex-row items-center space-x-2 text-sm">
-          <div className="text-muted-foreground">
-            <DateFormatter dateString={publishedAt.toISOString()} />
+          <div className="flex flex-row items-center space-x-2 text-sm">
+            <div className="text-muted-foreground">
+              <DateFormatter dateString={publishedAt.toISOString()} />
+            </div>
           </div>
         </div>
 
         <p
-          className="mb-4 text-sm leading-relaxed text-muted-foreground"
+          className="mb-4 text-base leading-relaxed text-secondary-foreground"
           dangerouslySetInnerHTML={{ __html: description ?? '' }}
         />
       </div>
diff --git a/apps/web/app/(marketing)/blog/_components/post.tsx b/apps/web/app/(marketing)/blog/_components/post.tsx
index 5c1bff50f..7fc374327 100644
--- a/apps/web/app/(marketing)/blog/_components/post.tsx
+++ b/apps/web/app/(marketing)/blog/_components/post.tsx
@@ -9,14 +9,14 @@ export const Post: React.FC<{
   content: string;
 }> = ({ post, content }) => {
   return (
-    <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
+    <div>
       <PostHeader post={post} />
 
-      <article className={styles.HTML}>
-        <ContentRenderer content={content} />
-      </article>
+      <div className={'mx-auto flex max-w-2xl flex-col space-y-6'}>
+        <article className={styles.HTML}>
+          <ContentRenderer content={content} />
+        </article>
+      </div>
     </div>
   );
 };
-
-export default Post;
diff --git a/apps/web/app/(marketing)/blog/page.tsx b/apps/web/app/(marketing)/blog/page.tsx
index 800c9893f..40aca4189 100644
--- a/apps/web/app/(marketing)/blog/page.tsx
+++ b/apps/web/app/(marketing)/blog/page.tsx
@@ -24,13 +24,13 @@ async function BlogPage() {
   });
 
   return (
-    <div className={'container mx-auto'}>
-      <div className={'flex flex-col space-y-12 xl:space-y-24'}>
-        <SitePageHeader
-          title={t('marketing:blog')}
-          subtitle={t('marketing:blogSubtitle')}
-        />
+    <div className={'flex flex-col space-y-12'}>
+      <SitePageHeader
+        title={t('marketing:blog')}
+        subtitle={t('marketing:blogSubtitle')}
+      />
 
+      <div className={'container mx-auto'}>
         <GridList>
           {posts.map((post, idx) => {
             return <PostPreview key={idx} post={post} />;
diff --git a/apps/web/app/(marketing)/docs/[...slug]/page.tsx b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
index 128aaf2d3..48b74bb0d 100644
--- a/apps/web/app/(marketing)/docs/[...slug]/page.tsx
+++ b/apps/web/app/(marketing)/docs/[...slug]/page.tsx
@@ -48,18 +48,18 @@ async function DocumentationPage({ params }: PageParams) {
   const description = page?.description ?? '';
 
   return (
-    <div className={'container mx-auto'}>
+    <div>
+      <SitePageHeader
+        title={page.title}
+        subtitle={description}
+        className={'items-start'}
+      />
+
       <div
         className={
-          'relative mx-auto flex max-w-4xl grow flex-col space-y-4 px-8'
+          'container relative mx-auto flex max-w-4xl grow flex-col space-y-4 py-6'
         }
       >
-        <SitePageHeader
-          title={page.title}
-          subtitle={description}
-          className={'items-start'}
-        />
-
         <article className={styles.HTML}>
           <ContentRenderer content={page.content} />
         </article>
diff --git a/apps/web/app/(marketing)/docs/page.tsx b/apps/web/app/(marketing)/docs/page.tsx
index bb9718846..be73ad678 100644
--- a/apps/web/app/(marketing)/docs/page.tsx
+++ b/apps/web/app/(marketing)/docs/page.tsx
@@ -27,13 +27,15 @@ async function DocsPage() {
 
   return (
     <PageBody>
-      <div className={'flex flex-col items-center space-y-12 xl:space-y-24'}>
+      <div className={'flex flex-col space-y-12 xl:space-y-24'}>
         <SitePageHeader
           title={t('marketing:documentation')}
           subtitle={t('marketing:documentationSubtitle')}
         />
 
-        <DocsCards cards={cards} />
+        <div className={'flex flex-col items-center'}>
+          <DocsCards cards={cards} />
+        </div>
       </div>
     </PageBody>
   );
diff --git a/apps/web/app/(marketing)/faq/page.tsx b/apps/web/app/(marketing)/faq/page.tsx
index 220c88b1b..f16830422 100644
--- a/apps/web/app/(marketing)/faq/page.tsx
+++ b/apps/web/app/(marketing)/faq/page.tsx
@@ -1,4 +1,9 @@
-import { ChevronDown } from 'lucide-react';
+import Link from 'next/link';
+
+import { ArrowRight, ChevronDown } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
@@ -60,34 +65,40 @@ async function FAQPage() {
   };
 
   return (
-    <div>
+    <>
       <script
         key={'ld:json'}
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
       />
 
-      <div className={'container mx-auto'}>
-        <div className={'flex flex-col space-y-12 xl:space-y-24'}>
-          <SitePageHeader
-            title={t('marketing:faq')}
-            subtitle={t('marketing:faqSubtitle')}
-          />
+      <div className={'flex flex-col space-y-4 xl:space-y-8'}>
+        <SitePageHeader
+          title={t('marketing:faq')}
+          subtitle={t('marketing:faqSubtitle')}
+        />
 
-          <div
-            className={
-              'm-auto flex w-full max-w-xl items-center justify-center'
-            }
-          >
-            <div className="flex w-full flex-col">
-              {faqItems.map((item, index) => {
-                return <FaqItem key={index} item={item} />;
-              })}
-            </div>
+        <div className={'container flex flex-col space-y-8 pb-16'}>
+          <div className="flex w-full max-w-xl flex-col">
+            {faqItems.map((item, index) => {
+              return <FaqItem key={index} item={item} />;
+            })}
+          </div>
+
+          <div>
+            <Link href={'/contact'}>
+              <Button variant={'outline'}>
+                <span>
+                  <Trans i18nKey={'marketing:contactFaq'} />
+                </span>
+
+                <ArrowRight className={'ml-2 w-4'} />
+              </Button>
+            </Link>
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
 
@@ -102,7 +113,7 @@ function FaqItem({
   };
 }>) {
   return (
-    <details className={'group border-b px-2 py-4'}>
+    <details className={'group border-b px-2 py-4 last:border-b-transparent'}>
       <summary
         className={
           'flex items-center justify-between hover:cursor-pointer hover:underline'
diff --git a/apps/web/app/(marketing)/layout.tsx b/apps/web/app/(marketing)/layout.tsx
index 28d530092..eddf235ae 100644
--- a/apps/web/app/(marketing)/layout.tsx
+++ b/apps/web/app/(marketing)/layout.tsx
@@ -1,5 +1,4 @@
 import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
-import { Separator } from '@kit/ui/separator';
 
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
@@ -9,13 +8,11 @@ async function SiteLayout(props: React.PropsWithChildren) {
   const user = await getUser();
 
   return (
-    <div className={'flex flex-col space-y-6 xl:space-y-10 2xl:space-y-12'}>
+    <div className={'flex flex-col'}>
       <SiteHeader user={user} />
 
       {props.children}
 
-      <Separator />
-
       <SiteFooter />
     </div>
   );
diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 0757743d3..c28189677 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -13,7 +13,7 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
-    <div className={'flex flex-col space-y-24'}>
+    <div className={'flex flex-col space-y-24 py-16'}>
       <div className={'container mx-auto flex flex-col space-y-24'}>
         <div
           className={
@@ -22,7 +22,11 @@ function Home() {
             ' duration-1000 slide-in-from-top-12'
           }
         >
-          <div className={'flex w-full flex-1 flex-col items-center space-y-8'}>
+          <div
+            className={
+              'flex w-full flex-1 flex-col items-center space-y-8 xl:space-y-12 2xl:space-y-14'
+            }
+          >
             <Pill>
               <span>The leading SaaS Starter Kit for ambitious developers</span>
             </Pill>
@@ -53,9 +57,7 @@ function Home() {
                   </span>
                 </Heading>
               </div>
-            </div>
 
-            <div>
               <MainCallToActionButton />
             </div>
           </div>
@@ -70,9 +72,7 @@ function Home() {
           <Image
             priority
             className={
-              'rounded-2xl' +
-              ' border animate-in fade-in' +
-              ' delay-300 duration-1000 ease-out zoom-in-50 fill-mode-both'
+              'rounded-lg border delay-500 duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both'
             }
             width={3069}
             height={1916}
@@ -115,20 +115,20 @@ function Home() {
         <div className={'flex flex-col space-y-4'}>
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-1'}>
                 <Heading level={2}>Authentication</Heading>
 
                 <Heading level={3} className={'text-muted-foreground'}>
                   Secure and Easy-to-Use Authentication for Your SaaS Website
                   and API
                 </Heading>
+              </div>
 
-                <div>
-                  Our authentication system is built on top of the
-                  industry-leading PaaS such as Supabase and Firebase. It is
-                  secure, easy-to-use, and fully customizable. It supports
-                  email/password, social logins, and more.
-                </div>
+              <div>
+                Our authentication system is built on top of the
+                industry-leading PaaS such as Supabase and Firebase. It is
+                secure, easy-to-use, and fully customizable. It supports
+                email/password, social logins, and more.
               </div>
             </LeftFeatureContainer>
 
@@ -155,18 +155,18 @@ function Home() {
             </LeftFeatureContainer>
 
             <RightFeatureContainer>
-              <div className={'flex flex-col space-y-2'}>
+              <div className={'flex flex-col space-y-1'}>
                 <Heading level={2}>Dashboard</Heading>
 
                 <Heading level={3} className={'text-muted-foreground'}>
                   A fantastic dashboard to manage your SaaS business
                 </Heading>
+              </div>
 
-                <div>
-                  Our dashboard offers an overview of your SaaS business. It
-                  shows at a glance all you need to know about your business. It
-                  is fully customizable and extendable.
-                </div>
+              <div>
+                Our dashboard offers an overview of your SaaS business. It shows
+                at a glance all you need to know about your business. It is
+                fully customizable and extendable.
               </div>
             </RightFeatureContainer>
           </FeatureShowcaseContainer>
@@ -247,14 +247,18 @@ function FeatureShowcaseContainer(props: React.PropsWithChildren) {
 
 function LeftFeatureContainer(props: React.PropsWithChildren) {
   return (
-    <div className={'flex w-full flex-col space-y-8 lg:w-6/12'}>
+    <div className={'flex w-full flex-col space-y-6 lg:w-6/12'}>
       {props.children}
     </div>
   );
 }
 
 function RightFeatureContainer(props: React.PropsWithChildren) {
-  return <div className={'flex w-full lg:w-6/12'}>{props.children}</div>;
+  return (
+    <div className={'flex w-full flex-col space-y-6 lg:w-6/12'}>
+      {props.children}
+    </div>
+  );
 }
 
 function MainCallToActionButton() {
diff --git a/apps/web/app/(marketing)/pricing/page.tsx b/apps/web/app/(marketing)/pricing/page.tsx
index b2a98bdca..7d7274e8b 100644
--- a/apps/web/app/(marketing)/pricing/page.tsx
+++ b/apps/web/app/(marketing)/pricing/page.tsx
@@ -18,13 +18,15 @@ async function PricingPage() {
   const { t } = await createI18nServerInstance();
 
   return (
-    <div className={'container mx-auto mt-8 flex flex-col space-y-24'}>
+    <div className={'flex flex-col space-y-12'}>
       <SitePageHeader
         title={t('marketing:pricing')}
         subtitle={t('marketing:pricingSubtitle')}
       />
 
-      <PricingTable paths={pathsConfig.auth} config={billingConfig} />
+      <div className={'container mx-auto pb-8 xl:pb-16'}>
+        <PricingTable paths={pathsConfig.auth} config={billingConfig} />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/components/app-logo.tsx b/apps/web/components/app-logo.tsx
index 66e9296f7..2afbabc8e 100644
--- a/apps/web/components/app-logo.tsx
+++ b/apps/web/components/app-logo.tsx
@@ -9,7 +9,7 @@ const LogoImage: React.FC<{
   return (
     <svg
       width={width}
-      className={cn(`w-[95px] sm:w-[105px]`, className)}
+      className={cn(`w-[95px]`, className)}
       viewBox="0 0 733 140"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/web/public/locales/en/marketing.json b/apps/web/public/locales/en/marketing.json
index ec5fe0acc..ca21bfa95 100644
--- a/apps/web/public/locales/en/marketing.json
+++ b/apps/web/public/locales/en/marketing.json
@@ -7,6 +7,8 @@
   "faqSubtitle": "Frequently asked questions about the platform",
   "pricing": "Pricing",
   "pricingSubtitle": "Pricing plans and payment options",
+  "backToBlog": "Back to blog",
+  "contactFaq": "If you have any questions, please contact us",
   "contact": "Contact",
   "about": "About",
   "product": "Product",
diff --git a/packages/billing/gateway/src/components/pricing-table.tsx b/packages/billing/gateway/src/components/pricing-table.tsx
index 457d9ec92..1e0f4c6a3 100644
--- a/packages/billing/gateway/src/components/pricing-table.tsx
+++ b/packages/billing/gateway/src/components/pricing-table.tsx
@@ -63,10 +63,7 @@ export function PricingTable({
           ' justify-center lg:flex-row'
         }
       >
-        {config.products.map((product, index) => {
-          const isFirst = index === 0;
-          const isLast = index === config.products.length - 1;
-
+        {config.products.map((product) => {
           const plan = product.plans.find((plan) => {
             if (plan.paymentType === 'recurring') {
               return plan.interval === interval;
@@ -87,10 +84,7 @@ export function PricingTable({
 
           return (
             <PricingItem
-              className={cn('border-b border-r border-t', {
-                ['rounded-l-lg border-l']: isFirst,
-                ['rounded-r-lg']: isLast,
-              })}
+              className={cn('border')}
               selectable
               key={plan.id}
               plan={plan}
@@ -160,7 +154,7 @@ function PricingItem(
         `s-full flex flex-1 grow flex-col items-stretch
             justify-between space-y-8 self-stretch p-6 lg:w-4/12 xl:max-w-[22rem] xl:p-8`,
         {
-          ['bg-primary text-primary-foreground border-primary']: highlighted,
+          ['border-primary']: highlighted,
         },
       )}
     >
@@ -178,7 +172,7 @@ function PricingItem(
 
             <If condition={props.product.badge}>
               <Badge
-                variant={'default'}
+                variant={highlighted ? 'default' : 'outline'}
                 className={cn({
                   ['border-primary-foreground']: highlighted,
                 })}
@@ -218,9 +212,6 @@ function PricingItem(
             <span
               className={cn(
                 `animate-in slide-in-from-left-4 fade-in flex items-center space-x-0.5 capitalize`,
-                {
-                  ['text-muted-foreground']: !highlighted,
-                },
               )}
             >
               <span className={'text-sm'}>
@@ -240,9 +231,6 @@ function PricingItem(
                 <span
                   className={cn(
                     `animate-in slide-in-from-left-4 fade-in text-sm capitalize`,
-                    {
-                      ['text-muted-foreground']: !highlighted,
-                    },
                   )}
                 >
                   <If condition={props.primaryLineItem.type === 'per-seat'}>
@@ -319,7 +307,7 @@ function FeaturesList(
     <ul className={'flex flex-col space-y-2'}>
       {props.features.map((feature) => {
         return (
-          <ListItem highlighted={props.highlighted} key={feature}>
+          <ListItem key={feature}>
             <Trans
               i18nKey={`common:plans.features.${feature}`}
               defaults={feature}
@@ -347,25 +335,18 @@ function Price({ children }: React.PropsWithChildren) {
   );
 }
 
-function ListItem({
-  children,
-  highlighted,
-}: React.PropsWithChildren<{
-  highlighted?: boolean;
-}>) {
+function ListItem({ children }: React.PropsWithChildren) {
   return (
     <li className={'flex items-center space-x-1.5'}>
       <CheckCircle
         className={cn('h-4', {
-          ['text-primary-foreground']: highlighted,
-          ['text-green-600']: !highlighted,
+          ['text-green-600']: true,
         })}
       />
 
       <span
         className={cn('text-sm', {
-          ['text-secondary-foreground']: !highlighted,
-          ['text-primary-foreground']: highlighted,
+          ['text-secondary-foreground']: true,
         })}
       >
         {children}
@@ -391,7 +372,7 @@ function PlanIntervalSwitcher(
           {
             'rounded-r-none border-r-transparent': index === 0,
             'rounded-l-none': index === props.intervals.length - 1,
-            ['hover:text-current hover:bg-muted']: !selected,
+            ['hover:text-primary border']: !selected,
             ['font-semibold cursor-default hover:text-initial hover:bg-background border-primary']:
               selected,
           },
@@ -445,7 +426,7 @@ function DefaultCheckoutButton(
       <Button
         size={'lg'}
         className={'w-full'}
-        variant={props.highlighted ? 'secondary' : 'outline'}
+        variant={props.highlighted ? 'default' : 'outline'}
       >
         <span>
           <Trans i18nKey={label} defaults={label} />