diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
index aa23af9..361f0d8 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.css
@@ -28,13 +28,13 @@
     transition: background-color 0.4s;
 }
 .nav li:hover {
-    background-color: #CE5650;
+    background-color: #BD5643;
 
 }
 .nav li.selected {
     font-weight: bold;
     color: white;
-    background: linear-gradient(#CE5650, #ce3630);
+    background: linear-gradient(#A56151, #BD5643);
     letter-spacing: 0.03em;
 }
 
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
index 0f9ffd1..56e62c4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/nav/nav.html
@@ -17,13 +17,16 @@
 <div class="nav">
     <ul>
         <a href="#/home">
-            <li ng-class="{selected: page === 'dashboard'}">Dashboard</li>
+            <li ng-class="{selected: page === 'dashboard'}"
+                ng-click="$route.reload()">Dashboard</li>
         </a>
         <a href="#/user">
-            <li ng-class="{selected: page === 'user'}">Users</li>
+            <li ng-class="{selected: page === 'user'}"
+                ng-click="$route.reload()">Users</li>
         </a>
         <a href="#/bundle">
-            <li ng-class="{selected: page === 'bundle'}">Bundles</li>
+            <li ng-class="{selected: page === 'bundle'}"
+                ng-click="$route.reload()">Bundles</li>
         </a>
     </ul>
 </div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
index d28b4a6..af0e940 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -1,5 +1,5 @@
-<div id="available" ng-controller="CordAvailable as ctrl">
+<div id="available">
     <h3>{{available.name}}</h3>
     <p>{{available.desc}}</p>
-    <button type="button">Apply</button>
+    <button ng-click="changeBundle(available.id)">Apply</button>
 </div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
index 564fd58..ea7b450 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.js
@@ -17,91 +17,56 @@
 (function () {
     'use strict';
 
-    var $log, $resource;
-
     var url = 'http://localhost:8080/rs/bundle';
 
     var basic = 'basic',
-        family = 'family',
-        current,
-        bundleScope,
-        avScope,
-        avCb;
-
-    function setAndRefresh(resource, scope) {
-        current = resource.bundle.id;
-        scope.name = resource.bundle.name;
-        scope.desc = resource.bundle.desc;
-        scope.funcs = resource.bundle.functions;
-        // emit event will say when avCb should be invoked
-        avCb(resource);
-    }
-
-    // TODO: figure out timing issues with bundle page
-    // available bundles sometimes is loaded before avCb and avScope is created?
-    // emit event that avCb can be called upon
+        family = 'family';
 
     angular.module('cordBundle', [])
-        .controller('CordAvailable', ['$scope',
-            function ($scope) {
-                avScope = $scope;
-                avCb = function (resource) {
-                    $scope.id = (current === basic) ? family : basic;
-                    $scope.bundles = resource.bundles;
+        .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
+            function ($log, $scope, $resource) {
+                var BundleData, resource,
+                    getData;
+                $scope.page = 'bundle';
 
-                    $scope.bundles.forEach(function (bundle) {
-                        if (bundle.id === $scope.id) {
-                            $scope.available = bundle;
-                        }
-                    });
+                getData = function (id) {
+                    if (!id) { id = ''; }
+
+                    BundleData = $resource(url + '/' + id);
+                    resource = BundleData.get({},
+                        // success
+                        function () {
+                            var current, availId;
+                            current = resource.bundle.id;
+                            $scope.name = resource.bundle.name;
+                            $scope.desc = resource.bundle.desc;
+                            $scope.funcs = resource.bundle.functions;
+
+                            availId = (current === basic) ? family : basic;
+                            resource.bundles.forEach(function (bundle) {
+                                if (bundle.id === availId) {
+                                    $scope.available = bundle;
+                                }
+                            });
+                        },
+                        // error
+                        function () {
+                            $log.error('Problem with resource', resource);
+                        });
                 };
 
-                $log.debug('Cord Available Ctrl has been created.');
-        }])
+                getData();
 
-        .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
-            function (_$log_, $scope, _$resource_) {
-                var BundleData, resource;
-                $scope.page = 'bundle';
-                bundleScope = $scope;
-                $log = _$log_;
-                $resource = _$resource_;
-
-                BundleData = $resource(url);
-                resource = BundleData.get({},
-                    // success
-                    function () {
-                        setAndRefresh(resource, $scope);
-                    },
-                    // error
-                    function () {
-                        $log.error('Problem with resource', resource);
-                    });
+                $scope.changeBundle = function (id) {
+                    getData(id);
+                };
 
                 $log.debug('Cord Bundle Ctrl has been created.');
             }])
 
-        .directive('bundleAvailable', ['$resource', function ($resource) {
+        .directive('bundleAvailable', [function () {
             return {
-                templateUrl: 'app/view/bundle/available.html',
-                link: function (scope, elem) {
-                    var button = $(elem).find('button'),
-                        ApplyData, resource;
-
-                    button.click(function () {
-                        ApplyData = $resource(url + '/' + avScope.available.id);
-                        resource = ApplyData.get({},
-                            // success
-                            function () {
-                                setAndRefresh(resource, bundleScope);
-                            },
-                            // error
-                            function () {
-                                $log.error('Problem with resource', resource);
-                            }
-                        );
-                    });
-                }
+                templateUrl: 'app/view/bundle/available.html'
             };
         }]);
 }());