From 48603b993d77624fefe1f669a184dd002860d890 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 19 Jan 2026 17:59:06 +0530
Subject: [PATCH] feat: Update MCP connector icon and UI styling

---
 .../connect-forms/components/mcp-connect-form.tsx      | 10 ++++++----
 surfsense_web/contracts/enums/connectorIcons.tsx       |  2 +-
 .../public/connectors/modelcontextprotocol.svg         |  1 +
 3 files changed, 8 insertions(+), 5 deletions(-)
 create mode 100644 surfsense_web/public/connectors/modelcontextprotocol.svg

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
index a671c91e8..68ec12610 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
@@ -122,10 +122,12 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 	return (
 		<div className="space-y-6 pb-6">
 			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 [&>svg]:top-2 sm:[&>svg]:top-3">
-			<Server className="h-4 w-4 shrink-0" />
-			<AlertDescription className="text-[10px] sm:text-xs">
-				Connect to an MCP (Model Context Protocol) server. Each MCP server is added as a separate connector.
-			</AlertDescription>
+			<div className="flex items-center gap-2">
+				<Server className="h-4 w-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Connect to an MCP (Model Context Protocol) server. Each MCP server is added as a separate connector.
+				</AlertDescription>
+			</div>
 		</Alert>
 
 			<form id="mcp-connect-form" onSubmit={handleSubmit} className="space-y-6">
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index 5f147b63b..9350b6a1e 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -65,7 +65,7 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
 			return <IconUsersGroup {...iconProps} />;
 		case EnumConnectorName.MCP_CONNECTOR:
-			return <Webhook {...iconProps} />;
+			return <Image src="/connectors/modelcontextprotocol.svg" alt="MCP" {...imgProps} />;
 		// Additional cases for non-enum connector types
 		case "YOUTUBE_CONNECTOR":
 			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
diff --git a/surfsense_web/public/connectors/modelcontextprotocol.svg b/surfsense_web/public/connectors/modelcontextprotocol.svg
new file mode 100644
index 000000000..e9c3fa46e
--- /dev/null
+++ b/surfsense_web/public/connectors/modelcontextprotocol.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18a.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0a2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18a.835.835 0 0 0 1.18 0l.1-.098l7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0a.835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902a4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18a.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0a2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18a.84.84 0 0 0-.59-.245"/></svg>
\ No newline at end of file