diff --git a/views/ngXosViews/diagnostic/src/css/diagnostic.css b/views/ngXosViews/diagnostic/src/css/diagnostic.css
index de76060..4a8a6f9 100644
--- a/views/ngXosViews/diagnostic/src/css/diagnostic.css
+++ b/views/ngXosViews/diagnostic/src/css/diagnostic.css
@@ -27,6 +27,12 @@
     z-index: 1;
 }
 
+
+/* subscriber-status-modal */
+subscriber-status-modal .row + .row {
+  margin-top: 20px;
+}
+
 .half-height + .half-height {
     border-top: 1px solid black;
 }
diff --git a/views/ngXosViews/diagnostic/src/js/chart_data_service.js b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
index 7326ac8..f39a1e2 100644
--- a/views/ngXosViews/diagnostic/src/js/chart_data_service.js
+++ b/views/ngXosViews/diagnostic/src/js/chart_data_service.js
@@ -80,10 +80,10 @@
 
     };
 
-    this.getSubscriberIP = () => {
-      const ip = JSON.parse(this.currentServiceChain.children[0].children[0].tenant.service_specific_attribute).wan_container_ip;
+    this.getSubscriberIP = (subscriber) => {
+      // const ip = JSON.parse(this.currentServiceChain.children[0].children[0].tenant.service_specific_attribute).wan_container_ip;
       // const ip = this.currentServiceChain.children[0].children[0].tenant.wan_container_ip;
-      this.logicTopologyData.children[0].subscriberIP = ip;
+      this.logicTopologyData.children[0].subscriberIP = subscriber.wan_container_ip;
     };
 
     this.selectSubscriber = (subscriber) => {
@@ -96,7 +96,7 @@
       this.highlightInstances([]);
 
       this.getSubscriberTag(subscriber);
-      this.getSubscriberIP();
+      this.getSubscriberIP(subscriber);
 
     };
 
diff --git a/views/ngXosViews/diagnostic/src/js/rest_services.js b/views/ngXosViews/diagnostic/src/js/rest_services.js
index e88f098..5677f30 100644
--- a/views/ngXosViews/diagnostic/src/js/rest_services.js
+++ b/views/ngXosViews/diagnostic/src/js/rest_services.js
@@ -165,6 +165,10 @@
   })
   .service('Subscribers', function($resource, $q, SubscriberDevice){
     return $resource('/xoslib/cordsubscriber/:id', {id: '@id'}, {
+      update: {
+        method: 'PUT',
+        isArray: false
+      },
       queryWithDevices: {
         method: 'GET',
         isArray: true,
diff --git a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
index a8b93f5..74bb8a7 100644
--- a/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
+++ b/views/ngXosViews/diagnostic/src/js/subscriber-modal.js
@@ -34,22 +34,31 @@
       restrict: 'E',
       templateUrl: 'templates/subscriber-status-modal.tpl.html',
       controllerAs: 'vm',
-      controller: function($log, $scope){
+      controller: function($log, $timeout, $scope, Subscribers){
 
-        // mock until api
-        $scope.$watch(() => this.subscriber, (subscriber) => {
-          if(subscriber){
-            subscriber.status = 'enabled';
-          }
+        $scope.$watch(() => this.open, () => {
+          this.success = null;
+          this.formError = null;
         });
 
         this.close = () => {
           this.open = false;
         };
 
-        this.setStatus = (status) => {
-          this.subscriber.status = status;
-          $log.info(`Set subscriber status to: ${status}`);
+        this.updateSubscriber = (subscriber) => {
+
+          Subscribers.update(subscriber).$promise
+          .then(() => {
+            this.success = 'Subscriber successfully updated!';
+          })
+          .catch((e) => {
+            this.formError = e;
+          })
+          .finally(() => {
+            $timeout(() => {
+              this.close();
+            }, 1500);
+          });
         };
       }
     };
diff --git a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
index 6ae28db..7f87999 100644
--- a/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/subscriber-status-modal.tpl.html
@@ -3,41 +3,79 @@
     <div class="modal-content">
       <div class="modal-header">
         <button ng-click="vm.close()"  type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">Change subscriber status:</h4>
+        <h4 class="modal-title">Manage subscriber:</h4>
       </div>
-      <div class="modal-body">
-        <div class="row">
-          <div class="col-xs-6">
-            <a ng-click="vm.setStatus('enabled')" 
-              class="btn btn-block"
-              ng-class="{'btn-primary': vm.subscriber.status === 'enabled' ,'btn-default': vm.subscriber.status !== 'enabled'}"
-              >Enabled</a>
+      <form name="vm.subscriber-detail">
+        <div class="modal-body">
+          <div class="row">
+            <div class="col-xs-12">
+              <label>Status</label>
+            </div>
+            <div class="col-xs-6">
+              <a ng-click="vm.subscriber.status = 'enabled'"
+                class="btn btn-block"
+                ng-class="{'btn-primary': vm.subscriber.status === 'enabled' ,'btn-default': vm.subscriber.status !== 'enabled'}"
+                >Enabled</a>
+            </div>
+            <div class="col-xs-6">
+              <a ng-click="vm.subscriber.status = 'suspended'"
+                class="btn btn-block"
+                ng-class="{'btn-primary': vm.subscriber.status === 'suspended' ,'btn-default': vm.subscriber.status !== 'suspended'}"
+                >Suspended</a>
+            </div>
           </div>
-          <div class="col-xs-6">
-            <a ng-click="vm.setStatus('suspended')" 
-              class="btn btn-block"
-              ng-class="{'btn-primary': vm.subscriber.status === 'suspended' ,'btn-default': vm.subscriber.status !== 'suspended'}"
-              >Suspended</a>
+          <div class="row">
+            <div class="col-xs-6">
+              <a ng-click="vm.subscriber.status = 'delinquent'"
+                class="btn btn-block"
+                ng-class="{'btn-primary': vm.subscriber.status === 'delinquent' ,'btn-default': vm.subscriber.status !== 'delinquent'}"
+                >Delinquent <br> payment</a>
+            </div>
+            <div class="col-xs-6">
+              <a ng-click="vm.subscriber.status = 'copyrightviolation'"
+                class="btn btn-block"
+                ng-class="{'btn-primary': vm.subscriber.status === 'copyrightviolation' ,'btn-default': vm.subscriber.status !== 'copyrightviolation'}"
+                >Copyright <br> violation</a>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xs-6">
+              <label>Uplink Speed</label>
+              <input type="number" class="form-control" ng-model="vm.subscriber.uplink_speed"/>
+            </div>
+            <div class="col-xs-6">
+              <label>Downlink Speed</label>
+              <input type="number" class="form-control" ng-model="vm.subscriber.downlink_speed"/>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-xs-6">
+              <label>Enable Uverse</label>
+            </div>
+            <div class="col-xs-6">
+              <a 
+                ng-click="vm.subscriber.enable_uverse = !vm.subscriber.enable_uverse" 
+                ng-class="{'btn-success': vm.subscriber.enable_uverse, 'btn-danger': !vm.subscriber.enable_uverse}"
+                class="btn btn-block">
+                <span ng-show="vm.subscriber.enable_uverse === true">Enabled</span>
+                <span ng-show="vm.subscriber.enable_uverse !== true">Disabled</span>
+              </a>
+            </div>
           </div>
         </div>
-        <div class="row" style="margin-top: 20px">
-          <div class="col-xs-6">
-            <a ng-click="vm.setStatus('delinquent')" 
-              class="btn btn-block"
-              ng-class="{'btn-primary': vm.subscriber.status === 'delinquent' ,'btn-default': vm.subscriber.status !== 'delinquent'}"
-              >Delinquent <br> payment</a>
+        <div class="modal-footer" ng-show="vm.success || vm.formError">
+          <div class="alert alert-success" ng-show="vm.success">
+            {{vm.success}}
           </div>
-          <div class="col-xs-6">
-            <a ng-click="vm.setStatus('copyright')" 
-              class="btn btn-block"
-              ng-class="{'btn-primary': vm.subscriber.status === 'copyright' ,'btn-default': vm.subscriber.status !== 'copyright'}"
-              >Copyright <br> violation</a>
+          <div class="alert alert-danger" ng-show="vm.formError">
+            {{vm.formError}}
           </div>
         </div>
-      </div>
-      <div class="modal-footer">
-        <button ng-click="vm.close()" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
+        <div class="modal-footer">
+          <button ng-click="vm.close()" type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button ng-click="vm.updateSubscriber(vm.subscriber)" type="button" class="btn btn-primary">Save</button>
+        </div>
+      </form>
     </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div><!-- /.modal -->
\ No newline at end of file