diff --git a/tools/ui/src/lib/constants/recommended-mcp-servers.constants.ts b/tools/ui/src/lib/constants/recommended-mcp-servers.constants.ts
index 6a550ee969..ed69dc0af8 100644
--- a/tools/ui/src/lib/constants/recommended-mcp-servers.constants.ts
+++ b/tools/ui/src/lib/constants/recommended-mcp-servers.constants.ts
@@ -1,3 +1,4 @@
+import { base } from '$app/paths';
 import type { RecommendedMCPServer } from '$lib/types';
 
 // Suggested MCP servers shown as opt-in cards in the "Add New Server" dialog.
@@ -7,22 +8,22 @@ import type { RecommendedMCPServer } from '$lib/types';
 export const RECOMMENDED_MCP_SERVERS: RecommendedMCPServer[] = [
 	{
 		description: 'Search the web and fetch full page content as clean markdown.',
-		iconUrl: '/recommended-mcp/exa.ico',
+		iconUrl: `${base}/recommended-mcp/exa.ico`,
 		id: 'exa',
 		name: 'Exa',
 		url: 'https://mcp.exa.ai/mcp'
 	},
 	{
 		description: 'Search and browse AI models, datasets, spaces, and docs on the Hugging Face Hub.',
-		iconUrl: '/recommended-mcp/huggingface.ico',
+		iconUrl: `${base}/recommended-mcp/huggingface.ico`,
 		id: 'huggingface',
 		name: 'Hugging Face',
 		url: 'https://huggingface.co/mcp'
 	},
 	{
 		description: 'Search repositories, issues, pull requests and interact with code on GitHub.',
-		iconUrlDark: '/recommended-mcp/github-dark.png',
-		iconUrlLight: '/recommended-mcp/github-light.png',
+		iconUrlDark: `${base}/recommended-mcp/github-dark.png`,
+		iconUrlLight: `${base}/recommended-mcp/github-light.png`,
 		id: 'github',
 		name: 'GitHub',
 		needsAuthorization: true,
@@ -30,7 +31,7 @@ export const RECOMMENDED_MCP_SERVERS: RecommendedMCPServer[] = [
 	},
 	{
 		description: 'Browse up-to-date documentation and code examples for libraries and frameworks.',
-		iconUrl: '/recommended-mcp/context7.png',
+		iconUrl: `${base}/recommended-mcp/context7.png`,
 		id: 'context7',
 		name: 'Context7',
 		url: 'https://mcp.context7.com/mcp'