diff --git a/app/server-health/directives/remote-logging-server-modal.html b/app/server-health/directives/remote-logging-server-modal.html
new file mode 100644
index 0000000..eba57af
--- /dev/null
+++ b/app/server-health/directives/remote-logging-server-modal.html
@@ -0,0 +1,42 @@
+<div role="dialog" class="uib-modal__content  remote-logging-server__modal">
+  <button type="button" class="icon  icon__close  float-right" ng-click="$close()"></button>
+  <div class="modal-header">
+    <h2 class="modal-title" id="dialog_label">{{activeModalProps.title}}</h2>
+  </div>
+  <form name="form">
+    <div ng-if="activeModal !== 2" class="modal-body">
+      <label for="remoteServerIP">Hostname or IP Address</label>
+      <input id="remoteServerIP" type="text" required name="hostname"
+        ng-model="remoteServerForm.hostname" />
+      <div ng-if="form.hostname.$invalid && form.hostname.$dirty"
+        class="form__validation-message">
+        <span ng-show="form.hostname.$error.required">Field is required</span>
+      </div>
+      <label for="remoteServerPort">Port</label>
+      <p class="label__helper-text">Value must be between 0 – 65535</p>
+      <input id="remoteServerPort" type="number" required name="port"
+        min="0" max="65535" ng-model="remoteServerForm.port"/>
+      <div ng-if="form.port.$invalid && form.port.$dirty"
+        class="form__validation-message">
+        <span ng-show="form.port.$error.required">Field is required</span>
+        <span ng-show="form.port.$error.min || form.port.$error.max">
+          Value must be between 0 – 65535
+        </span>
+      </div>
+    </div>
+    <div ng-if="activeModal === 2" class="modal-body">
+      <p>Are you sure you want to remove remote logging server
+      {{remoteServer.hostname}}?</p>
+    </div>
+    <div class="modal-footer">
+      <button class="button btn-secondary" ng-click="$close()" type="button">
+        Cancel
+      </button>
+      <button class="button btn-primary" type="submit"
+        ng-click="$close(activeModal)" ng-disabled="form.$invalid"
+        ng-class="{'disabled': form.$invalid}">
+        {{activeModalProps.actionLabel}}
+      </button>
+    </div>
+  </form>
+</div>
diff --git a/app/server-health/directives/remote-logging-server.html b/app/server-health/directives/remote-logging-server.html
new file mode 100644
index 0000000..28fc313
--- /dev/null
+++ b/app/server-health/directives/remote-logging-server.html
@@ -0,0 +1,21 @@
+<p class="content-label">Remote Logging Server</p>
+<div ng-if="!loadError && !remoteServer">
+  <button ng-click="initModal(0)" class="modal__trigger">
+    <span class="icon  icon__plus"></span>
+    Add server
+  </button>
+</div>
+<div ng-if="!loadError && remoteServer">
+  <p class="inline remote-logging-server__details">
+    {{remoteServer.hostname}}
+  </p>
+  <button ng-click="initModal(1)" class="modal__trigger">
+    <span class="icon icon__edit"></span>
+  </button>
+  <button ng-click="initModal(2)" class="modal__trigger">
+    <span class="icon icon__delete"></span>
+  </button>
+</div>
+<div class="text-right" ng-if="loadError">
+  <p>--</p>
+</div>
diff --git a/app/server-health/directives/remote-logging-server.js b/app/server-health/directives/remote-logging-server.js
new file mode 100644
index 0000000..4e8ad6f
--- /dev/null
+++ b/app/server-health/directives/remote-logging-server.js
@@ -0,0 +1,157 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  angular.module('app.common.directives').directive('remoteLoggingServer', [
+    'APIUtils',
+    function(APIUtils) {
+      return {
+        'restrict': 'E', 'template': require('./remote-logging-server.html'),
+            'controller': [
+              '$scope', '$uibModal', 'toastService',
+              function($scope, $uibModal, toastService) {
+                const modalActions = {
+                  ADD: 0,
+                  EDIT: 1,
+                  REMOVE: 2,
+                  properties: {
+                    0: {
+                      title: 'Add remote logging server',
+                      actionLabel: 'Add',
+                      successMessage: 'Connected to remote logging server.',
+                      errorMessage: 'Unable to connect to server.'
+                    },
+                    1: {
+                      title: 'Edit remote logging server',
+                      actionLabel: 'Save',
+                      successMessage: 'Connected to remote logging server.',
+                      errorMessage: 'Unable to save remote logging server.'
+                    },
+                    2: {
+                      title: 'Remove remote logging server',
+                      actionLabel: 'Remove',
+                      successMessage: 'Remote logging server removed.',
+                      errorMessage: 'Unable to remove remote logging server.'
+                    }
+                  }
+                };
+
+                const modalTemplate =
+                    require('./remote-logging-server-modal.html');
+
+                $scope.activeModal;
+                $scope.activeModalProps;
+
+                $scope.remoteServer;
+                $scope.remoteServerForm;
+                $scope.loadError = true;
+
+                $scope.initModal = (type) => {
+                  if (type === undefined) {
+                    return;
+                  }
+                  $scope.activeModal = type;
+                  $scope.activeModalProps = modalActions.properties[type];
+
+                  $uibModal
+                      .open({
+                        template: modalTemplate,
+                        windowTopClass: 'uib-modal',
+                        scope: $scope,
+                        ariaLabelledBy: 'dialog_label'
+                      })
+                      .result
+                      .then((action) => {
+                        switch (action) {
+                          case modalActions.ADD:
+                            addServer();
+                            break;
+                          case modalActions.EDIT:
+                            editServer();
+                            break;
+                          case modalActions.REMOVE:
+                            removeServer();
+                            break;
+                          default:
+                            setFormValues();
+                        }
+                      })
+                      .catch(() => {
+                        // reset form when modal overlay clicked
+                        // and modal closes
+                        setFormValues();
+                      })
+                };
+
+                const addServer = () => {
+                  $scope.loading = true;
+                  APIUtils.setRemoteLoggingServer($scope.remoteServerForm)
+                      .then(() => {
+                        $scope.loading = false;
+                        $scope.remoteServer = {...$scope.remoteServerForm};
+                        toastService.success(
+                            $scope.activeModalProps.successMessage);
+                      })
+                      .catch(() => {
+                        $scope.loading = false;
+                        $scope.remoteServer = undefined;
+                        setFormValues();
+                        toastService.error(
+                            $scope.activeModalProps.errorMessage);
+                      })
+                };
+
+                const editServer = () => {
+                  $scope.loading = true;
+                  APIUtils.updateRemoteLoggingServer($scope.remoteServerForm)
+                      .then(() => {
+                        $scope.loading = false;
+                        $scope.remoteServer = {...$scope.remoteServerForm};
+                        toastService.success(
+                            $scope.activeModalProps.successMessage);
+                      })
+                      .catch(() => {
+                        $scope.loading = false;
+                        setFormValues();
+                        toastService.error(
+                            $scope.activeModalProps.errorMessage);
+                      })
+                };
+
+                const removeServer = () => {
+                  $scope.loading = true;
+                  APIUtils.disableRemoteLoggingServer()
+                      .then(() => {
+                        $scope.loading = false;
+                        $scope.remoteServer = undefined;
+                        setFormValues();
+                        toastService.success(
+                            $scope.activeModalProps.successMessage);
+                      })
+                      .catch(() => {
+                        $scope.loading = false;
+                        toastService.error(
+                            $scope.activeModalProps.errorMessage);
+                      })
+                };
+
+                const setFormValues = () => {
+                  $scope.remoteServerForm = {...$scope.remoteServer};
+                };
+
+                this.$onInit = () => {
+                  APIUtils.getRemoteLoggingServer()
+                      .then((remoteServer) => {
+                        $scope.loadError = false;
+                        $scope.remoteServer = remoteServer;
+                        setFormValues();
+                      })
+                      .catch(() => {
+                        $scope.loadError = true;
+                      })
+                };
+              }
+            ]
+      }
+    }
+  ])
+})(window.angular);
\ No newline at end of file