diff --git a/app/assets/javascripts/profile/components/user_achievements.vue b/app/assets/javascripts/profile/components/user_achievements.vue
index f317f7871f83fc959c106dcf3662bbccce961f0f..e86d807d87f0ad1fd740e54e07f3383cfc4f9cbb 100644
--- a/app/assets/javascripts/profile/components/user_achievements.vue
+++ b/app/assets/javascripts/profile/components/user_achievements.vue
@@ -7,6 +7,8 @@ import { TYPENAME_USER } from '~/graphql_shared/constants';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import getUserAchievements from './graphql/get_user_achievements.query.graphql';
 
+export const MAX_VISIBLE_ACHIEVEMENTS = 7;
+
 export default {
   name: 'UserAchievements',
   components: { GlAvatar, GlBadge, GlPopover, GlSprintf },
@@ -36,7 +38,7 @@ export default {
   methods: {
     processNodes(nodes) {
       return Object.entries(groupBy(nodes, 'achievement.id'))
-        .slice(0, 3)
+        .slice(0, MAX_VISIBLE_ACHIEVEMENTS)
         .map(([id, values]) => {
           const {
             achievement: { name, avatarUrl, description, namespace },
diff --git a/spec/frontend/fixtures/users.rb b/spec/frontend/fixtures/users.rb
index 4bdf916008338609708b5e45df56e7efd1211168..70332a0485ea5c3dbe55edf5f0322e54942ded89 100644
--- a/spec/frontend/fixtures/users.rb
+++ b/spec/frontend/fixtures/users.rb
@@ -56,9 +56,8 @@
     context 'for user achievements' do
       let_it_be(:group) { create(:group, :public) }
       let_it_be(:private_group) { create(:group, :private) }
-      let_it_be(:achievement1) { create(:achievement, namespace: group, name: 'Multiple') }
-      let_it_be(:achievement2) { create(:achievement, namespace: group) }
-      let_it_be(:achievement3) { create(:achievement, namespace: group) }
+      let_it_be(:multiple_achievement) { create(:achievement, namespace: group, name: 'Multiple') }
+      let_it_be(:achievements) { create_list(:achievement, 6, namespace: group) }
       let_it_be(:achievement_from_private_group) { create(:achievement, namespace: private_group) }
       let_it_be(:achievement_with_avatar_and_description) do
         create(:achievement,
@@ -89,7 +88,7 @@
       end
 
       it "graphql/get_user_achievements_without_avatar_or_description_response.json" do
-        create(:user_achievement, user: user, achievement: achievement1)
+        create(:user_achievement, user: user, achievement: multiple_achievement)
 
         post_graphql(query, current_user: user, variables: { id: user.to_global_id })
 
@@ -105,10 +104,11 @@
       end
 
       it "graphql/get_user_achievements_long_response.json" do
-        [achievement1, achievement2, achievement3, achievement_with_avatar_and_description].each do |achievement|
+        [
+          multiple_achievement, multiple_achievement, achievement_with_avatar_and_description, *achievements
+        ].each do |achievement|
           create(:user_achievement, user: user, achievement: achievement)
         end
-        create(:user_achievement, user: user, achievement: achievement1)
 
         post_graphql(query, current_user: user, variables: { id: user.to_global_id })
 
diff --git a/spec/frontend/profile/components/user_achievements_spec.js b/spec/frontend/profile/components/user_achievements_spec.js
index 5743c8575d50299010548d37359905487f0ebb50..ca94e8eb6851fbd422c5009b57210ea90dc4d6cf 100644
--- a/spec/frontend/profile/components/user_achievements_spec.js
+++ b/spec/frontend/profile/components/user_achievements_spec.js
@@ -8,7 +8,9 @@ import getUserAchievementsPrivateGroupResponse from 'test_fixtures/graphql/get_u
 import getUserAchievementsNoAvatarResponse from 'test_fixtures/graphql/get_user_achievements_without_avatar_or_description_response.json';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import UserAchievements from '~/profile/components/user_achievements.vue';
+import UserAchievements, {
+  MAX_VISIBLE_ACHIEVEMENTS,
+} from '~/profile/components/user_achievements.vue';
 import getUserAchievements from '~/profile/components//graphql/get_user_achievements.query.graphql';
 import { getTimeago, timeagoLanguageCode } from '~/lib/utils/datetime_utility';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
@@ -56,12 +58,15 @@ describe('UserAchievements', () => {
     expect(wrapper.findAllByTestId('user-achievement').length).toBe(0);
   });
 
-  it('only renders 3 achievements when more are present', async () => {
+  it(`only renders ${MAX_VISIBLE_ACHIEVEMENTS} achievements when more are present`, async () => {
     createComponent({ queryHandler: jest.fn().mockResolvedValue(getUserAchievementsLongResponse) });
 
     await waitForPromises();
 
-    expect(wrapper.findAllByTestId('user-achievement').length).toBe(3);
+    expect(getUserAchievementsLongResponse.data.user.userAchievements.nodes.length).toBeGreaterThan(
+      MAX_VISIBLE_ACHIEVEMENTS,
+    );
+    expect(wrapper.findAllByTestId('user-achievement').length).toBe(MAX_VISIBLE_ACHIEVEMENTS);
   });
 
   it('renders count for achievements awarded more than once', async () => {