diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
index 3ea9c5d..7b5ce15 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
@@ -24,12 +24,14 @@
 import {PropertyValues} from 'lit';
 import {classMap} from 'lit/directives/class-map.js';
 import {KnownExperimentId} from '../../../services/flags/flags';
-import {NumericChangeId} from '../../../api/rest-api';
+import {NumericChangeId, ServerInfo} from '../../../api/rest-api';
 import {subscribe} from '../../lit/subscription-controller';
 import {resolve} from '../../../models/dependency';
 import {changeModelToken} from '../../../models/change/change-model';
 import {assert} from '../../../utils/common-util';
 import {ShortcutController} from '../../lit/shortcut-controller';
+import {getAccountDisplayName} from '../../../utils/display-name-util';
+import {configModelToken} from '../../../models/config/config-model';
 
 const MAX_ITEMS_DROPDOWN = 10;
 
@@ -118,6 +120,10 @@
 
   private readonly restApiService = getAppContext().restApiService;
 
+  private readonly getConfigModel = resolve(this, configModelToken);
+
+  private serverConfig?: ServerInfo;
+
   private changeNum?: NumericChangeId;
 
   // private but used in tests
@@ -135,6 +141,13 @@
       () => this.getChangeModel().changeNum$,
       x => (this.changeNum = x)
     );
+    subscribe(
+      this,
+      () => this.getConfigModel().serverConfig$,
+      config => {
+        this.serverConfig = config;
+      }
+    );
     this.shortcuts.addLocal({key: Key.UP}, e => this.handleUpKey(e), {
       preventDefault: false,
     });
@@ -600,6 +613,7 @@
     }
   }
 
+  // TODO(dhruvsri): merge with getAccountSuggestions in account-util
   async computeReviewerSuggestions() {
     this.suggestions = (
       (await this.restApiService.getSuggestedAccounts(
@@ -612,7 +626,7 @@
       .filter(account => account.email)
       .map(account => {
         return {
-          text: `${account.name ?? ''} <${account.email}>`,
+          text: `${getAccountDisplayName(this.serverConfig, account)}`,
           dataValue: account.email,
         };
       });
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
index 76c5033..6837a71 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea_test.ts
@@ -137,7 +137,11 @@
     test('mention selector opens when previous char is \n', async () => {
       stubRestApi('getSuggestedAccounts').returns(
         Promise.resolve([
-          {...createAccountWithEmail('abc@google.com'), name: 'A'},
+          {
+            ...createAccountWithEmail('abc@google.com'),
+            name: 'A',
+            display_name: 'display A',
+          },
           {...createAccountWithEmail('abcdef@google.com'), name: 'B'},
         ])
       );
@@ -154,7 +158,7 @@
       assert.deepEqual(element.suggestions, [
         {
           dataValue: 'abc@google.com',
-          text: 'A <abc@google.com>',
+          text: 'display A <abc@google.com>',
         },
         {
           dataValue: 'abcdef@google.com',