diff --git a/package.json b/package.json
index 3517ed4d..f2a614f6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.260",
+  "version": "2.14.262",
   "private": true,
   "scripts": {
     "dev": "vite --host",
diff --git a/src/assets/icons/surgeformac_text.png b/src/assets/icons/surgeformac_text.png
index 7c884bbd..a2a660d3 100644
Binary files a/src/assets/icons/surgeformac_text.png and b/src/assets/icons/surgeformac_text.png differ
diff --git a/src/assets/icons/surgeformac_text_color.png b/src/assets/icons/surgeformac_text_color.png
index e477d7fc..2fa1ddd6 100644
Binary files a/src/assets/icons/surgeformac_text_color.png and b/src/assets/icons/surgeformac_text_color.png differ
diff --git a/src/components/ArtifactsListItem.vue b/src/components/ArtifactsListItem.vue
index b1e3ef71..0699abf1 100644
--- a/src/components/ArtifactsListItem.vue
+++ b/src/components/ArtifactsListItem.vue
@@ -168,6 +168,7 @@ import shadowRocketIcon from "@/assets/icons/shadowrocket.png";
 import surfboardIcon from "@/assets/icons/surfboard.png";
 import stashIcon from "@/assets/icons/stash.png";
 import surgeIcon from "@/assets/icons/surge.png";
+import surgeMacIcon from "@/assets/icons/surgeformac_text.png";
 import v2rayIcon from "@/assets/icons/v2ray.png";
 import singboxColorIcon from "@/assets/icons/sing-box_color.png";
 import clashColorIcon from "@/assets/icons/clash_color.png";
@@ -178,6 +179,7 @@ import shadowRocketColorIcon from "@/assets/icons/shadowrocket_color.png";
 import surfboardColorIcon from "@/assets/icons/surfboard_color.png";
 import stashColorIcon from "@/assets/icons/stash_color.png";
 import surgeColorIcon from "@/assets/icons/surge_color.png";
+import surgeMacColorIcon from "@/assets/icons/surgeformac_text_color.png";
 import v2rayColorIcon from "@/assets/icons/v2ray_color.png";
 import { useAppNotifyStore } from "@/store/appNotify";
 import { useArtifactsStore } from "@/store/artifacts";
@@ -263,7 +265,7 @@ const icon = computed(() => {
     case "Surge":
       return appearanceSetting.value.isIconColor ? surgeColorIcon : surgeIcon;
     case "SurgeMac":
-      return appearanceSetting.value.isIconColor ? surgeColorIcon : surgeIcon;
+      return appearanceSetting.value.isIconColor ? surgeMacColorIcon : surgeMacIcon;
     case "QX":
       return appearanceSetting.value.isIconColor ? quanxColorIcon : quanxIcon;
     case "Loon":
diff --git a/src/components/PreviewPanel.vue b/src/components/PreviewPanel.vue
index eea6c870..0a4644a8 100644
--- a/src/components/PreviewPanel.vue
+++ b/src/components/PreviewPanel.vue
@@ -45,6 +45,7 @@
   import { Toast, Dialog } from '@nutui/nutui';
   import surfboard from '@/assets/icons/surfboard.png';
   import surge from '@/assets/icons/surge.png';
+  import surgeMac from '@/assets/icons/surgeformac_text.png';
   import clash from '@/assets/icons/clash.png';
   import quanx from '@/assets/icons/quanx.png';
   import loon from '@/assets/icons/loon.png';
@@ -122,7 +123,7 @@
     {
       name: 'Surge(macOS)',
       path: 'SurgeMac',
-      icon: surge,
+      icon: surgeMac,
     },
 
     {
diff --git a/src/types/store/globalStore.d.ts b/src/types/store/globalStore.d.ts
index 59e78e41..1a77a2a2 100644
--- a/src/types/store/globalStore.d.ts
+++ b/src/types/store/globalStore.d.ts
@@ -21,6 +21,7 @@ interface GlobalStoreState {
 }
 
 interface ENV {
+  meta?: any; 
   hasNewVersion?: boolean;
   latestVersion?: string;
   version?: string;
diff --git a/src/views/My.vue b/src/views/My.vue
index 804a24ac..ab9c2374 100644
--- a/src/views/My.vue
+++ b/src/views/My.vue
@@ -234,7 +234,7 @@
     </div>
 
     <div class="env-block">
-      <img v-if="icon" :src="icon" alt="" class="auto-reverse" />
+      <img v-if="icon" :src="env.meta?.node?.env?.SUB_STORE_BACKEND_CUSTOM_ICON || icon" alt="" class="auto-reverse" />
       <a
         v-if="env.hasNewVersion"
         target="_blank"
@@ -247,7 +247,7 @@
         <nut-badge value="NEW">v{{ env.version }}</nut-badge>
       </a>
       <p v-else>v{{ env.version }}</p>
-      <p>{{ env.backend }}</p>
+      <p>{{ env.meta?.node?.env?.SUB_STORE_BACKEND_CUSTOM_NAME || env.backend }}</p>
     </div>
   </div>
 </template>
diff --git a/src/views/settings/APISetting.vue b/src/views/settings/APISetting.vue
index bd85116b..48c7b033 100644
--- a/src/views/settings/APISetting.vue
+++ b/src/views/settings/APISetting.vue
@@ -4,7 +4,7 @@
       <nut-cell-group :title="$t(`apiSettingPage.currentApi.title`)">
         <nut-cell class="cell" center>
           <template #icon>
-            <img :src="icon" alt="" class="auto-reverse backend-icon">
+            <img :src="env.meta?.node?.env?.SUB_STORE_BACKEND_CUSTOM_ICON || icon" alt="" class="auto-reverse backend-icon">
           </template>
           <template #title>
             <span class="backend-title">{{
@@ -15,7 +15,7 @@
           </template>
           <template #link>
             <span class="backend-version">{{
-              `${env.backend} - ${env.version}`
+              `${env.meta?.node?.env?.SUB_STORE_BACKEND_CUSTOM_NAME || env.backend} - ${env.version}`
             }}</span>
           </template>
         </nut-cell>