diff --git a/src/js/client.js b/src/js/client.js
index 9db32842b..352b11aeb 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -1301,6 +1301,38 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.addAppPassword = function (identifier, name, callback) {
+        var data = {
+            identifier: identifier,
+            name: name
+        };
+
+        post('/api/v1/app_passwords', data, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 201) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
+    Client.prototype.getAppPasswords = function (callback) {
+        get('/api/v1/app_passwords', null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
+    Client.prototype.delAppPassword = function (id, callback) {
+        del('/api/v1/app_passwords/' + id, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 204) return callback(new ClientError(status, data));
+
+            callback(null);
+        });
+    };
+
     Client.prototype.update = function (options, callback) {
         var data = {
             skipBackup: !!options.skipBackup
diff --git a/src/views/profile.html b/src/views/profile.html
index 8197d6f55..6b9dae827 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -228,6 +228,53 @@
     </div>
 </div>
 
+<!-- Modal add app password -->
+<div class="modal fade" id="appPasswordAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+      <div class="modal-content">
+          <div class="modal-header">
+              <h4 class="modal-title">Create App Password</h4>
+          </div>
+          <div class="modal-body">
+              <div ng-hide="appPasswordAdd.password">
+                  <form name="appPasswordAddForm" role="form" novalidate ng-submit="appPasswordAdd.submit()" autocomplete="off">
+                      <div class="form-group" ng-class="{ 'has-error': (appPasswordAddForm.name.$dirty && appPasswordAddForm.name.$invalid) || (!appPasswordAddForm.name.$dirty && appPasswordAdd.error.name)}">
+                          <label class="control-label">App Password Name</label>
+                          <div class="control-label" ng-show="(!appPasswordAddForm.name.$dirty && appPasswordAdd.error.name) || (appPasswordAddForm.name.$dirty && appPasswordAddForm.name.$invalid)">
+                            <small ng-show="appPasswordAddForm.name.$error.required">A name is required</small>
+                            <small ng-show="appPasswordAdd.error.name">{{ appPasswordAdd.error.name }}</small>
+                          </div>
+                          <input type="text" class="form-control" ng-model="appPasswordAdd.name" id="inputAppPasswordAddName" name="name" required autofocus>
+                      </div>
+                      <div class="form-group" ng-class="{ 'has-error': (appPasswordAddForm.identifier.$dirty && appPasswordAddForm.identifier.$invalid) || (!appPasswordAddForm.identifier.$dirty && appPasswordAdd.error.identifier)}">
+                        <label class="control-label">App</label>
+                        <select class="form-control" ng-model="appPasswordAdd.identifier" ng-options="a.id as a.label for a in appPassword.identifiers" required></select>
+                      </div>
+
+                  <input class="ng-hide" type="submit" ng-disabled="appPasswordAddForm.$invalid"/>
+                  </form>
+              </div>
+
+              <div ng-show="appPasswordAdd.password">
+                  Use the following password to authenticate against the app:
+                  <br/>
+                  <b ng-click-select>{{ appPasswordAdd.password.password }}</b>
+
+                  <br/>
+                  <br/>
+                  <p>Please copy the password now. It won't be shown again for security purposes.</p>
+              </div>
+          </div>
+          <div class="modal-footer">
+              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+              <button type="button" class="btn btn-success" ng-click="appPasswordAdd.submit()" ng-hide="appPasswordAdd.password" ng-disabled="appPasswordAddForm.$invalid || appPasswordAdd.busy">
+                  <i class="fa fa-circle-notch fa-spin" ng-show="appPasswordAdd.busy"></i> Generate Password
+              </button>
+          </div>
+      </div>
+  </div>
+</div>
+
 <div class="content">
 
   <div class="text-left">
@@ -281,6 +328,44 @@
       </div>
   </div>
 
+  <br>
+
+  <div class="text-left">
+    <h3>App Passwords<button class="btn btn-primary btn-sm pull-right" ng-click="appPasswordAdd.show()"><i class="fa fa-plus"></i> New Password</button></h3>
+  </div>
+
+  <div class="card">
+    <div class="grid-item-top">
+        <div class="row">
+        <div class="col-xs-12">
+            <p>These passwords can be used as a security measure in mobile apps.</p>
+            <table class="table table-hover">
+            <thead>
+                <tr>
+                <th style="width:35%">Name</th>
+                <th style="width:35%">App</th>
+                <th style="width: 5%" class="text-right">Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr ng-repeat="password in appPassword.passwords">
+                  <td class="text-left elide-table-cell">
+                    <span uib-tooltip="{{ password.creationTime | prettyLongDate }}" class="arrow">{{ password.name }}</span>
+                  </td>
+                  <td class="text-left elide-table-cell">
+                    <span class="arrow">{{ password.prettyIdentifier }}</span>
+                  </td>
+                  <td class="text-right no-wrap" style="vertical-align: bottom">
+                      <button class="btn btn-xs btn-danger pull-right" ng-click="appPassword.del(password.id)" title="Delete Password"><i class="far fa-trash-alt"></i></button>
+                  </td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        </div>
+    </div>
+  </div>
+
   <div class="text-left" ng-show="user.admin">
     <h3>Sessions and API Tokens</h3>
   </div>
diff --git a/src/views/profile.js b/src/views/profile.js
index 772571f83..695bb95a9 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -7,6 +7,7 @@
 angular.module('Application').controller('ProfileController', ['$scope', '$location', 'Client', function ($scope, $location, Client) {
     $scope.user = Client.getUserInfo();
     $scope.config = Client.getConfig();
+    $scope.apps = Client.getInstalledApps();
 
     $scope.activeClients = [];
     $scope.webadminClient = {};
@@ -342,6 +343,105 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
         }
     };
 
+    $scope.appPasswordAdd = {
+        password: null,
+        name: '',
+        identifier: '',
+        busy: false,
+        error: {},
+
+        reset: function () {
+            $scope.appPasswordAdd.busy = false;
+            $scope.appPasswordAdd.password = null;
+            $scope.appPasswordAdd.error.name = null;
+            $scope.appPasswordAdd.name = '';
+            $scope.appPasswordAdd.identifier = '';
+
+            $scope.appPasswordAddForm.$setUntouched();
+            $scope.appPasswordAddForm.$setPristine();
+        },
+
+        show: function () {
+            $scope.appPasswordAdd.reset();
+            $('#appPasswordAddModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.appPasswordAdd.busy = true;
+            $scope.appPasswordAdd.password = {};
+
+            Client.addAppPassword($scope.appPasswordAdd.identifier, $scope.appPasswordAdd.name, function (error, result) {
+                if (error) {
+                    if (error.statusCode === 400) {
+                        $scope.appPasswordAdd.error.name = error.message;
+                        $scope.appPasswordAddForm.name.$setPristine();
+                        $('#inputAppPasswordName').focus();
+                    } else {
+                        console.error('Unable to create password.', error);
+                    }
+                    return;
+                }
+
+                $scope.appPasswordAdd.busy = false;
+                $scope.appPasswordAdd.password = result;
+
+                console.log(result);
+                $scope.appPassword.refresh();
+            });
+        }
+    };
+
+    $scope.appPassword = {
+        busy: false,
+        error: {},
+        passwords: [],
+        identifiers: [],
+
+        refresh: function () {
+            Client.getAppPasswords(function (error, result) {
+                if (error) console.error(error);
+
+                $scope.appPassword.passwords = result.appPasswords || [];
+                $scope.appPassword.identifiers = [
+                    { id: 'mail', label: 'Email' },
+                    // { id: 'webadmin', label: 'Web Admin'}
+                ];
+                var appsById = {};
+                $scope.apps.forEach(function (app) {
+                    if (!app.manifest.addons || !app.manifest.addons.ldap) return;
+
+                    appsById[app.id] = app;
+                    if (app.label) {
+                        $scope.appPassword.identifiers.push({ id: app.id, label: app.label + ' (' + app.fqdn + ')' });
+                    } else {
+                        $scope.appPassword.identifiers.push({ id: app.id, label: app.fqdn });
+                    }
+                });
+
+                // setup prettyIdentifier for the UI
+                $scope.appPassword.passwords.forEach(function (password) {
+                    if (password.identifier === 'mail') return password.prettyIdentifier = password.identifier;
+                    var app = appsById[password.identifier];
+                    if (!app) return password.prettyIdentifier = password.identifier + ' (App not found)';
+
+                    if (app.label) {
+                        password.prettyIdentifier = app.label + ' (' + app.fqdn + ')';
+                    } else {
+                        password.prettyIdentifier = app.fqdn;
+                    }
+                });
+            });
+        },
+
+        del: function (id) {
+            Client.delAppPassword(id, function (error) {
+                if (error) console.error(error);
+
+                $scope.appPassword.refresh();
+            });
+        }
+    };
+
     $scope.displayNameChange = {
         busy: false,
         error: {},
@@ -427,6 +527,8 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
         Client.getOAuthClients(function (error, activeClients) {
             if (error) return console.error(error);
 
+            $scope.appPassword.refresh();
+
             asyncForEach(activeClients, refreshClientTokens, function () {
                 $scope.webadminClient = activeClients.filter(function (c) { return c.id === 'cid-webadmin'; })[0];
                 $scope.apiClient = activeClients.filter(function (c) { return c.id === 'cid-sdk'; })[0];
@@ -455,7 +557,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
     };
 
     // setup all the dialog focus handling
-    ['passwordChangeModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
+    ['passwordChangeModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });