diff --git a/src/views/profile.html b/src/views/profile.html
index 6b9dae827..55deeb5f8 100644
--- a/src/views/profile.html
+++ b/src/views/profile.html
@@ -366,17 +366,40 @@
     </div>
   </div>
 
-  <div class="text-left" ng-show="user.admin">
-    <h3>Sessions and API Tokens</h3>
+  <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>
 
-  <div class="card" ng-show="user.admin">
+  <div class="card">
     <div class="grid-item-top">
       <div class="row">
         <div class="col-xs-12">
-          <p>You have {{ webadminClient.activeTokens.length }} active web session(s) and {{ cliClient.activeTokens.length }} CLI token(s).</p>
+          <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>
 
-          <button class="btn btn-outline btn-danger pull-right" ng-click="revokeTokens()">Logout From All</button>
+          <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>
+              </tr>
+            </thead>
+            <tbody>
+              <tr ng-repeat="token in tokens.allTokens">
+                <td class="hand 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>
+                <td class="text-right no-wrap" style="vertical-align: bottom">
+                  <button class="btn btn-xs btn-danger" ng-click="tokens.revoke(token)" uib-tooltip="Revoke Token"><i class="far fa-trash-alt"></i></button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+
+          <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 695bb95a9..e480b26f2 100644
--- a/src/views/profile.js
+++ b/src/views/profile.js
@@ -9,11 +9,6 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
     $scope.config = Client.getConfig();
     $scope.apps = Client.getInstalledApps();
 
-    $scope.activeClients = [];
-    $scope.webadminClient = {};
-    $scope.apiClient = {};
-    $scope.cliClient = {};
-
     $scope.twoFactorAuthentication = {
         busy: false,
         error: null,
@@ -493,50 +488,53 @@ angular.module('Application').controller('ProfileController', ['$scope', '$locat
         }
     };
 
-    function revokeTokensByClient(clientId, callback) {
-        Client.delTokensByClientId(clientId, function (error) {
-            if (error) console.error(error);
-            callback();
-        });
-    }
+    $scope.tokens = {
+        busy: false,
+        error: {},
+        allTokens: [],
+        webadminTokens: [],
+        cliTokens: [],
+        apiTokens: [],
 
-    $scope.revokeTokens = function () {
-        // first revoke all non webadmin tokens
-        var nonWebClientIds = $scope.activeClients.filter(function (c) { return c.id !== 'cid-webadmin'; }).map(function (c) { return c.id; });
-        asyncForEach(nonWebClientIds, revokeTokensByClient, function () {
-            // WARNING keep in sync with clients.js in box code
-            revokeTokensByClient('cid-webadmin', function () {
-                Client.logout(true /* destroy all OAuth sessions for this user */);
+        refresh: function () {
+            $scope.tokens.busy = true;
+
+            Client.getTokens(function (error, result) {
+                if (error) return console.error(error);
+
+                $scope.tokens.busy = false;
+                $scope.tokens.allTokens = result;
+
+                $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'; });
             });
-        });
+        },
+
+        revokeAll: function () {
+
+        },
+
+        add: {
+            busy: false,
+            error: null,
+            name: '',
+
+            show: function () {
+
+            },
+
+            submit: function () {
+
+            }
+        }
     };
 
-    function refreshClientTokens(client, callback) {
-        Client.getTokensByClientId(client.id, function (error, result) {
-            if (error) console.error(error);
-
-            client.activeTokens = result || [];
-
-            if (callback) callback();
-        });
-    }
-
     Client.onReady(function () {
         if (!Client.getUserInfo().admin) return;
 
-        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];
-                $scope.cliClient = activeClients.filter(function (c) { return c.id === 'cid-cli'; })[0];
-
-                $scope.activeClients = activeClients;
-            });
-        });
+        $scope.appPassword.refresh();
+        $scope.tokens.refresh();
     });
 
     $('#avatarFileInput').get(0).onchange = function (event) {