diff --git a/docs/content/docs/index.mdx b/docs/content/docs/index.mdx
index 4c3de51f..5da104ed 100644
--- a/docs/content/docs/index.mdx
+++ b/docs/content/docs/index.mdx
@@ -4,23 +4,30 @@ title: Introduction
 
 import { Monitor, Code, BookOpen, Zap, Bot, Boxes, Rocket } from 'lucide-react';
 
-<div className="not-prose relative rounded-xl overflow-hidden mb-8 w-full h-40 -mt-4">
-  <img src="/docs/img/bg-light.jpg" alt="Cua" className="w-full h-full object-cover block dark:hidden rounded-xl" />
-  <img src="/docs/img/bg-dark.jpg" alt="Cua" className="w-full h-full object-cover hidden dark:block rounded-xl" />
-  <div className="absolute inset-0 flex items-center justify-center"><div className="bg-black/50 backdrop-blur-sm rounded-lg py-3 px-5 [&_p]:m-0 [&_p]:p-0"><span className="text-white text-lg font-medium" style={{display: 'block', margin: 0, padding: 0, lineHeight: '1.2'}}>Build AI agents that see, understand, and control any computer</span></div></div>
+<div className="not-prose -mt-2 mb-6">
+  <p className="text-fd-primary font-semibold text-sm mb-1">Welcome</p>
+  <h1 className="text-3xl font-bold tracking-tight md:text-4xl">Welcome to Cua</h1>
 </div>
 
-**Cua** ("koo-ah") is an open-source framework for Computer-Use Agents - enabling AI systems to autonomously operate computers through visual understanding and action execution. Used for research, evaluation, and production deployment of desktop, browser, and mobile automation agents.
+**Cua** is an open-source framework for building, deploying and evaluating Computer-Use Agents - AI systems that autonomously interact with computer interfaces by understanding visual elements and executing actions. Cua provides SDKs for easy integration with 100+ vision-language models (VLMs), supporting everything from simple task automation to complex multi-step workflows across Windows, Linux, and macOS environments.
 
-## What are Computer-Use Agents?
+<div className="not-prose relative rounded-xl overflow-hidden my-8 w-full">
+  <img src="/docs/img/hero.png" alt="Cua" className="w-full h-auto rounded-xl" />
+</div>
 
-Computer-Use Agents (CUAs) are AI systems that can autonomously interact with computer interfaces through visual understanding and action execution. Unlike traditional automation tools that rely on brittle selectors or APIs, CUAs use vision-language models to perceive screen content and reason about interface interactions - enabling them to adapt to UI changes and handle complex, multi-step workflows across applications.
+## What is a Computer-Use Agent?
+
+Computer-Use Agents (CUAs) are AI systems that can autonomously interact with computer interfaces through visual understanding and action execution.
+
+## What is a Computer-Use Sandbox?
+
+Computer-Use Sandboxes are isolated, controlled environments where AI agents can safely interact with computer interfaces. They provide a secure execution space for agents to perform actions such as clicking, typing, and running code, test automation workflows, and learn from interactions without affecting production systems.
 
 ## Key Features
 
 With the **Computer SDK**, you can:
-- Automate **Windows, Linux, and macOS** VMs with a consistent, pyautogui-like API
-- Create & manage VMs locally or using **Cua Cloud**
+- Automate **Windows, Linux, and macOS** sandboxes with a consistent, pyautogui-like API
+- Create & manage sandboxes locally or using **Cua Cloud**
 
 With the **Agent SDK**, you can:
 - Run computer-use models with a consistent schema
diff --git a/docs/public/img/hero.png b/docs/public/img/hero.png
new file mode 100644
index 00000000..17cb6e1e
Binary files /dev/null and b/docs/public/img/hero.png differ
diff --git a/docs/src/app/(home)/[[...slug]]/page.tsx b/docs/src/app/(home)/[[...slug]]/page.tsx
index e5f279a0..4354012e 100644
--- a/docs/src/app/(home)/[[...slug]]/page.tsx
+++ b/docs/src/app/(home)/[[...slug]]/page.tsx
@@ -200,7 +200,7 @@ export default async function Page(props: { params: Promise<{ slug?: string[] }>
       <div className="flex flex-row w-full items-start">
         <div className="flex-1">
           <div className="flex flex-row w-full">
-            <DocsTitle>{page.data.title}</DocsTitle>
+            {slug.length > 0 && <DocsTitle>{page.data.title}</DocsTitle>}
 
             <div className="ml-auto flex items-center gap-2">
               {apiSection && versionItems.length > 1 && (
diff --git a/docs/src/app/global.css b/docs/src/app/global.css
index 08522ff5..479c83d1 100644
--- a/docs/src/app/global.css
+++ b/docs/src/app/global.css
@@ -9,6 +9,8 @@
   --color-fd-ring: hsl(199, 89%, 48%); /* sky-500 */
   --color-fd-muted: hsl(160, 84%, 95%); /* emerald-50 */
   --color-fd-accent: hsl(152, 76%, 92%); /* emerald-100 */
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
 }
 
 .dark {
diff --git a/docs/src/app/layout.tsx b/docs/src/app/layout.tsx
index 97b60870..1f6b53b0 100644
--- a/docs/src/app/layout.tsx
+++ b/docs/src/app/layout.tsx
@@ -1,6 +1,6 @@
 import './global.css';
 import { RootProvider } from 'fumadocs-ui/provider';
-import { Inter } from 'next/font/google';
+import { Geist, Geist_Mono } from 'next/font/google';
 import type { ReactNode } from 'react';
 import { PHProvider, PostHogPageView } from '@/providers/posthog-provider';
 import { AnalyticsTracker } from '@/components/analytics-tracker';
@@ -8,13 +8,19 @@ import { CookieConsent } from '@/components/cookie-consent';
 import { Footer } from '@/components/footer';
 import { Suspense } from 'react';
 
-const inter = Inter({
+const geist = Geist({
   subsets: ['latin'],
+  variable: '--font-geist-sans',
+});
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  variable: '--font-geist-mono',
 });
 
 export default function Layout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
+    <html lang="en" className={`${geist.variable} ${geistMono.variable} font-sans`} suppressHydrationWarning>
       <head>
         <link rel="icon" href="/docs/favicon.ico" sizes="any" />
       </head>