diff --git a/backend/src/app.py b/backend/src/app.py
index ffeb0ff..8b8260d 100644
--- a/backend/src/app.py
+++ b/backend/src/app.py
@@ -103,6 +103,12 @@ class App(ChatMixin):
             raise Exception(f"Agent not found with id {agent_id}")
         return agent
 
+    async def agent_id_from_name(self, agentname: str):
+        agent_id = await db.Agent.get_or_none(agentname=agentname).values_list("id", flat=True)
+        if not agent_id:
+            raise Exception(f"Agent not found with agentname {agentname}")
+        return agent_id
+
     async def create_agent(self, user_id, name, agentname, description, picture, kind, data, main_chat_id=None, temporary=False):
         print("create_agent; user_id, name:", user_id, name)
 
diff --git a/backend/src/server.py b/backend/src/server.py
index aaf86e4..90663de 100644
--- a/backend/src/server.py
+++ b/backend/src/server.py
@@ -169,6 +169,16 @@ async def start_server(app, shutdown_event):
                 body = req.get('body', {})
                 nonce = req.get('nonce', None)
 
+                async def agent_id_from_body (allow_none=False):
+                    if 'agentId' in body:
+                        return body['agentId']
+                    elif 'agentname' in body:
+                        return await app.agent_id_from_name(body['agentname'])
+                    elif allow_none:
+                        return None
+                    else:
+                        raise Exception("field 'agentId' or 'agentname' required")
+
                 if action == "ping":
                     await send({'message': "pong"})
 
@@ -187,7 +197,7 @@ async def start_server(app, shutdown_event):
                     await send({'message': "agent created", 'agentId': agent_id, 'nonce': nonce})
 
                 elif action == "update-agent":
-                    agent_id = body['agentId']
+                    agent_id = await agent_id_from_body()
                     await app.update_agent(
                         agent_id=agent_id,
                         name=body.get('name'),
@@ -217,7 +227,7 @@ async def start_server(app, shutdown_event):
                         await send({'message': "model deleted", 'modelId': body["modelId"], 'nonce': nonce})
 
                 elif action == "get-agent-config-fields":
-                    await send({'fields': await app.get_agent_config_fields(body['agentId']), 'nonce': nonce})
+                    await send({'fields': await app.get_agent_config_fields(await agent_id_from_body()), 'nonce': nonce})
 
                 elif action == "get-agent-kinds":
                     await send({'message': "agents retrieved", 'kinds': app.get_agent_kinds(), 'nonce': nonce})
@@ -229,16 +239,16 @@ async def start_server(app, shutdown_event):
                     await send({'message': "agents retrieved", 'agents': await app.get_agents(user_id), 'nonce': nonce})
 
                 elif action == "get-agent-resources":
-                    values = await app.get_agent_resources(body['agentId'], body.get('kind'), body.get('key'))
+                    values = await app.get_agent_resources(await agent_id_from_body(), body.get('kind'), body.get('key'))
                     await send({'resources': [{'kind': r.kind, 'key': r.key, 'value': r.value} for r in values], 'nonce': nonce})
 
                 elif action == "save-agent-resource":
-                    await app.save_agent_resource(body['agentId'], body['kind'], body['key'], body['value'])
+                    await app.save_agent_resource(await agent_id_from_body(), body['kind'], body['key'], body['value'])
                     await send({'message': "resource saved", 'nonce': nonce})
 
                 elif action == "get-agent-runs":
                     await send({
-                        'runs': await app.get_agent_runs(agent_id=body.get('agentId'), user_id=user_id),
+                        'runs': await app.get_agent_runs(agent_id=await agent_id_from_body(allow_none=True), user_id=user_id),
                         'nonce': nonce
                     })
 
@@ -307,7 +317,7 @@ async def start_server(app, shutdown_event):
                         continue
 
                     response = await app.send_agent_prompt(
-                        body['agentId'],
+                        await agent_id_from_body(),
                         body.get('instruction'),
                         body.get('input'),
                         body.get('options', {})
diff --git a/frontend/src/backend.js b/frontend/src/backend.js
index 057d61b..753ef7e 100644
--- a/frontend/src/backend.js
+++ b/frontend/src/backend.js
@@ -326,9 +326,9 @@ export async function getAgents() {
   return cache.agents;
 }
 
-export async function getAgent(agentId) {
+export async function getAgent(agentname) {
   const allAgents = await getAgents();
-  return allAgents.find(it => it.id == agentId);
+  return allAgents.find(it => it.agentname == agentname);
 }
 
 export function readStream(streamId) {
diff --git a/frontend/src/components/main/Sidebar.vue b/frontend/src/components/main/Sidebar.vue
index 059c39f..9dfa635 100644
--- a/frontend/src/components/main/Sidebar.vue
+++ b/frontend/src/components/main/Sidebar.vue
@@ -38,10 +38,10 @@
     document.body.addEventListener('mouseup', documentMouseUp);
 
     chats.value = (await backend.getChats()).map(it => {
-      return {id: it.id, name: it.name};
+      return Object.assign({}, it);
     });
     agents.value = (await backend.getAgents()).map(it => {
-      return {id: it.id, name: it.name};
+      return Object.assign({}, it);
     });
   });
 
@@ -110,7 +110,7 @@
       <RouterLink to="/chat/create" class="nav-item">Create Chat</RouterLink>
     </nav>
     <nav v-if="mode=='agents'">
-      <RouterLink v-for="it in agents" :to="'/agent/' + it.id" class="nav-item">{{it.name}}</RouterLink>
+      <RouterLink v-for="it in agents" :to="'/agent/' + it.agentname" class="nav-item">{{it.name}}</RouterLink>
       <RouterLink to="/agent/create" class="nav-item">Create Agent</RouterLink>
     </nav>
     <nav v-if="mode=='settings'">
diff --git a/frontend/src/views/Agent.vue b/frontend/src/views/Agent.vue
index d928041..28087ea 100644
--- a/frontend/src/views/Agent.vue
+++ b/frontend/src/views/Agent.vue
@@ -30,8 +30,8 @@
 
   // === State Management === //
 
-  async function loadAgentData (agentId) {
-    const _agent = await backend.getAgent(agentId);
+  async function loadAgentData (agentname) {
+    const _agent = await backend.getAgent(agentname);
     if (!_agent) {
       ui.alert("Agent not found");
       return;
@@ -50,7 +50,7 @@
       kindInfo.value.name = _agent.kind;
     });
 
-    backend.sendAction('get-agent-config-fields', {agentId}).then(res => {
+    backend.sendAction('get-agent-config-fields', {agentname}).then(res => {
       const dataObject = Object.fromEntries(res.fields.map(
         field => [field.name, field.value]
       ));
@@ -66,7 +66,7 @@
     });
 
     // Replace with a backend call
-    backend.sendAction('get-agent-resources', {agentId}).then(res => {
+    backend.sendAction('get-agent-resources', {agentname}).then(res => {
       tools.value = res.resources.filter(r => r.kind == 'tool');
       resources.value = res.resources.filter(r => !['tool', 'config'].includes(r.kind));
     });
@@ -106,7 +106,7 @@
     promptInstruction.value = "";
     promptInput.value = "";
 
-    let payload = {agentId: agent.value.id};
+    let payload = {agentname: agent.value.agentname};
     let historyEntry = reactive({loading: true});
 
     if (promptInstructionEnabled.value) {
@@ -152,7 +152,9 @@
     const value = prompt(`Enter a new identifier for ${agent.value.name}`);
     if (value) {
       backend.sendAction("update-agent", {
+        // agentId is necessary here
         agentId: agent.value.id,
+        // used as value instead of identifier
         agentname: value,
       }).then(res => {
         ui.alert(res.error ?
@@ -173,8 +175,8 @@
     const value = prompt(`Enter a new name for ${agent.value.name}`);
     if (value) {
       backend.sendAction("update-agent", {
-        agentId: agent.value.id,
-        agentname: value,
+        agentname: agent.value.agentname,
+        name: value,
       }).then(res => {
         ui.alert(res.error ?
           'Error updating agent name' :
@@ -214,7 +216,7 @@
     }
 
     let res = await backend.sendAction("update-agent", {
-      agentId: agent.value.id,
+      agentname: agent.value.agentname,
       data: dataObject,
     });
 
@@ -262,7 +264,7 @@
 <template>
   <main>
     <TitleBar>
-      <h1>{{ agent.name || `Agent-${id}` }}</h1>
+      <h1>{{ agent.name || agent.agentname || `Agent-${id}` }}</h1>
     </TitleBar>
 
     <section class="top-section">
@@ -271,7 +273,7 @@
       <div class="basic-config" style="padding-top: 1em;">
         <div>
           <span class="label">Agent ID</span>
-          <span class="value">{{id}}</span>
+          <span class="value">{{agent.id}}</span>
         </div>
         <div>
           <span class="label">Identifier</span>
diff --git a/frontend/src/views/AgentCreate.vue b/frontend/src/views/AgentCreate.vue
index 5dd0ddb..ff3d4ed 100644
--- a/frontend/src/views/AgentCreate.vue
+++ b/frontend/src/views/AgentCreate.vue
@@ -17,6 +17,9 @@
     kind: "",
   });
 
+  // Whether to update `agentname` based on agent's name
+  var doSyncIdentifier = true;
+
   async function submitAgent () {
     const payload = {
       'name': agent.value.name,
@@ -29,7 +32,7 @@
     }
 
     if (agent.value.identifier) {
-      payload.identifier = agent.value.identifier;
+      payload.agentname = agent.value.identifier;
     }
 
     if (agent.value.temporary) {
@@ -43,7 +46,22 @@
     } else {
       ui.alert(`Created Agent "${payload.name}"`);
       backend.invalidateCache({agents: true});
-      ui.goto(`/agent/${response.agentId}`);
+      ui.goto(`/agent/${payload.agentname}`);
+    }
+  }
+
+  async function onIdentifierChange() {
+    if (agent.value.identifier == "") {
+      doSyncIdentifier = true;
+      syncIdentifier();
+    } else {
+      doSyncIdentifier = false;
+    }
+  }
+
+  async function syncIdentifier() {
+    if (doSyncIdentifier) {
+      agent.value.identifier = agent.value.name.toLowerCase().replace(/[^a-z0-9]+/g, '-');
     }
   }
 
@@ -59,8 +77,8 @@
     </TitleBar>
 
     <section class="container">
-      <input v-model="agent.name" placeholder="Name" />
-      <input v-model="agent.identifier" placeholder="Identifier (optional)" />
+      <input v-model="agent.name" placeholder="Name" @input="syncIdentifier($event)"/>
+      <input v-model="agent.identifier" placeholder="Identifier" @change="onIdentifierChange($event)"/>
       <select v-model="agent.kind" :class="{ placeholder: !agent.kind }">
         <option value="" disabled>Select type</option>
         <option v-for="k in kinds" :key="k" :value="k">{{ k }}</option>