diff --git a/apps/docs/faq.md b/apps/docs/faq.mdx
similarity index 97%
rename from apps/docs/faq.md
rename to apps/docs/faq.mdx
index 90052071..f8d9900b 100644
--- a/apps/docs/faq.md
+++ b/apps/docs/faq.mdx
@@ -1,6 +1,6 @@
 ---
-title: "FAQ"
-description: "Frequently Asked Questions"
+title: FAQ
+description: Frequently Asked Questions
 ---
 
 <Accordion title="How much does an end to end Open SWE run cost?">
diff --git a/apps/docs/images/ui-screenshot.png b/apps/docs/images/ui-screenshot.png
new file mode 100644
index 00000000..4c8b9738
Binary files /dev/null and b/apps/docs/images/ui-screenshot.png differ
diff --git a/apps/docs/index.mdx b/apps/docs/index.mdx
index b2dbb75c..84592a20 100644
--- a/apps/docs/index.mdx
+++ b/apps/docs/index.mdx
@@ -15,6 +15,8 @@ Open SWE operates through three specialized LangGraph agents:
 
 The agent can be used through a web interface or triggered automatically via GitHub webhooks, making it flexible for both interactive development and automated workflows.
 
+![Open SWE UI Screenshot](/images/ui-screenshot.png)
+
 <CardGroup cols={2}>
   <Card title="Setup" icon="robot" href="/labs/swe/setup/intro">
     How to set up Open SWE for development
diff --git a/static/ui-screenshot.png b/static/ui-screenshot.png
index 4fdf6e40..4c8b9738 100644
Binary files a/static/ui-screenshot.png and b/static/ui-screenshot.png differ