diff --git a/public/_data.json b/public/_data.json
index cc7f331656..1232f0a1de 100644
--- a/public/_data.json
+++ b/public/_data.json
@@ -31,21 +31,5 @@
 
   "presskit": {
     "title": "Press Kit"
-  },
-
-  "books": {
-    "title": "Books"
-  },
-
-  "training": {
-    "title": "Training"
-  },
-
-  "communities": {
-    "title": "Communities"
-  },
-
-  "tooling": {
-    "title": "Tooling and Libraries"
   }
 }
diff --git a/public/resources/_data.json b/public/resources/_data.json
index 43a2a280be..3fc44bb733 100644
--- a/public/resources/_data.json
+++ b/public/resources/_data.json
@@ -1,5 +1,5 @@
 {
   "index": {
-    "title": "Resources"
+    "title": "Explore Angular Resources"
   }
-}
+}
\ No newline at end of file
diff --git a/public/resources/css/module/_resources.scss b/public/resources/css/module/_resources.scss
index 8c29d7a091..01b71ac5f1 100644
--- a/public/resources/css/module/_resources.scss
+++ b/public/resources/css/module/_resources.scss
@@ -1,100 +1,126 @@
 .resources {
-  .flex {
-    display: flex;
-    flex-wrap: wrap;
+
+  .h-affix {
+    position: fixed;
   }
 
-  .showcase-content {
-    @media(max-width: 320px) {
-      padding: 0;
+  .affix-top {
+    top: 50px;
+  }
+
+  .c-resource {
+    h4 {
+      margin: 0;
+      line-height: 24px;
+    }
+
+    p {
       margin: 0;
     }
   }
-  
-  .resource-tabs {
-    margin: 0;
-    padding: 0;
-    list-style: none;
+
+  .c-resource-nav {
+    margin-top: 48px;
+    width: $unit * 20;
+    z-index: $layer-1;
+    background-color: #fff;
+    border-radius: 2px;
+
+    a {
+      color: #373E41;
+      text-decoration: none;
+    }
+
+    .category {
+      padding: 10px 0;
+
+      .category-link {
+        display: block;
+        margin: 2px 0;
+        padding: 3px 14px;
+        font-size: 18px !important;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+
+    .subcategory {
+      .subcategory-link {
+        display: block;
+        margin: 2px 0;
+        padding: 4px 14px;
+
+        &:hover {
+          background: #edf0f2;
+          color: #2B85E7;
+        }
+      }
+    }
+  }
+
+  .h-anchor-offset {
+    display: block;
+    position: relative;
+    top: -20px;
+    visibility: hidden;
+  }
+
+  .l-flex--column {
     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;
-      }
-    }
+    flex-direction: column;
   }
 
-  .subsection {
-    margin-bottom: 64px;
+  .c-resource-header {
+    margin-bottom: 16px;
   }
 
-  .subsection-title {
-    font-weight: 400;
+  .c-contribute {
+    margin-bottom: 24px;
   }
 
-  .card {
-    display: inline-block;
-    width: 320px;
-    margin-right: $unit * 4;
-
-    @media(max-width: 320px) {
-      margin-right: 0;
-      width: 275px;
-    }
+  .c-resource-header h2 {
+    margin: 0;
   }
 
-  .title-link {
-    padding: 0 16px;
+  .subcategory-title {
+    padding: 16px 23px;
+    margin: 0;
+    background-color: $mist;
+    color: #373E41;
   }
 
-  .description {
-    padding-bottom: 32px;
-    line-height: 21px;
+  .h-capitalize {
+    text-transform: capitalize;
   }
 
-  a {
-    font-size: 16px;
+  .h-hide {
+    display: none;
+  }
+
+  .resource-row-link {
     color: #1a2326;
-
-    &.card-link {
-      font-size: 14px;
-      color: #1D77CE;
-    }
-
-    &:hover {
-      color: #1D77CE;
-    }
+    border: transparent solid 1px;
+    margin: 0;
+    padding: 16px 23px 16px 23px;
+    position: relative;
+    text-decoration: none;
+    transition: all .3s;
   }
 
-  .form a {
-    color: $regal;
+  .resource-row-link:hover {
+    text-decoration: none;
+    border-color: #2B85E7;
+    border-radius: 4px;
+    box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
+    transform: translate3d(0, -2px, 0);
+  }
+
+  @media(max-width: 900px) {
+    .c-resource-nav {
+      display: none;
+    }
   }
 }
-
-.capitalize {
-  text-transform: capitalize !important;
-}
\ No newline at end of file
diff --git a/public/resources/index.ejs b/public/resources/index.ejs
index d2a54af0ff..fa4f07bcb8 100644
--- a/public/resources/index.ejs
+++ b/public/resources/index.ejs
@@ -1,39 +1,27 @@
-<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
-    <div class="showcase-content">
-        <div>
-            <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>
+<div class="resources js-resources-ctrl grid-fixed" ng-controller="ResourcesCtrl as ctrl">
+    <div class="c8">
+        <div class="l-flex--column">
+            <div class="showcase" ng-repeat="(category, categoryObj) in ctrl.fbObject">
+                <header class="c-resource-header">
+                    <a class="h-anchor-offset" name="{{category}}"></a>
+                    <h2 class="text-headline text-uppercase">{{ category }}</h2>
+                </header>
 
-            <h1>Explore our Resources</h1>
+                <div class="shadow-1">
+                    <div ng-repeat="(subCategory, subcategoryObj) in categoryObj">
+                        <a class="h-anchor-offset" name="{{subCategory}}"></a>
+                        <h3 class="text-uppercase subcategory-title">{{subCategory}}</h3>
 
-            <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 ng-repeat="(section, sectionObj) in subcategoryObj">
+                            <div ng-repeat="resource in sectionObj">
+                                <div class="c-resource" ng-if="resource.rev">
+                                    <a class="l-flex--column resource-row-link" target="_blank" href="{{resource.url}}">
+                                        <div>
+                                            <h4>{{ resource.title }}</h4>
+                                            <p class="resource-description" ng-if="resource.desc">{{ resource.desc }}</p>
+                                            <p class="resource-description" ng-if="!resource.desc">No Description</p>
+                                        </div>
+                                    </a>
                                 </div>
                             </div>
                         </div>
@@ -42,4 +30,15 @@
             </div>
         </div>
     </div>
+
+    <div class="c3">
+        <div class="c-resource-nav shadow-1 l-flex--column h-affix" ng-class="{ 'affix-top': ctrl.scrollPos > 200 }">
+            <div class="category" ng-repeat="(category, categoryObj) in ctrl.fbObject">
+                <a class="category-link h-capitalize" href="#{{ category }}">{{ category }}</a>
+                <div class="subcategory" ng-repeat="(subCategory, subcategoryObj) in categoryObj">
+                    <a class="subcategory-link" href="#{{subCategory}}">{{subCategory}}</a>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/public/resources/js/controllers/resources-controller.js b/public/resources/js/controllers/resources-controller.js
index 75c7dc1aaa..ae477cbbf7 100644
--- a/public/resources/js/controllers/resources-controller.js
+++ b/public/resources/js/controllers/resources-controller.js
@@ -4,14 +4,33 @@
  * This controller is responsible for fetching all the data for the resources page,
  * from Firebase.
  */
-angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
+angularIO.controller('ResourcesCtrl', ['$scope', '$element', '$window', '$firebaseArray', '$firebaseObject','$location', function ($scope, $window, $element, $firebaseArray, $firebaseObject, $location) {
   var DEFAULT_CATEGORY = 'education';
-  var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
+  var categoryRef = new Firebase("https://project-8263071350145382327.firebaseio.com/");
+
+  // TODO: (ericjim): we need the database
+  var devRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Development");
+  devRef.setPriority(1000);
+
+  var eduRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Education");
+  eduRef.setPriority(2000);
+
+  var communityRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Community");
+  communityRef.setPriority(3000);
+
+
   var vm = this;
 
   vm.fbObject = $firebaseObject(categoryRef);
   vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
 
+  vm.scrollPos = 0;
+
+  window.onscroll = function() {
+    vm.scrollPos = document.body.scrollTop || document.documentElement.scrollTop || 0;
+    $scope.$apply();
+  };
+
   // onSelect :: String
   // Side effect, modifies vm.selectedCategory
   vm.onSelectCategory = function onSelectCategory(category) {