diff --git a/common/config.js b/common/config.js
index 0df4436..5480db8 100644
--- a/common/config.js
+++ b/common/config.js
@@ -7,6 +7,20 @@ export const getPageNames = (radar) => {
   ]
 }
 
+export const quadrants = [
+  'languages-and-frameworks',
+  'methods-and-patterns',
+  'platforms-and-aoe-services',
+  'tools',
+];
+
+export const rings = [
+  'assess',
+  'trial',
+  'hold',
+  'adopt',
+];
+
 const messages = {
   'languages-and-frameworks': 'Languages & Frameworks',
   'methods-and-patterns': 'Methods & Patterns',
diff --git a/js/components/PageIndex.js b/js/components/PageIndex.js
index f3717e7..843010f 100644
--- a/js/components/PageIndex.js
+++ b/js/components/PageIndex.js
@@ -1,112 +1,14 @@
 import React from 'react';
 import HeroHeadline from './HeroHeadline';
+import QuadrantGrid from './QuadrantGrid';
 
-export default function PageIndex() {
+export default function PageIndex({ items }) {
   return (
     <div>
       <div className="headline-group">
         <HeroHeadline alt="Mar 2017">AOE Technology Radar</HeroHeadline>
       </div>
-      <div className="quadrant-grid">
-        <div className="quadrant-grid__quadrant">
-          <div className="quadrant-section">
-            <div className="quadrant-section__header">
-              <div className="split">
-                <div className="split__left">
-                  <h4 className="headline">Platforms and AOE Services</h4>
-                </div>
-                <div className="split__right"><a className="icon-link" href="/platforms-and-aoe-services.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-              </div>
-            </div>
-            <div className="quadrant-section__rings">
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
-                  <span className="ring-list__item"><a className="link" href="/platforms-and-aoe-services/bar.html">Bar</a></span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="quadrant-grid__quadrant">
-          <div className="quadrant-section">
-            <div className="quadrant-section__header">
-              <div className="split">
-                <div className="split__left">
-                  <h4 className="headline">Methods &amp; Patterns</h4>
-                </div>
-                <div className="split__right"><a className="icon-link" href="/methods-and-patterns.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-              </div>
-            </div>
-            <div className="quadrant-section__rings">
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
-                  <span className="ring-list__item"><a className="link" href="/methods-and-patterns/foo.html">Foo</a></span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="quadrant-grid__quadrant">
-          <div className="quadrant-section">
-            <div className="quadrant-section__header">
-              <div className="split">
-                <div className="split__left">
-                  <h4 className="headline">Tools</h4>
-                </div>
-                <div className="split__right"><a className="icon-link" href="/tools.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-              </div>
-            </div>
-            <div className="quadrant-section__rings">
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
-                  <span className="ring-list__item"><a className="link" href="/tools/grunt.html">Grunt 2</a></span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div className="quadrant-grid__quadrant">
-          <div className="quadrant-section">
-            <div className="quadrant-section__header">
-              <div className="split">
-                <div className="split__left">
-                  <h4 className="headline">Languages &amp; Frameworks</h4>
-                </div>
-                <div className="split__right"><a className="icon-link" href="/languages-and-frameworks.html"><span className="icon icon--pie icon-link__icon"></span>Quadrant Overview</a></div>
-              </div>
-            </div>
-            <div className="quadrant-section__rings">
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--trial">trial</span></div>
-                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react.html">React</a></span>
-                </div>
-              </div>
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--assess">assess</span></div>
-                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/react123.html">This is a long title</a></span><span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue123.html">Vue 123</a></span>
-                </div>
-              </div>
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--adopt">adopt</span></div>
-                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue.html">Vue</a></span>
-                </div>
-              </div>
-              <div className="quadrant-section__ring">
-                <div className="ring-list">
-                  <div className="ring-list__header"><span className="badge badge--hold">hold</span></div>
-                  <span className="ring-list__item"><a className="link" href="/languages-and-frameworks/vue1230.html">Something else</a></span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+      <QuadrantGrid items={items} />
     </div>
   );
 }
diff --git a/js/components/QuadrantGrid.js b/js/components/QuadrantGrid.js
new file mode 100644
index 0000000..54cfa7b
--- /dev/null
+++ b/js/components/QuadrantGrid.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import { groupByQuadrants } from '../../common/model';
+import { translate, quadrants, rings } from '../../common/config';
+
+const renderRing = (ringName, quadrantName, groups) => {
+  if (!groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
+    return null;
+  }
+  return (
+    <div className="quadrant-section__ring">
+      <div className="ring-list">
+        <div className="ring-list__header"><span className={`badge badge--${ringName}`}>{ringName}</span></div>
+        {
+          (groups[quadrantName][ringName]).map(item => (
+            <span
+              key={item.name}
+              className="ring-list__item"
+            >
+              <a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
+            </span>
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
+const renderQuadrant = (quadrantName, groups) => {
+  return (
+    <div key={quadrantName} className="quadrant-grid__quadrant">
+      <div className="quadrant-section">
+        <div className="quadrant-section__header">
+          <div className="split">
+            <div className="split__left">
+              <h4 className="headline">{translate(quadrantName)}</h4>
+            </div>
+            <div className="split__right">
+              <a className="icon-link" href={`/${quadrantName}.html`}>
+                <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="quadrant-section__rings">
+          {
+            rings.map((ringName) => renderRing(ringName, quadrantName, groups))
+          }
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function({ items }) {
+  const groups = groupByQuadrants(items);
+  return (
+    <div className="quadrant-grid">
+      {
+        quadrants.map((quadrantName) => renderQuadrant(quadrantName, groups))
+      }
+    </div>
+  );
+}