diff --git a/app/api/common.ts b/app/api/common.ts
index b2fae6df24f..5223646d264 100644
--- a/app/api/common.ts
+++ b/app/api/common.ts
@@ -66,6 +66,31 @@ export async function requestOpenai(req: NextRequest) {
       "/api/azure/",
       "",
     )}?api-version=${azureApiVersion}`;
+
+    // Forward compatibility:
+    // if display_name(deployment_name) not set, and '{deploy-id}' in AZURE_URL
+    // then using default '{deploy-id}'
+    if (serverConfig.customModels) {
+      const modelName = path.split("/")[1];
+      let realDeployName = "";
+      serverConfig.customModels
+        .split(",")
+        .filter((v) => !!v && !v.startsWith("-") && v.includes(modelName))
+        .forEach((m) => {
+          const [fullName, displayName] = m.split("=");
+          const [_, providerName] = fullName.split("@");
+          if (providerName === "azure" && !displayName) {
+            const [_, deployId] = serverConfig.azureUrl.split("deployments/");
+            if (deployId) {
+              realDeployName = deployId;
+            }
+          }
+        });
+      if (realDeployName) {
+        console.log("[Replace with DeployId", realDeployName);
+        path = path.replaceAll(modelName, realDeployName);
+      }
+    }
   }
 
   const fetchUrl = `${baseUrl}/${path}`;
diff --git a/app/utils/model.ts b/app/utils/model.ts
index 249987726ad..0b160f1013b 100644
--- a/app/utils/model.ts
+++ b/app/utils/model.ts
@@ -47,10 +47,16 @@ export function collectModelTable(
           (model) => (model.available = available),
         );
       } else {
-        // 1. find model by name(), and set available value
+        // 1. find model by name, and set available value
+        const [customModelName, customProviderName] = name.split("@");
         let count = 0;
         for (const fullName in modelTable) {
-          if (fullName.split("@").shift() == name) {
+          const [modelName, providerName] = fullName.split("@");
+          if (
+            customModelName == modelName &&
+            (customProviderName === undefined ||
+              customProviderName === providerName)
+          ) {
             count += 1;
             modelTable[fullName]["available"] = available;
             if (displayName) {