diff --git a/_data/toc.yml b/_data/toc.yml
index 1f64ec91003..9e2292746c5 100644
--- a/_data/toc.yml
+++ b/_data/toc.yml
@@ -1,5 +1,6 @@
 Getting Started:
   - docs/README.md
+  - docs/quickstarts.md
   - docs/hello-world.md
   - docs/development.md
   - docs/webhooks.md
diff --git a/assets/checks.png b/assets/checks.png
new file mode 100644
index 00000000000..6cb313582e9
Binary files /dev/null and b/assets/checks.png differ
diff --git a/assets/comment.png b/assets/comment.png
new file mode 100644
index 00000000000..1372934c1c3
Binary files /dev/null and b/assets/comment.png differ
diff --git a/assets/css/index.scss b/assets/css/index.scss
index d7c937cf352..3be87ffc180 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -50,3 +50,11 @@ body {
 .flex-1 {
   flex: 1;
 }
+
+.page-section {
+  padding: 32px;
+}
+
+.code {
+  padding: 10px;
+}
diff --git a/assets/deploy.png b/assets/deploy.png
new file mode 100644
index 00000000000..7b9c5a14f02
Binary files /dev/null and b/assets/deploy.png differ
diff --git a/assets/pr.png b/assets/pr.png
new file mode 100644
index 00000000000..98a653f4c75
Binary files /dev/null and b/assets/pr.png differ
diff --git a/index.html b/index.html
index 14d764f7e61..e21cce9cdc1 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,69 @@ <h2 class="alt-h1 text-center">Explore</h2>
   </div>
 </div>
 
+<div id="build" class="border-top page-section f4">
+  <div class="container-lg px-3">
+    <h2 class="alt-h1 text-center lh-condensed">Quickstarts</h2>
+    <p class="alt-lead text-center">Apps are easy to write and share.</p>
+    <p class="text-center">
+      <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
+    </p>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/comment.png" class="width-fit">
+      </div>
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Comment on an Issue</h3>
+        <p class="">
+          Get started with an app that will post a comment any time an issue is opened.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
+        </p>
+      </div>
+    </div>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Create a Check</h3>
+        <p class="">
+          Get started with an app that creates successful checks on pull requests.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
+        </p>
+      </div>
+
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/checks.png" class="width-fit">
+      </div>
+    </div>
+
+    <div class="page-section d-flex flex-column flex-md-row gutter flex-items-center flex-md-items-center">
+      <div class="col-md-7 hide-md">
+          <img alt="" src="/assets/pr.png" class="width-fit">
+      </div>
+      <div class="col-md-6">
+        <h3 class="alt-h3 mb-2">Open a Pull Request</h3>
+        <p class="">
+          Get started with an app that will open a new pull request when you install it on your repository.
+        </p>
+        <p class="mt-3">
+          <a href="/docs/">Get started with this app {% octicon chevron-right %}</a>
+        </p>
+      </div>
+    </div>
+
+    <p class="text-center mb-6">
+      <a class="btn btn-outline btn-large" href="/docs/">
+        {% octicon versions class:"mr-2" %}
+        Browse Quickstarts
+      </a>
+    </p>
+  </div>
+</div>
+
 <div id="build" class="border-top page-section f4">
   <div class="container-lg px-3">
     <h2 class="alt-h1 text-center lh-condensed">Build your own app</h2>