diff --git a/quickstart.mdx b/quickstart.mdx
index 7bfe62594..f114a8b59 100644
--- a/quickstart.mdx
+++ b/quickstart.mdx
@@ -4,9 +4,31 @@ description: "Deploy your documentation site and make your first change."
 keywords: ["quickstart","deploy","get started","first steps"]
 ---
 
-After you complete this guide, you'll have a live documentation site ready to customize and update.
+<Info>**Time to complete:** ~5 minutes</Info>
 
-## Before you begin
+## What you'll build
+
+By the end of this guide, you'll have a live documentation site like this:
+
+<Frame>
+  <img
+    src="/images/quickstart/mintlify-domain-light.png"
+    alt="A deployed Mintlify documentation site."
+    className="block dark:hidden"
+  />
+  <img
+    src="/images/quickstart/mintlify-domain-dark.png"
+    alt="A deployed Mintlify documentation site."
+    className="hidden dark:block"
+  />
+</Frame>
+
+## Prerequisites
+
+<Check>GitHub account</Check>
+<Check>Node.js v20.17.0 or higher (for CLI usage)</Check>
+
+## How it works
 
 Mintlify uses a docs-as-code approach to manage your documentation. Every page on your site has a corresponding file stored in your documentation <Tooltip tip="Your documentation's source code where all files and their history are stored. The web editor connects to your documentation repository to access and modify content, or you can edit files locally in your preferred IDE.">repository</Tooltip>.