diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade
index 1ff4c4aad1..43ea0e0f5f 100644
--- a/public/_includes/_scripts-include.jade
+++ b/public/_includes/_scripts-include.jade
@@ -13,8 +13,13 @@ script(src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.
 script(src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js")
 
 
-
+<!-- Angular.io Site JS -->
 script(src="/resources/js/site.js")
+script(src="/resources/js/controllers/app-controller.js")
+script(src="/resources/js/directives/bio.js")
+script(src="/resources/js/directives/code.js")
+script(src="/resources/js/directives/code-tabs.js")
+
 
 <!-- GA -->
 script.
diff --git a/public/about/index.jade b/public/about/index.jade
index bcb00972fa..f12affab52 100644
--- a/public/about/index.jade
+++ b/public/about/index.jade
@@ -19,7 +19,7 @@
   <!-- BIO CARDS -->
   for person, name in bios
     .c3
-      md-card(class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
+      md-card(bio class="bio-card" data-website="#{person.website}" data-twitter="#{person.twitter}" data-pic="#{person.picture}" data-bio="#{person.bio}"  data-name="#{person.name}" ng-click="showBio($event)")
         header
           image(src="#{person.picture}" alt="#person.name")
 
diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js
new file mode 100644
index 0000000000..7ecbda9bbc
--- /dev/null
+++ b/public/resources/js/controllers/app-controller.js
@@ -0,0 +1,32 @@
+/*
+* Apllication Controller
+*
+*/
+
+angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
+
+  $scope.showDocsNav = false;
+  $scope.showMainNav = false;
+  $scope.showMenu = false;
+
+  // TOGGLE MAIN NAV (TOP) ON MOBILE
+  $scope.toggleDocsMenu = function(event) {
+    event.preventDefault();
+    $scope.showDocsNav = !$scope.showDocsNav;
+  };
+
+  // TOGGLE DOCS NAV
+  $scope.toggleMainMenu = function(event) {
+    event.preventDefault();
+    $scope.showMainNav = !$scope.showMainNav;
+  };
+
+  // TOGGLE DOCS VERSION & LANGUAGE
+  $scope.toggleVersionMenu = function(event) {
+    event.preventDefault();
+    $scope.showMenu = !$scope.showMenu;
+  };
+
+  // INITIALIZE PRETTY PRINT
+  prettyPrint();
+}]);
\ No newline at end of file
diff --git a/public/resources/js/directives/bio.js b/public/resources/js/directives/bio.js
new file mode 100644
index 0000000000..ae979c85b5
--- /dev/null
+++ b/public/resources/js/directives/bio.js
@@ -0,0 +1,48 @@
+angularIO.directive('bio', function($rootScope, $timeout) {
+  return {
+    restrict: 'A',
+    replace: true,
+    scope: {},
+    link: function (scope, element, attrs) {
+      var name = element.attr('data-name');
+      var bio = element.attr('data-bio');
+      var pic = element.attr('data-pic');
+      var twitter = element.attr('data-twitter');
+      var website =  element.attr('data-website');
+      var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  element.attr('data-twitter') + '" md-button>Twitter</a>' : '';
+      var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + element.attr('data-website') + '" md-button>Website</a>' : '';
+
+      scope.showBio = function(event) {
+        $mdDialog.show({
+          parent: angular.element(document.body),
+          targetEvent: $event,
+          template:
+            '<md-dialog class="modal" aria-label="List dialog">' +
+            '  <md-content>' +
+            '     <img class="left" src="' + pic + '" />' +
+            '     <h3 class="text-headline">' + name + '</h3>' +
+            '     <div class="modal-social">' + $twitter + $website + '</div>' +
+            '     <p class="text-body">' + bio + '</p>' +
+            '  </md-content>' +
+            '  <div class="md-actions">' +
+            '    <md-button ng-click="closeDialog()">' +
+            '      Close Bio' +
+            '    </md-button>' +
+            '  </div>' +
+            '</md-dialog>',
+          locals: {
+            items: $scope.items
+          },
+        controller: DialogController
+        });
+      };
+
+      function DialogController(scope, $mdDialog, items) {
+        scope.items = items;
+        scope.closeDialog = function() {
+          $mdDialog.hide();
+        };
+      }
+    }
+  };
+});
\ No newline at end of file
diff --git a/public/resources/js/directives/code-tabs.js b/public/resources/js/directives/code-tabs.js
new file mode 100644
index 0000000000..e33048b239
--- /dev/null
+++ b/public/resources/js/directives/code-tabs.js
@@ -0,0 +1,72 @@
+/*
+* Code Tabs
+*
+*/
+
+angularIO.directive('code-tabs', function() {
+  return {
+    template: 'Name: {{customer.name}} Address: {{customer.address}}'
+  };
+
+
+  $scope.language = 'es5';
+  var $codeBoxes = $('.code-box');
+
+  if($codeBoxes.length) {
+    //UPDATE ALL CODE BOXES
+    $codeBoxes.each(function(index, codeBox) {
+      //REGISTER ELEMENTS
+      var $codeBox = $(codeBox);
+      var $examples = $codeBox.find('.prettyprint');
+      var $firstItem = $($examples[0]);
+      var $header = $("<header class='code-box-header'></header>");
+      var $nav = $("<nav class='code-box-nav'></nav>");
+      var selectedName = '';
+
+      //HIDE/SHOW CONTENT
+      $examples.addClass('is-hidden');
+      $firstItem.removeClass('is-hidden');
+
+      //UPDATE NAV FOR EACH CODE BOX
+      $examples.each(function(index, example) {
+        var $example = $(example);
+        var name = $example.data('name');
+        var selected = (index === 0) ? 'is-selected' : '';
+        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
+
+        // ADD EVENTS FOR CODE SNIPPETS
+        $button.on('click', function(e) {
+          e.preventDefault();
+          var $currentButton = $(e.currentTarget);
+          var $buttons = $nav.find('.button');
+          var selectedName = $currentButton.data('name');
+          $buttons.removeClass('is-selected');
+          $currentButton.addClass('is-selected');
+
+          //UPDAT VIEW ON SELECTTION
+          $examples.addClass('is-hidden');
+          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
+          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
+        });
+
+        $nav.append($button);
+      });
+
+      //ADD HEADER TO DOM
+      $header.append($nav);
+      $codeBox.prepend($header);
+    });
+
+    //FADEIN EXAMPLES
+    $codeBoxes.addClass('is-visible');
+  }
+
+  // TOGGLE CODE LANGUAGE
+  $scope.toggleCodeExample = function(event, name) {
+    event.preventDefault();
+    $scope.language = language;
+  };
+
+
+});
+
diff --git a/public/resources/js/directives/code.js b/public/resources/js/directives/code.js
new file mode 100644
index 0000000000..fe8d5c5309
--- /dev/null
+++ b/public/resources/js/directives/code.js
@@ -0,0 +1,23 @@
+/*
+* Code Formatting
+*
+*/
+
+
+angularIO.directive('pre', function() {
+  return {
+    template: 'Name: {{customer.name}} Address: {{customer.address}}'
+  };
+
+
+  if($codeBlocks.length) {
+    $codeBlocks.each(function(index, codeEl) {
+      var $codeEl = $(codeEl);
+
+      if(!$codeEl.hasClass('prettyprint')) {
+        $codeEl.addClass('prettyprint linenums');
+      }
+    });
+  }
+
+});
\ No newline at end of file
diff --git a/public/resources/js/site.js b/public/resources/js/site.js
deleted file mode 100644
index 2a31633f07..0000000000
--- a/public/resources/js/site.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/*
-* Apllication Module
-*
-*/
-
-var angularIO = angular.module('angularIOApp', ['ngMaterial', 'ngTouch'])
-.config(function($mdThemingProvider) {
-  $mdThemingProvider.theme('default')
-    .primaryPalette('blue', {
-      'default': '700', // by default use shade 400 from the pink palette for primary intentions
-      'hue-1': '100', // use shade 100 for the <code>md-hue-1</code> class
-      'hue-2': '600', // use shade 600 for the <code>md-hue-2</code> class
-      'hue-3': 'A100' // use shade A100 for the <code>md-hue-3</code> class
-    })
-    // If you specify less than all of the keys, it will inherit from the
-    // default shades
-    .accentPalette('purple', {
-      'default': '200' // use shade 200 for default, and keep all other shades the same
-    });
-});
-
-
-/*
-* Apllication Controller
-*
-*/
-
-angularIO.controller('AppCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){
-
-  $scope.showDocsNav = false;
-  $scope.showMainNav = false;
-  $scope.showMenu = false;
-
-  // TOGGLE MAIN NAV (TOP) ON MOBILE
-  $scope.toggleDocsMenu = function(event) {
-    event.preventDefault();
-    $scope.showDocsNav = !$scope.showDocsNav;
-  };
-
-  // TOGGLE DOCS NAV
-  $scope.toggleMainMenu = function(event) {
-    event.preventDefault();
-    $scope.showMainNav = !$scope.showMainNav;
-  };
-
-  // TOGGLE DOCS VERSION & LANGUAGE
-  $scope.toggleVersionMenu = function(event) {
-    event.preventDefault();
-    $scope.showMenu = !$scope.showMenu;
-  };
-
-
-  /*
-  * Code Switcher
-  *
-  */
-
-  $scope.language = 'es5';
-  var $codeBoxes = $('.code-box');
-
-  if($codeBoxes.length) {
-    //UPDATE ALL CODE BOXES
-    $codeBoxes.each(function(index, codeBox) {
-      //REGISTER ELEMENTS
-      var $codeBox = $(codeBox);
-      var $examples = $codeBox.find('.prettyprint');
-      var $firstItem = $($examples[0]);
-      var $header = $("<header class='code-box-header'></header>");
-      var $nav = $("<nav class='code-box-nav'></nav>");
-      var selectedName = '';
-
-      //HIDE/SHOW CONTENT
-      $examples.addClass('is-hidden');
-      $firstItem.removeClass('is-hidden');
-
-      //UPDATE NAV FOR EACH CODE BOX
-      $examples.each(function(index, example) {
-        var $example = $(example);
-        var name = $example.data('name');
-        var selected = (index === 0) ? 'is-selected' : '';
-        var $button = $("<button class='button " + selected + "' data-name='" + name + "'>" + name+ "</button>");
-
-        // ADD EVENTS FOR CODE SNIPPETS
-        $button.on('click', function(e) {
-          e.preventDefault();
-          var $currentButton = $(e.currentTarget);
-          var $buttons = $nav.find('.button');
-          var selectedName = $currentButton.data('name');
-          $buttons.removeClass('is-selected');
-          $currentButton.addClass('is-selected');
-
-          //UPDAT VIEW ON SELECTTION
-          $examples.addClass('is-hidden');
-          var $currentExample = $codeBox.find(".prettyprint[data-name='" + selectedName + "']");
-          $currentExample.removeClass('is-hidden').addClass('animated fadeIn');
-        });
-
-        $nav.append($button);
-      });
-
-      //ADD HEADER TO DOM
-      $header.append($nav);
-      $codeBox.prepend($header);
-    });
-
-    //FADEIN EXAMPLES
-    $codeBoxes.addClass('is-visible');
-  }
-
-  // TOGGLE CODE LANGUAGE
-  $scope.toggleCodeExample = function(event, name) {
-    event.preventDefault();
-    $scope.language = language;
-  };
-
-  /*
-  * Code Formatting
-  *
-  */
-
-  var $codeBlocks = $('pre');
-
-  if($codeBlocks.length) {
-    $codeBlocks.each(function(index, codeEl) {
-      var $codeEl = $(codeEl);
-
-      if(!$codeEl.hasClass('prettyprint')) {
-        $codeEl.addClass('prettyprint linenums');
-      }
-    });
-  }
-
-  // BIO MODAL
-  $scope.showBio = function($event) {
-    var parentEl = angular.element(document.body);
-    var person = angular.element($event.currentTarget);
-    var name = person.attr('data-name');
-    var bio = person.attr('data-bio');
-    var pic = person.attr('data-pic');
-    var twitter = person.attr('data-twitter');
-    var website =  person.attr('data-website');
-    var $twitter = twitter !== 'undefined' ? '<a class="button button-subtle button-small" href="https://twitter.com/' +  person.attr('data-twitter') + '" md-button>Twitter</a>' : '';
-    var $website = website !== 'undefined' ? '<a class="button button-subtle button-small" href="' + person.attr('data-website') + '" md-button>Website</a>' : '';
-
-    $mdDialog.show({
-      parent: parentEl,
-      targetEvent: $event,
-      template:
-        '<md-dialog class="modal" aria-label="List dialog">' +
-        '  <md-content>' +
-        '     <img class="left" src="' + pic + '" />' +
-        '     <h3 class="text-headline">' + name + '</h3>' +
-        '     <div class="modal-social">' + $twitter + $website + '</div>' +
-        '     <p class="text-body">' + bio + '</p>' +
-        '  </md-content>' +
-        '  <div class="md-actions">' +
-        '    <md-button ng-click="closeDialog()">' +
-        '      Close Bio' +
-        '    </md-button>' +
-        '  </div>' +
-        '</md-dialog>',
-      locals: {
-        items: $scope.items
-      },
-    controller: DialogController
-    });
-
-    function DialogController(scope, $mdDialog, items) {
-      scope.items = items;
-      scope.closeDialog = function() {
-        $mdDialog.hide();
-      };
-    }
-  };
-
-
-  // INITIALIZE PRETTY PRINT
-  prettyPrint();
-}]);
-
-
-
-