diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 593061a45c6..82eb354d9e0 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -190,6 +190,8 @@ export default {
         class="title">
         <a
           :href="group.webUrl">{{fullPath}}</a>
+        as
+        <span class="access-type">{{group.permissions.humanGroupAccess}}</span>
       </div>
       <div
         class="description">{{group.description}}</div>
diff --git a/app/assets/javascripts/groups/stores/groups_store.js b/app/assets/javascripts/groups/stores/groups_store.js
index c8f2f161b16..67ee7d140ce 100644
--- a/app/assets/javascripts/groups/stores/groups_store.js
+++ b/app/assets/javascripts/groups/stores/groups_store.js
@@ -130,6 +130,9 @@ export default class GroupsStore {
       isOrphan: false,
       numberProjects: rawGroup.number_projects_with_delimiter,
       numberUsers: rawGroup.number_users_with_delimiter,
+      permissions: {
+        humanGroupAccess: rawGroup.permissions.human_group_access,
+      },
       subGroups: {},
     };
   }
diff --git a/spec/javascripts/groups/group_item_spec.js b/spec/javascripts/groups/group_item_spec.js
index 9d70f60cd57..73ea86e6756 100644
--- a/spec/javascripts/groups/group_item_spec.js
+++ b/spec/javascripts/groups/group_item_spec.js
@@ -38,6 +38,7 @@ describe('Groups Component', () => {
       expect(component.$el.querySelector('.group-visibility')).toBeDefined();
       expect(component.$el.querySelector('.avatar-container')).toBeDefined();
       expect(component.$el.querySelector('.title').textContent).toContain(group.name);
+      expect(component.$el.querySelector('.access-type').textContent).toContain(group.permissions.humanGroupAccess);
       expect(component.$el.querySelector('.description').textContent).toContain(group.description);
       expect(component.$el.querySelector('.edit-group')).toBeDefined();
       expect(component.$el.querySelector('.leave-group')).toBeDefined();
diff --git a/spec/javascripts/groups/mock_data.js b/spec/javascripts/groups/mock_data.js
index 9951abcc2dc..1c0ec7a97d0 100644
--- a/spec/javascripts/groups/mock_data.js
+++ b/spec/javascripts/groups/mock_data.js
@@ -15,7 +15,7 @@ const group1 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };
 
@@ -37,7 +37,7 @@ const group14 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 30,
+    human_group_access: 'Master',
   },
 };
 
@@ -58,7 +58,7 @@ const group2 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };
 
@@ -79,7 +79,7 @@ const group21 = {
   number_users_with_delimiter: '1',
   has_subgroups: true,
   permissions: {
-    group_access: 50,
+    human_group_access: 'Master',
   },
 };