diff --git a/apps/landing/src/app/_components/HeroSection.tsx b/apps/landing/src/app/_components/HeroSection.tsx
index 4618536..9b19a0d 100644
--- a/apps/landing/src/app/_components/HeroSection.tsx
+++ b/apps/landing/src/app/_components/HeroSection.tsx
@@ -6,7 +6,7 @@ import GlowEffect from './GlowEffect';
 import WaitlistPopup from './WaitlistPopup';
 import { submitEmail, submitWaitlistData } from '@/lib/actions/waitlistActions';
 
-export const styles = `
+const styles = `
   .gradient-text {
     background: linear-gradient(90deg, #818cf8 0%, #c084fc 25%, #f472b6 50%, #c084fc 75%, #818cf8 100%);
     background-size: 200% 100%;
@@ -122,7 +122,9 @@ export function HeroSection() {
   };
 
   return (
-    <section className="relative pt-20 pb-20 px-6">
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <section className="relative pt-20 pb-20 px-6">
       <div className="max-w-4xl mx-auto text-center">
         <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-gray-400 text-xs mb-6">
           <span className="w-1.5 h-1.5 rounded-full bg-gray-500 beta-dot" />
@@ -208,5 +210,6 @@ export function HeroSection() {
         onSubmit={handleWaitlistSubmit}
       />
     </section>
+    </>
   );
 }
diff --git a/apps/landing/src/app/_components/ShapeTheFutureSection.tsx b/apps/landing/src/app/_components/ShapeTheFutureSection.tsx
index 2f6be07..87a10f1 100644
--- a/apps/landing/src/app/_components/ShapeTheFutureSection.tsx
+++ b/apps/landing/src/app/_components/ShapeTheFutureSection.tsx
@@ -21,7 +21,7 @@ function generateZigzagClipPath(yValues: number[]): string {
   return `polygon(${topEdge}, ${bottomEdge})`;
 }
 
-export const styles = `
+const styles = `
   .shape-future {
     clip-path: ${generateZigzagClipPath(ZIGZAG_POINTS)};
   }
@@ -43,7 +43,7 @@ export const styles = `
   }
 
   .shape-future-title {
-    font-family: 'Caveat', cursive;
+    font-family: var(--font-caveat), cursive;
   }
 `;
 
@@ -55,7 +55,9 @@ const features = [
 
 export function ShapeTheFutureSection() {
   return (
-    <div className="relative my-[60px]">
+    <>
+      <style dangerouslySetInnerHTML={{ __html: styles }} />
+      <div className="relative my-[60px]">
       <section className="shape-future metal-texture bg-[#2a2a2a] relative z-[2]">
         <section className="shape-future bg-black absolute w-full h-[500px] top-[-446px] left-[2px] opacity-30 z-[2] " />
         <div className="absolute h-[200px] w-full blur-sm">
@@ -87,5 +89,6 @@ export function ShapeTheFutureSection() {
         </div>
       </section>
     </div>
+    </>
   );
 }
diff --git a/apps/landing/src/app/_components/index.ts b/apps/landing/src/app/_components/index.ts
index 8ca95d6..403a17b 100644
--- a/apps/landing/src/app/_components/index.ts
+++ b/apps/landing/src/app/_components/index.ts
@@ -1,12 +1,12 @@
 export { BackgroundBlobs } from './BackgroundBlobs';
 export { HeroGlow } from './HeroGlow';
-export { HeroSection, styles as heroStyles } from './HeroSection';
+export { HeroSection } from './HeroSection';
 export { ApiExampleSection } from './ApiExampleSection';
 export { ProblemSolutionSection } from './ProblemSolutionSection';
 export { PromptUrlsSection } from './PromptUrlsSection';
 export { HowItWorksSection } from './HowItWorksSection';
 export { KeyFeaturesSection } from './KeyFeaturesSection';
 export { IntegrationsSection } from './IntegrationsSection';
-export { ShapeTheFutureSection, styles as shapeFutureStyles } from './ShapeTheFutureSection';
+export { ShapeTheFutureSection } from './ShapeTheFutureSection';
 export { GeminiSection } from './GeminiSection';
 export { FinalCtaSection } from './FinalCtaSection';
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index bbb3c20..170026a 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Inter, Caveat } from 'next/font/google';
 import Image from 'next/image';
 import { Footer } from '@/components/shared/Footer';
 import './globals.css';
@@ -10,6 +10,13 @@ const inter = Inter({
   display: 'swap',
 });
 
+const caveat = Caveat({
+  variable: '--font-caveat',
+  subsets: ['latin'],
+  weight: ['500', '600', '700'],
+  display: 'swap',
+});
+
 
 export default function RootLayout({
   children,
@@ -22,7 +29,7 @@ export default function RootLayout({
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
       </head>
-      <body className={`${inter.variable} antialiased`}>
+      <body className={`${inter.variable} ${caveat.variable} antialiased`}>
         <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950">
           {/* Animated gradient background */}
           <div className="fixed inset-0 overflow-hidden pointer-events-none">
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index e4caabd..1d524a1 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -2,7 +2,6 @@ import {
   BackgroundBlobs,
   HeroGlow,
   HeroSection,
-  heroStyles,
   ApiExampleSection,
   ProblemSolutionSection,
   PromptUrlsSection,
@@ -10,39 +9,44 @@ import {
   KeyFeaturesSection,
   IntegrationsSection,
   ShapeTheFutureSection,
-  shapeFutureStyles,
   GeminiSection,
   FinalCtaSection,
 } from './_components';
 
-import type { Metadata, Viewport } from 'next'
+import type { Metadata, Viewport } from 'next';
 
 export const viewport: Viewport = {
   themeColor: '#0a0a0f',
-}
+};
 
 export const metadata: Metadata = {
   title: 'AI Image Generation Inside Your Workflow | Banatie',
-  description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery, style references, and prompt enhancement. Built for developers.',
-  keywords: ['API-first image generation', 'AI image API', 'image generation for developers', 'prompt to image API', 'CDN image delivery'],
+  description:
+    'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery, style references, and prompt enhancement. Built for developers.',
+  keywords: [
+    'API-first image generation',
+    'AI image API',
+    'image generation for developers',
+    'prompt to image API',
+    'CDN image delivery',
+  ],
   authors: [{ name: 'Banatie' }],
   robots: 'index, follow',
 
-  // Canonical & Alternates
   alternates: {
     canonical: 'https://banatie.app',
     languages: {
-      'en': 'https://banatie.app',
+      en: 'https://banatie.app',
       'x-default': 'https://banatie.app',
     },
   },
 
-  // Open Graph
   openGraph: {
     type: 'website',
     url: 'https://banatie.app',
     title: 'AI Image Generation Inside Your Workflow | Banatie',
-    description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
+    description:
+      'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
     siteName: 'Banatie',
     locale: 'en_US',
     images: [
@@ -55,28 +59,18 @@ export const metadata: Metadata = {
     ],
   },
 
-  // Twitter
   twitter: {
     card: 'summary_large_image',
     title: 'AI Image Generation Inside Your Workflow | Banatie',
-    description: 'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
+    description:
+      'Generate production-ready images via API, SDK, CLI, or live URLs. Built-in CDN delivery in seconds.',
     images: ['https://banatie.app/og-image.png'],
   },
-}
-
-const customStyles = `
-  @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');
-
-  ${heroStyles}
-
-  ${shapeFutureStyles}
-`;
+};
 
 export default function Home() {
   return (
-    <>
-      <style dangerouslySetInnerHTML={{ __html: customStyles }} />
-      <div className="relative">
+    <div className="relative">
         <BackgroundBlobs />
         <HeroGlow />
 
@@ -90,7 +84,6 @@ export default function Home() {
         <ShapeTheFutureSection />
         <GeminiSection />
         <FinalCtaSection />
-      </div>
-    </>
+    </div>
   );
 }