mcp-config-manager 1.0.13 → 2.1.0

package/README.md

@@ -9,12 +9,15 @@ Simple CLI and web UI tool to manage Model Context Protocol (MCP) configurations
 - **Auto-detection**: Automatically discovers supported clients with existing MCP configuration files.
 - **Multi-client support**: Manage configs for a growing list of clients, including Claude, VS Code, Cursor, Windsurf, Gemini, and more. The tool can detect any client that follows the MCP specification.
 - **Simple CLI**: Command-line interface for quick operations
-- **Web UI**: Clean web interface with List and Kanban views
+- **Web UI**: Clean web interface with List, Kanban, and Server views
+- **MCP Directory**: Browse and add popular MCP servers from curated sources (mcpservers.org, awesome-remote-mcp-servers)
 - **Remote MCP Support**: Native HTTP and SSE transport support for remote MCP servers
-- **Kanban Board**: Drag-and-drop servers between clients with focus mode
+- **Kanban Board**: Drag-and-drop servers between clients with rainbow-colored cards and focus mode
 - **Focus Mode**: Click any server to highlight it across all clients with bulk actions
 - **Config Differentiation**: Visual indicators show when same server has different configs across clients
-- **MCP Logos**: Automatic logo loading for popular MCP servers (GitHub, Slack, Postgres, etc.)
+- **Auto-Icon Detection**: Automatic logo loading via logo.dev API - matches by name, npm package, or domain
+- **Custom Icon Editing**: Click any server icon to customize - search logos, use custom URL, or disable
+- **Dark Mode**: Full dark theme support with properly adapted colors
 - **JSON Editor**: Edit server configs as raw JSON or using forms
 - **Bulk Operations**: Copy servers to multiple clients at once
 - **Clipboard Support**: Quick copy server configs to clipboard
@@ -127,8 +130,8 @@ The web UI provides:
   - Remove from all clients button for each server
   - Bulk action toolbar with select all/none options
 - **Kanban View**: Drag-and-drop servers between clients
+  - Rainbow-colored cards for visual distinction (adapts to dark mode)
   - Full functionality on cards (edit, copy, export, delete)
-  - Visual icons for quick actions
   - Drag to copy servers between clients
   - **Focus Mode**: Click a server card to enter focus mode
     - Highlights the selected server across all clients
@@ -139,10 +142,24 @@ The web UI provides:
     - 🔗 Link icon: Identical config across all clients
     - ⚠️ Warning icon: Config or env vars differ between clients
     - Hover for detailed diff tooltip
-  - **MCP Logos**: Automatic logo display for known servers (GitHub, Postgres, Slack, etc.)
+  - **Auto-Icons**: Automatic logo detection for all servers via logo.dev
+    - High-quality logos from logo.dev API
+    - Matches known services from curated database
+    - Extracts service name from npm packages
+    - Shows initials when no logo found
+  - **Custom Icons**: Click any icon to customize
+    - Search logo.dev by company/domain name
+    - Use custom image URL
+    - Set to auto-detect or disable icon
 - **Server View**: Consolidated view of all servers across clients
   - Shows which clients each server is configured for
   - Bulk operations to add servers to multiple clients
+- **MCP Directory**: Browse and discover popular MCP servers
+  - Curated list from mcpservers.org and awesome-remote-mcp-servers
+  - Filter by category, auth type, and search
+  - One-click add to multiple clients
+  - Shows auth requirements (No Auth, API Key, OAuth)
+  - Credits to [jaw9c](https://github.com/jaw9c/awesome-remote-mcp-servers)
 - **Remote MCP Support**: Native transport type support for remote MCP servers
   - Choose between HTTP (Streamable HTTP) or SSE (Server-Sent Events) transport
   - Simply provide server name, transport type, and remote URL
@@ -152,6 +169,10 @@ The web UI provides:
 - **Multi-select Copy**: Copy servers to multiple clients at once
 - **Clipboard Support**: Quick copy server configs with one click
 - **Config Path Display**: See where each client's config file is located
+- **Dark Mode**: Full dark theme support with toggle in header
+  - Properly adapted colors for all views
+  - Rainbow cards use jewel-tones in dark mode
+  - Persists preference in localStorage
 - Visual overview of all clients
 - Add/edit/delete servers
 - Import/export configurations
@@ -315,6 +336,53 @@ npm run web
 
 This allows testing functionality without affecting real MCP client configurations.
 
+## What's New in v2.1.0
+
+### Custom Icon Editing
+Click any server icon to customize it:
+- **Search logos** by company name or domain via logo.dev API
+- **Custom URL** support for any image
+- **Auto-detect** option uses smart matching
+- **No icon** option shows initials only
+- Preferences saved in localStorage
+
+### Improved Logo Quality
+- Upgraded to logo.dev API for high-quality company logos
+- Better service name extraction from npm packages
+- Smarter domain matching with skip list for ambiguous names
+
+### UI Improvements
+- Icons properly aligned with server names
+- Copy button moved to header actions (cleaner card layout)
+- Simplified icon editor UI in modals
+
+---
+
+## What's New in v2.0.0
+
+### MCP Directory
+Browse and add popular MCP servers from curated sources without manual configuration:
+- **50+ servers** from mcpservers.org and awesome-remote-mcp-servers
+- **Filter by category**: Development, Productivity, Data, Communication, etc.
+- **Filter by auth type**: No Auth, API Key, OAuth
+- **One-click install** to multiple clients
+
+### Auto-Icon Detection
+All servers now automatically display logos:
+- Matches from curated logo database (GitHub, Slack, Notion, etc.)
+- Extracts service names from npm packages (`@modelcontextprotocol/server-github` → GitHub logo)
+- High-quality logos via logo.dev API
+- Shows initials when no logo found
+
+### Dark Mode Improvements
+- Rainbow-colored Kanban cards now use jewel-tones in dark mode
+- Proper text contrast on all colored backgrounds
+- Full theme support across all views and modals
+
+### Bug Fixes
+- Fixed server deletion in Server View (was prompting twice but not deleting)
+- Improved event handling reliability
+
 ## License
 
 MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-config-manager",
-  "version": "1.0.13",
+  "version": "2.1.0",
   "description": "Simple CLI and web UI to manage MCP configs across multiple AI clients",
   "main": "src/cli.js",
   "bin": {

package/public/index.html

@@ -16,6 +16,9 @@
                 <button id="kanbanViewBtn" class="view-btn">Kanban View</button>
                 <button id="serverViewBtn" class="view-btn">Server View</button>
             </div>
+            <div class="header-actions">
+                <button id="browsePopularMcpsBtn" class="btn btn-primary">MCP Directory</button>
+            </div>
             <div class="theme-switcher-container">
                 <label for="themeSwitcher" class="theme-switcher-label">Dark Mode</label>
                 <label class="theme-switcher" for="themeSwitcher">
@@ -69,19 +72,29 @@
         </div>
 
         <div id="kanbanViewContainer" style="display: none;">
-            <div class="sort-options">
-                <label for="kanbanSort">Sort by:</label>
-                <select id="kanbanSort">
-                    <option value="name-asc">Name (A-Z)</option>
-                    <option value="name-desc">Name (Z-A)</option>
-                    <option value="servers-asc">Servers (Low to High)</option>
-                    <option value="servers-desc">Servers (High to Low)</option>
-                </select>
+            <div class="kanban-header">
+                <div class="sort-options">
+                    <label for="kanbanSort">Sort by:</label>
+                    <select id="kanbanSort">
+                        <option value="name-asc">Name (A-Z)</option>
+                        <option value="name-desc">Name (Z-A)</option>
+                        <option value="servers-asc">Servers (Low to High)</option>
+                        <option value="servers-desc">Servers (High to Low)</option>
+                    </select>
+                </div>
+                <div class="kanban-actions">
+                    <button id="kanbanAddServerBtn" class="btn btn-primary">+ Add Server</button>
+                </div>
             </div>
         </div>
 
         <div id="serverViewContainer" style="display: none;">
-            <h2>All Servers</h2>
+            <div class="server-view-header">
+                <h2>All Servers</h2>
+                <div class="server-view-actions">
+                    <button id="serverViewAddServerBtn" class="btn btn-primary">+ Add Server</button>
+                </div>
+            </div>
             <div class="server-list-all" id="allServersList"></div>
         </div>
     </div>
@@ -99,11 +112,18 @@
                 <div id="formTab" class="tab-content active">
                     <div class="form-group">
                         <label for="serverName">Server Name</label>
-                        <input type="text" id="serverName" name="serverName" required>
+                        <div class="server-name-row">
+                            <input type="text" id="serverName" name="serverName" required>
+                            <div class="icon-edit-trigger" id="iconEditTrigger" title="Edit icon">
+                                <div class="icon-preview-mini" id="iconPreviewMini"></div>
+                                <svg class="pencil-icon" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+                                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+                                </svg>
+                            </div>
+                        </div>
                     </div>
 
-
-
                     <div class="form-group">
                         <label for="serverCommand">Command</label>
                         <input type="text" id="serverCommand" name="serverCommand" placeholder="e.g., npx">
@@ -327,12 +347,77 @@
         </div>
     </div>
 
-    <script type="module" src="js/utils.js?v=3"></script>
-    <script type="module" src="js/api.js?v=3"></script>
-    <script type="module" src="js/modals.js?v=3"></script>
-    <script type="module" src="js/clientView.js?v=3"></script>
-    <script type="module" src="js/kanbanView.js?v=3"></script>
-    <script type="module" src="js/serverView.js?v=3"></script>
-    <script type="module" src="js/main.js?v=3"></script>
+    <!-- Select Client for Add Server Modal -->
+    <div id="selectClientModal" class="modal" style="display: none;">
+        <div class="modal-content">
+            <h3>Select Client</h3>
+            <p>Choose which client to add the new server to:</p>
+            <form id="selectClientForm">
+                <div class="form-group">
+                    <div id="selectClientList" class="checkbox-list client-select-list"></div>
+                </div>
+                <div class="modal-actions">
+                    <button type="submit" class="btn btn-primary">Continue</button>
+                    <button type="button" id="cancelSelectClient" class="btn btn-secondary">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <!-- Icon Search Modal -->
+    <div id="iconSearchModal" class="modal" style="display: none;">
+        <div class="modal-content modal-small">
+            <h3>Change Icon</h3>
+            <p class="modal-description">Search by domain, paste a URL, or use auto-detect:</p>
+            <div class="form-group">
+                <input type="text" id="iconSearchInput" placeholder="github.com, https://... or company name">
+            </div>
+            <div class="icon-search-results" id="iconSearchResults">
+                <div class="icon-search-hint">Type a domain or company name and press Enter</div>
+            </div>
+            <div class="icon-search-suggestions" id="iconSearchSuggestions">
+                <div class="suggestions-label">Popular services:</div>
+                <div class="suggestions-grid" id="suggestionsGrid"></div>
+            </div>
+            <div class="modal-actions">
+                <button type="button" id="confirmIconSearch" class="btn btn-primary" disabled>Select</button>
+                <button type="button" id="cancelIconSearch" class="btn btn-secondary">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Popular MCPs Modal -->
+    <div id="popularMcpsModal" class="modal" style="display: none;">
+        <div class="modal-content modal-wide">
+            <span class="close" id="closePopularMcps">&times;</span>
+            <h3>Browse Popular MCPs</h3>
+            <div class="popular-mcps-filters">
+                <input type="text" id="popularMcpsSearch" placeholder="Search servers...">
+                <select id="popularMcpsCategory">
+                    <option value="">All Categories</option>
+                </select>
+                <select id="popularMcpsAuth">
+                    <option value="">All Auth Types</option>
+                    <option value="none">No Auth Required</option>
+                    <option value="api-key">API Key</option>
+                    <option value="oauth">OAuth</option>
+                </select>
+            </div>
+            <div id="popularMcpsList" class="popular-mcps-grid"></div>
+            <div class="popular-mcps-attribution">
+                Data from <a href="https://mcpservers.org" target="_blank" rel="noopener">mcpservers.org</a>
+                and <a href="https://github.com/jaw9c/awesome-remote-mcp-servers" target="_blank" rel="noopener">awesome-remote-mcp-servers</a> by jaw9c
+            </div>
+        </div>
+    </div>
+
+    <script type="module" src="js/utils.js?v=4"></script>
+    <script type="module" src="js/api.js?v=4"></script>
+    <script type="module" src="js/modals.js?v=4"></script>
+    <script type="module" src="js/clientView.js?v=4"></script>
+    <script type="module" src="js/kanbanView.js?v=4"></script>
+    <script type="module" src="js/serverView.js?v=4"></script>
+    <script type="module" src="js/popularMcps.js?v=4"></script>
+    <script type="module" src="js/main.js?v=4"></script>
 </body>
 </html>

package/public/js/clientView.js

@@ -1,9 +1,11 @@
 import { listClientsApi, getClientConfigApi, deleteServerApi } from './api.js';
 import { showServerModal, copyServer, copyToClipboard, exportServer, deleteServer, removeFromAll, updateBulkActions, selectAllServers, deselectAllServers, deleteSelected } from './modals.js';
+import { getServerLogo, getInitials } from './logoService.js';
 
 let currentClient = null;
 let clients = [];
 let loadClientsCallback = null; // Callback to main.js to reload all clients
+let serverListListenerAttached = false; // Track if event listener is already attached
 
 export function initClientView(allClients, currentClientId, loadClientsFn) {
     clients = allClients;
@@ -124,11 +126,19 @@ function renderServerList(servers) {
             }
         }
 
+        const initials = getInitials(name);
         card.innerHTML = `
             <div class="server-header">
                 <input type="checkbox" class="server-checkbox" data-server="${name}">
-                <span class="server-name">${name}</span>
+                <div class="server-info">
+                    <div class="server-logo-container">
+                        <img src="" class="server-logo" alt="" style="display:none;width:28px;height:28px" data-server="${name}" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+                        <div class="server-logo-fallback" style="width:28px;height:28px;font-size:11px">${initials}</div>
+                    </div>
+                    <span class="server-name">${name}</span>
+                </div>
                 <div class="server-actions">
+                    <button class="icon-btn copy-to-clipboard-btn" data-server-name="${name}" title="Copy to Clipboard">📋</button>
                     <button class="btn btn-small btn-secondary edit-server-btn" data-server-name="${name}">Edit</button>
                     <button class="btn btn-small btn-secondary export-server-btn" data-server-name="${name}">Export</button>
                     <button class="btn btn-small btn-danger delete-server-btn" data-server-name="${name}">Delete</button>
@@ -138,11 +148,21 @@ function renderServerList(servers) {
                 ${transportHtml}
                 ${server.command ? `<div class="detail-row"><strong>Command:</strong> ${server.command}</div>` : ''}
                 ${server.args ? `<div class="detail-row"><strong>Args:</strong> ${server.args.join(' ')}</div>` : ''}
-                <div class="detail-row"><button class="icon-btn secondary copy-to-clipboard-btn" data-server-name="${name}" title="Copy to Clipboard">📋</button></div>
             </div>
         `;
 
         serverList.appendChild(card);
+
+        // Load logo asynchronously
+        const imgElement = card.querySelector('.server-logo');
+        getServerLogo(name, server).then(logoUrl => {
+            if (logoUrl && imgElement) {
+                imgElement.src = logoUrl;
+                imgElement.style.display = 'block';
+                const fallback = imgElement.nextElementSibling;
+                if (fallback) fallback.style.display = 'none';
+            }
+        });
     }
 
     attachClientViewEventListeners();
@@ -153,24 +173,38 @@ function attachClientViewEventListeners() {
         checkbox.onchange = updateBulkActions;
     });
 
-    document.getElementById('deleteSelectedBtn').onclick = () => deleteSelected(loadClientServers, null, window.loadClients); // Call deleteSelected from modals.js
-    document.getElementById('selectAllServersBtn').onclick = selectAllServers;
-    document.getElementById('deselectAllServersBtn').onclick = deselectAllServers;
+    const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
+    const selectAllServersBtn = document.getElementById('selectAllServersBtn');
+    const deselectAllServersBtn = document.getElementById('deselectAllServersBtn');
 
-    const serverList = document.getElementById('serverList');
-    serverList.addEventListener('click', (e) => {
-        if (e.target.classList.contains('delete-server-btn')) {
-            deleteServerFromClientView(e.target.dataset.serverName);
-        } else if (e.target.classList.contains('edit-server-btn')) {
-            editServerFromClientView(e.target.dataset.serverName);
-        } else if (e.target.classList.contains('copy-server-btn')) {
-            copyServerFromClientView(e.target.dataset.serverName);
-        } else if (e.target.classList.contains('copy-to-clipboard-btn')) {
-            copyToClipboardFromClientView(e.target.dataset.serverName, e);
-        } else if (e.target.classList.contains('export-server-btn')) {
-            exportServerFromClientView(e.target.dataset.serverName);
-        }
-    });
+    if (deleteSelectedBtn) {
+        deleteSelectedBtn.onclick = () => deleteSelected(loadClientServers, null, window.loadClients);
+    }
+    if (selectAllServersBtn) {
+        selectAllServersBtn.onclick = selectAllServers;
+    }
+    if (deselectAllServersBtn) {
+        deselectAllServersBtn.onclick = deselectAllServers;
+    }
+
+    // Only attach the serverList click listener once to avoid multiple handlers
+    if (!serverListListenerAttached) {
+        const serverList = document.getElementById('serverList');
+        serverList.addEventListener('click', (e) => {
+            if (e.target.classList.contains('delete-server-btn')) {
+                deleteServerFromClientView(e.target.dataset.serverName);
+            } else if (e.target.classList.contains('edit-server-btn')) {
+                editServerFromClientView(e.target.dataset.serverName);
+            } else if (e.target.classList.contains('copy-server-btn')) {
+                copyServerFromClientView(e.target.dataset.serverName);
+            } else if (e.target.classList.contains('copy-to-clipboard-btn')) {
+                copyToClipboardFromClientView(e.target.dataset.serverName, e);
+            } else if (e.target.classList.contains('export-server-btn')) {
+                exportServerFromClientView(e.target.dataset.serverName);
+            }
+        });
+        serverListListenerAttached = true;
+    }
 }
 
 // Wrapper functions to pass callbacks

package/public/js/iconPreferences.js

@@ -0,0 +1,98 @@
+/**
+ * Icon Preferences Service
+ * Stores custom icon preferences in localStorage
+ *
+ * Preference types:
+ * - 'auto': Use automatic detection (default behavior)
+ * - 'url': Use a custom URL
+ * - 'logodev': Use logo.dev with a specific domain
+ * - 'none': Show initials only (no icon)
+ */
+
+const STORAGE_KEY = 'mcp-custom-icons';
+
+/**
+ * Get all icon preferences from localStorage
+ * @returns {object} Map of serverName -> { type, value }
+ */
+export function getAllIconPreferences() {
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return stored ? JSON.parse(stored) : {};
+    } catch (error) {
+        console.error('Failed to load icon preferences:', error);
+        return {};
+    }
+}
+
+/**
+ * Save all icon preferences to localStorage
+ * @param {object} preferences - Map of serverName -> { type, value }
+ */
+function saveAllIconPreferences(preferences) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
+    } catch (error) {
+        console.error('Failed to save icon preferences:', error);
+    }
+}
+
+/**
+ * Get icon preference for a specific server
+ * @param {string} serverName - The server name
+ * @returns {object|null} { type, value } or null if no custom preference
+ */
+export function getIconPreference(serverName) {
+    const preferences = getAllIconPreferences();
+    return preferences[serverName] || null;
+}
+
+/**
+ * Set icon preference for a server
+ * @param {string} serverName - The server name
+ * @param {string} type - 'auto' | 'url' | 'logodev' | 'none'
+ * @param {string} value - URL or domain (depending on type)
+ */
+export function setIconPreference(serverName, type, value = null) {
+    const preferences = getAllIconPreferences();
+
+    if (type === 'auto') {
+        // Remove custom preference to use auto-detection
+        delete preferences[serverName];
+    } else {
+        preferences[serverName] = { type, value };
+    }
+
+    saveAllIconPreferences(preferences);
+}
+
+/**
+ * Remove icon preference for a server (revert to auto)
+ * @param {string} serverName - The server name
+ */
+export function removeIconPreference(serverName) {
+    const preferences = getAllIconPreferences();
+    delete preferences[serverName];
+    saveAllIconPreferences(preferences);
+}
+
+/**
+ * Migrate icon preference when server is renamed
+ * @param {string} oldName - Old server name
+ * @param {string} newName - New server name
+ */
+export function migrateIconPreference(oldName, newName) {
+    const preferences = getAllIconPreferences();
+    if (preferences[oldName]) {
+        preferences[newName] = preferences[oldName];
+        delete preferences[oldName];
+        saveAllIconPreferences(preferences);
+    }
+}
+
+/**
+ * Clear all icon preferences
+ */
+export function clearAllIconPreferences() {
+    localStorage.removeItem(STORAGE_KEY);
+}

package/public/js/kanbanView.js

@@ -1,12 +1,12 @@
 import { getClientConfigApi, copyServerApi, deleteServerApi, getAllServersApi } from './api.js';
 import { showServerModal, editServer, copyToClipboard, exportServer } from './modals.js';
+import { loadStaticLogos, getServerLogo as getServerLogoAsync, getInitials } from './logoService.js';
 
 let clients = [];
 let loadClientsCallback = null;
 let listenersAttached = false;
 let focusedServer = null; // { serverName, clientId }
 let allServersData = null; // Cache for config comparison
-let mcpLogos = null; // Cache for MCP logo database
 
 export function initKanbanView(allClients, loadClientsFn) {
     clients = allClients;
@@ -17,22 +17,10 @@ export function initKanbanView(allClients, loadClientsFn) {
         listenersAttached = true;
     }
     // Load logo database and server data
-    loadMcpLogos();
+    loadStaticLogos();
     loadAllServersData();
 }
 
-async function loadMcpLogos() {
-    try {
-        const response = await fetch('/mcp-logos.json');
-        if (response.ok) {
-            mcpLogos = await response.json();
-        }
-    } catch (error) {
-        console.warn('Could not load MCP logos database:', error);
-        mcpLogos = {};
-    }
-}
-
 async function loadAllServersData() {
     try {
         allServersData = await getAllServersApi();
@@ -225,9 +213,10 @@ function getServerColor(serverName) {
     }
     const hue = hash % 360;
     const isDark = document.body.classList.contains('dark-theme');
-    // Use lighter backgrounds for better text visibility
-    const lightness = isDark ? 20 : 92;
-    const saturation = isDark ? 30 : 50;
+    // Dark mode: darker, more saturated colors that work on dark backgrounds
+    // Light mode: light pastel backgrounds
+    const lightness = isDark ? 25 : 92;
+    const saturation = isDark ? 40 : 50;
     return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }
 
@@ -367,27 +356,16 @@ function buildConfigDiffTooltip(serverInfo, diffType) {
     return lines.join('\n');
 }
 
-function getServerLogo(serverName, server) {
-    if (!mcpLogos) return null;
-
-    // Check direct match in logo database
-    const nameLower = serverName.toLowerCase();
-    if (mcpLogos[nameLower]) return mcpLogos[nameLower];
-
-    // Check common patterns
-    for (const [key, url] of Object.entries(mcpLogos)) {
-        if (nameLower.includes(key) || key.includes(nameLower)) {
-            return url;
+// Sync wrapper that loads logo asynchronously and updates the DOM
+function loadServerLogoAsync(serverName, server, imgElement) {
+    getServerLogoAsync(serverName, server).then(logoUrl => {
+        if (logoUrl && imgElement && imgElement.parentNode) {
+            imgElement.src = logoUrl;
+            imgElement.style.display = 'block';
+            const fallback = imgElement.nextElementSibling;
+            if (fallback) fallback.style.display = 'none';
         }
-    }
-
-    // Check npm package name in command/args
-    if (server.command === 'npx' && server.args?.length > 0) {
-        const packageName = server.args[0].replace(/^@/, '').split('/').pop().replace(/-mcp.*$/, '');
-        if (mcpLogos[packageName]) return mcpLogos[packageName];
-    }
-
-    return null;
+    });
 }
 
 function createServerCard(clientId, serverName, server) {
@@ -437,11 +415,12 @@ function createServerCard(clientId, serverName, server) {
         ? `<span class="config-indicator ${configIndicator.className}" title="${configIndicator.tooltip.replace(/"/g, '&quot;')}">${configIndicator.icon}</span>`
         : '';
 
-    // Get logo
-    const logoUrl = getServerLogo(serverName, server);
-    const logoHtml = logoUrl
-        ? `<img src="${logoUrl}" class="server-logo" alt="" onerror="this.style.display='none'">`
-        : '';
+    // Create logo placeholder with initials fallback
+    const initials = getInitials(serverName);
+    const logoHtml = `
+        <img src="" class="server-logo" alt="" style="display:none" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+        <div class="server-logo-fallback" style="width:24px;height:24px;font-size:10px">${initials}</div>
+    `;
 
     card.innerHTML = `
         <div class="kanban-card-header">
@@ -467,6 +446,10 @@ function createServerCard(clientId, serverName, server) {
         showContextMenu(e, clientId, serverName);
     });
 
+    // Load logo asynchronously
+    const imgElement = card.querySelector('.server-logo');
+    loadServerLogoAsync(serverName, server, imgElement);
+
     return card;
 }