diff --git a/backend/agent-manager.ts b/backend/agent-manager.ts
index 895232a..527d53d 100644
--- a/backend/agent-manager.ts
+++ b/backend/agent-manager.ts
@@ -76,12 +76,14 @@ export class AgentManager {
      * @param url
      * @param username
      * @param password
+     * @param friendlyname
      */
-    async add(url : string, username : string, password : string) : Promise<Agent> {
+    async add(url : string, username : string, password : string, friendlyname : string) : Promise<Agent> {
         let bean = R.dispense("agent") as Agent;
         bean.url = url;
         bean.username = username;
         bean.password = password;
+        bean.friendlyname = friendlyname;
         await R.store(bean);
         return bean;
     }
@@ -276,6 +278,7 @@ export class AgentManager {
             url: "",
             username: "",
             endpoint: "",
+            friendlyname: "",
         };
 
         for (let endpoint in list) {
diff --git a/backend/migrations/2023-12-20-2117-agent-table.ts b/backend/migrations/2023-12-20-2117-agent-table.ts
index ae18d1d..0a48e7d 100644
--- a/backend/migrations/2023-12-20-2117-agent-table.ts
+++ b/backend/migrations/2023-12-20-2117-agent-table.ts
@@ -7,6 +7,7 @@ export async function up(knex: Knex): Promise<void> {
         table.string("url", 255).notNullable().unique();
         table.string("username", 255).notNullable();
         table.string("password", 255).notNullable();
+        table.string("friendlyname", 255);
         table.boolean("active").notNullable().defaultTo(true);
     });
 }
diff --git a/backend/models/agent.ts b/backend/models/agent.ts
index f806a3d..ca5450c 100644
--- a/backend/models/agent.ts
+++ b/backend/models/agent.ts
@@ -23,6 +23,7 @@ export class Agent extends BeanModel {
             url: this.url,
             username: this.username,
             endpoint: this.endpoint,
+            friendlyname: this.friendlyname
         };
     }
 
diff --git a/backend/socket-handlers/manage-agent-socket-handler.ts b/backend/socket-handlers/manage-agent-socket-handler.ts
index 6f8fef4..bc6ed20 100644
--- a/backend/socket-handlers/manage-agent-socket-handler.ts
+++ b/backend/socket-handlers/manage-agent-socket-handler.ts
@@ -20,7 +20,7 @@ export class ManageAgentSocketHandler extends SocketHandler {
                 let data = requestData as LooseObject;
                 let manager = socket.instanceManager;
                 await manager.test(data.url, data.username, data.password);
-                await manager.add(data.url, data.username, data.password);
+                await manager.add(data.url, data.username, data.password, data.friendlyname);
 
                 // connect to the agent
                 manager.connect(data.url, data.username, data.password);
diff --git a/frontend/src/pages/DashboardHome.vue b/frontend/src/pages/DashboardHome.vue
index a6db753..86c5833 100644
--- a/frontend/src/pages/DashboardHome.vue
+++ b/frontend/src/pages/DashboardHome.vue
@@ -49,8 +49,11 @@
                             </template>
 
                             <!-- Agent Display Name -->
-                            <span v-if="endpoint === ''">{{ $t("currentEndpoint") }}</span>
-                            <a v-else :href="agent.url" target="_blank">{{ endpoint }}</a>
+                            <template v-if="$root.agentStatusList[endpoint]">
+                                <span v-if="endpoint === '' && agent.friendlyname === ''" class="badge bg-secondary me-2">Controller</span>
+                                <span v-else-if="agent.friendlyname === ''" :href="agent.url">{{ endpoint }}</span>
+                                <span v-else :href="agent.url">{{ agent.friendlyname }}</span>
+                            </template>
 
                             <!-- Remove Button -->
                             <font-awesome-icon v-if="endpoint !== ''" class="ms-2 remove-agent" icon="trash" @click="showRemoveAgentDialog[agent.url] = !showRemoveAgentDialog[agent.url]" />
@@ -81,6 +84,11 @@
                                 <input id="password" v-model="agent.password" type="password" class="form-control" required autocomplete="new-password">
                             </div>
 
+                            <div class="mb-3">
+                                <label for="friendlyname" class="form-label">{{ $t("Friendly Name") }}</label>
+                                <input id="friendlyname" v-model="agent.friendlyname" type="text" class="form-control" optional>
+                            </div>
+
                             <button type="submit" class="btn btn-primary" :disabled="connectingAgent">
                                 <template v-if="connectingAgent">{{ $t("connecting") }}</template>
                                 <template v-else>{{ $t("connect") }}</template>
@@ -126,6 +134,7 @@ export default {
                 url: "http://",
                 username: "",
                 password: "",
+                friendlyname: "",
             }
         };
     },