diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index b66869550..d94ecc85c 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -734,6 +734,12 @@
     "subject_identifier": "Subject Identifier",
     "create_oidc_user": "Create OpenID Connect User",
     "api_keys": "API Keys",
+    "api_key_comment": "API Key Comment",
+    "api_key_comment_updated": "API Key Comment Updated",
+    "edit_api_key_comment": "Edit API Key Comment",
+    "api_key_created_tooltip": "When the API Key was created",
+    "api_key_last_used_tooltip": "Approximate last usage of the API Key",
+    "remove_api_key": "Remove API Key",
     "members": "Members",
     "create_team": "Create Team",
     "delete_team": "Delete Team",
diff --git a/src/views/administration/accessmanagement/ApiKeyListGroupItem.vue b/src/views/administration/accessmanagement/ApiKeyListGroupItem.vue
new file mode 100644
index 000000000..8d7a984fc
--- /dev/null
+++ b/src/views/administration/accessmanagement/ApiKeyListGroupItem.vue
@@ -0,0 +1,110 @@
+<template>
+  <b-list-group-item class="flex-column align-items-start">
+    <div class="d-flex w-100 justify-content-between">
+      <span class="text-monospace">{{ apiKey.key }}</span>
+      <div class="d-flex">
+        <b-button
+          size="sm"
+          class="action-icon"
+          v-b-tooltip.hover
+          v-b-modal="`editApiKeyCommentModal-${keyId}`"
+          :title="$t('admin.edit_api_key_comment')"
+        >
+          <span class="fa fa-edit"></span>
+        </b-button>
+        <b-button
+          size="sm"
+          class="action-icon ml-3"
+          v-on:click="$emit('removeClicked')"
+          v-b-tooltip.hover
+          :title="$t('admin.remove_api_key')"
+        >
+          <span class="fa fa-trash-o"></span>
+        </b-button>
+        <edit-api-key-comment-modal
+          :key-id="this.keyId"
+          :api-key="this.apiKey"
+        />
+      </div>
+    </div>
+    <p class="mt-2 font-weight-light">
+      <em>{{ comment }}</em>
+    </p>
+    <hr />
+    <div class="d-flex w-100 justify-content-between text-muted">
+      <small :title="$t('admin.api_key_created_tooltip')"
+        >Created: {{ createdTimestamp }}</small
+      >
+      <small :title="$t('admin.api_key_last_used_tooltip')"
+        >Last Used: {{ lastUsedTimestamp }}</small
+      >
+    </div>
+  </b-list-group-item>
+</template>
+
+<script>
+import MurmurHash2 from 'imurmurhash';
+import common from '../../../shared/common';
+import EditApiKeyCommentModal from './EditApiKeyCommentModal.vue';
+
+export default {
+  props: {
+    apiKey: Object,
+    variant: String,
+    href: String,
+  },
+  components: {
+    EditApiKeyCommentModal,
+  },
+  computed: {
+    keyId: () => {
+      return MurmurHash2(this.apiKey.key).result();
+    },
+    comment: () => {
+      return this.apiKey.comment ? this.apiKey.comment : 'No comment';
+    },
+    createdTimestamp: () => {
+      return this.apiKey.created
+        ? common.formatTimestamp(this.apiKey.created, true)
+        : 'N/A';
+    },
+    lastUsedTimestamp: () => {
+      return this.apiKey.lastUsed
+        ? common.formatTimestamp(this.apiKey.lastUsed, true)
+        : 'N/A';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.list-group-item .form-group {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.action-icon {
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+}
+
+.action-icon .fa {
+  font-size: 1.2rem;
+}
+
+.action-icon .fa-edit {
+  color: var(--secondary);
+}
+
+.action-icon .fa-trash-o {
+  color: var(--danger);
+}
+
+.list-group-item:last-child {
+  margin-bottom: -1px;
+}
+</style>
diff --git a/src/views/administration/accessmanagement/EditApiKeyCommentModal.vue b/src/views/administration/accessmanagement/EditApiKeyCommentModal.vue
new file mode 100644
index 000000000..3132ba617
--- /dev/null
+++ b/src/views/administration/accessmanagement/EditApiKeyCommentModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <b-modal
+    :id="`editApiKeyCommentModal-${keyId}`"
+    size="md"
+    hide-header-close
+    no-stacking
+    :title="$t('admin.edit_api_key_comment')"
+  >
+    <b-input-group-form-input
+      id="name-input"
+      input-group-size="mb-3"
+      type="text"
+      v-model="comment"
+      lazy="true"
+      feedback="true"
+      autofocus="false"
+      :label="$t('admin.api_key_comment')"
+    />
+
+    <template v-slot:modal-footer="{ cancel }">
+      <b-button size="md" variant="secondary" @click="cancel()">{{
+        $t('message.close')
+      }}</b-button>
+      <b-button size="md" variant="primary" @click="updateComment()">{{
+        $t('message.update')
+      }}</b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import permissionsMixin from '../../../mixins/permissionsMixin';
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
+
+export default {
+  mixins: [permissionsMixin],
+  components: {
+    BInputGroupFormInput,
+  },
+  props: {
+    keyId: String,
+    apiKey: Object,
+  },
+  data() {
+    return {
+      comment: null,
+    };
+  },
+  mounted() {
+    this.comment = this.apiKey.comment;
+  },
+  methods: {
+    updateComment: () => {
+      this.axios
+        .post(
+          `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/key/${this.apiKey.key}/comment`,
+          this.comment,
+          {
+            headers: {
+              'Content-Type': 'text/plain',
+            },
+          },
+        )
+        .then((response) => {
+          this.apiKey.comment = response.data.comment;
+          this.$toastr.s(this.$t('admin.api_key_comment_updated'));
+          this.$root.$emit(
+            'bv::hide::modal',
+            `editApiKeyCommentModal-${this.keyId}`,
+          );
+        });
+    },
+    resetValues: () => {
+      this.comment = null;
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/Teams.vue b/src/views/administration/accessmanagement/Teams.vue
index 8f5f67fbb..4621bea89 100644
--- a/src/views/administration/accessmanagement/Teams.vue
+++ b/src/views/administration/accessmanagement/Teams.vue
@@ -26,6 +26,7 @@ import CreateTeamModal from './CreateTeamModal';
 import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
 import EventBus from '../../../shared/eventbus';
 import ActionableListGroupItem from '../../components/ActionableListGroupItem';
+import ApiKeyListGroupItem from './ApiKeyListGroupItem.vue';
 import SelectLdapGroupModal from './SelectLdapGroupModal';
 import SelectOidcGroupModal from './SelectOidcGroupModal';
 import SelectPermissionModal from './SelectPermissionModal';
@@ -122,7 +123,7 @@ export default {
                     <b-form-group :label="this.$t('admin.api_keys')">
                       <div class="list-group">
                         <span v-for="apiKey in apiKeys">
-                          <actionable-list-group-item :value="apiKey.key" :delete-icon="true" v-on:actionClicked="removeApiKey(apiKey)"/>
+                          <api-key-list-group-item :team-uuid="team.uuid" :api-key="apiKey" :delete-icon="true" v-on:removeClicked="removeApiKey(apiKey)"/>
                         </span>
                         <actionable-list-group-item :add-icon="true" v-on:actionClicked="createApiKey()"/>
                       </div>
@@ -180,6 +181,7 @@ export default {
             components: {
               cSwitch,
               ActionableListGroupItem,
+              ApiKeyListGroupItem,
               SelectLdapGroupModal,
               SelectOidcGroupModal,
               SelectPermissionModal,