diff --git a/app/assets/javascripts/token_access/components/inbound_token_access.vue b/app/assets/javascripts/token_access/components/inbound_token_access.vue
index a6c2b08735f1860b2cf94ef51385d563da8c51be..29dbc49f835aed0b6000f51ffa5d961e28fa9df6 100644
--- a/app/assets/javascripts/token_access/components/inbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/inbound_token_access.vue
@@ -9,9 +9,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlToggle,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import { __, s__ } from '~/locale';
+import { __, s__, n__, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { TYPENAME_GROUP } from '~/graphql_shared/constants';
 import inboundAddGroupOrProjectCIJobTokenScope from '../graphql/mutations/inbound_add_group_or_project_ci_job_token_scope.mutation.graphql';
@@ -41,17 +42,6 @@ export default {
     projectsFetchError: __('There was a problem fetching the projects'),
     scopeFetchError: __('There was a problem fetching the job token scope value'),
   },
-  fields: [
-    {
-      key: 'fullPath',
-      label: '',
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'gl-text-right',
-    },
-  ],
   components: {
     GlAlert,
     GlButton,
@@ -64,6 +54,9 @@ export default {
     GlToggle,
     TokenAccessTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   inject: {
     fullPath: {
       default: '',
@@ -92,8 +85,13 @@ export default {
         };
       },
       update({ project }) {
-        this.projects = project?.ciJobTokenScope?.inboundAllowlist?.nodes ?? [];
-        this.groups = project?.ciJobTokenScope?.groupsAllowlist?.nodes ?? [];
+        const projects = project?.ciJobTokenScope?.inboundAllowlist?.nodes ?? [];
+        const groups = project?.ciJobTokenScope?.groupsAllowlist?.nodes ?? [];
+
+        this.projectCount = projects.length;
+        this.groupCount = groups.length;
+
+        return [...groups, ...projects];
       },
       error() {
         createAlert({ message: this.$options.i18n.projectsFetchError });
@@ -103,19 +101,36 @@ export default {
   data() {
     return {
       inboundJobTokenScopeEnabled: null,
-      targetPath: '',
-      projects: [],
-      groups: [],
+      groupsAndProjectsWithAccess: [],
+      groupOrProjectPath: '',
+      projectCount: 0,
+      groupCount: 0,
       isAddFormVisible: false,
     };
   },
   computed: {
-    isTargetPathEmpty() {
-      return this.targetPath === '';
+    isGroupOrProjectPathEmpty() {
+      return this.groupOrProjectPath === '';
     },
     ciJobTokenHelpPage() {
       return helpPagePath('ci/jobs/ci_job_token#control-job-token-access-to-your-project');
     },
+    groupCountTooltip() {
+      return sprintf(
+        n__('%{count} group has access', '%{count} groups have access', this.groupCount),
+        {
+          count: this.groupCount,
+        },
+      );
+    },
+    projectCountTooltip() {
+      return sprintf(
+        n__('%{count} project has access', '%{count} projects have access', this.projectCount),
+        {
+          count: this.projectCount,
+        },
+      );
+    },
   },
   methods: {
     async updateCIJobTokenScope() {
@@ -152,7 +167,7 @@ export default {
           mutation: inboundAddGroupOrProjectCIJobTokenScope,
           variables: {
             projectPath: this.fullPath,
-            targetPath: this.targetPath,
+            targetPath: this.groupOrProjectPath,
           },
         });
 
@@ -162,7 +177,7 @@ export default {
       } catch (error) {
         createAlert({ message: error.message });
       } finally {
-        this.clearTargetPath();
+        this.clearGroupOrProjectPath();
         this.getGroupsAndProjects();
       }
     },
@@ -204,8 +219,8 @@ export default {
         this.getGroupsAndProjects();
       }
     },
-    clearTargetPath() {
-      this.targetPath = '';
+    clearGroupOrProjectPath() {
+      this.groupOrProjectPath = '';
       this.isAddFormVisible = false;
     },
     getGroupsAndProjects() {
@@ -262,16 +277,28 @@ export default {
           body-class="gl-new-card-body gl-px-0"
         >
           <template #header>
-            <div class="gl-new-card-title-wrapper">
-              <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5>
-              <span class="gl-new-card-count">
-                <gl-icon name="group" class="gl-mr-2" />
-                {{ groups.length }}
-              </span>
-              <span class="gl-new-card-count">
-                <gl-icon name="project" class="gl-mr-2" />
-                {{ projects.length }}
-              </span>
+            <div class="gl-new-card-title-wrapper gl-flex-direction-column gl-flex-wrap">
+              <div class="gl-new-card-title gl-items-center">
+                <h5 class="gl-my-0">{{ $options.i18n.cardHeaderTitle }}</h5>
+                <span
+                  v-gl-tooltip
+                  :title="groupCountTooltip"
+                  class="gl-new-card-count"
+                  data-testid="group-count"
+                >
+                  <gl-icon name="group" class="gl-mr-2" />
+                  {{ groupCount }}
+                </span>
+                <span
+                  v-gl-tooltip
+                  :title="projectCountTooltip"
+                  class="gl-new-card-count"
+                  data-testid="project-count"
+                >
+                  <gl-icon name="project" class="gl-mr-2" />
+                  {{ projectCount }}
+                </span>
+              </div>
             </div>
             <div class="gl-new-card-actions">
               <gl-button
@@ -287,35 +314,24 @@ export default {
           <div v-if="isAddFormVisible" class="gl-new-card-add-form gl-m-3">
             <h4 class="gl-mt-0">{{ $options.i18n.addGroupOrProject }}</h4>
             <gl-form-input
-              v-model="targetPath"
+              v-model="groupOrProjectPath"
               :placeholder="$options.i18n.addProjectPlaceholder"
             />
             <div class="gl-display-flex gl-mt-5">
               <gl-button
                 variant="confirm"
-                :disabled="isTargetPathEmpty"
+                :disabled="isGroupOrProjectPathEmpty"
                 class="gl-mr-3"
                 data-testid="add-project-btn"
                 @click="addGroupOrProject"
               >
                 {{ $options.i18n.add }}
               </gl-button>
-              <gl-button @click="clearTargetPath">{{ $options.i18n.cancel }}</gl-button>
+              <gl-button @click="clearGroupOrProjectPath">{{ $options.i18n.cancel }}</gl-button>
             </div>
           </div>
 
-          <token-access-table
-            :is-group="true"
-            :items="groups"
-            :table-fields="$options.fields"
-            @removeItem="removeItem"
-          />
-
-          <token-access-table
-            :items="projects"
-            :table-fields="$options.fields"
-            @removeItem="removeItem"
-          />
+          <token-access-table :items="groupsAndProjectsWithAccess" @removeItem="removeItem" />
         </gl-card>
       </div>
     </template>
diff --git a/app/assets/javascripts/token_access/components/outbound_token_access.vue b/app/assets/javascripts/token_access/components/outbound_token_access.vue
index aad46e730d83890b53214c8b82f8f43208c53f75..c3d08b884fee164648620763b8b1c012520f7881 100644
--- a/app/assets/javascripts/token_access/components/outbound_token_access.vue
+++ b/app/assets/javascripts/token_access/components/outbound_token_access.vue
@@ -8,9 +8,10 @@ import {
   GlLoadingIcon,
   GlSprintf,
   GlToggle,
+  GlTooltipDirective,
 } from '@gitlab/ui';
 import { createAlert } from '~/alert';
-import { __, s__ } from '~/locale';
+import { __, s__, n__, sprintf } from '~/locale';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import addProjectCIJobTokenScopeMutation from '../graphql/mutations/add_project_ci_job_token_scope.mutation.graphql';
@@ -46,17 +47,6 @@ export default {
   deprecationDocumentationLink: helpPagePath('ci/jobs/ci_job_token', {
     anchor: 'limit-your-projects-job-token-access',
   }),
-  fields: [
-    {
-      key: 'fullPath',
-      label: __('Project that can be accessed'),
-    },
-    {
-      key: 'actions',
-      label: '',
-      tdClass: 'gl-text-right',
-    },
-  ],
   components: {
     GlAlert,
     GlButton,
@@ -68,6 +58,9 @@ export default {
     GlToggle,
     TokenAccessTable,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   mixins: [glFeatureFlagMixin()],
   inject: {
     fullPath: {
@@ -121,6 +114,14 @@ export default {
     disableTokenToggle() {
       return !this.jobTokenScopeEnabled;
     },
+    projectCountTooltip() {
+      return sprintf(
+        n__('%{count} project has access', '%{count} projects have access', this.projects.length),
+        {
+          count: this.projects.length,
+        },
+      );
+    },
   },
   methods: {
     async updateCIJobTokenScope() {
@@ -265,13 +266,13 @@ export default {
       <div>
         <gl-card
           class="gl-new-card"
-          header-class="gl-new-card-header"
+          header-class="gl-new-card-header gl-border-b-0"
           body-class="gl-new-card-body gl-px-0"
         >
           <template #header>
             <div class="gl-new-card-title-wrapper">
               <h5 class="gl-new-card-title">{{ $options.i18n.cardHeaderTitle }}</h5>
-              <span class="gl-new-card-count">
+              <span v-gl-tooltip :title="projectCountTooltip" class="gl-new-card-count">
                 <gl-icon name="project" class="gl-mr-2" />
                 {{ projects.length }}
               </span>
@@ -280,11 +281,7 @@ export default {
               <gl-button size="small" disabled>{{ $options.i18n.addProject }}</gl-button>
             </div>
           </template>
-          <token-access-table
-            :items="projects"
-            :table-fields="$options.fields"
-            @removeItem="removeProject"
-          />
+          <token-access-table :items="projects" @removeItem="removeProject" />
         </gl-card>
       </div>
     </template>
diff --git a/app/assets/javascripts/token_access/components/token_access_table.vue b/app/assets/javascripts/token_access/components/token_access_table.vue
index 700c6b9ef3958131e70b36bd74b17fea167d04c5..9f619d32debf6404b8f35fbe3e032627bd7a41a7 100644
--- a/app/assets/javascripts/token_access/components/token_access_table.vue
+++ b/app/assets/javascripts/token_access/components/token_access_table.vue
@@ -1,11 +1,27 @@
 <script>
-import { GlButton, GlTableLite } from '@gitlab/ui';
-import { sprintf, s__ } from '~/locale';
+import { GlButton, GlIcon, GlLink, GlTableLite } from '@gitlab/ui';
+import { TYPENAME_GROUP } from '~/graphql_shared/constants';
+import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
 
 export default {
+  fields: [
+    {
+      key: 'fullPath',
+      label: '',
+      tdClass: 'gl-w-3/4',
+    },
+    {
+      key: 'actions',
+      label: '',
+      tdClass: 'gl-w-1/4 gl-text-right',
+    },
+  ],
   components: {
     GlButton,
+    GlIcon,
+    GlLink,
     GlTableLite,
+    ProjectAvatar,
   },
   inject: {
     fullPath: {
@@ -22,19 +38,11 @@ export default {
       type: Array,
       required: true,
     },
-    tableFields: {
-      type: Array,
-      required: true,
-    },
   },
-  computed: {
-    emptyText() {
-      return sprintf(s__('CI/CD|No %{itemType}s have been added to the scope'), {
-        itemType: this.itemType,
-      });
-    },
-    itemType() {
-      return this.isGroup ? 'group' : 'project';
+  methods: {
+    itemType(item) {
+      // eslint-disable-next-line no-underscore-dangle
+      return item.__typename === TYPENAME_GROUP ? 'group' : 'project';
     },
   },
 };
@@ -42,16 +50,34 @@ export default {
 <template>
   <gl-table-lite
     :items="items"
-    :fields="tableFields"
-    :tbody-tr-attr="{ 'data-testid': `${itemType}s-token-table-row` }"
-    :empty-text="emptyText"
-    show-empty
-    stacked="sm"
+    :fields="$options.fields"
+    :tbody-tr-attr="{ 'data-testid': 'token-access-table-row' }"
     thead-class="gl-display-none"
+    class="gl-mb-0"
     fixed
   >
     <template #cell(fullPath)="{ item }">
-      <span :data-testid="`token-access-${itemType}-name`">{{ item.fullPath }}</span>
+      <div class="gl-inline-flex gl-items-center">
+        <gl-icon
+          :name="itemType(item)"
+          class="gl-mr-3 gl-flex-shrink-0"
+          :data-testid="`token-access-${itemType(item)}-icon`"
+        />
+        <project-avatar
+          :alt="item.name"
+          :project-avatar-url="item.avatarUrl"
+          :project-id="item.id"
+          :project-name="item.name"
+          class="gl-mr-3"
+          :data-testid="`token-access-${itemType(item)}-avatar`"
+        />
+        <gl-link
+          class="gl-text-gray-900"
+          :href="`/${item.fullPath}`"
+          :data-testid="`token-access-${itemType(item)}-name`"
+          >{{ item.fullPath }}</gl-link
+        >
+      </div>
     </template>
 
     <template #cell(actions)="{ item }">
diff --git a/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql b/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
index 641642ffc7677b2f1b3c5f17810a48c9a1610b2d..c42a5590f449ca15bc50c6fadf1941ddec4b9575 100644
--- a/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
+++ b/app/assets/javascripts/token_access/graphql/queries/inbound_get_groups_and_projects_with_ci_job_token_scope.query.graphql
@@ -7,6 +7,7 @@ query inboundGetGroupsAndProjectsWithCIJobTokenScope($fullPath: ID!) {
           id
           name
           fullPath
+          avatarUrl
         }
       }
       inboundAllowlist {
@@ -14,6 +15,7 @@ query inboundGetGroupsAndProjectsWithCIJobTokenScope($fullPath: ID!) {
           id
           name
           fullPath
+          avatarUrl
         }
       }
     }
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 3a812f5e8146931f7d3c42cf658118799f80bc74..5c74320ed1603d13731e85e8bb09464f59880b24 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -675,6 +675,11 @@ msgid_plural "%{count} groups"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} group has access"
+msgid_plural "%{count} groups have access"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{count} issue"
 msgid_plural "%{count} issues"
 msgstr[0] ""
@@ -718,6 +723,11 @@ msgid_plural "%{count} projects"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{count} project has access"
+msgid_plural "%{count} projects have access"
+msgstr[0] ""
+msgstr[1] ""
+
 msgid "%{count} related %{pluralized_subject}: %{links}"
 msgstr ""
 
@@ -9953,9 +9963,6 @@ msgstr ""
 msgid "CI/CD limits"
 msgstr ""
 
-msgid "CI/CD|No %{itemType}s have been added to the scope"
-msgstr ""
-
 msgid "CICDAnalytics|%{percent}%{percentSymbol}"
 msgstr ""
 
@@ -40725,9 +40732,6 @@ msgstr ""
 msgid "Project slug"
 msgstr ""
 
-msgid "Project that can be accessed"
-msgstr ""
-
 msgid "Project uploads"
 msgstr ""
 
diff --git a/spec/frontend/token_access/inbound_token_access_spec.js b/spec/frontend/token_access/inbound_token_access_spec.js
index a7b0a9820b502fa97333639f8166528dc8fb5f52..045156075c9d6826bab42afeab8028c35bc6904c 100644
--- a/spec/frontend/token_access/inbound_token_access_spec.js
+++ b/spec/frontend/token_access/inbound_token_access_spec.js
@@ -16,6 +16,7 @@ import {
   inboundJobTokenScopeEnabledResponse,
   inboundJobTokenScopeDisabledResponse,
   inboundGroupsAndProjectsWithScopeResponse,
+  inboundGroupsAndProjectsWithScopeResponseWithAddedItem,
   inboundAddGroupOrProjectSuccessResponse,
   inboundRemoveGroupSuccess,
   inboundRemoveProjectSuccess,
@@ -232,7 +233,7 @@ describe('TokenAccess component', () => {
     type         | testPath
     ${'group'}   | ${testGroupPath}
     ${'project'} | ${testProjectPath}
-  `('add $type', ({ testPath }) => {
+  `('add $type', ({ type, testPath }) => {
     it(`calls add group or project mutation`, async () => {
       createComponent(
         [
@@ -261,6 +262,44 @@ describe('TokenAccess component', () => {
       });
     });
 
+    it(`increments the ${type} count`, async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            jest
+              .fn()
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponse)
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponseWithAddedItem),
+          ],
+          [
+            inboundAddGroupOrProjectCIJobTokenScopeMutation,
+            inboundAddGroupOrProjectSuccessResponseHandler,
+          ],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('1');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `1 ${type} has access`,
+      );
+
+      await findToggleFormBtn().trigger('click');
+      await findProjectInput().vm.$emit('input', testPath);
+      findAddProjectBtn().trigger('click');
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('2');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `2 ${type}s have access`,
+      );
+    });
+
     it('add group or project handles error correctly', async () => {
       createComponent(
         [
@@ -343,6 +382,39 @@ describe('TokenAccess component', () => {
       });
     });
 
+    it(`decrements the ${type} count`, async () => {
+      createComponent(
+        [
+          [inboundGetCIJobTokenScopeQuery, inboundJobTokenScopeEnabledResponseHandler],
+          [
+            inboundGetGroupsAndProjectsWithCIJobTokenScopeQuery,
+            jest
+              .fn()
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponseWithAddedItem)
+              .mockResolvedValueOnce(inboundGroupsAndProjectsWithScopeResponse),
+          ],
+          [mutation, handler],
+        ],
+        mountExtended,
+      );
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('2');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `2 ${type}s have access`,
+      );
+
+      findRemoveProjectBtnAt(index).trigger('click');
+
+      await waitForPromises();
+
+      expect(wrapper.findByTestId(`${type}-count`).text()).toBe('1');
+      expect(wrapper.findByTestId(`${type}-count`).attributes('title')).toBe(
+        `1 ${type} has access`,
+      );
+    });
+
     it(`remove ${type} handles error correctly`, async () => {
       createComponent(
         [
diff --git a/spec/frontend/token_access/mock_data.js b/spec/frontend/token_access/mock_data.js
index a3521f49eb7d6dd3d49737d6e35507415d1f4119..ab8f6d63c591522a6562590d5992c493f77ef195 100644
--- a/spec/frontend/token_access/mock_data.js
+++ b/spec/frontend/token_access/mock_data.js
@@ -1,7 +1,7 @@
 export const enabledJobTokenScope = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         jobTokenScopeEnabled: true,
         __typename: 'ProjectCiCdSetting',
@@ -14,7 +14,7 @@ export const enabledJobTokenScope = {
 export const disabledJobTokenScope = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         jobTokenScopeEnabled: false,
         __typename: 'ProjectCiCdSetting',
@@ -28,14 +28,14 @@ export const projectsWithScope = {
   data: {
     project: {
       __typename: 'Project',
-      id: '1',
+      id: 1,
       ciJobTokenScope: {
         __typename: 'CiJobTokenScopeType',
         projects: {
           __typename: 'ProjectConnection',
           nodes: [
             {
-              id: '2',
+              id: 2,
               fullPath: 'root/332268-test',
               name: 'root/332268-test',
               namespace: {
@@ -141,7 +141,7 @@ export const mockFields = [
 export const inboundJobTokenScopeEnabledResponse = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         inboundJobTokenScopeEnabled: true,
         __typename: 'ProjectCiCdSetting',
@@ -154,7 +154,7 @@ export const inboundJobTokenScopeEnabledResponse = {
 export const inboundJobTokenScopeDisabledResponse = {
   data: {
     project: {
-      id: '1',
+      id: 1,
       ciCdSettings: {
         inboundJobTokenScopeEnabled: false,
         __typename: 'ProjectCiCdSetting',
@@ -168,7 +168,7 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
   data: {
     project: {
       __typename: 'Project',
-      id: '1',
+      id: 1,
       ciJobTokenScope: {
         __typename: 'CiJobTokenScopeType',
         inboundAllowlist: {
@@ -179,7 +179,7 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
               fullPath: 'root/ci-project',
               id: 'gid://gitlab/Project/23',
               name: 'ci-project',
-              namespace: { id: 'gid://gitlab/Namespaces::UserNamespace/1', fullPath: 'root' },
+              avatarUrl: '',
             },
           ],
         },
@@ -191,6 +191,43 @@ export const inboundGroupsAndProjectsWithScopeResponse = {
               fullPath: 'root/ci-group',
               id: 'gid://gitlab/Group/45',
               name: 'ci-group',
+              avatarUrl: '',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const inboundGroupsAndProjectsWithScopeResponseWithAddedItem = {
+  data: {
+    project: {
+      ...inboundGroupsAndProjectsWithScopeResponse.data.project,
+      ciJobTokenScope: {
+        inboundAllowlist: {
+          nodes: [
+            ...inboundGroupsAndProjectsWithScopeResponse.data.project.ciJobTokenScope
+              .inboundAllowlist.nodes,
+            {
+              __typename: 'Project',
+              fullPath: 'root/test',
+              id: 'gid://gitlab/Project/25',
+              name: 'test',
+              avatarUrl: '',
+            },
+          ],
+        },
+        groupsAllowlist: {
+          nodes: [
+            ...inboundGroupsAndProjectsWithScopeResponse.data.project.ciJobTokenScope
+              .groupsAllowlist.nodes,
+            {
+              __typename: 'Group',
+              fullPath: 'gitlab-org',
+              id: 'gid://gitlab/Group/49',
+              name: 'gitlab-org',
+              avatarUrl: '',
             },
           ],
         },
diff --git a/spec/frontend/token_access/token_access_table_spec.js b/spec/frontend/token_access/token_access_table_spec.js
index df5c19028b30e8abb250973406910bacf2010de8..bafc336e5f2bf5b94d082e16ddeb87ea3fcb5fce 100644
--- a/spec/frontend/token_access/token_access_table_spec.js
+++ b/spec/frontend/token_access/token_access_table_spec.js
@@ -19,7 +19,9 @@ describe('Token access table', () => {
 
   const findTable = () => wrapper.findComponent(GlTableLite);
   const findDeleteButton = () => wrapper.findComponent(GlButton);
-  const findAllTableRows = (type) => wrapper.findAllByTestId(`${type}s-token-table-row`);
+  const findAllTableRows = () => wrapper.findAllByTestId('token-access-table-row');
+  const findIcon = (type) => wrapper.findByTestId(`token-access-${type}-icon`);
+  const findProjectAvatar = (type) => wrapper.findByTestId(`token-access-${type}-avatar`);
   const findName = (type) => wrapper.findByTestId(`token-access-${type}-name`);
 
   describe.each`
@@ -49,8 +51,14 @@ describe('Token access table', () => {
       expect(wrapper.emitted('removeItem')).toEqual([[items[0]]]);
     });
 
-    it('displays fullpath', () => {
+    it('displays icon and avatar', () => {
+      expect(findIcon(type).props('name')).toBe(type);
+      expect(findProjectAvatar(type).props('projectName')).toBe(items[0].name);
+    });
+
+    it('displays fullpath as a link to the project', () => {
       expect(findName(type).text()).toBe(items[0].fullPath);
+      expect(findName(type).attributes('href')).toBe(`/${items[0].fullPath}`);
     });
   });
 });