diff --git a/applications/subscriberPortal/src/app/fw/foot/foot.css b/applications/subscriberPortal/src/app/fw/foot/foot.css
deleted file mode 100644
index b8746d6..0000000
--- a/applications/subscriberPortal/src/app/fw/foot/foot.css
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * 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.foot {
-    width: 100%;
-    height: 30px;
-    background-color: white;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin-left: auto;
-    margin-right: auto;
-    z-index: 100;
-    box-shadow: 0 10px 5px 10px gray;
-}
-
-.foot div {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-    font-style: italic;
-    font-size: 12px;
-    color: #3C3C3C;
-}
-
-.foot div.left {
-    left: 25px;
-}
-
-.foot div.right {
-    right: 25px;
-}
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.css b/applications/subscriberPortal/src/app/fw/mast/mast.css
deleted file mode 100644
index b79d89e..0000000
--- a/applications/subscriberPortal/src/app/fw/mast/mast.css
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * 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.mast {
-    width: 100%;
-    height: 85px;
-    background-color: white;
-    position: relative;
-    box-shadow: 0 10px 5px -7px gray;
-    z-index: 100;
-}
-
-.mast div {
-    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
-}
-
-.mast div.left {
-    left: 25px;
-}
-
-.mast div.right {
-    right: 7%;
-    width: 37%;
-}
-
-.mast img {
-    width: 220px;
-}
-
-.mast a,
-.mast a:visited {
-    text-decoration: none;
-    color: #3C3C3C;
-}
-
-.mast li.logout {
-    list-style-type: none;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    transform: translate(0, -50%);
-    font-size: 90%;
-}
-.mast li.logout:hover {
-    font-weight: bold;
-    list-style-type: none;
-    cursor: pointer;
-}
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.html b/applications/subscriberPortal/src/app/fw/mast/mast.html
index 30bae4b..d11e66e 100644
--- a/applications/subscriberPortal/src/app/fw/mast/mast.html
+++ b/applications/subscriberPortal/src/app/fw/mast/mast.html
@@ -1,8 +1,8 @@
 <!--Mast HTML-->
-<nav class="navbar navbar-default navbar-fixed-top" ng-controller="CordMastCtrl">
+<nav class="navbar navbar-default navbar-fixed-top">
     <div class="container">
         <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <button ng-if="page.curr !== 'login'" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                 <span class="sr-only">Toggle navigation</span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
@@ -12,8 +12,8 @@
                 <img src="/imgs/logo.png">
             </a>
         </div>
-        <div id="navbar" class="collapse navbar-collapse">
-            <ul ng-show="page.curr !== 'login'" class="nav navbar-nav pull-right">
+        <div id="navbar" class="collapse navbar-collapse" close-on-route-change>
+            <ul ng-if="page.curr !== 'login'" class="nav navbar-nav pull-right">
                 <li ng-class="{active: page.curr === 'dashboard'}">
                     <a href="#/home">Home</a>
                 </li>
diff --git a/applications/subscriberPortal/src/app/fw/mast/mast.js b/applications/subscriberPortal/src/app/fw/mast/mast.js
index 9b27628..eb08d79 100644
--- a/applications/subscriberPortal/src/app/fw/mast/mast.js
+++ b/applications/subscriberPortal/src/app/fw/mast/mast.js
@@ -31,7 +31,19 @@
     .directive('mast', function () {
       return {
         restrict: 'E',
-        templateUrl: 'app/fw/mast/mast.html'
+        templateUrl: 'app/fw/mast/mast.html',
+        controller: 'CordMastCtrl',
+        controllerAs: ''
       };
-    });
+    })
+  .directive('closeOnRouteChange', function(){
+    return {
+      restrict: 'A',
+      link: function(scope, elem){
+        scope.$on('$routeChangeStart', function(next, current) {
+          elem.removeClass('in');
+        });
+      }
+    }
+  });
 }());
diff --git a/applications/subscriberPortal/src/app/view/bundle/available.html b/applications/subscriberPortal/src/app/view/bundle/available.html
index 6f300d4..a6f2a31 100644
--- a/applications/subscriberPortal/src/app/view/bundle/available.html
+++ b/applications/subscriberPortal/src/app/view/bundle/available.html
@@ -1,5 +1,11 @@
-<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 class="panel panel-primary animate" ng-hide="!show">
+    <div class="panel-heading">
+        <h3 class="panel-title">{{available.name}}</h3>
+    </div>
+    <div class="panel-body">
+        {{available.desc}}
+    </div>
+    <div class="panel-footer text-right">
+        <a class="btn btn-success btn-xs" ng-click="changeBundle(available.id)">Apply</a>
+    </div>
 </div>
diff --git a/applications/subscriberPortal/src/app/view/bundle/bundle.css b/applications/subscriberPortal/src/app/view/bundle/bundle.css
deleted file mode 100644
index 84fa842..0000000
--- a/applications/subscriberPortal/src/app/view/bundle/bundle.css
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * 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
index 8852d86..f658ccf 100644
--- a/applications/subscriberPortal/src/app/view/bundle/bundle.html
+++ b/applications/subscriberPortal/src/app/view/bundle/bundle.html
@@ -1,24 +1,39 @@
 <!-- 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 class="row">
+        <div class="col-sm-6">
+            <h4>You are subscribed to the</h4>
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h3 class="panel-title">{{name}}</h3>
+                </div>
+                <div class="panel-body">
+                    {{desc}}
+                </div>
+            </div>
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Users</h3>
+                </div>
+                <table class="table">
+                    <tr ng-repeat="func in funcs" class="animate-repeat">
+                        <td class="avatar">
+                            <img ng-src="{{'/imgs/' + func.id + '.png'}}">
+                        </td>
+                        <td class="name"><b>{{func.name}}</b></td>
+                        <td class="desc">{{func.desc}}</td>
+                    </tr>
+                </table>
+            </div>
+
+
         </div>
-        <div id="bundles" bundle-available></div>
+        <div class="col-sm-6">
+            <img class="img-responsive" src="imgs/bundle.jpg">
+            <a ng-click="showBundles()" class="btn btn-primary-border btn-large btn-block">
+                Available Bundles
+            </a>
+            <div id="bundles" bundle-available></div>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/common/common.css b/applications/subscriberPortal/src/app/view/common/common.css
deleted file mode 100644
index 800fe24..0000000
--- a/applications/subscriberPortal/src/app/view/common/common.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/*
- * 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, div {
-    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
deleted file mode 100644
index 58f07a5..0000000
--- a/applications/subscriberPortal/src/app/view/home/home.css
+++ /dev/null
@@ -1,65 +0,0 @@
-/*
- * 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
index a3d7fb2..2537996 100644
--- a/applications/subscriberPortal/src/app/view/home/home.html
+++ b/applications/subscriberPortal/src/app/view/home/home.html
@@ -1,42 +1,50 @@
 <!-- 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="row">
+        <div class="col-sm-6 hidden-xs">
+            <img class="img-responsive" src="/imgs/home.jpg">
+        </div>
+        <div class="col-sm-6">
             <div class="bundle-title">
-                <h4>Welcome Dad!</h4>
+                <h2>Welcome Dad!</h2>
                 <h5>You are subscribed to the</h5>
-                <h3>{{bundle_name}}</h3>
             </div>
 
-            <p>{{bundle_desc}}</p>
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h3 class="panel-title">{{bundle_name}}</h3>
+                </div>
+                <div class="panel-body">
+                    {{bundle_desc}}
+                </div>
+            </div>
 
-
-            <h4>Users</h4>
-            <table class="users">
-                <thead>
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h3 class="panel-title">Users</h3>
+                </div>
+                <table class="table">
+                    <thead>
                     <tr>
-                        <th class="user-pic"></th>
+                        <th></th>
                         <th>Name</th>
                         <th>Last Login</th>
                     </tr>
-                </thead>
-                <tbody>
+                    </thead>
+                    <tbody>
 
-                <!--<pre>{{users | json}}</pre>-->
+                    <!--<pre>{{users | json}}</pre>-->
 
-                <tr ng-repeat="user in users" class="fadein">
-                        <td class="user-pic">
+                    <tr ng-repeat="user in users" class="animate-repeat">
+                        <td class="avatar">
                             <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
                         </td>
                         <td>{{user.name}}</td>
                         <td>{{shared.userActivity[user.id]}}</td>
                     </tr>
-                </tbody>
-            </table>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/applications/subscriberPortal/src/app/view/login/login.css b/applications/subscriberPortal/src/app/view/login/login.css
deleted file mode 100644
index b4275c5..0000000
--- a/applications/subscriberPortal/src/app/view/login/login.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * 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 .login-error{
-    background: red;
-    border: 2px solid darkred;
-    color: white;
-    position: absolute;
-    height: 40px;
-    width: 230px;
-    padding: 0 5px;
-    border-radius: 1px;
-    top: 70px;
-    font-size: 10px;
-}
-
-#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
index 6359cce..eb32222 100644
--- a/applications/subscriberPortal/src/app/view/login/login.html
+++ b/applications/subscriberPortal/src/app/view/login/login.html
@@ -1,18 +1,23 @@
 <!-- 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 ng-submit="login()">
-                <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">
-                <div class="login-error" ng-show="error">
+<div class="container login">
+    <div class="login-wrapper">
+        <h3 class="text-center">Subscriber Portal</h3>
+        <form ng-submit="login()">
+            <div class="form-group">
+                <input class="form-control" ng-model="email" type="text" placeholder="email" required>
+            </div>
+            <div class="form-group">
+                <input class="form-control" ng-model="password" type="password" placeholder="password" required>
+            </div>
+            <div class="form-group">
+                <button class="btn btn-primary btn-block" type="submit">Log In</button>
+            </div>
+            <div class="form-group" ng-show="error">
+                <div class="alert alert-danger">
                     Sorry, your login failed.
                     Please try again.
                 </div>
-            </form>
-        </div>
+            </div>
+        </form>
     </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
deleted file mode 100644
index a3f64d5..0000000
--- a/applications/subscriberPortal/src/app/view/user/user.css
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * 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
index 0065799..76896f8 100644
--- a/applications/subscriberPortal/src/app/view/user/user.html
+++ b/applications/subscriberPortal/src/app/view/user/user.html
@@ -1,42 +1,40 @@
 <!-- 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">
+    <div id="user" class="row">
+        <div class="col-xs-12">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th class="form-inline">
+                            Name <input ng-model="q.name" type="text" class="form-control">
+                        </th>
+                        <th>Last Login</th>
+                        <th ng-if="isFamily">
+                            Select Site Rating
+                            <span class="help" ng-click="showRatings()"> (?)</span>
+                        </th>
+                        <th ng-if="isFamily"></th>
+                    </tr>
+                </thead>
+                <tr ng-repeat="user in users | filter:q" class="animate-repeat">
+                    <td class="avatar">
                         <img ng-src="{{'/imgs/' + user.icon_id + '.jpg'}}">
                     </td>
                     <td>{{user.name}}</td>
                     <td>{{shared.userActivity[user.id]}}</td>
+                    <td ng-if="isFamily">
+                        <select class="form-control" ng-model="user.level" ng-options="l for l in levels" ng-change="updateLevel(user)">
+                        </select>
+                    </td>
+                    <td ng-if="isFamily" style="width: 46px">
+                        <user-updated-tick user="user">Saved</user-updated-tick>
+                    </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>
+        <!-- TODO refactor in modal-->
         <div ng-if="isFamily">
             <ratings-panel></ratings-panel>
         </div>
diff --git a/applications/subscriberPortal/src/app/view/user/user.js b/applications/subscriberPortal/src/app/view/user/user.js
index 616529b..6b42bc4 100644
--- a/applications/subscriberPortal/src/app/view/user/user.js
+++ b/applications/subscriberPortal/src/app/view/user/user.js
@@ -67,7 +67,7 @@
         scope: {
           user: '='
         },
-        template: '<span class="icon-saved" ng-show="saved"></span>',
+        template: '<span class="icon-saved animate" ng-show="saved"></span>',
         link: function(scope, elem){
           scope.saved = false;
           scope.$watch('user.updated', function(val){