diff --git a/AGENTS.md b/AGENTS.md
index 6942da5..289147d 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1007,3 +1007,198 @@ Each registered tool must include:
 -   **Conflict Resolution**: Handles tool name conflicts across apps
 -   **Dependency Management**: Ensures app dependencies are properly loaded
 -   **Version Compatibility**: Supports tool versioning and compatibility checks
+
+## MCP Client Integration
+
+HUF supports the Model Context Protocol (MCP) for connecting to external tool providers. This allows agents to use tools from external MCP servers like Gmail, GitHub, Slack, databases, and more.
+
+### Overview
+
+HUF acts as an **MCP client only** - it connects to external MCP servers to consume their tools, but does not expose itself as an MCP server or gateway.
+
+```
+HUF Agent
+  └── Tool Registry
+        ├── Native Tools (Frappe CRUD, Custom Functions, App Provided)
+        └── MCP Tools (External)
+              ├── Gmail MCP
+              ├── GitHub MCP
+              ├── Frappe MCP
+              └── Any MCP-compatible server
+```
+
+### MCP DocTypes
+
+#### MCP Server
+
+Stores connection configuration for external MCP servers.
+
+-   **Python Class**: `MCPServer(Document)`
+-   **File**: `huf/huf/doctype/mcp_server/mcp_server.py`
+
+**Fields:**
+
+| Label | Fieldname | Type | Description |
+|:------|:----------|:-----|:------------|
+| **Server Name** | `server_name` | Data | Unique identifier (e.g., "gmail", "github") |
+| **Description** | `description` | Small Text | What this MCP server provides |
+| **Enabled** | `enabled` | Check | Whether this server is active |
+| **Transport Type** | `transport_type` | Select | `http` or `sse` |
+| **Server URL** | `server_url` | Data | MCP server endpoint URL |
+| **Auth Type** | `auth_type` | Select | `none`, `api_key`, `bearer_token`, `custom_header` |
+| **Auth Header Name** | `auth_header_name` | Data | Header name for authentication |
+| **Auth Header Value** | `auth_header_value` | Password | Encrypted auth token/key |
+| **Tool Namespace** | `tool_namespace` | Data | Optional prefix for tool names |
+| **Timeout** | `timeout_seconds` | Int | Request timeout (default: 30s) |
+| **Custom Headers** | `custom_headers` | Table | Additional HTTP headers |
+| **Available Tools** | `available_tools` | JSON | Cached tools from server (read-only) |
+| **Last Sync** | `last_sync` | Datetime | Last tool sync timestamp |
+
+**Server Actions:**
+- `sync_tools()`: Fetch and cache available tools from the MCP server
+
+#### Agent MCP Server
+
+Child table linking agents to MCP servers.
+
+-   **File**: `huf/huf/doctype/agent_mcp_server/agent_mcp_server.py`
+
+**Fields:**
+
+| Label | Fieldname | Type | Description |
+|:------|:----------|:-----|:------------|
+| **MCP Server** | `mcp_server` | Link | Link to `MCP Server` DocType |
+| **Enabled** | `enabled` | Check | Whether enabled for this agent |
+| **Tool Count** | `tool_count` | Int | Number of tools available (read-only) |
+
+### MCP Client Module
+
+#### `mcp_client.py`
+
+Core MCP client adapter located at `huf/ai/mcp_client.py`.
+
+**Key Functions:**
+
+-   **`create_mcp_tools(agent_doc)`**
+    -   Creates FunctionTool objects for all MCP tools available to an agent
+    -   Called from `sdk_tools.create_agent_tools()`
+    -   Returns list of `FunctionTool` objects
+
+-   **`execute_mcp_tool(server_name, tool_name, arguments)`**
+    -   Executes a tool call on an MCP server
+    -   Uses LiteLLM's experimental MCP client when available
+    -   Falls back to direct HTTP/JSON-RPC if needed
+
+-   **`sync_mcp_server_tools(server_name)` (Whitelisted)**
+    -   Fetches and caches available tools from an MCP server
+    -   Uses LiteLLM `load_mcp_tools()` with OpenAI format conversion
+
+-   **`test_mcp_connection(server_name)` (Whitelisted)**
+    -   Tests connectivity to an MCP server
+
+-   **`get_agent_mcp_servers(agent_name)` (Whitelisted)**
+    -   Gets MCP servers linked to an agent with full details
+
+-   **`get_available_mcp_servers()` (Whitelisted)**
+    -   Gets all enabled MCP servers
+
+### Tool Loading Flow
+
+When an agent runs, tools are loaded in this order:
+
+1. **MCP Tools**: From linked MCP servers via `agent_mcp_server` child table
+2. **Native Tools**: From `Agent Tool Function` documents via `agent_tool` child table
+
+```python
+# In sdk_tools.py
+def create_agent_tools(agent) -> list[FunctionTool]:
+    tools = []
+    
+    # 1. Load MCP tools from linked MCP servers
+    if hasattr(agent, "agent_mcp_server") and agent.agent_mcp_server:
+        from huf.ai.mcp_client import create_mcp_tools
+        mcp_tools = create_mcp_tools(agent)
+        tools.extend(mcp_tools)
+    
+    # 2. Load native tools from Agent Tool Function documents
+    if hasattr(agent, "agent_tool") and agent.agent_tool:
+        # ... existing native tool loading ...
+    
+    return tools
+```
+
+### MCP Tool Execution Flow
+
+When the LLM calls an MCP tool during agent execution:
+
+1. LLM returns tool call with tool name and arguments
+2. `litellm.py` finds the tool by name in the agent's tools list
+3. Tool's `on_invoke_tool()` is called (same as native tools)
+4. For MCP tools, this triggers `execute_mcp_tool()` which:
+   - Builds authentication headers from MCP Server config
+   - Calls the MCP server via HTTP/JSON-RPC or LiteLLM MCP client
+   - Returns the result in HUF tool-result format
+5. Result is fed back to LLM for next iteration
+
+### Authentication
+
+MCP servers support multiple authentication methods:
+
+-   **None**: No authentication required
+-   **API Key**: Custom header with API key value
+-   **Bearer Token**: Standard `Authorization: Bearer <token>` header
+-   **Custom Header**: Any custom header name/value pair
+
+Auth credentials are stored encrypted using Frappe's Password field type.
+
+### Tool Namespacing
+
+MCP tools can be namespaced to avoid conflicts:
+
+-   If `tool_namespace` is set on MCP Server (e.g., "gmail")
+-   Tool names are prefixed: `send_email` → `gmail.send_email`
+-   Tool descriptions include source: `[MCP:gmail] Send an email...`
+
+### Dependencies
+
+The MCP client uses:
+
+-   **LiteLLM's experimental MCP client** (`litellm.experimental_mcp_client`)
+    -   `load_mcp_tools()`: Fetch tools in OpenAI format
+    -   `call_openai_tool()`: Execute tool calls
+-   **Direct HTTP fallback**: If LiteLLM MCP client unavailable
+    -   Uses JSON-RPC 2.0 format for MCP protocol
+
+### Frontend Integration
+
+The React frontend supports MCP server management:
+
+-   **ToolsTab Component** (`frontend/src/components/agent/ToolsTab.tsx`)
+    -   Displays linked MCP servers with status badges
+    -   Supports add/remove/toggle/sync actions
+    -   Shows tool count and last sync time
+
+-   **MCP API Service** (`frontend/src/services/mcpApi.ts`)
+    -   `getMCPServers()`: List all MCP servers
+    -   `getAgentMCPServers()`: Get MCP servers for an agent
+    -   `testMCPConnection()`: Test server connectivity
+    -   `syncMCPTools()`: Sync tools from server
+
+### Example Usage
+
+1. **Create MCP Server** in Frappe:
+   - Name: "github"
+   - URL: "https://mcp.github.example.com/mcp"
+   - Auth: Bearer Token with GitHub PAT
+
+2. **Sync Tools** to discover available tools
+
+3. **Link to Agent** via the "Tools and MCP" tab
+
+4. **Agent can now use** GitHub tools like `list_prs`, `create_issue`, etc.
+
+### What HUF Is NOT
+
+-   ❌ An MCP Server (does not expose tools via MCP)
+-   ❌ An MCP Gateway/Proxy
+-   ❌ An OAuth broker (simple header-based auth only)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9128d65..8bb72e3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ import { UnifiedLayout } from './layouts/UnifiedLayout';
 import { HomeHeaderActions } from './components/HomeHeaderActions';
 import { AgentsHeaderActions } from './components/AgentsHeaderActions';
 import { ChatHeaderActions } from './components/ChatHeaderActions';
+import { McpHeaderActions } from './components/McpHeaderActions';
 import { HomePage } from './pages/HomePage';
 import { AgentsPage } from './pages/AgentsPage';
 import { AgentFormPageWrapper } from './pages/AgentFormPageWrapper';
@@ -23,6 +24,8 @@ import Executions from './pages/Executions';
 import { AgentRunDetailPage } from './pages/AgentRunDetailPage';
 import { useEffect } from 'react';
 import { createFrappeSocket } from './utils/socket';
+import { McpDetailsPageWrapper } from './pages/McpDetailsPageWrapper';
+import McpListingPage from './pages/McpListingPage';
 
 function App() {
   useEffect(() => {
@@ -196,6 +199,24 @@ function App() {
               </ProtectedRoute>
             }
           />
+          <Route
+            path="/mcp"
+            element={
+              <ProtectedRoute>
+                <UnifiedLayout headerActions={<McpHeaderActions />}>
+                  <McpListingPage />
+                </UnifiedLayout>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/mcp/:mcpId"
+            element={
+              <ProtectedRoute>
+                <McpDetailsPageWrapper />
+              </ProtectedRoute>
+            }
+          />
           <Route
             path="*"
             element={
diff --git a/frontend/src/components/McpHeaderActions.tsx b/frontend/src/components/McpHeaderActions.tsx
new file mode 100644
index 0000000..8405819
--- /dev/null
+++ b/frontend/src/components/McpHeaderActions.tsx
@@ -0,0 +1,19 @@
+import { Plus } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from './ui/button';
+
+export function McpHeaderActions() {
+  const navigate = useNavigate();
+
+  const handleNewMcp = () => {
+    navigate('/mcp/new');
+  };
+
+  return (
+    <Button onClick={handleNewMcp} size="sm">
+      <Plus className="w-4 h-4 mr-2" />
+      New MCP Server
+    </Button>
+  );
+}
+
diff --git a/frontend/src/components/agent/ToolsTab.tsx b/frontend/src/components/agent/ToolsTab.tsx
index 71f809d..b19a551 100644
--- a/frontend/src/components/agent/ToolsTab.tsx
+++ b/frontend/src/components/agent/ToolsTab.tsx
@@ -1,31 +1,24 @@
-import { Plus, Server, Plug, Trash2 } from 'lucide-react';
+import { Plus, Server, Plug, Trash2, RefreshCw } from 'lucide-react';
+import { Link } from 'react-router-dom';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Switch } from '@/components/ui/switch';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { toast } from 'sonner';
 import type { AgentToolFunctionRef, AgentToolType } from '@/types/agent.types';
-
-interface MCPItem {
-  id: string;
-  name: string;
-  description: string;
-  provider: string;
-  status: 'connected' | 'inactive';
-}
-
-const mockMCPs: MCPItem[] = [
-  { id: 'm1', name: 'Zendesk MCP', description: 'Query and manage Zendesk tickets', provider: 'Zendesk', status: 'connected' },
-  { id: 'm2', name: 'Slack MCP', description: 'Send messages and read channels', provider: 'Slack', status: 'connected' },
-  { id: 'm3', name: 'PostgreSQL MCP', description: 'Query customer database', provider: 'PostgreSQL', status: 'connected' },
-  { id: 'm4', name: 'Stripe MCP', description: 'Access payment and subscription data', provider: 'Stripe', status: 'inactive' },
-];
+import type { MCPServerRef } from '@/services/mcpApi';
 
 interface ToolsTabProps {
   selectedTools: AgentToolFunctionRef[];
   toolTypes: AgentToolType[];
   onAddTools: () => void;
   onRemoveTool: (toolId: string) => void;
+  // MCP Server props
+  mcpServers?: MCPServerRef[];
+  onAddMCP?: () => void;
+  onRemoveMCP?: (serverId: string) => void;
+  onToggleMCP?: (serverId: string, enabled: boolean) => void;
+  onSyncMCP?: (serverId: string) => void;
+  mcpLoading?: boolean;
 }
 
 export function ToolsTab({
@@ -33,9 +26,67 @@ export function ToolsTab({
   toolTypes,
   onAddTools,
   onRemoveTool,
+  mcpServers = [],
+  onAddMCP,
+  onRemoveMCP,
+  onToggleMCP,
+  onSyncMCP,
+  mcpLoading = false,
 }: ToolsTabProps) {
+
+  const handleMCPAction = (action: string, serverId?: string) => {
+    switch (action) {
+      case 'add':
+        onAddMCP?.();
+        break;
+      case 'remove':
+        if (serverId) {
+          onRemoveMCP?.(serverId);
+        }
+        break;
+      case 'toggle':
+        if (serverId && onToggleMCP) {
+          const server = mcpServers.find(s => s.name === serverId);
+          if (server) {
+            // Toggle the enabled state - normalize current value first
+            const currentEnabled = isEnabled(server.enabled);
+            onToggleMCP(serverId, !currentEnabled);
+          }
+        }
+        break;
+      case 'sync':
+        if (serverId) {
+          onSyncMCP?.(serverId);
+        }
+        break;
+    }
+  };
+
+  // Helper to normalize enabled state (handles both boolean and number 0/1)
+  // If undefined, defaults to true (assume enabled if not specified)
+  const isEnabled = (value: boolean | number | undefined): boolean => {
+    if (value === undefined) return true; // Default to enabled if not specified
+    return value === true || value === 1;
+  };
+
+  const getStatusBadge = (server: MCPServerRef) => {
+    const agentEnabled = isEnabled(server.enabled);
+    
+    // If MCP server itself is explicitly disabled (not undefined), show "server disabled"
+    if (server.mcp_enabled !== undefined && !isEnabled(server.mcp_enabled)) {
+      return <Badge variant="secondary" className="text-xs shrink-0">server disabled</Badge>;
+    }
+    // If MCP server is enabled (or unknown) but agent has it disabled, show "disabled"
+    if (!agentEnabled) {
+      return <Badge variant="secondary" className="text-xs shrink-0">disabled</Badge>;
+    }
+    // Both enabled - show "connected"
+    return <Badge variant="default" className="text-xs shrink-0">connected</Badge>;
+  };
+
   return (
     <>
+      {/* Native Tools Section */}
       <Card>
         <CardHeader>
           <div className="flex items-center justify-between">
@@ -101,6 +152,7 @@ export function ToolsTab({
         </CardContent>
       </Card>
 
+      {/* MCP Servers Section */}
       <Card>
         <CardHeader>
           <div className="flex items-center justify-between">
@@ -111,11 +163,12 @@ export function ToolsTab({
               </CardTitle>
               <CardDescription>Connected MCP servers for extended capabilities</CardDescription>
             </div>
-            <Button 
+            <Button
               type="button"
-              size="sm" 
+              size="sm"
               variant="outline"
-              onClick={() => toast.info('Coming soon')}
+              onClick={() => handleMCPAction('add')}
+              disabled={mcpLoading}
             >
               <Plus className="w-4 h-4 mr-2" />
               Connect MCP
@@ -123,51 +176,92 @@ export function ToolsTab({
           </div>
         </CardHeader>
         <CardContent>
-          <div className="grid gap-3">
-            {mockMCPs.map((mcp) => (
-              <div
-                key={mcp.id}
-                className="flex items-start justify-between gap-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors"
+          {mcpServers.length === 0 ? (
+            <div className="text-center py-8">
+              <div className="flex justify-center mb-4">
+                <div className="rounded-full bg-muted p-3">
+                  <Plug className="w-6 h-6 text-muted-foreground" />
+                </div>
+              </div>
+              <p className="text-muted-foreground mb-2">No MCP servers connected</p>
+              <p className="text-xs text-muted-foreground mb-4">
+                Connect external MCP servers to extend agent capabilities with tools like Gmail, GitHub, Slack, and more.
+              </p>
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => handleMCPAction('add')}
               >
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <h4 className="font-medium text-sm">{mcp.name}</h4>
-                    <Badge variant="outline" className="text-xs shrink-0">
-                      {mcp.provider}
-                    </Badge>
-                    <Badge
-                      variant={mcp.status === 'connected' ? 'default' : 'secondary'}
-                      className="text-xs shrink-0"
+                <Plus className="w-4 h-4 mr-2" />
+                Connect MCP Server
+              </Button>
+            </div>
+          ) : (
+            <div className="">
+              {mcpServers.map((mcp) => (
+                <div
+                  key={mcp.name}
+                  className="flex items-start justify-between gap-3 rounded-lg border p-4 hover:bg-muted/50 transition-colors"
+                >
+                  <Link 
+                    to={`/mcp/${mcp.mcp_server}`}
+                    className="flex-1 min-w-0 overflow-hidden cursor-pointer"
+                  >
+                    <div className="flex items-center gap-2 mb-1 flex-wrap">
+                      <h4 className="font-medium text-sm">{mcp.server_name || mcp.mcp_server}</h4>
+                      {getStatusBadge(mcp)}
+                      {mcp.tool_count !== undefined && mcp.tool_count > 0 && (
+                        <Badge variant="outline" className="text-xs shrink-0">
+                          {mcp.tool_count} tools
+                        </Badge>
+                      )}
+                    </div>
+                    {mcp.description && (
+                      <p className="text-xs text-muted-foreground">{mcp.description}</p>
+                    )}
+                    {mcp.server_url && (
+                        <p className="text-xs text-muted-foreground mt-1" title={mcp.server_url}>
+                        {mcp.server_url}
+                      </p>
+                    )}
+                  </Link>
+                  <div className="flex items-center gap-1 shrink-0" onClick={(e) => e.stopPropagation()}>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleMCPAction('sync', mcp.name)}
+                      disabled={mcpLoading || (mcp.mcp_enabled !== undefined && !isEnabled(mcp.mcp_enabled))}
+                      title="Sync tools from MCP server"
                     >
-                      {mcp.status}
-                    </Badge>
+                      <RefreshCw className={`w-4 h-4 ${mcpLoading ? 'animate-spin' : ''}`} />
+                    </Button>
+                      <Switch
+                      checked={isEnabled(mcp.enabled)}
+                      disabled={mcpLoading || (mcp.mcp_enabled !== undefined && !isEnabled(mcp.mcp_enabled))}
+                      onCheckedChange={() => {
+                        // Only allow toggle if MCP server is enabled (or unknown/undefined)
+                        if (!mcpLoading && (mcp.mcp_enabled === undefined || isEnabled(mcp.mcp_enabled))) {
+                          handleMCPAction('toggle', mcp.name);
+                        }
+                      }}
+                    />
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleMCPAction('remove', mcp.name)}
+                      disabled={mcpLoading}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
                   </div>
-                  <p className="text-xs text-muted-foreground">{mcp.description}</p>
                 </div>
-                <div className="flex items-center gap-2">
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => toast.info('Coming soon')}
-                  >
-                    <Switch checked={mcp.status === 'connected'} className="pointer-events-none" />
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => toast.info('Coming soon')}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
-              </div>
-            ))}
-          </div>
+              ))}
+            </div>
+          )}
         </CardContent>
       </Card>
     </>
   );
-}
-
+}
\ No newline at end of file
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index ba67edc..2e4f5ce 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { Home, Bot, Workflow, Database, Plug, MessageSquare, Zap } from "lucide-react"
+import { Home, Bot, Workflow, Database, Plug, MessageSquare, Zap, Server } from "lucide-react"
 
 import { NavMain } from "@/components/nav-main"
 import { NavUser } from "@/components/nav-user"
@@ -48,6 +48,11 @@ const navItems = [
     url: "/providers",
     icon: Plug,
   },
+  {
+    title: "MCP Servers",
+    url: "/mcp",
+    icon: Server,
+  },
 ]
 
 // const systemItems = [
diff --git a/frontend/src/components/dashboard/LoadMoreButton.tsx b/frontend/src/components/dashboard/LoadMoreButton.tsx
new file mode 100644
index 0000000..dd410d1
--- /dev/null
+++ b/frontend/src/components/dashboard/LoadMoreButton.tsx
@@ -0,0 +1,40 @@
+import { Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface LoadMoreButtonProps {
+  hasMore: boolean;
+  loading: boolean;
+  onLoadMore: () => void;
+  disabled?: boolean;
+}
+
+export function LoadMoreButton({
+  hasMore,
+  loading,
+  onLoadMore,
+  disabled = false,
+}: LoadMoreButtonProps) {
+  if (!hasMore || disabled) {
+    return null;
+  }
+
+  return (
+    <div className="flex justify-center py-8">
+      <Button
+        onClick={onLoadMore}
+        disabled={loading}
+        variant="outline"
+      >
+        {loading ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            Loading...
+          </>
+        ) : (
+          'Load More'
+        )}
+      </Button>
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/dashboard/cards/BaseCard.tsx b/frontend/src/components/dashboard/cards/BaseCard.tsx
index 49d4932..691717d 100644
--- a/frontend/src/components/dashboard/cards/BaseCard.tsx
+++ b/frontend/src/components/dashboard/cards/BaseCard.tsx
@@ -18,7 +18,7 @@ export function BaseCard({
   return (
     <Card
       className={cn(
-        'relative bg-card text-card-foreground rounded-md border shadow-sm',
+        'relative bg-card text-card-foreground rounded-md border shadow-sm h-full',
         hover && 'transition-shadow',
         onClick && 'cursor-pointer',
         hover && onClick && 'hover:shadow-lg',
diff --git a/frontend/src/components/dashboard/cards/ItemCard.tsx b/frontend/src/components/dashboard/cards/ItemCard.tsx
index 6e87b9c..90178d9 100644
--- a/frontend/src/components/dashboard/cards/ItemCard.tsx
+++ b/frontend/src/components/dashboard/cards/ItemCard.tsx
@@ -4,6 +4,7 @@ import { CardHeader, CardTitle, CardDescription, CardContent, CardAction } from
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { BaseCard } from './BaseCard';
+import { cn } from '@/lib/utils';
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
 
@@ -45,7 +46,8 @@ export function ItemCard({
   className,
 }: ItemCardProps) {
   return (
-    <BaseCard onClick={onClick} className={className}>
+    <BaseCard onClick={onClick} className={cn('flex flex-col', className)}>
+      <div className="flex flex-col flex-1">
       <CardHeader className="pb-3">
         <CardTitle className="text-xl font-semibold line-clamp-1">{title}</CardTitle>
         {description && (
@@ -61,7 +63,9 @@ export function ItemCard({
       </CardHeader>
 
       {(metadata.length > 0 || actions.length > 0 || footer) && (
-        <CardContent className="space-y-1 pb-3">
+          <CardContent className="flex flex-col flex-1 min-h-0 pb-3">
+            {metadata.length > 0 && (
+              <div className="space-y-1">
           {metadata.map((item, index) => (
             <div
               key={index}
@@ -74,9 +78,13 @@ export function ItemCard({
               <span className="font-medium">{item.value}</span>
             </div>
           ))}
+              </div>
+            )}
 
+            {(actions.length > 0 || footer) && (
+              <div className="mt-auto pt-1">
           {actions.length > 0 && (
-            <div className="flex gap-2 pt-1">
+                  <div className="flex gap-2">
               {actions.map((action, index) => (
                 <Button
                   key={index}
@@ -96,8 +104,11 @@ export function ItemCard({
           )}
 
           {footer && <div className="pt-2">{footer}</div>}
+              </div>
+            )}
         </CardContent>
       )}
+      </div>
     </BaseCard>
   );
 }
diff --git a/frontend/src/components/dashboard/cards/SkeletonCard.tsx b/frontend/src/components/dashboard/cards/SkeletonCard.tsx
new file mode 100644
index 0000000..49d8d19
--- /dev/null
+++ b/frontend/src/components/dashboard/cards/SkeletonCard.tsx
@@ -0,0 +1,45 @@
+import { BaseCard } from './BaseCard';
+import { CardHeader, CardContent } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface SkeletonCardProps {
+  className?: string;
+}
+
+export function SkeletonCard({ className }: SkeletonCardProps) {
+  return (
+    <BaseCard className={`flex flex-col ${className || ''}`}>
+      <div className="flex flex-col flex-1">
+        <CardHeader className="pb-3">
+          <div className="flex items-start justify-between">
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-6 w-3/4" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-5/6" />
+            </div>
+            <Skeleton className="h-5 w-16 rounded-full ml-2" />
+          </div>
+        </CardHeader>
+
+        <CardContent className="flex flex-col flex-1 pb-3">
+          <div className="space-y-2 flex-1">
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-4 w-24" />
+            </div>
+            <div className="flex items-center justify-between">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-4 w-20" />
+            </div>
+          </div>
+          <div className="mt-auto pt-1">
+            <div className="flex gap-2">
+              <Skeleton className="h-8 w-8 rounded-md" />
+            </div>
+          </div>
+        </CardContent>
+      </div>
+    </BaseCard>
+  );
+}
+
diff --git a/frontend/src/components/dashboard/index.ts b/frontend/src/components/dashboard/index.ts
index 12a3bcc..21547a5 100644
--- a/frontend/src/components/dashboard/index.ts
+++ b/frontend/src/components/dashboard/index.ts
@@ -2,6 +2,7 @@ export { PageLayout } from './layouts/PageLayout';
 export { PageSection } from './layouts/PageSection';
 
 export { GridView } from './views/GridView';
+export { SkeletonGridView } from './views/SkeletonGridView';
 export { ActiveAgentsTab } from './views/ActiveAgentsTab';
 export { ActiveFlowsTab } from './views/ActiveFlowsTab';
 export { RecentExecutionsTab } from './views/RecentExecutionsTab';
@@ -12,3 +13,6 @@ export { FilterBar } from './filters/FilterBar';
 export { BaseCard } from './cards/BaseCard';
 export { StatCard } from './cards/StatCard';
 export { ItemCard } from './cards/ItemCard';
+export { SkeletonCard } from './cards/SkeletonCard';
+
+export { LoadMoreButton } from './LoadMoreButton';
\ No newline at end of file
diff --git a/frontend/src/components/dashboard/views/GridView.tsx b/frontend/src/components/dashboard/views/GridView.tsx
index d6f7986..611aa9c 100644
--- a/frontend/src/components/dashboard/views/GridView.tsx
+++ b/frontend/src/components/dashboard/views/GridView.tsx
@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { cn } from '@/lib/utils';
+import { SkeletonGridView } from './SkeletonGridView';
 
-interface GridViewColumns {
+export interface GridViewColumns {
   sm?: number;
   md?: number;
   lg?: number;
@@ -72,7 +73,7 @@ const gapMap: Record<number, string> = {
   8: 'gap-8',
 };
 
-function getGridClasses(columns: GridViewColumns, gap: number = 4): string {
+export function getGridClasses(columns: GridViewColumns, gap: number = 4): string {
   const classes = ['grid'];
 
   if (columns.sm && columnMap[columns.sm]) {
@@ -106,11 +107,7 @@ export function GridView<T>({
   className,
 }: GridViewProps<T>) {
   if (loading) {
-    return (
-      <div className="flex items-center justify-center py-12">
-        <div className="text-muted-foreground">Loading...</div>
-      </div>
-    );
+    return <SkeletonGridView columns={columns} gap={gap} className={className} />;
   }
 
   if (items.length === 0) {
diff --git a/frontend/src/components/dashboard/views/SkeletonGridView.tsx b/frontend/src/components/dashboard/views/SkeletonGridView.tsx
new file mode 100644
index 0000000..e40a4e7
--- /dev/null
+++ b/frontend/src/components/dashboard/views/SkeletonGridView.tsx
@@ -0,0 +1,25 @@
+import { SkeletonCard } from '../cards/SkeletonCard';
+import { getGridClasses, GridViewColumns } from './GridView';
+import { cn } from '@/lib/utils';
+
+interface SkeletonGridViewProps {
+  columns?: GridViewColumns;
+  gap?: number;
+  count?: number;
+  className?: string;
+}
+
+export function SkeletonGridView({
+  columns = { sm: 1, md: 2, lg: 3 },
+  gap = 4,
+  count = 6,
+  className,
+}: SkeletonGridViewProps) {
+  return (
+    <div className={cn(getGridClasses(columns, gap), className)}>
+      {Array.from({ length: count }).map((_, index) => (
+        <SkeletonCard key={`skeleton-${index}`} />
+      ))}
+    </div>
+  );
+}
diff --git a/frontend/src/components/mcp/ConnectionTab.tsx b/frontend/src/components/mcp/ConnectionTab.tsx
new file mode 100644
index 0000000..2f4f18f
--- /dev/null
+++ b/frontend/src/components/mcp/ConnectionTab.tsx
@@ -0,0 +1,163 @@
+import { useEffect } from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { UseFormReturn } from 'react-hook-form';
+import type { MCPFormValues } from './types';
+import { mcpAuthTypes, mcpAuthHeaderNames, mcpTransportTypes } from '@/data/mcp';
+
+interface ConnectionTabProps {
+  form: UseFormReturn<MCPFormValues>;
+}
+
+export function ConnectionTab({ form }: ConnectionTabProps) {
+  const watchAuthType = form.watch('auth_type');
+
+  // Auto-fill auth_header_name based on auth_type
+  useEffect(() => {
+    if (watchAuthType && watchAuthType !== 'none') {
+      const headerName = mcpAuthHeaderNames[watchAuthType];
+      if (headerName) {
+        form.setValue('auth_header_name', headerName, { shouldDirty: false });
+      }
+    } else if (watchAuthType === 'none') {
+      // Clear auth fields when auth_type is 'none'
+      form.setValue('auth_header_name', '', { shouldDirty: false });
+      form.setValue('auth_header_value', '', { shouldDirty: false });
+    }
+  }, [watchAuthType, form]);
+
+  const showAuthFields = watchAuthType && watchAuthType !== 'none';
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Connection Settings</CardTitle>
+        <CardDescription>Configure authentication and connection parameters</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        <FormField
+          control={form.control}
+          name="transport_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Transport Type</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                value={field.value}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select transport type" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {mcpTransportTypes.map((transportType) => (
+                    <SelectItem key={transportType.value} value={transportType.value}>
+                      {transportType.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>Communication protocol for MCP server</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="server_url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Server URL</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="https://mcp.example.com/mcp"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>MCP server endpoint URL (e.g., 'https://mcp.example.com/mcp')</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="auth_type"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Authentication Type</FormLabel>
+              <Select
+                onValueChange={field.onChange}
+                value={field.value || 'none'}
+              >
+                <FormControl>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select authentication type" />
+                  </SelectTrigger>
+                </FormControl>
+                <SelectContent>
+                  {mcpAuthTypes.map((authType) => (
+                    <SelectItem key={authType.value} value={authType.value}>
+                      {authType.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <FormDescription>Select the authentication method for this MCP server</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        {showAuthFields && (
+          <>
+            <FormField
+              control={form.control}
+              name="auth_header_name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Auth Header Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Authorization"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Header name for authentication (e.g., 'Authorization', 'X-API-Key')
+                    {watchAuthType !== 'custom_header' && ' (auto-filled based on auth type, but can be edited)'}
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="auth_header_value"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Auth Header Value</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="password"
+                      placeholder="Enter API key, bearer token, or header value"
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormDescription>The API key, bearer token, or header value (stored encrypted)</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/frontend/src/components/mcp/DetailsTab.tsx b/frontend/src/components/mcp/DetailsTab.tsx
new file mode 100644
index 0000000..aee66bb
--- /dev/null
+++ b/frontend/src/components/mcp/DetailsTab.tsx
@@ -0,0 +1,118 @@
+import { FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { UseFormReturn } from 'react-hook-form';
+import type { MCPFormValues } from './types';
+
+interface DetailsTabProps {
+  form: UseFormReturn<MCPFormValues>;
+  isNew: boolean;
+}
+
+export function DetailsTab({ form, isNew }: DetailsTabProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Server Details</CardTitle>
+        <CardDescription>Configure MCP server basic information</CardDescription>
+      </CardHeader>
+      <CardContent className="grid gap-6">
+        {isNew && (
+          <FormField
+            control={form.control}
+            name="server_name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Server Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="my-mcp-server" {...field} />
+                </FormControl>
+                <FormDescription>Unique name for this MCP server</FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        )}
+
+        <FormField
+          control={form.control}
+          name="enabled"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+              <div className="space-y-0.5">
+                <FormLabel className="text-base">Enabled</FormLabel>
+                <FormDescription>
+                  Enable or disable this MCP server
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Switch
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                />
+              </FormControl>
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Textarea
+                  placeholder="What capabilities this MCP server provides"
+                  className="min-h-[80px] resize-y"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>What capabilities this MCP server provides</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="tool_namespace"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Tool Namespace</FormLabel>
+              <FormControl>
+                <Input placeholder="gmail" {...field} />
+              </FormControl>
+              <FormDescription>Optional prefix for tool names (e.g., 'gmail' results in 'gmail.send_email')</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="timeout_seconds"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Timeout (Seconds)</FormLabel>
+              <FormControl>
+                <Input
+                  type="text"
+                  placeholder="30"
+                  {...field}
+                  onChange={field.onChange}
+                  onBlur={field.onBlur}
+                />
+              </FormControl>
+              <FormDescription>Request timeout for MCP server calls (must be a positive integer)</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      </CardContent>
+    </Card>
+  );
+}
+
diff --git a/frontend/src/components/mcp/MCPHeader.tsx b/frontend/src/components/mcp/MCPHeader.tsx
new file mode 100644
index 0000000..5194f5a
--- /dev/null
+++ b/frontend/src/components/mcp/MCPHeader.tsx
@@ -0,0 +1,96 @@
+import { Save, Server, RefreshCw, Wifi } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { UseFormReturn } from 'react-hook-form';
+import { cn } from '@/lib/utils';
+import type { MCPFormValues } from './types';
+
+interface MCPHeaderProps {
+  form: UseFormReturn<MCPFormValues>;
+  watchEnabled: boolean;
+  isNew: boolean;
+  showSaveButton: boolean;
+  saving: boolean;
+  syncing?: boolean;
+  testingConnection?: boolean;
+  onSave: () => void;
+  onSync?: () => void;
+  onTestConnection?: () => void;
+}
+
+export function MCPHeader({
+  form,
+  watchEnabled,
+  isNew,
+  showSaveButton,
+  saving,
+  syncing = false,
+  testingConnection = false,
+  onSave,
+  onSync,
+  onTestConnection,
+}: MCPHeaderProps) {
+  return (
+    <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+      <div className="flex-1 space-y-2">
+        <div className="flex items-center gap-3 flex-wrap">
+          {isNew ? (
+            <Input
+              value={form.watch('server_name') || ''}
+              onChange={(e) => form.setValue('server_name', e.target.value, { shouldDirty: true })}
+              className="text-2xl font-bold h-auto border-0 px-0 focus-visible:ring-0 max-w-md"
+              placeholder="MCP Server Name"
+            />
+          ) : (
+            <h1 className="text-2xl font-bold">
+              {form.watch('server_name') || 'MCP Server'}
+            </h1>
+          )}
+          <Badge variant={watchEnabled ? 'default' : 'secondary'}>
+            {watchEnabled ? 'Enabled' : 'Disabled'}
+          </Badge>
+          <Badge variant="outline">
+            <Server className="w-3 h-3 mr-1" />
+            MCP Server
+          </Badge>
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {!isNew && onSync && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onSync}
+            disabled={syncing || saving || testingConnection}
+            type="button"
+            title={syncing ? 'Syncing tools...' : 'Sync tools from MCP server'}
+          >
+            <RefreshCw className={cn('w-4 h-4 mr-2', syncing && 'animate-spin')} />
+            {syncing ? 'Syncing...' : 'Sync Now'}
+          </Button>
+        )}
+        {!isNew && onTestConnection && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onTestConnection}
+            disabled={testingConnection || saving || syncing}
+            type="button"
+            title={testingConnection ? 'Testing connection...' : 'Test connection to MCP server'}
+          >
+            <Wifi className={cn('w-4 h-4 mr-2', testingConnection && 'animate-pulse')} />
+            {testingConnection ? 'Testing...' : 'Test Connection'}
+          </Button>
+        )}
+        {showSaveButton && (
+          <Button size="sm" onClick={onSave} disabled={saving || syncing || testingConnection}>
+            <Save className="w-4 h-4 mr-2" />
+            {saving ? (isNew ? 'Creating...' : 'Saving...') : (isNew ? 'Create' : 'Save')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/mcp/MCPToolDetailModal.tsx b/frontend/src/components/mcp/MCPToolDetailModal.tsx
new file mode 100644
index 0000000..396ef0d
--- /dev/null
+++ b/frontend/src/components/mcp/MCPToolDetailModal.tsx
@@ -0,0 +1,87 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { JsonViewer } from '@/components/ui/json-viewer';
+import type { MCPTool } from './types';
+
+interface MCPToolDetailModalProps {
+  tool: MCPTool;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onToggle: (enabled: boolean) => void;
+}
+
+export function MCPToolDetailModal({
+  tool,
+  open,
+  onOpenChange,
+  onToggle,
+}: MCPToolDetailModalProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col">
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>{tool.tool_name}</DialogTitle>
+          <DialogDescription>Tool details and configuration</DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6 py-4 overflow-hidden flex flex-col min-h-0">
+          {/* Enable/Disable Switch at the top */}
+          <div className="flex items-center justify-between rounded-lg border p-4 flex-shrink-0">
+            <div className="space-y-0.5">
+              <Label className="text-base font-medium">Enabled</Label>
+              <p className="text-sm text-muted-foreground">
+                Enable or disable this tool for use with agents
+              </p>
+            </div>
+            <Switch
+              checked={tool.enabled === 1}
+              onCheckedChange={onToggle}
+            />
+          </div>
+
+          {/* Tool Name */}
+          <div className="space-y-2 flex-shrink-0">
+            <Label className="text-sm font-medium">Tool Name</Label>
+            <div className="p-3 rounded-md border bg-muted/30">
+              <p className="text-sm font-mono">{tool.tool_name}</p>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2 flex-shrink-0">
+            <Label className="text-sm font-medium">Description</Label>
+            <div className="p-3 rounded-md border bg-muted/30 min-h-[60px]">
+              <p className="text-sm text-muted-foreground">
+                {tool.description || 'No description available'}
+              </p>
+            </div>
+          </div>
+
+          {/* Parameters (JSON) - Only this section scrolls */}
+          <div className="space-y-2 flex-1 min-h-0 flex flex-col">
+            <Label className="text-sm font-medium flex-shrink-0">Parameters</Label>
+            <div className="rounded-md border overflow-hidden flex-1 min-h-0 flex flex-col">
+              {tool.parameters ? (
+                <div className="flex-1 overflow-y-auto min-h-0">
+                  <JsonViewer value={tool.parameters} />
+                </div>
+              ) : (
+                <div className="p-3 rounded-md border bg-muted/30 flex-shrink-0">
+                  <p className="text-sm text-muted-foreground">No parameters defined</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/frontend/src/components/mcp/ToolsTab.tsx b/frontend/src/components/mcp/ToolsTab.tsx
new file mode 100644
index 0000000..38821c8
--- /dev/null
+++ b/frontend/src/components/mcp/ToolsTab.tsx
@@ -0,0 +1,173 @@
+import { useState } from 'react';
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from '@/components/ui/form';
+import { Switch } from '@/components/ui/switch';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { UseFormReturn } from 'react-hook-form';
+import type { MCPFormValues, MCPTool } from './types';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatTimeAgo } from '@/utils/time';
+import { MCPToolDetailModal } from './MCPToolDetailModal';
+import { RefreshCw } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+interface ToolsTabProps {
+  form: UseFormReturn<MCPFormValues>;
+  tools: MCPTool[];
+  lastSync?: string;
+  onToolToggle: (toolName: string, enabled: boolean) => void;
+  onSync: () => void;
+  syncing: boolean;
+}
+
+export function ToolsTab({
+  form,
+  tools,
+  lastSync,
+  onToolToggle,
+  onSync,
+  syncing,
+}: ToolsTabProps) {
+  const [selectedTool, setSelectedTool] = useState<MCPTool | null>(null);
+
+  const handleToolClick = (tool: MCPTool) => {
+    setSelectedTool(tool);
+  };
+
+  const handleToolToggle = (toolName: string, enabled: boolean, e?: React.MouseEvent) => {
+    e?.stopPropagation();
+    onToolToggle(toolName, enabled);
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Sync Settings</CardTitle>
+          <CardDescription>Configure tool synchronization settings</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-6">
+          <FormField
+            control={form.control}
+            name="enable_auto_sync"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                <div className="space-y-0.5">
+                  <FormLabel className="text-base">Enable Auto Sync</FormLabel>
+                  <FormDescription>
+                    Automatically sync tools from the MCP server on a schedule
+                  </FormDescription>
+                </div>
+                <FormControl>
+                  <Switch
+                    checked={field.value || false}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+
+          <div className="flex items-center justify-between p-4 rounded-lg border bg-muted/30">
+            <div>
+              <p className="text-sm font-medium">Last Sync</p>
+              <p className="text-sm text-muted-foreground">{formatTimeAgo(lastSync)}</p>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={onSync}
+              disabled={syncing}
+            >
+              <RefreshCw className={cn('w-4 h-4 mr-2', syncing && 'animate-spin')} />
+              {syncing ? 'Syncing...' : 'Sync Now'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Available Tools</CardTitle>
+          <CardDescription>
+            {tools.length > 0
+              ? `${tools.length} tool${tools.length !== 1 ? 's' : ''} available`
+              : 'No tools available. Sync tools to get started.'}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {tools.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <p>No tools available.</p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={onSync}
+                disabled={syncing}
+                className="mt-4"
+              >
+                <RefreshCw className={cn('w-4 h-4 mr-2', syncing && 'animate-spin')} />
+                {syncing ? 'Syncing...' : 'Sync Tools'}
+              </Button>
+            </div>
+          ) : (
+            <div className="rounded-md border">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Tool Name</TableHead>
+                    <TableHead>Description</TableHead>
+                    <TableHead className="text-right">Enabled</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {tools.map((tool) => (
+                    <TableRow
+                      key={tool.name}
+                      className="cursor-pointer hover:bg-muted/50"
+                      onClick={() => handleToolClick(tool)}
+                    >
+                      <TableCell className="font-medium">{tool.tool_name}</TableCell>
+                      <TableCell className="text-muted-foreground">
+                        <div className="max-w-md truncate" title={tool.description || 'No description'}>
+                          {tool.description || 'No description'}
+                        </div>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Switch
+                          checked={tool.enabled === 1}
+                          onCheckedChange={(enabled) => handleToolToggle(tool.name, enabled)}
+                          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                        />
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {selectedTool && (
+        <MCPToolDetailModal
+          tool={selectedTool}
+          open={!!selectedTool}
+          onOpenChange={(open) => !open && setSelectedTool(null)}
+          onToggle={(enabled) => {
+            onToolToggle(selectedTool.name, enabled);
+            setSelectedTool({ ...selectedTool, enabled: enabled ? 1 : 0 });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/mcp/types.ts b/frontend/src/components/mcp/types.ts
new file mode 100644
index 0000000..eff24a0
--- /dev/null
+++ b/frontend/src/components/mcp/types.ts
@@ -0,0 +1,29 @@
+import * as z from 'zod';
+
+export const mcpFormSchema = z.object({
+  server_name: z.string().min(1, 'Server name is required').optional(),
+  enabled: z.boolean(),
+  description: z.string().optional(),
+  tool_namespace: z.string().optional(),
+  timeout_seconds: z.number().int().positive().min(1, 'Timeout must be at least 1 second').optional(),
+  transport_type: z.enum(['http', 'sse']),
+  server_url: z.string().min(1, 'Server URL is required'),
+  auth_type: z.enum(['none', 'api_key', 'bearer_token', 'custom_header']).optional(),
+  auth_header_name: z.string().optional(),
+  auth_header_value: z.string().optional(),
+  enable_auto_sync: z.boolean().optional(),
+});
+
+export type MCPFormValues = z.infer<typeof mcpFormSchema>;
+
+/**
+ * MCP Tool from child table
+ */
+export interface MCPTool {
+  name: string; // Child table row name
+  tool_name: string; // Read-only
+  description?: string; // Read-only
+  parameters?: string; // Read-only, JSON string
+  enabled: 0 | 1; // Editable
+}
+
diff --git a/frontend/src/components/tools/MCPServerCard.tsx b/frontend/src/components/tools/MCPServerCard.tsx
new file mode 100644
index 0000000..aa89f34
--- /dev/null
+++ b/frontend/src/components/tools/MCPServerCard.tsx
@@ -0,0 +1,74 @@
+import { Badge } from '../ui/badge';
+import { Checkbox } from '../ui/checkbox';
+import { cn } from '@/lib/utils';
+import type { MCPServerDoc } from '@/services/mcpApi';
+
+interface MCPServerCardProps {
+  server: MCPServerDoc;
+  selected?: boolean;
+  onSelect?: (server: MCPServerDoc) => void;
+  compact?: boolean;
+  className?: string;
+}
+
+export function MCPServerCard({
+  server,
+  selected = false,
+  onSelect,
+  compact = false,
+  className,
+}: MCPServerCardProps) {
+  const handleClick = () => {
+    if (onSelect) {
+      onSelect(server);
+    }
+  };
+
+  return (
+    <div
+      onClick={handleClick}
+      className={cn(
+        'flex items-start gap-3 rounded-lg border p-3 transition-colors',
+        'hover:bg-muted/50 cursor-pointer',
+        selected && 'border-primary bg-primary/5',
+        className
+      )}
+    >
+      {onSelect && (
+        <div className="pt-0.5" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            checked={selected}
+            onCheckedChange={() => onSelect(server)}
+          />
+        </div>
+      )}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-1 flex-wrap">
+          <h4 className="font-medium text-sm">{server.server_name || server.name}</h4>
+          {server.enabled === 1 ? (
+            <Badge variant="default" className="text-xs shrink-0">enabled</Badge>
+          ) : (
+            <Badge variant="secondary" className="text-xs shrink-0">disabled</Badge>
+          )}
+        </div>
+        {server.description && (
+          <p className={cn(
+            'text-muted-foreground',
+            compact ? 'text-xs line-clamp-1' : 'text-xs line-clamp-2'
+          )}>
+            {server.description}
+          </p>
+        )}
+        {server.server_url && (
+          <p className={cn(
+            'text-muted-foreground mt-1',
+            compact ? 'text-xs line-clamp-1' : 'text-xs truncate'
+          )}>
+            {server.server_url}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/tools/SelectMCPServersModal.tsx b/frontend/src/components/tools/SelectMCPServersModal.tsx
new file mode 100644
index 0000000..30a4cd9
--- /dev/null
+++ b/frontend/src/components/tools/SelectMCPServersModal.tsx
@@ -0,0 +1,196 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Search } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Button } from '../ui/button';
+import { MCPServerCard } from './MCPServerCard';
+import { getMCPServers } from '@/services/mcpApi';
+import type { MCPServerDoc } from '@/services/mcpApi';
+import { toast } from 'sonner';
+import { getFrappeErrorMessage } from '@/lib/frappe-error';
+
+interface SelectMCPServersModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedServers: MCPServerDoc[];
+  onAddServers: (servers: MCPServerDoc[]) => void;
+}
+
+export function SelectMCPServersModal({
+  open,
+  onOpenChange,
+  selectedServers,
+  onAddServers,
+}: SelectMCPServersModalProps) {
+  const [allServers, setAllServers] = useState<MCPServerDoc[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedServerIds, setSelectedServerIds] = useState<Set<string>>(
+    new Set(selectedServers.map((s) => s.name))
+  );
+
+  // Load MCP servers when modal opens
+  useEffect(() => {
+    if (open) {
+      setLoading(true);
+      // Call without params to get all servers as array (backward compatible)
+      getMCPServers()
+        .then((response) => {
+          // Handle both array and paginated response formats
+          const servers = Array.isArray(response) ? response : response.items;
+          setAllServers(servers);
+          setLoading(false);
+        })
+        .catch((error) => {
+          console.error('Error loading MCP servers:', error);
+          const errorMessage = getFrappeErrorMessage(error);
+          toast.error(errorMessage || 'Failed to load MCP servers');
+          setLoading(false);
+        });
+      
+      // Reset filters and selection when opening
+      setSearchQuery('');
+      setSelectedServerIds(new Set(selectedServers.map((s) => s.name)));
+    }
+  }, [open, selectedServers]);
+
+  // Update selected server IDs when selectedServers prop changes
+  useEffect(() => {
+    if (open) {
+      setSelectedServerIds(new Set(selectedServers.map((s) => s.name)));
+    }
+  }, [selectedServers, open]);
+
+  // Filter servers based on search
+  const filteredServers = useMemo(() => {
+    return allServers.filter((server) => {
+      // Search filter - search by name (server_name) and description
+      const matchesSearch =
+        searchQuery === '' ||
+        (server.server_name || server.name).toLowerCase().includes(searchQuery.toLowerCase()) ||
+        server.description?.toLowerCase().includes(searchQuery.toLowerCase());
+
+      return matchesSearch;
+    });
+  }, [allServers, searchQuery]);
+
+  const handleServerToggle = (server: MCPServerDoc) => {
+    const newSelectedIds = new Set(selectedServerIds);
+    if (newSelectedIds.has(server.name)) {
+      newSelectedIds.delete(server.name);
+    } else {
+      newSelectedIds.add(server.name);
+    }
+    setSelectedServerIds(newSelectedIds);
+  };
+
+  const handleAdd = () => {
+    const serversToAdd = filteredServers.filter((server) =>
+      selectedServerIds.has(server.name)
+    );
+    
+    // Only add servers that aren't already selected
+    const newServers = serversToAdd.filter(
+      (server) => !selectedServers.some((ss) => ss.name === server.name)
+    );
+
+    if (newServers.length === 0) {
+      toast.info('No new MCP servers selected');
+      return;
+    }
+
+    onAddServers(newServers);
+    toast.success(`Added ${newServers.length} MCP server${newServers.length > 1 ? 's' : ''}`);
+    onOpenChange(false);
+  };
+
+  const selectedCount = filteredServers.filter((server) =>
+    selectedServerIds.has(server.name)
+  ).length;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] h-[80vh] flex flex-col p-0">
+        <DialogHeader className="px-6 pt-6 pb-4">
+          <DialogTitle>Select MCP Servers</DialogTitle>
+          <DialogDescription>
+            Choose MCP servers to connect to this agent. Select multiple servers at once.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Filters */}
+        <div className="flex flex-col gap-3 px-6 pb-4">
+          {/* Search */}
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              placeholder="Search MCP servers by name..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+        </div>
+
+        {/* Server List */}
+        <div className="flex-1 overflow-y-auto min-h-0 px-6 space-y-2 pb-2">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-muted-foreground">Loading MCP servers...</div>
+            </div>
+          ) : filteredServers.length === 0 ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-muted-foreground">
+                {searchQuery
+                  ? 'No MCP servers match your search'
+                  : 'No MCP servers available'}
+              </div>
+            </div>
+          ) : (
+            filteredServers.map((server) => (
+              <MCPServerCard
+                key={server.name}
+                server={server}
+                selected={selectedServerIds.has(server.name)}
+                onSelect={handleServerToggle}
+                compact
+              />
+            ))
+          )}
+        </div>
+
+        {/* Footer */}
+        <DialogFooter className="flex items-center justify-between border-t px-6 py-4">
+          <div className="text-sm text-muted-foreground">
+            {selectedCount > 0 ? (
+              <>
+                {selectedCount} server{selectedCount > 1 ? 's' : ''} selected
+                {selectedCount !== filteredServers.length && (
+                  <> • {filteredServers.length} total</>
+                )}
+              </>
+            ) : (
+              <>{filteredServers.length} server{filteredServers.length !== 1 ? 's' : ''} available</>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleAdd} disabled={selectedCount === 0}>
+              Add {selectedCount > 0 && `(${selectedCount})`}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
diff --git a/frontend/src/components/tools/index.ts b/frontend/src/components/tools/index.ts
index 0200681..70ba6a5 100644
--- a/frontend/src/components/tools/index.ts
+++ b/frontend/src/components/tools/index.ts
@@ -1,2 +1,4 @@
 export { ToolCard } from './ToolCard';
-export { SelectToolsModal } from './SelectToolsModal';
\ No newline at end of file
+export { SelectToolsModal } from './SelectToolsModal';
+export { MCPServerCard } from './MCPServerCard';
+export { SelectMCPServersModal } from './SelectMCPServersModal';
\ No newline at end of file
diff --git a/frontend/src/components/ui/json-viewer.tsx b/frontend/src/components/ui/json-viewer.tsx
new file mode 100644
index 0000000..ed9b3fc
--- /dev/null
+++ b/frontend/src/components/ui/json-viewer.tsx
@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import { CodeBlock } from '../ai-elements/code-block';
+import { Button } from './button';
+import { Copy, Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface JsonViewerProps {
+  value: string | object;
+  className?: string;
+  showCopyButton?: boolean;
+}
+
+/**
+ * Reusable JSON viewer component with beautification and copy functionality
+ */
+export function JsonViewer({ value, className, showCopyButton = true }: JsonViewerProps) {
+  const [copied, setCopied] = useState(false);
+
+  // Parse and beautify JSON
+  let jsonString = '';
+  try {
+    if (typeof value === 'string') {
+      // Try to parse if it's a string
+      const parsed = JSON.parse(value);
+      jsonString = JSON.stringify(parsed, null, 2);
+    } else {
+      jsonString = JSON.stringify(value, null, 2);
+    }
+  } catch {
+    // If parsing fails, use as-is
+    jsonString = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+  }
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(jsonString);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy JSON:', error);
+    }
+  };
+
+  return (
+    <div className={cn('relative w-full', className)}>
+      <CodeBlock code={jsonString} language="json" showLineNumbers={false}>
+        {showCopyButton && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={handleCopy}
+            type="button"
+          >
+            {copied ? (
+              <Check className="h-4 w-4 text-green-500" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+            <span className="sr-only">Copy JSON</span>
+          </Button>
+        )}
+      </CodeBlock>
+    </div>
+  );
+}
+
diff --git a/frontend/src/components/ui/skeleton.tsx b/frontend/src/components/ui/skeleton.tsx
index cb09f16..a626d9b 100644
--- a/frontend/src/components/ui/skeleton.tsx
+++ b/frontend/src/components/ui/skeleton.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-primary/10', className)}
+      className={cn('animate-pulse rounded-md bg-muted', className)}
       {...props}
     />
   );
diff --git a/frontend/src/data/doctypes.ts b/frontend/src/data/doctypes.ts
index cababc2..1443be9 100644
--- a/frontend/src/data/doctypes.ts
+++ b/frontend/src/data/doctypes.ts
@@ -9,6 +9,7 @@ export const doctype = {
   "Agent Conversation": "Agent Conversation",
   "Agent Message": "Agent Message",
   "Agent Run": "Agent Run",
+  "MCP Server": "MCP Server",
 } as const;
 
 export type DocType = typeof doctype[keyof typeof doctype];
diff --git a/frontend/src/data/mcp.ts b/frontend/src/data/mcp.ts
new file mode 100644
index 0000000..3ddeedb
--- /dev/null
+++ b/frontend/src/data/mcp.ts
@@ -0,0 +1,39 @@
+/**
+ * MCP Server configuration constants
+ * These values can later be fetched from an API if needed
+ */
+
+export const mcpAuthTypes = [
+  { label: 'None', value: 'none' },
+  { label: 'API Key', value: 'api_key' },
+  { label: 'Bearer Token', value: 'bearer_token' },
+  { label: 'Custom Header', value: 'custom_header' },
+] as const;
+
+export type MCPAuthType = typeof mcpAuthTypes[number]['value'];
+
+export const mcpAuthHeaderNames: Record<MCPAuthType, string> = {
+  none: '',
+  api_key: 'X-API-Key',
+  bearer_token: 'Authorization',
+  custom_header: 'Authorization',
+} as const;
+
+/**
+ * Default header value prefix for bearer token
+ * The actual token value will be prepended to this
+ */
+export const mcpAuthHeaderValuePrefix: Record<MCPAuthType, string> = {
+  none: '',
+  api_key: '',
+  bearer_token: 'Bearer ',
+  custom_header: '',
+} as const;
+
+export const mcpTransportTypes = [
+  { label: 'HTTP/HTTPS', value: 'http' },
+  { label: 'SSE (Server-Sent Events)', value: 'sse' },
+] as const;
+
+export type MCPTransportType = typeof mcpTransportTypes[number]['value'];
+
diff --git a/frontend/src/layouts/UnifiedHeader.tsx b/frontend/src/layouts/UnifiedHeader.tsx
index 80a7e73..ed40332 100644
--- a/frontend/src/layouts/UnifiedHeader.tsx
+++ b/frontend/src/layouts/UnifiedHeader.tsx
@@ -1,5 +1,5 @@
 import { Link, useLocation } from 'react-router-dom';
-import { ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -38,8 +38,8 @@ export function UnifiedHeader({ actions, breadcrumbs }: UnifiedHeaderProps) {
           <Breadcrumb>
             <BreadcrumbList>
               {breadcrumbs.map((crumb, index) => (
-                <div key={index} className="flex items-center">
-                  {index > 0 && <BreadcrumbSeparator className="hidden md:block" />}
+                <Fragment key={index}>
+                <div className="flex items-center">
                   <BreadcrumbItem className={index === 0 ? 'hidden md:block' : ''}>
                     {index === breadcrumbs.length - 1 ? (
                       <BreadcrumbPage>{crumb.label}</BreadcrumbPage>
@@ -52,6 +52,8 @@ export function UnifiedHeader({ actions, breadcrumbs }: UnifiedHeaderProps) {
                     )}
                   </BreadcrumbItem>
                 </div>
+                {index < breadcrumbs.length - 1 && <BreadcrumbSeparator className="hidden md:block mt-0.5" />}
+                </Fragment>
               ))}
             </BreadcrumbList>
           </Breadcrumb>
diff --git a/frontend/src/pages/AgentFormPage.tsx b/frontend/src/pages/AgentFormPage.tsx
index d1d9685..8a38077 100644
--- a/frontend/src/pages/AgentFormPage.tsx
+++ b/frontend/src/pages/AgentFormPage.tsx
@@ -11,7 +11,7 @@ import { getProviders, getModels } from '../services/providerApi';
 import { getToolFunctions, getToolTypes } from '../services/toolApi';
 import type { AgentDoc } from '../types/agent.types';
 import type { AgentToolType } from '../types/agent.types';
-import { SelectToolsModal } from '../components/tools';
+import { SelectToolsModal, SelectMCPServersModal } from '../components/tools';
 import { TriggerModal } from '../components/agent/TriggerModal';
 import { getFrappeErrorMessage } from '../lib/frappe-error';
 import { AgentHeader } from '../components/agent/AgentHeader';
@@ -20,12 +20,93 @@ import { BehaviorTab } from '../components/agent/BehaviorTab';
 import { TriggersTab } from '../components/agent/TriggersTab';
 import { ToolsTab } from '../components/agent/ToolsTab';
 import { agentFormSchema, type AgentFormValues } from '../components/agent/types';
+import { syncMCPTools, getMCPServer, type MCPServerRef } from '../services/mcpApi';
+import type { MCPServerDoc } from '../services/mcpApi';
+import { createFormSubmitHandler, type TabFieldMapping } from '../utils/formValidation';
 
 
 export function AgentFormPage() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const isNew = id === 'new';
+  
+  // Tab configuration - single source of truth
+  const tabConfig = {
+    general: {
+      label: 'General',
+      fields: ['agent_name', 'provider', 'model', 'temperature', 'top_p', 'description'],
+      default: true,
+      disabled: false,
+    },
+    behavior: {
+      label: 'Behavior',
+      fields: ['allow_chat', 'persist_conversation', 'persist_user_history', 'enable_multi_run', 'instructions'],
+      default: false,
+      disabled: false,
+    },
+    triggers: {
+      label: 'Triggers',
+      fields: [], // Triggers tab doesn't have form fields
+      default: false,
+      disabled: false,
+    },
+    tools: {
+      label: 'Tools & MCP',
+      fields: [], // Tools tab doesn't have form fields
+      default: false,
+      disabled: false,
+    },
+  } as const;
+
+  // Extract derived values from tab config (memoized to avoid recreating on every render)
+  const validTabs = useMemo(() => Object.keys(tabConfig), []);
+  const defaultTab = useMemo(
+    () => Object.entries(tabConfig).find(([_, config]) => config.default)?.[0] || validTabs[0],
+    [validTabs]
+  );
+  const tabFieldMapping: TabFieldMapping = useMemo(
+    () => Object.fromEntries(
+      Object.entries(tabConfig).map(([key, config]) => [key, [...config.fields]])
+    ),
+    []
+  );
+  const tabLabels = useMemo(
+    () => Object.fromEntries(
+      Object.entries(tabConfig).map(([key, config]) => [key, config.label])
+    ),
+    []
+  );
+  
+  // State to track active tab from URL hash
+  const [activeTab, setActiveTab] = useState<string>(() => {
+    const hashFromUrl = window.location.hash.slice(1); // Remove the # symbol
+    return (hashFromUrl && validTabs.includes(hashFromUrl)) ? hashFromUrl : defaultTab;
+  });
+  
+  // Listen for hash changes (back/forward navigation)
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hashFromUrl = window.location.hash.slice(1);
+      const tab = (hashFromUrl && validTabs.includes(hashFromUrl)) ? hashFromUrl : defaultTab;
+      setActiveTab(tab);
+    };
+    
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [defaultTab, validTabs]);
+
+  // Handler to update tab in URL hash
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    // Only set hash if it's not the default tab, or clear hash if switching back to default
+    if (value === defaultTab) {
+      // Clear hash when switching to default tab
+      window.history.replaceState(null, '', window.location.pathname);
+    } else {
+      // Set hash for non-default tabs
+      window.location.hash = value;
+    }
+  };
   const [loading, setLoading] = useState(!isNew);
   const [saving, setSaving] = useState(false);
   const [deletingTrigger, setDeletingTrigger] = useState(false);
@@ -46,6 +127,10 @@ export function AgentFormPage() {
   const [loadingDocTypes, setLoadingDocTypes] = useState(false);
   const [triggerTypes, setTriggerTypes] = useState<TriggerTypeOption[]>([]);
   const [loadingTriggerTypes, setLoadingTriggerTypes] = useState(false);
+  const [showMCPServersModal, setShowMCPServersModal] = useState(false);
+  const [mcpServers, setMcpServers] = useState<MCPServerRef[]>([]);
+  const [initialMcpServers, setInitialMcpServers] = useState<MCPServerRef[]>([]); // Track initial MCP servers state
+  const [mcpLoading, setMcpLoading] = useState(false);
 
   const form = useForm<AgentFormValues>({
     resolver: zodResolver(agentFormSchema),
@@ -90,8 +175,34 @@ export function AgentFormPage() {
     return watchDisabled !== initialDisabled;
   }, [watchDisabled, initialDisabled, isNew]);
   
-  // Show save button for new agents, when form is dirty, when tools have changed, or when disabled changed
-  const showSaveButton = isNew || isDirty || toolsChanged || disabledChanged;
+  // Check if MCP servers have changed by comparing server names and enabled states
+  const mcpServersChanged = useMemo(() => {
+    if (isNew) return mcpServers.length > 0; // New agent with MCP servers selected
+    
+    // Normalize enabled state to number for comparison
+    const normalizeEnabled = (enabled: boolean | number | undefined): number => {
+      return enabled === true || enabled === 1 ? 1 : 0;
+    };
+    
+    // Compare by mcp_server link field (the actual server name) and enabled state
+    const initialServerMap = new Map(
+      initialMcpServers.map((s) => [`${s.mcp_server}:${normalizeEnabled(s.enabled)}`, s])
+    );
+    const currentServerMap = new Map(
+      mcpServers.map((s) => [`${s.mcp_server}:${normalizeEnabled(s.enabled)}`, s])
+    );
+    
+    if (initialServerMap.size !== currentServerMap.size) return true;
+    
+    for (const [key] of currentServerMap) {
+      if (!initialServerMap.has(key)) return true;
+    }
+    
+    return false;
+  }, [mcpServers, initialMcpServers, isNew]);
+  
+  // Show save button for new agents, when form is dirty, when tools have changed, when disabled changed, or when MCP servers changed
+  const showSaveButton = isNew || isDirty || toolsChanged || disabledChanged || mcpServersChanged;
 
   // Load trigger types on mount
   useEffect(() => {
@@ -221,6 +332,48 @@ export function AgentFormPage() {
           // Don't show error toast for triggers, just log it
           setTriggers([]);
         });
+        // Load MCP servers from agent_mcp_server child table (already in agent document)
+        if (data.agent_mcp_server && Array.isArray(data.agent_mcp_server) && data.agent_mcp_server.length > 0) {
+          // First, map child table data to MCPServerRef format
+          const childTableServers: MCPServerRef[] = data.agent_mcp_server.map((item: any) => ({
+            name: item.name || '', // Child table row name
+            mcp_server: item.mcp_server, // Link to MCP Server DocType
+            server_url: item.server_url || '',
+            enabled: item.enabled === 1 || item.enabled === true ? 1 : 0,
+            tool_count: item.tool_count || 0,
+            server_name: item.server_name, // May be included from Frappe's serialization
+            description: item.description, // May be included from Frappe's serialization
+          }));
+
+          // Fetch MCP Server documents to get the enabled status and other details
+          Promise.all(
+            childTableServers.map(async (server) => {
+              try {
+                const mcpServerDoc = await getMCPServer(server.mcp_server);
+                return {
+                  ...server,
+                  server_name: mcpServerDoc.server_name || server.server_name || server.mcp_server,
+                  description: mcpServerDoc.description || server.description,
+                  mcp_enabled: mcpServerDoc.enabled === 1 ? 1 : 0, // Enabled status from MCP Server DocType
+                  server_url: mcpServerDoc.server_url || server.server_url,
+                };
+              } catch (error) {
+                console.error(`Error fetching MCP Server ${server.mcp_server}:`, error);
+                // If fetch fails, keep the server data but mark mcp_enabled as undefined
+                return {
+                  ...server,
+                  mcp_enabled: undefined,
+                };
+              }
+            })
+          ).then((enrichedServers) => {
+            setMcpServers(enrichedServers);
+            setInitialMcpServers(enrichedServers);
+          });
+        } else {
+          setMcpServers([]);
+          setInitialMcpServers([]);
+        }
         setLoading(false);
       }).catch((error) => {
         console.error('Error loading agent:', error);
@@ -233,6 +386,8 @@ export function AgentFormPage() {
       setSelectedTools([]);
       setInitialTools([]);
       setInitialDisabled(false);
+      setMcpServers([]);
+      setInitialMcpServers([]);
       setLoading(false);
     }
   }, [id, isNew, form]);
@@ -258,6 +413,11 @@ export function AgentFormPage() {
         agent_tool: selectedTools.map((tool) => ({
           tool: tool.name,
         })) as any,
+        // Include MCP servers - Frappe child table format: array of objects with 'mcp_server' field and 'enabled' field
+        agent_mcp_server: mcpServers.map((server) => ({
+          mcp_server: server.mcp_server, // This is the link field to MCP Server DocType
+          enabled: (server.enabled === true || server.enabled === 1) ? 1 : (0 as 0 | 1),
+        })),
       };
 
       if (isNew) {
@@ -301,9 +461,56 @@ export function AgentFormPage() {
           description: values.description,
           instructions: values.instructions,
         });
-        // Reset tools and disabled state after successful update to mark as unchanged
+        // Reset tools, disabled state, and MCP servers after successful update to mark as unchanged
         setInitialTools([...selectedTools]);
         setInitialDisabled(values.disabled);
+        // Reload agent to get updated MCP servers from the agent document
+        if (id) {
+          getAgent(id).then((updatedData: AgentDoc) => {
+            // Reload MCP servers from updated agent document
+            if (updatedData.agent_mcp_server && Array.isArray(updatedData.agent_mcp_server) && updatedData.agent_mcp_server.length > 0) {
+              const childTableServers: MCPServerRef[] = updatedData.agent_mcp_server.map((item: any) => ({
+                name: item.name || '',
+                mcp_server: item.mcp_server,
+                server_url: item.server_url || '',
+                enabled: item.enabled === 1 || item.enabled === true ? 1 : 0,
+                tool_count: item.tool_count || 0,
+                server_name: item.server_name,
+                description: item.description,
+              }));
+
+              // Fetch MCP Server documents to get the enabled status
+              Promise.all(
+                childTableServers.map(async (server) => {
+                  try {
+                    const mcpServerDoc = await getMCPServer(server.mcp_server);
+                    return {
+                      ...server,
+                      server_name: mcpServerDoc.server_name || server.server_name || server.mcp_server,
+                      description: mcpServerDoc.description || server.description,
+                      mcp_enabled: mcpServerDoc.enabled === 1 ? 1 : 0,
+                      server_url: mcpServerDoc.server_url || server.server_url,
+                    };
+                  } catch (error) {
+                    console.error(`Error fetching MCP Server ${server.mcp_server}:`, error);
+                    return {
+                      ...server,
+                      mcp_enabled: undefined,
+                    };
+                  }
+                })
+              ).then((enrichedServers) => {
+                setMcpServers(enrichedServers);
+                setInitialMcpServers(enrichedServers);
+              });
+            } else {
+              setMcpServers([]);
+              setInitialMcpServers([]);
+            }
+          }).catch((error) => {
+            console.error('Error reloading agent:', error);
+          });
+        }
       }
     } catch (error) {
       console.error(`Error ${isNew ? 'creating' : 'updating'} agent:`, error);
@@ -314,6 +521,12 @@ export function AgentFormPage() {
     }
   };
 
+  // Memoize the form submit handler to avoid recreating it on every render
+  const handleFormSubmit = useMemo(
+    () => createFormSubmitHandler(form, activeTab, tabFieldMapping, tabLabels, onSubmit),
+    [form, activeTab, tabFieldMapping, tabLabels, onSubmit]
+  );
+
   const handleOptimizePrompt = () => {
     setOptimizingPrompt((value) => value);
     toast.info('Coming Soon!');
@@ -394,6 +607,73 @@ export function AgentFormPage() {
     toast.success('Tool removed');
   };
 
+  const handleAddMCPServers = (servers: MCPServerDoc[]) => {
+    // Convert MCPServerDoc to MCPServerRef format for child table
+    const newServers: MCPServerRef[] = servers.map((server) => ({
+      name: '', // Will be set by Frappe when saved
+      mcp_server: server.name,
+      server_name: server.server_name,
+      description: server.description,
+      server_url: server.server_url,
+      enabled: true, // Default to enabled when adding
+      mcp_enabled: server.enabled === 1,
+      tool_count: 0, // Will be updated when synced
+    }));
+    setMcpServers([...mcpServers, ...newServers]);
+  };
+
+  const handleRemoveMCPServer = (serverId: string) => {
+    setMcpServers(mcpServers.filter((s) => s.name !== serverId));
+    toast.success('MCP server removed');
+  };
+
+  const handleToggleMCPServer = async (serverId: string, enabled: boolean) => {
+    setMcpServers(
+      mcpServers.map((s) =>
+        s.name === serverId ? { ...s, enabled } : s
+      )
+    );
+    toast.success(`MCP server ${enabled ? 'enabled' : 'disabled'}`);
+  };
+
+  const handleSyncMCPServer = async (serverId: string) => {
+    const server = mcpServers.find((s) => s.name === serverId);
+    if (!server) {
+      toast.error('MCP server not found');
+      return;
+    }
+
+    setMcpLoading(true);
+    try {
+      const result = await syncMCPTools(server.mcp_server);
+      if (result.success) {
+        // Update the server with new tool count
+        setMcpServers(
+          mcpServers.map((s) =>
+            s.name === serverId
+              ? {
+                  ...s,
+                  tool_count: result.tool_count ?? s.tool_count,
+                  last_sync: new Date().toISOString(),
+                }
+              : s
+          )
+        );
+        toast.success(
+          `Synced ${result.tool_count ?? 0} tool${(result.tool_count ?? 0) !== 1 ? 's' : ''} from MCP server`
+        );
+      } else {
+        toast.error(result.error || 'Failed to sync MCP server tools');
+      }
+    } catch (error) {
+      console.error('Error syncing MCP server:', error);
+      const errorMessage = getFrappeErrorMessage(error);
+      toast.error(errorMessage || 'Failed to sync MCP server tools');
+    } finally {
+      setMcpLoading(false);
+    }
+  };
+
   const handleAddTrigger = () => {
     setEditingTrigger(null);
     setShowTriggerModal(true);
@@ -509,7 +789,7 @@ export function AgentFormPage() {
           showSaveButton={showSaveButton}
           saving={saving}
           runningTest={runningTest}
-          onSave={form.handleSubmit(onSubmit)}
+          onSave={handleFormSubmit}
           onRunTest={handleRunTest}
           onDuplicate={handleDuplicate}
           onViewLogs={handleViewLogs}
@@ -518,13 +798,14 @@ export function AgentFormPage() {
         />
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-            <Tabs defaultValue="general" className="w-full">
+          <form onSubmit={handleFormSubmit} className="space-y-6">
+            <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
               <TabsList className="grid w-full grid-cols-4">
-                <TabsTrigger value="general">General</TabsTrigger>
-                <TabsTrigger value="behavior">Behavior</TabsTrigger>
-                <TabsTrigger value="triggers">Triggers</TabsTrigger>
-                <TabsTrigger value="tools">Tools & MCP</TabsTrigger>
+                {Object.entries(tabConfig).map(([tabKey, config]) => (
+                  <TabsTrigger key={tabKey} value={tabKey} disabled={config.disabled}>
+                    {config.label}
+                  </TabsTrigger>
+                ))}
               </TabsList>
 
               <TabsContent value="general" className="space-y-4">
@@ -556,6 +837,12 @@ export function AgentFormPage() {
                   toolTypes={toolTypes}
                   onAddTools={() => setShowToolsModal(true)}
                   onRemoveTool={handleRemoveTool}
+                  mcpServers={mcpServers}
+                  onAddMCP={() => setShowMCPServersModal(true)}
+                  onRemoveMCP={handleRemoveMCPServer}
+                  onToggleMCP={handleToggleMCPServer}
+                  onSyncMCP={handleSyncMCPServer}
+                  mcpLoading={mcpLoading}
                 />
               </TabsContent>
             </Tabs>
@@ -582,6 +869,21 @@ export function AgentFormPage() {
         selectedTools={selectedTools}
         onAddTools={handleAddTools}
       />
+
+      {/* Select MCP Servers Modal */}
+      <SelectMCPServersModal
+        open={showMCPServersModal}
+        onOpenChange={setShowMCPServersModal}
+        selectedServers={mcpServers.map((s) => ({
+          name: s.mcp_server,
+          server_name: s.server_name || '',
+          description: s.description,
+          enabled: ((s.mcp_enabled === true || s.mcp_enabled === 1) ? 1 : 0) as 0 | 1,
+          server_url: s.server_url || '',
+          transport_type: 'http' as const,
+        })) as MCPServerDoc[]}
+        onAddServers={handleAddMCPServers}
+      />
     </div>
   );
 }
diff --git a/frontend/src/pages/AgentsPage.tsx b/frontend/src/pages/AgentsPage.tsx
index c335b91..d1af1ed 100644
--- a/frontend/src/pages/AgentsPage.tsx
+++ b/frontend/src/pages/AgentsPage.tsx
@@ -1,11 +1,10 @@
-import { Calendar, Activity, Settings, Zap, Loader2 } from 'lucide-react';
+import { Calendar, Activity, Settings, Zap } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { PageLayout, FilterBar, GridView, ItemCard } from '../components/dashboard';
+import { PageLayout, FilterBar, GridView, ItemCard, LoadMoreButton } from '../components/dashboard';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { getAgents } from '../services/agentApi';
 import { formatTimeAgo } from '../utils/time';
 import type { AgentDoc } from '../types/agent.types';
-import { Button } from '../components/ui/button';
 
 const statusOptions = [
   { label: 'All Status', value: 'all' },
@@ -138,24 +137,12 @@ export function AgentsPage() {
         }}
         keyExtractor={(agent) => agent.name}
       />
-      {hasMore && (
-        <div className="flex justify-center py-8">
-          <Button
-            onClick={() => loadMore()}
-            disabled={loadingMore}
-            variant="outline"
-          >
-            {loadingMore ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                Loading...
-              </>
-            ) : (
-              'Load More'
-            )}
-          </Button>
-        </div>
-      )}
+      <LoadMoreButton
+        hasMore={hasMore}
+        loading={loadingMore}
+        onLoadMore={loadMore}
+        disabled={!!search || initialLoading}
+      />
       {!hasMore && agents.length > 0 && (
         <div className="text-center py-4 text-sm text-muted-foreground">
           {total !== undefined ? `Showing all ${total} agents` : 'No more agents to load'}
diff --git a/frontend/src/pages/Executions.tsx b/frontend/src/pages/Executions.tsx
index 7427517..619e833 100644
--- a/frontend/src/pages/Executions.tsx
+++ b/frontend/src/pages/Executions.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react';
 import { ArrowUpDown, Loader2 } from 'lucide-react';
-import { FilterBar, PageLayout } from '@/components/dashboard';
+import { FilterBar, PageLayout, LoadMoreButton } from '@/components/dashboard';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { getAgentRuns, type AgentRunDoc } from '@/services/agentRunApi';
@@ -353,24 +353,12 @@ export default function Executions() {
         )}
       </div>
 
-      {hasMore && (
-        <div className="flex justify-center py-8">
-          <Button
-            onClick={() => loadMore()}
-            disabled={loadingMore}
-            variant="outline"
-          >
-            {loadingMore ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                Loading...
-              </>
-            ) : (
-              'Load More'
-            )}
-          </Button>
-        </div>
-      )}
+      <LoadMoreButton
+        hasMore={hasMore}
+        loading={loadingMore}
+        onLoadMore={loadMore}
+        disabled={!!search || initialLoading}
+      />
 
       {!hasMore && runs.length > 0 && (
         <div className="text-center py-4 text-sm text-muted-foreground">
diff --git a/frontend/src/pages/FlowListPage.tsx b/frontend/src/pages/FlowListPage.tsx
index 984f682..209026a 100644
--- a/frontend/src/pages/FlowListPage.tsx
+++ b/frontend/src/pages/FlowListPage.tsx
@@ -37,7 +37,7 @@ export function FlowListPage() {
   const { flows } = useFlowContext();
   const navigate = useNavigate();
 
-  const { data, search, setSearch, filters, setFilters } = usePageData<FlowMetadata>({
+  const { data, loading, search, setSearch, filters, setFilters } = usePageData<FlowMetadata>({
     initialData: flows,
     searchFields: ['name', 'description'],
     filterFn: (flow, filters) => {
@@ -83,6 +83,7 @@ export function FlowListPage() {
       <GridView
         items={data}
         columns={{ sm: 1, md: 2, lg: 3 }}
+        loading={loading}
         renderItem={(flow) => (
           <ItemCard
             title={flow.name}
diff --git a/frontend/src/pages/IntegrationsPage.tsx b/frontend/src/pages/IntegrationsPage.tsx
index 8b6d1ef..6690bd9 100644
--- a/frontend/src/pages/IntegrationsPage.tsx
+++ b/frontend/src/pages/IntegrationsPage.tsx
@@ -12,7 +12,7 @@ import {
 } from '../components/ui/dialog';
 import { Input } from '../components/ui/input';
 import { Label } from '../components/ui/label';
-import { PageLayout, FilterBar, GridView } from '../components/dashboard';
+import { PageLayout, FilterBar, GridView, LoadMoreButton } from '../components/dashboard';
 import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
 import { getProviders, getProvider, updateProvider, createProvider } from '../services/providerApi';
 import { getModels } from '../services/providerApi';
@@ -248,24 +248,12 @@ export function IntegrationsPage({ addProviderKey }: IntegrationsPageProps) {
         }}
         keyExtractor={(provider) => provider.name}
       />
-      {hasMore && (
-        <div className="flex justify-center py-8">
-          <Button
-            onClick={() => loadMore()}
-            disabled={loadingMore}
-            variant="outline"
-          >
-            {loadingMore ? (
-              <>
-                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                Loading...
-              </>
-            ) : (
-              'Load More'
-            )}
-          </Button>
-        </div>
-      )}
+      <LoadMoreButton
+        hasMore={hasMore}
+        loading={loadingMore}
+        onLoadMore={loadMore}
+        disabled={!!search || initialLoading}
+      />
       {!hasMore && providers.length > 0 && (
         <div className="text-center py-4 text-sm text-muted-foreground">
           {total !== undefined ? `Showing all ${total} providers` : 'No more providers to load'}
diff --git a/frontend/src/pages/McpDetailsPage.tsx b/frontend/src/pages/McpDetailsPage.tsx
new file mode 100644
index 0000000..e1b83d6
--- /dev/null
+++ b/frontend/src/pages/McpDetailsPage.tsx
@@ -0,0 +1,405 @@
+import { useEffect, useState, useMemo } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Form } from '../components/ui/form';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
+import { toast } from 'sonner';
+import { getMCPServer, createMCPServer, updateMCPServer, syncMCPTools, updateMCPTool, testMCPConnection, type MCPServerDoc } from '../services/mcpApi';
+import { getFrappeErrorMessage } from '../lib/frappe-error';
+import { MCPHeader } from '../components/mcp/MCPHeader';
+import { DetailsTab } from '../components/mcp/DetailsTab';
+import { ConnectionTab } from '../components/mcp/ConnectionTab';
+import { ToolsTab } from '../components/mcp/ToolsTab';
+import { mcpFormSchema, type MCPFormValues, type MCPTool } from '../components/mcp/types';
+import { createFormSubmitHandler, type TabFieldMapping } from '../utils/formValidation';
+
+export function McpDetailsPage() {
+  const { mcpId } = useParams<{ mcpId: string }>();
+  const navigate = useNavigate();
+  const isNew = mcpId === 'new';
+
+  // Tab configuration - single source of truth
+  const tabConfig = {
+    details: {
+      label: 'Details',
+      fields: ['server_name', 'enabled', 'description', 'tool_namespace', 'timeout_seconds'], // server_name only shown/required for new servers
+      default: true,
+      disabled: false,
+    },
+    connection: {
+      label: 'Connection',
+      fields: ['transport_type', 'server_url', 'auth_type', 'auth_header_name', 'auth_header_value'],
+      default: false,
+      disabled: false,
+    },
+    tools: {
+      label: 'Tools',
+      fields: ['enable_auto_sync'], // Tools tab has enable_auto_sync field
+      default: false,
+      disabled: isNew, // Disabled for new MCP creation
+    },
+  } as const;
+
+  // Extract derived values from tab config (memoized to avoid recreating on every render)
+  const validTabs = useMemo(() => Object.keys(tabConfig), []);
+  const defaultTab = useMemo(
+    () => Object.entries(tabConfig).find(([_, config]) => config.default)?.[0] || validTabs[0],
+    [validTabs]
+  );
+  const tabFieldMapping: TabFieldMapping = useMemo(
+    () => Object.fromEntries(
+      Object.entries(tabConfig).map(([key, config]) => [key, [...config.fields]])
+    ),
+    []
+  );
+  const tabLabels = useMemo(
+    () => Object.fromEntries(
+      Object.entries(tabConfig).map(([key, config]) => [key, config.label])
+    ),
+    []
+  );
+  
+  // State to track active tab from URL hash
+  const [activeTab, setActiveTab] = useState<string>(() => {
+    const hashFromUrl = window.location.hash.slice(1);
+    return (hashFromUrl && validTabs.includes(hashFromUrl)) ? hashFromUrl : defaultTab;
+  });
+  
+  // Listen for hash changes (back/forward navigation)
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hashFromUrl = window.location.hash.slice(1);
+      const tab = (hashFromUrl && validTabs.includes(hashFromUrl)) ? hashFromUrl : defaultTab;
+      setActiveTab(tab);
+    };
+    
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, [defaultTab, validTabs]);
+
+  // Handler to update tab in URL hash
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    // Only set hash if it's not the default tab, or clear hash if switching back to default
+    if (value === defaultTab) {
+      // Clear hash when switching to default tab
+      window.history.replaceState(null, '', window.location.pathname);
+    } else {
+      // Set hash for non-default tabs
+      window.location.hash = value;
+    }
+  };
+
+  const [loading, setLoading] = useState(!isNew);
+  const [saving, setSaving] = useState(false);
+  const [tools, setTools] = useState<MCPTool[]>([]);
+  const [syncing, setSyncing] = useState(false);
+  const [testingConnection, setTestingConnection] = useState(false);
+
+  const form = useForm<MCPFormValues>({
+    resolver: zodResolver(mcpFormSchema),
+    defaultValues: {
+      server_name: '',
+      enabled: true,
+      description: '',
+      tool_namespace: '',
+      timeout_seconds: undefined,
+      transport_type: 'http',
+      server_url: '',
+      auth_type: 'none',
+      auth_header_name: '',
+      auth_header_value: '',
+      enable_auto_sync: false,
+    },
+  });
+
+  const watchEnabled = form.watch('enabled');
+  const isDirty = form.formState.isDirty;
+  const [lastSync, setLastSync] = useState<string | undefined>();
+
+  // Load MCP server data when id is available (only for edit mode)
+  useEffect(() => {
+    if (mcpId && !isNew) {
+      getMCPServer(mcpId).then((data: MCPServerDoc) => {
+        form.reset({
+          server_name: data.server_name || '',
+          enabled: data.enabled === 1,
+          description: data.description || '',
+          tool_namespace: data.tool_namespace || '',
+          timeout_seconds: data.timeout_seconds,
+          transport_type: data.transport_type || 'http',
+          server_url: data.server_url || '',
+          auth_type: data.auth_type || 'none',
+          auth_header_name: data.auth_header_name || '',
+          auth_header_value: '', // Don't load the encrypted value
+          enable_auto_sync: data.enable_auto_sync === 1,
+        });
+        
+        // Load last_sync
+        setLastSync(data.last_sync);
+        
+        // Load tools from child table
+        if (data.tools && Array.isArray(data.tools)) {
+          setTools(data.tools as MCPTool[]);
+        } else {
+          setTools([]);
+        }
+        
+        setLoading(false);
+      }).catch((error) => {
+        console.error('Error loading MCP server:', error);
+        const errorMessage = getFrappeErrorMessage(error);
+        toast.error(errorMessage || 'Failed to load MCP server details');
+        setLoading(false);
+      });
+    } else if (isNew) {
+      // New MCP server mode - form already has default values
+      setLoading(false);
+      setTools([]);
+    }
+  }, [mcpId, isNew, form]);
+
+  const onSubmit = async (values: MCPFormValues) => {
+    setSaving(true);
+    try {
+      // Convert form values to MCPServerDoc format
+      const mcpData: Partial<MCPServerDoc> = {
+        server_name: values.server_name,
+        enabled: values.enabled ? 1 : 0,
+        description: values.description || '',
+        tool_namespace: values.tool_namespace || '',
+        timeout_seconds: values.timeout_seconds,
+        transport_type: values.transport_type,
+        server_url: values.server_url,
+        auth_type: values.auth_type || 'none',
+        auth_header_name: values.auth_header_name || '',
+        auth_header_value: values.auth_header_value || '',
+        enable_auto_sync: values.enable_auto_sync ? 1 : 0,
+      };
+
+      if (isNew) {
+        // Create new MCP server
+        const newMCP = await createMCPServer(mcpData);
+        toast.success('MCP server created successfully!');
+        // Reset form state with the created server's values
+        form.reset({
+          server_name: newMCP.server_name || '',
+          enabled: newMCP.enabled === 1,
+          description: newMCP.description || '',
+          tool_namespace: newMCP.tool_namespace || '',
+          timeout_seconds: newMCP.timeout_seconds,
+          transport_type: newMCP.transport_type || 'http',
+          server_url: newMCP.server_url || '',
+          auth_type: newMCP.auth_type || 'none',
+          auth_header_name: newMCP.auth_header_name || '',
+          auth_header_value: '', // Don't reset the encrypted value
+          enable_auto_sync: newMCP.enable_auto_sync === 1,
+        });
+        
+        // Load tools if available
+        if (newMCP.tools && Array.isArray(newMCP.tools)) {
+          setTools(newMCP.tools as MCPTool[]);
+        }
+        
+        // Navigate to the edit page with the new server's ID
+        navigate(`/mcp/${newMCP.name}`);
+      } else if (mcpId) {
+        // Update existing MCP server
+        await updateMCPServer(mcpId, mcpData);
+        toast.success('MCP server updated successfully!');
+        // Reset form state with the updated values to mark form as clean
+        form.reset({
+          server_name: values.server_name,
+          enabled: values.enabled,
+          description: values.description,
+          tool_namespace: values.tool_namespace,
+          timeout_seconds: values.timeout_seconds,
+          transport_type: values.transport_type,
+          server_url: values.server_url,
+          auth_type: values.auth_type,
+          auth_header_name: values.auth_header_name,
+          auth_header_value: '', // Don't reset the encrypted value
+          enable_auto_sync: values.enable_auto_sync,
+        });
+        
+        // Reload tools after update
+        if (mcpId) {
+          getMCPServer(mcpId).then((updatedData: MCPServerDoc) => {
+            if (updatedData.tools && Array.isArray(updatedData.tools)) {
+              setTools(updatedData.tools as MCPTool[]);
+            }
+          }).catch((error) => {
+            console.error('Error reloading tools:', error);
+          });
+        }
+      }
+    } catch (error) {
+      console.error(`Error ${isNew ? 'creating' : 'updating'} MCP server:`, error);
+      const errorMessage = getFrappeErrorMessage(error);
+      toast.error(errorMessage || `Failed to ${isNew ? 'create' : 'update'} MCP server. Please try again.`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Memoize the form submit handler to avoid recreating it on every render
+  const handleFormSubmit = useMemo(
+    () => createFormSubmitHandler(form, activeTab, tabFieldMapping, tabLabels, onSubmit),
+    [form, activeTab, tabFieldMapping, tabLabels, onSubmit]
+  );
+
+  // Show save button for new servers or when form is dirty
+  const showSaveButton = isNew || isDirty;
+
+  // Handle tool sync (used by header button)
+  const handleSyncTools = async () => {
+    if (!mcpId || isNew) {
+      toast.error('Please save the MCP server first before syncing tools');
+      return;
+    }
+
+    setSyncing(true);
+    try {
+      const result = await syncMCPTools(mcpId);
+      if (result.success) {
+        toast.success(`Successfully synced ${result.tool_count || 0} tools`);
+        // Reload MCP server to get updated tools
+        const updatedData = await getMCPServer(mcpId);
+        if (updatedData.tools && Array.isArray(updatedData.tools)) {
+          setTools(updatedData.tools as MCPTool[]);
+        }
+        // Update last_sync state
+        if (updatedData.last_sync) {
+          setLastSync(updatedData.last_sync);
+        }
+      } else {
+        toast.error(result.error || 'Failed to sync tools');
+      }
+    } catch (error) {
+      console.error('Error syncing tools:', error);
+      const errorMessage = getFrappeErrorMessage(error);
+      toast.error(errorMessage || 'Failed to sync tools');
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  // Handle test connection
+  const handleTestConnection = async () => {
+    if (!mcpId || isNew) {
+      toast.error('Please save the MCP server first before testing connection');
+      return;
+    }
+
+    setTestingConnection(true);
+    try {
+      const result = await testMCPConnection(mcpId);
+      if (result.success) {
+        toast.success('Connection successful!');
+      } else {
+        toast.error(result.error || 'Connection test failed');
+      }
+    } catch (error) {
+      console.error('Error testing connection:', error);
+      const errorMessage = getFrappeErrorMessage(error);
+      toast.error(errorMessage || 'Failed to test connection');
+    } finally {
+      setTestingConnection(false);
+    }
+  };
+
+  // Handle tool toggle
+  const handleToolToggle = async (toolName: string, enabled: boolean) => {
+    if (!mcpId || isNew) {
+      return;
+    }
+
+    try {
+      // Update tool optimistically
+      const updatedTools: MCPTool[] = tools.map((tool) =>
+        tool.name === toolName ? { ...tool, enabled: (enabled ? 1 : 0) as 0 | 1 } : tool
+      );
+      setTools(updatedTools);
+
+      // Update via API
+      await updateMCPTool(mcpId, toolName, enabled);
+      toast.success(`Tool ${enabled ? 'enabled' : 'disabled'} successfully`);
+      
+      // Reload to ensure sync
+      const updatedData = await getMCPServer(mcpId);
+      if (updatedData.tools && Array.isArray(updatedData.tools)) {
+        setTools(updatedData.tools as MCPTool[]);
+      }
+    } catch (error) {
+      console.error('Error toggling tool:', error);
+      const errorMessage = getFrappeErrorMessage(error);
+      toast.error(errorMessage || 'Failed to update tool');
+      // Revert on error
+      const updatedData = await getMCPServer(mcpId);
+      if (updatedData.tools && Array.isArray(updatedData.tools)) {
+        setTools(updatedData.tools as MCPTool[]);
+      }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <div className="text-muted-foreground">Loading MCP server...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-auto">
+      <div className="p-6 space-y-6 max-w-6xl mx-auto">
+        <MCPHeader
+          form={form}
+          watchEnabled={watchEnabled}
+          isNew={isNew}
+          showSaveButton={showSaveButton}
+          saving={saving}
+          syncing={syncing}
+          testingConnection={testingConnection}
+          onSave={handleFormSubmit}
+          onSync={handleSyncTools}
+          onTestConnection={handleTestConnection}
+        />
+
+        <Form {...form}>
+          <form onSubmit={handleFormSubmit} className="space-y-6">
+            <Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+              <TabsList className="grid w-full grid-cols-3">
+                {Object.entries(tabConfig).map(([tabKey, config]) => (
+                  <TabsTrigger key={tabKey} value={tabKey} disabled={config.disabled}>
+                    {config.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+
+              <TabsContent value="details" className="space-y-4">
+                <DetailsTab form={form} isNew={isNew} />
+              </TabsContent>
+
+              <TabsContent value="connection" className="space-y-4">
+                <ConnectionTab form={form} />
+              </TabsContent>
+
+              <TabsContent value="tools" className="space-y-4">
+                <ToolsTab
+                  form={form}
+                  tools={tools}
+                  lastSync={lastSync}
+                  onToolToggle={handleToolToggle}
+                  onSync={handleSyncTools}
+                  syncing={syncing}
+                />
+              </TabsContent>
+            </Tabs>
+          </form>
+        </Form>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/McpDetailsPageWrapper.tsx b/frontend/src/pages/McpDetailsPageWrapper.tsx
new file mode 100644
index 0000000..5644154
--- /dev/null
+++ b/frontend/src/pages/McpDetailsPageWrapper.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { UnifiedLayout } from '../layouts/UnifiedLayout';
+import { McpDetailsPage } from './McpDetailsPage';
+import { getMCPServer } from '../services/mcpApi';
+
+export function McpDetailsPageWrapper() {
+  const { mcpId } = useParams<{ mcpId: string }>();
+  const [serverName, setServerName] = useState<string>('New MCP Server');
+  const isNew = mcpId === 'new';
+
+  useEffect(() => {
+    if (mcpId && !isNew) {
+      getMCPServer(mcpId).then((server) => {
+        setServerName(server.server_name || server.name);
+      }).catch((error) => {
+        console.error('Error loading MCP server:', error);
+        setServerName('MCP Server');
+      });
+    } else {
+      setServerName('New MCP Server');
+    }
+  }, [mcpId, isNew]);
+
+  const breadcrumbs = [
+    { label: 'MCP Servers', href: '/mcp' },
+    { label: serverName },
+  ];
+
+  return (
+    <UnifiedLayout breadcrumbs={breadcrumbs}>
+      <McpDetailsPage />
+    </UnifiedLayout>
+  );
+}
+
diff --git a/frontend/src/pages/McpListingPage.tsx b/frontend/src/pages/McpListingPage.tsx
new file mode 100644
index 0000000..4b18a05
--- /dev/null
+++ b/frontend/src/pages/McpListingPage.tsx
@@ -0,0 +1,123 @@
+import { Calendar, Settings, Tag } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { PageLayout, FilterBar, GridView, ItemCard, LoadMoreButton } from '../components/dashboard';
+import { useInfiniteScroll } from '../hooks/useInfiniteScroll';
+import { getMCPServers } from '../services/mcpApi';
+import { formatTimeAgo } from '../utils/time';
+import type { MCPServerDoc } from '../services/mcpApi';
+
+function getStatusVariant(enabled: 0 | 1): 'default' | 'secondary' {
+  return enabled === 1 ? 'default' : 'secondary';
+}
+
+function getStatusLabel(enabled: 0 | 1): 'enabled' | 'disabled' {
+  return enabled === 1 ? 'enabled' : 'disabled';
+}
+
+export default function McpListingPage() {
+  const navigate = useNavigate();
+
+  const {
+    items: servers,
+    hasMore,
+    initialLoading,
+    loadingMore,
+    search,
+    setSearch,
+    loadMore,
+    total,
+  } = useInfiniteScroll<
+    { page?: number; limit?: number; start?: number; search?: string },
+    MCPServerDoc
+  >({
+    fetchFn: async (params) => {
+      const response = await getMCPServers({
+        page: params.page,
+        limit: params.limit,
+        start: params.start,
+        search: params.search,
+      });
+
+      // Handle both old (array) and new (paginated) response formats
+      if (Array.isArray(response)) {
+        return {
+          data: response,
+          hasMore: false,
+          total: response.length,
+        };
+      }
+
+      // Convert PaginatedMCPServersResponse to PaginatedResponse format
+      return {
+        data: response.items,
+        hasMore: response.hasMore,
+        total: response.total,
+      };
+    },
+    initialParams: {},
+    pageSize: 20,
+    debounceMs: 300,
+    autoLoad: true,
+  });
+
+  return (
+    <PageLayout
+      subtitle="Manage Model Context Protocol (MCP) servers and their configurations"
+      filters={
+        <FilterBar
+          searchPlaceholder="Search MCP servers..."
+          searchValue={search}
+          onSearchChange={setSearch}
+        />
+      }
+    >
+      <GridView
+        items={servers}
+        columns={{ sm: 1, md: 2, lg: 3 }}
+        loading={initialLoading}
+        emptyState={
+          <div className="text-center py-12">
+            <p className="text-muted-foreground mb-4">No MCP servers found.</p>
+          </div>
+        }
+        renderItem={(server) => {
+          const status = getStatusLabel(server.enabled);
+          return (
+            <ItemCard
+              title={server.server_name || server.name}
+              description={server.description?.slice(0, 100) || 'No description'}
+              status={{
+                label: status,
+                variant: getStatusVariant(server.enabled),
+              }}
+              metadata={[
+                ...(server.tool_namespace ? [{ label: 'Namespace', value: server.tool_namespace, icon: Tag }] : []),
+                { label: 'Last Sync', value: server.last_sync ? formatTimeAgo(server.last_sync) : 'Never', icon: Calendar },
+              ]}
+              actions={[
+                {
+                  icon: Settings,
+                  label: 'Configure',
+                  onClick: () => navigate(`/mcp/${server.name}`),
+                },
+              ]}
+              onClick={() => navigate(`/mcp/${server.name}`)}
+            />
+          );
+        }}
+        keyExtractor={(server) => server.name}
+      />
+      <LoadMoreButton
+        hasMore={hasMore}
+        loading={loadingMore}
+        onLoadMore={loadMore}
+        disabled={!!search || initialLoading}
+      />
+      {!hasMore && servers.length > 0 && (
+        <div className="text-center py-4 text-sm text-muted-foreground">
+          {total !== undefined ? `Showing all ${total} MCP servers` : 'No more MCP servers to load'}
+        </div>
+      )}
+    </PageLayout>
+  );
+}
diff --git a/frontend/src/services/mcpApi.ts b/frontend/src/services/mcpApi.ts
new file mode 100644
index 0000000..f84a3c2
--- /dev/null
+++ b/frontend/src/services/mcpApi.ts
@@ -0,0 +1,303 @@
+/**
+ * MCP Server API functions
+ * 
+ * Provides frontend API for managing MCP server connections.
+ */
+
+import { db, call } from '@/lib/frappe-sdk';
+import { handleFrappeError } from '@/lib/frappe-error';
+import { doctype } from '@/data/doctypes';
+
+/**
+ * MCP Server document from Frappe
+ */
+export interface MCPServerDoc {
+    name: string;
+    server_name: string;
+    description?: string;
+    enabled: 0 | 1;
+    transport_type: 'http' | 'sse';
+    server_url: string;
+    auth_type?: 'none' | 'api_key' | 'bearer_token' | 'custom_header';
+    auth_header_name?: string;
+    auth_header_value?: string;
+    tool_namespace?: string;
+    timeout_seconds?: number;
+    last_sync?: string;
+    available_tools?: string;
+    enable_auto_sync?: 0 | 1;
+    tools?: Array<{
+        name: string;
+        tool_name: string;
+        description?: string;
+        parameters?: string;
+        enabled: 0 | 1;
+    }>;
+}
+
+/**
+ * MCP Server reference for agent child table
+ */
+export interface MCPServerRef {
+    name: string;           // Child table row name
+    mcp_server: string;     // Link to MCP Server DocType
+    server_name?: string;   // Display name from MCP Server
+    description?: string;   // Description from MCP Server
+    server_url?: string;    // URL from MCP Server
+    enabled: boolean | number;       // Whether enabled for this agent (0/1 from Frappe, boolean from frontend)
+    mcp_enabled?: boolean | number;  // Whether the MCP Server itself is enabled (0/1 from Frappe, boolean from frontend)
+    tool_count?: number;    // Number of tools available
+    last_sync?: string;     // Last sync timestamp
+}
+
+/**
+ * Pagination parameters for MCP servers
+ */
+export interface GetMCPServersParams {
+    page?: number;
+    limit?: number;
+    start?: number;
+    search?: string;
+}
+
+/**
+ * Paginated response for MCP servers
+ */
+export interface PaginatedMCPServersResponse {
+    items: MCPServerDoc[];
+    hasMore: boolean;
+    total?: number;
+}
+
+/**
+ * Fetch all available MCP servers
+ * Supports pagination and search
+ */
+export async function getMCPServers(
+    params?: GetMCPServersParams
+): Promise<PaginatedMCPServersResponse | MCPServerDoc[]> {
+    try {
+        // Backward compatibility: if no params, return array (old API)
+        if (!params) {
+            const response = await db.getDocList(doctype['MCP Server'], {
+            fields: [
+                'name',
+                'server_name',
+                'description',
+                'enabled',
+                'transport_type',
+                'server_url',
+                'tool_namespace',
+                'timeout_seconds',
+                'last_sync',
+            ],
+            orderBy: { field: 'server_name', order: 'asc' },
+            limit: 100,
+        });
+        return response as MCPServerDoc[];
+        }
+
+        const {
+            page = 1,
+            limit = 20,
+            start = (page - 1) * limit,
+            search,
+        } = params;
+
+        // Build filters
+        const filters: Array<[string, string, unknown]> = [];
+
+        // Build search filters if provided (search in server_name)
+        if (search && search.trim()) {
+            filters.push(['server_name', 'like', `%${search.trim()}%`]);
+        }
+
+        // Fetch data
+        const servers = await db.getDocList(doctype['MCP Server'], {
+            fields: [
+                'name',
+                'server_name',
+                'description',
+                'enabled',
+                'transport_type',
+                'server_url',
+                'tool_namespace',
+                'timeout_seconds',
+                'last_sync',
+            ],
+            filters: filters.length > 0 ? (filters as any) : undefined,
+            limit: limit + 1, // Fetch one extra to check if there's more
+            ...(start > 0 && { limit_start: start }), // Only include if start > 0
+            orderBy: { field: 'modified', order: 'desc' },
+        });
+
+        const mappedServers = servers as MCPServerDoc[];
+        const hasMore = mappedServers.length > limit;
+        const items = hasMore ? mappedServers.slice(0, limit) : mappedServers;
+
+        // Only fetch count on first page to avoid unnecessary API calls
+        let total: number | undefined;
+        if (page === 1) {
+            try {
+                const { fetchDocCount } = await import('./utilsApi');
+                const countFilters = [...filters];
+                total = await fetchDocCount(doctype['MCP Server'], countFilters);
+            } catch {
+                // Ignore count errors - total is optional
+            }
+        }
+
+        return {
+            items,
+            hasMore,
+            total,
+        };
+    } catch (error) {
+        handleFrappeError(error, 'Error fetching MCP servers');
+    }
+}
+
+/**
+ * Fetch a single MCP server by name
+ */
+export async function getMCPServer(name: string): Promise<MCPServerDoc> {
+    try {
+        const response = await db.getDoc(doctype['MCP Server'], name);
+        // Note: Frappe automatically includes child tables when fetching a doc
+        // Tools child table will be included if it exists
+        return response as MCPServerDoc;
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Create a new MCP server
+ */
+export async function createMCPServer(data: Partial<MCPServerDoc>): Promise<MCPServerDoc> {
+    try {
+        const response = await db.createDoc(doctype['MCP Server'], data);
+        return response as MCPServerDoc;
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Update an MCP server
+ */
+export async function updateMCPServer(name: string, data: Partial<MCPServerDoc>): Promise<MCPServerDoc> {
+    try {
+        const response = await db.updateDoc(doctype['MCP Server'], name, data);
+        return response as MCPServerDoc;
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Delete an MCP server
+ */
+export async function deleteMCPServer(name: string): Promise<void> {
+    try {
+        await db.deleteDoc(doctype['MCP Server'], name);
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Get MCP servers linked to an agent
+ */
+export async function getAgentMCPServers(agentName: string): Promise<MCPServerRef[]> {
+    try {
+        const response = await call.post('huf.ai.mcp_client.get_agent_mcp_servers', {
+            agent_name: agentName,
+        });
+        return (response.message || []) as MCPServerRef[];
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Get all available MCP servers (enabled ones)
+ */
+export async function getAvailableMCPServers(): Promise<MCPServerRef[]> {
+    try {
+        const response = await call.post('huf.ai.mcp_client.get_available_mcp_servers', {});
+        return (response.message || []) as MCPServerRef[];
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Test connection to an MCP server
+ */
+export async function testMCPConnection(serverName: string): Promise<{ success: boolean; error?: string }> {
+    try {
+        const response = await call.post('huf.ai.mcp_client.test_mcp_connection', {
+            server_name: serverName,
+        });
+        return response.message as { success: boolean; error?: string };
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Sync tools from an MCP server
+ */
+export async function syncMCPTools(serverName: string): Promise<{
+    success: boolean;
+    tool_count?: number;
+    tools?: string[];
+    error?: string;
+}> {
+    try {
+        const response = await call.post('huf.ai.mcp_client.sync_mcp_server_tools', {
+            server_name: serverName,
+        });
+        return response.message as { success: boolean; tool_count?: number; tools?: string[]; error?: string };
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
+
+/**
+ * Update MCP tool enabled status
+ * Note: In Frappe, child table updates require updating the entire array
+ * We need to get the current tools, update the specific one, and save all
+ */
+export async function updateMCPTool(serverName: string, toolName: string, enabled: boolean): Promise<void> {
+    try {
+        // First, get the current document to get all tools
+        const currentDoc = await db.getDoc(doctype['MCP Server'], serverName);
+        const currentTools = (currentDoc as MCPServerDoc).tools || [];
+        
+        // Update the specific tool in the array
+        const updatedTools = currentTools.map((tool: any) => {
+            if (tool.name === toolName) {
+                return { ...tool, enabled: enabled ? 1 : 0 };
+            }
+            return tool;
+        });
+        
+        // Update the document with the modified tools array
+        await db.updateDoc(doctype['MCP Server'], serverName, {
+            tools: updatedTools,
+        });
+    } catch (error) {
+        handleFrappeError(error);
+        throw error;
+    }
+}
diff --git a/frontend/src/types/agent.types.ts b/frontend/src/types/agent.types.ts
index 6b37a84..b719ebd 100644
--- a/frontend/src/types/agent.types.ts
+++ b/frontend/src/types/agent.types.ts
@@ -192,6 +192,10 @@ export interface AgentDoc {
   description?: string | null;
   instructions: string;
   agent_tool: AgentToolFunctionRef[]; // Array of agent tool references
+  agent_mcp_server?: Array<{
+    mcp_server: string;
+    enabled: 0 | 1;
+  }>; // Array of MCP server references
   last_run?: string | null; // Last execution timestamp
   total_run?: number; // Total number of runs
 }
diff --git a/frontend/src/utils/formValidation.ts b/frontend/src/utils/formValidation.ts
new file mode 100644
index 0000000..cea5b80
--- /dev/null
+++ b/frontend/src/utils/formValidation.ts
@@ -0,0 +1,122 @@
+import { UseFormReturn, FieldErrors } from 'react-hook-form';
+import { toast } from 'sonner';
+import type React from 'react';
+
+/**
+ * Maps form fields to their respective tabs
+ */
+export interface TabFieldMapping {
+  [tabName: string]: string[];
+}
+
+/**
+ * Checks for form errors in tabs that are not currently visible
+ * and shows a toast notification if errors are found
+ * 
+ * @param form - The react-hook-form instance
+ * @param activeTab - The currently active tab name
+ * @param tabFieldMapping - Object mapping tab names to their field arrays
+ * @param tabLabels - Optional object mapping tab names to display labels
+ * @returns Array of tab names that have errors
+ */
+export function checkHiddenTabErrors<T extends Record<string, any>>(
+  form: UseFormReturn<T>,
+  activeTab: string,
+  tabFieldMapping: TabFieldMapping,
+  tabLabels?: Record<string, string>
+): string[] {
+  const errors = form.formState.errors;
+  const tabsWithErrors: string[] = [];
+
+  // Check each tab (except the active one) for errors
+  Object.entries(tabFieldMapping).forEach(([tabName, fields]) => {
+    if (tabName === activeTab) {
+      return; // Skip the active tab
+    }
+
+    // Check if any field in this tab has an error
+    const hasError = fields.some((fieldName) => {
+      const fieldError = getNestedError(errors, fieldName);
+      return !!fieldError;
+    });
+
+    if (hasError) {
+      tabsWithErrors.push(tabName);
+    }
+  });
+
+  // Show toast if there are errors in hidden tabs
+  if (tabsWithErrors.length > 0) {
+    const tabLabelsToUse = tabLabels || tabFieldMapping;
+    const tabNames = tabsWithErrors
+      .map((tab) => tabLabelsToUse[tab] || tab)
+      .join(', ');
+    
+    toast.error(
+      `Please fix errors in the following tab${tabsWithErrors.length > 1 ? 's' : ''}: ${tabNames}`,
+      {
+        duration: 5000,
+      }
+    );
+  }
+
+  return tabsWithErrors;
+}
+
+/**
+ * Helper function to get nested error from field path (e.g., "user.name")
+ */
+function getNestedError(errors: FieldErrors<any>, fieldPath: string): any {
+  const parts = fieldPath.split('.');
+  let current: any = errors;
+  
+  for (const part of parts) {
+    if (current && typeof current === 'object' && part in current) {
+      current = current[part];
+    } else {
+      return undefined;
+    }
+  }
+  
+  return current;
+}
+
+/**
+ * Creates a reusable form submit handler that validates all fields,
+ * checks for errors in hidden tabs, and calls onSubmit only if validation passes
+ * 
+ * @param form - The react-hook-form instance
+ * @param activeTab - The currently active tab name
+ * @param tabFieldMapping - Object mapping tab names to their field arrays
+ * @param tabLabels - Optional object mapping tab names to display labels
+ * @param onSubmit - The callback function to execute when form is valid
+ * @returns A function that can be used as form submit handler or button onClick handler
+ */
+export function createFormSubmitHandler<T extends Record<string, any>>(
+  form: UseFormReturn<T>,
+  activeTab: string,
+  tabFieldMapping: TabFieldMapping,
+  tabLabels: Record<string, string>,
+  onSubmit: (values: T) => Promise<void> | void
+): (e?: React.FormEvent) => Promise<void> {
+  return async (e?: React.FormEvent) => {
+    e?.preventDefault();
+    
+    // Trigger validation on all fields first
+    const isValid = await form.trigger();
+    
+    // Check for errors in hidden tabs after validation
+    // This will show toast if there are errors in hidden tabs
+    checkHiddenTabErrors(form, activeTab, tabFieldMapping, tabLabels);
+    
+    // If validation failed, don't proceed (toast already shown by checkHiddenTabErrors)
+    if (!isValid) {
+      return;
+    }
+
+    // Form is valid, proceed with submission
+    const values = form.getValues();
+    await onSubmit(values);
+  };
+}
+
diff --git a/huf/ai/agent_integration.py b/huf/ai/agent_integration.py
index 97aaa5e..50ebd1e 100644
--- a/huf/ai/agent_integration.py
+++ b/huf/ai/agent_integration.py
@@ -258,11 +258,22 @@ def process_tool_call(agent_run, conversation, name=None, args=None, result=None
                  return None
 
         else:
+            is_mcp_tool = 0
+            mcp_server = None
+
+            if name:
+                mcp_tool_entry = frappe.db.get_value("MCP Server Tool", {"tool_name": name, "enabled": 1}, "parent")
+                if mcp_tool_entry:
+                    is_mcp_tool = 1
+                    mcp_server = mcp_tool_entry
+
             doc = frappe.get_doc({
                 "doctype": "Agent Tool Call",
                 "agent_run": agent_run,
                 "conversation": conversation,
                 "tool": name,
+                "is_mcp_tool": is_mcp_tool,
+                "mcp_server": mcp_server,
                 "tool_args": json.dumps(args) if args else None,
                 "tool_result": json.dumps(result) if result else None,
                 "error_message": error,
diff --git a/huf/ai/mcp_client.py b/huf/ai/mcp_client.py
new file mode 100644
index 0000000..bff4e4f
--- /dev/null
+++ b/huf/ai/mcp_client.py
@@ -0,0 +1,660 @@
+# Copyright (c) 2025, Tridz Technologies Pvt Ltd
+# For license information, please see license.txt
+
+"""
+MCP Client Adapter for HUF
+
+This module provides the core MCP client functionality for HUF agents.
+It allows agents to connect to external MCP servers and use their tools.
+
+Features:
+- Connect to MCP servers (HTTP/SSE)
+- Fetch available tools from MCP servers
+- Convert MCP tools to HUF FunctionTool format
+- Execute MCP tool calls
+- Return results in HUF's expected format
+
+Uses LiteLLM's experimental MCP client for underlying MCP protocol handling.
+"""
+
+import asyncio
+import json
+from typing import Any
+
+import frappe
+from frappe import _
+from frappe.utils import now_datetime
+
+from agents import FunctionTool
+
+
+# MCP Tool prefix to identify MCP-sourced tools during execution
+MCP_TOOL_PREFIX = "__mcp__"
+
+
+def create_mcp_tools(agent_doc) -> list[FunctionTool]:
+    """
+    Create FunctionTool objects for all MCP tools available to an agent.
+    
+    This is the main entry point called from sdk_tools.create_agent_tools().
+    
+    Args:
+        agent_doc: The Agent document with agent_mcp_server child table
+    
+    Returns:
+        list[FunctionTool]: List of FunctionTool objects for MCP tools
+    """
+    tools = []
+    
+    if not hasattr(agent_doc, "agent_mcp_server") or not agent_doc.agent_mcp_server:
+        return tools
+    
+    for mcp_link in agent_doc.agent_mcp_server:
+        if not mcp_link.enabled:
+            continue
+        
+        try:
+            mcp_server = frappe.get_doc("MCP Server", mcp_link.mcp_server)
+            
+            if not mcp_server.enabled:
+                continue
+            
+            # Iterate through enabled tools in child table
+            for tool_row in mcp_server.tools:
+                if not tool_row.enabled:
+                    continue
+                    
+                # Reconstruct tool definition from child table
+                try:
+                    parameters = json.loads(tool_row.parameters) if tool_row.parameters else {}
+                except Exception:
+                    parameters = {}
+                    
+                tool_def = {
+                    "name": tool_row.tool_name,
+                    "description": tool_row.description,
+                    "parameters": parameters
+                }
+                
+                tool = _create_mcp_function_tool(mcp_server, tool_def)
+                if tool:
+                    tools.append(tool)
+                    
+        except Exception as e:
+            frappe.log_error(
+                f"Error loading MCP tools from {mcp_link.mcp_server}: {str(e)}",
+                "MCP Client Error"
+            )
+    
+    return tools
+
+
+def _get_cached_mcp_tools(mcp_server) -> list[dict]:
+    """
+    Get cached tools from an MCP server document.
+    
+    Args:
+        mcp_server: MCP Server document
+    
+    Returns:
+        list[dict]: List of tool definitions
+    """
+    if not mcp_server.available_tools:
+        return []
+    
+    try:
+        tools = json.loads(mcp_server.available_tools)
+        return tools if isinstance(tools, list) else []
+    except (json.JSONDecodeError, TypeError):
+        return []
+
+
+def _create_mcp_function_tool(mcp_server, tool_def: dict) -> FunctionTool:
+    """
+    Create a FunctionTool wrapper for an MCP tool.
+    
+    The tool's on_invoke_tool will call the MCP server to execute the tool.
+    
+    Args:
+        mcp_server: MCP Server document
+        tool_def: Tool definition from MCP server (OpenAI format)
+    
+    Returns:
+        FunctionTool: Wrapped tool that calls MCP server on invocation
+    """
+    try:
+        # Extract tool info from OpenAI format
+        if "function" in tool_def:
+            # OpenAI format: {"type": "function", "function": {...}}
+            func_def = tool_def["function"]
+        else:
+            # Direct format
+            func_def = tool_def
+        
+        tool_name = func_def.get("name", "")
+        description = func_def.get("description", "")
+        parameters = func_def.get("parameters", {})
+        
+        if not tool_name:
+            return None
+        
+        # Apply namespace prefix if configured
+        display_name = tool_name
+        if mcp_server.tool_namespace:
+            display_name = f"{mcp_server.tool_namespace}.{tool_name}"
+        
+        # Store server info for the closure
+        server_name = mcp_server.name
+        original_tool_name = tool_name
+        
+        async def on_invoke_tool(ctx=None, args_json: str = None) -> str:
+            """Execute the MCP tool via the MCP server"""
+            try:
+                if args_json is None and isinstance(ctx, str):
+                    args_json = ctx
+                    ctx = None
+                
+                args_dict = json.loads(args_json or "{}")
+                
+                # Execute the tool on the MCP server
+                result = await execute_mcp_tool(
+                    server_name=server_name,
+                    tool_name=original_tool_name,
+                    arguments=args_dict
+                )
+                
+                return json.dumps(result, default=str) if isinstance(result, (dict, list)) else str(result)
+                
+            except Exception as e:
+                frappe.log_error(
+                    f"Error executing MCP tool '{display_name}': {str(e)}",
+                    "MCP Tool Execution Error"
+                )
+                return json.dumps({"error": str(e)})
+        
+        # Sanitize tool name for OpenAI compatibility
+        import re
+        safe_name = re.sub(r'[^a-zA-Z0-9_-]', '_', display_name)
+        if len(safe_name) > 64:
+            safe_name = safe_name[:64]
+        
+        tool = FunctionTool(
+            name=safe_name,
+            description=f"[MCP:{mcp_server.server_name}] {description}",
+            params_json_schema=parameters,
+            on_invoke_tool=on_invoke_tool,
+            strict_json_schema=False
+        )
+        
+        return tool
+        
+    except Exception as e:
+        frappe.log_error(
+            f"Error creating MCP tool from {tool_def}: {str(e)}",
+            "MCP Client Error"
+        )
+        return None
+
+
+async def execute_mcp_tool(
+    server_name: str,
+    tool_name: str,
+    arguments: dict
+) -> Any:
+    """
+    Execute a tool call on an MCP server and return the result.
+    
+    This function handles the actual MCP protocol communication.
+    
+    Args:
+        server_name: Name of the MCP Server document
+        tool_name: Name of the tool to execute
+        arguments: Arguments to pass to the tool
+    
+    Returns:
+        The result from the MCP tool execution
+    """
+    try:
+        mcp_server = frappe.get_doc("MCP Server", server_name)
+        
+        # Build headers
+        headers = _build_mcp_headers(mcp_server)
+        return await _execute_mcp_tool_http(
+            mcp_server, tool_name, arguments, headers
+        )
+        
+        # Use LiteLLM's experimental MCP client if available
+        # try:
+        #     from litellm.experimental_mcp_client import call_openai_tool
+            
+        #     # Prepare the tool call in OpenAI format
+        #     tool_call = {
+        #         "type": "function",
+        #         "function": {
+        #             "name": tool_name,
+        #             "arguments": json.dumps(arguments)
+        #         }
+        #     }
+            
+        #     # Call the MCP tool
+        #     result = await call_openai_tool(
+        #         mcp_url=mcp_server.server_url,
+        #         tool_call=tool_call,
+        #         headers=headers,
+        #         timeout=mcp_server.timeout_seconds or 30
+        #     )
+            
+        #     return result
+            
+        # except ImportError:
+        #     # Fallback to direct HTTP call if LiteLLM MCP client not available
+        #     return await _execute_mcp_tool_http(
+        #         mcp_server, tool_name, arguments, headers
+        #     )
+            
+    except Exception as e:
+        frappe.log_error(
+            f"Error executing MCP tool {tool_name} on {server_name}: {str(e)}",
+            "MCP Tool Execution Error"
+        )
+        return {"error": str(e), "success": False}
+
+
+async def _execute_mcp_tool_http(
+    mcp_server,
+    tool_name: str,
+    arguments: dict,
+    headers: dict
+) -> Any:
+    """
+    Fallback HTTP-based MCP tool execution.
+    
+    This is used when LiteLLM's MCP client is not available.
+    """
+    import aiohttp
+    
+    url = mcp_server.server_url
+    timeout = aiohttp.ClientTimeout(total=mcp_server.timeout_seconds or 30)
+    
+    # MCP JSON-RPC format for tool calls
+    payload = {
+        "jsonrpc": "2.0",
+        "method": "tools/call",
+        "params": {
+            "name": tool_name,
+            "arguments": arguments
+        },
+        "id": 1
+    }
+    
+    try:
+        async with aiohttp.ClientSession(timeout=timeout) as session:
+            async with session.post(url, json=payload, headers=headers) as response:
+                if response.status != 200:
+                    error_text = await response.text()
+                    return {
+                        "error": f"MCP server returned status {response.status}: {error_text}",
+                        "success": False
+                    }
+                
+                result = await response.json()
+                
+                # Handle JSON-RPC response
+                if "error" in result:
+                    return {
+                        "error": result["error"].get("message", "Unknown MCP error"),
+                        "success": False
+                    }
+                
+                return result.get("result", result)
+                
+    except asyncio.TimeoutError:
+        return {"error": f"MCP server timeout after {mcp_server.timeout_seconds}s", "success": False}
+    except Exception as e:
+        return {"error": str(e), "success": False}
+
+
+def _build_mcp_headers(mcp_server) -> dict:
+    """
+    Build HTTP headers for MCP server requests.
+    
+    Args:
+        mcp_server: MCP Server document
+    
+    Returns:
+        dict: Headers dictionary
+    """
+    headers = {
+        "Content-Type": "application/json",
+        "Accept": "application/json"
+    }
+    
+    # Add authentication header
+    if mcp_server.auth_type and mcp_server.auth_type != "none":
+        auth_value = mcp_server.get_password("auth_header_value")
+        
+        if auth_value and mcp_server.auth_header_name:
+            if mcp_server.auth_type == "bearer_token":
+                headers[mcp_server.auth_header_name] = f"Bearer {auth_value}"
+            else:
+                headers[mcp_server.auth_header_name] = auth_value
+    
+    # Add custom headers
+    if mcp_server.custom_headers:
+        for header in mcp_server.custom_headers:
+            headers[header.header_name] = header.header_value
+    
+    return headers
+
+
+@frappe.whitelist()
+def sync_mcp_server_tools(server_name: str) -> dict:
+    """
+    Fetch and cache available tools from an MCP server.
+    
+    This function connects to the MCP server, retrieves the list of
+    available tools, and caches them in the MCP Server document.
+    
+    Args:
+        server_name: Name of the MCP Server document
+    
+    Returns:
+        dict: Result with success status and tool count
+    """
+    try:
+        mcp_server = frappe.get_doc("MCP Server", server_name)
+        headers = _build_mcp_headers(mcp_server)
+        
+        # Try to use LiteLLM's MCP client
+        # try:
+        #     tools = _sync_tools_via_litellm(mcp_server, headers)
+        # except ImportError:
+            # Fallback to direct HTTP
+        tools = _sync_tools_via_http(mcp_server, headers)
+        
+        # Cache tools in the document
+        mcp_server.available_tools = json.dumps(tools, indent=2)
+        mcp_server.last_sync = now_datetime()
+        
+        # Sync tools to child table
+        current_tools = {t.tool_name: t for t in mcp_server.tools}
+        synced_tool_names = set()
+        
+        for tool_def in tools:
+            # Handle both OpenAI format and direct format
+            if isinstance(tool_def, dict) and "function" in tool_def:
+                func_def = tool_def["function"]
+            else:
+                func_def = tool_def
+                
+            tool_name = func_def.get("name")
+            if not tool_name:
+                continue
+                
+            synced_tool_names.add(tool_name)
+            description = func_def.get("description", "")
+            parameters = json.dumps(func_def.get("parameters", {}), indent=2)
+            
+            if tool_name in current_tools:
+                # Update existing tool
+                row = current_tools[tool_name]
+                row.description = description
+                row.parameters = parameters
+            else:
+                # Add new tool
+                mcp_server.append("tools", {
+                    "tool_name": tool_name,
+                    "description": description,
+                    "parameters": parameters,
+                    "enabled": 1
+                })
+        
+        mcp_server.save(ignore_permissions=True)
+        frappe.db.commit()
+        
+        return {
+            "success": True,
+            "tool_count": len(tools),
+            "tools": [t.get("function", t).get("name", "unknown") for t in tools]
+        }
+        
+    except Exception as e:
+        frappe.log_error(
+            f"Error syncing MCP tools from {server_name}: {str(e)}",
+            "MCP Sync Error"
+        )
+        return {
+            "success": False,
+            "error": str(e)
+        }
+
+
+def _sync_tools_via_litellm(mcp_server, headers: dict) -> list:
+    """
+    Sync tools using LiteLLM's experimental MCP client.
+    """
+    from litellm.experimental_mcp_client import load_mcp_tools
+    
+    # Run async function synchronously
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
+    
+    try:
+        tools = loop.run_until_complete(
+            load_mcp_tools(
+                mcp_url=mcp_server.server_url,
+                headers=headers,
+                format="openai"  # Get tools in OpenAI function format
+            )
+        )
+        return tools if tools else []
+    finally:
+        loop.close()
+
+
+def _sync_tools_via_http(mcp_server, headers: dict) -> list:
+    """
+    Sync tools using direct HTTP calls to MCP server.
+    """
+    import requests
+    
+    # MCP JSON-RPC format for listing tools
+    payload = {
+        "jsonrpc": "2.0",
+        "method": "tools/list",
+        "params": {},
+        "id": 1
+    }
+    
+    response = requests.post(
+        mcp_server.server_url,
+        json=payload,
+        headers=headers,
+        timeout=mcp_server.timeout_seconds or 30
+    )
+    
+    response.raise_for_status()
+    result = response.json()
+    
+    if "error" in result:
+        raise Exception(result["error"].get("message", "Unknown MCP error"))
+    
+    # Convert MCP tools list to OpenAI format
+    mcp_tools = result.get("result", {}).get("tools", [])
+    openai_tools = []
+    
+    for tool in mcp_tools:
+        openai_tools.append({
+            "type": "function",
+            "function": {
+                "name": tool.get("name", ""),
+                "description": tool.get("description", ""),
+                "parameters": tool.get("inputSchema", {})
+            }
+        })
+    
+    return openai_tools
+
+
+@frappe.whitelist()
+def test_mcp_connection(server_name: str) -> dict:
+    """
+    Test connection to an MCP server.
+    
+    Args:
+        server_name: Name of the MCP Server document
+    
+    Returns:
+        dict: Result with success status
+    """
+    try:
+        mcp_server = frappe.get_doc("MCP Server", server_name)
+        if not mcp_server.server_url:
+            return {"success": False, "error": "Server URL is not set"}
+        if not mcp_server.auth_header_name or not mcp_server.auth_header_value:
+            return {"success": False, "error": "Auth Details are not set"}
+        
+        headers = _build_mcp_headers(mcp_server)
+        
+        import requests
+        
+        # Try a simple ping/list request
+        payload = {
+            "jsonrpc": "2.0",
+            "method": "tools/list",
+            "params": {},
+            "id": 1
+        }
+        response = requests.post(
+            mcp_server.server_url,
+            json=payload,
+            headers=headers,
+            timeout=min(mcp_server.timeout_seconds or 30, 10)  # Max 10s for test
+        )
+        
+        if response.status_code == 200:
+            return {"success": True, "message": "Connection successful"}
+        else:
+            return {
+                "success": False,
+                "error": f"Server returned status {response.status_code}"
+            }
+            
+    except requests.exceptions.Timeout:
+        return {"success": False, "error": "Connection timed out"}
+    except requests.exceptions.ConnectionError as e:
+        return {"success": False, "error": f"Connection failed: {str(e)}"}
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
+@frappe.whitelist()
+def get_agent_mcp_servers(agent_name: str) -> list:
+    """
+    Get MCP servers linked to an agent.
+    
+    Args:
+        agent_name: Name of the Agent document
+    
+    Returns:
+        list: List of MCP server info dicts
+    """
+    try:
+        agent = frappe.get_doc("Agent", agent_name)
+        result = []
+        
+        for mcp_link in (agent.agent_mcp_server or []):
+            try:
+                mcp_server = frappe.get_doc("MCP Server", mcp_link.mcp_server)
+                
+                # Count tools
+                tool_count = 0
+                if mcp_server.available_tools:
+                    try:
+                        tools = json.loads(mcp_server.available_tools)
+                        tool_count = len(tools) if isinstance(tools, list) else 0
+                    except Exception:
+                        pass
+                
+                result.append({
+                    "name": mcp_link.name,
+                    "mcp_server": mcp_server.name,
+                    "server_name": mcp_server.server_name,
+                    "description": mcp_server.description,
+                    "server_url": mcp_server.server_url,
+                    "enabled": mcp_link.enabled,
+                    "mcp_enabled": mcp_server.enabled,
+                    "tool_count": tool_count,
+                    "last_sync": mcp_server.last_sync
+                })
+            except Exception:
+                continue
+        
+        return result
+        
+    except Exception as e:
+        frappe.log_error(f"Error getting agent MCP servers: {str(e)}", "MCP API Error")
+        return []
+
+
+@frappe.whitelist()
+def get_available_mcp_servers() -> list:
+    """
+    Get all available MCP servers.
+    
+    Returns:
+        list: List of MCP server info dicts
+    """
+    try:
+        servers = frappe.get_all(
+            "MCP Server",
+            filters={"enabled": 1},
+            fields=["name", "server_name", "description", "server_url", "last_sync"]
+        )
+        
+        result = []
+        for server in servers:
+            tool_count = 0
+            try:
+                available_tools = frappe.db.get_value(
+                    "MCP Server", server.name, "available_tools"
+                )
+                if available_tools:
+                    tools = json.loads(available_tools)
+                    tool_count = len(tools) if isinstance(tools, list) else 0
+            except Exception:
+                pass
+            
+            result.append({
+                **server,
+                "tool_count": tool_count
+            })
+        
+        return result
+        
+    except Exception as e:
+        frappe.log_error(f"Error getting available MCP servers: {str(e)}", "MCP API Error")
+        return []
+
+@frappe.whitelist()
+def auto_sync_mcp_server_tools():
+    """
+    Scheduled job to auto-sync MCP server Tools.
+    Runs hourly and checks if sync is due based on the interval.
+    """
+    from frappe.utils import time_diff_in_hours
+
+    servers = frappe.get_all(
+        "MCP Server",
+        filters={"enabled": 1, "enable_auto_sync": 1},
+        fields=["name", "auto_sync_interval", "last_sync"]
+    )
+    
+    for server in servers:
+        try:
+            # Check if sync is due
+            if not server.last_sync or time_diff_in_hours(now_datetime(), server.last_sync) >= server.auto_sync_interval:
+                frappe.log_error(f"Auto-syncing MCP Tools: {server.name}", "MCP Tools Auto Synced")
+                sync_mcp_server_tools(server.name)
+        except Exception as e:
+            frappe.log_error(f"Error auto-syncing {server.name}: {str(e)}", "MCP Tools Auto Sync Error")
diff --git a/huf/ai/sdk_tools.py b/huf/ai/sdk_tools.py
index 9a2fc46..81d31d0 100644
--- a/huf/ai/sdk_tools.py
+++ b/huf/ai/sdk_tools.py
@@ -27,8 +27,26 @@
 def create_agent_tools(agent) -> list[FunctionTool]:
     """
     Create function tools for Huf Agent
+    
+    This combines:
+    1. MCP tools from linked MCP servers
+    2. Native tools from Agent Tool Function documents
     """
     tools = []
+    
+    # Load MCP tools from linked MCP servers
+    if hasattr(agent, "agent_mcp_server") and agent.agent_mcp_server:
+        try:
+            from huf.ai.mcp_client import create_mcp_tools
+            mcp_tools = create_mcp_tools(agent)
+            tools.extend(mcp_tools)
+        except Exception as e:
+            frappe.log_error(
+                f"Error loading MCP tools for agent: {str(e)}",
+                "MCP Tool Loading Error"
+            )
+    
+    # Load native tools from Agent Tool Function documents
 
     if hasattr(agent, "agent_tool") and agent.agent_tool:
         for func in agent.agent_tool:
diff --git a/huf/hooks.py b/huf/hooks.py
index ebdda31..89a3d90 100644
--- a/huf/hooks.py
+++ b/huf/hooks.py
@@ -1,9 +1,10 @@
 app_name = "huf"
 app_title = "Huf"
-app_publisher = "Huf"
+app_publisher = "Tridz Technologies Pvt Ltd"
 app_description = "Build and run smart AI agents with tools, chat, and automation directly in the Frappe ecosystem."
 app_email = "info@tridz.com"
 app_license = "agpl"
+source_link = "https://github.com/tridz-dev/huf.git"
 
 # Apps
 # ------------------
@@ -11,15 +12,15 @@
 # required_apps = []
 
 # Each item in the list will be shown as an app in the apps page
-# add_to_apps_screen = [
-# 	{
-# 		"name": "huf",
-# 		"logo": "/assets/huf/logo.png",
-# 		"title": "Huf",
-# 		"route": "/huf",
-# 		"has_permission": "huf.api.permission.has_app_permission"
-# 	}
-# ]
+add_to_apps_screen = [
+	{
+		"name": "huf",
+        "logo": "/assets/huf/Images/Huf.jpg",
+		"title": "Huf",
+		"route": "huf",
+		"has_permission": "huf.permission.check_app_permission"
+	}
+]
 
 # Includes in <head>
 # ------------------
@@ -210,7 +211,10 @@
         "*/1 * * * *": [
             "huf.ai.orchestration.scheduler.process_orchestrations"
         ]
-    }
+    },
+    "hourly": [
+        "huf.ai.mcp_client.auto_sync_mcp_server_tools"
+    ]
 }
 
 
diff --git a/huf/huf/doctype/agent/agent.js b/huf/huf/doctype/agent/agent.js
index e8c3946..a84985d 100644
--- a/huf/huf/doctype/agent/agent.js
+++ b/huf/huf/doctype/agent/agent.js
@@ -23,17 +23,32 @@ frappe.ui.form.on("Agent", {
 			}
 		}
 	},
-		provider(frm) {
-			frm.set_value("model", "");
-	
-			if (frm.doc.provider) {
-				frm.set_query("model", () => ({
-					filters: { provider: frm.doc.provider }
-				}));
-			} else {
-				frm.set_query("model", () => ({}));
-			}
-		},
-	
-	
+	provider(frm) {
+		frm.set_value("model", "");
+
+		if (frm.doc.provider) {
+			frm.set_query("model", () => ({
+				filters: { provider: frm.doc.provider }
+			}));
+		} else {
+			frm.set_query("model", () => ({}));
+		}
+	}
+});
+
+frappe.ui.form.on("Agent MCP Server", {
+	mcp_server(frm, cdt, cdn) {
+		let row = locals[cdt][cdn];
+		if (row.mcp_server) {
+			frappe.db.get_doc("MCP Server", row.mcp_server).then(doc => {
+				let count = 0;
+				if (doc.tools) {
+					count = doc.tools.length;
+				}
+				frappe.model.set_value(cdt, cdn, "tool_count", count);
+			});
+		} else {
+			frappe.model.set_value(cdt, cdn, "tool_count", 0);
+		}
+	}
 });
diff --git a/huf/huf/doctype/agent/agent.json b/huf/huf/doctype/agent/agent.json
index 60e8d82..a4dc00a 100644
--- a/huf/huf/doctype/agent/agent.json
+++ b/huf/huf/doctype/agent/agent.json
@@ -36,6 +36,8 @@
   "instructions",
   "tools_and_mcp_tab",
   "agent_tool",
+  "mcp_servers_section",
+  "agent_mcp_server",      
   "permissions_tab",
   "allowed_users",
   "column_break_dq1z",
@@ -101,6 +103,19 @@
    "label": "Agent Tool",
    "options": "Agent Tool"
   },
+  {
+   "fieldname": "mcp_servers_section",
+   "fieldtype": "Section Break",
+   "label": "MCP Servers",
+   "description": "Connect to external MCP servers for additional tool capabilities"
+  },
+  {
+   "description": "External MCP servers this agent can use for additional tools",
+   "fieldname": "agent_mcp_server",
+   "fieldtype": "Table",
+   "label": "MCP Servers",
+   "options": "Agent MCP Server"
+  },
   {
    "default": "1",
    "description": "An alternative to sampling with temperature, called nucleus sampling, where the model considers the results of the tokens with top_p probability mass. So 0.1 means only the tokens comprising the top 10% probability mass are considered.\n\nWe generally recommend altering this or temperature but not both.",
diff --git a/huf/huf/doctype/agent_mcp_server/agent_mcp_server.json b/huf/huf/doctype/agent_mcp_server/agent_mcp_server.json
new file mode 100644
index 0000000..2a9daea
--- /dev/null
+++ b/huf/huf/doctype/agent_mcp_server/agent_mcp_server.json
@@ -0,0 +1,57 @@
+{
+    "actions": [],
+    "creation": "2025-12-31 18:59:00.000000",
+    "doctype": "DocType",
+    "engine": "InnoDB",
+    "field_order": [
+        "mcp_server",
+        "enabled",
+        "server_url",
+        "tool_count"
+    ],
+    "fields": [
+        {
+            "fieldname": "mcp_server",
+            "fieldtype": "Link",
+            "label": "MCP Server",
+            "options": "MCP Server",
+            "reqd": 1,
+            "in_list_view": 1
+        },
+        {
+            "fieldname": "enabled",
+            "fieldtype": "Check",
+            "label": "Enabled",
+            "default": "1",
+            "in_list_view": 1
+        },
+        {
+            "fieldname": "server_url",
+            "fieldtype": "Data",
+            "label": "Server URL",
+            "fetch_from": "mcp_server.server_url",
+            "read_only": 1,
+            "in_list_view": 1
+        },
+        {
+            "fieldname": "tool_count",
+            "fieldtype": "Int",
+            "label": "Tools",
+            "read_only": 1,
+            "in_list_view": 1,
+            "description": "Number of tools available from this MCP server"
+        }
+    ],
+    "index_web_pages_for_search": 1,
+    "istable": 1,
+    "links": [],
+    "modified": "2025-12-31 18:59:00.000000",
+    "modified_by": "Administrator",
+    "module": "Huf",
+    "name": "Agent MCP Server",
+    "owner": "Administrator",
+    "permissions": [],
+    "sort_field": "modified",
+    "sort_order": "DESC",
+    "states": []
+}
\ No newline at end of file
diff --git a/huf/huf/doctype/agent_mcp_server/agent_mcp_server.py b/huf/huf/doctype/agent_mcp_server/agent_mcp_server.py
new file mode 100644
index 0000000..23751f0
--- /dev/null
+++ b/huf/huf/doctype/agent_mcp_server/agent_mcp_server.py
@@ -0,0 +1,29 @@
+# Copyright (c) 2025, Tridz Technologies Pvt Ltd
+# For license information, please see license.txt
+
+import json
+import frappe
+from frappe.model.document import Document
+
+
+class AgentMCPServer(Document):
+    def before_insert(self):
+        """Fetch tool count from MCP server"""
+        self._update_tool_count()
+    
+    def before_save(self):
+        """Update tool count on save"""
+        self._update_tool_count()
+    
+    def _update_tool_count(self):
+        """Update the tool count from the linked MCP server"""
+        if self.mcp_server:
+            try:
+                mcp_doc = frappe.get_doc("MCP Server", self.mcp_server)
+                if mcp_doc.available_tools:
+                    tools = json.loads(mcp_doc.available_tools)
+                    self.tool_count = len(tools) if isinstance(tools, list) else 0
+                else:
+                    self.tool_count = 0
+            except Exception:
+                self.tool_count = 0
diff --git a/huf/huf/doctype/agent_tool_call/agent_tool_call.json b/huf/huf/doctype/agent_tool_call/agent_tool_call.json
index 4e9569d..bb92c0d 100644
--- a/huf/huf/doctype/agent_tool_call/agent_tool_call.json
+++ b/huf/huf/doctype/agent_tool_call/agent_tool_call.json
@@ -8,6 +8,8 @@
   "agent_run",
   "conversation",
   "tool",
+  "is_mcp_tool",
+  "mcp_server",
   "tool_args",
   "tool_result",
   "status",
@@ -62,17 +64,30 @@
   },
   {
    "fieldname": "tool",
-   "fieldtype": "Link",
+   "fieldtype": "Data",
    "in_list_view": 1,
    "label": "Tool Name",
-   "options": "Agent Tool Function",
+   "read_only": 1
+  },
+  {
+   "default": "0",
+   "fieldname": "is_mcp_tool",
+   "fieldtype": "Check",
+   "label": "Is MCP Tool",
+   "read_only": 1
+  },
+  {
+   "fieldname": "mcp_server",
+   "fieldtype": "Link",
+   "label": "MCP Server",
+   "options": "MCP Server",
    "read_only": 1
   }
  ],
  "grid_page_length": 50,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2025-09-24 19:42:43.241277",
+ "modified": "2026-01-06 17:58:52.558076",
  "modified_by": "Administrator",
  "module": "Huf",
  "name": "Agent Tool Call",
diff --git a/huf/huf/doctype/mcp_server/__init__.py b/huf/huf/doctype/mcp_server/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/huf/huf/doctype/mcp_server/mcp_server.js b/huf/huf/doctype/mcp_server/mcp_server.js
new file mode 100644
index 0000000..b29fa8f
--- /dev/null
+++ b/huf/huf/doctype/mcp_server/mcp_server.js
@@ -0,0 +1,69 @@
+// Copyright (c) 2025, Tridz Technologies Pvt Ltd
+// For license information, please see license.txt
+
+frappe.ui.form.on("MCP Server", {
+    refresh(frm) {
+        // Add sync tools button handler
+        if (!frm.is_new()) {
+            frm.add_custom_button(__("Sync Tools"), function () {
+                frm.events.sync_tools(frm);
+            }, __("Actions"));
+
+            // Add test connection button
+            frm.add_custom_button(__("Test Connection"), function () {
+                frappe.call({
+                    method: "huf.ai.mcp_client.test_mcp_connection",
+                    args: {
+                        server_name: frm.doc.name
+                    },
+                    freeze: true,
+                    freeze_message: __("Testing connection..."),
+                    callback: function (r) {
+                        if (r.message && r.message.success) {
+                            frappe.msgprint({
+                                title: __("Connection Successful"),
+                                message: __("Successfully connected to MCP server"),
+                                indicator: "green"
+                            });
+                        } else {
+                            frappe.msgprint({
+                                title: __("Connection Failed"),
+                                message: r.message ? r.message.error : __("Unknown error"),
+                                indicator: "red"
+                            });
+                        }
+                    }
+                });
+            }, __("Actions"));
+        }
+    },
+
+    sync_tools_button(frm) {
+        frm.events.sync_tools(frm);
+    },
+
+    sync_tools(frm) {
+        frm.call({
+            method: "sync_tools",
+            doc: frm.doc,
+            freeze: true,
+            freeze_message: __("Syncing tools from MCP server..."),
+            callback: function (r) {
+                if (r.message && r.message.success) {
+                    frm.reload_doc();
+                }
+            }
+        });
+    },
+
+
+
+    auth_type(frm) {
+        // Set default header name based on auth type
+        if (frm.doc.auth_type === "bearer_token") {
+            frm.set_value("auth_header_name", "Authorization");
+        } else if (frm.doc.auth_type === "api_key") {
+            frm.set_value("auth_header_name", "X-API-Key");
+        }
+    }
+});
diff --git a/huf/huf/doctype/mcp_server/mcp_server.json b/huf/huf/doctype/mcp_server/mcp_server.json
new file mode 100644
index 0000000..323ea17
--- /dev/null
+++ b/huf/huf/doctype/mcp_server/mcp_server.json
@@ -0,0 +1,210 @@
+{
+ "actions": [],
+ "autoname": "field:server_name",
+ "creation": "2025-12-31 18:59:00.000000",
+ "doctype": "DocType",
+ "engine": "InnoDB",
+ "field_order": [
+  "server_name",
+  "description",
+  "enabled",
+  "column_break_basic",
+  "tool_namespace",
+  "timeout_seconds",
+  "connection_section",
+  "transport_type",
+  "server_url",
+  "auth_section",
+  "auth_type",
+  "auth_header_name",
+  "auth_header_value",
+  "custom_headers_section",
+  "custom_headers",
+  "tools_section",
+  "sync_tools_button",
+  "enable_auto_sync",
+  "auto_sync_interval",
+  "last_sync",
+  "tools",
+  "available_tools"
+ ],
+ "fields": [
+  {
+   "fieldname": "server_name",
+   "fieldtype": "Data",
+   "label": "Server Name",
+   "reqd": 1,
+   "unique": 1,
+   "in_list_view": 1,
+   "description": "Unique identifier for this MCP server (e.g., 'gmail', 'github', 'frappe-erp')"
+  },
+  {
+   "fieldname": "description",
+   "fieldtype": "Small Text",
+   "label": "Description",
+   "description": "What capabilities this MCP server provides"
+  },
+  {
+   "fieldname": "enabled",
+   "fieldtype": "Check",
+   "label": "Enabled",
+   "default": "1",
+   "in_list_view": 1
+  },
+  {
+   "fieldname": "column_break_basic",
+   "fieldtype": "Column Break"
+  },
+  {
+   "fieldname": "tool_namespace",
+   "fieldtype": "Data",
+   "label": "Tool Namespace",
+   "description": "Optional prefix for tool names (e.g., 'gmail' results in 'gmail.send_email')"
+  },
+  {
+   "fieldname": "timeout_seconds",
+   "fieldtype": "Int",
+   "label": "Timeout (seconds)",
+   "default": "30",
+   "description": "Request timeout for MCP server calls"
+  },
+  {
+   "fieldname": "connection_section",
+   "fieldtype": "Section Break",
+   "label": "Connection"
+  },
+  {
+   "fieldname": "transport_type",
+   "fieldtype": "Select",
+   "label": "Transport Type",
+   "options": "http\nsse",
+   "default": "http",
+   "reqd": 1,
+   "in_list_view": 1
+  },
+  {
+   "fieldname": "server_url",
+   "fieldtype": "Data",
+   "label": "Server URL",
+   "reqd": 1,
+   "description": "MCP server endpoint URL (e.g., 'https://mcp.example.com/mcp')"
+  },
+  {
+   "fieldname": "auth_section",
+   "fieldtype": "Section Break",
+   "label": "Authentication"
+  },
+  {
+   "fieldname": "auth_type",
+   "fieldtype": "Select",
+   "label": "Auth Type",
+   "options": "none\napi_key\nbearer_token\ncustom_header",
+   "default": "none"
+  },
+  {
+   "fieldname": "auth_header_name",
+   "fieldtype": "Data",
+   "label": "Auth Header Name",
+   "depends_on": "eval:doc.auth_type && doc.auth_type !== 'none'",
+   "default": "Authorization",
+   "description": "Header name for authentication (e.g., 'Authorization', 'X-API-Key')"
+  },
+  {
+   "fieldname": "auth_header_value",
+   "fieldtype": "Password",
+   "label": "Auth Header Value",
+   "depends_on": "eval:doc.auth_type && doc.auth_type !== 'none'",
+   "description": "The API key, bearer token, or header value (stored encrypted)"
+  },
+  {
+   "fieldname": "custom_headers_section",
+   "fieldtype": "Section Break",
+   "label": "Custom Headers",
+   "collapsible": 1
+  },
+  {
+   "allow_bulk_edit": 1,
+   "fieldname": "custom_headers",
+   "fieldtype": "Table",
+   "label": "Custom Headers",
+   "options": "MCP Server Header",
+   "description": "Additional HTTP headers to send with MCP requests"
+  },
+  {
+   "fieldname": "tools_section",
+   "fieldtype": "Section Break",
+   "label": "Available Tools"
+  },
+  {
+   "fieldname": "sync_tools_button",
+   "fieldtype": "Button",
+   "label": "Sync Tools",
+   "description": "Fetch available tools from the MCP server"
+  },
+  {
+   "allow_bulk_edit": 1,
+   "description": "Manage enabled tools from this server",
+   "fieldname": "tools",
+   "fieldtype": "Table",
+   "label": "Tools",
+   "options": "MCP Server Tool"
+  },
+  {
+   "fieldname": "last_sync",
+   "fieldtype": "Datetime",
+   "label": "Last Synced",
+   "read_only": 1
+  },
+  {
+   "fieldname": "available_tools",
+   "fieldtype": "Code",
+   "label": "Available Tools",
+   "read_only": 1,
+   "options": "JSON",
+   "description": "Cached list of tools available from this MCP server"
+  },
+  {
+   "default": "0",
+   "description": "Automatically sync tools periodically",
+   "fieldname": "enable_auto_sync",
+   "fieldtype": "Check",
+   "label": "Enable Auto Sync"
+  },
+  {
+   "default": 1,
+   "depends_on": "eval:doc.enable_auto_sync",
+   "description": "Interval in hours to auto-sync tools",
+   "fieldname": "auto_sync_interval",
+   "fieldtype": "Int",
+   "label": "Sync Interval (Hours)",
+   "mandatory_depends_on": "eval:doc.enable_auto_sync"
+  }
+ ],
+ "index_web_pages_for_search": 1,
+ "links": [],
+ "modified": "2026-01-07 15:39:23.569156",
+ "modified_by": "Administrator",
+ "module": "Huf",
+ "name": "MCP Server",
+ "naming_rule": "By fieldname",
+ "owner": "Administrator",
+ "permissions": [
+  {
+   "create": 1,
+   "delete": 1,
+   "email": 1,
+   "export": 1,
+   "print": 1,
+   "read": 1,
+   "report": 1,
+   "role": "System Manager",
+   "share": 1,
+   "write": 1
+  }
+ ],
+ "row_format": "Dynamic",
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": [],
+ "track_changes": 1
+}
\ No newline at end of file
diff --git a/huf/huf/doctype/mcp_server/mcp_server.py b/huf/huf/doctype/mcp_server/mcp_server.py
new file mode 100644
index 0000000..aa02a2d
--- /dev/null
+++ b/huf/huf/doctype/mcp_server/mcp_server.py
@@ -0,0 +1,41 @@
+# Copyright (c) 2025, Tridz Technologies Pvt Ltd
+# For license information, please see license.txt
+
+import frappe
+from frappe.model.document import Document
+
+
+class MCPServer(Document):
+    def validate(self):
+        """Validate MCP server configuration"""
+        if self.auth_type and self.auth_type != "none":
+            if not self.auth_header_name:
+                frappe.throw("Auth Header Name is required when authentication is enabled")
+    
+    def before_save(self):
+        """Format auth header based on auth type"""
+        if self.auth_type == "bearer_token" and self.auth_header_name == "Authorization":
+            # Will be formatted as "Bearer <token>" during request
+            pass
+    
+    @frappe.whitelist()
+    def sync_tools(self):
+        """Fetch and cache available tools from the MCP server"""
+        from huf.ai.mcp_client import sync_mcp_server_tools
+        
+        result = sync_mcp_server_tools(self.name)
+        
+        if result.get("success"):
+            frappe.msgprint(
+                f"Successfully synced {result.get('tool_count', 0)} tools from {self.server_name}",
+                indicator="green",
+                title="MCP Tools Synced"
+            )
+        else:
+            frappe.msgprint(
+                f"Failed to sync tools: {result.get('error', 'Unknown error')}",
+                indicator="red",
+                title="Sync Failed"
+            )
+        
+        return result
diff --git a/huf/huf/doctype/mcp_server/test_mcp_server.py b/huf/huf/doctype/mcp_server/test_mcp_server.py
new file mode 100644
index 0000000..8e19d28
--- /dev/null
+++ b/huf/huf/doctype/mcp_server/test_mcp_server.py
@@ -0,0 +1,9 @@
+# Copyright (c) 2026, Huf and Contributors
+# See license.txt
+
+# import frappe
+from frappe.tests.utils import FrappeTestCase
+
+
+class TestMCPServer(FrappeTestCase):
+	pass
diff --git a/huf/huf/doctype/mcp_server_header/mcp_server_header.json b/huf/huf/doctype/mcp_server_header/mcp_server_header.json
new file mode 100644
index 0000000..c260eae
--- /dev/null
+++ b/huf/huf/doctype/mcp_server_header/mcp_server_header.json
@@ -0,0 +1,38 @@
+{
+    "actions": [],
+    "creation": "2025-12-31 18:59:00.000000",
+    "doctype": "DocType",
+    "engine": "InnoDB",
+    "field_order": [
+        "header_name",
+        "header_value"
+    ],
+    "fields": [
+        {
+            "fieldname": "header_name",
+            "fieldtype": "Data",
+            "label": "Header Name",
+            "reqd": 1,
+            "in_list_view": 1
+        },
+        {
+            "fieldname": "header_value",
+            "fieldtype": "Data",
+            "label": "Header Value",
+            "reqd": 1,
+            "in_list_view": 1
+        }
+    ],
+    "index_web_pages_for_search": 1,
+    "istable": 1,
+    "links": [],
+    "modified": "2025-12-31 18:59:00.000000",
+    "modified_by": "Administrator",
+    "module": "Huf",
+    "name": "MCP Server Header",
+    "owner": "Administrator",
+    "permissions": [],
+    "sort_field": "modified",
+    "sort_order": "DESC",
+    "states": []
+}
\ No newline at end of file
diff --git a/huf/huf/doctype/mcp_server_header/mcp_server_header.py b/huf/huf/doctype/mcp_server_header/mcp_server_header.py
new file mode 100644
index 0000000..a9eb17c
--- /dev/null
+++ b/huf/huf/doctype/mcp_server_header/mcp_server_header.py
@@ -0,0 +1,8 @@
+# Copyright (c) 2025, Tridz Technologies Pvt Ltd
+# For license information, please see license.txt
+
+from frappe.model.document import Document
+
+
+class MCPServerHeader(Document):
+    pass
diff --git a/huf/huf/doctype/mcp_server_tool/__init__.py b/huf/huf/doctype/mcp_server_tool/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/huf/huf/doctype/mcp_server_tool/mcp_server_tool.json b/huf/huf/doctype/mcp_server_tool/mcp_server_tool.json
new file mode 100644
index 0000000..4ad71a8
--- /dev/null
+++ b/huf/huf/doctype/mcp_server_tool/mcp_server_tool.json
@@ -0,0 +1,57 @@
+{
+ "actions": [],
+ "autoname": "hash",
+ "creation": "2026-01-07 10:00:00",
+ "doctype": "DocType",
+ "editable_grid": 1,
+ "engine": "InnoDB",
+ "field_order": [
+  "tool_name",
+  "enabled",
+  "description",
+  "parameters"
+ ],
+ "fields": [
+  {
+   "fieldname": "tool_name",
+   "fieldtype": "Data",
+   "in_list_view": 1,
+   "label": "Tool Name",
+   "read_only": 1,
+   "reqd": 1
+  },
+  {
+   "default": "1",
+   "fieldname": "enabled",
+   "fieldtype": "Check",
+   "in_list_view": 1,
+   "label": "Enabled"
+  },
+  {
+   "fieldname": "description",
+   "fieldtype": "Small Text",
+   "in_list_view": 1,
+   "label": "Description",
+   "read_only": 1
+  },
+  {
+   "fieldname": "parameters",
+   "fieldtype": "Code",
+   "label": "Parameters",
+   "options": "JSON",
+   "read_only": 1
+  }
+ ],
+ "istable": 1,
+ "links": [],
+ "modified": "2026-01-07 14:30:26.452515",
+ "modified_by": "Administrator",
+ "module": "Huf",
+ "name": "MCP Server Tool",
+ "owner": "Administrator",
+ "permissions": [],
+ "row_format": "Dynamic",
+ "sort_field": "modified",
+ "sort_order": "DESC",
+ "states": []
+}
\ No newline at end of file
diff --git a/huf/huf/doctype/mcp_server_tool/mcp_server_tool.py b/huf/huf/doctype/mcp_server_tool/mcp_server_tool.py
new file mode 100644
index 0000000..960cebb
--- /dev/null
+++ b/huf/huf/doctype/mcp_server_tool/mcp_server_tool.py
@@ -0,0 +1,8 @@
+# Copyright (c) 2025, Tridz Technologies Pvt Ltd
+# For license information, please see license.txt
+
+# import frappe
+from frappe.model.document import Document
+
+class MCPServerTool(Document):
+	pass
diff --git a/huf/permission.py b/huf/permission.py
new file mode 100644
index 0000000..9d2dbc9
--- /dev/null
+++ b/huf/permission.py
@@ -0,0 +1,5 @@
+import frappe
+
+def check_app_permission():
+	if frappe.session.user == "Administrator" or frappe.session.user == "System Manager" :
+		return True