diff --git a/xos/core/xoslib/static/js/xosContentProvider.js b/xos/core/xoslib/static/js/xosContentProvider.js
index 6bea384..a36a3b7 100644
--- a/xos/core/xoslib/static/js/xosContentProvider.js
+++ b/xos/core/xoslib/static/js/xosContentProvider.js
@@ -21,13 +21,13 @@
     template: '<content-provider-detail></content-provider-detail>'
   })
   .when('/contentProvider/:id/cdn_prefix', {
-    templateUrl: '../../static/templates/contentProvider/cp_cdn_prefix.html'
+    template: '<content-provider-cdn></content-provider-cdn>'
   })
   .when('/contentProvider/:id/origin_server', {
-    template: 'Origin Server view'
+    template: '<content-provider-server></content-provider-server>'
   })
   .when('/contentProvider/:id/users', {
-    template: 'User View'
+    template: '<content-provider-users></content-provider-users>'
   })
   .otherwise('/');
 })
@@ -78,6 +78,7 @@
     controllerAs: 'vm',
     templateUrl: '../../static/templates/contentProvider/cp_detail.html',
     controller: function() {
+      this.pageName = 'detail';
       var _this = this;
 
       ContentProvider.get({id: $routeParams.id}).$promise
@@ -117,4 +118,37 @@
       };
     }
   };
+})
+.directive('contentProviderCdn', function($routeParams) {
+  return{
+    restrict: 'E',
+    controllerAs: 'vm',
+    templateUrl: '../../static/templates/contentProvider/cp_cdn_prefix.html',
+    controller: function() {
+      this.pageName = 'cdn';
+      this.cp = {id: $routeParams.id};
+    }
+  };
+})
+.directive('contentProviderServer', function($routeParams) {
+  return{
+    restrict: 'E',
+    controllerAs: 'vm',
+    templateUrl: '../../static/templates/contentProvider/cp_origin_server.html',
+    controller: function() {
+      this.pageName = 'server';
+      this.cp = {id: $routeParams.id};
+    }
+  };
+})
+.directive('contentProviderUsers', function($routeParams) {
+  return{
+    restrict: 'E',
+    controllerAs: 'vm',
+    templateUrl: '../../static/templates/contentProvider/cp_user.html',
+    controller: function() {
+      this.pageName = 'user';
+      this.cp = {id: $routeParams.id};
+    }
+  };
 });
\ No newline at end of file
diff --git a/xos/core/xoslib/static/templates/contentProvider/cp_side_nav.html b/xos/core/xoslib/static/templates/contentProvider/cp_side_nav.html
index 16a3b51..a2c8633 100644
--- a/xos/core/xoslib/static/templates/contentProvider/cp_side_nav.html
+++ b/xos/core/xoslib/static/templates/contentProvider/cp_side_nav.html
@@ -1,14 +1,14 @@
 <ul class="nav nav-list">
   <li>
-    <a class="btn btn-primary" href="#/contentProvider/{$ vm.cp.id $}">Details</a>
+    <a class="btn" ng-class="{'btn-primary': vm.pageName == 'detail'}" href="#/contentProvider/{$ vm.cp.id $}">Details</a>
   </li>
   <li>
-    <a class="btn btn-default" href="#/contentProvider/{$ vm.cp.id $}/cdn_prefix">Cdn Prexix</a>
+    <a class="btn" ng-class="{'btn-primary': vm.pageName == 'cdn'}" href="#/contentProvider/{$ vm.cp.id $}/cdn_prefix">Cdn Prexix</a>
   </li>
   <li>
-    <a class="btn btn-default" href="#/contentProvider/{$ vm.cp.id $}/origin_server">Origin Server</a>
+    <a class="btn" ng-class="{'btn-primary': vm.pageName == 'server'}" href="#/contentProvider/{$ vm.cp.id $}/origin_server">Origin Server</a>
   </li>
   <li>
-    <a class="btn btn-default" href="#/contentProvider/{$ vm.cp.id $}/users">Users</a>
+    <a class="btn" ng-class="{'btn-primary': vm.pageName == 'user'}" href="#/contentProvider/{$ vm.cp.id $}/users">Users</a>
   </li>
 </ul>
\ No newline at end of file