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 b2cc2be..35f8103 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
@@ -20,14 +20,23 @@
     list-style-type: none;
     width: 100%;
     margin-bottom: 2%;
-    padding: 1% 0;
 }
 
 .nav li {
-
+    background-color: lightgray;
+    padding: 1% 0;
+}
+.nav li.selected {
+    font-weight: bold;
+    background-color: darkgray;
 }
 
 .nav a {
     display: table-cell;
     text-align: center;
+    text-decoration: none;
+    color: black;
+}
+.nav a:visited {
+    color: black;
 }
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
new file mode 100644
index 0000000..912b9ac
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/available.html
@@ -0,0 +1,11 @@
+<div id="available" ng-controller="CordAvailable as ctrl">
+    <h2>{{name}}</h2>
+    <table>
+        <tr ng-repeat="func in funcs">
+            <td class="icon">icon of function</td>
+            <td>{{func.name}}</td>
+            <td class="desc">{{func.desc}}</td>
+        </tr>
+    </table>
+    <button type="button">Apply</button>
+</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
new file mode 100644
index 0000000..6e1fa2f
--- /dev/null
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.css
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+div#bundle div.main-left {
+    width: 62%;
+}
+div#bundle div.main-right {
+    width: 38%;
+}
+
+#bundle table {
+    width: 100%;
+}
+
+#bundle td {
+    text-align: center;
+}
+#bundle td.icon {
+    width: 50px;
+    height: 50px;
+}
+#bundle td.desc {
+    width: 50%;
+    text-align: left;
+}
+
+#available button {
+    float: right;
+}
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
index b497f30..d8574b5 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/bundle/bundle.html
@@ -1,5 +1,20 @@
 <!-- Bundle page partial html -->
-<div class="container">
+<div id="bundle" class="container">
     <nav></nav>
-    <h2>Subscriber Bundles</h2>
+    <div class="main-left">
+        <h3>You are subscribed to the</h3>
+        <h2>{{name}}</h2>
+        <table>
+            <tr ng-repeat="func in funcs">
+                <td class="icon">icon of function</td>
+                <td>{{func.name}}</td>
+                <td class="desc">{{func.desc}}</td>
+                <td>{{func.params.level && "Level: " + func.params.level}}</td>
+            </tr>
+        </table>
+    </div>
+    <div class="main-right">
+        <h2>Available Bundles</h2>
+        <div bundle-available></div>
+    </div>
 </div>
\ No newline at end of file
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 a4d6c99..a65214b 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,13 +17,71 @@
 (function () {
     'use strict';
 
+    var $log, $resource;
+
+    var before = 'http://localhost:8080/rs/bundle/0',
+        after = 'http://localhost:8080/rs/bundle/1';
+
+    var basic = 'Basic Bundle',
+        family = 'Family Bundle',
+        current, which,
+        avScope;
+
+    function getAvailable(scope) {
+        var AvailableData, resource;
+
+        AvailableData = $resource(which);
+        resource = AvailableData.get({},
+            // success
+            function () {
+                scope.name = resource.bundle.name;
+                scope.funcs = resource.bundle.functions;
+            },
+            // error
+            function () {
+                $log.error('Problem with resource', resource);
+            });
+        $log.debug('Resource received:', resource);
+    }
+
     angular.module('cordBundle', [])
-        .controller('CordBundleCtrl', ['$log', '$scope',
-            function ($log, $scope) {
+        .controller('CordBundleCtrl', ['$log', '$scope', '$resource',
+            function (_$log_, $scope, _$resource_) {
+                var BundleData, resource;
                 $scope.page = 'bundle';
+                $log = _$log_;
+                $resource = _$resource_;
+
+                BundleData = $resource(after);
+                resource = BundleData.get({},
+                    // success
+                    function () {
+                        $scope.name = resource.bundle.name;
+                        current = $scope.name;
+                        $scope.funcs = resource.bundle.functions;
+
+                        which = (current === basic) ? after : before;
+                        getAvailable(avScope);
+                    },
+                    // error
+                    function () {
+                        $log.error('Problem with resource', resource);
+                    });
+                $log.debug('Resource received:', resource);
 
                 $log.debug('Cord Bundle Ctrl has been created.');
-        }]);
+        }])
 
-    // can have a directive here that uses templateUrl for editable and readonly
+        .controller('CordAvailable', ['$scope',
+            function ($scope) {
+                avScope = $scope;
+
+                $log.debug('Cord Available Ctrl has been created.');
+        }])
+
+        .directive('bundleAvailable', function () {
+            return {
+                templateUrl: 'app/view/bundle/available.html'
+            };
+        });
 }());
diff --git a/apps/demo/cord-gui/src/main/webapp/index.html b/apps/demo/cord-gui/src/main/webapp/index.html
index 1f98e6b..1c09563 100644
--- a/apps/demo/cord-gui/src/main/webapp/index.html
+++ b/apps/demo/cord-gui/src/main/webapp/index.html
@@ -49,6 +49,8 @@
     <script src="app/view/user/user.js"></script>
 
     <script src="app/view/bundle/bundle.js"></script>
+    <link rel="stylesheet" href="app/view/bundle/bundle.css">
+
 </head>
 <body ng-app="cordGui">
 <div id="frame" ng-controller="CordCtrl as cordCtrl"></div>