diff --git a/public/resources/css/module/_resources.scss b/public/resources/css/module/_resources.scss
index f8b9fb3498..8c29d7a091 100644
--- a/public/resources/css/module/_resources.scss
+++ b/public/resources/css/module/_resources.scss
@@ -1,18 +1,100 @@
 .resources {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row-reverse;
+  .flex {
+    display: flex;
+    flex-wrap: wrap;
+  }
 
-  @media(max-width: 768px) {
-    justify-content: center;
-    flex-direction: column-reverse;
+  .showcase-content {
+    @media(max-width: 320px) {
+      padding: 0;
+      margin: 0;
+    }
+  }
+  
+  .resource-tabs {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row-reverse;
+
+    @media(max-width: 500px) {
+      flex-direction: column-reverse;
+    }
+    
+    .resource-tab {
+      display: inline;
+      background-color: #CFD8DC;
+      padding: $unit (3 * $unit);
+      border-radius: 2px;
+      margin-right: 16px;
+      color: #455A64;
+
+      @media(max-width: 500px) {
+        margin-right: 0;
+        margin-bottom: 12px;
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: #B0BEC5;
+      }
+
+      &.selected {
+        color: #1D77CE;
+        background-color: #E3F2FB;
+        font-weight: bold;
+      }
+    }
+  }
+
+  .subsection {
+    margin-bottom: 64px;
+  }
+
+  .subsection-title {
+    font-weight: 400;
+  }
+
+  .card {
+    display: inline-block;
+    width: 320px;
+    margin-right: $unit * 4;
+
+    @media(max-width: 320px) {
+      margin-right: 0;
+      width: 275px;
+    }
+  }
+
+  .title-link {
+    padding: 0 16px;
+  }
+
+  .description {
+    padding-bottom: 32px;
+    line-height: 21px;
   }
 
   a {
     font-size: 16px;
+    color: #1a2326;
+
+    &.card-link {
+      font-size: 14px;
+      color: #1D77CE;
+    }
+
+    &:hover {
+      color: #1D77CE;
+    }
+  }
+
+  .form a {
+    color: $regal;
   }
 }
 
 .capitalize {
-  text-transform: capitalize;
+  text-transform: capitalize !important;
 }
\ No newline at end of file
diff --git a/public/resources/index.ejs b/public/resources/index.ejs
index bb85fc7ddc..d2a54af0ff 100644
--- a/public/resources/index.ejs
+++ b/public/resources/index.ejs
@@ -1,16 +1,42 @@
-<p class="text-body">Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.</p>
-
-<div class="js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
-    <div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
+<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
+    <div class="showcase-content">
         <div>
-            <h1 class="capitalize">{{category}}</h1>
-            <div ng-repeat="section in categoryContent">
-                <div ng-repeat="(subsectionName, subsectionObj) in section">
-                    <div>
-                        <h2>{{ subsectionObj.title }}</h2>
-                        <ul ng-repeat="resource in subsectionObj.resources">
-                            <li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li>
-                        </ul>
+            <div class="form l-space-bottom-7">
+                <div class="callout is-helpful">
+                    <p>
+                        Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
+                    </p>
+                </div>
+            </div>
+
+            <h1>Explore our Resources</h1>
+
+            <div class="flex" style="margin-bottom: 64px;">
+                <div class="resource-tabs">
+                    <div ng-repeat="(category, categoryContent) in ctrl.fbObject"
+                        class="resource-tab text-uppercase"
+                        ng-class="{selected: category === ctrl.selectedCategory}"
+                        ng-click="ctrl.onSelectCategory(category)">{{category}}
+                    </div>
+                </div>
+            </div>
+            <div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
+                <div ng-if="ctrl.selectedCategory === category">
+                    <div ng-repeat="section in categoryContent">
+                        <div ng-repeat="(subsectionName, subsectionObj) in section">
+                            <h1 class="subsection-title">{{ subsectionObj.title }}</h1>
+                            <div class="subsection flex">
+                                <div ng-repeat="resource in subsectionObj.resources">
+                                    <div class="card shadow-1" ng-if="resource.rev">
+                                        <a target="_blank" href="{{resource.url}}">
+                                            <h3 class="title-link">{{ resource.title }}</h3></a>
+                                        <!-- NOTE: Description may not exists for all entries -->
+                                        <p ng-if="resource.desc" class="description">{{ resource.desc }}</p>
+                                        <p ng-if="!resource.desc" class="description">No information found. Submit a description by filling out this <a class="card-link" href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/public/resources/js/controllers/resources-controller.js b/public/resources/js/controllers/resources-controller.js
index b5addb5fe7..75c7dc1aaa 100644
--- a/public/resources/js/controllers/resources-controller.js
+++ b/public/resources/js/controllers/resources-controller.js
@@ -4,10 +4,19 @@
  * This controller is responsible for fetching all the data for the resources page,
  * from Firebase.
  */
-angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', function ($firebaseArray, $firebaseObject) {
+angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
+  var DEFAULT_CATEGORY = 'education';
   var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
   var vm = this;
 
   vm.fbObject = $firebaseObject(categoryRef);
+  vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
+
+  // onSelect :: String
+  // Side effect, modifies vm.selectedCategory
+  vm.onSelectCategory = function onSelectCategory(category) {
+    $location.hash(category);
+    vm.selectedCategory = category;
+  };
 
 }]);
\ No newline at end of file