diff --git a/src/js/client.js b/src/js/client.js
index c0b2a4f1a..297290da0 100644
--- a/src/js/client.js
+++ b/src/js/client.js
@@ -854,10 +854,11 @@ angular.module('Application').service('Client', ['$http', '$interval', 'md5', 'N
         }).error(defaultErrorHandler(callback));
     };
 
-    Client.prototype.createTokenByClientId = function (id, scope, expiresAt, callback) {
+    Client.prototype.createTokenByClientId = function (id, scope, expiresAt, name, callback) {
         var data = {
             scope: scope,
-            expiresAt: expiresAt
+            expiresAt: expiresAt,
+            name: name || ''
         };
         post('/api/v1/clients/' + id + '/tokens', data).success(function(data, status) {
             if (status !== 201) return callback(new ClientError(status, data));
diff --git a/src/views/account.html b/src/views/account.html
index 69d49ff44..720db466c 100644
--- a/src/views/account.html
+++ b/src/views/account.html
@@ -198,11 +198,35 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">New token created</h4>
+                <h4 class="modal-title">Create API token</h4>
+            </div>
+            <div class="modal-body">
+                <div ng-hide="tokenAdd.token.accessToken">
+                  <form name="tokenAddForm" role="form" novalidate ng-submit="tokenAdd.submit(apiClient)" autocomplete="off">
+                    <div class="form-group" ng-class="{ 'has-error': (tokenAddForm.tokenName.$dirty && tokenAddForm.tokenName.$invalid) || (!tokenAddForm.tokenName.$dirty && tokenAdd.error.tokenName)}">
+                      <label class="control-label">Token name</label>
+                      <div class="control-label" ng-show="(!tokenAddForm.tokenName.$dirty && tokenAdd.error.tokenName) || (tokenAddForm.tokenName.$dirty && tokenAddForm.tokenName.$invalid)">
+                        <small ng-show="tokenAddForm.tokenName.$error.required">A token name is required</small>
+                        <small ng-show="(tokenAddForm.tokenName.$dirty && tokenAddForm.tokenName.$invalid) && !tokenAddForm.tokenName.$error.required">This token name is not valid</small>
+                        <small ng-show="!tokenAddForm.email.$dirty && tokenAdd.error.tokenName">{{ tokenAdd.error.tokenName }}</small>
+                      </div>
+                      <input type="text" class="form-control" ng-model="tokenAdd.tokenName" id="inputTokenAddName" name="tokenName" required autofocus>
+                    </div>
+                    <input class="ng-hide" type="submit" ng-disabled="tokenAddForm.$invalid"/>
+                  </form>
+                </div>
+
+                <div ng-show="tokenAdd.token.accessToken">
+                  Use the following token to authenticate against the Cloudron API:
+                  <br/>
+                  <b ng-click-select>{{ tokenAdd.token.accessToken }}</b>
+                </div>
             </div>
-            <div class="modal-body"><b ng-click-select>{{ tokenAdd.token.accessToken }}</b></div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Done</button>
+                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                <button type="button" class="btn btn-success" ng-click="tokenAdd.submit(apiClient)" ng-hide="tokenAdd.token.accessToken" ng-disabled="tokenAddForm.$invalid || tokenAdd.busy">
+                    <i class="fa fa-circle-o-notch fa-spin" ng-show="tokenAdd.busy"></i> Generate Token
+                </button>
             </div>
         </div>
     </div>
diff --git a/src/views/account.js b/src/views/account.js
index 911050636..8a7f6976a 100644
--- a/src/views/account.js
+++ b/src/views/account.js
@@ -296,32 +296,47 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
     };
 
     $scope.tokenAdd = {
-        busy: false,
         token: {},
+        tokenName: '',
+        busy: false,
+        error: {},
+
+        reset: function () {
+            $scope.tokenAdd.busy = false;
+            $scope.tokenAdd.token = {};
+            $scope.tokenAdd.error.tokenName = null;
+            $scope.tokenAdd.tokenName = '';
+
+            $scope.tokenAddForm.$setUntouched();
+            $scope.tokenAddForm.$setPristine();
+        },
 
         show: function (client) {
+            $scope.tokenAdd.reset();
+            $('#tokenAddModal').modal('show');
+        },
+
+        submit: function (client) {
             $scope.tokenAdd.busy = true;
             $scope.tokenAdd.token = {};
 
             var expiresAt = Date.now() + 100 * 365 * 24 * 60 * 60 * 1000;   // ~100 years from now
 
-            Client.createTokenByClientId(client.id, '*' /* scope */, expiresAt, function (error, result) {
-                if (error && error.statusCode === 412) {
-                    var actionScope = $scope.$new(true);
-                    actionScope.action = '/#/settings';
-
-                    Client.notify('Not allowed', 'You have to enable the external API in the settings.', false, 'error', actionScope);
-
+            Client.createTokenByClientId(client.id, '*' /* scope */, expiresAt, $scope.tokenAdd.tokenName, function (error, result) {
+                if (error) {
+                    if (error.statusCode === 400) {
+                        $scope.tokenAdd.error.tokenName = 'Invalid token name';
+                        $scope.tokenAddForm.tokenName.$setPristine();
+                        $('#inputTokenAddName').focus();
+                    } else {
+                        console.error('Unable to create token.', error);
+                    }
                     return;
-                } else if (error) {
-                    return console.error(error);
                 }
 
                 $scope.tokenAdd.busy = false;
                 $scope.tokenAdd.token = result;
 
-                $('#tokenAddModal').modal('show');
-
                 refreshClientTokens(client);
             });
         }
@@ -360,7 +375,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
 
             client.activeTokens = result || [];
 
-            callback();
+            if (callback) callback();
         });
     }
 
@@ -382,7 +397,7 @@ angular.module('Application').controller('AccountController', ['$scope', 'Client
     });
 
     // setup all the dialog focus handling
-    ['passwordChangeModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal'].forEach(function (id) {
+    ['passwordChangeModal', 'emailChangeModal', 'fallbackEmailChangeModal', 'displayNameChangeModal', 'twoFactorAuthenticationEnableModal', 'twoFactorAuthenticationDisableModal', 'tokenAddModal'].forEach(function (id) {
         $('#' + id).on('shown.bs.modal', function () {
             $(this).find("[autofocus]:first").focus();
         });
diff --git a/src/views/tokens.js b/src/views/tokens.js
index 4e3b57be0..e0e1f62fe 100644
--- a/src/views/tokens.js
+++ b/src/views/tokens.js
@@ -118,7 +118,7 @@ angular.module('Application').controller('TokensController', ['$scope', 'Client'
 
             var expiresAt = Date.now() + 100 * 365 * 24 * 60 * 60 * 1000;   // ~100 years from now
 
-            Client.createTokenByClientId(client.id, '*' /* scope */, expiresAt, function (error, result) {
+            Client.createTokenByClientId(client.id, '*' /* scope */, expiresAt, '' /* name */, function (error, result) {
                 if (error && error.statusCode === 412) {
                     var actionScope = $scope.$new(true);
                     actionScope.action = '/#/settings';