diff --git a/service/app/api/v1/sessions.py b/service/app/api/v1/sessions.py
index f4ef323a..94db7476 100644
--- a/service/app/api/v1/sessions.py
+++ b/service/app/api/v1/sessions.py
@@ -72,16 +72,17 @@ async def create_session_with_default_topic(
         raise handle_auth_error(e)
 
 
-@router.get("/by-agent/{agent_id}", response_model=SessionRead)
+@router.get("/by-agent/{agent_id}", response_model=SessionReadWithTopics)
 async def get_session_by_agent(
     agent_id: str, user: str = Depends(get_current_user), db: AsyncSession = Depends(get_session)
-) -> SessionRead:
+) -> SessionReadWithTopics:
     """
-    Retrieve a session for the current user with a specific agent.
+    Retrieve a session for the current user with a specific agent, including topics.
 
     Finds a session associated with the given agent ID for the authenticated user.
     The agent_id can be "default" for sessions without an agent, a UUID string
     for sessions with a specific agent, or a builtin agent string ID.
+    Topics are ordered by updated_at descending (most recent first).
 
     Args:
         agent_id: Agent identifier ("default", UUID string, or builtin agent ID)
@@ -89,13 +90,13 @@ async def get_session_by_agent(
         db: Database session (injected by dependency)
 
     Returns:
-        SessionRead: The session associated with the user and agent
+        SessionReadWithTopics: The session with topics associated with the user and agent
 
     Raises:
         HTTPException: 404 if no session found for this user-agent combination
     """
     try:
-        return await SessionService(db).get_session_by_agent(user, agent_id)
+        return await SessionService(db).get_session_by_agent_with_topics(user, agent_id)
     except ErrCodeError as e:
         raise handle_auth_error(e)
 
diff --git a/service/app/core/session/service.py b/service/app/core/session/service.py
index 53d0e729..fd9bfc14 100644
--- a/service/app/core/session/service.py
+++ b/service/app/core/session/service.py
@@ -49,6 +49,20 @@ async def get_session_by_agent(self, user_id: str, agent_id: str) -> SessionRead
             raise ErrCode.SESSION_NOT_FOUND.with_messages("No session found for this user-agent combination")
         return SessionRead(**session.model_dump())
 
+    async def get_session_by_agent_with_topics(self, user_id: str, agent_id: str) -> SessionReadWithTopics:
+        agent_uuid = await self._resolve_agent_uuid_for_lookup(agent_id)
+        session = await self.session_repo.get_session_by_user_and_agent(user_id, agent_uuid)
+        if not session:
+            raise ErrCode.SESSION_NOT_FOUND.with_messages("No session found for this user-agent combination")
+
+        # Fetch topics ordered by updated_at descending (most recent first)
+        topics = await self.topic_repo.get_topics_by_session(session.id, order_by_updated=True)
+        topic_reads = [TopicRead(**topic.model_dump()) for topic in topics]
+
+        session_dict = session.model_dump()
+        session_dict["topics"] = topic_reads
+        return SessionReadWithTopics(**session_dict)
+
     async def get_sessions_with_topics(self, user_id: str) -> list[SessionReadWithTopics]:
         sessions = await self.session_repo.get_sessions_by_user_ordered_by_activity(user_id)
 
diff --git a/service/app/tools/builtin/image.py b/service/app/tools/builtin/image.py
index c5985808..f9c10061 100644
--- a/service/app/tools/builtin/image.py
+++ b/service/app/tools/builtin/image.py
@@ -14,7 +14,7 @@
 from uuid import UUID, uuid4
 
 from langchain_core.tools import BaseTool, StructuredTool
-from pydantic import BaseModel, Field
+from pydantic import BaseModel, Field, model_validator
 
 from app.configs import configs
 from app.core.storage import FileScope, generate_storage_key, get_storage_service
@@ -24,6 +24,9 @@
 
 # --- Input Schemas ---
 
+# Maximum number of reference images allowed for generation
+MAX_INPUT_IMAGES = 4
+
 
 class GenerateImageInput(BaseModel):
     """Input schema for generate_image tool."""
@@ -35,14 +38,24 @@ class GenerateImageInput(BaseModel):
         default="1:1",
         description="Aspect ratio of the generated image.",
     )
-    image_id: str | None = Field(
+    image_ids: list[str] | None = Field(
         default=None,
         description=(
-            "Optional image UUID to use as a reference input. "
-            "Use the 'image_id' value returned from generate_image or upload tools."
+            f"Optional list of image UUIDs (max {MAX_INPUT_IMAGES}) to use as reference inputs. "
+            "Use the 'image_id' values returned from generate_image or upload tools."
         ),
     )
 
+    @model_validator(mode="after")
+    def validate_image_inputs(self) -> "GenerateImageInput":
+        """Validate image_ids field."""
+        if self.image_ids:
+            if len(self.image_ids) > MAX_INPUT_IMAGES:
+                raise ValueError(f"Maximum {MAX_INPUT_IMAGES} input images allowed, got {len(self.image_ids)}")
+            if len(self.image_ids) == 0:
+                self.image_ids = None  # Normalize empty list to None
+        return self
+
 
 class ReadImageInput(BaseModel):
     """Input schema for read_image tool."""
@@ -62,8 +75,7 @@ class ReadImageInput(BaseModel):
 async def _generate_image_with_langchain(
     prompt: str,
     aspect_ratio: str = "1:1",
-    image_bytes: bytes | None = None,
-    image_mime_type: str | None = None,
+    images: list[tuple[bytes, str]] | None = None,
 ) -> tuple[bytes, str]:
     """
     Generate an image using LangChain ChatGoogleGenerativeAI via ProviderManager.
@@ -76,6 +88,7 @@ async def _generate_image_with_langchain(
     Args:
         prompt: Text description of the image to generate
         aspect_ratio: Aspect ratio for the generated image
+        images: Optional list of (image_bytes, mime_type) tuples to use as references
 
     Returns:
         Tuple of (image_bytes, mime_type)
@@ -102,25 +115,34 @@ async def _generate_image_with_langchain(
         )
 
     # Request image generation via LangChain
-    if image_bytes and image_mime_type:
-        b64_data = base64.b64encode(image_bytes).decode("utf-8")
-        message = HumanMessage(
-            content=[
+    if images:
+        # Build content array with multiple image_url blocks
+        content: list[dict[str, Any]] = []
+        for image_bytes, image_mime_type in images:
+            b64_data = base64.b64encode(image_bytes).decode("utf-8")
+            content.append(
                 {
                     "type": "image_url",
                     "image_url": {
                         "url": f"data:{image_mime_type};base64,{b64_data}",
                     },
-                },
-                {
-                    "type": "text",
-                    "text": (
-                        "Use the provided image as a reference. "
-                        f"Generate a new image with aspect ratio {aspect_ratio}: {prompt}"
-                    ),
-                },
-            ]
+                }
+            )
+
+        # Add text prompt with appropriate phrasing for single vs multiple images
+        image_count = len(images)
+        if image_count == 1:
+            reference_text = "Use the provided image as a reference."
+        else:
+            reference_text = f"Use these {image_count} provided images as references."
+
+        content.append(
+            {
+                "type": "text",
+                "text": f"{reference_text} Generate a new image with aspect ratio {aspect_ratio}: {prompt}",
+            }
         )
+        message = HumanMessage(content=content)  # type: ignore[arg-type]
     else:
         message = HumanMessage(content=f"Generate an image with aspect ratio {aspect_ratio}: {prompt}")
     response = await llm.ainvoke([message])
@@ -172,46 +194,67 @@ async def _generate_image_with_langchain(
     raise ValueError("No image data in response. Model may not support image generation.")
 
 
-async def _load_image_for_generation(user_id: str, image_id: str) -> tuple[bytes, str, str]:
+async def _load_images_for_generation(user_id: str, image_ids: list[str]) -> list[tuple[bytes, str, str]]:
+    """
+    Load multiple images for generation from the database.
+
+    Args:
+        user_id: User ID for permission check
+        image_ids: List of image UUIDs to load
+
+    Returns:
+        List of tuples: (image_bytes, mime_type, storage_key)
+
+    Raises:
+        ValueError: If any image_id is invalid, not found, deleted, or inaccessible
+    """
     from app.infra.database import create_task_session_factory
     from app.repos.file import FileRepository
 
-    try:
-        file_uuid = UUID(image_id)
-    except ValueError as exc:
-        raise ValueError(f"Invalid image_id format: {image_id}") from exc
+    results: list[tuple[bytes, str, str]] = []
 
     # Create a fresh session factory for the current event loop (Celery worker)
     TaskSessionLocal = create_task_session_factory()
 
     async with TaskSessionLocal() as db:
         file_repo = FileRepository(db)
-        file_record = await file_repo.get_file_by_id(file_uuid)
+        storage = get_storage_service()
 
-        if file_record is None:
-            raise ValueError(f"Image not found: {image_id}")
+        for image_id in image_ids:
+            try:
+                file_uuid = UUID(image_id)
+            except ValueError as exc:
+                raise ValueError(f"Invalid image_id format: {image_id}") from exc
 
-        if file_record.is_deleted:
-            raise ValueError(f"Image has been deleted: {image_id}")
+            file_record = await file_repo.get_file_by_id(file_uuid)
 
-        if file_record.user_id != user_id and file_record.scope != "public":
-            raise ValueError("Permission denied: you don't have access to this image")
+            if file_record is None:
+                raise ValueError(f"Image not found: {image_id}")
 
-        storage_key = file_record.storage_key
-        content_type = file_record.content_type or "image/png"
+            if file_record.is_deleted:
+                raise ValueError(f"Image has been deleted: {image_id}")
 
-    storage = get_storage_service()
-    buffer = io.BytesIO()
-    await storage.download_file(storage_key, buffer)
-    image_bytes = buffer.getvalue()
-    return image_bytes, content_type, storage_key
+            if file_record.user_id != user_id and file_record.scope != "public":
+                raise ValueError(f"Permission denied: you don't have access to image {image_id}")
+
+            storage_key = file_record.storage_key
+            content_type = file_record.content_type or "image/png"
+
+            # Download from storage
+            buffer = io.BytesIO()
+            await storage.download_file(storage_key, buffer)
+            image_bytes = buffer.getvalue()
+
+            results.append((image_bytes, content_type, storage_key))
+
+    return results
 
 
 async def _generate_image(
     user_id: str,
     prompt: str,
     aspect_ratio: str = "1:1",
-    image_id: str | None = None,
+    image_ids: list[str] | None = None,
 ) -> dict[str, Any]:
     """
     Generate an image and store it to OSS, then register in database.
@@ -220,28 +263,27 @@ async def _generate_image(
         user_id: User ID for storage organization
         prompt: Image description
         aspect_ratio: Aspect ratio for the image
+        image_ids: Optional list of image UUIDs to use as reference inputs
 
     Returns:
         Dictionary with success status, path, URL, and metadata
     """
     try:
-        # Load optional reference image
-        source_image_bytes = None
-        source_mime_type = None
-        source_storage_key = None
-        source_image_id = image_id
-        if source_image_id:
-            source_image_bytes, source_mime_type, source_storage_key = await _load_image_for_generation(
-                user_id,
-                source_image_id,
-            )
+        # Load optional reference images
+        images_for_generation: list[tuple[bytes, str]] | None = None
+        source_storage_keys: list[str] = []
+        source_image_ids: list[str] = image_ids or []
+
+        if source_image_ids:
+            loaded_images = await _load_images_for_generation(user_id, source_image_ids)
+            images_for_generation = [(img[0], img[1]) for img in loaded_images]
+            source_storage_keys = [img[2] for img in loaded_images]
 
         # Generate image using LangChain via ProviderManager
         image_bytes, mime_type = await _generate_image_with_langchain(
             prompt,
             aspect_ratio,
-            image_bytes=source_image_bytes,
-            image_mime_type=source_mime_type,
+            images=images_for_generation,
         )
 
         # Determine file extension from mime type
@@ -290,27 +332,27 @@ async def _generate_image(
                 metainfo={
                     "prompt": prompt,
                     "aspect_ratio": aspect_ratio,
-                    "source_image_id": source_image_id,
-                    "source_storage_key": source_storage_key,
+                    "source_image_ids": source_image_ids,
+                    "source_storage_keys": source_storage_keys,
                 },
             )
             file_record = await file_repo.create_file(file_data)
             await db.commit()
             # Refresh to get the generated UUID
             await db.refresh(file_record)
-            image_id = str(file_record.id)
+            generated_image_id = str(file_record.id)
 
-        logger.info(f"Generated image for user {user_id}: {storage_key} (id={image_id})")
+        logger.info(f"Generated image for user {user_id}: {storage_key} (id={generated_image_id})")
 
         return {
             "success": True,
-            "image_id": image_id,
+            "image_id": generated_image_id,
             "path": storage_key,
             "url": url,
             "markdown": f"![Generated Image]({url})",
             "prompt": prompt,
             "aspect_ratio": aspect_ratio,
-            "source_image_id": source_image_id,
+            "source_image_ids": source_image_ids,
             "mime_type": mime_type,
             "size_bytes": len(image_bytes),
         }
@@ -511,7 +553,7 @@ def create_image_tools() -> dict[str, BaseTool]:
     async def generate_image_placeholder(
         prompt: str,
         aspect_ratio: str = "1:1",
-        image_id: str | None = None,
+        image_ids: list[str] | None = None,
     ) -> dict[str, Any]:
         return {"error": "Image tools require agent context binding", "success": False}
 
@@ -520,7 +562,7 @@ async def generate_image_placeholder(
         description=(
             "Generate an image based on a text description. "
             "Provide a detailed prompt describing the desired image. "
-            "To modify or generate based on a previous image, pass the 'image_id' from a previous generate_image result. "
+            f"To generate based on previous images, pass 'image_ids' with up to {MAX_INPUT_IMAGES} reference image UUIDs. "
             "Returns a JSON result containing 'image_id' (for future reference), 'url', and 'markdown' - use the 'markdown' field directly in your response to display the image. "
             "TIP: You can use 'image_id' values when creating PPTX presentations with knowledge_write - see knowledge_help(topic='image_slides') for details."
         ),
@@ -564,9 +606,9 @@ def create_image_tools_for_agent(user_id: str) -> list[BaseTool]:
     async def generate_image_bound(
         prompt: str,
         aspect_ratio: str = "1:1",
-        image_id: str | None = None,
+        image_ids: list[str] | None = None,
     ) -> dict[str, Any]:
-        return await _generate_image(user_id, prompt, aspect_ratio, image_id)
+        return await _generate_image(user_id, prompt, aspect_ratio, image_ids)
 
     tools.append(
         StructuredTool(
@@ -574,7 +616,7 @@ async def generate_image_bound(
             description=(
                 "Generate an image based on a text description. "
                 "Provide a detailed prompt describing the desired image including style, colors, composition, and subject. "
-                "To modify or generate based on a previous image, pass the 'image_id' from a previous generate_image result. "
+                f"To generate based on previous images, pass 'image_ids' with up to {MAX_INPUT_IMAGES} reference image UUIDs. "
                 "Returns a JSON result containing 'image_id' (for future reference), 'url', and 'markdown' - use the 'markdown' field directly in your response to display the image to the user. "
                 "TIP: You can use 'image_id' values when creating beautiful PPTX presentations with knowledge_write in image_slides mode - call knowledge_help(topic='image_slides') for the full workflow."
             ),
@@ -611,4 +653,5 @@ async def read_image_bound(
     "create_image_tools_for_agent",
     "GenerateImageInput",
     "ReadImageInput",
+    "MAX_INPUT_IMAGES",
 ]
diff --git a/service/app/tools/cost.py b/service/app/tools/cost.py
index 16921a94..f3dc0c95 100644
--- a/service/app/tools/cost.py
+++ b/service/app/tools/cost.py
@@ -34,10 +34,11 @@ def calculate_tool_cost(
     config = tool_info.cost
     cost = config.base_cost
 
-    # Add input image cost (for generate_image with reference)
+    # Add input image cost (for generate_image with reference images)
     if config.input_image_cost and tool_args:
-        if tool_args.get("image_id"):  # Has reference image
-            cost += config.input_image_cost
+        image_ids = tool_args.get("image_ids")
+        if image_ids:
+            cost += config.input_image_cost * len(image_ids)
 
     # Add output file cost (for knowledge_write creating new files)
     if config.output_file_cost and tool_result:
diff --git a/service/tests/unit/tools/test_cost.py b/service/tests/unit/tools/test_cost.py
index 32b1a662..69ad41c7 100644
--- a/service/tests/unit/tools/test_cost.py
+++ b/service/tests/unit/tools/test_cost.py
@@ -77,15 +77,35 @@ def test_generate_image_without_reference(self) -> None:
         assert cost == 10
 
     def test_generate_image_with_reference(self) -> None:
-        """Test generate_image cost with reference image."""
+        """Test generate_image cost with single reference image."""
         cost = calculate_tool_cost(
             tool_name="generate_image",
-            tool_args={"prompt": "a beautiful sunset", "image_id": "ref123"},
+            tool_args={"prompt": "a beautiful sunset", "image_ids": ["ref123"]},
             tool_result={"success": True, "image_id": "abc123"},
         )
         # Base cost (10) + input_image_cost (5) = 15
         assert cost == 15
 
+    def test_generate_image_with_multiple_references(self) -> None:
+        """Test generate_image cost with multiple reference images."""
+        cost = calculate_tool_cost(
+            tool_name="generate_image",
+            tool_args={"prompt": "combine these images", "image_ids": ["ref1", "ref2", "ref3"]},
+            tool_result={"success": True, "image_id": "abc123"},
+        )
+        # Base cost (10) + input_image_cost (5) * 3 = 25
+        assert cost == 25
+
+    def test_generate_image_with_empty_image_ids(self) -> None:
+        """Test generate_image cost with empty image_ids list."""
+        cost = calculate_tool_cost(
+            tool_name="generate_image",
+            tool_args={"prompt": "a sunset", "image_ids": []},
+            tool_result={"success": True, "image_id": "abc123"},
+        )
+        # Base cost only (10), empty list means no input images
+        assert cost == 10
+
     def test_read_image_cost(self) -> None:
         """Test read_image cost."""
         cost = calculate_tool_cost(
diff --git a/web/src/components/features/FileUploadPreview.tsx b/web/src/components/features/FileUploadPreview.tsx
index 3d0d4641..d76a0cd2 100644
--- a/web/src/components/features/FileUploadPreview.tsx
+++ b/web/src/components/features/FileUploadPreview.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useXyzen } from "@/store";
 import { FileUploadThumbnail } from "./FileUploadThumbnail";
 import clsx from "clsx";
@@ -6,8 +7,11 @@ export interface FileUploadPreviewProps {
   className?: string;
 }
 
-export function FileUploadPreview({ className }: FileUploadPreviewProps) {
-  const { uploadedFiles, isUploading, uploadError } = useXyzen();
+function FileUploadPreviewComponent({ className }: FileUploadPreviewProps) {
+  // Use selective subscriptions to avoid re-renders from unrelated store changes
+  const uploadedFiles = useXyzen((state) => state.uploadedFiles);
+  const isUploading = useXyzen((state) => state.isUploading);
+  const uploadError = useXyzen((state) => state.uploadError);
 
   if (uploadedFiles.length === 0) {
     return null;
@@ -57,3 +61,5 @@ export function FileUploadPreview({ className }: FileUploadPreviewProps) {
     </div>
   );
 }
+
+export const FileUploadPreview = React.memo(FileUploadPreviewComponent);
diff --git a/web/src/components/features/FileUploadThumbnail.tsx b/web/src/components/features/FileUploadThumbnail.tsx
index d31f2e82..44e7a675 100644
--- a/web/src/components/features/FileUploadThumbnail.tsx
+++ b/web/src/components/features/FileUploadThumbnail.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback } from "react";
 import {
   XMarkIcon,
   DocumentIcon,
@@ -12,20 +13,28 @@ export interface FileUploadThumbnailProps {
   file: UploadedFile;
 }
 
-export function FileUploadThumbnail({ file }: FileUploadThumbnailProps) {
-  const { removeFile, retryUpload } = useXyzen();
+function FileUploadThumbnailComponent({ file }: FileUploadThumbnailProps) {
+  // Use selective subscriptions to avoid re-renders from unrelated store changes
+  const removeFile = useXyzen((state) => state.removeFile);
+  const retryUpload = useXyzen((state) => state.retryUpload);
 
-  const handleRemove = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    removeFile(file.id);
-  };
+  const handleRemove = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      removeFile(file.id);
+    },
+    [removeFile, file.id],
+  );
 
-  const handleRetry = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    retryUpload(file.id);
-  };
+  const handleRetry = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      retryUpload(file.id);
+    },
+    [retryUpload, file.id],
+  );
 
   const getFileIcon = () => {
     if (file.category === "images") {
@@ -74,6 +83,7 @@ export function FileUploadThumbnail({ file }: FileUploadThumbnailProps) {
           <img
             src={file.thumbnailUrl}
             alt={file.name}
+            decoding="async"
             className="w-full h-full object-cover"
           />
         ) : (
@@ -165,3 +175,27 @@ export function FileUploadThumbnail({ file }: FileUploadThumbnailProps) {
     </div>
   );
 }
+
+// Custom comparison function for React.memo
+// Only re-render when relevant file properties change
+function arePropsEqual(
+  prevProps: FileUploadThumbnailProps,
+  nextProps: FileUploadThumbnailProps,
+): boolean {
+  const prevFile = prevProps.file;
+  const nextFile = nextProps.file;
+
+  return (
+    prevFile.id === nextFile.id &&
+    prevFile.status === nextFile.status &&
+    prevFile.progress === nextFile.progress &&
+    prevFile.thumbnailUrl === nextFile.thumbnailUrl &&
+    prevFile.name === nextFile.name &&
+    prevFile.category === nextFile.category
+  );
+}
+
+export const FileUploadThumbnail = React.memo(
+  FileUploadThumbnailComponent,
+  arePropsEqual,
+);
diff --git a/web/src/components/layouts/components/ChatToolbar.tsx b/web/src/components/layouts/components/ChatToolbar.tsx
index cb47bcc6..03a15624 100644
--- a/web/src/components/layouts/components/ChatToolbar.tsx
+++ b/web/src/components/layouts/components/ChatToolbar.tsx
@@ -86,6 +86,7 @@ export default function ChatToolbar({
     uploadedFiles,
     isUploading,
     updateAgent,
+    openSettingsModal,
   } = useXyzen();
 
   // All user agents for lookup
@@ -288,6 +289,8 @@ export default function ChatToolbar({
             agent={currentAgent}
             onUpdateAgent={updateAgent}
             mcpInfo={currentMcpInfo}
+            allMcpServers={mcpServers}
+            onOpenSettings={() => openSettingsModal("mcp")}
             sessionKnowledgeSetId={currentChannel?.knowledge_set_id}
             onUpdateSessionKnowledge={handleKnowledgeSetChange}
           />
@@ -328,9 +331,15 @@ export default function ChatToolbar({
                 )}
 
                 {/* MCP Tool Button */}
-                {currentMcpInfo && (
+                {currentAgent && (
                   <McpToolsButton
-                    mcpInfo={currentMcpInfo}
+                    mcpInfo={
+                      currentMcpInfo || { agent: currentAgent, servers: [] }
+                    }
+                    allMcpServers={mcpServers}
+                    agent={currentAgent}
+                    onUpdateAgent={updateAgent}
+                    onOpenSettings={() => openSettingsModal("mcp")}
                     buttonClassName={cn(
                       toolbarButtonClass,
                       "w-auto px-2 gap-1.5",
diff --git a/web/src/components/layouts/components/ChatToolbar/McpToolsButton.tsx b/web/src/components/layouts/components/ChatToolbar/McpToolsButton.tsx
index 0ba7fdac..2dd2d549 100644
--- a/web/src/components/layouts/components/ChatToolbar/McpToolsButton.tsx
+++ b/web/src/components/layouts/components/ChatToolbar/McpToolsButton.tsx
@@ -1,21 +1,22 @@
 /**
- * MCP Tools Button with hover tooltip
+ * MCP Tools Button with interactive Popover
  *
- * Displays connected MCP servers and their available tools.
+ * Allows users to toggle MCP servers on/off for the current agent.
  */
 
 import McpIcon from "@/assets/McpIcon";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 import type { Agent } from "@/types/agents";
+import type { McpServer } from "@/types/mcp";
+import { CheckIcon, Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-interface McpServer {
-  id: string;
-  name: string;
-  status?: string; // "online" | "offline" or other statuses
-  tools?: Array<{ name: string }>;
-}
-
 interface McpInfo {
   agent: Agent;
   servers: McpServer[];
@@ -23,114 +24,217 @@ interface McpInfo {
 
 interface McpToolsButtonProps {
   mcpInfo: McpInfo;
+  allMcpServers: McpServer[];
+  agent: Agent;
+  onUpdateAgent: (agent: Agent) => Promise<void>;
+  onOpenSettings?: () => void;
   buttonClassName?: string;
 }
 
 export function McpToolsButton({
   mcpInfo,
+  allMcpServers,
+  agent,
+  onUpdateAgent,
+  onOpenSettings,
   buttonClassName,
 }: McpToolsButtonProps) {
   const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const [isUpdating, setIsUpdating] = useState<string | null>(null);
+
   const totalTools = mcpInfo.servers.reduce(
     (total, server) => total + (server.tools?.length || 0),
     0,
   );
 
-  return (
-    <div className="relative group/mcp w-fit">
-      <button
-        className={cn(buttonClassName, "w-auto px-2 gap-1.5")}
-        title={t("app.toolbar.mcpTools")}
-      >
-        <McpIcon className="h-4 w-4" />
-        {mcpInfo.servers.length > 0 && (
-          <span className="rounded-full bg-indigo-100 px-1.5 py-0.5 text-xs font-medium text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400">
-            {totalTools}
-          </span>
-        )}
-      </button>
-
-      {/* MCP Tooltip */}
-      <div className="transition-opacity overflow-hidden hidden w-80 group-hover/mcp:block absolute bottom-full left-0 mb-2 rounded-sm border border-neutral-200 bg-white p-3 shadow-lg dark:border-neutral-700 dark:bg-neutral-800 z-50">
-        <McpTooltipContent mcpInfo={mcpInfo} />
-        {/* Arrow */}
-        <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-white dark:border-t-neutral-800" />
-      </div>
-    </div>
+  // Get connected server IDs from agent
+  const connectedServerIds = new Set(
+    agent.mcp_server_ids || agent.mcp_servers?.map((s) => s.id) || [],
   );
-}
 
-/**
- * MCP Tooltip content component
- */
-function McpTooltipContent({ mcpInfo }: { mcpInfo: McpInfo }) {
-  const { t } = useTranslation();
+  // Separate servers into connected and available
+  const connectedServers = allMcpServers.filter((server) =>
+    connectedServerIds.has(server.id),
+  );
+  const availableServers = allMcpServers.filter(
+    (server) => !connectedServerIds.has(server.id),
+  );
+
+  const handleMcpServerToggle = async (serverId: string, connect: boolean) => {
+    if (!agent || isUpdating) return;
+
+    setIsUpdating(serverId);
+    try {
+      const currentIds =
+        agent.mcp_server_ids || agent.mcp_servers?.map((s) => s.id) || [];
+      const newIds = connect
+        ? [...currentIds, serverId]
+        : currentIds.filter((id) => id !== serverId);
+
+      await onUpdateAgent({
+        ...agent,
+        mcp_server_ids: newIds,
+      });
+    } catch (error) {
+      console.error("Failed to update MCP server:", error);
+    } finally {
+      setIsUpdating(null);
+    }
+  };
 
   return (
-    <>
-      <div className="mb-2">
-        <div className="flex items-center space-x-2">
-          <McpIcon className="h-4 w-4 text-indigo-500" />
-          <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
-            {t("app.toolbar.mcpTools")}
-          </span>
-        </div>
-        <div className="mt-1 text-xs text-neutral-600 dark:text-neutral-400">
-          {t("app.chat.assistantsTitle")}: {mcpInfo.agent.name}
-        </div>
-      </div>
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className={cn(buttonClassName, "w-auto px-2 gap-1.5")}
+          title={t("app.toolbar.mcpTools")}
+        >
+          <McpIcon className="h-4 w-4" />
+          {totalTools > 0 && (
+            <span className="rounded-full bg-indigo-100 px-1.5 py-0.5 text-xs font-medium text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400">
+              {totalTools}
+            </span>
+          )}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-2" align="start">
+        <div className="space-y-2">
+          {/* Header */}
+          <div className="px-2 py-1">
+            <div className="flex items-center space-x-2">
+              <McpIcon className="h-4 w-4 text-indigo-500" />
+              <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
+                {t("app.toolbar.mcpTools")}
+              </span>
+            </div>
+            <div className="mt-0.5 text-xs text-neutral-500 dark:text-neutral-400">
+              {t("app.chat.assistantsTitle")}: {agent.name}
+            </div>
+          </div>
 
-      <div className="space-y-2">
-        {mcpInfo.servers.map((server) => (
-          <McpServerCard key={server.id} server={server} />
-        ))}
-      </div>
-    </>
+          {/* Connected Servers Section */}
+          {connectedServers.length > 0 && (
+            <div>
+              <h4 className="text-xs font-medium text-neutral-500 dark:text-neutral-400 px-2 py-1">
+                {t("app.toolbar.mcpConnected", "Connected")}
+              </h4>
+              <div className="space-y-0.5">
+                {connectedServers.map((server) => (
+                  <McpServerToggleItem
+                    key={server.id}
+                    server={server}
+                    isConnected={true}
+                    isUpdating={isUpdating === server.id}
+                    onToggle={() => handleMcpServerToggle(server.id, false)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Available Servers Section */}
+          {availableServers.length > 0 && (
+            <div>
+              <h4 className="text-xs font-medium text-neutral-500 dark:text-neutral-400 px-2 py-1">
+                {t("app.toolbar.mcpAvailable", "Available")}
+              </h4>
+              <div className="space-y-0.5">
+                {availableServers.map((server) => (
+                  <McpServerToggleItem
+                    key={server.id}
+                    server={server}
+                    isConnected={false}
+                    isUpdating={isUpdating === server.id}
+                    onToggle={() => handleMcpServerToggle(server.id, true)}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Empty State */}
+          {allMcpServers.length === 0 && (
+            <div className="px-2 py-4 text-center">
+              <div className="text-sm text-neutral-500 dark:text-neutral-400">
+                {t("app.toolbar.mcpNoServers", "No MCP servers configured")}
+              </div>
+              <button
+                onClick={() => {
+                  setIsOpen(false);
+                  onOpenSettings?.();
+                }}
+                className="mt-2 inline-flex items-center gap-1.5 text-xs text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+              >
+                <Cog6ToothIcon className="h-3.5 w-3.5" />
+                {t("app.toolbar.mcpOpenSettings", "Open Settings")}
+              </button>
+            </div>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
   );
 }
 
 /**
- * Individual MCP server card
+ * Individual MCP server toggle item
  */
-function McpServerCard({ server }: { server: McpServer }) {
+interface McpServerToggleItemProps {
+  server: McpServer;
+  isConnected: boolean;
+  isUpdating: boolean;
+  onToggle: () => void;
+}
+
+function McpServerToggleItem({
+  server,
+  isConnected,
+  isUpdating,
+  onToggle,
+}: McpServerToggleItemProps) {
+  const { t } = useTranslation();
+  const isOnline = server.status === "online";
+  const isDisabled = !isOnline || isUpdating;
+
   return (
-    <div className="rounded-sm bg-neutral-50 p-2 dark:bg-neutral-700/50">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          <div
-            className={`h-2 w-2 rounded-full ${
-              server.status === "online" ? "bg-green-500" : "bg-red-500"
-            }`}
-          />
-          <span className="text-sm font-medium text-neutral-900 dark:text-neutral-100">
+    <button
+      onClick={onToggle}
+      disabled={isDisabled}
+      className={cn(
+        "w-full flex items-center justify-between px-2 py-2 rounded-md transition-colors",
+        "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+        isConnected && "bg-indigo-50 dark:bg-indigo-900/20",
+        isDisabled && "opacity-50 cursor-not-allowed",
+      )}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        {/* Status indicator */}
+        <div
+          className={cn(
+            "h-2 w-2 rounded-full flex-shrink-0",
+            isOnline ? "bg-green-500" : "bg-neutral-400",
+          )}
+        />
+        <div className="min-w-0 text-left">
+          <div className="text-sm font-medium text-neutral-900 dark:text-neutral-100 truncate">
             {server.name}
-          </span>
-        </div>
-        <span className="text-xs text-neutral-500 dark:text-neutral-400">
-          {server.tools?.length || 0} 工具
-        </span>
-      </div>
-
-      {server.tools && server.tools.length > 0 && (
-        <div className="mt-2">
-          <div className="flex flex-wrap gap-1">
-            {server.tools.slice(0, 5).map((tool, index) => (
-              <span
-                key={index}
-                className="inline-block rounded bg-indigo-100 px-2 py-0.5 text-xs text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
-              >
-                {tool.name}
-              </span>
-            ))}
-            {server.tools.length > 5 && (
-              <span className="inline-block rounded bg-neutral-200 px-2 py-0.5 text-xs text-neutral-600 dark:bg-neutral-600 dark:text-neutral-300">
-                +{server.tools.length - 5}
-              </span>
-            )}
+          </div>
+          <div className="text-xs text-neutral-500 dark:text-neutral-400">
+            {isOnline
+              ? `${server.tools?.length || 0} ${t("app.toolbar.mcpToolsCount", "tools")}`
+              : t("app.toolbar.mcpOffline", "offline")}
           </div>
         </div>
-      )}
-    </div>
+      </div>
+      <div className="flex-shrink-0 ml-2">
+        {isUpdating ? (
+          <div className="h-4 w-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+        ) : isConnected ? (
+          <CheckIcon className="h-4 w-4 text-indigo-500" />
+        ) : null}
+      </div>
+    </button>
   );
 }
 
diff --git a/web/src/components/layouts/components/ChatToolbar/MobileMoreMenu.tsx b/web/src/components/layouts/components/ChatToolbar/MobileMoreMenu.tsx
index 86793050..6b7b3afa 100644
--- a/web/src/components/layouts/components/ChatToolbar/MobileMoreMenu.tsx
+++ b/web/src/components/layouts/components/ChatToolbar/MobileMoreMenu.tsx
@@ -1,19 +1,26 @@
 /**
  * Mobile More Menu
  *
- * A popup menu shown on mobile with tool selector and MCP info.
+ * A popup menu shown on mobile with tool selector and MCP management.
  */
 
 import McpIcon from "@/assets/McpIcon";
+import { cn } from "@/lib/utils";
 import type { Agent } from "@/types/agents";
+import type { McpServer } from "@/types/mcp";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  Cog6ToothIcon,
+} from "@heroicons/react/24/outline";
 import { AnimatePresence, motion } from "motion/react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { ToolSelector } from "./ToolSelector";
 
 interface McpInfo {
-  servers: Array<{
-    id: string;
-    tools?: Array<{ name: string }>;
-  }>;
+  agent: Agent;
+  servers: McpServer[];
 }
 
 interface MobileMoreMenuProps {
@@ -21,6 +28,8 @@ interface MobileMoreMenuProps {
   agent: Agent | null;
   onUpdateAgent: (agent: Agent) => Promise<void>;
   mcpInfo: McpInfo | null;
+  allMcpServers?: McpServer[];
+  onOpenSettings?: () => void;
   sessionKnowledgeSetId?: string | null;
   onUpdateSessionKnowledge?: (knowledgeSetId: string | null) => Promise<void>;
 }
@@ -30,14 +39,61 @@ export function MobileMoreMenu({
   agent,
   onUpdateAgent,
   mcpInfo,
+  allMcpServers = [],
+  onOpenSettings,
   sessionKnowledgeSetId,
   onUpdateSessionKnowledge,
 }: MobileMoreMenuProps) {
+  const { t } = useTranslation();
+  const [showMcpList, setShowMcpList] = useState(false);
+  const [isUpdating, setIsUpdating] = useState<string | null>(null);
+
   const handleUpdateAgent = async (updatedAgent: Agent) => {
     await onUpdateAgent(updatedAgent);
     // Don't close on toggle - let user configure multiple tools
   };
 
+  // Get connected server IDs from agent
+  const connectedServerIds = new Set(
+    agent?.mcp_server_ids || agent?.mcp_servers?.map((s) => s.id) || [],
+  );
+
+  // Separate servers into connected and available
+  const connectedServers = allMcpServers.filter((server) =>
+    connectedServerIds.has(server.id),
+  );
+  const availableServers = allMcpServers.filter(
+    (server) => !connectedServerIds.has(server.id),
+  );
+
+  const totalTools =
+    mcpInfo?.servers.reduce(
+      (total, server) => total + (server.tools?.length || 0),
+      0,
+    ) || 0;
+
+  const handleMcpServerToggle = async (serverId: string, connect: boolean) => {
+    if (!agent || isUpdating) return;
+
+    setIsUpdating(serverId);
+    try {
+      const currentIds =
+        agent.mcp_server_ids || agent.mcp_servers?.map((s) => s.id) || [];
+      const newIds = connect
+        ? [...currentIds, serverId]
+        : currentIds.filter((id) => id !== serverId);
+
+      await onUpdateAgent({
+        ...agent,
+        mcp_server_ids: newIds,
+      });
+    } catch (error) {
+      console.error("Failed to update MCP server:", error);
+    } finally {
+      setIsUpdating(null);
+    }
+  };
+
   return (
     <AnimatePresence>
       {isOpen && (
@@ -64,23 +120,114 @@ export function MobileMoreMenu({
               </div>
             )}
 
-            {/* MCP Tool Info */}
-            {mcpInfo && (
-              <div className="w-full px-2.5 py-1.5 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors">
-                <div className="flex items-center justify-between text-xs font-medium text-neutral-600 dark:text-neutral-400">
-                  <div className="flex items-center gap-1.5">
-                    <McpIcon className="h-3.5 w-3.5" />
-                    <span>MCP Tools</span>
-                  </div>
-                  {mcpInfo.servers.length > 0 && (
-                    <span className="rounded-full bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400">
-                      {mcpInfo.servers.reduce(
-                        (total, server) => total + (server.tools?.length || 0),
-                        0,
+            {/* MCP Tool Section - Expandable */}
+            {agent && (
+              <div className="w-full">
+                <button
+                  onClick={() => setShowMcpList(!showMcpList)}
+                  className="w-full px-2.5 py-1.5 rounded-md hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                >
+                  <div className="flex items-center justify-between text-xs font-medium text-neutral-600 dark:text-neutral-400">
+                    <div className="flex items-center gap-1.5">
+                      <McpIcon className="h-3.5 w-3.5" />
+                      <span>{t("app.toolbar.mcpTools")}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      {totalTools > 0 && (
+                        <span className="rounded-full bg-indigo-100 px-1.5 py-0.5 text-[10px] font-medium text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400">
+                          {totalTools}
+                        </span>
                       )}
-                    </span>
+                      <ChevronDownIcon
+                        className={cn(
+                          "h-3 w-3 transition-transform",
+                          showMcpList && "rotate-180",
+                        )}
+                      />
+                    </div>
+                  </div>
+                </button>
+
+                {/* Expandable MCP Server List */}
+                <AnimatePresence>
+                  {showMcpList && (
+                    <motion.div
+                      initial={{ opacity: 0, height: 0 }}
+                      animate={{ opacity: 1, height: "auto" }}
+                      exit={{ opacity: 0, height: 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="overflow-hidden"
+                    >
+                      <div className="ml-2 mt-1 space-y-2 border-l-2 border-indigo-200 dark:border-indigo-800 pl-2">
+                        {/* Empty State */}
+                        {allMcpServers.length === 0 && (
+                          <div className="px-2 py-3 text-center">
+                            <div className="text-xs text-neutral-500 dark:text-neutral-400">
+                              {t(
+                                "app.toolbar.mcpNoServers",
+                                "No MCP servers configured",
+                              )}
+                            </div>
+                            <button
+                              onClick={() => onOpenSettings?.()}
+                              className="mt-1.5 inline-flex items-center gap-1 text-[10px] text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300"
+                            >
+                              <Cog6ToothIcon className="h-3 w-3" />
+                              {t(
+                                "app.toolbar.mcpOpenSettings",
+                                "Open Settings",
+                              )}
+                            </button>
+                          </div>
+                        )}
+
+                        {/* Connected Servers */}
+                        {connectedServers.length > 0 && (
+                          <div>
+                            <div className="text-[10px] font-medium text-neutral-400 dark:text-neutral-500 px-2 py-0.5">
+                              {t("app.toolbar.mcpConnected", "Connected")}
+                            </div>
+                            <div className="space-y-0.5">
+                              {connectedServers.map((server) => (
+                                <MobileMcpServerItem
+                                  key={server.id}
+                                  server={server}
+                                  isConnected={true}
+                                  isUpdating={isUpdating === server.id}
+                                  onToggle={() =>
+                                    handleMcpServerToggle(server.id, false)
+                                  }
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Available Servers */}
+                        {availableServers.length > 0 && (
+                          <div>
+                            <div className="text-[10px] font-medium text-neutral-400 dark:text-neutral-500 px-2 py-0.5">
+                              {t("app.toolbar.mcpAvailable", "Available")}
+                            </div>
+                            <div className="space-y-0.5">
+                              {availableServers.map((server) => (
+                                <MobileMcpServerItem
+                                  key={server.id}
+                                  server={server}
+                                  isConnected={false}
+                                  isUpdating={isUpdating === server.id}
+                                  onToggle={() =>
+                                    handleMcpServerToggle(server.id, true)
+                                  }
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </motion.div>
                   )}
-                </div>
+                </AnimatePresence>
               </div>
             )}
           </div>
@@ -90,4 +237,64 @@ export function MobileMoreMenu({
   );
 }
 
+/**
+ * Mobile MCP Server toggle item
+ */
+interface MobileMcpServerItemProps {
+  server: McpServer;
+  isConnected: boolean;
+  isUpdating: boolean;
+  onToggle: () => void;
+}
+
+function MobileMcpServerItem({
+  server,
+  isConnected,
+  isUpdating,
+  onToggle,
+}: MobileMcpServerItemProps) {
+  const { t } = useTranslation();
+  const isOnline = server.status === "online";
+  const isDisabled = !isOnline || isUpdating;
+
+  return (
+    <button
+      onClick={onToggle}
+      disabled={isDisabled}
+      className={cn(
+        "w-full flex items-center justify-between px-2 py-1.5 rounded text-xs transition-colors",
+        "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+        isConnected && "bg-indigo-50 dark:bg-indigo-900/20",
+        isDisabled && "opacity-50 cursor-not-allowed",
+      )}
+    >
+      <div className="flex items-center gap-2 min-w-0">
+        <div
+          className={cn(
+            "h-1.5 w-1.5 rounded-full flex-shrink-0",
+            isOnline ? "bg-green-500" : "bg-neutral-400",
+          )}
+        />
+        <div className="min-w-0 text-left">
+          <div className="font-medium text-neutral-900 dark:text-neutral-100 truncate">
+            {server.name}
+          </div>
+          <div className="text-[10px] text-neutral-500 dark:text-neutral-400">
+            {isOnline
+              ? `${server.tools?.length || 0} ${t("app.toolbar.mcpToolsCount", "tools")}`
+              : t("app.toolbar.mcpOffline", "offline")}
+          </div>
+        </div>
+      </div>
+      <div className="flex-shrink-0 ml-2">
+        {isUpdating ? (
+          <div className="h-3 w-3 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+        ) : isConnected ? (
+          <CheckIcon className="h-3 w-3 text-indigo-500" />
+        ) : null}
+      </div>
+    </button>
+  );
+}
+
 export default MobileMoreMenu;
diff --git a/web/src/i18n/locales/en/app.json b/web/src/i18n/locales/en/app.json
index 7435f459..beea8f01 100644
--- a/web/src/i18n/locales/en/app.json
+++ b/web/src/i18n/locales/en/app.json
@@ -33,6 +33,12 @@
     "knowledgeConnect": "Connect Knowledge Base",
     "knowledgeDisconnect": "Disconnect",
     "mcpTools": "MCP Tools Connected",
+    "mcpConnected": "Connected",
+    "mcpAvailable": "Available",
+    "mcpToolsCount": "tools",
+    "mcpOffline": "offline",
+    "mcpNoServers": "No MCP servers configured",
+    "mcpOpenSettings": "Open Settings",
     "searchOff": "Off",
     "searchOffDesc": "Do not use search",
     "searchBuiltinDesc": "Use model's native search capability",
diff --git a/web/src/i18n/locales/zh/app.json b/web/src/i18n/locales/zh/app.json
index 2ec06249..9e689381 100644
--- a/web/src/i18n/locales/zh/app.json
+++ b/web/src/i18n/locales/zh/app.json
@@ -33,6 +33,12 @@
     "knowledgeConnect": "连接知识库",
     "knowledgeDisconnect": "断开连接",
     "mcpTools": "MCP 工具已连接",
+    "mcpConnected": "已连接",
+    "mcpAvailable": "可用",
+    "mcpToolsCount": "个工具",
+    "mcpOffline": "离线",
+    "mcpNoServers": "未配置 MCP 服务器",
+    "mcpOpenSettings": "打开设置",
     "searchOff": "关闭",
     "searchOffDesc": "不使用搜索功能",
     "searchBuiltinDesc": "使用模型原生搜索能力",
diff --git a/web/src/lib/Markdown.tsx b/web/src/lib/Markdown.tsx
index 9f1c8f02..f3555bbe 100644
--- a/web/src/lib/Markdown.tsx
+++ b/web/src/lib/Markdown.tsx
@@ -443,9 +443,9 @@ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 const isXyzenDownloadUrl = (src: string) =>
   src.includes("/xyzen/api/v1/files/") && src.includes("/download");
 
-const MarkdownImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
-  props,
-) => {
+const MarkdownImageComponent: React.FC<
+  React.ImgHTMLAttributes<HTMLImageElement>
+> = (props) => {
   const { src, alt, ...rest } = props;
   const backendUrl = useXyzen((state) => state.backendUrl);
   const token = useXyzen((state) => state.token);
@@ -581,6 +581,7 @@ const MarkdownImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
             <img
               src={imageSrc}
               alt={alt}
+              decoding="async"
               {...rest}
               className="block w-[95%] sm:max-w-80 max-h-80 h-auto rounded-lg transition-all duration-200 group-hover/img:scale-[1.02] group-hover/img:shadow-lg"
             />
@@ -638,6 +639,14 @@ const MarkdownImage: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
   );
 };
 
+// Memoize MarkdownImage to prevent re-renders during streaming
+// Only re-render when src or alt changes
+const MarkdownImage = React.memo(
+  MarkdownImageComponent,
+  (prevProps, nextProps) =>
+    prevProps.src === nextProps.src && prevProps.alt === nextProps.alt,
+);
+
 // Helper component to catch Escape key for image lightbox
 function ImageLightboxEscapeCatcher({ onEscape }: { onEscape: () => void }) {
   useEffect(() => {
@@ -761,9 +770,7 @@ const Markdown: React.FC<MarkdownProps> = function Markdown(props) {
           </code>
         );
       },
-      img(props: React.ComponentPropsWithoutRef<"img">) {
-        return <MarkdownImage {...props} />;
-      },
+      img: MarkdownImage,
     }),
     [isDark],
   );
diff --git a/web/src/service/fileService.ts b/web/src/service/fileService.ts
index 8fcb0333..296d9264 100644
--- a/web/src/service/fileService.ts
+++ b/web/src/service/fileService.ts
@@ -388,7 +388,8 @@ class FileService {
   }
 
   /**
-   * Generate thumbnail URL for preview
+   * Generate thumbnail URL for preview using Canvas API
+   * Resizes image to max 160px dimension and outputs as JPEG for small file size
    */
   generateThumbnail(file: File): Promise<string> {
     return new Promise((resolve, reject) => {
@@ -397,16 +398,53 @@ class FileService {
         return;
       }
 
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          resolve(e.target.result as string);
+      const MAX_SIZE = 160;
+      const objectUrl = URL.createObjectURL(file);
+      const img = new Image();
+
+      img.onload = () => {
+        URL.revokeObjectURL(objectUrl);
+
+        // Calculate scaled dimensions maintaining aspect ratio
+        let width = img.width;
+        let height = img.height;
+
+        if (width > height) {
+          if (width > MAX_SIZE) {
+            height = Math.round((height * MAX_SIZE) / width);
+            width = MAX_SIZE;
+          }
         } else {
-          reject(new Error("Failed to read file"));
+          if (height > MAX_SIZE) {
+            width = Math.round((width * MAX_SIZE) / height);
+            height = MAX_SIZE;
+          }
+        }
+
+        // Create canvas and draw scaled image
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          reject(new Error("Failed to get canvas context"));
+          return;
         }
+
+        ctx.drawImage(img, 0, 0, width, height);
+
+        // Export as JPEG with 0.8 quality for small file size
+        const thumbnailUrl = canvas.toDataURL("image/jpeg", 0.8);
+        resolve(thumbnailUrl);
       };
-      reader.onerror = () => reject(new Error("Failed to read file"));
-      reader.readAsDataURL(file);
+
+      img.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        reject(new Error("Failed to load image"));
+      };
+
+      img.src = objectUrl;
     });
   }
 }
diff --git a/web/src/store/slices/chatSlice.ts b/web/src/store/slices/chatSlice.ts
index e59b7df4..058949c0 100644
--- a/web/src/store/slices/chatSlice.ts
+++ b/web/src/store/slices/chatSlice.ts
@@ -402,27 +402,9 @@ export const createChatSlice: StateCreator<
      * - If no session exists, creates one with a default topic
      */
     activateChannelForAgent: async (agentId: string) => {
-      const { channels, chatHistory, backendUrl } = get();
+      const { backendUrl } = get();
 
-      // First, check if we already have a channel for this agent
-      const existingChannel = Object.values(channels).find(
-        (ch) => ch.agentId === agentId,
-      );
-
-      if (existingChannel) {
-        // Already have a channel, activate it
-        await get().activateChannel(existingChannel.id);
-        return;
-      }
-
-      // Check chat history for existing topics with this agent
-      const existingHistory = chatHistory.find((h) => h.sessionId === agentId);
-      if (existingHistory) {
-        await get().activateChannel(existingHistory.id);
-        return;
-      }
-
-      // No existing channel, try to find or create a session for this agent
+      // Always fetch from backend to get the most recent topic
       const token = authService.getToken();
       if (!token) {
         console.error("No authentication token available");
@@ -446,8 +428,8 @@ export const createChatSlice: StateCreator<
 
           // Get the most recent topic for this session, or create one
           if (session.topics && session.topics.length > 0) {
-            // Activate the most recent topic
-            const latestTopic = session.topics[session.topics.length - 1];
+            // Activate the most recent topic (backend returns topics ordered by updated_at descending)
+            const latestTopic = session.topics[0];
 
             // Create channel if doesn't exist
             const channel: ChatChannel = {