diff --git a/web/src/api/keys.ts b/web/src/api/keys.ts
index 0c5ecb4..830a942 100644
--- a/web/src/api/keys.ts
+++ b/web/src/api/keys.ts
@@ -5,8 +5,8 @@ const mockGroups: Group[] = [
   {
     id: 1,
     name: "openai-main",
-    display_name: "OpenAI主组",
-    description: "OpenAI主要API组",
+    display_name: "",
+    description: "",
     sort: 1,
     channel_type: "openai",
     upstreams: [
diff --git a/web/src/components/keys/GroupInfoCard.vue b/web/src/components/keys/GroupInfoCard.vue
index 021d195..83b3985 100644
--- a/web/src/components/keys/GroupInfoCard.vue
+++ b/web/src/components/keys/GroupInfoCard.vue
@@ -14,6 +14,7 @@ import {
   NTag,
   useMessage,
 } from "naive-ui";
+import { getGroupDisplayName } from "@/utils/display";
 import { onMounted, ref, watch } from "vue";
 
 interface Props {
@@ -94,7 +95,7 @@ function copyUrl(url: string) {
         <div class="card-header">
           <div class="header-left">
             <h3 class="group-title">
-              {{ group?.display_name || group?.name || "请选择分组" }}
+              {{ group ? getGroupDisplayName(group) : "请选择分组" }}
               <code
                 v-if="group"
                 class="group-url"
diff --git a/web/src/components/keys/GroupList.vue b/web/src/components/keys/GroupList.vue
index 2ec529c..e79e1e6 100644
--- a/web/src/components/keys/GroupList.vue
+++ b/web/src/components/keys/GroupList.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { keysApi } from "@/api/keys";
 import type { Group } from "@/types/models";
+import { getGroupDisplayName } from "@/utils/display";
 import { NButton, NCard, NEmpty, NInput, NSpin, NTag, useMessage } from "naive-ui";
 import { computed, ref } from "vue";
 
@@ -115,7 +116,7 @@ async function createDemoGroup() {
                 <span v-else>🔧</span>
               </div>
               <div class="group-content">
-                <div class="group-name">{{ group.display_name || group.name }}</div>
+                <div class="group-name">{{ getGroupDisplayName(group) }}</div>
                 <div class="group-meta">
                   <n-tag size="tiny" :type="getChannelTagType(group.channel_type)">
                     {{ group.channel_type }}
diff --git a/web/src/utils/display.ts b/web/src/utils/display.ts
new file mode 100644
index 0000000..d64f014
--- /dev/null
+++ b/web/src/utils/display.ts
@@ -0,0 +1,39 @@
+import type { Group } from "@/types/models";
+
+/**
+ * Formats a string from camelCase, snake_case, or kebab-case
+ * into a more readable format with spaces and capitalized words.
+ *
+ * @param name The input string.
+ * @returns The formatted string.
+ *
+ * @example
+ * formatDisplayName("myGroupName")      // "My Group Name"
+ * formatDisplayName("my_group_name")    // "My Group Name"
+ * formatDisplayName("my-group-name")    // "My Group Name"
+ * formatDisplayName("MyGroup")          // "My Group"
+ */
+export function formatDisplayName(name: string): string {
+  if (!name) {
+    return "";
+  }
+
+  // Replace snake_case and kebab-case with spaces, and add a space before uppercase letters in camelCase.
+  const result = name.replace(/[_-]/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
+
+  // Capitalize the first letter of each word.
+  return result
+    .split(" ")
+    .filter(word => word.length > 0)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+/**
+ * Gets the display name for a group, falling back to a formatted version of its name.
+ * @param group The group object.
+ * @returns The display name for the group.
+ */
+export function getGroupDisplayName(group: Group): string {
+  return group.display_name || formatDisplayName(group.name);
+}