diff --git a/views/ngXosViews/contentProvider/bower.json b/views/ngXosViews/contentProvider/bower.json
index 82b8d7b..720005f 100644
--- a/views/ngXosViews/contentProvider/bower.json
+++ b/views/ngXosViews/contentProvider/bower.json
@@ -24,6 +24,6 @@
     "angular-cookies": "1.4.7",
     "angular-resource": "1.4.7",
     "ng-lodash": "0.3.0",
-    "bootstrap-css": "2.3.2"
+    "bootstrap-css": "~3.3.6"
   }
 }
diff --git a/views/ngXosViews/contentProvider/src/css/dev.css b/views/ngXosViews/contentProvider/src/css/dev.css
index 1457e38..0ed8b4d 100644
--- a/views/ngXosViews/contentProvider/src/css/dev.css
+++ b/views/ngXosViews/contentProvider/src/css/dev.css
@@ -2,4 +2,5 @@
   position: absolute;
   top: 100px;
   left: 200px;
+  width: 80%;
 }
\ No newline at end of file
diff --git a/views/ngXosViews/contentProvider/src/index.html b/views/ngXosViews/contentProvider/src/index.html
index b203c67..0b9ccf2 100644
--- a/views/ngXosViews/contentProvider/src/index.html
+++ b/views/ngXosViews/contentProvider/src/index.html
@@ -1,6 +1,6 @@
 <!-- browserSync -->
 <!-- bower:css -->
-<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.css" />
+<link rel="stylesheet" href="vendor/bootstrap-css/css/bootstrap.min.css" />
 <!-- endbower --><!-- endcss -->
 <!-- inject:css -->
 <link rel="stylesheet" href="/css/dev.css">
@@ -18,10 +18,12 @@
 <script src="vendor/angular-cookies/angular-cookies.js"></script>
 <script src="vendor/angular-resource/angular-resource.js"></script>
 <script src="vendor/ng-lodash/build/ng-lodash.js"></script>
-<script src="vendor/bootstrap-css/js/bootstrap.js"></script>
+<script src="vendor/bootstrap-css/js/bootstrap.min.js"></script>
 <!-- endbower --><!-- endjs -->
 <!-- inject:js -->
 <script src="/xosHelpers/src/xosHelpers.module.js"></script>
+<script src="/xosHelpers/src/ui_components/table/table.component.js"></script>
+<script src="/xosHelpers/src/ui_components/ui-components.module.js"></script>
 <script src="/xosHelpers/src/services/noHyperlinks.interceptor.js"></script>
 <script src="/xosHelpers/src/services/csrfToken.interceptor.js"></script>
 <script src="/xosHelpers/src/services/api.services.js"></script>
diff --git a/views/ngXosViews/contentProvider/src/templates/cp_detail.html b/views/ngXosViews/contentProvider/src/templates/cp_detail.html
index 89d8daf..ccbd66c 100644
--- a/views/ngXosViews/contentProvider/src/templates/cp_detail.html
+++ b/views/ngXosViews/contentProvider/src/templates/cp_detail.html
@@ -1,45 +1,45 @@
-<div class="row-fluid">
-  <div class="span6">
+<div class="row">
+  <div class="col-xs-6">
     <h1>{$ vm.cp.humanReadableName $}</h1>
   </div>
-  <div class="span6 text-right">
+  <div class="col-xs-6 text-right">
     <cp-actions id="vm.cp.id"></cp-actions>
   </div>
 </div>
 <hr>
-<div class="row-fluid">
-  <div ng-show="vm.cp.id" class="span2">
+<div class="row">
+  <div ng-show="vm.cp.id" class="col-xs-2">
     <div ng-include="'templates/cp_side_nav.html'"></div>
   </div>
-  <div ng-class="{span10: vm.cp.id, span12: !vm.cp.id}">
+  <div ng-class="{'col-xs-10': vm.cp.id, 'col-xs-12': !vm.cp.id}">
   <!-- TODO hide form on not found -->
     <form ng-submit="vm.saveContentProvider(vm.cp)">
       <fieldset>
-        <div class="row-fluid">
-          <div class="span6">
+        <div class="row">
+          <div class="col-xs-6">
             <label>Name:</label>
-            <input type="text" ng-model="vm.cp.humanReadableName" required/>
+            <input class="form-control" type="text" ng-model="vm.cp.humanReadableName" required/>
           </div>
-          <div class="span6">
+          <div class="col-xs-6">
             <label class="checkbox">
-              <input type="checkbox" ng-model="vm.cp.enabled" /> Enabled
+              <input class="form-control" type="checkbox" ng-model="vm.cp.enabled" /> Enabled
             </label>
           </div>
         </div>
-        <div class="row-fluid">
-          <div class="span12">
+        <div class="row">
+          <div class="col-xs-12">
             <label>Description</label>
-            <textarea style="width: 100%" ng-model="vm.cp.description"></textarea>
+            <textarea class="form-control" ng-model="vm.cp.description"></textarea>
           </div>
         </div>
-        <div class="row-fluid">
-          <div class="span12">
+        <div class="row">
+          <div class="col-xs-12">
             <label>Service provider</label>
-            <select required ng-model="vm.cp.serviceProvider" ng-options="sp.id as sp.humanReadableName for sp in vm.sp"></select>
+            <select class="form-control" required ng-model="vm.cp.serviceProvider" ng-options="sp.id as sp.humanReadableName for sp in vm.sp"></select>
           </div>
         </div>
-        <div class="row-fluid">
-          <div class="span12">
+        <div class="row">
+          <div class="col-xs-12">
             <button class="btn btn-success">
               <span ng-show="vm.cp.id">Save</span>
               <span ng-show="!vm.cp.id">Create</span>
@@ -48,7 +48,7 @@
         </div>
       </fieldset>
     </form>
-    <div class="alert" ng-show="vm.result" ng-class="{'alert-success': vm.result.status === 1,'alert-error': vm.result.status === 0}">
+    <div class="alert alert-danger" ng-show="vm.result" ng-class="{'alert-success': vm.result.status === 1,'alert-error': vm.result.status === 0}">
       {$ vm.result.msg $}
     </div>
   </div>
diff --git a/views/ngXosViews/contentProvider/src/templates/cp_list.html b/views/ngXosViews/contentProvider/src/templates/cp_list.html
index e54ebe6..9413545 100644
--- a/views/ngXosViews/contentProvider/src/templates/cp_list.html
+++ b/views/ngXosViews/contentProvider/src/templates/cp_list.html
@@ -1,3 +1,5 @@
+<xos-table data="vm.contentProviderList" columns="['Name', 'Description', 'Status', 'Actions']"/>
+
 <table class="table table-striped" ng-show="vm.contentProviderList.length > 0">
   <thead>
     <tr>