diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 5ab32a095..241392cad 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -1,11 +1,18 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { ChevronRight, Sparkle } from 'lucide-react';
+import {
+  ChevronRight,
+  CreditCard,
+  LayoutDashboard,
+  Lock,
+  Sparkle,
+} from 'lucide-react';
 
 import { PricingTable } from '@kit/billing-gateway/components';
 import { Button } from '@kit/ui/button';
 import { Heading } from '@kit/ui/heading';
+import { cn } from '@kit/ui/utils';
 
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
@@ -115,10 +122,17 @@ function Home() {
         <div className={'flex flex-col space-y-4'}>
           <FeatureShowcaseContainer>
             <LeftFeatureContainer>
-              <div className={'flex flex-col space-y-1'}>
+              <div className={'flex flex-col space-y-2'}>
+                <IconContainer className={'bg-green-50 dark:bg-green-500/10'}>
+                  <Lock className={'h-5 text-green-500'} />
+                </IconContainer>
+
                 <Heading level={2}>Authentication</Heading>
 
-                <Heading level={3} className={'text-muted-foreground'}>
+                <Heading
+                  level={3}
+                  className={'font-medium text-muted-foreground'}
+                >
                   Secure and Easy-to-Use Authentication for Your SaaS Website
                   and API
                 </Heading>
@@ -136,8 +150,8 @@ function Home() {
               <Image
                 className="rounded-2xl"
                 src={'/images/sign-in.webp'}
-                width={'626'}
-                height={'683'}
+                width={'1100'}
+                height={'1282'}
                 alt={'Sign In'}
               />
             </RightFeatureContainer>
@@ -148,17 +162,24 @@ function Home() {
               <Image
                 className="rounded-2xl"
                 src={'/images/dashboard.webp'}
-                width={'887'}
-                height={'743'}
+                width={'2094'}
+                height={'2416'}
                 alt={'Dashboard'}
               />
             </LeftFeatureContainer>
 
             <RightFeatureContainer>
-              <div className={'flex flex-col space-y-1'}>
+              <div className={'flex flex-col space-y-2'}>
+                <IconContainer className={'bg-indigo-50 dark:bg-indigo-500/10'}>
+                  <LayoutDashboard className={'h-5 text-indigo-500'} />
+                </IconContainer>
+
                 <Heading level={2}>Dashboard</Heading>
 
-                <Heading level={3} className={'text-muted-foreground'}>
+                <Heading
+                  level={3}
+                  className={'font-medium text-muted-foreground'}
+                >
                   A fantastic dashboard to manage your SaaS business
                 </Heading>
               </div>
@@ -170,6 +191,41 @@ function Home() {
               </div>
             </RightFeatureContainer>
           </FeatureShowcaseContainer>
+
+          <FeatureShowcaseContainer>
+            <LeftFeatureContainer>
+              <div className={'flex flex-col space-y-2'}>
+                <IconContainer className={'bg-blue-50 dark:bg-blue-500/10'}>
+                  <CreditCard className={'h-5 text-blue-500'} />
+                </IconContainer>
+
+                <Heading level={2}>Billing</Heading>
+
+                <Heading
+                  level={3}
+                  className={'font-medium text-muted-foreground'}
+                >
+                  A powerful billing system for your SaaS business
+                </Heading>
+              </div>
+
+              <div>
+                Powerful billing system that supports multiple payment gateways
+                such as Stripe, Lemon Squeezy and Paddle. Fully customizable and
+                easy to use.
+              </div>
+            </LeftFeatureContainer>
+
+            <RightFeatureContainer>
+              <Image
+                className="rounded-2xl"
+                src={'/images/billing.webp'}
+                width={'2456'}
+                height={'1454'}
+                alt={'Sign In'}
+              />
+            </RightFeatureContainer>
+          </FeatureShowcaseContainer>
         </div>
       </div>
 
@@ -180,16 +236,17 @@ function Home() {
           }
         >
           <div className={'flex flex-col items-center space-y-8 text-center'}>
-            <Pill>
-              Get started for free. No credit card required. Cancel anytime.
-            </Pill>
+            <Pill>Get started for free. No credit card required.</Pill>
 
             <div className={'flex flex-col space-y-1'}>
               <Heading level={2}>
-                Ready to take your SaaS business to the next level?
+                Fair pricing for all types of SaaS businesses
               </Heading>
 
-              <Heading level={3} className={'text-muted-foreground'}>
+              <Heading
+                level={3}
+                className={'font-medium text-muted-foreground'}
+              >
                 Get started on our free plan and upgrade when you are ready.
               </Heading>
             </div>
@@ -281,3 +338,22 @@ function MainCallToActionButton() {
     </div>
   );
 }
+
+function IconContainer(
+  props: React.PropsWithChildren<{
+    className?: string;
+  }>,
+) {
+  return (
+    <div className={'flex'}>
+      <span
+        className={cn(
+          'flex items-center justify-center rounded-lg p-3',
+          props.className,
+        )}
+      >
+        {props.children}
+      </span>
+    </div>
+  );
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 1d7bb548f..cdfad4b52 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -24,22 +24,23 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   const { language } = await createI18nServerInstance();
+  const theme = getTheme();
 
   return (
-    <html lang={language} className={getClassName()}>
+    <html lang={language} className={getClassName(theme)}>
       <CsrfTokenMeta />
 
       <body>
-        <RootProviders lang={language}>{children}</RootProviders>
+        <RootProviders theme={theme} lang={language}>
+          {children}
+        </RootProviders>
         <Toaster richColors={false} />
       </body>
     </html>
   );
 }
 
-function getClassName() {
-  const themeCookie = cookies().get('theme')?.value;
-  const theme = themeCookie ?? appConfig.theme;
+function getClassName(theme?: string) {
   const dark = theme === 'dark';
 
   return cn(
@@ -51,6 +52,10 @@ function getClassName() {
   );
 }
 
+function getTheme() {
+  return cookies().get('theme')?.value;
+}
+
 export const metadata = {
   title: appConfig.name,
   description: appConfig.description,
diff --git a/apps/web/components/root-providers.tsx b/apps/web/components/root-providers.tsx
index 41f6d1f99..ad69e9c27 100644
--- a/apps/web/components/root-providers.tsx
+++ b/apps/web/components/root-providers.tsx
@@ -33,9 +33,11 @@ const CaptchaTokenSetter = dynamic(async () => {
 
 export function RootProviders({
   lang,
+  theme = appConfig.theme,
   children,
 }: React.PropsWithChildren<{
   lang: string;
+  theme?: string;
 }>) {
   const i18nSettings = getI18nSettings(lang);
 
@@ -51,7 +53,7 @@ export function RootProviders({
                 attribute="class"
                 enableSystem
                 disableTransitionOnChange
-                defaultTheme={appConfig.theme}
+                defaultTheme={theme}
               >
                 {children}
               </ThemeProvider>
diff --git a/apps/web/public/images/billing.webp b/apps/web/public/images/billing.webp
new file mode 100644
index 000000000..1211f4f68
Binary files /dev/null and b/apps/web/public/images/billing.webp differ
diff --git a/apps/web/public/images/dashboard.webp b/apps/web/public/images/dashboard.webp
index 5011f4e47..2bae78770 100644
Binary files a/apps/web/public/images/dashboard.webp and b/apps/web/public/images/dashboard.webp differ
diff --git a/apps/web/public/images/sign-in.webp b/apps/web/public/images/sign-in.webp
index 4f288ae50..7fe8bee28 100644
Binary files a/apps/web/public/images/sign-in.webp and b/apps/web/public/images/sign-in.webp differ