diff --git a/src/views/profile.html b/src/views/profile.html
index ead8b01b5..e602b7650 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -275,6 +275,48 @@
   </div>
 </div>
 
+<!-- Modal add api token -->
+<div class="modal fade" id="apiTokenAddModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Create API Token</h4>
+        </div>
+        <div class="modal-body">
+          <div ng-hide="tokens.add.accessToken">
+            <form name="apiTokenAddForm" role="form" novalidate ng-submit="tokens.add.submit()" autocomplete="off">
+              <div class="form-group" ng-class="{ 'has-error': (apiTokenAddForm.name.$dirty && apiTokenAddForm.name.$invalid) || (!apiTokenAddForm.name.$dirty && tokens.add.error)}">
+                <label class="control-label">API Token Name</label>
+                <div class="control-label" ng-show="(!apiTokenAddForm.name.$dirty && tokens.add.error) || (apiTokenAddForm.name.$dirty && apiTokenAddForm.name.$invalid)">
+                  <small ng-show="apiTokenAddForm.name.$error.required">A name is required</small>
+                  <small ng-show="tokens.add.error.name">{{ tokens.add.error }}</small>
+                </div>
+                <input type="text" class="form-control" id="inputApiTokenName" ng-model="tokens.add.name" name="name" required autofocus>
+              </div>
+
+              <input class="ng-hide" type="submit" ng-disabled="apiTokenAddForm.$invalid"/>
+            </form>
+          </div>
+          <div ng-show="tokens.add.accessToken">
+            New API token:
+            <br/>
+            <b ng-click-select>{{ tokens.add.accessToken }}</b>
+
+            <br/>
+            <br/>
+            <p>Please copy the API token 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="tokens.add.submit()" ng-hide="tokens.add.accessToken" ng-disabled="apiTokenAddForm.$invalid || tokens.add.busy">
+            <i class="fa fa-circle-notch fa-spin" ng-show="tokens.add.busy"></i> Generate API Token
+          </button>
+        </div>
+      </div>
+  </div>
+</div>
+
 <div class="content">
 
   <div class="text-left">
@@ -368,31 +410,32 @@
 
   <br/>
 
-  <div class="text-left">
-    <h3>Login and API Tokens <button class="btn btn-primary btn-sm pull-right" ng-click="tokens.add.show()" ng-show="user.admin"><i class="fa fa-plus"></i> New API Token</button></h3>
+  <div class="text-left" ng-show="user.admin">
+    <h3>API Tokens <button class="btn btn-primary btn-sm pull-right" ng-click="tokens.add.show()"><i class="fa fa-plus"></i> New API Token</button></h3>
   </div>
 
-  <div class="card">
+  <div class="card" ng-show="user.admin">
     <div class="grid-item-top">
       <div class="row">
         <div class="col-xs-12">
-          <p>You have {{ tokens.webadminTokens.length }} active web token(s), {{ tokens.cliTokens.length }} active CLI token(s) and {{ tokens.apiTokens.length }} API token(s).</p>
-
           <table class="table table-hover" style="margin: 0;">
             <thead>
               <tr>
-                <th style="width: 45%">Name</th>
-                <th style="width: 49.5%">Type</th>
-                <th style="width: 5%" class="text-right">Actions</th>
+                <th style="width: 50%">Name</th>
+                <th style="width: 40%">Expires At</th>
+                <th style="width: 10%" class="text-right">Actions</th>
               </tr>
             </thead>
             <tbody>
-              <tr ng-repeat="token in tokens.allTokens">
-                <td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
+              <tr ng-show="tokens.apiTokens.length === 0">
+                <td colspan="3" class="text-center">No API Tokens created</td>
+              </tr>
+              <tr ng-repeat="token in tokens.apiTokens">
+                <td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
                   {{ token.name || 'unnamed' }}
                 </td>
-                <td class="hand elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
-                  {{ token.clientId }}
+                <td class="elide-table-cell" style="text-overflow: ellipsis; white-space: nowrap;">
+                  {{ token.expiresAt | prettyLongDate }}
                 </td>
                 <td class="text-right no-wrap" style="vertical-align: bottom">
                   <button class="btn btn-xs btn-danger" ng-click="tokens.revokeToken(token)" uib-tooltip="Revoke Token"><i class="far fa-trash-alt"></i></button>
@@ -400,8 +443,24 @@
               </tr>
             </tbody>
           </table>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <br/>
+
+  <div class="text-left">
+    <h3>Login Tokens</h3>
+  </div>
+
+  <div class="card">
+    <div class="grid-item-top">
+      <div class="row">
+        <div class="col-xs-12">
+          <p>You have {{ tokens.webadminTokens.length }} active web token(s) and {{ tokens.cliTokens.length }}.</p>
+          <button class="btn btn-outline btn-danger pull-right" ng-click="tokens.revokeAllWebAndCliTokens()">Logout From All</button>
           <br/>
-          <button class="btn btn-outline btn-danger pull-right" ng-click="tokens.revokeAll()">Logout From All</button>
         </div>
       </div>
     </div>
diff --git a/src/views/profile.js b/src/views/profile.js
index 295b89495..8d43e6fc3 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -508,10 +508,12 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
                 $scope.tokens.webadminTokens = result.filter(function (c) { return c.clientId === 'cid-webadmin'; });
                 $scope.tokens.cliTokens = result.filter(function (c) { return c.clientId === 'cid-cli'; });
                 $scope.tokens.apiTokens = result.filter(function (c) { return c.clientId === 'cid-sdk'; });
+
+                console.log($scope.tokens.apiTokens)
             });
         },
 
-        revokeAll: function () {
+        revokeAllWebAndCliTokens: function () {
             $scope.tokens.busy = true;
 
             asyncForEach($scope.tokens.webadminTokens.concat($scope.tokens.cliTokens), function (token, callback) {
@@ -530,13 +532,38 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
             busy: false,
             error: null,
             name: '',
+            accessToken: '',
 
             show: function () {
+                $scope.tokens.add.name = '';
+                $scope.tokens.add.accessToken = '';
+                $scope.tokens.add.busy = false;
+                $scope.tokens.add.error = null;
+                $scope.apiTokenAddForm.name.$setPristine();
 
+                $('#apiTokenAddModal').modal('show');
             },
 
             submit: function () {
+                $scope.tokens.add.busy = true;
 
+                Client.createToken($scope.tokens.add.name, function (error, result) {
+                    if (error) {
+                        if (error.statusCode === 400) {
+                            $scope.tokens.add.error = error.message;
+                            $scope.apiTokenAddForm.name.$setPristine();
+                            $('#inputApiTokenName').focus();
+                        } else {
+                            console.error('Unable to create password.', error);
+                        }
+                        return;
+                    }
+
+                    $scope.tokens.add.busy = false;
+                    $scope.tokens.add.accessToken = result.accessToken;
+
+                    $scope.tokens.refresh();
+                });
             }
         },
 
@@ -574,7 +601,7 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
     };
 
     // setup all the dialog focus handling
-    ['passwordChangeModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
+    ['passwordChangeModal', 'apiTokenAddModal', 'appPasswordAddModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });