diff --git a/dashboard/src/components/NewApiTokenDialog.vue b/dashboard/src/components/NewApiTokenDialog.vue
new file mode 100644
index 000000000..bbcab7fea
--- /dev/null
+++ b/dashboard/src/components/NewApiTokenDialog.vue
@@ -0,0 +1,83 @@
+<template>
+  <Dialog ref="dialog"
+    :title="$t('profile.createApiToken.title')"
+    :confirm-label="addedToken ? '' : $t('profile.createApiToken.generateToken')"
+     confirm-style="success"
+    :reject-label="$t('main.dialog.close')"
+    @confirm="onSubmitAddApiToken()"
+  >
+    <div>
+      <div v-show="!addedToken">
+        <form novalidate @submit="onSubmitAddApiToken()" autocomplete="off">
+          <input style="display: none" type="submit" :disabled="!isValid"/>
+          <FormGroup>
+            <label for="apiTokenName">{{ $t('profile.createApiToken.name') }}</label>
+            <TextInput id="apiTokenName" v-model="tokenName" required/>
+          </FormGroup>
+
+          <FormGroup>
+            <label>{{ $t('profile.createApiToken.access') }}</label>
+            <Radiobutton v-model="tokenScope" value="r" :label="$t('profile.apiTokens.readonly')" />
+            <Radiobutton v-model="tokenScope" value="rw" :label="$t('profile.apiTokens.readwrite')" />
+          </FormGroup>
+        </form>
+      </div>
+      <div v-show="addedToken">
+        {{ $t('profile.createApiToken.description') }}
+        <TextInput v-model="addedToken" readonly/>
+        <Button tool @click="onCopyApiTokenToClipboard(addedToken)" icon="fa fa-clipboard" />
+        <p>{{ $t('profile.createApiToken.copyNow') }}</p>
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { ref, computed, useTemplateRef } from 'vue';
+import { Button, Dialog, FormGroup, Radiobutton, TextInput } from 'pankow';
+import { copyToClipboard } from 'pankow/utils';
+import TokensModel from '../models/TokensModel.js';
+
+const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
+
+const dialog = useTemplateRef('dialog');
+const addedToken = ref('');
+const tokenName = ref('');
+const tokenScope = ref('r');
+
+function open() {
+  addedToken.value = '';
+  tokenName.value = '';
+  tokenScope.value = 'r';
+  dialog.value.open();
+}
+
+const emit = defineEmits(['done']);
+defineExpose({ open });
+
+const isValid = computed(() => {
+  if (!tokenName.value) return false;
+  if (!(tokenScope.value === 'r' || tokenScope.value === 'rw')) return false;
+  return true;
+});
+
+async function onSubmitAddApiToken(){
+  if (!isValid.value) return;
+
+  const scope = { '*': tokenScope.value };
+  const apiToken = await tokensModel.add(tokenName.value, scope);
+
+  addedToken.value = apiToken.accessToken;
+
+  emit('done');
+}
+
+function onCopyApiTokenToClipboard(apiToken) {
+  copyToClipboard(apiToken);
+  window.pankow.notify({ type: 'success', text: 'Token copied!' });
+}
+
+</script>
diff --git a/dashboard/src/components/ProfileView.vue b/dashboard/src/components/ProfileView.vue
index c0845fec0..b1af28ce3 100644
--- a/dashboard/src/components/ProfileView.vue
+++ b/dashboard/src/components/ProfileView.vue
@@ -2,6 +2,8 @@
   <div class="content">
     <InputDialog ref="inputDialog" />
 
+    <NewApiTokenDialog ref="newApiTokenDialog" @done="refreshApiTokens()"/>
+
     <h1>{{ $t('profile.title') }}</h1>
     <Card>
       <div style="display: flex;">
@@ -43,7 +45,7 @@
                   <!-- <Button tool @click="onPasswordReset()">{{ $t('profile.passwordResetAction') }}</Button> -->
                   <Button tool @click="onPasswordChange()">{{ $t('profile.changePasswordAction') }}</Button>
                   <Button tool v-show="!user.source && !config.external2FA" @click="on2FactorAuthConfig()">{{ $t(user.twoFactorAuthenticationEnabled ? 'profile.disable2FAAction' : 'profile.enable2FAAction') }}</Button>
-                  <Button tool @click="onLogout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
+                  <Button tool @click="profileModel.logout()" icon="fa fa-sign-out">{{ $t('main.logout') }}</Button>
                 </td>
               </tr>
             </tbody>
@@ -56,8 +58,43 @@
     <Card>
     </Card>
 
-    <h2 v-show="user.isAtLeastAdmin">{{ $t('profile.apiTokens.title') }}</h2>
+    <h2 v-show="user.isAtLeastAdmin" class="header-with-button">
+      {{ $t('profile.apiTokens.title') }}
+      <Button @click="addApiTokenDialog.open()" icon="fa fa-plus">{{ $t('profile.apiTokens.newApiToken') }}</Button>
+    </h2>
     <Card v-show="user.isAtLeastAdmin">
+      <p v-html="$t('profile.apiTokens.description', { apiDocsLink: 'https://docs.cloudron.io/api.html' })"></p>
+      <table class="table table-hover" style="margin: 0;">
+        <thead>
+          <tr>
+            <th>{{ $t('profile.apiTokens.name') }}</th>
+            <th class="hide-mobile">{{ $t('profile.apiTokens.lastUsed') }}</th>
+            <th>{{ $t('profile.apiTokens.scope') }}</th>
+            <th class="text-right">{{ $t('main.actions') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-show="apiTokens.length === 0">
+            <td colspan="3" class="text-center">{{ $t('profile.apiTokens.noTokensPlaceholder') }}</td>
+          </tr>
+          <tr v-for="token in apiTokens" :key="token.id">
+            <td>
+              {{ token.name || 'unnamed' }}
+            </td>
+            <td class="hide-mobile">
+              <span v-if="token.lastUsedTime">{{ prettyLongDate(token.lastUsedTime) }}</span>
+              <span v-else>{{ $t('profile.apiTokens.neverUsed') }}</span>
+            </td>
+            <td>
+              <span v-if="token.scope['*'] === 'rw'">{{ $t('profile.apiTokens.readwrite') }}</span>
+              <span v-else>{{ $t('profile.apiTokens.readonly') }}</span>
+            </td>
+            <td class="text-right">
+              <Button small tool danger @click="onRevokeToken(token)" v-tooltip="$t('profile.apiTokens.revokeTokenTooltip')" icon="far fa-trash-alt" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </Card>
 
     <h2>{{ $t('profile.loginTokens.title') }}</h2>
@@ -70,19 +107,22 @@
 
 <script setup>
 
-import { useI18n } from 'vue-i18n';
-import { ref, onMounted, useTemplateRef } from 'vue';
-import { Button, Dropdown, InputDialog } from 'pankow';
-import { TOKEN_TYPES } from '../constants.js';
-import Card from './Card.vue';
-import ProfileModel from '../models/ProfileModel.js';
-import CloudronModel from '../models/CloudronModel.js';
-import TokensModel from '../models/TokensModel.js';
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
 
+import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+import { ref, onMounted, useTemplateRef } from 'vue';
+import { Button, Dropdown, InputDialog } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import { TOKEN_TYPES } from '../constants.js';
+import Card from './Card.vue';
+import NewApiTokenDialog from './NewApiTokenDialog.vue';
+
+import ProfileModel from '../models/ProfileModel.js';
+import CloudronModel from '../models/CloudronModel.js';
+import TokensModel from '../models/TokensModel.js';
 
 const profileModel = ProfileModel.create(API_ORIGIN, localStorage.token);
 const cloudronModel = CloudronModel.create(API_ORIGIN, localStorage.token);
@@ -90,9 +130,11 @@ const tokensModel = TokensModel.create(API_ORIGIN, localStorage.token);
 
 const config = ref({}); // TODO what is this?
 const user = ref({});
-
 const inputDialog = useTemplateRef('inputDialog');
+const addApiTokenDialog = useTemplateRef('newApiTokenDialog');
 
+
+// Language selector
 const languages = ref([]);
 const language = ref('');
 async function onSelectLanguage(lang) {
@@ -105,6 +147,8 @@ async function onSelectLanguage(lang) {
   // TODO dynamically change lange instead of reloading
 }
 
+
+// Profile edits
 async function onChangeDisplayName(currentDisplayName) {
   const displayName = await inputDialog.value.prompt({
     message: t('profile.changeDisplayName.title'),
@@ -161,6 +205,19 @@ async function onChangeFallbackEmail(currentFallbackEmail) {
   user.value = await profileModel.get();
 }
 
+const avatarFileInput = useTemplateRef('avatarFileInput');
+async function onAvatarChanged() {
+  if (!avatarFileInput.value.files[0]) return;
+  await profileModel.setAvatar(avatarFileInput.value.files[0]);
+
+  // invalidate and refresh profile avatar url
+  const u = new URL(user.value.avatarUrl);
+  u.searchParams.set('ts', Date.now());
+  user.value.avatarUrl = u.toString();
+}
+
+
+// Password changes
 async function onPasswordChange() {
   const result = await inputDialog.value.prompt({
     message: [ t('profile.changePassword.newPassword'), t('profile.changePassword.newPasswordRepeat'), t('profile.changePassword.currentPassword') ],
@@ -184,26 +241,18 @@ async function onPasswordReset() {
   window.pankow.notify({ type: 'success', timeout: 5000, text: t('profile.passwordResetNotification.title') + '. ' + t('profile.passwordResetNotification.body', { email: user.value.fallbackEmail || user.value.email }) });
 }
 
-async function onLogout() {
-  await profileModel.logout();
-}
-
-const avatarFileInput = useTemplateRef('avatarFileInput');
-async function onAvatarChanged() {
-  if (!avatarFileInput.value.files[0]) return;
-  await profileModel.setAvatar(avatarFileInput.value.files[0]);
-
-  // invalidate and refresh profile avatar url
-  const u = new URL(user.value.avatarUrl);
-  u.searchParams.set('ts', Date.now());
-  user.value.avatarUrl = u.toString();
-}
 
 // Tokens
 const webadminTokens = ref([]);
 const cliTokens = ref([]);
 const apiTokens = ref([]);
 const revokeTokensBusy = ref(false);
+
+async function refreshApiTokens() {
+  const tokens = await tokensModel.list();
+  apiTokens.value = tokens.filter(function (c) { return c.clientId === TOKEN_TYPES.ID_SDK; });
+}
+
 async function onRevokeAllWebAndCliTokens() {
   revokeTokensBusy.value = true;
 
@@ -216,6 +265,23 @@ async function onRevokeAllWebAndCliTokens() {
   await profileModel.logout();
 }
 
+async function onRevokeToken(token) {
+  const yes = await inputDialog.value.confirm({
+    message: 'Really remove this token?', // TODO translate
+    modal: true,
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.yes'),
+    rejectLabel: t('main.dialog.no')
+  });
+
+  if (!yes) return;
+
+  await tokensModel.remove(token.id);
+  await refreshApiTokens();
+}
+
+
+// Init
 onMounted(async () => {
   user.value = await profileModel.get();
 
diff --git a/dashboard/src/models/TokensModel.js b/dashboard/src/models/TokensModel.js
index d384a3964..a70f6e554 100644
--- a/dashboard/src/models/TokensModel.js
+++ b/dashboard/src/models/TokensModel.js
@@ -19,6 +19,19 @@ function create(origin, accessToken) {
 
       return result.body.tokens;
     },
+    async add(name, scope) {
+      let error, result;
+      try {
+        result = await fetcher.post(`${origin}/api/v1/tokens`, { name, scope }, { access_token: accessToken });
+      } catch (e) {
+        error = e;
+      }
+
+      if (error) throw error;
+      if (result.status !== 201) throw result;
+
+      return result.body;
+    },
     async remove(id) {
       let error, result;
       try {
diff --git a/dashboard/src/style.css b/dashboard/src/style.css
index 72a9dfa06..91c388bb3 100644
--- a/dashboard/src/style.css
+++ b/dashboard/src/style.css
@@ -47,3 +47,9 @@ footer {
 footer > .p {
   margin: 4px;
 }
+
+.header-with-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
\ No newline at end of file