diff --git a/static/ng/resources/css/sign-up.css b/static/ng/resources/css/sign-up.css
index 15f5e96fd..f651a28a2 100644
--- a/static/ng/resources/css/sign-up.css
+++ b/static/ng/resources/css/sign-up.css
@@ -36,7 +36,7 @@
 
 
 
-.css-form input.ng-invalid.ng-dirty {
+.css-form input.ng-invalid.ng-touched {
   border-color: red;
 }
 
diff --git a/static/ng/resources/js/components/replication/create-policy.directive.html b/static/ng/resources/js/components/replication/create-policy.directive.html
index f5fe499db..8c0384db8 100644
--- a/static/ng/resources/js/components/replication/create-policy.directive.html
+++ b/static/ng/resources/js/components/replication/create-policy.directive.html
@@ -1,5 +1,6 @@
 <div class="modal fade" id="createPolicyModal" tabindex="-1"  role="dialog">
   <div class="modal-dialog">
+    <form name="form" class="form-horizontal css-form" novalidate>
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -7,7 +8,6 @@
       </div>
       <div class="modal-body">
         <div class="create-policy">
-          <form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>     
             <div class="col-md-12">
               <h4>General</h4>
               <hr class="hr-line"/>
@@ -15,8 +15,8 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="name" class="col-md-3 control-label">Name:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control form-control-custom" id="name" ng-model="policy.name" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.policy.name" name="uName" required>                 
-                <div ng-messages="form.$dirty && form.uName.$error">
+                <input type="text" class="form-control form-control-custom" id="name" ng-model="replication.policy.name" ng-model-options="{ debounce: 500 }"  name="uName" required>                 
+                <div ng-messages="form.$submitted && form.uName.$error">
                   <span ng-message="required">Name is required.</span>
                 </div>
               </div> 
@@ -24,8 +24,8 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="description" class="col-md-3 control-label">Description:</label>
               <div class="col-md-9">
-                <textarea class="form-control form-control-custom" id="description" ng-model="policy.description" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.policy.enable" name="uDescription" required ></textarea>                 
-                <div ng-messages="form.$dirty && form.uDescription.$error">
+                <textarea class="form-control form-control-custom" id="description" ng-model="replication.policy.description" ng-model-options="{ updateOn: 'blur' }" ng-value="description" name="uDescription" required ></textarea>                 
+                <div ng-messages="form.$submitted && form.uDescription.$error">
                   <span ng-message="required">Description is required.</span>
                 </div>
               </div>
@@ -33,7 +33,7 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="enable" class="col-md-3 control-label">Enable:</label>
               <div class="col-md-9">
-                <input type="checkbox" class="form-control" style="margin-top: 10px; height: auto;" id="enable" ng-model="policy.enable" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.policy.enable" name="uEnable">
+                <input type="checkbox" class="form-control" style="margin-top: 10px; height: auto;" ng-model="replication.policy.enabled" ng-model-options="{ updateOn: 'blur' }" ng-checked="enabled">
               </div>
             </div>
             <div class="col-md-12">
@@ -43,14 +43,14 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="destinationName" class="col-md-3 control-label">Name:</label>
               <div class="col-md-7">
-                <select class="form-control form-control-custom" id="destinationName" ng-model="policy.destinationName" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination()"></select>
+                <select class="form-control form-control-custom" id="destinationName" ng-model="replication.destinations" ng-options="d as d.name for d in vm.destinations track by d.id" ng-click="vm.selectDestination()"></select>
               </div>
             </div>  
             <div class="form-group col-md-12 form-group-custom">
               <label for="endpoint" class="col-md-3 control-label">Endpoint:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="policy.endpoint" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.endpoint" name="uEndpoint" required>                 
-                <div ng-messages="form.$dirty && form.uEndpoint.$error">
+                <input type="text" class="form-control form-control-custom" id="endpoint" ng-model="replication.destination.endpoint" ng-model-options="{ updateOn: 'blur' }" ng-value="endpoint" name="uEndpoint" required>                 
+                <div ng-messages="form.$submitted && form.uEndpoint.$error">
                   <span ng-message="required">Endpoint is required.</span>
                 </div>
               </div> 
@@ -58,8 +58,8 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="username" class="col-md-3 control-label">Username:</label>
               <div class="col-md-9">
-                <input type="text" class="form-control" id="username" ng-model="policy.username" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.username" name="uUsername" required>                 
-                <div ng-messages="form.$dirty && form.uUsername.$error">
+                <input type="text" class="form-control" id="username" ng-model="replication.destination.username" ng-model-options="{ updateOn: 'blur' }" ng-value="username" name="uUsername" required>                 
+                <div ng-messages="form.$submitted && form.uUsername.$error">
                   <span ng-message="required">Username is required.</span>
                 </div>
               </div> 
@@ -67,8 +67,8 @@
             <div class="form-group col-md-12 form-group-custom">
               <label for="password" class="col-md-3 control-label">Password:</label>
               <div class="col-md-9">
-                <input type="password" class="form-control" id="password" ng-model="policy.password" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.password" name="uPassword" required>                 
-                <div ng-messages="form.$dirty && form.uPassword.$error">
+                <input type="password" class="form-control" id="password" ng-model="replication.destination.password" ng-model-options="{ updateOn: 'blur' }" ng-value="password" name="uPassword" required>                 
+                <div ng-messages="form.$submitted && form.uPassword.$error">
                   <span ng-message="required">Password is required.</span>
                 </div>
               </div> 
@@ -79,13 +79,14 @@
               <button class="btn btn-default" ng-click="vm.testConnection()">Test Connection</button>
               </div>
             </div>
-          </form>
+          
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" id="btnOk">// 'ok' | tr //</button>
+        <button type="submit" class="btn btn-primary" id="btnOk">// 'ok' | tr //</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
       </div>
+    </form>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
\ No newline at end of file
diff --git a/static/ng/resources/js/components/replication/create-policy.directive.js b/static/ng/resources/js/components/replication/create-policy.directive.js
index a6e24b176..84e6a2035 100644
--- a/static/ng/resources/js/components/replication/create-policy.directive.js
+++ b/static/ng/resources/js/components/replication/create-policy.directive.js
@@ -8,6 +8,12 @@
   
   function CreatePolicyController() {
     var vm = this;
+    vm.enabled = true;    
+    vm.save = save;
+    
+    function save(policy) {
+      console.log(angular.toJson(policy));
+    }
   }
   
   function createPolicy() {
diff --git a/static/ng/resources/js/components/replication/list-replication.directive.html b/static/ng/resources/js/components/replication/list-replication.directive.html
index edba4d2b9..115c051cc 100644
--- a/static/ng/resources/js/components/replication/list-replication.directive.html
+++ b/static/ng/resources/js/components/replication/list-replication.directive.html
@@ -45,7 +45,7 @@
     <hr class="hr-line"/>
     <div class="form-inline">
       <div class="input-group">
-        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationJob" size="30">
+        <input type="text" class="form-control" placeholder="" ng-model="vm.replicationJobnName" size="30">
         <span class="input-group-btn">
           <button class="btn btn-primary" type="button" ng-click="vm.search()"><span class="glyphicon glyphicon-search"></span></button>
         </span>
diff --git a/static/ng/resources/js/components/replication/list-replication.directive.js b/static/ng/resources/js/components/replication/list-replication.directive.js
index 86cea0a9a..cb64af940 100644
--- a/static/ng/resources/js/components/replication/list-replication.directive.js
+++ b/static/ng/resources/js/components/replication/list-replication.directive.js
@@ -6,11 +6,13 @@
     .module('harbor.replication')
     .directive('listReplication', listReplication);
     
-  ListReplicationController.$inject = ['ListReplicationPolicyService', 'ListReplicationJobService'];
+  ListReplicationController.$inject = ['getParameterByName', '$location', 'ListReplicationPolicyService', 'ListReplicationJobService'];
   
-  function ListReplicationController(ListReplicationPolicyService, ListReplicationJobService) {
+  function ListReplicationController(getParameterByName, $location, ListReplicationPolicyService, ListReplicationJobService) {
     var vm = this;
     
+    vm.projectId = getParameterByName('project_id', $location.absUrl());
+    
     vm.addReplication = addReplication;
     vm.retrievePolicy = retrievePolicy;
     vm.retrieveJob = retrieveJob;
@@ -19,13 +21,15 @@
     vm.retrievePolicy();
    
     function retrievePolicy() {
-      ListReplicationPolicyService()
-        .then(listReplicationPolicySuccess, listReplicationPolicyFailed);
+      ListReplicationPolicyService(vm.projectId, vm.replicationName)
+        .success(listReplicationPolicySuccess)
+        .error(listReplicationPolicyFailed);
     }
     
     function retrieveJob(policyId) {
-      ListReplicationJobService(policyId)
-        .then(listReplicationJobSuccess, listReplicationJobFailed);
+      ListReplicationJobService(policyId, vm.replicationJobName)
+        .success(listReplicationJobSuccess)
+        .error(listReplicationJobFailed);
     }
 
     function listReplicationPolicySuccess(data, status) {
@@ -46,7 +50,6 @@
 
     function addReplication() {
       vm.modalTitle = 'Create New Policy';
-      vm.modalMessage = '';
     }
     
   }
diff --git a/static/ng/resources/js/components/system-management/create-destination.directive.html b/static/ng/resources/js/components/system-management/create-destination.directive.html
index 4d8a4544e..e2a7c38cf 100644
--- a/static/ng/resources/js/components/system-management/create-destination.directive.html
+++ b/static/ng/resources/js/components/system-management/create-destination.directive.html
@@ -54,7 +54,7 @@
         </div>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-primary" id="btnOk">// 'ok' | tr //</button>
+        <button type="button" class="btn btn-primary" id="btnOk" ng-click="vm.save(destination)">// 'ok' | tr //</button>
         <button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
       </div>
     </div><!-- /.modal-content -->
diff --git a/static/ng/resources/js/components/system-management/create-destination.directive.js b/static/ng/resources/js/components/system-management/create-destination.directive.js
index c95488dd2..7b98ada52 100644
--- a/static/ng/resources/js/components/system-management/create-destination.directive.js
+++ b/static/ng/resources/js/components/system-management/create-destination.directive.js
@@ -6,10 +6,30 @@
     .module('harbor.system.management')
     .directive('createDestination', createDestination);
     
-  CreateDestinationController.$inject = [];
+  CreateDestinationController.$inject = ['CreateDestinationService'];
   
-  function CreateDestinationController() {
+  function CreateDestinationController(CreateDestinationService) {
     var vm = this;
+    vm.save = save;
+    
+    function save(destination) {
+      if(destination) {
+        console.log('destination:' + angular.toJson(destination));
+        CreateDestinationService(destination.name, destination.endpoint, 
+         destination.username, destination.password)
+          .success(createDestinationSuccess)
+          .error(createDestinationFailed);
+      }
+    }
+    
+    function createDestinationSuccess(data, status) {
+      alert('Successful created destination.');
+    }
+    
+    function createDestinationFailed(data, status) {
+      console.log('Failed create destination:' + data);
+    }
+    
   }
   
   function createDestination() {
diff --git a/static/ng/resources/js/components/system-management/destination.directive.html b/static/ng/resources/js/components/system-management/destination.directive.html
index ecb0e2e5f..408a582ca 100644
--- a/static/ng/resources/js/components/system-management/destination.directive.html
+++ b/static/ng/resources/js/components/system-management/destination.directive.html
@@ -25,7 +25,7 @@
             </tr>
             <tr ng-if="vm.destinations.length > 0" ng-repeat="r in vm.destinations"> 
               <td>//r.name//</td>
-              <td>//r.endpoint//</td>
+              <td>//r.url//</td>
               <td>//r.creation_time//</td>
               <td></td>
             </tr>
diff --git a/static/ng/resources/js/components/system-management/destination.directive.js b/static/ng/resources/js/components/system-management/destination.directive.js
index dc2faf829..8e93d63d6 100644
--- a/static/ng/resources/js/components/system-management/destination.directive.js
+++ b/static/ng/resources/js/components/system-management/destination.directive.js
@@ -11,12 +11,29 @@
   function DestinationController(ListDestinationService) {
     var vm = this;
     
-    ListDestinationService()
-      .then(function(data) {
-        vm.destinations = data; 
-      }, function() {
-                
-      });
+    vm.retrieve = retrieve;
+    vm.search = search;
+    vm.retrieve();
+    
+    function retrieve() {
+      ListDestinationService()
+        .success(listDestinationSuccess)
+        .error(listDestinationFailed);
+    }
+    
+    function search() {
+      vm.retrieve();
+    }
+    
+    function listDestinationSuccess(data, status) {
+      vm.destinations = data;
+    }
+    
+    function listDestinationFailed(data, status) {
+      console.log('Failed list destination:' + data);
+    }
+    
+    
   }
   
   function destination() {
diff --git a/static/ng/resources/js/services/destination/services.create-destination.js b/static/ng/resources/js/services/destination/services.create-destination.js
index c043f07a9..571a4fb40 100644
--- a/static/ng/resources/js/services/destination/services.create-destination.js
+++ b/static/ng/resources/js/services/destination/services.create-destination.js
@@ -6,12 +6,18 @@
     .module('harbor.services.destination')
     .factory('CreateDestinationService', CreateDestinationService);
     
-  CreateDestinationService.$inject = ['$http', '$q', '$timeout'];
+  CreateDestinationService.$inject = ['$http'];
   
-  function CreateDestinationService($http, $q, $timeout) {
+  function CreateDestinationService($http) {
     return createDestination;
-    function createDestination() {
-      
+    function createDestination(name, endpoint, username, password) {
+      return $http
+        .post('/api/targets', {
+          'name': name,
+          'url': endpoint,
+          'username': username,
+          'password': password
+        });
     }
   }
   
diff --git a/static/ng/resources/js/services/destination/services.list-destination.js b/static/ng/resources/js/services/destination/services.list-destination.js
index 4f1c661a5..bdc2925b1 100644
--- a/static/ng/resources/js/services/destination/services.list-destination.js
+++ b/static/ng/resources/js/services/destination/services.list-destination.js
@@ -6,38 +6,17 @@
     .module('harbor.services.destination')
     .factory('ListDestinationService', ListDestinationService);
     
-  ListDestinationService.$inject = ['$http', '$q', '$timeout'];
+  ListDestinationService.$inject = ['$http'];
   
-  function ListDestinationService($http, $q, $timeout) {
-    
-    var mockData = [
-      {
-        'id' : 1,
-        'name': 'Target01',
-        'endpoint': 'http://10.117.170.69',
-        'creation_time': '2016-06-01 16:54:32'
-      },
-      {
-        'id' : 2,
-        'name': 'Target02',
-        'endpoint': 'http://10.117.171.41',
-        'creation_time': '2016-06-01 15:35:22'
-      },
-      {
-        'id' : 3,
-        'name': 'Target03',
-        'endpoint': 'http://10.117.171.63',
-        'creation_time': '2016-06-01 14:22:21'
-      }
-    ];
-    
+  function ListDestinationService($http) {    
     return listDestination;
-    function listDestination() {
-      var q = $q.defer();
-      $timeout(function() {
-        q.resolve(mockData);
-      });      
-      return q.promise;
+    function listDestination(name) {
+      return $http
+        .get('/api/targets', {
+          'params': {
+            'name': name
+          }
+        });
     }
   }
   
diff --git a/static/ng/resources/js/services/replication-job/services.list-replication-job.js b/static/ng/resources/js/services/replication-job/services.list-replication-job.js
index d99a09881..79b5de1b6 100644
--- a/static/ng/resources/js/services/replication-job/services.list-replication-job.js
+++ b/static/ng/resources/js/services/replication-job/services.list-replication-job.js
@@ -6,62 +6,20 @@
     .module('harbor.services.replication.job')
     .factory('ListReplicationJobService', ListReplicationJobService);
     
-  ListReplicationJobService.$inject = ['$http', '$q', '$timeout'];
+  ListReplicationJobService.$inject = ['$http'];
   
-  function ListReplicationJobService($http, $q, $timeout) {
-    var mockData = [
-      {
-        'policy_id': 2,
-        'job_id': 1,
-        'name': 'Replicate Ubuntu:14.04',
-        'operation': 'copy',
-        'start_time': '2016-05-27 14:05:22',
-        'status': 'failed'
-      },
-      {
-        'policy_id': 1,
-        'job_id': 2,
-        'name': 'Replicate MySQL:5.6',
-        'operation': 'copy',
-        'start_time': '2016-05-27 15:15:22',
-        'status': 'success'
-      },
-      {
-        'policy_id': 1,
-        'job_id': 3,
-        'name': 'Replicate Alpine:1.1',
-        'operation': 'copy',
-        'start_time': '2016-05-27 13:15:22',
-        'status': 'success'
-      },
-      {
-        'policy_id': 2,
-        'job_id': 4,
-        'name': 'Replicate Alpine:1.1',
-        'operation': 'copy',
-        'start_time': '2016-05-27 13:15:22',
-        'status': 'success'
-      }
-    ];
+  function ListReplicationJobService($http) {
+    
     return listReplicationJob;
     
-    
-    
-    function listReplicationJob(policyId) {
-      console.log('policyId=' + policyId);
-      var defer = $q.defer();
-      $timeout(function() {
-        var result = [];
-        for(var i = 0; i < mockData.length; i++) {
-          var item = mockData[i];
-          if(item['policy_id'] == policyId) {
-            result.push(item);
+    function listReplicationJob(policyId, name) {
+      return $http
+        .get('/api/jobs/replication/', {
+          'params': {
+            'policy_id': policyId,
+            'name': name
           }
-        }
-        defer.resolve(result);
-      });
-      return defer.promise;
+        });
     }
   }
-  
 })();
\ No newline at end of file
diff --git a/static/ng/resources/js/services/replication-policy/services.create-replication-policy.js b/static/ng/resources/js/services/replication-policy/services.create-replication-policy.js
new file mode 100644
index 000000000..3f89a2d89
--- /dev/null
+++ b/static/ng/resources/js/services/replication-policy/services.create-replication-policy.js
@@ -0,0 +1,28 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.services.replication.policy')
+    .factory('CreateReplicationPolicyService', CreateReplicationPolicyService);
+    
+  CreateReplicationPolicyService.$inject = ['$http'];
+  
+  function CreateReplicationPolicyService($http) {
+    return createReplicaitonPolicy;
+    
+    function createReplicationPolicy(policy) {
+      return $http      
+        .post('/api/policies/replication', {
+          'project_id': policy.projectId,
+          'target_id': policy.targetId,
+          'name': policy.name,
+          'enabled': policy.enabled,
+          'description': policy.description,
+          'cron_str': policy.cronStr,
+          'start_time': policy.startTime
+        })
+    }
+  }
+    
+})();
\ No newline at end of file
diff --git a/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js b/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js
index 0d7800d06..fa7061914 100644
--- a/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js
+++ b/static/ng/resources/js/services/replication-policy/services.list-replication-policy.js
@@ -6,66 +6,20 @@
     .module('harbor.services.replication.policy')
     .factory('ListReplicationPolicyService', ListReplicationPolicyService);
     
-  ListReplicationPolicyService.$inject = ['$http', '$q', '$timeout'];
+  ListReplicationPolicyService.$inject = ['$http'];
   
-  function ListReplicationPolicyService($http, $q, $timeout) {
-    
-    var mockData = [
-      {
-        'policy_id': 1,
-        'name': 'test01',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-26 22:30:30',
-        'status': 'NORMAL',
-        'activation': true
-      },
-      {
-        'policy_id': 2,
-        'name': 'test02',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'policy_id': 3,
-        'name': 'test03',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'policy_id': 4,
-        'name': 'test04',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      },
-      {
-        'policy_id': 5,
-        'name': 'test05',
-        'description': 'Sync image for current.',
-        'destination': '10.117.170.69',
-        'start_time': '2015-05-27 20:00:00',
-        'status': 'WARNING',
-        'activation': true
-      }
-    ];
-    
+  function ListReplicationPolicyService($http) {
+       
     return listReplicationPolicy;
     
-    function listReplicationPolicy(policyName) {
-      var defer = $q.defer();
-      $timeout(function() {
-        defer.resolve(mockData);
-      });
-      return defer.promise;
+    function listReplicationPolicy(projectId, name) {
+      return $http
+        .get('/api/policies/replication', {
+          'params': {
+            'project_id': projectId,
+            'name': name
+          }
+        });
     }
     
   }