diff --git a/app/assets/javascripts/discourse/app/components/group-info.gjs b/app/assets/javascripts/discourse/app/components/group-info.gjs
new file mode 100644
index 00000000000..bbd758108b4
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/group-info.gjs
@@ -0,0 +1,37 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import PluginOutlet from "discourse/components/plugin-outlet";
+
+export default class GroupInfo extends Component {
+  <template>
+    <PluginOutlet
+      @name="group-info-details"
+      @outletArgs={{hash group=@group}}
+      @defaultGlimmer={{true}}
+    >
+      <span class="group-info-details">
+        <span class="group-info-name">
+          {{this.name}}
+        </span>
+        {{#if this.mentionName}}
+          <span class="group-info-mention-name">
+            {{this.mentionName}}
+          </span>
+        {{/if}}
+      </span>
+    </PluginOutlet>
+  </template>
+
+  get names() {
+    const { full_name, display_name, name } = this.args.group;
+    return [...new Set([full_name, display_name, name].filter(Boolean))];
+  }
+
+  get name() {
+    return this.names[0];
+  }
+
+  get mentionName() {
+    return this.names[1] ? `@${this.names[1]}` : null;
+  }
+}
diff --git a/app/assets/javascripts/discourse/app/components/groups-info.gjs b/app/assets/javascripts/discourse/app/components/groups-info.gjs
deleted file mode 100644
index 052da089068..00000000000
--- a/app/assets/javascripts/discourse/app/components/groups-info.gjs
+++ /dev/null
@@ -1,19 +0,0 @@
-import { hash } from "@ember/helper";
-import { or } from "truth-helpers";
-import PluginOutlet from "discourse/components/plugin-outlet";
-
-const GroupsInfo = <template>
-  <PluginOutlet
-    @name="group-info-details"
-    @outletArgs={{hash group=@group}}
-    @defaultGlimmer={{true}}
-  >
-    <span class="group-info-details">
-      <span class="groups-info-name">
-        {{or @group.full_name @group.displayName}}
-      </span>
-    </span>
-  </PluginOutlet>
-</template>;
-
-export default GroupsInfo;
diff --git a/app/assets/javascripts/discourse/app/templates/group.hbs b/app/assets/javascripts/discourse/app/templates/group.hbs
index 5389906d4e4..5f18ffbd5e0 100644
--- a/app/assets/javascripts/discourse/app/templates/group.hbs
+++ b/app/assets/javascripts/discourse/app/templates/group.hbs
@@ -31,15 +31,7 @@
       {{/if}}
 
       <div class="group-info-names">
-        <span class="group-info-name">
-          {{or this.model.full_name this.model.name}}
-        </span>
-
-        {{#if this.model.full_name}}
-          <div class="group-info-full-name">
-            {{this.model.name}}
-          </div>
-        {{/if}}
+        <GroupInfo @group={{this.model}} />
 
         {{#if (and this.canManageGroup this.model.automatic)}}
           <DTooltip class="group-automatic-tooltip">
diff --git a/app/assets/javascripts/discourse/app/templates/groups/index.hbs b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
index 23a05d20527..3784ad45fc5 100644
--- a/app/assets/javascripts/discourse/app/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
@@ -65,7 +65,7 @@
                   {{/if}}
 
                   <span class="group-info">
-                    <GroupsInfo @group={{group}} />
+                    <GroupInfo @group={{group}} />
                     <div class="group-user-count">{{d-icon
                         "user"
                       }}{{group.user_count}}</div>
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index d2037e57040..91d7e4a9d59 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -111,12 +111,6 @@
       }
     }
 
-    .groups-info-name {
-      font-size: var(--font-up-1);
-      font-weight: bold;
-      color: var(--primary);
-    }
-
     $size: 40px;
     $icon-size: math.div($size, 1.8);
 
diff --git a/app/models/group.rb b/app/models/group.rb
index 2b53603b4fa..4ff0cd13c3e 100644
--- a/app/models/group.rb
+++ b/app/models/group.rb
@@ -502,6 +502,11 @@ class Group < ActiveRecord::Base
     end
   end
 
+  def self.can_use_name?(name, group)
+    UsernameValidator.new(name).valid_format? &&
+      (group.name == name || !User.username_exists?(name))
+  end
+
   def self.refresh_automatic_group!(name)
     return unless id = AUTO_GROUPS[name]
 
@@ -519,9 +524,16 @@ class Group < ActiveRecord::Base
 
     # don't allow shoddy localization to break this
     localized_name = I18n.t("groups.default_names.#{name}", locale: SiteSetting.default_locale)
-    validator = UsernameValidator.new(localized_name)
+    default_name = I18n.t("groups.default_names.#{name}")
 
-    group.name = localized_name if validator.valid_format? && !User.username_exists?(localized_name)
+    group.name =
+      if can_use_name?(localized_name, group)
+        localized_name
+      elsif can_use_name?(default_name, group)
+        default_name
+      else
+        name.to_s
+      end
 
     # the everyone group is special, it can include non-users so there is no
     # way to have the membership in a table
diff --git a/config/site_settings.yml b/config/site_settings.yml
index 35d423d001f..02cd5adad83 100644
--- a/config/site_settings.yml
+++ b/config/site_settings.yml
@@ -692,7 +692,7 @@ users:
       cs: "[ěščřžýáíéóůúďťňĚŠČŘŽÝÁÍÉÓŮÚĎŤŇ]"
       de: "[äöüßÄÖÜẞ]"
       fi: "[åäöÅÄÖ]"
-      ja: '[\p{Han}\p{Katakana}\p{Hiragana}]'
+      ja: '[\p{Han}\p{Katakana}\p{Hiragana}ー]'
       ko: '\p{Hangul}'
       zh_CN: '\p{Han}'
       zh_TW: '\p{Han}'