diff --git a/docs/content/docs/example-usecases/deep-research.mdx b/docs/content/docs/example-usecases/deep-research.mdx
new file mode 100644
index 00000000..8081fb33
--- /dev/null
+++ b/docs/content/docs/example-usecases/deep-research.mdx
@@ -0,0 +1,30 @@
+---
+title: Deep Research
+description: bleh
+---
+
+import { Monitor, Code, BookOpen } from 'lucide-react';
+
+# Welcome!
+
+Cua is a framework for automating Windows, Mac, and Linux apps powered by computer-using agents (CUAs).
+
+Cua makes every stage of computer-using agent development simple:
+
+- **Development**: Use any LLM provider with liteLLM. The agent SDK makes multiple agent loop providers, trajectory tracing, caching, and budget management easy
+- **Containerization**: cua offers Docker containers pre-installed with everything needed for AI-powered RPA
+- **Deployment**: cua cloud gives you a production-ready cloud environment for your assistants
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
+  <Card icon={<Monitor />} href="/quickstart-ui" title="Quickstart (UI)">
+    Try the cua Agent UI in your browser—no coding required.
+  </Card>
+  <Card icon={<Code />} href="/quickstart-devs" title="Quickstart (Developers)">
+    Build with Python—full SDK and agent code examples.
+  </Card>
+</div>
+<div className="grid grid-cols-1 gap-6 mt-6">
+  <Card icon={<BookOpen />} href="/libraries/agent" title="API Reference">
+    Explore the agent SDK and APIs
+  </Card>
+</div>
diff --git a/docs/content/docs/example-usecases/job-application-filling.mdx b/docs/content/docs/example-usecases/job-application-filling.mdx
new file mode 100644
index 00000000..7b2550d2
--- /dev/null
+++ b/docs/content/docs/example-usecases/job-application-filling.mdx
@@ -0,0 +1,96 @@
+---
+title: Job Application Filling
+description: Automate job applications with CUA
+---
+
+import { EditableCodeBlock, EditableValue, S } from '@/components/editable-code-block';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
+# Job Application Automation
+
+Fill out the form below to see how CUA can automate your job application process. Click on the underlined values in the code to edit them directly!
+
+<Tabs items={["Python", "curl"]}>
+  <Tab value="Python">
+
+<EditableCodeBlock
+  lang="python"
+  defaultValues={{
+    "api_key": "your-api-key",
+    "api_base": "https://api.cua.ai"
+  }}
+>
+{`import os
+import asyncio
+from computer.providers.cloud.provider import CloudProvider
+
+async def main():
+    api_key = "`}<EditableValue placeholder="api_key" />{`"
+    # Optional: point to a different API base
+    os.environ["CUA_API_BASE"] = "`}<EditableValue placeholder="api_base" />{`"
+
+    provider = CloudProvider(api_key=api_key, verbose=False)
+    async with provider:
+        vms = await provider.list_vms()
+        for vm in vms:
+            print({
+                "name": vm["name"],
+                "status": vm["status"],
+                "api_url": vm.get("api_url"),
+                "vnc_url": vm.get("vnc_url"),
+            })
+
+if __name__ == "__main__":
+    asyncio.run(main())`}
+</EditableCodeBlock>
+
+  </Tab>
+  <Tab value="curl">
+
+<EditableCodeBlock
+  lang="bash"
+  defaultValues={{
+    "api_key": "your-api-key",
+    "api_base": "https://api.cua.ai"
+  }}
+>
+{`curl -H "Authorization: Bearer `}<EditableValue placeholder="api_key" />{`" \\
+     "`}<EditableValue placeholder="api_base" />{`/v1/vms"`}
+</EditableCodeBlock>
+
+  Responses:
+  - 200: Array of minimal VM objects with fields `{ name, password, status }`
+  - 401: Unauthorized (missing/invalid API key)
+
+  ```json
+  [
+    {
+      "name": "s-windows-x4snp46ebf",
+      "password": "49b8daa3",
+      "status": "running"
+    }
+  ]
+  ```
+
+  Status values:
+
+  - `pending`: VM deployment in progress
+  - `running`: VM is active and accessible
+  - `stopped`: VM is stopped but not terminated
+  - `terminated`: VM has been permanently destroyed
+  - `failed`: VM deployment or operation failed
+
+  </Tab>
+</Tabs>
+
+## How It Works
+
+1. Click on the underlined values in the code above to edit them
+2. The code updates in real-time as you type
+3. Copy the customized code to use with CUA
+
+## Features
+
+- **Dynamic Form Filling**: Automatically fills out all required fields
+- **Cross-Platform**: Works on Windows, macOS, and Linux
+- **Customizable**: Easily modify the code to match any job application form
\ No newline at end of file
diff --git a/docs/content/docs/example-usecases/meta.json b/docs/content/docs/example-usecases/meta.json
new file mode 100644
index 00000000..63bf27ae
--- /dev/null
+++ b/docs/content/docs/example-usecases/meta.json
@@ -0,0 +1,8 @@
+{
+	"title": "Example Use Cases",
+	"description": "Real-world examples of building with cua",
+	"pages": [
+		"deep-research",
+		"job-application-filling"
+	]
+}
diff --git a/docs/content/docs/meta.json b/docs/content/docs/meta.json
index bee0e1c8..dc06cc5f 100644
--- a/docs/content/docs/meta.json
+++ b/docs/content/docs/meta.json
@@ -8,6 +8,7 @@
 		"quickstart-devs",
 		"quickstart-cli",
 		"telemetry",
+		"example-usecases",
         "---[BookCopy]Computer Playbook---",
         "...computer-sdk",
 		"---[BookCopy]Agent Playbook---",
diff --git a/docs/src/components/editable-code-block.tsx b/docs/src/components/editable-code-block.tsx
index d7a93df4..348d1e4a 100644
--- a/docs/src/components/editable-code-block.tsx
+++ b/docs/src/components/editable-code-block.tsx
@@ -61,7 +61,7 @@ export function EditableCodeBlock({
   return (
     <EditableCodeContext.Provider value={{ values, updateValue }}>
       <Base.CodeBlock title={title} className={cn('my-4', className)}>
-        <Base.Pre className={cn(`language-${lang}`)}>
+        <Base.Pre className={cn(`language-${lang}`, "px-3")}>
           <code className={cn(`language-${lang}`)} style={{ display: 'block', whiteSpace: 'pre-wrap' }}>
             {children}
           </code>