diff --git a/frontend/src/mixins/socket.ts b/frontend/src/mixins/socket.ts
index abb95e0..f5573dd 100644
--- a/frontend/src/mixins/socket.ts
+++ b/frontend/src/mixins/socket.ts
@@ -131,10 +131,15 @@ export default defineComponent({
     methods: {
 
         endpointDisplayFunction(endpoint : string) {
-            if (endpoint) {
-                return endpoint;
-            } else {
-                return this.$t("currentEndpoint");
+            for (const [k, v] of Object.entries(this.$data.agentList)) {
+                if (endpoint) {
+                    if (endpoint === v["endpoint"] && v["friendlyname"] !== "") {
+                        return v["friendlyname"];
+                    }
+                    if (endpoint === v["endpoint"] && v["friendlyname"] === "" ) {
+                        return endpoint;
+                    }
+                }
             }
         },
 
diff --git a/frontend/src/pages/Compose.vue b/frontend/src/pages/Compose.vue
index 7d37854..85a130d 100644
--- a/frontend/src/pages/Compose.vue
+++ b/frontend/src/pages/Compose.vue
@@ -99,7 +99,7 @@
                                 <label for="name" class="form-label">{{ $t("dockgeAgent") }}</label>
                                 <select v-model="stack.endpoint" class="form-select">
                                     <option v-for="(agent, endpoint) in $root.agentList" :key="endpoint" :value="endpoint" :disabled="$root.agentStatusList[endpoint] != 'online'">
-                                        ({{ $root.agentStatusList[endpoint] }}) {{ (endpoint) ? endpoint : $t("currentEndpoint") }}
+                                        ({{ $root.agentStatusList[endpoint] }}) {{ (agent.friendlyname !== '') ? agent.friendlyname : agent.url || $t("Controller") }}
                                     </option>
                                 </select>
                             </div>