diff --git a/web-app/src/hooks/useMCPServers.ts b/web-app/src/hooks/useMCPServers.ts
index b19130ae9..1a4c6f1d1 100644
--- a/web-app/src/hooks/useMCPServers.ts
+++ b/web-app/src/hooks/useMCPServers.ts
@@ -27,6 +27,7 @@ type MCPServerStoreState = {
   setLeftPanel: (value: boolean) => void
   addServer: (key: string, config: MCPServerConfig) => void
   editServer: (key: string, config: MCPServerConfig) => void
+  renameServer: (oldKey: string, newKey: string, config: MCPServerConfig) => void
   deleteServer: (key: string) => void
   setServers: (servers: MCPServers) => void
   syncServers: () => Promise<void>
@@ -60,6 +61,27 @@ export const useMCPServers = create<MCPServerStoreState>()((set, get) => ({
       const mcpServers = { ...state.mcpServers, [key]: config }
       return { mcpServers }
     }),
+
+  // Rename a server while preserving its position
+  renameServer: (oldKey, newKey, config) =>
+    set((state) => {
+      // Only proceed if the server exists
+      if (!state.mcpServers[oldKey]) return state
+
+      const entries = Object.entries(state.mcpServers)
+      const mcpServers: MCPServers = {}
+
+      // Rebuild the object with the same order, replacing the old key with the new key
+      entries.forEach(([key, serverConfig]) => {
+        if (key === oldKey) {
+          mcpServers[newKey] = config
+        } else {
+          mcpServers[key] = serverConfig
+        }
+      })
+
+      return { mcpServers }
+    }),
   setServers: (servers) =>
     set((state) => {
       const mcpServers = { ...state.mcpServers, ...servers }
diff --git a/web-app/src/routes/settings/mcp-servers.tsx b/web-app/src/routes/settings/mcp-servers.tsx
index c95c47a2d..f4fa28d78 100644
--- a/web-app/src/routes/settings/mcp-servers.tsx
+++ b/web-app/src/routes/settings/mcp-servers.tsx
@@ -93,6 +93,7 @@ function MCPServers() {
     mcpServers,
     addServer,
     editServer,
+    renameServer,
     deleteServer,
     syncServers,
     syncServersAndRestart,
@@ -137,22 +138,27 @@ function MCPServers() {
   }
 
   const handleSaveServer = async (name: string, config: MCPServerConfig) => {
-    toggleServer(name, false)
     if (editingKey) {
-      // If server name changed, delete old one and add new one
+      // If server name changed, rename it while preserving position
       if (editingKey !== name) {
-        deleteServer(editingKey)
-        addServer(name, config)
+        toggleServer(editingKey, false)
+        renameServer(editingKey, name, config)
+        toggleServer(name, true)
+        // Restart servers to update tool references with new server name
+        syncServersAndRestart()
       } else {
+        toggleServer(editingKey, false)
         editServer(editingKey, config)
+        toggleServer(editingKey, true)
+        syncServers()
       }
     } else {
       // Add new server
+      toggleServer(name, false)
       addServer(name, config)
+      toggleServer(name, true)
+      syncServers()
     }
-
-    syncServers()
-    toggleServer(name, true)
   }
 
   const handleEdit = (serverKey: string) => {