diff --git a/xos/core/xoslib/static/js/xosContentProvider.js b/xos/core/xoslib/static/js/xosContentProvider.js
index aac629d..c404420 100644
--- a/xos/core/xoslib/static/js/xosContentProvider.js
+++ b/xos/core/xoslib/static/js/xosContentProvider.js
@@ -1,6 +1,13 @@
 /* global angular */
 /* eslint-disable dot-location*/
 
+// TODO
+// - Add Cache
+// - Refactor routing with ui.router and child views (share the navigation and header)
+// - Add Eslint
+// - Add Es6 (Babel) and a build script
+// - Autogenerate ngResource from swagger definition json
+
 angular.module('contentProviderApp', [
   'ngResource',
   'ngRoute',
@@ -58,6 +65,12 @@
 .service('CdnPrefix', function($resource) {
   return $resource('/hpcapi/cdnprefixs/:id/', {id: '@id'});
 })
+.service('OriginServer', function($resource) {
+  return $resource('/hpcapi/originservers/:id/', {id: '@id'});
+})
+.service('User', function($resource) {
+  return $resource('/xos/users/:id/', {id: '@id'});
+})
 .directive('contentProviderList', function(ContentProvider) {
   return {
     restrict: 'E',
@@ -213,25 +226,114 @@
     }
   };
 })
-.directive('contentProviderServer', function($routeParams) {
+.directive('contentProviderServer', function($routeParams, OriginServer, ContentProvider, lodash) {
   return{
     restrict: 'E',
     controllerAs: 'vm',
     templateUrl: '../../static/templates/contentProvider/cp_origin_server.html',
     controller: function() {
       this.pageName = 'server';
-      this.cp = {id: $routeParams.id};
+      this.protocols = ['HTTP', 'RTMP', 'RTP', 'SHOUTcast'];
+
+      var _this = this;
+
+      if($routeParams.id) {
+        ContentProvider.get({id: $routeParams.id}).$promise
+        .then(function(cp) {
+          _this.cp = cp;
+        }).catch(function(e) {
+          _this.result = {
+            status: 0,
+            msg: e.data.detail
+          };
+        });
+      }
+
+      // TODO filter on client
+      OriginServer.query({contentProvider: $routeParams.id}).$promise
+      .then(function(cp_os) {
+        _this.cp_os = cp_os;
+      }).catch(function(e) {
+        _this.result = {
+          status: 0,
+          msg: e.data.detail
+        };
+      });
+
+      // TODO everytime protocall error, ask Scott
+      this.addOrigin = function(os) {
+        os.contentProvider = '/hpcapi/contentproviders/' + $routeParams.id + '/';
+
+        var item = new OriginServer(os);
+
+        item.$save()
+        .then(function(res) {
+          _this.cp_os.push(res);
+        })
+        .catch(function(e) {
+          _this.result = {
+            status: 0,
+            msg: e.data.detail
+          };
+        });
+      };
+
+      this.removeOrigin = function(item) {
+        item.$delete()
+        .then(function() {
+          lodash.remove(_this.cp_os, item);
+        })
+        .catch(function(e) {
+          _this.result = {
+            status: 0,
+            msg: e.data.detail
+          };
+        });
+      };
     }
   };
 })
-.directive('contentProviderUsers', function($routeParams) {
+.directive('contentProviderUsers', function($routeParams, ContentProvider, User, lodash) {
   return{
     restrict: 'E',
     controllerAs: 'vm',
     templateUrl: '../../static/templates/contentProvider/cp_user.html',
     controller: function() {
+      var _this = this;
+
       this.pageName = 'user';
-      this.cp = {id: $routeParams.id};
+
+      this.cp_users = [];
+
+      if($routeParams.id) {
+        ContentProvider.get({id: $routeParams.id}).$promise
+        .then(function(cp) {
+          _this.cp = cp;
+        }).catch(function(e) {
+          _this.result = {
+            status: 0,
+            msg: e.data.detail
+          };
+        });
+      }
+
+      User.query().$promise
+      .then(function(users) {
+        _this.users = users;
+      }).catch(function(e) {
+        _this.result = {
+          status: 0,
+          msg: e.data.detail
+        };
+      });
+
+      this.addUserToCp = function(user) {
+        _this.cp_users.push(user);
+      };
+
+      this.removeUserFromCp = function(user) {
+        lodash.remove(_this.cp_users, user);
+      };
     }
   };
 });
\ No newline at end of file
diff --git a/xos/core/xoslib/static/templates/contentProvider/cp_cdn_prefix.html b/xos/core/xoslib/static/templates/contentProvider/cp_cdn_prefix.html
index 398f80d..a941881 100644
--- a/xos/core/xoslib/static/templates/contentProvider/cp_cdn_prefix.html
+++ b/xos/core/xoslib/static/templates/contentProvider/cp_cdn_prefix.html
@@ -18,6 +18,7 @@
           {{item.humanReadableName}}
         </div>
         <div class="span6">
+          <!-- TODO shoe the name instead that url -->
           {{item.defaultOriginServer}}
         </div>
         <div class="span2">
diff --git a/xos/core/xoslib/static/templates/contentProvider/cp_origin_server.html b/xos/core/xoslib/static/templates/contentProvider/cp_origin_server.html
index e990466..fca7855 100644
--- a/xos/core/xoslib/static/templates/contentProvider/cp_origin_server.html
+++ b/xos/core/xoslib/static/templates/contentProvider/cp_origin_server.html
@@ -12,6 +12,42 @@
     <div ng-include="'../../static/templates/contentProvider/cp_side_nav.html'"></div>
   </div>
   <div class="span10">
-    <h1>Origin Servers</h1>
+    <div ng-repeat="item in vm.cp_os" class="well">
+      <div class="row-fluid">
+        <div class="span4">
+          {{item.humanReadableName}}
+        </div>
+        <div class="span6">
+          <!-- TODO shoe the name instead that url -->
+          {{item.defaultOriginServer}}
+        </div>
+        <div class="span2">
+          <a ng-click="vm.removeOrigin(item)" class="btn btn-danger pull-right">
+            <i class="icon icon-remove"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <form ng-submit="vm.addOrigin(vm.new_os)">
+      <div class="row-fluid">
+        <div class="span4">
+          <label>Protocol</label>
+          <select ng-model="vm.new_os.protocol" ng-options="p for p in vm.protocols" style="max-width: 100%;"></select>
+        </div>
+        <div class="span6">
+          <label>Url</label>
+          <input type="text" ng-model="vm.new_os.url" required>
+        </div>
+        <div class="span2">
+          <button class="btn btn-success pull-right">
+            <i class="icon icon-plus"></i>
+          </button>
+        </div>
+      </div>
+    </form>
+    <div class="alert" ng-show="vm.result" ng-class="{'alert-success': vm.result.status === 1,'alert-error': vm.result.status === 0}">
+      {$ vm.result.msg $}
+    </div>
   </div>
 </div>
\ No newline at end of file
diff --git a/xos/core/xoslib/static/templates/contentProvider/cp_user.html b/xos/core/xoslib/static/templates/contentProvider/cp_user.html
index 5750892..2ed8a0c 100644
--- a/xos/core/xoslib/static/templates/contentProvider/cp_user.html
+++ b/xos/core/xoslib/static/templates/contentProvider/cp_user.html
@@ -12,6 +12,27 @@
     <div ng-include="'../../static/templates/contentProvider/cp_side_nav.html'"></div>
   </div>
   <div class="span10">
-    <h1>Users</h1>
+    <div ng-repeat="item in vm.cp_users" class="well">
+      <div class="row-fluid">
+        <div class="span3">
+          {{item.firstname}}
+        </div>
+        <div class="span3">
+          {{item.lastname}}
+        </div>
+        <div class="span4">
+          {{item.email}}
+        </div>
+        <div class="span2">
+          <a ng-click="vm.removeUserFromCp(item)" class="btn btn-danger pull-right">
+            <i class="icon icon-remove"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+    <hr>
+    <form>
+      <select ng-model="vm.user" ng-options="u as u.username for u in vm.users" ng-change="vm.addUserToCp(vm.user)"></select>
+    </form>
   </div>
 </div>
\ No newline at end of file