diff --git a/build/build.js b/build/build.js
index 5c3c51e7af5..c21876df251 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,2 +1,3 @@
-const formatIndex = require('./reference-architectures/index');
-formatIndex();
\ No newline at end of file
+const formatIndexFor = require('./reference-architectures/index');
+formatIndexFor('.');
+formatIndexFor('app-service-web-app');
\ No newline at end of file
diff --git a/build/reference-architectures/index.js b/build/reference-architectures/index.js
index 46559ff5df0..08903093fbf 100644
--- a/build/reference-architectures/index.js
+++ b/build/reference-architectures/index.js
@@ -8,9 +8,9 @@ const engine = Liquid({
     extname: '.liquid'
 });
 
-module.exports = function () {
+module.exports = function (indexFolder) {
 
-    const basePath = path.resolve(__dirname, `../../docs/reference-architectures/`);
+    const basePath = path.resolve(__dirname, `../../docs/reference-architectures/`, indexFolder);
     const outputhPath = path.resolve(basePath, 'index.md');
     const jsonPath = path.resolve(basePath, `index.json`);
 
diff --git a/docs/reference-architectures/app-service-web-app/index.json b/docs/reference-architectures/app-service-web-app/index.json
new file mode 100644
index 00000000000..35ac8221d30
--- /dev/null
+++ b/docs/reference-architectures/app-service-web-app/index.json
@@ -0,0 +1,25 @@
+{
+    "title": "App Service web application",
+    "description": "Recommended architectures for a web applications running in Microsoft Azure.",
+    "summary": "These reference architectures show proven practices for web applications that use Azure App Service and other managed services in Azure.",
+    "series": [
+        {
+            "title": "Basic web application",
+            "url": "./basic-web-app.md",
+            "image": "./images/basic-web-app.svg",
+            "summary": "A basic web application that uses Azure App Service and Azure SQL Database."
+        },
+        {
+            "title": "Improved scalability",
+            "url": "./scalable-web-app.md",
+            "image": "./images/scalable-web-app.svg",
+            "summary": "Improve scalability and performance by adding cache, CDN, and WebJobs for background tasks."
+        },
+        {
+            "title": "Run in multiple regions",
+            "url": "./multi-region.md",
+            "image": "./images/multi-region-web-app.svg",
+            "summary": "Run a web application in multiple regions to achieve high availability."
+        }
+    ]
+}
\ No newline at end of file
diff --git a/docs/reference-architectures/app-service-web-app/index.md b/docs/reference-architectures/app-service-web-app/index.md
index 99d3ed80025..3ab7c36645f 100644
--- a/docs/reference-architectures/app-service-web-app/index.md
+++ b/docs/reference-architectures/app-service-web-app/index.md
@@ -3,68 +3,78 @@ title: App Service web application
 description: Recommended architectures for a web applications running in Microsoft Azure.
 layout: LandingPage
 ---
+<!-- This file is generated! -->
+<!-- See the templates in ./build/reference-architectures  -->
+<!-- See data in index.json -->
 
 # App Service web application
 
 These reference architectures show proven practices for web applications that use Azure App Service and other managed services in Azure.
 
-<ul class="panelContent">
-    <li>
-        <a href="./basic-web-app.md">
-            <div class="cardSize">
-                <div class="cardPadding">
-                    <div class="card">
-                        <div class="cardImageOuter">
-                            <div class="cardImage">
-                            <img src="./images/basic-web-app.svg">
-                            </div>
-                        </div>
-                        <div class="cardText">
-                            <h3>Basic web application</h3>
-                            <p>A basic web application that uses Azure App Service and Azure SQL Database.</p>
+<section class="series">
+    <ul class="panelContent">
+    <!-- Basic web application -->
+<li style="display: flex; flex-direction: column;">
+    <a href="./basic-web-app.md" style="display: flex; flex-direction: column; flex: 1 0 auto;">
+        <div class="cardSize" style="flex: 1 0 auto; display: flex;">
+            <div class="cardPadding" style="display: flex;">
+                <div class="card">
+                    <div class="cardImageOuter">
+                        <div class="cardImage">
+                            <img src="./images/basic-web-app.svg" height="140px" />
                         </div>
                     </div>
+                    <div class="cardText">
+                        <h3>Basic web application</h3>
+                        <p>A basic web application that uses Azure App Service and Azure SQL Database.</p>
+                    </div>
                 </div>
             </div>
-        </a>
-    </li>
-    <li>
-        <a href="./scalable-web-app.md">
-            <div class="cardSize">
-                <div class="cardPadding">
-                    <div class="card">
-                        <div class="cardImageOuter">
-                            <div class="cardImage">
-                            <img src="./images/scalable-web-app.svg">
-                            </div>
-                        </div>
-                        <div class="cardText">
-                            <h3>Improved scalability</h3>
-                            <p>Improve scalability and performance by adding cache, CDN, and WebJobs for background tasks.</p>
+        </div>
+    </a>
+</li>
+    <!-- Improved scalability -->
+<li style="display: flex; flex-direction: column;">
+    <a href="./scalable-web-app.md" style="display: flex; flex-direction: column; flex: 1 0 auto;">
+        <div class="cardSize" style="flex: 1 0 auto; display: flex;">
+            <div class="cardPadding" style="display: flex;">
+                <div class="card">
+                    <div class="cardImageOuter">
+                        <div class="cardImage">
+                            <img src="./images/scalable-web-app.svg" height="140px" />
                         </div>
                     </div>
+                    <div class="cardText">
+                        <h3>Improved scalability</h3>
+                        <p>Improve scalability and performance by adding cache, CDN, and WebJobs for background tasks.</p>
+                    </div>
                 </div>
             </div>
-        </a>
-    </li>
-    <li>
-        <a href="./multi-region.md">
-            <div class="cardSize">
-                <div class="cardPadding">
-                    <div class="card">
-                        <div class="cardImageOuter">
-                            <div class="cardImage">
-                            <img src="./images/multi-region-web-app.svg">
-                            </div>
-                        </div>
-                        <div class="cardText">
-                            <h3>Run in multiple regions</h3>
-                            <p>Run a web application in multiple regions to achieve high availability.</p>
+        </div>
+    </a>
+</li>
+    <!-- Run in multiple regions -->
+<li style="display: flex; flex-direction: column;">
+    <a href="./multi-region.md" style="display: flex; flex-direction: column; flex: 1 0 auto;">
+        <div class="cardSize" style="flex: 1 0 auto; display: flex;">
+            <div class="cardPadding" style="display: flex;">
+                <div class="card">
+                    <div class="cardImageOuter">
+                        <div class="cardImage">
+                            <img src="./images/multi-region-web-app.svg" height="140px" />
                         </div>
                     </div>
+                    <div class="cardText">
+                        <h3>Run in multiple regions</h3>
+                        <p>Run a web application in multiple regions to achieve high availability.</p>
+                    </div>
                 </div>
             </div>
-        </a>
-    </li>
-</ul>
+        </div>
+    </a>
+</li>
+    </ul>
+</section>
 
+<ul class="panelContent cardsI">
+</ul>
\ No newline at end of file