diff --git a/app/assets/javascripts/profile/account/components/update_username.vue b/app/assets/javascripts/profile/account/components/update_username.vue
index bc5de48883061877b679c6f74a0ce029d274203a..3fd33b0c4049ed37857d0bfa59b5b96e24cced50 100644
--- a/app/assets/javascripts/profile/account/components/update_username.vue
+++ b/app/assets/javascripts/profile/account/components/update_username.vue
@@ -2,7 +2,6 @@
 import { GlButton, GlModal, GlModalDirective } from '@gitlab/ui';
 import { escape } from 'lodash';
 import SafeHtml from '~/vue_shared/directives/safe_html';
-import { createAlert, VARIANT_INFO } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { __, s__, sprintf } from '~/locale';
 
@@ -34,6 +33,7 @@ export default {
       isRequestPending: false,
       username: this.initialUsername,
       newUsername: this.initialUsername,
+      errorMessage: null,
     };
   },
   computed: {
@@ -82,19 +82,18 @@ Please update your Git repository remotes as soon as possible.`),
       return axios
         .put(this.actionUrl, putData)
         .then((result) => {
-          createAlert({ message: result.data.message, variant: VARIANT_INFO });
+          this.$toast.show(result.data.message);
+
           this.username = username;
           this.isRequestPending = false;
+          this.errorMessage = null;
         })
         .catch((error) => {
           const errorMessage =
             error?.response?.data?.message ||
             s__('Profiles|An error occurred while updating your username, please try again.');
 
-          createAlert({
-            message: errorMessage,
-            renderMessageHTML: true,
-          });
+          this.errorMessage = errorMessage;
           this.isRequestPending = false;
           throw error;
         });
@@ -120,9 +119,16 @@ Please update your Git repository remotes as soon as possible.`),
           :disabled="isRequestPending"
           class="form-control gl-md-form-input-lg"
           required="required"
+          @input="errorMessage = null"
         />
       </div>
       <p class="form-text gl-text-subtle">{{ path }}</p>
+      <p
+        v-if="errorMessage"
+        v-safe-html="errorMessage"
+        class="form-text gl-text-danger"
+        data-testid="username-update-error"
+      ></p>
     </div>
     <gl-button
       v-gl-modal-directive="$options.modalId"
diff --git a/spec/frontend/profile/account/components/update_username_spec.js b/spec/frontend/profile/account/components/update_username_spec.js
index 6be1263e69902b5157193ef22f50b99a06c1dd13..227077975fe98bd43a7078d8d2b476623e8ea237 100644
--- a/spec/frontend/profile/account/components/update_username_spec.js
+++ b/spec/frontend/profile/account/components/update_username_spec.js
@@ -4,7 +4,6 @@ import { nextTick } from 'vue';
 import waitForPromises from 'helpers/wait_for_promises';
 import { TEST_HOST } from 'helpers/test_constants';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { createAlert } from '~/alert';
 import axios from '~/lib/utils/axios_utils';
 import { HTTP_STATUS_BAD_REQUEST, HTTP_STATUS_OK } from '~/lib/utils/http_status';
 import UpdateUsername from '~/profile/account/components/update_username.vue';
@@ -24,6 +23,7 @@ describe('UpdateUsername component', () => {
   let axiosMock;
 
   const findNewUsernameInput = () => wrapper.findByTestId('new-username-input');
+  const findUsernameUpdateError = () => wrapper.findByTestId('username-update-error');
 
   const createComponent = (props = {}) => {
     wrapper = shallowMountExtended(UpdateUsername, {
@@ -34,6 +34,11 @@ describe('UpdateUsername component', () => {
       stubs: {
         GlModal,
       },
+      mocks: {
+        $toast: {
+          show: jest.fn(),
+        },
+      },
     });
   };
 
@@ -114,7 +119,7 @@ describe('UpdateUsername component', () => {
       expect(axios.put).toHaveBeenCalledWith(actionUrl, { user: { username: newUsername } });
     });
 
-    it('sets the username after a successful update', async () => {
+    it('sets the username after a successful update and shows toast message', async () => {
       const { input, openModalBtn, modal } = findElements();
 
       axiosMock.onPut(actionUrl).replyOnce(() => {
@@ -131,6 +136,8 @@ describe('UpdateUsername component', () => {
       expect(input.attributes('disabled')).toBe(undefined);
       expect(openModalBtn.props('disabled')).toBe(true);
       expect(openModalBtn.props('loading')).toBe(false);
+
+      expect(wrapper.vm.$toast.show).toHaveBeenCalledWith('Username changed');
     });
 
     it('does not set the username after a erroneous update', async () => {
@@ -158,13 +165,10 @@ describe('UpdateUsername component', () => {
 
       await clickModalWithErrorResponse();
 
-      expect(createAlert).toHaveBeenCalledWith({
-        message: 'Invalid username',
-        renderMessageHTML: true,
-      });
+      expect(findUsernameUpdateError().element.textContent).toBe('Invalid username');
     });
 
-    it('decodes HTML entities in error messages', async () => {
+    it('decodes HTML entities in error message', async () => {
       const encodedMessage =
         'Username change failed - &#39;-&#39; is a reserved name &amp; cannot contain &lt;special&gt; characters or &quot;quotes&quot;';
       axiosMock.onPut(actionUrl).replyOnce(() => {
@@ -173,18 +177,7 @@ describe('UpdateUsername component', () => {
 
       await clickModalWithErrorResponse();
 
-      expect(createAlert).toHaveBeenCalledWith({
-        message: encodedMessage,
-        renderMessageHTML: true,
-      });
-
-      // Test what the user actually sees when HTML is rendered
-      const alertCall = createAlert.mock.calls[0][0];
-      const tempDiv = document.createElement('div');
-      tempDiv.innerHTML = alertCall.message;
-
-      // This simulates what happens when renderMessageHTML: true
-      expect(tempDiv.textContent).toBe(
+      expect(findUsernameUpdateError().element.textContent).toBe(
         'Username change failed - \'-\' is a reserved name & cannot contain <special> characters or "quotes"',
       );
     });
@@ -196,10 +189,9 @@ describe('UpdateUsername component', () => {
 
       await clickModalWithErrorResponse();
 
-      expect(createAlert).toHaveBeenCalledWith({
-        message: 'An error occurred while updating your username, please try again.',
-        renderMessageHTML: true,
-      });
+      expect(findUsernameUpdateError().element.textContent).toBe(
+        'An error occurred while updating your username, please try again.',
+      );
     });
   });
 });