diff --git a/app/common/directives/app-navigation.html b/app/common/directives/app-navigation.html
index 96c2138..eabb137 100644
--- a/app/common/directives/app-navigation.html
+++ b/app/common/directives/app-navigation.html
@@ -84,6 +84,10 @@
           <a href="#/configuration/network" ng-click="closeSubnav()"
             tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Network settings</a>
         </li>
+        <li ng-class="{'active': (path == '/configuration' || path == '/configuration/certificate')}">
+          <a href="#/configuration/certificate" ng-click="closeSubnav()"
+            tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">Certificate management</a>
+        </li>
         <li ng-class="{'active': (path == '/configuration' || path == '/configuration/snmp')}">
           <a href="#/configuration/snmp" ng-click="closeSubnav()"
             tabindex="{{(showSubMenu && firstLevel == 'configuration') ? 0 : -1}}">SNMP settings</a>
diff --git a/app/common/directives/certificate.html b/app/common/directives/certificate.html
new file mode 100644
index 0000000..a46de69
--- /dev/null
+++ b/app/common/directives/certificate.html
@@ -0,0 +1,57 @@
+<div class="table__row-value row column">
+  <div class="certificate__type-cell bold">
+    {{cert.Description}}
+  </div>
+  <div class="certificate__title-inline">
+    Valid from:
+  </div>
+  <div class="certificate__date-cell">
+    {{cert.ValidNotBefore | localeDate}}
+  </div>
+  <div class="certificate__title-inline">
+    Valid until:
+  </div>
+  <div class="certificate__status-cell">
+    <span class="inline"
+      ng-class="{'icon__warning' : cert.isExpiring , 'icon__critical' : cert.isExpired}"
+      ng-if="cert.isExpired || cert.isExpiring"></span>
+  </div>
+  <div class="certificate__date-cell">
+    {{cert.ValidNotAfter | localeDate}}
+  </div>
+  <div class="certificate__buttons-cell">
+    <button type="button" class="btn  btn-tertiary  certificate__button">
+      <icon file="icon-replace.svg" ng-click="cert.upload = true"
+        aria-label="Replace certificate"></icon>
+    </button>
+  </div>
+  <div ng-show="cert.upload === true" class="upload__certificate">
+    <div class="certificate__upload-chooser row">
+      <div class="small-1 column">
+        <button type="button">
+          <icon file="icon-close.svg" ng-click="cert.upload=false"></icon>
+        </button>
+      </div>
+      <div class="small-2 column">
+        <label for='upload_{{cert.Description + cert.Id}}'>
+          <input name="upload_{{cert.Description + cert.Id}}"
+            id="upload_{{cert.Description + cert.Id}}"
+            type="file" file="cert.file" class="hide"/>
+          <span class="btn btn-secondary">Choose file</span>
+        </label>
+      </div>
+      <div class="small-6 column">
+        <span ng-if="!cert.file">No file selected</span>
+        <span>{{cert.file.name}}</span>
+        <button type="button" ng-if="cert.file.name" ng-click="cert.file = '';">
+          <icon file="icon-close.svg"></icon>
+        </button>
+      </div>
+      <div class="small-3 column">
+        <button type="button" ng-class="{disabled:!cert.file}"
+          class="btn btn-primary"
+          ng-click="replaceCertificate(cert)">Replace</button>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/common/directives/certificate.js b/app/common/directives/certificate.js
new file mode 100644
index 0000000..63dc594
--- /dev/null
+++ b/app/common/directives/certificate.js
@@ -0,0 +1,55 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  angular.module('app.common.directives').directive('certificate', [
+    'APIUtils',
+    function(APIUtils) {
+      return {
+        'restrict': 'E',
+        'template': require('./certificate.html'),
+        'scope': {'cert': '=', 'reload': '&'},
+        'controller': [
+          '$scope', 'APIUtils', 'toastService',
+          function($scope, APIUtils, toastService) {
+            var certificateType = 'PEM';
+            $scope.replaceCertificate = function(certificate) {
+              $scope.loading = true;
+              if (certificate.file.name.split('.').pop() !==
+                  certificateType.toLowerCase()) {
+                toastService.error(
+                    'Certificate must be replaced with a .pem file.');
+                return;
+              }
+              var file =
+                  document
+                      .getElementById(
+                          'upload_' + certificate.Description + certificate.Id)
+                      .files[0];
+              var reader = new FileReader();
+              reader.onloadend = function(e) {
+                var data = {};
+                data.CertificateString = e.target.result;
+                data.CertificateUri = {'@odata.id': certificate['@odata.id']};
+                data.CertificateType = certificateType;
+                APIUtils.replaceCertificate(data).then(
+                    function(data) {
+                      $scope.loading = false;
+                      toastService.success(
+                          certificate.Description + ' was replaced.');
+                      $scope.reload();
+                    },
+                    function(error) {
+                      console.log(error);
+                      $scope.loading = false;
+                      toastService.error(
+                          'Unable to replace ' + certificate.Description);
+                    });
+              };
+              reader.readAsBinaryString(file);
+            };
+          }
+        ]
+      };
+    }
+  ]);
+})(window.angular);