diff --git a/build/build.js b/build/build.js
index c21876df251..e5c8f03f0fd 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,3 +1,4 @@
 const formatIndexFor = require('./reference-architectures/index');
 formatIndexFor('.');
-formatIndexFor('app-service-web-app');
\ No newline at end of file
+formatIndexFor('app-service-web-app');
+formatIndexFor('dmz');
\ No newline at end of file
diff --git a/docs/reference-architectures/dmz/index.json b/docs/reference-architectures/dmz/index.json
new file mode 100644
index 00000000000..8016ade1f18
--- /dev/null
+++ b/docs/reference-architectures/dmz/index.json
@@ -0,0 +1,19 @@
+{
+    "title": "Network DMZ",
+    "description": "Explains and compares the different methods available for protecting applications and components running in Azure as part of a hybrid system from unauthorized intrusion.",
+    "summary": "These reference architectures show proven practices for creating a network DMZ that protects the boundary between an Azure virtual network and an on-premises network or the Internet.",
+    "series": [
+        {
+            "title": "DMZ between Azure and on-premises",
+            "url": "./secure-vnet-hybrid.md",
+            "image": "./images/secure-vnet-hybrid.svg",
+            "summary": "Implements a secure hybrid network that extends an on-premises network to Azure."
+        },
+        {
+            "title": "DMZ between Azure and the Internet",
+            "url": "./secure-vnet-dmz.md",
+            "image": "./images/secure-vnet-dmz.svg",
+            "summary": "Implements a secure network that accepts Internet traffic to Azure."
+        }
+    ]
+}
\ No newline at end of file
diff --git a/docs/reference-architectures/dmz/index.md b/docs/reference-architectures/dmz/index.md
index 709789c5d17..e0ee58413ba 100644
--- a/docs/reference-architectures/dmz/index.md
+++ b/docs/reference-architectures/dmz/index.md
@@ -3,48 +3,58 @@ title: Network DMZ
 description: Explains and compares the different methods available for protecting applications and components running in Azure as part of a hybrid system from unauthorized intrusion.
 layout: LandingPage
 ---
+<!-- This file is generated! -->
+<!-- See the templates in ./build/reference-architectures  -->
+<!-- See data in index.json -->
+
 # Network DMZ
 
 These reference architectures show proven practices for creating a network DMZ that protects the boundary between an Azure virtual network and an on-premises network or the Internet.
 
-<ul class="panelContent">
-    <li>
-        <a href="./secure-vnet-hybrid.md">
-            <div class="cardSize">
-                <div class="cardPadding">
-                    <div class="card">
-                        <div class="cardImageOuter">
-                            <div class="cardImage">
-                            <img src="./images/secure-vnet-hybrid.svg">
-                            </div>
-                        </div>
-                        <div class="cardText">
-                            <h3>DMZ between Azure and on-premises</h3>
-                            <p>Implements a secure hybrid network that extends an on-premises network to Azure.</p>
+<section class="series">
+    <ul class="panelContent">
+    <!-- DMZ between Azure and on-premises -->
+<li style="display: flex; flex-direction: column;">
+    <a href="./secure-vnet-hybrid.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/secure-vnet-hybrid.svg" height="140px" />
                         </div>
                     </div>
+                    <div class="cardText">
+                        <h3>DMZ between Azure and on-premises</h3>
+                        <p>Implements a secure hybrid network that extends an on-premises network to Azure.</p>
+                    </div>
                 </div>
             </div>
-        </a>
-    </li>
-    <li>
-        <a href="./secure-vnet-dmz.md">
-            <div class="cardSize">
-                <div class="cardPadding">
-                    <div class="card">
-                        <div class="cardImageOuter">
-                            <div class="cardImage">
-                            <img src="./images/secure-vnet-dmz.svg">
-                            </div>
-                        </div>
-                        <div class="cardText">
-                            <h3>DMZ between Azure and the Internet</h3>
-                            <p>Implements a secure network that accepts Internet traffic to Azure.</p>
+        </div>
+    </a>
+</li>
+    <!-- DMZ between Azure and the Internet -->
+<li style="display: flex; flex-direction: column;">
+    <a href="./secure-vnet-dmz.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/secure-vnet-dmz.svg" height="140px" />
                         </div>
                     </div>
+                    <div class="cardText">
+                        <h3>DMZ between Azure and the Internet</h3>
+                        <p>Implements a secure network that accepts Internet traffic to Azure.</p>
+                    </div>
                 </div>
             </div>
-        </a>
-    </li>
-</ul>
+        </div>
+    </a>
+</li>
+    </ul>
+</section>
 
+<ul class="panelContent cardsI">
+</ul>
\ No newline at end of file