diff --git a/app/assets/javascripts/api/user_api.js b/app/assets/javascripts/api/user_api.js
index 09995fad6288363ff2ca79987146d8b78963975a..c743b18d572a43424fd24869ea2ef1346b8d52cf 100644
--- a/app/assets/javascripts/api/user_api.js
+++ b/app/assets/javascripts/api/user_api.js
@@ -10,6 +10,8 @@ const USER_PATH = '/api/:version/users/:id';
 const USER_STATUS_PATH = '/api/:version/users/:id/status';
 const USER_PROJECTS_PATH = '/api/:version/users/:id/projects';
 const USER_POST_STATUS_PATH = '/api/:version/user/status';
+const USER_FOLLOW_PATH = '/api/:version/users/:id/follow';
+const USER_UNFOLLOW_PATH = '/api/:version/users/:id/unfollow';
 
 export function getUsers(query, options) {
   const url = buildApiUrl(USERS_PATH);
@@ -69,3 +71,13 @@ export function updateUserStatus({ emoji, message, availability, clearStatusAfte
     clear_status_after: clearStatusAfter,
   });
 }
+
+export function followUser(userId) {
+  const url = buildApiUrl(USER_FOLLOW_PATH).replace(':id', encodeURIComponent(userId));
+  return axios.post(url);
+}
+
+export function unfollowUser(userId) {
+  const url = buildApiUrl(USER_UNFOLLOW_PATH).replace(':id', encodeURIComponent(userId));
+  return axios.post(url);
+}
diff --git a/app/assets/javascripts/lib/utils/users_cache.js b/app/assets/javascripts/lib/utils/users_cache.js
index 54f69ef8e1b407d1fb471ad9a3a8d899e82f2782..bd000bb26febf43a6be9220192230fc1e71a034f 100644
--- a/app/assets/javascripts/lib/utils/users_cache.js
+++ b/app/assets/javascripts/lib/utils/users_cache.js
@@ -35,6 +35,17 @@ class UsersCache extends Cache {
     // missing catch is intentional, error handling depends on use case
   }
 
+  updateById(userId, data) {
+    if (!this.hasData(userId)) {
+      return;
+    }
+
+    this.internalStorage[userId] = {
+      ...this.internalStorage[userId],
+      ...data,
+    };
+  }
+
   retrieveStatusById(userId) {
     if (this.hasData(userId) && this.get(userId).status) {
       return Promise.resolve(this.get(userId).status);
diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js
index 4413be384e50e8829e9d3fb269a9dec35392f9ad..438ae2bc1bc4750556d7400243188a898bc72ae1 100644
--- a/app/assets/javascripts/user_popovers.js
+++ b/app/assets/javascripts/user_popovers.js
@@ -32,6 +32,7 @@ const populateUserInfo = (user) => {
     ([userData, status]) => {
       if (userData) {
         Object.assign(user, {
+          id: userId,
           avatarUrl: userData.avatar_url,
           bot: userData.bot,
           username: userData.username,
@@ -42,6 +43,7 @@ const populateUserInfo = (user) => {
           websiteUrl: userData.website_url,
           pronouns: userData.pronouns,
           localTime: userData.local_time,
+          isFollowed: userData.is_followed,
           loaded: true,
         });
       }
@@ -97,6 +99,7 @@ export default function addPopovers(elements = document.querySelectorAll('.js-us
         bio: null,
         workInformation: null,
         status: null,
+        isFollowed: false,
         loaded: false,
       };
       const renderedPopover = new UserPopoverComponent({
@@ -107,6 +110,18 @@ export default function addPopovers(elements = document.querySelectorAll('.js-us
         },
       });
 
+      const { userId } = el.dataset;
+
+      renderedPopover.$on('follow', () => {
+        UsersCache.updateById(userId, { is_followed: true });
+        user.isFollowed = true;
+      });
+
+      renderedPopover.$on('unfollow', () => {
+        UsersCache.updateById(userId, { is_followed: false });
+        user.isFollowed = false;
+      });
+
       initializedPopovers.set(el, renderedPopover);
 
       renderedPopover.$mount();
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index 2c09fa7123041eafd7c3ab6bec7d28067f953eac..01a0b134b7fdfa8613416be2026f63160ecf66b0 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -6,9 +6,13 @@ import {
   GlIcon,
   GlSafeHtmlDirective,
   GlSprintf,
+  GlButton,
 } from '@gitlab/ui';
+import { __ } from '~/locale';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import { glEmojiTag } from '~/emoji';
+import createFlash from '~/flash';
+import { followUser, unfollowUser } from '~/rest_api';
 import UserAvatarImage from '../user_avatar/user_avatar_image.vue';
 
 const MAX_SKELETON_LINES = 4;
@@ -24,6 +28,7 @@ export default {
     UserAvatarImage,
     UserNameWithStatus,
     GlSprintf,
+    GlButton,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -44,6 +49,11 @@ export default {
       default: 'top',
     },
   },
+  data() {
+    return {
+      toggleFollowLoading: false,
+    };
+  },
   computed: {
     statusHtml() {
       if (!this.user.status) {
@@ -64,6 +74,69 @@ export default {
     availabilityStatus() {
       return this.user?.status?.availability || '';
     },
+    isNotCurrentUser() {
+      return !this.userIsLoading && this.user.username !== gon.current_username;
+    },
+    shouldRenderToggleFollowButton() {
+      return (
+        /*
+         * We're using `gon` to access feature flag because this component
+         * gets initialized dynamically multiple times from `user_popovers.js`
+         * for each user link present on the page, and using `glFeatureFlagMixin()`
+         * doesn't inject available feature flags into the component during init.
+         */
+        gon?.features?.followInUserPopover &&
+        this.isNotCurrentUser &&
+        typeof this.user?.isFollowed !== 'undefined'
+      );
+    },
+    toggleFollowButtonText() {
+      if (this.toggleFollowLoading) return null;
+
+      return this.user?.isFollowed ? __('Unfollow') : __('Follow');
+    },
+    toggleFollowButtonVariant() {
+      return this.user?.isFollowed ? 'default' : 'confirm';
+    },
+  },
+  methods: {
+    async toggleFollow() {
+      if (this.user.isFollowed) {
+        this.unfollow();
+      } else {
+        this.follow();
+      }
+    },
+    async follow() {
+      this.toggleFollowLoading = true;
+      try {
+        await followUser(this.user.id);
+        this.$emit('follow');
+      } catch (error) {
+        createFlash({
+          message: __('An error occurred while trying to follow this user, please try again.'),
+          error,
+          captureError: true,
+        });
+      } finally {
+        this.toggleFollowLoading = false;
+      }
+    },
+    async unfollow() {
+      this.toggleFollowLoading = true;
+      try {
+        await unfollowUser(this.user.id);
+        this.$emit('unfollow');
+      } catch (error) {
+        createFlash({
+          message: __('An error occurred while trying to unfollow this user, please try again.'),
+          error,
+          captureError: true,
+        });
+      } finally {
+        this.toggleFollowLoading = false;
+      }
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji'] },
 };
@@ -73,10 +146,22 @@ export default {
   <!-- 200ms delay so not every mouseover triggers Popover -->
   <gl-popover :target="target" :delay="200" :placement="placement" boundary="viewport">
     <div class="gl-p-3 gl-line-height-normal gl-display-flex" data-testid="user-popover">
-      <div class="gl-p-2 flex-shrink-1">
+      <div
+        class="gl-p-2 flex-shrink-1 gl-display-flex gl-flex-direction-column align-items-center gl-w-70p"
+      >
         <user-avatar-image :img-src="user.avatarUrl" :size="64" css-classes="gl-mr-3!" />
+        <div v-if="shouldRenderToggleFollowButton" class="gl-mt-3">
+          <gl-button
+            :variant="toggleFollowButtonVariant"
+            :loading="toggleFollowLoading"
+            size="small"
+            data-testid="toggle-follow-button"
+            @click="toggleFollow"
+            >{{ toggleFollowButtonText }}</gl-button
+          >
+        </div>
       </div>
-      <div class="gl-p-2 gl-w-full gl-min-w-0">
+      <div class="gl-w-full gl-min-w-0">
         <template v-if="userIsLoading">
           <gl-skeleton-loader
             :lines="$options.maxSkeletonLines"
diff --git a/config/feature_flags/development/follow_in_user_popover.yml b/config/feature_flags/development/follow_in_user_popover.yml
new file mode 100644
index 0000000000000000000000000000000000000000..579e8507ac1c6cc59453cd1c1441f41e7d6c2945
--- /dev/null
+++ b/config/feature_flags/development/follow_in_user_popover.yml
@@ -0,0 +1,8 @@
+---
+name: follow_in_user_popover
+introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/76050
+rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/355070
+milestone: '14.9'
+type: development
+group: group::workspace
+default_enabled: false
diff --git a/doc/api/users.md b/doc/api/users.md
index 7b4962735e659727a02a7354a8291fdbee56f53f..e58b28fa84c069d17315bf276850636296c25316 100644
--- a/doc/api/users.md
+++ b/doc/api/users.md
@@ -309,7 +309,8 @@ Parameters:
   "work_information": null,
   "followers": 1,
   "following": 1,
-  "local_time": "3:38 PM"
+  "local_time": "3:38 PM",
+  "is_followed": false
 }
 ```
 
diff --git a/lib/api/entities/user.rb b/lib/api/entities/user.rb
index ff711b4dec281b27765e9607b46d24a24ea74ca2..2366d137cc2ebe3cab714f162fc592505d99c144 100644
--- a/lib/api/entities/user.rb
+++ b/lib/api/entities/user.rb
@@ -18,6 +18,9 @@ class User < UserBasic
       expose :following, if: ->(user, opts) { Ability.allowed?(opts[:current_user], :read_user_profile, user) } do |user|
         user.followees.size
       end
+      expose :is_followed, if: ->(user, opts) { Ability.allowed?(opts[:current_user], :read_user_profile, user) && opts[:current_user] } do |user, opts|
+        opts[:current_user].following?(user)
+      end
       expose :local_time do |user|
         local_time(user.timezone)
       end
diff --git a/lib/gitlab/gon_helper.rb b/lib/gitlab/gon_helper.rb
index dd64f1c11ee54179234299d6354941d5c6213a1b..3cb7cefcc075e92a50a03669fde4cd70c38b8b08 100644
--- a/lib/gitlab/gon_helper.rb
+++ b/lib/gitlab/gon_helper.rb
@@ -59,6 +59,7 @@ def add_gon_variables
       push_frontend_feature_flag(:source_editor_toolbar, default_enabled: :yaml)
       push_frontend_feature_flag(:gl_avatar_for_all_user_avatars, default_enabled: :yaml)
       push_frontend_feature_flag(:mr_attention_requests, default_enabled: :yaml)
+      push_frontend_feature_flag(:follow_in_user_popover, current_user, default_enabled: :yaml)
     end
 
     # Exposes the state of a feature flag to the frontend code.
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index db8d9650c9795effe60f995db5834ec2924d4170..a0996963eaed0dbe7a60b83de66520b8c0a54953 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4183,12 +4183,18 @@ msgstr ""
 msgid "An error occurred while triggering the job."
 msgstr ""
 
+msgid "An error occurred while trying to follow this user, please try again."
+msgstr ""
+
 msgid "An error occurred while trying to generate the report. Please try again later."
 msgstr ""
 
 msgid "An error occurred while trying to run a new pipeline for this merge request."
 msgstr ""
 
+msgid "An error occurred while trying to unfollow this user, please try again."
+msgstr ""
+
 msgid "An error occurred while unsubscribing to notifications."
 msgstr ""
 
diff --git a/spec/frontend/api/user_api_spec.js b/spec/frontend/api/user_api_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee7194bdf5f81af60696f4e3a8b21d0a8c4fd78f
--- /dev/null
+++ b/spec/frontend/api/user_api_spec.js
@@ -0,0 +1,50 @@
+import MockAdapter from 'axios-mock-adapter';
+
+import { followUser, unfollowUser } from '~/api/user_api';
+import axios from '~/lib/utils/axios_utils';
+
+describe('~/api/user_api', () => {
+  let axiosMock;
+  let originalGon;
+
+  beforeEach(() => {
+    axiosMock = new MockAdapter(axios);
+
+    originalGon = window.gon;
+    window.gon = { api_version: 'v4' };
+  });
+
+  afterEach(() => {
+    axiosMock.restore();
+    axiosMock.resetHistory();
+    window.gon = originalGon;
+  });
+
+  describe('followUser', () => {
+    it('calls correct URL and returns expected response', async () => {
+      const expectedUrl = '/api/v4/users/1/follow';
+      const expectedResponse = { message: 'Success' };
+
+      axiosMock.onPost(expectedUrl).replyOnce(200, expectedResponse);
+
+      await expect(followUser(1)).resolves.toEqual(
+        expect.objectContaining({ data: expectedResponse }),
+      );
+      expect(axiosMock.history.post[0].url).toBe(expectedUrl);
+    });
+  });
+
+  describe('unfollowUser', () => {
+    it('calls correct URL and returns expected response', async () => {
+      const expectedUrl = '/api/v4/users/1/unfollow';
+      const expectedResponse = { message: 'Success' };
+
+      axiosMock.onPost(expectedUrl).replyOnce(200, expectedResponse);
+
+      await expect(unfollowUser(1)).resolves.toEqual(
+        expect.objectContaining({ data: expectedResponse }),
+      );
+      expect(axiosMock.history.post[0].url).toBe(expectedUrl);
+    });
+  });
+});
diff --git a/spec/frontend/lib/utils/users_cache_spec.js b/spec/frontend/lib/utils/users_cache_spec.js
index 30bdddd8e73332fb8bb5d337147609716ac9bbc5..d35ba20f5707c53f1514975aa51b4a64f0bd3243 100644
--- a/spec/frontend/lib/utils/users_cache_spec.js
+++ b/spec/frontend/lib/utils/users_cache_spec.js
@@ -228,4 +228,29 @@ describe('UsersCache', () => {
       expect(userStatus).toBe(dummyUserStatus);
     });
   });
+
+  describe('updateById', () => {
+    describe('when the user is not cached', () => {
+      it('does nothing and returns undefined', () => {
+        expect(UsersCache.updateById(dummyUserId, { name: 'root' })).toBe(undefined);
+        expect(UsersCache.internalStorage).toStrictEqual({});
+      });
+    });
+
+    describe('when the user is cached', () => {
+      const updatedName = 'has two farms';
+      beforeEach(() => {
+        UsersCache.internalStorage[dummyUserId] = dummyUser;
+      });
+
+      it('updates the user only with the new data', async () => {
+        UsersCache.updateById(dummyUserId, { name: updatedName });
+
+        expect(await UsersCache.retrieveById(dummyUserId)).toStrictEqual({
+          username: dummyUser.username,
+          name: updatedName,
+        });
+      });
+    });
+  });
 });
diff --git a/spec/frontend/user_popovers_spec.js b/spec/frontend/user_popovers_spec.js
index 745b66fd700342ee3c1bd835be1ce4a7a18c25be..65137330ac30b62786f6591a23e84f994410bf59 100644
--- a/spec/frontend/user_popovers_spec.js
+++ b/spec/frontend/user_popovers_spec.js
@@ -1,5 +1,13 @@
+import { within } from '@testing-library/dom';
+
 import UsersCache from '~/lib/utils/users_cache';
 import initUserPopovers from '~/user_popovers';
+import waitForPromises from 'helpers/wait_for_promises';
+
+jest.mock('~/api/user_api', () => ({
+  followUser: jest.fn().mockResolvedValue({}),
+  unfollowUser: jest.fn().mockResolvedValue({}),
+}));
 
 describe('User Popovers', () => {
   const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html';
@@ -19,7 +27,7 @@ describe('User Popovers', () => {
     return link;
   };
 
-  const dummyUser = { name: 'root' };
+  const dummyUser = { name: 'root', username: 'root', is_followed: false };
   const dummyUserStatus = { message: 'active' };
 
   let popovers;
@@ -44,6 +52,13 @@ describe('User Popovers', () => {
     jest
       .spyOn(UsersCache, 'retrieveStatusById')
       .mockImplementation((userId) => userStatusCacheSpy(userId));
+    jest.spyOn(UsersCache, 'updateById');
+
+    window.gon = {
+      features: {
+        followInUserPopover: true,
+      },
+    };
 
     popovers = initUserPopovers(document.querySelectorAll(selector));
   });
@@ -115,4 +130,32 @@ describe('User Popovers', () => {
 
     expect(userLink.getAttribute('aria-describedby')).toBe(null);
   });
+
+  it('updates toggle follow button and `UsersCache` when toggle follow button is clicked', async () => {
+    const [firstPopover] = popovers;
+    const withinFirstPopover = within(firstPopover.$el);
+    const findFollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Follow' });
+    const findUnfollowButton = () => withinFirstPopover.queryByRole('button', { name: 'Unfollow' });
+
+    const userLink = document.querySelector(selector);
+    triggerEvent('mouseenter', userLink);
+
+    await waitForPromises();
+
+    const { userId } = document.querySelector(selector).dataset;
+
+    triggerEvent('click', findFollowButton());
+
+    await waitForPromises();
+
+    expect(findUnfollowButton()).not.toBe(null);
+    expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: true });
+
+    triggerEvent('click', findUnfollowButton());
+
+    await waitForPromises();
+
+    expect(findFollowButton()).not.toBe(null);
+    expect(UsersCache.updateById).toHaveBeenCalledWith(userId, { is_followed: false });
+  });
 });
diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
index 3329199a46bc2ee327173697da50674c9ecd9d6e..5595a44672a016224114d571d35d92a80a6c9d8f 100644
--- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
+++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js
@@ -3,9 +3,19 @@ import { mountExtended } from 'helpers/vue_test_utils_helper';
 import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
 import UserNameWithStatus from '~/sidebar/components/assignees/user_name_with_status.vue';
 import UserPopover from '~/vue_shared/components/user_popover/user_popover.vue';
+import axios from '~/lib/utils/axios_utils';
+import createFlash from '~/flash';
+import { followUser, unfollowUser } from '~/api/user_api';
+
+jest.mock('~/flash');
+jest.mock('~/api/user_api', () => ({
+  followUser: jest.fn(),
+  unfollowUser: jest.fn(),
+}));
 
 const DEFAULT_PROPS = {
   user: {
+    id: 1,
     username: 'root',
     name: 'Administrator',
     location: 'Vienna',
@@ -15,6 +25,7 @@ const DEFAULT_PROPS = {
     workInformation: null,
     status: null,
     pronouns: 'they/them',
+    isFollowed: false,
     loaded: true,
   },
 };
@@ -26,6 +37,7 @@ describe('User Popover Component', () => {
 
   beforeEach(() => {
     loadFixtures(fixtureTemplate);
+    gon.features = {};
   });
 
   afterEach(() => {
@@ -37,15 +49,17 @@ describe('User Popover Component', () => {
   const findUserName = () => wrapper.find(UserNameWithStatus);
   const findSecurityBotDocsLink = () => wrapper.findByTestId('user-popover-bot-docs-link');
   const findUserLocalTime = () => wrapper.findByTestId('user-popover-local-time');
+  const findToggleFollowButton = () => wrapper.findByTestId('toggle-follow-button');
+
+  const createWrapper = (props = {}, { followInUserPopover = true } = {}) => {
+    gon.features.followInUserPopover = followInUserPopover;
 
-  const createWrapper = (props = {}, options = {}) => {
     wrapper = mountExtended(UserPopover, {
       propsData: {
         ...DEFAULT_PROPS,
         target: findTarget(),
         ...props,
       },
-      ...options,
     });
   };
 
@@ -289,4 +303,134 @@ describe('User Popover Component', () => {
       expect(findUserLocalTime().exists()).toBe(false);
     });
   });
+
+  describe('follow actions with `followInUserPopover` flag enabled', () => {
+    describe("when current user doesn't follow the user", () => {
+      beforeEach(() => createWrapper());
+
+      it('renders the Follow button with the correct variant', () => {
+        expect(findToggleFollowButton().text()).toBe('Follow');
+        expect(findToggleFollowButton().props('variant')).toBe('confirm');
+      });
+
+      describe('when clicking', () => {
+        it('follows the user', async () => {
+          followUser.mockResolvedValue({});
+
+          await findToggleFollowButton().trigger('click');
+
+          expect(findToggleFollowButton().props('loading')).toBe(true);
+
+          await axios.waitForAll();
+
+          expect(wrapper.emitted().follow.length).toBe(1);
+          expect(wrapper.emitted().unfollow).toBeFalsy();
+        });
+
+        describe('when an error occurs', () => {
+          beforeEach(() => {
+            followUser.mockRejectedValue({});
+
+            findToggleFollowButton().trigger('click');
+          });
+
+          it('shows an error message', async () => {
+            await axios.waitForAll();
+
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'An error occurred while trying to follow this user, please try again.',
+              error: {},
+              captureError: true,
+            });
+          });
+
+          it('emits no events', async () => {
+            await axios.waitForAll();
+
+            expect(wrapper.emitted().follow).toBe(undefined);
+            expect(wrapper.emitted().unfollow).toBe(undefined);
+          });
+        });
+      });
+    });
+
+    describe('when current user follows the user', () => {
+      beforeEach(() => createWrapper({ user: { ...DEFAULT_PROPS.user, isFollowed: true } }));
+
+      it('renders the Unfollow button with the correct variant', () => {
+        expect(findToggleFollowButton().text()).toBe('Unfollow');
+        expect(findToggleFollowButton().props('variant')).toBe('default');
+      });
+
+      describe('when clicking', () => {
+        it('unfollows the user', async () => {
+          unfollowUser.mockResolvedValue({});
+
+          findToggleFollowButton().trigger('click');
+
+          await axios.waitForAll();
+
+          expect(wrapper.emitted().follow).toBe(undefined);
+          expect(wrapper.emitted().unfollow.length).toBe(1);
+        });
+
+        describe('when an error occurs', () => {
+          beforeEach(async () => {
+            unfollowUser.mockRejectedValue({});
+
+            findToggleFollowButton().trigger('click');
+
+            await axios.waitForAll();
+          });
+
+          it('shows an error message', () => {
+            expect(createFlash).toHaveBeenCalledWith({
+              message: 'An error occurred while trying to unfollow this user, please try again.',
+              error: {},
+              captureError: true,
+            });
+          });
+
+          it('emits no events', () => {
+            expect(wrapper.emitted().follow).toBe(undefined);
+            expect(wrapper.emitted().unfollow).toBe(undefined);
+          });
+        });
+      });
+    });
+
+    describe('when the current user is the user', () => {
+      beforeEach(() => {
+        gon.current_username = DEFAULT_PROPS.user.username;
+        createWrapper();
+      });
+
+      it("doesn't render the toggle follow button", () => {
+        expect(findToggleFollowButton().exists()).toBe(false);
+      });
+    });
+
+    describe('when API does not support `isFollowed`', () => {
+      beforeEach(() => {
+        const user = {
+          ...DEFAULT_PROPS.user,
+          isFollowed: undefined,
+        };
+
+        createWrapper({ user });
+      });
+
+      it('does not render the toggle follow button', () => {
+        expect(findToggleFollowButton().exists()).toBe(false);
+      });
+    });
+  });
+
+  describe('follow actions with `followInUserPopover` flag disabled', () => {
+    beforeEach(() => createWrapper({}, { followInUserPopover: false }));
+
+    it('doesn’t render the toggle follow button', () => {
+      expect(findToggleFollowButton().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/lib/api/entities/user_spec.rb b/spec/lib/api/entities/user_spec.rb
index be5e8e8e8c251ce675fe14e679b55f8763d86037..407f2894f016be5b3bab1fb92498825a90111280 100644
--- a/spec/lib/api/entities/user_spec.rb
+++ b/spec/lib/api/entities/user_spec.rb
@@ -12,7 +12,40 @@
   subject { entity.as_json }
 
   it 'exposes correct attributes' do
-    expect(subject).to include(:name, :bio, :location, :public_email, :skype, :linkedin, :twitter, :website_url, :organization, :job_title, :work_information, :pronouns)
+    expect(subject.keys).to contain_exactly(
+      # UserSafe
+      :id, :username, :name,
+      # UserBasic
+      :state, :avatar_url, :web_url,
+      # User
+      :created_at, :bio, :location, :public_email, :skype, :linkedin, :twitter,
+      :website_url, :organization, :job_title, :pronouns, :bot, :work_information,
+      :followers, :following, :is_followed, :local_time
+    )
+  end
+
+  context 'exposing follow relationships' do
+    before do
+      allow(Ability).to receive(:allowed?).with(current_user, :read_user_profile, user).and_return(can_read_user_profile)
+    end
+
+    %i(followers following is_followed).each do |relationship|
+      context 'when current user cannot read user profile' do
+        let(:can_read_user_profile) { false }
+
+        it "does not expose #{relationship}" do
+          expect(subject).not_to include(relationship)
+        end
+      end
+
+      context 'when current user can read user profile' do
+        let(:can_read_user_profile) { true }
+
+        it "exposes #{relationship}" do
+          expect(subject).to include(relationship)
+        end
+      end
+    end
   end
 
   it 'exposes created_at if the current user can read the user profile' do
@@ -135,6 +168,16 @@
     end
   end
 
+  context 'with logged-out user' do
+    let(:current_user) { nil }
+
+    it 'exposes is_followed as nil' do
+      allow(Ability).to receive(:allowed?).with(current_user, :read_user_profile, user).and_return(true)
+
+      expect(subject.keys).not_to include(:is_followed)
+    end
+  end
+
   it 'exposes local_time' do
     local_time = '2:30 PM'
     expect(entity).to receive(:local_time).with(timezone).and_return(local_time)