diff --git a/applications/subscriberPortal/src/app/view/bundle/available.html b/applications/subscriberPortal/src/app/view/bundle/available.html
new file mode 100644
index 0000000..6f300d4
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/bundle/available.html
@@ -0,0 +1,5 @@
+<div ng-cloak class="ng-hide ng-cloak" ng-show="show" id="available">
+    <h3>{{available.name}}</h3>
+    <p>{{available.desc}}</p>
+    <button ng-click="changeBundle(available.id)">Apply</button>
+</div>
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.css b/applications/subscriberPortal/src/app/view/bundle/bundle.css
new file mode 100644
index 0000000..84fa842
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/bundle/bundle.css
@@ -0,0 +1,105 @@
+/*
+ * 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: 61%;
+    padding: 4% 0 0 1%;
+}
+div#bundle div.main-right {
+    width: 37%;
+    padding-top: 4%;
+}
+
+#bundle table {
+    width: 95%;
+    margin-top: 5%;
+    margin-left: 2%;
+    border-radius: 3px;
+}
+
+#bundle td {
+    font-size: 90%;
+}
+#bundle td.icon {
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    padding: 4%;
+}
+#bundle td.name {
+    border-left: solid 1px rgba(136, 0, 0, 0.25);
+    padding-left: 3%;
+}
+#bundle td.desc {
+    width: 60%;
+    text-align: left;
+    font-style: italic;
+}
+/* animation specific */
+#bundle tr.fadein.ng-leave td.name,
+#bundle tr.fadein.ng-leave-active td.name {
+    opacity: 0;
+    border: none;
+}
+
+#bundle img {
+    width: 100%;
+}
+
+#bundle h2 {
+    text-align: center;
+    padding: 3%;
+    font-weight: lighter;
+    border: 1px solid #3C3C3C;
+    cursor: pointer;
+}
+#bundle h2:hover {
+    color: #CE5650;
+    border-color: #CE5650;
+}
+
+div#bundles {
+    position: relative;
+}
+
+div#available.ng-hide-add.ng-hide-add-active,
+div#available.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.5s;
+    transition: all linear 0.5s;
+}
+div#available.ng-hide {
+    opacity: 0;
+    top: -80px;
+}
+
+div#available {
+    position: absolute;
+    padding: 5%;
+    opacity: 1;
+    top: -10px;
+    width: 100%;
+}
+
+#available p {
+    text-indent: initial;
+    text-align: initial;
+}
+
+#available button {
+    float: right;
+    width: 33%;
+    margin-top: 5%;
+}
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.html b/applications/subscriberPortal/src/app/view/bundle/bundle.html
new file mode 100644
index 0000000..8852d86
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/bundle/bundle.html
@@ -0,0 +1,24 @@
+<!-- Bundle page partial html -->
+<div id="bundle" class="container">
+    <div class="main-left">
+        <h4>You are subscribed to the</h4>
+        <h3>{{name}}</h3>
+        <p>{{desc}}</p>
+        <table>
+            <tr ng-repeat="func in funcs" class="fadein">
+                <td class="icon">
+                    <img ng-src="{{'/imgs/' + func.id + '.png'}}">
+                </td>
+                <td class="name">{{func.name}}</td>
+                <td class="desc">{{func.desc}}</td>
+            </tr>
+        </table>
+    </div>
+    <div class="main-right">
+        <img src="imgs/bundle.jpg">
+        <div ng-click="showBundles()">
+            <h2>Available Bundles</h2>
+        </div>
+        <div id="bundles" bundle-available></div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.js b/applications/subscriberPortal/src/app/view/bundle/bundle.js
new file mode 100644
index 0000000..310118b
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/bundle/bundle.js
@@ -0,0 +1,72 @@
+/*
+ * 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.
+ */
+
+(function () {
+  'use strict';
+
+  var urlSuffix = '/rs/bundle';
+
+  var basic = 'basic',
+    family = 'family';
+
+  angular.module('cordBundle', [])
+    .controller('CordBundleCtrl', function ($log, $scope, $resource, cordConfig) {
+      var BundleData, resource,
+        getData;
+      $scope.page.curr = 'bundle';
+      $scope.show = false;
+
+      // set the current bundle
+      $scope.name = cordConfig.bundles[cordConfig.activeBundle].name;
+      $scope.desc = cordConfig.bundles[cordConfig.activeBundle].desc;
+      $scope.funcs = cordConfig.bundles[cordConfig.activeBundle].functions;
+
+      // set the available bundle
+      if(cordConfig.activeBundle === 0) {
+        $scope.available = cordConfig.bundles[1];
+      }
+      else{
+        $scope.available = cordConfig.bundles[0];
+      }
+
+      // switching the bundles
+      $scope.changeBundle = function (id) {
+        if(cordConfig.activeBundle === 0){
+          cordConfig.activeBundle = 1;
+          $scope.available = cordConfig.bundles[0];
+        }
+        else{
+          cordConfig.activeBundle = 0;
+          $scope.available = cordConfig.bundles[1];
+        }
+        $scope.name = cordConfig.bundles[cordConfig.activeBundle].name;
+        $scope.desc = cordConfig.bundles[cordConfig.activeBundle].desc;
+        $scope.funcs = cordConfig.bundles[cordConfig.activeBundle].functions;
+      };
+
+      // hiding and showing bundles
+      $scope.showBundles = function () {
+        $scope.show = !$scope.show;
+      };
+
+      $log.debug('Cord Bundle Ctrl has been created.');
+    })
+    .directive('bundleAvailable', function () {
+      return {
+        templateUrl: 'app/view/bundle/available.html'
+      };
+    });
+}());
diff --git a/applications/subscriberPortal/src/app/view/common/common.css b/applications/subscriberPortal/src/app/view/common/common.css
new file mode 100644
index 0000000..5ae154b
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/common/common.css
@@ -0,0 +1,177 @@
+/*
+ * 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.
+ */
+
+[ng\:cloak], [ng-cloak], .ng-cloak {
+    display: none !important;
+}
+
+html, body, div#frame, div#view {
+    height: 100%;
+    overflow: scroll;
+}
+
+head, body, footer,
+h1, h2, h3, h4, h5, h6, p,
+a, ul, li, div,
+table, tr, td, th, thead, tbody,
+form, select, input, option, label {
+    padding: 0;
+    margin: 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+p, a, li, th, td,
+select, input, option, label {
+    font-family: sans-serif, "Droid Sans", "Lucida Grande", Arial, Helvetica;
+    color: #3C3C3C;
+}
+
+body {
+    background-color: white;
+    overflow: hidden;
+}
+table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+th, td {
+    color: rgba(0, 0, 0, 0.8);
+}
+h3 {
+    margin-bottom: 4%;
+    font-size: xx-large;
+    font-weight: lighter;
+}
+h4 {
+    font-size: large;
+    font-weight: lighter;
+}
+h5 {
+    color: rgb(107, 107, 107);
+    font-style: italic;
+    font-weight: normal;
+    font-size: 90%;
+    margin-bottom: 1%;
+}
+p {
+    font-size: 100%;
+    color: rgba(0,0,0, 0.8);
+    text-indent: 20px;
+    text-align: justify;
+    padding-right: 5%;
+}
+th {
+    background-color: #7AB6EA;
+    color: white;
+    letter-spacing: 0.05em;
+    font-weight: lighter;
+}
+
+button,
+input[type="button"],
+input[type="reset"] {
+    height: 30px;
+    box-shadow: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    letter-spacing: 0.02em;
+    font-size: 14px;
+    background-color: lightgray;
+    transition: background-color 0.4s;
+}
+button:hover,
+input[type="button"]:hover,
+input[type="reset"]:hover {
+    color: white;
+    background-color: rgb(122, 188, 229);
+}
+
+button[disabled],
+input[type="button"][disabled],
+input[type="reset"][disabled] {
+    background-color: lightgray;
+    color: graytext;
+}
+
+
+button[disabled]:hover,
+input[type="button"][disabled]:hover,
+input[type="reset"][disabled]:hover {
+    cursor: default;
+}
+
+div.container {
+    width: 85%;
+    margin: 0 auto;
+    min-height: 100%;
+}
+div.main-left, div.main-right {
+    float: left;
+}
+div.main-left {
+    width: 37%;
+    padding-left: 1%;
+}
+div.main-right {
+    width: 61%;
+}
+
+svg#icon-defs {
+    display: none;
+}
+
+g.icon circle {
+    fill: none;
+}
+g.icon use.glyph.checkMark {
+    fill: rgb(68, 189, 83)
+}
+g.icon use.glyph.xMark {
+    fill: #CE5650;
+}
+
+th.user-pic {
+    background-color: white;
+}
+th.user-pic,
+td.user-pic {
+    width: 30px;
+    padding-left: 4%;
+}
+td.user-pic img {
+    width: 25px;
+}
+
+/* animation */
+.fadein {
+    transition: all linear 0.5s;
+}
+.fadein.ng-enter-stagger,
+.fadein.ng-leave-stagger {
+    transition-delay: 0.2s;
+    animation-delay: 0.2s;
+}
+.fadein.ng-enter {
+    opacity: 0;
+}
+.fadein.ng-enter.ng-enter-active {
+    opacity: 1;
+}
+.fadein.ng-leave,
+.fadein.ng-leave-active {
+    opacity: 0;
+}
diff --git a/applications/subscriberPortal/src/app/view/home/home.css b/applications/subscriberPortal/src/app/view/home/home.css
new file mode 100644
index 0000000..58f07a5
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/home/home.css
@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+#home div.main-left {
+    width: 55%;
+    padding: 0;
+}
+#home div.main-right {
+    padding: 1% 0 0 3%;
+    width: 42%;
+}
+#home div.move-down {
+    margin-top: 5%;
+}
+
+#home div.image-holder {
+    width: 100%;
+    position: relative;
+}
+
+#home div.main-left img {
+    width: 100%;
+}
+
+#home div.main-right div.bundle-title {
+    padding: 2% 0;
+}
+
+#home h4 {
+    padding-bottom: 2%;
+}
+
+#home p {
+    margin-bottom: 3%;
+}
+
+#home table {
+    width: 94%;
+    table-layout: fixed;
+    margin-left: 6%;
+    border-left: 1px solid #CE5650;
+}
+
+#home table.users th,
+#home table.users td {
+    font-size: 90%;
+}
+
+#home td, #home th {
+    text-align: left;
+    padding: 2%;
+}
diff --git a/applications/subscriberPortal/src/app/view/home/home.html b/applications/subscriberPortal/src/app/view/home/home.html
new file mode 100644
index 0000000..a3d7fb2
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/home/home.html
@@ -0,0 +1,42 @@
+<!-- Home page partial html -->
+<div id="home" class="container">
+    <div class="main-left">
+        <img src="/imgs/home.jpg">
+    </div>
+
+    <div class="main-right">
+        <div class="move-down">
+            <div class="bundle-title">
+                <h4>Welcome Dad!</h4>
+                <h5>You are subscribed to the</h5>
+                <h3>{{bundle_name}}</h3>
+            </div>
+
+            <p>{{bundle_desc}}</p>
+
+
+            <h4>Users</h4>
+            <table class="users">
+                <thead>
+                    <tr>
+                        <th class="user-pic"></th>
+                        <th>Name</th>
+                        <th>Last Login</th>
+                    </tr>
+                </thead>
+                <tbody>
+
+                <!--<pre>{{users | json}}</pre>-->
+
+                <tr ng-repeat="user in users" class="fadein">
+                        <td class="user-pic">
+                            <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
+                        </td>
+                        <td>{{user.name}}</td>
+                        <td>{{shared.userActivity[user.id]}}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/home/home.js b/applications/subscriberPortal/src/app/view/home/home.js
new file mode 100644
index 0000000..ea35436
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/home/home.js
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('cordHome', [])
+    .controller('CordHomeCtrl', function ($log, $scope, cordConfig, SubscriberUsers) {
+
+      $scope.page.curr = 'dashboard';
+
+      // NOTE subscriberId should be retrieved by login
+      SubscriberUsers.query({subscriberId: 1}).$promise
+      .then(function(res){
+        $scope.bundle_name = cordConfig.bundles[cordConfig.activeBundle].name;
+        $scope.bundle_desc = cordConfig.bundles[cordConfig.activeBundle].desc;
+        $scope.users = res.users;
+      })
+      .catch(function(){
+        $log.error('Problem with resource', SubscriberUsers);
+      });
+
+      $log.debug('Cord Home Ctrl has been created.');
+    });
+}());
diff --git a/applications/subscriberPortal/src/app/view/login/login.css b/applications/subscriberPortal/src/app/view/login/login.css
new file mode 100644
index 0000000..f7d5f67
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/login/login.css
@@ -0,0 +1,119 @@
+/*
+ * 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#login {
+    background: url("/imgs/login.jpg") no-repeat center;
+    background-size: contain;
+    position: absolute;
+    top: 3%;
+    left: 5%;
+}
+
+div#login-wrapper {
+    text-align: center;
+}
+
+#login h2 {
+    margin: 1%;
+    color: rgb(115, 115, 115);
+    font-size: xx-large;
+    font-weight: lighter;
+    text-align: left;
+    position: absolute;
+    top: -140px;
+}
+
+div#login-form {
+    display: inline-block;
+}
+
+#login div.outline {
+    position: absolute;
+    border: 1px solid rgba(115, 115, 115, 0.7);
+    background-color: white;
+    opacity: .6;
+    top: -160px;
+    left: -25px;
+    width: 300px;
+    height: 245px;
+    border-radius: 1px;
+}
+
+div#login-form {
+    margin-left: 2.5%;
+    position: relative;
+    width: 255px;
+    margin-top: 33.5%;
+}
+
+#login-form form {
+    line-height: 250%;
+}
+
+#login-form input {
+    display: block;
+    height: 40px;
+    width: 230px;
+    font-size: 19px;
+    padding: 0 5px;
+    margin-bottom: 3.5%;
+    border-radius: 1px;
+    position: absolute;
+}
+#login-form input[type="text"] {
+    top: -90px;
+}
+#login-form input[type="password"] {
+    top: -35px;
+}
+
+#login-form input[type="text"],
+#login-form input[type="password"] {
+    border: 2px solid rgba(115, 115, 115, 0.7);
+    transition: border 0.1s;
+}
+#login-form input[type="text"]:focus,
+#login-form input[type="password"]:focus,
+#login-form input[type="button"]:focus {
+    outline: none;
+    border: solid 2px rgba(122, 188, 229, 0.5);
+}
+
+#login-form a {
+    text-decoration: none;
+}
+
+#login-form input[type="button"] {
+    top: 25px;
+    width: 245px;
+    height: 30px;
+    cursor: pointer;
+    letter-spacing: 0.02em;
+    font-size: 100%;
+    color: #3C3C3C;
+    background-color: lightgray;
+    transition: background-color 0.4s;
+}
+
+#login-form input[type="button"]:hover {
+    color: white;
+    background-color: rgb(122, 188, 229);
+}
+
+#login-form input.ng-invalid.ng-touched {
+    background-color: #CE5650;
+    color: white;
+}
diff --git a/applications/subscriberPortal/src/app/view/login/login.html b/applications/subscriberPortal/src/app/view/login/login.html
new file mode 100644
index 0000000..19c5940
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/login/login.html
@@ -0,0 +1,14 @@
+<!-- Login page partial html -->
+<div id="login" class="container">
+    <div id="login-wrapper">
+        <div id="login-form">
+            <div class="outline"></div>
+            <h2>Subscriber Portal</h2>
+            <form>
+                <input ng-model="email" type="text" placeholder="email" required>
+                <input ng-model="password" type="password" placeholder="password" required>
+                <input ng-click="login()" type="button" value="Log In">
+            </form>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/login/login.js b/applications/subscriberPortal/src/app/view/login/login.js
new file mode 100644
index 0000000..c902480
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/login/login.js
@@ -0,0 +1,40 @@
+/*
+ * 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.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('cordLogin', [])
+    .controller('CordLoginCtrl', function ($log, $scope, $resource, $location, $window, User) {
+
+      $scope.page.curr = 'login';
+
+      $scope.login = function () {
+        if ($scope.email && $scope.password) {
+          //getResource($scope.email);
+
+          User.login($scope.email, $scope.password)
+          .then(function(user){
+            $location.url('/home');
+          });
+
+          $scope.shared.login = $scope.email;
+        }
+      };
+
+      $log.debug('Cord Login Ctrl has been created.');
+    });
+}());
diff --git a/applications/subscriberPortal/src/app/view/user/ratingPanel.html b/applications/subscriberPortal/src/app/view/user/ratingPanel.html
new file mode 100644
index 0000000..04ee430
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/user/ratingPanel.html
@@ -0,0 +1,22 @@
+<!--Partial HTML for rating panel directive-->
+<div id="rating-panel">
+    <div ng-cloak class="ng-hide ng-cloak panel" ng-show="ratingsShown">
+        <table>
+            <tr>
+                <th class="title">Category</th>
+                <th ng-repeat="rating in level_order">{{rating}}</th>
+            </tr>
+            <tr ng-repeat="cat in category_order">
+                <td class="title">{{cat}}</td>
+                <td ng-repeat="r in level_order">
+                    <div ng-if="prohibitedSites[r][cat]">
+                        <icon size="15" id="xMark"></icon>
+                    </div>
+                   <div ng-if="!prohibitedSites[r][cat]">
+                       <icon size="15" id="checkMark"></icon>
+                   </div>
+                </td>
+            </tr>
+        </table>
+    </div>
+</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/user/user.css b/applications/subscriberPortal/src/app/view/user/user.css
new file mode 100644
index 0000000..a3f64d5
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/user/user.css
@@ -0,0 +1,219 @@
+/*
+ * 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.
+ */
+
+#user div {
+    padding-top: 2%;
+}
+
+#user .icon-saved{
+    background-image: url('../../../imgs/icon-saved.gif');
+    display: inline-block;
+    width: 15px;
+    height: 15px;
+    background-size: cover;
+}
+
+/* when hiding the picture */
+#user .icon-saved.ng-hide-add         { animation:0.5s lightSpeedOut ease; }
+
+/* when showing the picture */
+#user .icon-saved.ng-hide-remove      { animation:0.5s lightSpeedIn ease; }
+
+/* light speed out */
+@keyframes lightSpeedOut {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        opacity: 0;
+    }
+}
+
+@keyframes lightSpeedIn {
+
+    0% {
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        transform: translate3d(100%, 0, 0) skewX(30deg);
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+#user div.main-left {
+    width: 98%;
+    padding-left: 1%;
+}
+#user div.main-left.family {
+    width: 62%;
+    padding-left: 1%;
+}
+
+#user div.main-right {
+    width: 0;
+}
+#user div.main-right.family {
+    width: 37%;
+}
+
+#user table.user-info,
+#user table.user-form {
+    float: left;
+    width: 100%;
+}
+
+#user table.user-info th,
+#user table.user-form th {
+    text-align: left;
+    padding: 2% 1%;
+}
+
+#user span.help:hover {
+    cursor: pointer;
+    color: #CE5650;
+}
+
+#user div.main-left.family table.user-info th,
+#user div.main-right.family table.user-form th {
+    padding: 17px;
+}
+
+#user div.main-left.family table.user-info td,
+#user div.main-right.family table.user-form td {
+    padding: 10px;
+    height: 23px;
+}
+#user table.user-info td {
+    padding: 1%;
+}
+
+#user table.user-form td {
+    border-left: 1px solid #CE5650;
+}
+
+#user table.user-form td.buttons {
+    text-align: right;
+    border: none;
+}
+
+#user table.user-form tr.options td {
+    padding-left: 5%;
+}
+
+#user select,
+#user select:focus {
+    border: none;
+}
+
+#user select {
+    font-size: 95%;
+}
+
+#user option,
+#user option:focus {
+    border: none;
+}
+
+#user option[selected] {
+    background-color: rgb(122, 188, 229);
+}
+
+#user label {
+    font-weight: bold;
+    display: block;
+    text-align: center;
+    padding: 5%;
+}
+
+#user input[type="button"],
+#user input[type="reset"] {
+    width: 30%;
+}
+
+#user td.buttons div {
+    display: inline;
+}
+#user td.buttons svg {
+    vertical-align: middle;
+}
+
+#rating-panel th,
+#rating-panel td {
+    text-align: center;
+    padding: 1%;
+    font-weight: lighter;
+}
+
+#rating-panel th.title,
+#rating-panel td.title {
+    width: 125px;
+    text-align: left;
+}
+
+#rating-panel th {
+    background-color: white;
+    padding-top: 3%;
+    border-bottom: 1px solid #CE5650;
+    color: #3C3C3C;
+    font-weight: normal;
+}
+
+#rating-panel tr th:first-child,
+#rating-panel tr td:first-child {
+    padding-left: 5%;
+}
+#rating-panel tr th:last-child,
+#rating-panel tr td:last-child {
+    padding-right: 5%;
+}
+
+div#rating-panel {
+    position: relative;
+    pointer-events: none;
+}
+
+#rating-panel div.ng-hide-add.ng-hide-add-active,
+#rating-panel div.ng-hide-remove.ng-hide-remove-active {
+    -webkit-transition: all linear 0.75s;
+    transition: all linear 0.75s;
+}
+
+#rating-panel div.panel {
+    position: absolute;
+    top: 0;
+    left: -6%;
+    height: 545px;
+    overflow: auto;
+    padding: 0;
+    pointer-events: auto;
+    box-shadow: 0 3px 23px 7px rgb(118, 118, 118);
+    border-radius: 3px;
+}
+#rating-panel table {
+    table-layout: fixed;
+    width: 500px;
+    background-color: white;
+    opacity: 1;
+}
+
+#rating-panel div.ng-hide {
+    opacity: 0;
+    left: -55%;
+}
diff --git a/applications/subscriberPortal/src/app/view/user/user.html b/applications/subscriberPortal/src/app/view/user/user.html
new file mode 100644
index 0000000..0065799
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/user/user.html
@@ -0,0 +1,44 @@
+<!-- Users page partial html -->
+<div class="container">
+    <div id="user">
+        <div class="main-left" ng-class="{family: isFamily}">
+            <table class="user-info">
+                <tr>
+                    <th class="user-pic"></th>
+                    <th>Name</th>
+                    <th>Last Login</th>
+                </tr>
+                <tr ng-repeat="user in users" class="fadein">
+                    <td class="user-pic">
+                        <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
+                    </td>
+                    <td>{{user.name}}</td>
+                    <td>{{shared.userActivity[user.id]}}</td>
+                </tr>
+            </table>
+        </div>
+
+        <div class="main-right" ng-class="{family: isFamily}">
+            <form ng-if="isFamily" name="changeLevels">
+                <table class="user-form">
+                    <tr>
+                        <th>
+                            Select Site Rating
+                            <span class="help" ng-click="showRatings()"> (?)</span>
+                        </th>
+                    </tr>
+                    <tr ng-repeat="user in users" class="options">
+                        <td>
+                            <select ng-model="user.level" ng-options="l for l in levels" ng-change="updateLevel(user)">
+                            </select>
+                            <user-updated-tick user="user">Saved</user-updated-tick>
+                        </td>
+                    </tr>
+                </table>
+            </form>
+        </div>
+        <div ng-if="isFamily">
+            <ratings-panel></ratings-panel>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/user/user.js b/applications/subscriberPortal/src/app/view/user/user.js
new file mode 100644
index 0000000..579cac7
--- /dev/null
+++ b/applications/subscriberPortal/src/app/view/user/user.js
@@ -0,0 +1,127 @@
+/*
+ * 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.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('cordUser', [])
+    .controller('CordUserCtrl', function ($log, $scope, $resource, $timeout, $filter, SubscriberUsers, cordConfig, SubscriberUsersUrlFilterLevel) {
+
+      $scope.page.curr = 'user';
+      $scope.isFamily = false;
+      $scope.newLevels = {};
+      $scope.showCheck = false;
+      $scope.ratingsShown = false;
+
+      // NOTE subscriberId should be retrieved by login
+      SubscriberUsers.query({subscriberId: 1}).$promise
+        .then(function(res){
+          $scope.isFamily = cordConfig.bundles[cordConfig.activeBundle].id === 'family';
+          // if bundle is family search for url_filter level
+          if ($scope.isFamily) {
+            angular.forEach(cordConfig.bundles[cordConfig.activeBundle].functions, function(fn){
+              if(fn.id === 'url_filter'){
+                $scope.levels = fn.params.levels;
+              }
+            });
+          }
+
+          $scope.users = res.users;
+        })
+        .catch(function () {
+          $log.error('Problem with resource', SubscriberUsers);
+        });
+
+      $scope.updateLevel = function(user){
+        // TODO save this data and show a confirmation to the user
+        // NOTE subscriberId should be retrieved by login
+        SubscriberUsersUrlFilterLevel.updateUrlFilterLevel(1, user.id, user.level)
+          .then(function(){
+            user.updated = true;
+          })
+          .catch(function(e){
+            throw new Error(e);
+          });
+      };
+
+      $scope.showRatings = function () {
+        $scope.ratingsShown = !$scope.ratingsShown;
+      };
+
+      $log.debug('Cord User Ctrl has been created.');
+    })
+    .directive('userUpdatedTick', function($timeout){
+      return {
+        restric: 'E',
+        scope: {
+          user: '='
+        },
+        template: '<span class="icon-saved" ng-show="saved"></span>',
+        link: function(scope, elem){
+          scope.saved = false;
+          scope.$watch('user.updated', function(val){
+            if(val){
+              scope.saved = true;
+              $timeout(function(){
+                scope.saved = false;
+              }, 3000);
+            }
+          });
+        }
+      }
+    })
+    .directive('ratingsPanel', function ($log) {
+      return  {
+        templateUrl: 'app/view/user/ratingPanel.html',
+        link: function (scope, elem, attrs) {
+          function fillSubMap(order, bool) {
+            var result = {};
+            $.each(order, function (index, cat) {
+              result[cat] = bool;
+            });
+            return result;
+          }
+          function processSubMap(prhbSites) {
+            var result = {};
+            $.each(prhbSites, function (index, cat) {
+              result[cat] = true;
+            });
+            return result;
+          }
+
+          function preprocess(data, order) {
+            return {
+              ALL: fillSubMap(order, false),
+              G: processSubMap(data.G),
+              PG: processSubMap(data.PG),
+              PG_13: processSubMap(data.PG_13),
+              R: processSubMap(data.R),
+              NONE: fillSubMap(order, true)
+            };
+          }
+
+          $.getJSON('/app/data/pc_cats.json', function (data) {
+            scope.level_order = data.level_order;
+            scope.category_order = data.category_order;
+            scope.prohibitedSites = preprocess(
+              data.prohibited, data.category_order
+            );
+            scope.$apply();
+          });
+        }
+      };
+    });
+}());