diff --git a/app/routes/index.js b/app/routes/index.js
new file mode 100644
index 0000000..4112f3f
--- /dev/null
+++ b/app/routes/index.js
@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model: function() {
+    return this.get('store').findAll("group");
+  }
+});
diff --git a/app/styles/pages/index.scss b/app/styles/pages/index.scss
index 7068e20..c3f8fe5 100644
--- a/app/styles/pages/index.scss
+++ b/app/styles/pages/index.scss
@@ -40,6 +40,12 @@
     .group {
       text-align: center;
       margin-top: $padding-l;
+      margin-bottom: $padding-xl;
+
+      .profile-picture {
+        width: 200px;
+        height: 200px;
+      }
 
       .description {
         margin-top: $padding-m;
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 382d9e2..8954298 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -24,31 +24,32 @@
       </div>
     </div>
     <div class="row">
-      <div class="offset-md-2 col-md-4 group">
-        {{#link-to "group.index" "childrens-church"}}
-          <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/fabe359d-8611-4112-b675-842cd40ef57e.jpg"
-                                      width=200
-                                      radius="max"
-                                      height=200 crop="fill"}} />
+      {{#each model as |group|}}
+      <div class="col-md-4 group">
+        {{#link-to "group.index" group.slug}}
+          <img class="profile-picture"
+            src={{cloudinary-fetch url=group.profilePictureUrl
+                                   width=200
+                                   radius="max"
+                                   height=200
+                                   crop="fill"}} />
         {{/link-to}}
         <div class="description">
-          {{#link-to "group.index" "childrens-church"}}
-            Children's Church
+          {{#link-to "group.index" group.slug}}
+            {{group.name}}
           {{/link-to}}
         </div>
       </div>
-      <div class="col-md-4 group" {{action "viewGroup" "english-service"}}>
-        {{#link-to "group.index" "english-service"}}
-          <img src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/groups/5c7d76a8-d195-4907-951d-5b3fb00c438d.jpg"
-                                      width=200
-                                      radius="max"
-                                      height=200 crop="fill"}} />
-
-        {{/link-to}}
+      {{/each}}
+      <div class="col-md-4 group">
+        <img class="profile-picture"
+          src={{cloudinary-fetch url="https://mcac.s3.amazonaws.com/bulletins/3017d548-1461-4520-8153-3ed1d910e11a.jpg"
+                                 width=200
+                                 radius="max"
+                                 height=200
+                                 crop="fill"}} />
         <div class="description">
-          {{#link-to "group.index" "english-service"}}
-            English Service
-          {{/link-to}}
+          Coming Soon...
         </div>
       </div>
     </div>
diff --git a/mirage/scenarios/default.js b/mirage/scenarios/default.js
index 3a14c15..5ccb51b 100644
--- a/mirage/scenarios/default.js
+++ b/mirage/scenarios/default.js
@@ -22,6 +22,7 @@ export default function(server) {
   }
 
   server.createList("post", 40, { group: englishService });
+  server.createList("group", 1);
 
   server.create("user", { email: "test@example.com", name: "Test User" });
 }
diff --git a/package.json b/package.json
index c91f9af..e2ce0a8 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.3.1",
     "ember-cli-jsonapi-pagination": "0.0.2",
-    "ember-cli-mirage": "^0.2.0",
+    "ember-cli-mirage": "0.2.0",
     "ember-cli-moment-shim": "1.0.0",
     "ember-cli-page-object": "^1.1.0",
     "ember-cli-pretender": "0.3.1",